/* ============================================================
   POWERCK — sistema glass (tokens do guia-estudo-design)
   ============================================================ */
@font-face{
  font-family:"Helvetica Rounded";
  src:url("fonts/helvetica-rounded-bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
:root{
  --r-s:16px; --r-m:22px; --r-l:30px; --r-full:999px;
  --blur-1:8px; --blur-2:16px; --blur-3:28px;
  --tint:rgba(255,255,255,.07);
  --tint-2:rgba(255,255,255,.12);
  --ink:rgba(8,14,17,.52);
  --ink-2:rgba(8,14,17,.72);
  --line:rgba(255,255,255,.09);
  --line-top:rgba(255,255,255,.24);
  --shadow:0 24px 70px rgba(2,8,10,.5);
  --accent:#22D3EE;
  --accent-dim:rgba(34,211,238,.16);
  --amber:#FFC83D;
  --danger:#FF4D4D;
  --error:#FF4D4D; --warning:#FFC83D; --info:#22D3EE; --success:#34D399;
  --grad7:linear-gradient(90deg,#FF4D4D,#FF7A18,#FFC83D,#FF4FD8,#7C3AED,#22D3EE,#34D399);
  --grad3:linear-gradient(90deg,#FF4D4D,#7C3AED,#22D3EE);
  --txt:#EAF4F2;
  --txt-2:rgba(234,244,242,.62);
  --txt-3:rgba(234,244,242,.38);
  --t-fast:150ms; --t-med:220ms; --t-slow:320ms;
  --ease:cubic-bezier(.32,.72,.24,1);
  --font-ui:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --font-display:"Helvetica Rounded","Arial Rounded MT Bold","Schibsted Grotesk",sans-serif;
  --font-mono:"IBM Plex Mono","Cascadia Mono",Consolas,monospace;
  --dock-h:76px;
  --menubar-h:34px;
}
html[data-theme="light"]{
  --tint:rgba(255,255,255,.42);
  --tint-2:rgba(255,255,255,.62);
  --ink:rgba(255,255,255,.5);
  --ink-2:rgba(255,255,255,.75);
  --line:rgba(10,30,28,.1);
  --line-top:rgba(255,255,255,.85);
  --shadow:0 24px 70px rgba(20,45,50,.25);
  --txt:#0D2320;
  --txt-2:rgba(13,35,32,.64);
  --txt-3:rgba(13,35,32,.4);
  --accent-dim:rgba(20,160,142,.14);
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after{
  transition-duration:.01ms!important; animation-duration:.01ms!important; animation-delay:0ms!important;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%; overflow:hidden; overscroll-behavior:none}
body{
  font-family:var(--font-ui); color:var(--txt);
  background:#08181B; font-size:14px; line-height:1.5;
  user-select:none; touch-action:manipulation;
}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-thumb{background:rgba(128,160,155,.28); border-radius:99px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ---------- wallpaper ---------- */
#wallpaper{position:fixed; inset:0; width:100%; height:100%; z-index:0}
#wallpaper-img{position:fixed; inset:0; z-index:1; background-size:cover; background-position:center;
  opacity:0; transition:opacity 600ms var(--ease); pointer-events:none}
#grain{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.5; mix-blend-mode:overlay}

/* ---------- vidro base ---------- */
.glass{
  background:linear-gradient(180deg,var(--tint-2),var(--tint));
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(1.5);
  backdrop-filter:blur(var(--blur-2)) saturate(1.5);
  border:1px solid var(--line); border-top-color:var(--line-top);
  box-shadow:var(--shadow);
}

/* ---------- boot ---------- */
#boot{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:#050D0F; transition:opacity 700ms var(--ease), visibility 700ms;
}
#boot.done{opacity:0; visibility:hidden}
.boot-inner{text-align:center; animation:bootIn 900ms var(--ease) both}
@keyframes bootIn{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none}}
.boot-logo{font-family:var(--font-display); font-weight:700; font-size:clamp(44px,8vw,84px); letter-spacing:-.03em;
  background:var(--grad7); -webkit-background-clip:text; background-clip:text; color:transparent}
.boot-sub{margin-top:6px; color:rgba(234,244,242,.5); font-size:13px; letter-spacing:.35em; text-transform:uppercase}
.boot-bar{width:min(240px,60vw); height:2px; margin:34px auto 0; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.boot-bar i{display:block; height:100%; width:40%; border-radius:99px; background:var(--grad7); animation:bootBar 1.2s var(--ease) infinite}
@keyframes bootBar{from{transform:translateX(-110%)} to{transform:translateX(260%)}}

/* ---------- menu bar ---------- */
#menubar{
  position:fixed; top:0; left:0; right:0; height:var(--menubar-h); z-index:90;
  display:flex; align-items:center; gap:16px; padding:0 14px;
  background:var(--ink); -webkit-backdrop-filter:blur(var(--blur-2)) saturate(1.4); backdrop-filter:blur(var(--blur-2)) saturate(1.4);
  border-bottom:1px solid var(--line); font-size:12.5px; color:var(--txt);
}
#menubar .mb-logo{font-family:var(--font-display); font-weight:700; font-size:14.5px; letter-spacing:-.02em; line-height:1;
  background:var(--grad3); -webkit-background-clip:text; background-clip:text; color:transparent}
#menubar .mb-app{font-weight:700}
#menubar .mb-item{color:var(--txt-2); padding:3px 8px; border-radius:7px; transition:background var(--t-fast)}
#menubar .mb-item:hover{background:var(--tint-2); color:var(--txt)}
#menubar .mb-right{margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--txt-2)}
#mb-clock{font-variant-numeric:tabular-nums; color:var(--txt)}
#mb-lang{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; padding:3px 9px; border:1px solid var(--line); border-radius:var(--r-full); color:var(--txt-2); transition:all var(--t-fast)}
#mb-lang:hover{border-color:var(--accent); color:var(--accent)}
.mb-glyph{opacity:.75}

/* ---------- desktop e icones ---------- */
#desktop{position:fixed; inset:var(--menubar-h) 0 0 0; z-index:5}
#windows-layer{position:fixed; inset:var(--menubar-h) 0 0 0; z-index:6; pointer-events:none}
#windows-layer .win{pointer-events:auto}
#desk-icons{
  position:absolute; top:18px; right:18px; display:flex; flex-direction:column;
  flex-wrap:wrap-reverse; gap:6px; align-items:flex-end; max-height:calc(100% - 130px);
}
.dicon{
  width:96px; padding:10px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:7px;
  border-radius:var(--r-s); border:1px solid transparent; cursor:default;
  transition:background var(--t-fast), border-color var(--t-fast);
  opacity:0; animation:iconIn 500ms var(--ease) both;
}
@keyframes iconIn{from{opacity:0; transform:translateY(10px) scale(.92)} to{opacity:1; transform:none}}
.dicon:hover{background:var(--tint)}
.dicon.sel{background:var(--accent-dim); border-color:rgba(34,211,238,.3)}
.dicon .ic{font-size:34px; line-height:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.dicon .lb{
  font-size:11.5px; text-align:center; line-height:1.25; color:var(--txt);
  text-shadow:0 1px 6px rgba(0,0,0,.55); max-width:92px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- janelas ---------- */
.win{
  position:absolute; display:flex; flex-direction:column; min-width:320px; min-height:220px;
  border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(180deg,var(--tint-2),var(--tint));
  -webkit-backdrop-filter:blur(var(--blur-3)) saturate(1.6); backdrop-filter:blur(var(--blur-3)) saturate(1.6);
  border:1px solid var(--line); border-top-color:var(--line-top);
  box-shadow:0 10px 34px rgba(2,8,10,.35);
  transition:box-shadow var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.win.focused{box-shadow:var(--shadow)}
/* DNA 3.1: gradiente é escasso — a janela focada marca com o accent chapado,
   o gradiente fica reservado ao elemento cognitivo da tela (barra CKOS / hero). */
.win.focused::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--accent); z-index:9; opacity:.5}
.win.opening{animation:winIn 440ms cubic-bezier(.3,1.24,.36,1) both}
@keyframes winIn{
  0%{opacity:0; transform:scale(.84) translateY(38px)}
  62%{opacity:1; transform:scale(1.014) translateY(-5px)}
  100%{opacity:1; transform:none}
}
.win.closing{animation:winOut 230ms var(--ease) both}
@keyframes winOut{
  30%{opacity:1; transform:scale(1.01)}
  100%{opacity:0; transform:scale(.88) translateY(16px)}
}
.win.minimizing{transition:transform 340ms var(--ease), opacity 340ms var(--ease)}
.win-tb{
  flex:0 0 44px; display:flex; align-items:center; gap:10px; padding:0 14px;
  background:var(--ink); border-bottom:1px solid var(--line); cursor:default; touch-action:none;
}
.win-lights{display:flex; align-items:center; gap:7px}
.wl{width:23px; height:17px; flex:0 0 auto; border-radius:6px; background:var(--tint);
  border:1px solid var(--line); position:relative; padding:0; transition:all var(--t-fast)}
.wl::after{
  content:attr(data-g); position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:500;
  line-height:1; color:var(--txt-3); transition:color var(--t-fast);
}
.wl:hover{background:var(--tint-2)}
.wl.min:hover,.wl.max:hover{border-color:rgba(34,211,238,.45)}
.wl.min:hover::after,.wl.max:hover::after{color:var(--accent)}
.wl.close:hover{background:rgba(255,77,77,.22); border-color:rgba(255,77,77,.5)}
.wl.close:hover::after{color:var(--danger)}
.win-title{flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--txt-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:44px}
.win-body{flex:1; overflow:auto; position:relative; user-select:text}
.win-resize{position:absolute; right:0; bottom:0; width:20px; height:20px; cursor:nwse-resize; z-index:5; touch-action:none}
.win-back{display:none}

/* ---------- dock ---------- */
#dock-wrap{position:fixed; left:0; right:0; bottom:10px; z-index:95; display:flex; justify-content:center; pointer-events:none;
  transition:transform 380ms var(--ease), opacity 300ms var(--ease)}
/* modo foco: o recolhimento é aplicado por estilo direto em zen() (JS),
   porque aqui o cascade não venceu de forma confiável. A transição fica no CSS. */
#ckbar-wrap,#desk-icons,#widgets{transition:opacity 300ms var(--ease), transform 340ms var(--ease)}
#zen-exit{position:fixed; right:16px; bottom:16px; z-index:97; display:none; align-items:center; gap:8px;
  padding:11px 18px; border-radius:var(--r-full); font-size:12.5px; color:var(--txt);
  background:var(--ink-2); border:1px solid var(--line); border-top-color:var(--line-top);
  -webkit-backdrop-filter:blur(var(--blur-2)); backdrop-filter:blur(var(--blur-2));
  box-shadow:var(--shadow); animation:zenIn 340ms var(--ease) both}
