/* LIVE ASSIST 2026 UI refresh. Existing behavior stays in style.css; this file only sets the visual system. */
:root{
  --bg:#f5f6fa;
  --card:#fff;
  --ink:#201828;
  --sub:#6e6677;
  --line:#e4e0e9;
  --line-strong:#d3ccd9;
  --tint:#f4f0f7;
  --accent:#3e1850;
  --accent-2:#6b3fa0;
  --accent-bright:#7a4cf6;
  --accent-soft:#eee8fa;
  --coral:#ef5578;
  --ok:#167451;
  --ok-bg:#e8f6ef;
  --warn:#8b5705;
  --warn-bg:#fff3d7;
  --ng:#b8323a;
  --ng-bg:#fdebed;
  --danger:#b8323a;
  --first:#ffc94a;
  --shadow-xs:0 1px 2px rgba(35,20,43,.05);
  --shadow-sm:0 8px 24px rgba(48,27,58,.07);
  --shadow-md:0 18px 52px rgba(48,27,58,.12);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
}

html{background:var(--bg);scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 90% 0,rgba(122,76,246,.07),transparent 30rem),
    var(--bg);
  color:var(--ink);
}
body,button,input,textarea,select{font-feature-settings:"palt" 1}
a{font-weight:700;text-decoration-thickness:1px}
a:hover{color:var(--accent-bright)}
h1{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.025em}
h2{font-size:clamp(18px,1.45vw,21px);letter-spacing:-.015em}
h3{letter-spacing:-.01em}
.muted{line-height:1.65}

