:root{
  --bg:#09070f;
  --bg-elevated:#0f0c18;
  --surface:#151020;
  --surface-2:#1b1428;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --text-primary:#f4f2f8;
  --text-secondary:#a9a3b8;
  --text-tertiary:#726b85;

  --purple:#8c5cf6;
  --purple-glow:rgba(140,92,246,.35);
  --orange:#ff7a3d;
  --orange-glow:rgba(255,122,61,.35);
  --danger:#ef4444;

  --radius-card:16px;
  --radius-input:10px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{color-scheme:dark;}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text-primary);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,.btn,.brand span{font-family:'Space Grotesk',system-ui,sans-serif;}
h1,h2{margin:0 0 10px;font-weight:600;color:var(--text-primary);}
p{margin:0;color:var(--text-secondary);line-height:1.6;}
a{color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
select{font:inherit;}
img{max-width:100%;}
.hidden{display:none !important;}

@keyframes viewIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:no-preference){
  .view:not(.hidden){animation:viewIn .5s var(--ease);}
}

/* ---------- Login ---------- */
#login-view{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px;
}
.login-card{
  max-width:420px;
  width:100%;
  text-align:center;
  padding:44px 36px;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--surface);
}
.login-card .brand-mark{width:64px;height:64px;margin-bottom:20px;}
.login-card h1{
  background:linear-gradient(120deg,var(--purple),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1.9rem;
}
.login-card p{margin-bottom:26px;}
.hint{font-size:.85rem;margin-top:14px;min-height:1.2em;color:var(--text-tertiary);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;font-size:.92rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(120deg,var(--purple),var(--orange));color:#0a0810;box-shadow:0 10px 26px -10px var(--purple-glow);}
.btn-ghost{background:transparent;border:1px solid var(--border-strong);color:var(--text-primary);}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple);}
.btn-danger{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.35);}
.btn-danger:hover{background:var(--danger);color:#fff;}
.icon-btn{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--text-secondary);font-size:1.1rem;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.icon-btn:hover{background:var(--surface-2);color:var(--text-primary);}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(16px,3vw,36px);
  background:rgba(9,7,15,.75);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;}
.brand-mark-sm{width:26px;height:26px;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.connection-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--text-tertiary);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.connection-dot.online{background:var(--purple);box-shadow:0 0 8px 1px var(--purple-glow);}
.connection-dot.offline{background:var(--danger);}
.user-badge{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--text-secondary);}
.user-badge img{border-radius:50%;background:var(--surface-2);}

/* ---------- Layout ---------- */
.layout{
  max-width:1180px;margin:0 auto;
  padding:28px clamp(16px,3vw,36px) 80px;
  display:grid;
  grid-template-columns:1fr 280px;
  gap:24px;
  align-items:start;
}
.status-text{font-size:1.02rem;color:var(--text-primary);margin-bottom:20px;}

.panel{
  margin-bottom:20px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--surface);
}
.panel h2{font-size:1.05rem;}

.sidebar{
  position:sticky;top:84px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--surface);
}
.sidebar h2{font-size:.95rem;color:var(--text-secondary);}

/* ---------- Share panel ---------- */
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;}
.share-state label{
  display:flex;flex-direction:column;gap:6px;
  font-size:.82rem;color:var(--text-secondary);
}
.share-state select{
  padding:9px 12px;border-radius:var(--radius-input);
  border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text-primary);
}
#local-preview,#webcam-preview{
  width:100%;max-width:480px;
  border-radius:12px;border:1px solid var(--border);
  background:#000;margin-bottom:16px;display:block;
}
.invite-btn{margin-top:14px;}
.btn-sm{padding:8px 16px;font-size:.82rem;}

/* ---------- Watchers / remote grids ---------- */
.watchers-grid,.remote-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.watch-card{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-radius:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-primary);
  text-align:left;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.watch-card:hover{transform:translateY(-2px);border-color:var(--purple);}
.watch-card .live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 var(--orange-glow);
  animation:pulse 1.8s ease-out infinite;
  flex:none;
}
@media (prefers-reduced-motion:no-preference){
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 var(--orange-glow);}
    70%{box-shadow:0 0 0 8px rgba(255,122,61,0);}
    100%{box-shadow:0 0 0 0 rgba(255,122,61,0);}
  }
}

.subsection-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin:22px 0 12px;
}
.subsection-head h3{
  margin:0;font-size:.85rem;font-weight:600;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.04em;
}