body.zen #zen-exit{display:flex}
@keyframes zenIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
#zen-exit:hover{background:var(--ink)}
#dock{
  pointer-events:auto; display:flex; align-items:flex-end; gap:6px; padding:9px 12px;
  border-radius:var(--r-l);
  background:var(--ink); -webkit-backdrop-filter:blur(var(--blur-3)) saturate(1.5); backdrop-filter:blur(var(--blur-3)) saturate(1.5);
  border:1px solid var(--line); border-top-color:var(--line-top); box-shadow:var(--shadow);
}
.dk{
  position:relative; width:52px; height:52px; display:grid; place-items:center;
  font-size:32px; border-radius:14px; transition:transform 160ms var(--ease); transform-origin:bottom center;
}
.dk:hover{transform:translateY(-8px) scale(1.28)}
.dk:active{transform:translateY(-2px) scale(1.1)}
.dk.bounce{animation:dkBounce 480ms var(--ease)}
@keyframes dkBounce{0%{transform:translateY(0)} 40%{transform:translateY(-20px)} 100%{transform:translateY(0)}}
.dk .dot{position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:0; transition:opacity var(--t-fast)}
.dk.running .dot{opacity:1}
.dk-sep{width:1px; align-self:stretch; margin:6px 4px; background:var(--line)}
.dk-tip{
  position:absolute; bottom:64px; left:50%; transform:translateX(-50%);
  font-size:11.5px; padding:4px 10px; border-radius:8px; white-space:nowrap;
  background:var(--ink-2); border:1px solid var(--line); color:var(--txt);
  opacity:0; pointer-events:none; transition:opacity var(--t-fast);
}
.dk:hover .dk-tip{opacity:1}

/* ---------- CKOS command bar ---------- */
#ckbar-wrap{position:fixed; left:0; right:0; bottom:calc(var(--dock-h) + 18px); z-index:96; display:flex; justify-content:center; pointer-events:none}
#ckbar{
  pointer-events:auto; width:min(432px, calc(100vw - 32px));
  border-radius:var(--r-l); overflow:hidden;
  background:var(--ink); -webkit-backdrop-filter:blur(var(--blur-3)) saturate(1.6); backdrop-filter:blur(var(--blur-3)) saturate(1.6);
  border:1px solid var(--line); border-top-color:var(--line-top); box-shadow:var(--shadow);
  transition:width var(--t-med) var(--ease);
}
#ckbar .bar-row{display:flex; align-items:center; gap:12px; padding:12px 18px; cursor:text}
#ckbar .spark{color:var(--accent); font-size:17px; flex:0 0 auto}
#ck-input{
  flex:1; background:none; border:none; outline:none; color:var(--txt);
  font:inherit; font-size:14.5px; min-width:0;
}
#ck-input::placeholder{color:var(--txt-3)}
#ck-kbd{font-family:var(--font-mono); font-size:10.5px; color:var(--txt-3);
  border:1px solid var(--line); border-radius:6px; padding:2px 7px; flex:0 0 auto}
#ck-panel{max-height:0; overflow:hidden; transition:max-height var(--t-slow) var(--ease)}
#ckbar.open #ck-panel{max-height:min(380px,46vh)}
#ckbar{position:relative}
#ckbar::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--grad7); pointer-events:none; z-index:3; opacity:0; transition:opacity var(--t-med) var(--ease);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude}
#ckbar.open::before{opacity:1}
#ck-panel-in{padding:2px 10px 12px; overflow:auto; max-height:min(380px,46vh)}
.ck-sec{font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); padding:10px 10px 6px}
.ck-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 10px; border-radius:var(--r-s); font-size:13.5px; color:var(--txt);
  transition:background var(--t-fast);
}
.ck-item:hover,.ck-item.hl{background:var(--tint-2)}
.ck-item .ci{font-size:17px; flex:0 0 22px; text-align:center}
.ck-item .cm{margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--txt-3)}
.ck-trace{margin:8px 10px 4px; padding:12px 14px; border-radius:var(--r-s);
  background:rgba(0,0,0,.22); border:1px solid var(--line); font-size:13px}
html[data-theme="light"] .ck-trace{background:rgba(255,255,255,.5)}
.ck-steps{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:9px}
.ck-step{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; padding:3px 9px;
  border-radius:var(--r-full); border:1px solid var(--line); color:var(--txt-3); transition:all var(--t-med)}
.ck-step.on{border-color:transparent; color:#fff;
  background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box, var(--grad3) border-box}
