/* CHASSI GLOBAL - rail + topbar. Identico em todas as telas. */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--t-slow) var(--e-out)}
.app.is-folded{grid-template-columns:var(--rail-folded) minmax(0,1fr)}

.rail{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;
  padding:18px 12px 14px;overflow:hidden;
  background:var(--surface);border-right:1px solid var(--line);
}
.rail-top{display:flex;align-items:center;gap:10px;padding:0 6px 4px;margin-bottom:14px;min-height:34px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.mark{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--grad-ai);color:#fff;box-shadow:var(--glow-soft);overflow:hidden;
}
.mark .ic{width:17px;height:17px;stroke-width:2}
.mark img{width:100%;height:100%;object-fit:cover;display:block}
.brand-tx{font-size:var(--fs-14);font-weight:600;letter-spacing:var(--ls-tight);color:var(--ink);white-space:nowrap}
.brand-tx em{font-style:normal;color:var(--muted);font-weight:450}
.rail-fold{
  margin-left:auto;width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--faint);border:1px solid transparent;transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast);
}
.rail-fold:hover{color:var(--ink);background:var(--surface-2);border-color:var(--line)}
.rail-fold .ic{transition:transform var(--t-slow) var(--e-spring)}
.is-folded .rail-fold .ic{transform:rotate(180deg)}
.is-folded .rail-top{flex-direction:column;gap:12px;padding:0;margin-bottom:16px}
.is-folded .rail-fold{margin-left:0}

.rail-lbl{
  font-size:10px;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--faint);padding:16px 10px 6px;white-space:nowrap;
}
.nav{
  position:relative;display:flex;align-items:center;gap:11px;white-space:nowrap;
  padding:8px 10px;border-radius:var(--r-md);font-size:var(--fs-13);font-weight:500;color:var(--muted);
  transition:color var(--t-fast) var(--e-out),background-color var(--t-fast) var(--e-out);
}
.nav:hover{color:var(--ink);background:var(--surface-2)}
.nav.on{color:var(--ink);background:var(--accent-soft);font-weight:600}
.nav.on::before{
  content:'';position:absolute;left:-12px;top:50%;translate:0 -50%;
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent);
}
.nav .ic{color:inherit}
.nav-favicon{width:16px;height:16px;border-radius:4px;flex:none;object-fit:cover;background:var(--surface-2)}
.nav.on .ic{color:var(--accent)}
.nav-tag{margin-left:auto;font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--accent-ink);background:var(--accent-soft);padding:1px 6px;border-radius:var(--r-full)}
.rail-sp{flex:1}
.rail-user{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface-2);margin-top:10px;
}
.avatar{
  width:30px;height:30px;border-radius:var(--r-full);flex:none;display:grid;place-items:center;
  background:var(--grad-warm);color:#fff;font-size:var(--fs-11);font-weight:600;letter-spacing:0;
}
.rail-user b{display:block;font-size:var(--fs-12);color:var(--ink);font-weight:600;white-space:nowrap;line-height:1.3}
.rail-user span{display:block;font-size:10.5px;color:var(--muted);font-family:var(--font-mono);white-space:nowrap}
.is-folded .rail-lbl,.is-folded .nav span,.is-folded .nav-tag,.is-folded .brand-tx,.is-folded .rail-user div{display:none}
.is-folded .nav{justify-content:center;padding:9px 0}
.is-folded .rail-user{justify-content:center;padding:8px 0;background:none;border-color:transparent}

.shell{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  height:var(--topbar-h);padding:0 24px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
}
.crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-13);color:var(--muted);min-width:0}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{color:var(--faint)}
.top-sp{flex:1}
.searchbox{
  display:flex;align-items:center;gap:9px;flex:0 1 320px;min-width:0;
  height:34px;padding:0 10px 0 12px;border-radius:var(--r-md);
  border:1px solid var(--line-2);background:var(--surface);color:var(--faint);
  transition:border-color var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out);
}
.searchbox:focus-within{border-color:var(--accent);box-shadow:var(--glow-soft)}
.searchbox input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:var(--fs-13);color:var(--ink)}
.searchbox input::placeholder{color:var(--faint)}
.kbd{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;color:var(--muted);
  border:1px solid var(--line-2);border-bottom-width:2px;background:var(--surface-2);
  padding:1px 5px;border-radius:5px;white-space:nowrap;
}
.iconbtn{
  position:relative;width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--muted);border:1px solid transparent;
  transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),transform var(--t-base) var(--e-spring);
}
.iconbtn:hover{color:var(--ink);background:var(--surface-2);border-color:var(--line)}
.iconbtn:active{transform:scale(.92)}
.iconbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--coral);border:2px solid var(--bg)}
.iconbtn .i-sun{display:none}
[data-theme="dark"] .iconbtn .i-sun{display:block}
[data-theme="dark"] .iconbtn .i-moon{display:none}
.btn-ai{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:var(--r-md);
  font-size:var(--fs-12);font-weight:600;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  transition:box-shadow var(--t-base) var(--e-out),transform var(--t-base) var(--e-spring);
}
.btn-ai:hover{box-shadow:var(--glow-soft)}
.btn-ai:active{transform:scale(.96)}
.btn-ai .ic{width:14px;height:14px;color:var(--accent)}
@media(max-width:1080px){.searchbox{flex-basis:200px}}
@media(max-width:900px){
  .app,.app.is-folded{grid-template-columns:1fr}
  .rail{display:none}
  .topbar{padding:0 16px}
  .searchbox{display:none}
}
@media(max-width:540px){
  .crumb .sep,.crumb > span:last-child{display:none}
  .btn-ai span{display:none}
}

.main{padding:0 24px 120px;width:100%;max-width:calc(var(--max) + 48px);margin:0 auto}
@media(max-width:640px){.main{padding:0 16px 80px}}

/* - indice de secoes (tabs horizontais) - */
.tabs{
  position:sticky;top:var(--topbar-h);z-index:30;display:flex;gap:2px;overflow-x:auto;
  padding:8px 0;margin-bottom:8px;scrollbar-width:none;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;padding:6px 11px;border-radius:var(--r-sm);font-size:var(--fs-12);font-weight:500;
  color:var(--muted);white-space:nowrap;transition:color var(--t-fast),background-color var(--t-fast);
}
.tab:hover{color:var(--ink);background:var(--surface-2)}
.tab.on{color:var(--accent-ink);background:var(--accent-soft);font-weight:600}