.remote-tile{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#000;}
.remote-tile video{width:100%;display:block;}
.remote-tile--webcam video{aspect-ratio:1/1;object-fit:cover;}
.remote-tile--screen video{aspect-ratio:16/9;object-fit:contain;}
.remote-tile .tile-label{
  position:absolute;left:10px;bottom:10px;
  padding:4px 10px;border-radius:999px;
  background:rgba(9,7,15,.72);backdrop-filter:blur(4px);
  font-size:.78rem;color:var(--text-primary);
}
.remote-tile .tile-close{
  position:absolute;top:8px;right:8px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(9,7,15,.6);color:var(--text-primary);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease);
}
.remote-tile .tile-close:hover{background:var(--danger);}

/* ---------- Participants ---------- */
.participants-list{display:flex;flex-direction:column;gap:4px;}
.participant{
  display:flex;align-items:center;gap:10px;
  padding:8px 6px;border-radius:10px;
  transition:background .2s var(--ease);
}
.participant:hover{background:var(--surface-2);}
.participant img{width:30px;height:30px;border-radius:50%;background:var(--surface-2);flex:none;}
.participant .name{font-size:.9rem;color:var(--text-primary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.participant .badges{display:flex;gap:6px;flex:none;}
.participant .badge{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;
}
.badge.badge-live{background:rgba(255,122,61,.15);color:var(--orange);}
.badge.badge-watching{background:rgba(140,92,246,.15);color:var(--purple);}

/* ---------- Legal footers ---------- */
.legal-footer,.app-footer{
  font-size:.78rem;color:var(--text-tertiary);
  text-align:center;
}
.legal-footer a,.app-footer a{
  color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px;
  transition:color .2s var(--ease);
}
.legal-footer a:hover,.app-footer a:hover{color:var(--purple);}
.legal-footer{line-height:2;}
.legal-footer span[aria-hidden]{margin:0 6px;color:var(--border-strong);}
.app-footer{
  max-width:1180px;margin:0 auto;
  padding:20px clamp(16px,3vw,36px) 40px;
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;
  border-top:1px solid var(--border);
}
.app-footer span[aria-hidden]{color:var(--border-strong);}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;
  transform:translate(-50%,140%);
  padding:12px 22px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  font-size:.88rem;color:var(--text-primary);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  transition:transform .4s var(--ease);
  z-index:50;
  max-width:90vw;
}
.toast.show{transform:translate(-50%,0);}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .layout{grid-template-columns:1fr;}
  .sidebar{position:static;order:-1;}
}
@media (max-width:520px){
  .user-badge span{display:none;}
  .row{flex-direction:column;align-items:stretch;}
}

/* ---------- Standalone policy page ---------- */
.policy-page{
  max-width:760px;margin:0 auto;
  padding:clamp(32px,6vw,64px) clamp(20px,4vw,36px) 80px;
}
.policy-page .back-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.88rem;color:var(--text-secondary);
  margin-bottom:28px;
  transition:color .2s var(--ease);
}
.policy-page .back-link:hover{color:var(--purple);}
.policy-page h1{
  font-size:clamp(1.6rem,3vw,2.1rem);
  margin-bottom:6px;
}
.policy-page .updated-at{font-size:.85rem;color:var(--text-tertiary);margin-bottom:32px;}
.policy-page .callout{
  padding:22px 24px;margin-bottom:32px;
  border-radius:var(--radius-card);
  border:1px solid rgba(255,122,61,.3);
  background:linear-gradient(155deg,rgba(140,92,246,.1),rgba(255,122,61,.08));
}
.policy-page .callout p{color:var(--text-primary);}
.policy-page .callout p+p{margin-top:10px;}
.policy-page section{margin-bottom:30px;}
.policy-page h2{font-size:1.1rem;margin-bottom:10px;}
.policy-page p{margin-bottom:12px;}
.policy-page p:last-child{margin-bottom:0;}
.policy-page ul{list-style:disc;padding-left:22px;display:grid;gap:6px;}
.policy-page li{color:var(--text-secondary);line-height:1.6;}
.policy-page a{color:var(--purple);text-decoration:underline;text-underline-offset:2px;}
.policy-page strong{color:var(--text-primary);}
.policy-page code{
  font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;
  font-size:.85em;
  padding:2px 6px;border-radius:5px;
  background:var(--surface-2);color:var(--text-primary);
}

/* ---------- Guide steps (Como Usar) ---------- */
.guide-steps{list-style:none;margin:0;padding:0;display:grid;gap:26px;}
.guide-step{display:flex;gap:18px;}
.guide-number{
  flex:none;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(120deg,var(--purple),var(--orange));
  color:#0a0810;font-weight:700;font-family:'Space Grotesk',sans-serif;
}
.guide-step h2{font-size:1.02rem;margin-bottom:6px;}
.guide-step p{margin:0;}
.guide-step code{
  font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;
  font-size:.85em;padding:2px 6px;border-radius:5px;
  background:var(--surface-2);color:var(--text-primary);
}
.guide-step a{color:var(--purple);text-decoration:underline;text-underline-offset:2px;}