html[data-theme="light"] .ck-step.on{background:linear-gradient(#fff,#fff) padding-box, var(--grad3) border-box; color:var(--txt)}
.ck-step-arrow{color:var(--txt-3); font-size:10px}
.ck-answer{color:var(--txt); line-height:1.55; white-space:pre-wrap}
.ck-answer .cursor{display:inline-block; width:7px; height:14px; background:var(--accent);
  vertical-align:-2px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ck-corr{margin-top:9px; font-family:var(--font-mono); font-size:10px; color:var(--txt-3)}
.ck-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.ck-chip{font-size:12.5px; padding:6px 13px; border-radius:var(--r-full);
  border:1px solid rgba(34,211,238,.4); color:var(--accent); background:var(--accent-dim);
  transition:all var(--t-fast)}
.ck-chip:hover{background:rgba(34,211,238,.28)}

/* ---------- menu de contexto ---------- */
#ctx{
  position:fixed; z-index:150; min-width:210px; padding:6px;
  border-radius:var(--r-m);
  background:var(--ink-2); -webkit-backdrop-filter:blur(var(--blur-3)) saturate(1.5); backdrop-filter:blur(var(--blur-3)) saturate(1.5);
  border:1px solid var(--line); border-top-color:var(--line-top); box-shadow:var(--shadow);
  opacity:0; transform:scale(.92); transform-origin:top left; pointer-events:none;
  transition:opacity 130ms var(--ease), transform 130ms var(--ease);
}
#ctx.open{opacity:1; transform:none; pointer-events:auto}
.ctx-it{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 12px; border-radius:9px; font-size:13px; color:var(--txt); transition:background var(--t-fast)}
.ctx-it:hover{background:var(--tint-2)}
.ctx-it .k{margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--txt-3)}
.ctx-sep{height:1px; margin:5px 10px; background:var(--line)}

/* ---------- quick look ---------- */
#ql{position:fixed; inset:0; z-index:160; display:grid; place-items:center; padding:4vh 4vw;
  background:rgba(3,9,11,.45); -webkit-backdrop-filter:blur(var(--blur-1)); backdrop-filter:blur(var(--blur-1));
  opacity:0; visibility:hidden; transition:opacity var(--t-med) var(--ease), visibility var(--t-med)}
#ql.open{opacity:1; visibility:visible}
#ql-card{width:min(760px,100%); max-height:100%; display:flex; flex-direction:column;
  border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(180deg,var(--tint-2),var(--tint));
  -webkit-backdrop-filter:blur(var(--blur-3)) saturate(1.6); backdrop-filter:blur(var(--blur-3)) saturate(1.6);
  border:1px solid var(--line); border-top-color:var(--line-top); box-shadow:var(--shadow);
  transform:scale(.94); transition:transform var(--t-med) var(--ease)}
#ql.open #ql-card{transform:none}
#ql-tb{flex:0 0 44px; display:flex; align-items:center; gap:10px; padding:0 16px;
  background:var(--ink); border-bottom:1px solid var(--line); font-size:13px; font-weight:600}
#ql-body{flex:1; overflow:auto; user-select:text}

/* ---------- toast ---------- */
#toast{position:fixed; top:calc(var(--menubar-h) + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
  z-index:180; padding:9px 18px; border-radius:var(--r-full); font-size:13px;
  background:var(--ink-2); border:1px solid var(--line); color:var(--txt); box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease)}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- conteudo de documentos (markdown) ---------- */
.doc{padding:26px 30px 40px; max-width:720px; font-size:14px; line-height:1.65; color:var(--txt)}
.doc h1{font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.02em; line-height:1.15; margin:0 0 4px}
.doc h2{font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent); margin:30px 0 10px}
.doc h3{font-size:14.5px; font-weight:700; margin:20px 0 8px}
.doc p{margin:0 0 12px; color:var(--txt-2)}
.doc strong{color:var(--txt); font-weight:600}
.doc em{font-style:italic}
.doc ul,.doc ol{margin:0 0 14px 20px; color:var(--txt-2)}
.doc li{margin-bottom:5px}
.doc hr{border:none; height:1px; background:var(--line); margin:24px 0}
.doc blockquote{margin:0 0 14px; padding:12px 16px; border-left:2px solid var(--accent);
  border-radius:0 var(--r-s) var(--r-s) 0; background:var(--accent-dim); color:var(--txt-2)}
.doc code{font-family:var(--font-mono); font-size:12px; background:rgba(0,0,0,.25);
  padding:2px 6px; border-radius:6px; color:var(--accent)}
html[data-theme="light"] .doc code{background:rgba(10,40,36,.08)}
.doc table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:13px}
.doc th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  text-align:left; color:var(--txt-3); padding:8px 10px; border-bottom:1px solid var(--line)}
.doc td{padding:8px 10px; border-bottom:1px solid var(--line); color:var(--txt-2); vertical-align:top}
.doc tr:last-child td{border-bottom:none}
.tag-fato{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; padding:2px 7px;
  border-radius:5px; background:var(--accent-dim); color:var(--accent); border:1px solid rgba(34,211,238,.35)}
.tag-alerta{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; padding:2px 7px;
  border-radius:5px; background:rgba(255,200,61,.14); color:var(--amber); border:1px solid rgba(255,200,61,.4)}

/* ---------- finder ---------- */
.fd{display:flex; height:100%}
.fd-side{flex:0 0 176px; padding:14px 8px; border-right:1px solid var(--line);
  background:rgba(0,0,0,.14); overflow:auto}
html[data-theme="light"] .fd-side{background:rgba(255,255,255,.28)}
.fd-side .ck-sec{padding:6px 12px 4px}
.fd-nav{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 12px; border-radius:var(--r-s); font-size:13px; color:var(--txt-2); transition:background var(--t-fast)}
.fd-nav:hover{background:var(--tint)}
.fd-nav.on{background:var(--accent-dim); color:var(--txt)}
.fd-main{flex:1; display:flex; flex-direction:column; min-width:0}
.fd-crumb{flex:0 0 38px; display:flex; align-items:center; gap:7px; padding:0 16px;
  border-bottom:1px solid var(--line); font-size:12.5px; color:var(--txt-3)}
.fd-crumb b{color:var(--txt-2); font-weight:600}
.fd-grid{flex:1; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:4px; padding:16px; align-content:start}
.fd-it{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 10px;
  border-radius:var(--r-s); border:1px solid transparent; transition:background var(--t-fast)}
.fd-it:hover{background:var(--tint)}
.fd-it.sel{background:var(--accent-dim); border-color:rgba(34,211,238,.3)}
.fd-it .ic{font-size:36px; line-height:1}
.fd-it .lb{font-size:11.5px; line-height:1.25; text-align:center; color:var(--txt-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.fd-empty{grid-column:1/-1; text-align:center; color:var(--txt-3); padding:40px 0; font-size:13px}

/* ---------- notas ---------- */
.nt{display:flex; height:100%}
.nt-side{flex:0 0 190px; border-right:1px solid var(--line); background:rgba(0,0,0,.14);
  display:flex; flex-direction:column}
html[data-theme="light"] .nt-side{background:rgba(255,255,255,.28)}
.nt-new{margin:12px; padding:8px; border-radius:var(--r-s); border:1px dashed var(--line);
  color:var(--txt-2); font-size:12.5px; transition:all var(--t-fast)}
.nt-new:hover{border-color:var(--accent); color:var(--accent)}
.nt-list{flex:1; overflow:auto; padding:0 8px 10px}
.nt-it{width:100%; text-align:left; padding:9px 11px; border-radius:var(--r-s); margin-bottom:2px;
  transition:background var(--t-fast)}
.nt-it:hover{background:var(--tint)}
.nt-it.on{background:var(--accent-dim)}
.nt-it b{display:block; font-size:12.5px; font-weight:600; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nt-it span{font-size:11px; color:var(--txt-3)}
.nt-ed{flex:1; display:flex; flex-direction:column; min-width:0}
.nt-bar{flex:0 0 46px; display:flex; align-items:center; gap:4px; padding:0 14px;
  border-bottom:1px solid var(--line); background:var(--ink)}
.nt-bar button{width:32px; height:30px; border-radius:9px; font-size:13px; color:var(--txt-2);
  transition:background var(--t-fast); display:grid; place-items:center}
.nt-bar button:hover{background:var(--tint-2); color:var(--txt)}
.nt-bar b{font-weight:700} .nt-bar i{font-style:italic; font-family:Georgia,serif}
.nt-bar .sep{width:1px; height:18px; background:var(--line); margin:0 6px}
.nt-meta{padding:12px 24px 0; font-family:var(--font-mono); font-size:10.5px; color:var(--txt-3);
  display:flex; gap:14px}
#nt-text{flex:1; resize:none; border:none; outline:none; background:none; color:var(--txt);
  font:inherit; font-size:15px; line-height:1.75; padding:12px 24px 28px; user-select:text; min-height:0}
#nt-text::placeholder{color:var(--txt-3)}
.nt-prev{flex:1; overflow:auto; min-height:0; padding:0 4px}
.nt-del{margin-left:auto; font-size:11.5px; color:var(--txt-3);
  padding:5px 12px; border-radius:var(--r-full); border:1px solid var(--line); transition:all var(--t-fast);
  width:auto!important; height:auto!important}
.nt-del:hover{color:var(--danger); border-color:var(--danger)}
.nt-mode{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-full); border:1px solid var(--line); color:var(--txt-3);
  width:auto!important; height:auto!important}
.nt-mode.on{border-color:rgba(34,211,238,.5); color:var(--accent); background:var(--accent-dim)}

/* ---------- system pulse ---------- */
.pl{padding:22px 24px 34px; display:grid; gap:14px; user-select:text}
.pl-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pl-card{border-radius:var(--r-m); border:1px solid var(--line); background:rgba(0,0,0,.16); padding:16px 18px}
html[data-theme="light"] .pl-card{background:rgba(255,255,255,.4)}
.pl-card h4{font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt-3); margin-bottom:12px; font-weight:500}
.pl-ring{display:flex; align-items:center; gap:18px}
.pl-ring svg{flex:0 0 auto}
.pl-big{font-size:30px; font-weight:700; line-height:1}
.pl-sub{font-size:12px; color:var(--txt-3); margin-top:4px}
.gates{display:flex; flex-wrap:wrap; gap:7px}
.gate{font-family:var(--font-mono); font-size:11px; padding:5px 11px; border-radius:var(--r-full);
  border:1px solid var(--line); color:var(--txt-3)}
