/* ==========================================================================
   Casa Smart · Design System v3 — "Frosted Lime"
   Vidro fosco real (luz pastel vazando + brilho de topo), ícones de vidro
   coloridos, base clara, sans preta pesada, acento verde limão, painel escuro
   de contraste, controles em pílula. Referência: frosted glass UI + dashboard lime.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&display=swap');

:root{
  --bg:    #e8ebf0;
  --bg-2:  #dfe3ea;
  --white: #ffffff;

  --ink:   #14161b;
  --ink-2: #3b4048;
  --muted: #6b727c;
  --muted-2:#9aa1ac;
  --line:  rgba(20,22,27,.09);
  --line-2:rgba(20,22,27,.05);

  --lime:      #d6f24e;
  --lime-deep: #c4e532;
  --lime-ink:  #1a2206;

  --dark:   #16181e;
  --dark-2: #1f232b;
  --danger: #e0556b;

  /* vidro fosco */
  --glass:        rgba(255,255,255,.5);
  --glass-strong: rgba(255,255,255,.7);
  --glass-brd:    rgba(255,255,255,.72);
  --glass-brd-2:  rgba(20,22,27,.06);

  /* sombras suaves, profundidade tátil, + brilho de topo */
  --hl: inset 0 1px 0 rgba(255,255,255,.75);
  --sh-sm: 0 2px 6px -2px rgba(28,36,54,.14), var(--hl);
  --sh-md: 0 18px 40px -22px rgba(28,36,54,.4), 0 4px 14px -8px rgba(28,36,54,.14), var(--hl);
  --sh-lg: 0 40px 80px -34px rgba(28,36,54,.5), 0 12px 30px -16px rgba(28,36,54,.22), var(--hl);

  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  --e-out:   cubic-bezier(.22,1,.36,1);
  --e-inout: cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.42,.5,1);

  --display:'Plus Jakarta Sans', system-ui, sans-serif;
  --sidebar-w:274px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--bg); overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; line-height:1.04; font-family:var(--display); font-weight:800; letter-spacing:-.02em; }
button,input,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(214,242,78,.55); color:var(--ink); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:8px; }

*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:rgba(20,22,27,.14); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(20,22,27,.24); background-clip:content-box; }

