/* ============================================================
   StreamLink — stylesheet
   ============================================================ */
:root{
    --bg:        #0e1116;
    --panel:     #171c24;
    --panel-2:   #1f2630;
    --border:    #2a323d;
    --text:      #e6eaf0;
    --muted:     #8b95a3;
    --primary:   #4f8cff;
    --primary-d: #356fe0;
    --danger:    #ff5d5d;
    --success:   #36d39a;
    --radius:    14px;
    --shadow:    0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    background:var(--bg);
    color:var(--text);
    font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

.muted{ color:var(--muted); }
.center{ text-align:center; }

/* ---------- brand ---------- */
.brand{ font-size:30px; font-weight:800; letter-spacing:-.5px; margin:0 0 4px; }
.brand span{ color:var(--primary); }
.brand.small{ font-size:20px; }

/* ---------- topbar ---------- */
.topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px; background:var(--panel);
    border-bottom:1px solid var(--border);
}
.topbar nav{ display:flex; align-items:center; gap:14px; }

/* ---------- layout ---------- */
.container{ max-width:1000px; margin:26px auto; padding:0 18px; }
.grid{ display:grid; gap:18px; }
.grid.two{ grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .grid.two{ grid-template-columns:1fr; } }

.card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
}
.card h2{ margin:0 0 14px; font-size:18px; }

/* ---------- auth ---------- */
.auth-body{
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:20px;
    background:radial-gradient(1200px 600px at 50% -10%, #1b2330 0%, var(--bg) 60%);
}
.auth-card{
    width:100%; max-width:380px;
    background:var(--panel); border:1px solid var(--border);
    border-radius:var(--radius); padding:30px; box-shadow:var(--shadow);
}
.auth-card .muted{ margin-top:0; }

/* ---------- forms ---------- */
label{ display:block; margin:0 0 14px; font-size:13px; color:var(--muted); }
input[type=text],input[type=email],input[type=password]{
    width:100%; margin-top:6px;
    padding:11px 12px; font-size:15px; color:var(--text);
    background:var(--panel-2); border:1px solid var(--border);
    border-radius:10px; outline:none;
}
input:focus{ border-color:var(--primary); }

/* ---------- buttons ---------- */
.btn{
    display:inline-block; cursor:pointer;
    padding:10px 16px; font-size:14px; font-weight:600;
    color:var(--text); background:var(--panel-2);
    border:1px solid var(--border); border-radius:10px;
    transition:.15s; text-decoration:none;
}
.btn:hover{ background:#283040; text-decoration:none; }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primary:hover{ background:var(--primary-d); }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.ghost{ background:transparent; }
.btn.block{ width:100%; }
.btn.small{ padding:6px 11px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- alerts ---------- */
.alert{ padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.alert.error{ background:rgba(255,93,93,.12); border:1px solid var(--danger); color:#ffb3b3; }
.alert.success{ background:rgba(54,211,154,.12); border:1px solid var(--success); color:#9bf0cf; }

/* ---------- table ---------- */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ text-align:left; padding:11px 10px; border-bottom:1px solid var(--border); }
.table th{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.row-actions{ display:flex; gap:8px; }
.code{
    background:var(--panel-2); padding:3px 8px; border-radius:7px;
    border:1px solid var(--border); letter-spacing:1px;
}

/* ---------- badges ---------- */
.badge{
    font-size:12px; padding:3px 9px; border-radius:999px;
    background:var(--panel-2); border:1px solid var(--border); color:var(--muted);
}
.badge.live{ color:#fff; background:var(--danger); border-color:var(--danger); }

/* ---------- stream page ---------- */
.stage{
    background:#000; border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
}
.stage video{ width:100%; height:100%; object-fit:contain; background:#000; }
.stage .placeholder{ color:var(--muted); text-align:center; padding:30px; }

.controls{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; align-items:center; }
.spacer{ flex:1; }

.status{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--muted);
}
.dot{ width:9px; height:9px; border-radius:50%; background:var(--muted); }
.dot.connecting{ background:#f1c40f; animation:pulse 1s infinite; }
.dot.live{ background:var(--success); }
.dot.failed{ background:var(--danger); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

.share-box{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    margin-top:14px; padding:12px 14px;
    background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
}
.share-box .code{ font-size:18px; }

/* ---------- big tap-to-share overlay (broadcaster) ---------- */
.big-share{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; width:100%; height:100%; padding:30px;
    background:transparent; border:none; color:var(--text);
    cursor:pointer; text-align:center; font:inherit;
}
.big-share:hover{ background:rgba(79,140,255,.08); }
.big-share .share-icon{ font-size:48px; line-height:1; }
.big-share .share-title{ font-size:18px; font-weight:700; }
.big-share .share-sub{ font-size:13px; }
.big-share:disabled{ cursor:default; }
.big-share:disabled:hover{ background:transparent; }