.gate.done{border-color:rgba(52,211,153,.45); color:var(--success); background:rgba(52,211,153,.12)}
.gate.now{border-color:rgba(255,200,61,.5); color:var(--amber); background:rgba(255,200,61,.12); animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(255,200,61,.08)}}
.pl-row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px}
.pl-row:last-child{border-bottom:none}
.pl-row .k{color:var(--txt-3)}
.pl-row .v{color:var(--txt-2); text-align:right}
.count{font-variant-numeric:tabular-nums; font-size:26px; font-weight:700; color:var(--amber)}

/* ---------- ajustes ---------- */
.st{padding:22px 24px 34px; display:grid; gap:22px}
.st-sec h4{font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:12px; font-weight:500}
.wp-row{display:flex; gap:10px; flex-wrap:wrap}
.wp-sw{width:86px; height:56px; border-radius:var(--r-s); border:2px solid transparent;
  overflow:hidden; transition:all var(--t-fast); padding:0}
.wp-sw.on{border-color:var(--accent)}
.wp-sw canvas{width:100%; height:100%; display:block}
.seg{display:inline-flex; padding:3px; gap:2px; border-radius:var(--r-full); border:1px solid var(--line); background:rgba(0,0,0,.18)}
html[data-theme="light"] .seg{background:rgba(255,255,255,.4)}
.seg button{padding:6px 16px; border-radius:var(--r-full); font-size:12.5px; color:var(--txt-3); transition:all var(--t-fast)}
.seg button.on{background:var(--tint-2); color:var(--txt)}

