/* style.css - mobile-first, modern look */
:root {
  --bg:#0b0e1a; --panel:#0f1530; --card:#0f1530; --muted:#9aa3c7;
  --text:#eef2ff; --accent:#6c8bff; --danger:#ff5c7a; --warn:#ffb84d;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#020417 0%, #07102a 100%);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:18px auto;padding:12px}
.topbar{background:transparent;padding:12px 0}
.brand a{font-weight:700;color:#fff}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.auth-card{max-width:420px;margin:6vh auto;padding:22px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);text-align:center}
.auth-card h1{margin:0 0 6px;font-size:20px}
.muted{color:var(--muted)}
.small{font-size:13px}
.form{display:grid;gap:12px;margin-top:18px}
.input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text)}
.btn{background:var(--accent);color:#fff;padding:10px 12px;border-radius:10px;border:0;cursor:pointer;font-weight:600}
.btn.alt{background:#25305c}
.btn.small{padding:6px 8px;font-size:13px}
.btn.tiny{padding:6px 8px;font-size:12px}
.btn.danger{background:var(--danger)}
.alert{background:#0f2236;border-radius:10px;padding:10px;margin:10px 0;color:#cfe6ff}
.alert.danger{background:#3a0f17;color:#ffdbe0}
.page-auth{display:flex;align-items:center;justify-content:center;min-height:80vh}

/* layout */
.container{display:grid;grid-template-columns:1fr;gap:16px}
.left,.right{display:block}
.card{background:var(--card);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow)}
.rot-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rot-list li{padding:8px;border-radius:10px;background:var(--glass);border:1px solid rgba(255,255,255,0.02)}
.rot-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rot-slug{font-weight:700;color:#fff}
.chip{background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:999px;font-size:13px;color:var(--muted);margin-left:6px}
.rot-url{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:8px;font-size:13px}
.input.num{width:96px}

/* big layout for larger screens */
@media(min-width:900px){
  .container{grid-template-columns:320px 1fr}
  .left{position:sticky;top:18px;height:calc(100vh - 36px);overflow:auto}
  .right{padding-left:8px}
}

/* tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,0.02);text-align:left;font-size:14px}

/* utilities */
.row{display:flex;gap:8px;margin-bottom:8px}
.muted.small{color:var(--muted);font-size:13px}
.footer{padding:12px;text-align:center;color:var(--muted);font-size:13px}