button,.btn{
  min-height:44px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:10px 17px;
  box-shadow:var(--shadow-xs);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease;
}
button:hover:not(:disabled),.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(62,24,80,.15);color:#fff}
button:active:not(:disabled),.btn:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
button.sub,.btn.sub{border-color:var(--line);background:#fff;color:var(--accent);box-shadow:none}
button.sub:hover,.btn.sub:hover{border-color:#cfc3d8;background:var(--accent-soft);color:var(--accent)}
button.danger{border-color:#f5cdd1}
button:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(122,76,246,.35);outline-offset:3px}

input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],textarea,select,.s-sel{
  min-height:44px;
  border-color:var(--line-strong);
  border-radius:var(--radius-sm);
  box-shadow:inset 0 1px 2px rgba(35,20,43,.035);
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent-bright);box-shadow:0 0 0 3px rgba(122,76,246,.15)}
input::placeholder,textarea::placeholder{color:#9c95a3}

.card{
  border-color:rgba(62,24,80,.11);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#351046 0%,#55236a 64%,#713b84 100%);
  border:0;
  box-shadow:0 18px 44px rgba(62,24,80,.22);
}
.card.hero::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-65px;top:-105px;background:rgba(255,255,255,.09)}
.badge{border:1px solid rgba(62,24,80,.08);padding:3px 9px;line-height:1.35}
.badge.ok{border-color:#c7eadb}.badge.warn{border-color:#f3ddb0}.badge.stop{border-color:#f5cdd1}
.msg{border:1px solid transparent}.msg.err{border-color:#f5cdd1}.msg.ok{border-color:#c7eadb}

/* Public and authentication surfaces */
.public-page{display:grid;place-items:center;padding:24px}
.public-page .center-wrap,.public-page .wrap{width:min(100%,520px);padding:32px 0;margin:auto}
.public-page .card{padding:24px;margin:18px 0}
.brand-lockup{display:flex;align-items:center;gap:12px;margin-bottom:24px;text-decoration:none;color:var(--ink);width:max-content}
.brand-mark{width:42px;height:42px;border-radius:12px;background:url('/favicon.svg') center/cover no-repeat;box-shadow:0 8px 20px rgba(62,24,80,.2);flex:none}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-copy b{font-size:18px;letter-spacing:.04em}.brand-copy span{margin-top:5px;color:var(--sub);font-size:11px;letter-spacing:.08em;font-weight:700}
.public-page .auth-head{margin-bottom:20px}
.public-page .auth-head h1{margin-bottom:8px}
.public-page .row button,.public-page .row .btn{flex:none}
.landing-page{display:block;padding:0}
.landing-page .wrap{max-width:1120px;padding:28px 24px 72px}
.landing-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.landing-top .brand-lockup{margin:0}
.landing-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:28px;align-items:center;padding:72px 0 42px}
.landing-hero h1{font-size:clamp(36px,6vw,68px);line-height:1.08;letter-spacing:-.045em;max-width:780px}
.landing-hero h1 span{color:var(--accent-bright)}
.landing-hero .lead{font-size:clamp(16px,2vw,20px);color:var(--sub);max-width:680px;line-height:1.8}
.landing-panel{background:linear-gradient(150deg,#321044,#5d2a73);color:#fff;border-radius:28px;padding:28px;box-shadow:var(--shadow-md);min-height:280px;display:flex;flex-direction:column;justify-content:space-between}
.landing-panel .pulse{width:54px;height:54px;border-radius:18px;background:#fff;color:var(--coral);display:grid;place-items:center;font-size:22px;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.landing-panel h2{color:#fff;font-size:24px;margin-top:42px}.landing-panel p{color:#e9dcef;margin-bottom:0}
.landing-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
body.admin #authWrap{width:min(100%,520px);padding:54px 20px}
body.admin #authWrap>.card{padding:24px}

/* App shell */
.app{grid-template-columns:236px minmax(0,1fr)}
.side{
  background:linear-gradient(180deg,#2d0f3c 0%,#3e1850 58%,#2b1237 100%);
  padding:18px 12px 16px;
  border-right:1px solid rgba(255,255,255,.07);
}
.side .brand{position:relative;padding:4px 10px 18px 56px;min-height:52px}
.side .brand::before{content:"";position:absolute;left:8px;top:1px;width:38px;height:38px;border-radius:11px;background:url('/favicon.svg') center/cover no-repeat;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.side .brand .kicker{color:#cfc0d6;letter-spacing:.16em}
.side .brand .name{font-size:18px;color:#fff}
.side .brand .sub{color:#cfc0d6}
.side nav{gap:3px}
.side nav a{min-height:42px;border:1px solid transparent;color:#dfd3e5;padding:9px 11px}
.side nav a:hover{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.08)}
.side nav a.active{background:#fff;color:var(--accent);box-shadow:0 8px 20px rgba(12,4,16,.2)}
.side nav .sec{color:#aa91b6;padding-top:18px}
.side .foot{color:#cfc0d6}
.side .foot button{min-height:38px;border-color:rgba(255,255,255,.08);box-shadow:none}
.content{max-width:1480px;padding:32px clamp(24px,3vw,48px) 80px}
.content .view>h1,.content .page-h{margin-bottom:14px}
.content .page-h{align-items:center}
.backlink{display:inline-flex;align-items:center;min-height:40px;padding:0 8px;border-radius:8px}
.backlink:hover{background:var(--accent-soft)}

table{font-size:13px}
thead{background:#faf9fb}
th{letter-spacing:.02em}
th,td{padding:11px 9px}
tbody tr{transition:background-color .12s ease}
.rec-scroll{border-radius:12px}
.rec-tabs{gap:8px;border-bottom:1px solid var(--line);padding-bottom:10px}
.rec-tabs button,.tabs button{border:1px solid var(--line);background:#fff;color:var(--accent);box-shadow:none}
.rec-tabs button.on,.tabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.s-filter{padding:10px;background:#faf9fb;border:1px solid var(--line);border-radius:var(--radius-md)}
.s-total{border:1px solid var(--line)}
.s-live-card{border:1px solid #f5ced3;background:#fff5f6}
.s-live-card,.sc,.admin-person,.admin-member{box-shadow:var(--shadow-xs)}
.sc{border-color:var(--line);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.sc:hover{border-color:#cdbfd5;box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.sc-nums{background:#f6f3f8}
.hl-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.hl{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:12px}
.hl video{border:1px solid #1f1723;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.hl-edit{margin-top:2px;background:#faf9fb;border:1px solid var(--line);border-radius:10px;padding:0 10px}
.hl-edit[open]{padding-bottom:10px}.hl-edit summary{list-style:none}.hl-edit summary::after{content:"＋";margin-left:auto}.hl-edit[open] summary::after{content:"−"}
.billing-grid{background:#faf9fb}
.billing-usage b{font-variant-numeric:tabular-nums}
details{border-radius:10px}summary{cursor:pointer}

/* Analysis surface: keep the long workflow readable on wide displays. */
.analysis-page .wrap{max-width:1180px}
.analysis-page .card{padding:clamp(18px,2.2vw,28px)}

@media (max-width:820px){
  body{background:var(--bg)}
  .app{display:block}
  .content{padding-left:14px;padding-right:14px}
  .side .brand::before{width:32px;height:32px;left:10px;top:9px;border-radius:9px}
  body.liver .side .brand,body.admin .side .brand{padding-left:52px;background:linear-gradient(90deg,#2f103e,#4b1f5e)}
  body.liver .side nav,body.admin .side nav{border-top-color:var(--line);box-shadow:0 -10px 30px rgba(42,20,51,.11)}
  body.liver .side nav{grid-template-columns:repeat(5,1fr)}
  body.liver .side nav a,body.admin .side nav a{min-height:52px}
  body.liver .side nav a.active,body.admin .side nav a.active{background:var(--accent-soft);box-shadow:none;color:var(--accent)}
  body.liver .card,body.admin .card{margin:10px 0;padding:15px;border-radius:var(--radius-md);box-shadow:var(--shadow-xs)}
  body.liver .card.hero{box-shadow:0 12px 30px rgba(62,24,80,.2)}
  body.liver .hl-summary{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 0 8px}
  body.liver .hl-summary .muted{font-size:12px;text-align:right}
  body.liver .hl-list{display:grid;grid-template-columns:1fr;gap:10px;padding:0;overflow:visible;scroll-snap-type:none}
  body.liver .hl{width:100%;min-width:0;margin:0;padding:10px;gap:6px}
  body.liver .hl video{max-height:58vh;object-fit:contain}
  body.liver .sc,body.admin .sc,.admin-person,.admin-member{padding:12px 13px}
  body.admin .admin-stream-shell>.s-filter{border-radius:var(--radius-md)}
  .content .page-h{align-items:stretch}
  .content .page-h>.row{gap:8px}
}

@media (max-width:640px){
  .public-page{padding:16px}
  .public-page .center-wrap,.public-page .wrap{padding:18px 0 32px}
  .public-page .card{padding:18px}
  .public-page .row{align-items:stretch}
  .public-page .row>input{min-width:100%}
  .public-page .row button,.public-page .row .btn{width:100%;text-align:center}
  .landing-page{padding:0 18px}
  .landing-page .wrap{padding:18px 0 48px}
  .landing-top .btn{min-height:40px;padding:8px 12px;font-size:14px}
  .landing-hero{grid-template-columns:1fr;padding:54px 0 20px;gap:20px}
  .landing-hero h1{font-size:clamp(38px,12vw,54px)}
  .landing-panel{min-height:220px;padding:22px;border-radius:22px}
  .landing-panel h2{margin-top:28px}
  .landing-actions{display:grid;grid-template-columns:1fr}
  .landing-actions .btn{text-align:center}
  h1{font-size:25px}
  .code{font-size:22px;letter-spacing:.06em}
  .hl-edit-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}

@media (prefers-contrast:more){
  :root{--line:#b9afc0;--sub:#544b5c}
  .card,.sc,.admin-person,.admin-member{border-width:2px}
}