/* ---------- briefing ---------- */
.bf{height:100%; display:flex; flex-direction:column}
.bf-head{flex:0 0 auto; padding:14px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; font-size:13px; color:var(--txt-2)}
.bf-head .ck-chip{margin-left:auto}
.bf iframe{flex:1; border:none; background:#fff}
/* nativo */
.bf-prog{flex:0 0 auto; height:3px; background:rgba(128,160,155,.16)}
.bf-prog i{display:block; height:100%; background:var(--accent); width:0; transition:width 420ms var(--ease)}
.bf-body{flex:1; overflow:auto; padding:26px 30px 20px; user-select:text}
.bf-bloco{max-width:660px; margin:0 auto; animation:bfIn 380ms var(--ease) both}
@keyframes bfIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.bf-kick{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}
.bf-tit{font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.02em; line-height:1.12; margin:8px 0 22px}
.bf-q{margin-bottom:24px}
.bf-q label{display:block; font-size:14.5px; line-height:1.5; color:var(--txt); margin-bottom:11px}
.bf-q .hint{display:block; font-size:12.5px; color:var(--txt-3); margin-top:5px; line-height:1.45}
.bf-q textarea,.bf-q input[type=text],.bf-q input[type=email]{
  width:100%; padding:14px 17px; border-radius:var(--r-m); background:var(--tint);
  border:1px solid var(--line); color:var(--txt); font:inherit; font-size:14px; outline:none;
  transition:border-color var(--t-fast), background var(--t-fast); resize:vertical}
.bf-q textarea{min-height:96px; line-height:1.55}
.bf-q textarea:focus,.bf-q input:focus{border-color:rgba(34,211,238,.55); background:var(--tint-2)}
.bf-q textarea::placeholder,.bf-q input::placeholder{color:var(--txt-3)}
.bf-opts{display:grid; gap:9px}
.bf-opt{display:flex; align-items:center; gap:12px; padding:14px 17px; border-radius:var(--r-m);
  background:var(--tint); border:1px solid var(--line); font-size:14px; text-align:left;
  transition:all var(--t-fast); width:100%}
.bf-opt:hover{background:var(--tint-2)}
.bf-opt.on{border-color:rgba(34,211,238,.55); background:var(--accent-dim)}
.bf-opt .rd{width:17px; height:17px; flex:0 0 auto; border-radius:50%; border:1.5px solid var(--txt-3); position:relative}
.bf-opt.on .rd{border-color:var(--accent)}
.bf-opt.on .rd::after{content:""; position:absolute; inset:3.5px; border-radius:50%; background:var(--accent)}
.bf-help{display:flex; gap:11px; align-items:flex-start; margin-top:10px; padding:13px 16px;
  border-radius:var(--r-m); background:rgba(255,200,61,.07); border:1px solid rgba(255,200,61,.28);
  font-size:12.5px; line-height:1.5; color:var(--txt-2); animation:bfIn 300ms var(--ease) both}
.bf-help .ic{color:var(--warning); flex:0 0 auto; font-size:14px}
.bf-ajuda{margin-top:9px; font-size:12px; color:var(--accent); display:inline-flex; align-items:center; gap:6px}
.bf-nav{flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:14px 30px 18px; border-top:1px solid var(--line)}
.bf-step{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3)}
.bf-btn{margin-left:auto; padding:13px 28px; border-radius:var(--r-full); background:var(--accent);
  color:#052024; font-weight:600; font-size:14px; transition:transform 130ms var(--ease)}
.bf-btn:active{transform:scale(.96)}
.bf-btn[disabled]{opacity:.45; pointer-events:none}
.bf-back{padding:13px 20px; border-radius:var(--r-full); border:1px solid var(--line); color:var(--txt-2); font-size:14px}
.bf-ok{max-width:520px; margin:70px auto; text-align:center}
.bf-ok .ic{font-size:52px}
.bf-ok h3{font-family:var(--font-display); font-weight:700; font-size:27px; letter-spacing:-.02em; margin:18px 0 10px}
.bf-ok p{font-size:14px; color:var(--txt-2); line-height:1.6}
.bf-saved{font-family:var(--font-mono); font-size:10px; color:var(--txt-3); letter-spacing:.1em}

/* ---------- portfolio (experiencia spotify) ---------- */
.lib{display:flex; flex-direction:column; height:100%}
.lib-cats{flex:0 0 auto; display:flex; gap:8px; padding:14px 18px 10px; overflow-x:auto}
.lib-cat{flex:0 0 auto; font-size:12.5px; padding:7px 15px; border-radius:var(--r-full);
  border:1px solid var(--line); color:var(--txt-2); transition:all var(--t-fast); white-space:nowrap}
.lib-cat.on{border-color:transparent; color:#fff;
  background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box, var(--grad3) border-box}
html[data-theme="light"] .lib-cat.on{background:linear-gradient(#fff,#fff) padding-box, var(--grad3) border-box; color:var(--txt)}
.lib-grid{flex:1; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:20px; padding:10px 22px 26px; align-content:start}
/* hero editorial: capa grande sangrando + texto sobreposto */
.lib-hero{grid-column:1/-1; position:relative; overflow:hidden; min-height:236px;
  border-radius:var(--r-l); border:1px solid var(--line); border-top-color:var(--line-top);
  text-align:left; display:flex; align-items:flex-end; padding:26px 28px;
  transition:transform 200ms var(--ease); background:#0b0f10}
.lib-hero:hover{transform:translateY(-3px)}
.lib-hero:active{transform:scale(.994)}
.lib-hero .bg{position:absolute; inset:0; background-size:cover; background-position:center top;
  opacity:.5; transition:transform 700ms var(--ease), opacity 300ms var(--ease)}
.lib-hero:hover .bg{transform:scale(1.045); opacity:.62}
.lib-hero .veil{position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(6,10,11,.94) 26%, rgba(6,10,11,.55) 62%, rgba(6,10,11,.2))}
.lib-hero .tx{position:relative; z-index:2; max-width:52ch}
.lib-hero .tx h3{font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.03em; line-height:1.02; color:#F4FAF9}
.lib-hero .tx p{font-size:13.5px; color:rgba(244,250,249,.7); margin-top:9px; line-height:1.55}
.lib-hero .meta{position:relative; z-index:2; margin-left:auto; align-self:flex-end; text-align:right;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3)}
.lib-award{display:inline-flex; align-items:center; gap:7px; margin-bottom:11px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 13px; border-radius:var(--r-full); color:#08130F; background:var(--warning); font-weight:600}
/* card com capa real */
.lib-card{display:flex; flex-direction:column; gap:11px; text-align:left;
  transition:transform 180ms var(--ease)}
.lib-card:hover{transform:translateY(-5px)}
.lib-card:active{transform:translateY(-2px) scale(.985)}
.lib-cover{aspect-ratio:4/3; border-radius:var(--r-m); position:relative; overflow:hidden;
  background:#0b0f10 center/cover; box-shadow:0 14px 32px rgba(2,8,10,.42);
  border:1px solid var(--line)}
.lib-cover .im{position:absolute; inset:0; background-size:cover; background-position:center top;
  transition:transform 600ms var(--ease)}
.lib-card:hover .lib-cover .im{transform:scale(1.06)}
.lib-cover .pg{position:absolute; right:9px; bottom:9px; z-index:2;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; padding:4px 9px;
  border-radius:var(--r-full); background:rgba(6,10,11,.7); color:rgba(244,250,249,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.lib-card b{font-size:14px; font-weight:600; color:var(--txt); line-height:1.25}
.lib-card span{font-size:10.5px; color:var(--txt-3); font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase}
.lib-play{flex:1; display:flex; flex-direction:column; min-height:0}
.lib-reader{flex:1; overflow:auto; min-height:0}
.lib-reader iframe{width:100%; height:100%; border:none; background:#fff}
.lib-now{flex:0 0 62px; display:flex; align-items:center; gap:13px; padding:0 16px;
  border-top:1px solid var(--line); background:var(--ink)}
.lib-now .cov{width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; font-size:19px}
.lib-now .tt{min-width:0}
.lib-now b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lib-now span{font-size:10.5px; color:var(--txt-3); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em}
.lib-now .badge{margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3); border:1px solid var(--line); padding:5px 12px; border-radius:var(--r-full)}
.lib-cover .cv-t{position:absolute; left:14px; right:14px; bottom:12px; z-index:2; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.15; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}
.lib-back{flex:0 0 auto; align-self:flex-start; margin:12px 18px 2px; font-size:13px; color:var(--accent)}
.lib-empty{grid-column:1/-1; padding:34px 20px; text-align:center; color:var(--txt-3); font-size:13.5px; line-height:1.7}

/* ---------- agentes (chat) ---------- */
.ag{display:flex; height:100%; min-height:0}
.ag-side{flex:0 0 232px; border-right:1px solid var(--line); background:rgba(0,0,0,.16);
  display:flex; flex-direction:column; min-height:0}
html[data-theme="light"] .ag-side{background:rgba(255,255,255,.3)}
.ag-side .hd{padding:16px 18px 8px; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--txt-3)}
.ag-list{flex:1; overflow:auto; padding:0 10px 12px}
.ag-it{display:flex; gap:11px; align-items:center; width:100%; text-align:left; padding:10px 11px;
  border-radius:var(--r-m); margin-bottom:3px; transition:background var(--t-fast)}
.ag-it:hover{background:var(--tint)}
.ag-it.on{background:var(--tint-2)}
.ag-av{width:34px; height:34px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  font-size:15px; position:relative}
.ag-av::after{content:""; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px;
  border-radius:50%; background:var(--success); border:2px solid #0a1416}
.ag-it .tt{min-width:0; flex:1}
.ag-it b{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ag-it span{display:block; font-size:11px; color:var(--txt-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ag-main{flex:1; display:flex; flex-direction:column; min-width:0; min-height:0}
.ag-top{flex:0 0 62px; display:flex; align-items:center; gap:12px; padding:0 18px;
  border-bottom:1px solid var(--line); background:var(--ink)}
.ag-top .tt b{display:block; font-size:14px; font-weight:600}
.ag-top .tt span{font-size:11px; color:var(--success); display:flex; align-items:center; gap:6px}
.ag-top .tt span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--success);
  box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:live 2.4s var(--ease) infinite}
.ag-top .tt span.off{color:var(--txt-3)}
.ag-top .tt span.off::before{background:var(--txt-3); animation:none}
.ag-top .role{margin-left:auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3); border:1px solid var(--line); padding:5px 11px; border-radius:var(--r-full)}
.ag-feed{flex:1; overflow:auto; padding:20px 20px 8px; display:flex; flex-direction:column; gap:10px; min-height:0}
.ag-day{align-self:center; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3); background:var(--tint); padding:5px 13px;
  border-radius:var(--r-full); margin-bottom:4px}
.bub{max-width:74%; padding:12px 16px; border-radius:22px; font-size:14px; line-height:1.55;
  position:relative; animation:bubIn 340ms cubic-bezier(.3,1.2,.36,1) both; white-space:pre-wrap}
@keyframes bubIn{from{opacity:0; transform:translateY(10px) scale(.96)} to{opacity:1; transform:none}}
.bub.them{align-self:flex-start; background:var(--tint-2); border:1px solid var(--line);
  border-bottom-left-radius:8px; color:var(--txt)}
.bub.me{align-self:flex-end; background:rgba(34,211,238,.16); border:1px solid rgba(34,211,238,.3);
  border-bottom-right-radius:8px; color:var(--txt)}
.bub .tm{display:block; margin-top:6px; font-size:10px; color:var(--txt-3); text-align:right;
  font-family:var(--font-mono)}
.bub .who{display:block; font-size:10.5px; font-family:var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:5px; opacity:.85}
.bub-typing{align-self:flex-start; display:flex; gap:5px; padding:15px 18px; border-radius:22px;
  border-bottom-left-radius:8px; background:var(--tint-2); border:1px solid var(--line)}
.bub-typing i{width:7px; height:7px; border-radius:50%; background:var(--txt-3); animation:tp 1.3s ease-in-out infinite}
.bub-typing i:nth-child(2){animation-delay:.16s} .bub-typing i:nth-child(3){animation-delay:.32s}
@keyframes tp{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)}}
.ag-hand{align-self:center; display:flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--txt-3);
  padding:7px 15px; border-radius:var(--r-full); border:1px dashed var(--line); margin:3px 0}
.ag-audio{display:flex; align-items:center; gap:12px; min-width:210px}
.ag-audio .pl{width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-dim); border:1px solid rgba(34,211,238,.4); color:var(--accent); font-size:12px}
.ag-wave{flex:1; display:flex; align-items:center; gap:2.5px; height:26px}
.ag-wave i{flex:1; border-radius:2px; background:var(--txt-3); opacity:.55}
.ag-wave i.on{background:var(--accent); opacity:1}
.ag-audio .dur{font-family:var(--font-mono); font-size:10.5px; color:var(--txt-3)}
.ag-txt{margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.55; color:var(--txt-2); white-space:pre-wrap}
.ag-mic.rec{background:rgba(255,77,77,.18); border-color:rgba(255,77,77,.5); animation:recPulse 1.4s var(--ease) infinite}
@keyframes recPulse{50%{box-shadow:0 0 0 8px rgba(255,77,77,0)}}
.ag-chips{flex:0 0 auto; display:flex; gap:8px; padding:8px 20px 4px; overflow-x:auto}
.ag-chip{flex:0 0 auto; font-size:12.5px; padding:8px 15px; border-radius:var(--r-full);
  border:1px solid var(--line); color:var(--txt-2); background:var(--tint);
  transition:all var(--t-fast); white-space:nowrap}
.ag-chip:hover{background:var(--tint-2); color:var(--txt)}
.ag-bar{flex:0 0 auto; display:flex; align-items:flex-end; gap:10px; padding:12px 18px 16px}
.ag-in{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:11px 18px;
  border-radius:var(--r-full); background:var(--tint); border:1px solid var(--line)}
.ag-in input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--txt); font:inherit; font-size:14px}
.ag-in input::placeholder{color:var(--txt-3)}
.ag-send{width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#052024; font-size:17px; transition:transform 130ms var(--ease)}
.ag-send:active{transform:scale(.92)}
.ag-mic{width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--tint); font-size:16px; transition:all 130ms var(--ease)}
.ag-mic:active{transform:scale(.92)}
.ag-note{padding:0 20px 12px; font-family:var(--font-mono); font-size:9.5px; color:var(--txt-3); letter-spacing:.06em}
@media (max-width:767px){ .ag-side{display:none} .bub{max-width:86%} }