.display{ font-family:var(--display); }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
.hl{ background:var(--lime); color:var(--ink); padding:0 .12em; border-radius:8px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* ==========================================================================
   Cena de fundo — luz pastel vazando (para o vidro captar cor)
   ========================================================================== */
.scene{ position:fixed; inset:0; overflow:hidden; z-index:0;
  background:radial-gradient(120% 90% at 50% -10%, #f2f4f8 0%, var(--bg) 48%, var(--bg-2) 100%); }
.aurora{ position:absolute; border-radius:50%; filter:blur(70px); will-change:transform; }
.aurora.a1{ width:44vw; height:44vw; left:-8vw; top:-12vw; background:radial-gradient(circle at 40% 40%, #b8e6d0, transparent 62%); opacity:.5; animation:drift1 30s var(--e-inout) infinite; }
.aurora.a2{ width:40vw; height:40vw; right:-6vw; top:-4vw; background:radial-gradient(circle at 60% 40%, #d6c9f0, transparent 60%); opacity:.5; animation:drift2 36s var(--e-inout) infinite; }
.aurora.a3{ width:52vw; height:52vw; left:22vw; bottom:-28vw; background:radial-gradient(circle at 50% 50%, #cfe0f6, transparent 60%); opacity:.5; animation:drift3 42s var(--e-inout) infinite; }
.aurora.a4{ width:26vw; height:26vw; right:12vw; bottom:-2vw; background:radial-gradient(circle at 50% 50%, #f6d6cf, transparent 62%); opacity:.42; animation:drift2 34s var(--e-inout) infinite reverse; }
.scene canvas{ display:none; }
.grain{ display:none; }

@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(5vw,4vw) scale(1.12);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vw,4vw) scale(1.1);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vw,-4vw) scale(1.12);} }

/* ---------- vidro ---------- */
.glass{ background:var(--glass); backdrop-filter:blur(48px) saturate(160%); -webkit-backdrop-filter:blur(48px) saturate(160%);
  border:1px solid var(--glass-brd); box-shadow:var(--sh-md); }
.app-hidden{ display:none !important; }

/* ---------- Ícone de vidro colorido ---------- */
.gi{ position:relative; display:grid; place-items:center; border-radius:13px; overflow:hidden; flex:0 0 auto;
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.72); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 6px 14px -8px rgba(28,36,54,.34); }
.gi::before{ content:""; position:absolute; width:150%; height:150%; left:-25%; top:-40%;
  background:radial-gradient(circle at 42% 32%, var(--g), transparent 58%); opacity:.95; filter:blur(3px); }
.gi svg{ position:relative; z-index:1; color:var(--i); }

/* ---------- Brand ---------- */
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand .mark{ width:40px; height:40px; border-radius:13px; position:relative; display:grid; place-items:center;
  background:var(--dark); color:#fff; flex:0 0 auto; box-shadow:var(--sh-sm); }
.brand .mark svg{ width:21px; height:21px; stroke-width:1.8; }
.brand .mark::after{ content:""; position:absolute; right:8px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px rgba(214,242,78,.9); }
.brand .wm{ display:flex; flex-direction:column; line-height:1; }
.brand .wm b{ font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.02em; }
.brand .wm span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:4px; font-weight:600; }

/* ==========================================================================
   Botões
   ========================================================================== */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 20px; border-radius:var(--r-pill); font-family:var(--display); font-weight:700; font-size:14.5px; letter-spacing:-.01em;
  transition:transform .3s var(--e-spring), box-shadow .3s var(--e-out), background .2s; white-space:nowrap; }
.btn svg{ width:18px; height:18px; }
.btn:active{ transform:scale(.96); }
.btn-primary{ color:var(--lime-ink); background:var(--lime); box-shadow:0 12px 26px -12px rgba(196,229,50,.9), var(--hl); }
.btn-primary:hover{ transform:translateY(-2px); background:#def75f; box-shadow:0 18px 36px -14px rgba(196,229,50,1), var(--hl); }
.btn-dark{ color:#fff; background:var(--dark); box-shadow:var(--sh-md); }
.btn-dark:hover{ transform:translateY(-2px); background:#20242c; }
.btn-ghost{ background:var(--glass-strong); border:1px solid var(--glass-brd); color:var(--ink); box-shadow:var(--sh-sm); backdrop-filter:blur(20px); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-soft{ background:rgba(20,22,27,.06); color:var(--ink); }
.btn-soft:hover{ background:rgba(20,22,27,.1); transform:translateY(-1px); }
.btn-sm{ height:40px; padding:0 16px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn-icon{ width:46px; height:46px; padding:0; border-radius:15px; }

/* ==========================================================================
   Inputs
   ========================================================================== */
.field{ position:relative; margin-bottom:14px; }
.field label{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.input{ width:100%; height:50px; padding:0 16px; border-radius:var(--r-sm); background:rgba(255,255,255,.75);
  border:1px solid var(--line); transition:border .2s, box-shadow .2s, background .2s; font-size:15px; box-shadow:var(--hl); }
.input::placeholder{ color:var(--muted-2); }
.input:focus{ background:#fff; border-color:var(--ink); box-shadow:0 0 0 4px rgba(20,22,27,.08); outline:none; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
#view-app{ position:relative; z-index:2; height:100%; display:grid; grid-template-columns:var(--sidebar-w) 1fr; padding:14px; gap:14px; }

.sidebar{ border-radius:var(--r-xl); padding:22px 16px; display:flex; flex-direction:column; gap:6px; }
.sidebar .brand{ padding:6px 8px 20px; }
.side-cta{ margin:2px 4px 16px; }
.nav{ display:flex; flex-direction:column; gap:4px; }
.nav-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:700; padding:10px 12px 8px; }
.nav a{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-pill); color:var(--ink-2); font-weight:600; font-size:14.5px; position:relative; transition:background .2s, transform .2s, color .2s; }
.nav a svg{ width:19px; height:19px; color:var(--muted); transition:color .2s; }
.nav a:hover{ background:rgba(20,22,27,.05); transform:translateX(2px); }
.nav a.active{ background:var(--lime); color:var(--lime-ink); box-shadow:0 10px 22px -12px rgba(196,229,50,.9); font-weight:700; }
.nav a.active svg{ color:var(--lime-ink); }
.nav a .count{ margin-left:auto; font-size:11.5px; font-weight:700; background:rgba(20,22,27,.08); color:var(--ink-2); padding:2px 9px; border-radius:99px; }
.nav a.active .count{ background:rgba(26,34,6,.14); color:var(--lime-ink); }
.side-foot{ margin-top:auto; }
.usercard{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:16px; background:rgba(255,255,255,.5); border:1px solid var(--glass-brd-2); box-shadow:var(--hl); }
.usercard .av{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:800; font-size:15px; background:var(--dark); flex:0 0 auto; }
.usercard .av::after{ content:""; position:absolute; }
.usercard .u-meta{ min-width:0; } .usercard .u-meta b{ display:block; font-size:13.5px; font-weight:700; }
.usercard .u-meta span{ font-size:11.5px; color:var(--muted); }

.main{ border-radius:var(--r-xl); overflow:hidden; position:relative; display:flex; flex-direction:column; min-width:0; }
.topbar{ display:flex; align-items:center; gap:14px; padding:18px 26px; border-bottom:1px solid var(--glass-brd-2); }
.topbar .t-title b{ font-family:var(--display); font-size:19px; font-weight:800; display:block; letter-spacing:-.02em; }
.topbar .t-title span{ font-size:12.5px; color:var(--muted); }
.topbar .spacer{ flex:1; }
.chip{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.02em; background:var(--dark); color:#fff; }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(214,242,78,.25); animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px rgba(214,242,78,0);} }

.view-body{ flex:1; min-height:0; position:relative; }

/* ==========================================================================
   CHAT
   ========================================================================== */
.chat{ height:100%; display:flex; flex-direction:column; }
.thread{ flex:1; overflow-y:auto; padding:28px clamp(16px,5vw,48px); scroll-behavior:smooth; }
.thread-inner{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }

/* empty */
.empty{ max-width:720px; margin:0 auto; padding:min(6vh,56px) 4px; animation:fadeUp .8s var(--e-out) both; }
.empty .eyebrow{ margin-bottom:20px; }
.empty h2{ font-size:clamp(34px,5vw,50px); font-weight:800; line-height:1.03; letter-spacing:-.03em; margin-bottom:18px; }
.empty p{ color:var(--ink-2); font-size:16px; max-width:520px; line-height:1.6; margin:0 0 28px; }
.starters{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.starter{ display:flex; align-items:center; gap:14px; padding:16px; text-align:left; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-brd);
  box-shadow:var(--sh-sm); transition:transform .3s var(--e-out), box-shadow .3s; }
.starter:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.starter .gi{ width:46px; height:46px; } .starter .gi svg{ width:22px; height:22px; }
.starter .s-tx{ flex:1; min-width:0; } .starter .s-tx b{ display:block; font-family:var(--display); font-size:15px; font-weight:700; margin-bottom:3px; letter-spacing:-.01em; }
.starter .s-tx span{ font-size:12.5px; color:var(--muted); line-height:1.4; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }

/* messages */
.msg{ display:flex; gap:13px; animation:msgIn .5s var(--e-out) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.msg .avatar{ width:36px; height:36px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:14px; }
.msg.ai .avatar{ background:var(--dark); color:#fff; }
.msg.ai .avatar svg{ width:19px; height:19px; color:var(--lime); }
.msg.user{ flex-direction:row-reverse; }
.msg.user .avatar{ background:rgba(255,255,255,.7); border:1px solid var(--glass-brd-2); color:var(--ink); box-shadow:var(--hl); }
.bubble{ max-width:84%; padding:15px 18px; font-size:15px; line-height:1.62; }
.msg.ai .bubble{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:6px 20px 20px 20px; box-shadow:var(--sh-sm); }
.msg.user .bubble{ background:var(--dark); color:#eef1f4; border-radius:20px 6px 20px 20px; box-shadow:var(--sh-md); }
.bubble p{ margin:0 0 8px; } .bubble p:last-child{ margin:0; } .bubble strong{ font-weight:700; }

.typing{ display:inline-flex; gap:5px; padding:3px 0; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); animation:typing 1.3s var(--e-inout) infinite; }
.typing i:nth-child(2){ animation-delay:.16s; } .typing i:nth-child(3){ animation-delay:.32s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-6px); opacity:1;} }

/* ---------- Solution card ---------- */
.solution{ margin-top:2px; border-radius:var(--r-xl); overflow:hidden; animation:msgIn .6s var(--e-out) both; }
.sol-hero{ padding:24px 24px 22px; border-bottom:1px solid var(--glass-brd-2); }
.sol-eyebrow{ margin-bottom:14px; }
.sol-hero h3{ font-family:var(--display); font-size:25px; font-weight:800; letter-spacing:-.03em; margin-bottom:8px; }
.sol-hero .sub{ color:var(--muted); font-size:13.5px; margin:0; }
/* faixa de stats: painel escuro de contraste com destaque limão */
.sol-stats{ display:flex; gap:0; margin-top:20px; border-radius:18px; overflow:hidden; background:var(--dark); box-shadow:var(--sh-md); }
.sol-stats .st{ flex:1; padding:16px 18px; border-right:1px solid rgba(255,255,255,.08); }
.sol-stats .st:last-child{ border-right:none; }
.sol-stats .st b{ font-family:var(--display); font-size:24px; font-weight:800; display:block; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.sol-stats .st:last-child b{ color:var(--lime); }
.sol-stats .st span{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.sol-body{ padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--glass); }
.zone{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--glass-brd-2); background:rgba(255,255,255,.5); box-shadow:var(--hl); }
.zone summary{ list-style:none; display:flex; align-items:center; gap:13px; padding:14px 16px; cursor:pointer; transition:background .2s; }
.zone summary::-webkit-details-marker{ display:none; }
.zone summary:hover{ background:rgba(255,255,255,.55); }
.zone .gi{ width:38px; height:38px; } .zone .gi svg{ width:19px; height:19px; }
.zone .zt{ flex:1; min-width:0; } .zone .zt b{ font-family:var(--display); font-size:14.5px; font-weight:700; display:block; letter-spacing:-.01em; } .zone .zt span{ font-size:12px; color:var(--muted); }
.zone .zc{ font-size:11.5px; font-weight:700; color:var(--ink-2); background:rgba(20,22,27,.06); padding:3px 10px; border-radius:99px; }
.zone .chev{ color:var(--muted-2); transition:transform .3s var(--e-out); } .zone[open] .chev{ transform:rotate(90deg); }
.zone .z-list{ padding:2px 16px 15px 67px; display:flex; flex-direction:column; gap:10px; }
.zdev{ display:flex; align-items:baseline; gap:11px; font-size:14px; }
.zdev .q{ font-weight:800; color:var(--ink); min-width:28px; font-variant-numeric:tabular-nums; }
.zdev .n{ font-weight:600; } .zdev .why{ color:var(--muted); font-size:12.5px; }
.scenes{ margin-top:2px; padding:14px 16px 6px; }
.scenes .st-lbl{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:11px; }
.scene-pill{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:99px; background:rgba(255,255,255,.6); border:1px solid var(--glass-brd); color:var(--ink-2); margin:0 7px 7px 0; box-shadow:var(--hl); transition:.2s; }
.scene-pill:hover{ background:var(--lime); border-color:var(--lime); color:var(--lime-ink); }
.scene-pill svg{ width:14px; height:14px; }
.sol-actions{ display:flex; gap:10px; padding:16px; background:var(--glass-strong); border-top:1px solid var(--glass-brd-2); flex-wrap:wrap; }

/* ---------- Composer ---------- */
.composer{ padding:14px clamp(16px,5vw,48px) 22px; }
.composer-inner{ max-width:800px; margin:0 auto; }
.composer-box{ display:flex; align-items:flex-end; gap:10px; padding:9px 9px 9px 20px; border-radius:22px; background:var(--glass-strong);
  border:1px solid var(--glass-brd); box-shadow:var(--sh-md); transition:box-shadow .3s, border .2s; }
.composer-box:focus-within{ border-color:var(--ink); box-shadow:0 0 0 4px rgba(20,22,27,.07), var(--sh-md); }
.composer-box textarea{ flex:1; border:none; background:none; resize:none; max-height:150px; padding:12px 0; font-size:15px; line-height:1.5; outline:none; }
.composer-hint{ text-align:center; font-size:11.5px; color:var(--muted-2); margin-top:11px; font-weight:500; }

/* ==========================================================================
   DRAWER
   ========================================================================== */
.scrim{ position:fixed; inset:0; z-index:40; background:rgba(20,22,27,.32); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .35s; }
.scrim.open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(500px,100%); z-index:41; transform:translateX(102%); transition:transform .5s var(--e-out);
  background:var(--glass-strong); backdrop-filter:blur(56px) saturate(160%); -webkit-backdrop-filter:blur(56px) saturate(160%); border-left:1px solid var(--glass-brd); display:flex; flex-direction:column; box-shadow:var(--sh-lg); }
.drawer.open{ transform:none; }
.drawer-head{ padding:24px 26px 18px; border-bottom:1px solid var(--glass-brd-2); }
.drawer-head .top{ display:flex; align-items:center; gap:12px; }
.drawer-head h3{ font-family:var(--display); font-size:21px; font-weight:800; flex:1; letter-spacing:-.02em; }
.drawer-head p{ font-size:12.5px; color:var(--muted); margin:6px 0 0; font-weight:500; }
.drawer-close{ color:var(--muted); padding:8px; border-radius:10px; transition:.2s; } .drawer-close:hover{ background:rgba(20,22,27,.06); color:var(--ink); }
.tiers{ display:flex; gap:4px; padding:5px; border-radius:15px; background:rgba(20,22,27,.06); margin-top:18px; }
.tiers button{ flex:1; padding:10px 4px; border-radius:11px; font-family:var(--display); font-size:12.5px; font-weight:700; color:var(--muted); transition:.25s; }
.tiers button.active{ background:var(--lime); color:var(--lime-ink); box-shadow:0 8px 18px -8px rgba(196,229,50,.9); }
.tiers button small{ display:block; font-family:'Inter'; font-size:9.5px; font-weight:500; color:var(--muted-2); margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
.tiers button.active small{ color:rgba(26,34,6,.6); }
.drawer-body{ flex:1; overflow-y:auto; padding:16px 26px; }
.bom-group{ margin-bottom:22px; }
.bom-group .bg-lbl{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; display:flex; align-items:center; gap:9px; }
.bom-group .bg-lbl .gi{ width:22px; height:22px; border-radius:7px; } .bom-group .bg-lbl .gi svg{ width:13px; height:13px; }
.bom-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); animation:msgIn .4s var(--e-out) both; }
.bom-row .gi{ width:40px; height:40px; } .bom-row .gi svg{ width:20px; height:20px; }
.bom-row .bm{ flex:1; min-width:0; } .bom-row .bm b{ font-family:var(--display); font-size:13.5px; font-weight:700; display:block; letter-spacing:-.01em; }
.bom-row .bm span{ font-size:11.5px; color:var(--muted); }
.bom-row .bq{ display:flex; align-items:center; gap:8px; }
.qbtn{ width:27px; height:27px; border-radius:9px; display:grid; place-items:center; background:rgba(20,22,27,.06); color:var(--ink); font-weight:800; transition:.15s; }
.qbtn:hover{ background:var(--lime); color:var(--lime-ink); }
.bom-row .qn{ min-width:22px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
.bom-row .bp{ min-width:86px; text-align:right; font-family:var(--display); font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.drawer-foot{ padding:20px 26px 24px; border-top:1px solid var(--glass-brd-2); background:rgba(255,255,255,.42); }
.total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; padding:16px 18px; border-radius:18px; background:var(--dark); box-shadow:var(--sh-md); }
.total-row .tl span{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); } .total-row .tl b{ display:block; font-size:13px; color:#fff; margin-top:4px; font-family:var(--display); font-weight:700; }
.total-row .tv{ font-family:var(--display); font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--lime); }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects{ height:100%; overflow-y:auto; padding:30px clamp(16px,5vw,48px); }
.proj-inner{ max-width:1020px; margin:0 auto; }
.proj-head{ display:flex; align-items:flex-end; gap:16px; margin-bottom:26px; }
.proj-head h2{ font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.03em; } .proj-head p{ color:var(--muted); font-size:14px; margin:8px 0 0; }
.proj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.pcard{ border-radius:var(--r-lg); overflow:hidden; background:var(--glass); border:1px solid var(--glass-brd); box-shadow:var(--sh-sm);
  transition:transform .35s var(--e-out), box-shadow .35s; cursor:pointer; display:flex; flex-direction:column; animation:fadeUp .6s var(--e-out) both; }
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.pcard .p-top{ padding:20px; }
.pcard .p-glyph{ width:48px; height:48px; border-radius:14px; margin-bottom:16px; } .pcard .p-glyph svg{ width:24px; height:24px; }
.pcard h4{ font-family:var(--display); font-size:17px; font-weight:800; margin-bottom:7px; letter-spacing:-.02em; }
.pcard .p-date{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; font-weight:500; } .pcard .p-date svg{ width:14px; height:14px; }
.pcard .p-tags{ display:flex; flex-wrap:wrap; gap:6px; padding:0 20px 16px; }
.ptag{ font-size:11px; font-weight:600; padding:5px 11px; border-radius:99px; background:rgba(20,22,27,.06); color:var(--ink-2); }
.pcard .p-foot{ margin-top:auto; padding:16px 20px; border-top:1px solid var(--glass-brd-2); display:flex; align-items:center; gap:10px; }
.pcard .p-foot .pf-total{ font-family:var(--display); font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.pcard .p-foot .pf-total span{ font-size:11px; color:var(--muted); font-weight:500; display:block; margin-top:2px; }
.pcard .p-del{ margin-left:auto; color:var(--muted-2); padding:8px; border-radius:9px; transition:.2s; }
.pcard .p-del:hover{ background:rgba(224,85,107,.12); color:var(--danger); }

.empty-proj{ text-align:center; padding:80px 20px; }
.empty-proj .ep-orb{ width:68px; height:68px; margin:0 auto 22px; border-radius:20px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--glass-brd); box-shadow:var(--sh-md); }
.empty-proj .ep-orb svg{ width:30px; height:30px; color:var(--muted-2); }
.empty-proj h3{ font-family:var(--display); font-size:21px; font-weight:800; margin-bottom:10px; letter-spacing:-.02em; } .empty-proj p{ color:var(--muted); margin:0 auto 24px; max-width:380px; line-height:1.55; }

/* ==========================================================================
   TOASTS + MODAL
   ========================================================================== */
.toasts{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast{ display:flex; align-items:center; gap:11px; padding:13px 18px; border-radius:15px; background:var(--dark); color:#fff;
  box-shadow:var(--sh-lg); font-size:13.5px; font-weight:600; animation:toastIn .5s var(--e-spring) both; max-width:90vw; }
.toast.out{ animation:toastOut .4s var(--e-out) forwards; }
.toast .ti{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; background:var(--lime); color:var(--lime-ink); }
.toast .ti svg{ width:16px; height:16px; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(20px) scale(.9);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateY(12px) scale(.95);} }

.modal-scrim{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px; background:rgba(20,22,27,.34); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .3s; }
.modal-scrim.open{ opacity:1; pointer-events:auto; }
.modal{ width:min(410px,100%); border-radius:var(--r-xl); padding:30px; text-align:center; background:var(--glass-strong); backdrop-filter:blur(52px);
  border:1px solid var(--glass-brd); box-shadow:var(--sh-lg); transform:scale(.94) translateY(10px); transition:transform .35s var(--e-spring); }
.modal-scrim.open .modal{ transform:none; }
.modal .m-icon{ width:56px; height:56px; border-radius:17px; margin:0 auto 18px; display:grid; place-items:center; background:rgba(224,85,107,.14); color:var(--danger); }
.modal .m-icon svg{ width:27px; height:27px; }
.modal h3{ font-family:var(--display); font-size:21px; font-weight:800; margin-bottom:9px; letter-spacing:-.02em; } .modal p{ color:var(--muted); font-size:14px; margin:0 0 22px; line-height:1.55; }
.modal .m-actions{ display:flex; gap:10px; } .modal .m-actions .btn{ flex:1; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
.menu-toggle{ display:none; width:44px; height:44px; place-items:center; border-radius:13px; background:var(--glass-strong); border:1px solid var(--glass-brd); box-shadow:var(--sh-sm); }
.menu-toggle svg{ width:20px; height:20px; }
@media (max-width:920px){
  :root{ --sidebar-w:0px; }
  #view-app{ grid-template-columns:1fr; padding:10px; }
  .sidebar{ position:fixed; left:10px; top:10px; bottom:10px; width:268px; z-index:50; transform:translateX(-116%); transition:transform .4s var(--e-out); }
  .sidebar.open{ transform:none; }
  .menu-toggle{ display:grid; }
  .starters{ grid-template-columns:1fr; }
  .drawer{ width:100%; }
  .empty h2{ font-size:34px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.08ms !important; }
}