/* Kumble — Design Tokens · Brandkit V1 (minimalista geométrico)
   Importado por todas as telas do sistema. HTML/CSS/JS puro, sem frameworks. */
:root{
  --paper:#F4F2EC; --paper-2:#EEEBE3; --card:#FFFFFF; --card-soft:#FBFAF6;
  --line:#E7E3D9; --line-2:#DAD5C9;
  --ink:#1A1916; --ink-2:#56544C; --mute:#9C998E; --faint:#BEBBB1;
  --slate:#4F5D7A; --slate-2:#3D4A64; --slate-soft:#E9ECF2; --slate-tint:#F1F3F7;
  --amber:#A6772F; --amber-soft:#F2E9D6;
  --green:#5E7A56; --green-soft:#E6EDE1;
  --disp:'Space Grotesk',sans-serif; --body:'Hanken Grotesk',sans-serif; --mono:'Space Mono',monospace;
  --r-card:20px; --r-btn:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(26,25,22,.03);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:inherit;text-decoration:none;} img{display:block;}
.stage-mobile{min-height:100vh;background:#E6E3DB;display:flex;justify-content:center;align-items:flex-start;padding:28px 16px;}
.stage-desktop{min-height:100vh;background:#E6E3DB;display:flex;justify-content:center;align-items:flex-start;padding:24px;}
.phone{width:390px;background:var(--paper);border-radius:40px;border:1px solid var(--line-2);overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(26,25,22,.18);display:flex;flex-direction:column;min-height:800px;}
.statusbar{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 30px 0 34px;font-family:var(--disp);font-weight:600;font-size:14px;flex-shrink:0;}
.statusbar .dots{display:flex;gap:5px;align-items:center;}
.screen{flex:1;overflow:auto;}
.pad{padding:0 16px;}
.screen-head{padding:6px 20px 14px;}
.screen-head .back{display:inline-flex;align-items:center;gap:5px;color:var(--slate);font-family:var(--disp);font-weight:600;font-size:14px;margin-bottom:8px;}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.screen-head h1{font-family:var(--disp);font-weight:600;font-size:29px;letter-spacing:-.03em;line-height:1.05;margin-top:6px;}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;box-shadow:var(--shadow);}
.card.soft{background:var(--card-soft);}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:7px;background:var(--paper-2);color:var(--ink-2);}
.tag .dot{width:6px;height:6px;border-radius:6px;background:currentColor;}
.tag.slate{background:var(--slate-soft);color:var(--slate-2);}
.tag.amber{background:var(--amber-soft);color:var(--amber);}
.tag.green{background:var(--green-soft);color:var(--green);}
.btn{min-height:54px;border:1px solid transparent;border-radius:var(--r-btn);font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 20px;cursor:pointer;transition:filter .15s,transform .12s;}
.btn:active{transform:scale(.985);} .btn.full{width:100%;}
.btn.primary{background:var(--slate);color:#fff;}
.btn.soft{background:var(--slate-tint);color:var(--slate-2);border-color:var(--slate-soft);}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line-2);}
.btn.sm{min-height:44px;font-size:14px;padding:0 16px;}
.avatar{border-radius:999px;background:var(--slate-soft);color:var(--slate-2);font-family:var(--disp);font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bar{height:8px;background:var(--paper-2);border-radius:8px;overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:8px;background:var(--slate);}
.bottom-nav{display:flex;border-top:1px solid var(--line);background:rgba(244,242,236,.95);flex-shrink:0;}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 4px 22px;color:var(--faint);}
.bottom-nav a .lbl{font-family:var(--disp);font-weight:500;font-size:10.5px;}
.bottom-nav a.on{color:var(--slate);} .bottom-nav a.on .lbl{font-weight:600;}
.fab{position:absolute;right:16px;bottom:96px;width:56px;height:56px;border-radius:56px;background:var(--slate);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(79,93,122,.42);z-index:5;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);border-radius:999px;padding:8px 15px;font-family:var(--disp);font-weight:600;font-size:13px;cursor:pointer;}
.chip.on{background:var(--slate);color:#fff;border-color:var(--slate);}
.field{margin-bottom:14px;}
.field label{display:block;font-family:var(--body);font-size:13.5px;color:var(--ink-2);margin-bottom:8px;}
.input{width:100%;background:var(--card);border:1px solid var(--line-2);border-radius:13px;padding:14px 15px;font-family:var(--body);font-size:15.5px;color:var(--ink);outline:none;}
.desktop{width:1320px;max-width:100%;height:840px;background:var(--paper);border-radius:18px;border:1px solid var(--line-2);overflow:hidden;box-shadow:0 40px 90px rgba(26,25,22,.22);display:flex;}
.sidebar{width:76px;background:var(--card-soft);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px;flex-shrink:0;overflow:hidden;transition:width .2s cubic-bezier(.3,.8,.3,1);}
.sidebar:hover{width:224px;}
.sidebar .brand{display:flex;align-items:center;gap:12px;height:30px;padding:0 4px;margin-bottom:26px;}
.sidebar .brand .w{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.03em;white-space:nowrap;opacity:0;transition:opacity .15s;}
.sidebar:hover .brand .w{opacity:1;}
.sidebar nav{display:flex;flex-direction:column;gap:4px;}
.sidebar nav a{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;color:var(--mute);}
.sidebar nav a .lbl{font-family:var(--disp);font-weight:500;font-size:14.5px;color:var(--ink-2);white-space:nowrap;opacity:0;transition:opacity .15s;}
.sidebar:hover nav a .lbl{opacity:1;}
.sidebar nav a.on{background:var(--slate-tint);color:var(--slate);}
.sidebar nav a.on .lbl{color:var(--slate-2);font-weight:600;}
.sidebar .me{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line);}
.sidebar .me .info{opacity:0;transition:opacity .15s;white-space:nowrap;}
.sidebar:hover .me .info{opacity:1;}
.desk-main{flex:1;overflow:auto;padding:34px 44px;}
.dwrap{max-width:1100px;margin:0 auto;} .dwrap.wide{max-width:1180px;}
.dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;}
.dhead h1{font-family:var(--disp);font-weight:600;font-size:30px;letter-spacing:-.03em;margin-top:8px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.between{display:flex;align-items:center;justify-content:space-between;}
.muted{color:var(--mute);}
::-webkit-scrollbar{width:0;height:0;}