/* ---------- estudos (sistema de trilhas) ---------- */
.es{display:flex; flex-direction:column; height:100%; min-height:0}
.es-head{padding:18px 22px 4px; font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-3)}
.es-hero{margin:14px 22px 0; padding:20px 22px; border-radius:var(--r-l); background:var(--tint);
  border:1px solid var(--line); border-top-color:var(--line-top); display:flex; align-items:center; gap:20px}
.es-hero .tx{flex:1; min-width:0}
.es-hero .kick{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.es-hero b{display:block; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.02em; margin-top:6px}
.es-hero p{font-size:12.5px; color:var(--txt-3); margin-top:4px}
.es-hero .cta{flex:0 0 auto; padding:12px 22px; border-radius:var(--r-full); background:var(--accent);
  color:#052024; font-size:13.5px; font-weight:600; transition:transform 130ms var(--ease)}
.es-hero .cta:active{transform:scale(.96)}
.es-grid{flex:1; overflow:auto; min-height:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:14px; padding:16px 22px 24px; align-content:start}
.es-cat{display:flex; flex-direction:column; align-items:flex-start; gap:11px; padding:20px;
  border-radius:var(--r-l); background:var(--tint); border:1px solid var(--line); border-top-color:var(--line-top);
  text-align:left; transition:transform 160ms var(--ease), background 160ms var(--ease); position:relative}
.es-cat:hover{transform:translateY(-3px); background:var(--tint-2)}
.es-cat:active{transform:translateY(-1px) scale(.99)}
.es-cat .top{display:flex; align-items:center; gap:12px; width:100%}
.es-cat .ic{font-size:26px}
.es-cat b{font-size:15px; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; flex:1}
.es-cat .pct{font-family:var(--font-mono); font-size:10.5px; color:var(--txt-3)}
.es-cat p{font-size:11.5px; color:var(--txt-3); line-height:1.45}
.es-bar{width:100%; height:5px; border-radius:99px; background:rgba(128,160,155,.16); overflow:hidden}
.es-bar i{display:block; height:100%; border-radius:99px; background:var(--success); width:0;
  transition:width 700ms var(--ease)}
.es-list{flex:1; overflow:auto; min-height:0; padding:8px 22px 24px; display:grid; gap:10px; align-content:start}
.es-doc{display:flex; align-items:center; gap:15px; padding:16px 19px; border-radius:var(--r-m);
  background:var(--tint); border:1px solid var(--line); text-align:left; transition:background var(--t-fast)}
.es-doc:hover{background:var(--tint-2)}
.es-doc .ic{font-size:20px}
.es-doc .bd{flex:1; min-width:0}
.es-doc b{display:block; font-size:13.5px}
.es-doc span{font-size:11.5px; color:var(--txt-3)}
.es-doc .done{flex:0 0 auto; font-size:10.5px; color:var(--success);
  border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.1); padding:5px 11px; border-radius:var(--r-full)}
.es-doc .min{flex:0 0 auto; font-family:var(--font-mono); font-size:10px; color:var(--txt-3)}
.es-back{align-self:flex-start; margin:16px 22px 0; font-size:13px; color:var(--accent)}

/* leitor de aula */
.le{display:flex; flex-direction:column; height:100%; min-height:0}
.le-prog{flex:0 0 auto; height:3px; background:rgba(128,160,155,.14)}
.le-prog i{display:block; height:100%; background:var(--accent); width:0}
.le-top{flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:12px 22px; border-bottom:1px solid var(--line)}
.le-top .bk{font-size:13px; color:var(--accent)}
.le-top .mid{flex:1; min-width:0; text-align:center}
.le-top .mid b{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.le-top .mid span{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3)}
.le-body{flex:1; overflow:auto; min-height:0; scroll-behavior:smooth}
.le-body .doc{max-width:660px; margin:0 auto}
.le-tools{position:sticky; bottom:0; display:flex; gap:9px; padding:12px 22px;
  background:var(--ink); border-top:1px solid var(--line); -webkit-backdrop-filter:blur(var(--blur-2)); backdrop-filter:blur(var(--blur-2))}
.le-btn{padding:11px 18px; border-radius:var(--r-full); border:1px solid var(--line);
  font-size:12.5px; color:var(--txt-2); transition:all var(--t-fast)}
.le-btn:hover{background:var(--tint-2); color:var(--txt)}
.le-btn.ok{border-color:rgba(52,211,153,.45); color:var(--success); background:rgba(52,211,153,.1)}
.le-btn.prim{margin-left:auto; background:var(--accent); color:#052024; border-color:transparent; font-weight:600}
.le-nota{padding:0 22px 18px; max-width:660px; margin:0 auto; width:100%}
.le-nota textarea{width:100%; min-height:84px; padding:14px 16px; border-radius:var(--r-m);
  background:var(--tint); border:1px solid var(--line); color:var(--txt); font:inherit; font-size:13.5px;
  line-height:1.55; outline:none; resize:vertical}
.le-nota textarea:focus{border-color:rgba(34,211,238,.5)}
.le-nota .lb{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:8px; display:block}
.le-quiz{max-width:660px; margin:22px auto 0; padding:20px 22px; border-radius:var(--r-l);
  background:rgba(255,200,61,.06); border:1px solid rgba(255,200,61,.25)}
.le-quiz .lb{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warning)}
.le-quiz p{font-size:14px; line-height:1.55; margin:9px 0 12px; color:var(--txt)}

/* ---------- planejamento ---------- */
.pn-wrap{display:flex; flex-direction:column; height:100%; min-height:0}
.pn-tabs{flex:0 0 auto; display:flex; gap:6px; padding:14px 22px 0}
.pn-tab{position:relative; padding:10px 18px 13px; font-size:13.5px; color:var(--txt-3);
  transition:color var(--t-fast)}
.pn-tab:hover{color:var(--txt-2)}
.pn-tab.on{color:var(--txt)}
.pn-tab .ind{position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:2px;
  background:var(--accent); transform:scaleX(0); transition:transform 260ms var(--ease)}
.pn-tab.on .ind{transform:scaleX(1)}
.pn-tabs-line{flex:0 0 auto; height:1px; background:var(--line); margin:0 22px}
.pn{flex:1; overflow:auto; min-height:0; padding:20px 22px 30px; user-select:text;
  animation:bfIn 300ms var(--ease) both}
.pn-h{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-3); margin:20px 0 12px}
.pn-h:first-child{margin-top:0}
.pn-fases{display:grid; gap:10px}
.pn-fase{display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border-radius:var(--r-m);
  background:var(--tint); border:1px solid var(--line); position:relative; overflow:hidden}
.pn-fase.now{border-color:rgba(255,200,61,.45); background:rgba(255,200,61,.07)}
.pn-fase.done{opacity:.62}
.pn-fase .n{flex:0 0 42px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--txt-3); padding-top:2px}
.pn-fase .bd{flex:1; min-width:0}
.pn-fase b{display:block; font-size:14.5px; font-weight:600; font-family:var(--font-display); letter-spacing:-.01em}
.pn-fase p{font-size:12.5px; color:var(--txt-3); margin-top:4px; line-height:1.5}
.pn-fase .st{flex:0 0 auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 11px; border-radius:var(--r-full); border:1px solid var(--line); color:var(--txt-3)}
.pn-fase.now .st{color:var(--warning); border-color:rgba(255,200,61,.45)}
.pn-fase.done .st{color:var(--success); border-color:rgba(52,211,153,.4)}
.pn-board{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.pn-col{border-radius:var(--r-m); background:rgba(0,0,0,.14); border:1px solid var(--line); padding:14px; min-height:120px}
html[data-theme="light"] .pn-col{background:rgba(255,255,255,.35)}
.pn-col h5{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:11px; display:flex; justify-content:space-between; font-weight:500}
.pn-card{padding:13px 15px; border-radius:var(--r-s); background:var(--tint-2); border:1px solid var(--line);
  margin-bottom:8px; font-size:12.5px; line-height:1.4; cursor:grab;
  transition:transform 160ms var(--ease), opacity 160ms var(--ease), box-shadow 160ms var(--ease)}
.pn-card:hover{box-shadow:0 6px 18px rgba(2,8,10,.28)}
.pn-card.arrastando{opacity:.4; cursor:grabbing; transform:scale(.97) rotate(-1.2deg)}
.pn-col.alvo{border-color:rgba(34,211,238,.5); background:var(--accent-dim)}
.pn-col{transition:border-color 160ms var(--ease), background 160ms var(--ease)}
.pn-ghost{height:3px; border-radius:3px; background:var(--accent); margin:4px 0;
  animation:bfIn 160ms var(--ease) both}
.pn-add{width:100%; padding:11px; border-radius:var(--r-s); border:1px dashed var(--line);
  color:var(--txt-3); font-size:12px; transition:all var(--t-fast)}
.pn-add:hover{border-color:var(--accent); color:var(--accent)}
.pn-card .tag{display:block; margin-top:7px; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3)}
.pn-ag{display:grid; gap:9px}
.pn-ev{display:flex; gap:15px; align-items:center; padding:14px 18px; border-radius:var(--r-m);
  background:var(--tint); border:1px solid var(--line)}
.pn-ev .dt{flex:0 0 52px; text-align:center}
.pn-ev .dt b{display:block; font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1}
.pn-ev .dt span{font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3)}
.pn-ev .in b{display:block; font-size:13.5px; font-weight:600}
.pn-ev .in span{font-size:11.5px; color:var(--txt-3)}
@media (max-width:767px){ .pn-board{grid-template-columns:1fr} }

/* ---------- imetrick ---------- */
.im{padding:20px 22px 32px; display:grid; gap:16px; user-select:text}
.im-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.im-kpi{padding:20px; border-radius:var(--r-m); background:var(--tint); border:1px solid var(--line); border-top-color:var(--line-top)}
.im-kpi b{display:block; font-size:22px; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em}
.im-kpi span{font-size:10.5px; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3)}
.im svg{display:block; width:100%; height:auto}
.im .bar-lb{font-size:11.5px; fill:var(--txt-2)}
.im .bar-v{font-size:11px; fill:var(--txt-3); font-family:var(--font-mono)}
@keyframes barIn{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.im-src{font-size:11px; color:var(--txt-3); font-family:var(--font-mono)}

/* ---------- ebooks (estante) ---------- */
.eb{height:100%; overflow:auto; padding-bottom:20px}
.eb-shelf h4{padding:18px 22px 12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-3); font-weight:500}
.eb-row{display:flex; gap:16px; overflow-x:auto; padding:4px 22px 18px}
.eb-book{flex:0 0 132px; text-align:left; transition:transform var(--t-fast)}
.eb-book:hover{transform:translateY(-4px)}
.eb-cover{width:132px; height:184px; border-radius:var(--r-s); position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:13px; box-shadow:0 12px 28px rgba(2,8,10,.35)}
.eb-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.42))}
.eb-cover b{position:relative; z-index:2; font-family:var(--font-display); font-weight:700;
  font-size:13.5px; line-height:1.2; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4)}
.eb-book span{display:block; margin-top:8px; font-size:11px; color:var(--txt-3);
  font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase}
.eb-empty{padding:44px 30px; text-align:center; color:var(--txt-3); font-size:13.5px; line-height:1.8}

/* ---------- widgets da area de trabalho (bento) ---------- */
#widgets{position:absolute; top:22px; left:20px; display:grid; gap:12px; width:318px;
  grid-template-columns:1fr 1fr; grid-auto-rows:min-content}
.wg{position:relative; overflow:hidden; padding:18px 20px; border-radius:var(--r-l);
  background:var(--ink); -webkit-backdrop-filter:blur(var(--blur-2)) saturate(1.4); backdrop-filter:blur(var(--blur-2)) saturate(1.4);
  border:1px solid var(--line); border-top-color:var(--line-top); box-shadow:0 14px 34px rgba(2,8,10,.3);
  opacity:0; animation:wgIn 620ms cubic-bezier(.3,1.2,.36,1) both; cursor:default; text-align:left}
@keyframes wgIn{0%{opacity:0; transform:translateY(16px) scale(.94)} 100%{opacity:1; transform:none}}
.wg.w2{grid-column:span 2}
.wg h5{font-family:var(--font-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-3); font-weight:500; display:flex; align-items:center; gap:7px}
.wg .big{font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:34px; font-variant-numeric:tabular-nums}
.wg .sub{font-size:11px; color:var(--txt-3); margin-top:4px; line-height:1.35}
.wg.link{cursor:pointer; transition:transform 140ms var(--ease), background 140ms var(--ease)}
.wg.link:hover{background:var(--ink-2)}
.wg.link:active{transform:scale(.975)}
.wg .live{width:6px; height:6px; border-radius:50%; background:var(--success); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:live 2.4s var(--ease) infinite}
@keyframes live{50%{box-shadow:0 0 0 5px rgba(52,211,153,0)}}
/* relogio */
.wg-clock{grid-column:span 2; display:flex; align-items:flex-end; justify-content:space-between; gap:14px}
.wg-clock .big{font-size:46px}
.wg-clock .rt{text-align:right}
.wg-clock .rt b{display:block; font-size:12.5px; font-weight:600}
.wg-clock .rt span{font-size:11px; color:var(--txt-3)}
/* countdown com anel */
.wg-ring{display:flex; align-items:center; gap:14px; margin-top:10px}
.wg-ring svg{flex:0 0 auto}
.wg-ring .n{font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.02em; line-height:1}
/* sparkline gates */
.wg-track{display:flex; gap:4px; margin-top:12px; align-items:flex-end; height:34px}
.wg-track i{flex:1; border-radius:5px; background:rgba(128,160,155,.16); transition:background var(--t-med)}
.wg-track i.done{background:var(--success)}
.wg-track i.now{background:var(--warning); animation:bump 2.2s var(--ease) infinite}
@keyframes bump{50%{transform:scaleY(1.14)}}
/* progresso de estudo */
.wg-prog{margin-top:12px; height:7px; border-radius:99px; background:rgba(128,160,155,.16); overflow:hidden}
.wg-prog i{display:block; height:100%; border-radius:99px; background:var(--accent);
  width:0; transition:width 900ms var(--ease)}
/* proxima acao */
.wg-do{display:flex; gap:11px; align-items:center; margin-top:11px}
.wg-do .n{width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:10.5px; color:var(--accent); border:1px solid rgba(34,211,238,.4)}
.wg-do b{font-size:12.5px; font-weight:600; line-height:1.3}
@media (max-width:980px){ #widgets{display:none} }

/* ---------- get info ---------- */
.gi{padding:20px 22px; display:grid; gap:8px; font-size:13px; user-select:text}
.gi .big{font-size:40px; text-align:center; margin-bottom:6px}
.gi b{text-align:center; font-size:15px}
.gi .pl-row{font-size:12.5px}

/* ---------- onboarding ---------- */
#onboard{position:fixed; inset:0; z-index:190; display:none; background:#050D0F; overflow:hidden}
#onboard.on{display:block}
#ob-bg{position:absolute; inset:-4%; background:url("wallpapers/fck01-franja-luz-lateral.png") center/cover;
  transform:scale(1.12); transition:transform 1400ms var(--ease)}
#ob-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:8;
  opacity:0; pointer-events:none; transition:opacity 450ms var(--ease)}
#onboard.video #ob-video{opacity:1; pointer-events:auto; cursor:pointer}
#onboard.video .ob-step, #onboard.video #ob-nav, #onboard.video #ob-bg, #onboard.video .shade{
  opacity:0!important; pointer-events:none!important; transition:opacity 450ms var(--ease)}
#onboard .shade{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,13,15,.18), rgba(5,13,15,.88) 80%)}
.ob-step{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(22px,6vw,70px) 128px; opacity:0; transform:translateY(28px);
  transition:opacity 460ms var(--ease), transform 460ms var(--ease); pointer-events:none}
.ob-step.on{opacity:1; transform:none; pointer-events:auto}
.ob-kicker{font-family:var(--font-mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px}
.ob-title{font-family:var(--font-display); font-weight:700; font-size:clamp(30px,5vw,54px);
  line-height:1.06; letter-spacing:-.02em; color:#EAF4F2; max-width:660px}
.ob-title.brand{color:var(--accent); font-size:clamp(50px,9vw,96px)}
.ob-text{margin-top:16px; max-width:540px; font-size:15.5px; line-height:1.65; color:rgba(234,244,242,.72)}
.ob-rows{margin-top:20px; display:grid; gap:10px; max-width:520px}
.ob-row{display:flex; gap:13px; align-items:center; padding:13px 17px; border-radius:var(--r-m);
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-top-color:var(--line-top);
  -webkit-backdrop-filter:blur(var(--blur-1)); backdrop-filter:blur(var(--blur-1));
  font-size:14px; color:rgba(234,244,242,.85)}
.ob-row .ic{font-size:20px}
.ob-agents{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; max-width:560px}
.ob-agent{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; padding:7px 14px;
  border-radius:var(--r-full); border:1px solid rgba(34,211,238,.35); color:var(--accent);
  background:rgba(34,211,238,.08)}
#ob-nav{position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center;
  gap:18px; padding:0 clamp(22px,6vw,70px) 42px}
#ob-dots{display:flex; gap:8px; margin-right:auto}
.ob-dot{width:8px; height:8px; border-radius:99px; background:rgba(255,255,255,.18); transition:all var(--t-med) var(--ease)}
.ob-dot.on{background:var(--grad3); width:24px}
.ob-skip{color:rgba(234,244,242,.5); font-size:13.5px; transition:color var(--t-fast)}
.ob-skip:hover{color:#EAF4F2}
.ob-next{font-family:var(--font-display); font-weight:700; font-size:14.5px; padding:14px 30px;
  border-radius:var(--r-full); background:var(--grad7); color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.35); transition:transform var(--t-fast)}
.ob-next:hover{transform:translateY(-2px)}
.ob-next:active{transform:scale(.96)}
#onboard.leaving{transition:opacity 620ms var(--ease); opacity:0}

/* ---------- springboard (mobile) ---------- */
#springboard{display:none}
#home-pill{display:none}

/* ============================================================
   MOBILE <768 — paradigma iOS
   ============================================================ */
@media (max-width:767px){
  :root{--dock-h:84px; --menubar-h:44px}
  #menubar{padding-top:env(safe-area-inset-top); height:calc(var(--menubar-h) + env(safe-area-inset-top))}
  #menubar .mb-app,#menubar .mb-item{display:none}
  #desktop{display:none}
  #springboard{
    display:grid; position:fixed; inset:calc(var(--menubar-h) + env(safe-area-inset-top)) 0 0 0; z-index:5;
    grid-template-columns:repeat(4,1fr); gap:4px 0; align-content:start;
    padding:22px 12px calc(var(--dock-h) + 90px);
  }
  .sb-icon{display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 2px;
    opacity:0; animation:iconIn 500ms var(--ease) both}
  .sb-icon .bub{width:60px; height:60px; display:grid; place-items:center; font-size:32px;
    border-radius:16px; background:var(--tint-2); border:1px solid var(--line);
    border-top-color:var(--line-top); -webkit-backdrop-filter:blur(var(--blur-1)); backdrop-filter:blur(var(--blur-1));
    box-shadow:0 8px 20px rgba(2,8,10,.3); transition:transform var(--t-fast)}
  .sb-icon:active .bub{transform:scale(.88)}
  .sb-icon .lb{font-size:11px; color:var(--txt); text-shadow:0 1px 6px rgba(0,0,0,.5)}
  .win{
    position:fixed!important; inset:calc(var(--menubar-h) + env(safe-area-inset-top) + 6px) 0 0 0!important;
    width:auto!important; height:auto!important; min-width:0; min-height:0;
    border-radius:var(--r-l) var(--r-l) 0 0; border-bottom:none;
  }
  .win.opening{animation:sheetIn var(--t-slow) var(--ease) both}
  @keyframes sheetIn{from{transform:translateY(60vh); opacity:.6} to{transform:none; opacity:1}}
  .win.closing{animation:sheetOut 260ms var(--ease) both}
  @keyframes sheetOut{to{transform:translateY(100vh); opacity:.7}}
  .win-lights{display:none}
  .win-resize{display:none}
  .win-back{display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-size:14px; font-weight:600}
  .win-tb{flex-basis:50px}
  .win-tb::before{content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:40px; height:4px; border-radius:99px; background:var(--line-top)}
  .win-title{text-align:center; padding-right:0}
  .fd-side{flex-basis:64px}
  .fd-side .ck-sec{display:none}
  .fd-nav span.t{display:none}
  .fd-nav{justify-content:center; padding:10px 4px; font-size:19px}
  .nt-side{flex-basis:120px}
  .doc{padding:20px 18px 34px}
  .pl-grid{grid-template-columns:1fr}
  #dock{gap:14px; padding:10px 18px; border-radius:26px}
  #dock-wrap{bottom:calc(10px + env(safe-area-inset-bottom))}
  .dk:hover{transform:none}
  .dk-tip{display:none}
  .dk.extra{display:none}
  .dk-sep{display:none}
  #ckbar-wrap{bottom:calc(var(--dock-h) + 26px + env(safe-area-inset-bottom))}
  #desk-icons{display:none}
}
@media (min-width:768px) and (max-width:1023px){
  .dicon{width:104px}
  .dk{width:56px; height:56px; font-size:34px}
}