/* ============================================================
   CALCULO GMD — Design System (locked)
   Tom: cockpit executivo, acabamento editorial-premium.
   Tipografia: Manrope. Números em Manrope 700/800.
   ============================================================ */

:root{
  /* Marca */
  --bordo:#7B2D2A;        /* assinatura GMD */
  --bordo-700:#5E211F;
  --bordo-050:#F3E7E5;
  --cream:#F7F4EF;        /* fundo da página */
  --paper:#FFFFFF;        /* cards */
  --ink:#2B2422;          /* tinta grafite */
  --muted:#8C8178;        /* texto secundário */
  --line:rgba(43,36,34,.10);
  --line-2:rgba(43,36,34,.18);
  --shadow:0 1px 2px rgba(43,36,34,.04), 0 8px 24px -16px rgba(43,36,34,.18);

  /* Selos (linguagem visual do clube fechado) */
  --selo-infinity:#7B2D2A;
  --selo-diamond:#5F7E8C;
  --selo-black:#33302E;
  --selo-gold:#B08A3E;
  --selo-starter:#B9AFA0;

  /* Semáforo de segurança */
  --ok:#3B7A57;
  --warn:#B0822F;
  --bad:#A33A33;
  --ok-050:#E9F1EC;
  --warn-050:#F6EEDD;
  --bad-050:#F4E5E4;

  --radius:14px;
  --radius-sm:10px;
  --sidebar-w:248px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-weight:700}

/* ============================== LAYOUT ============================== */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

.sidebar{
  position:sticky;top:0;height:100vh;
  background:var(--bordo);
  color:#F4E9E6;
  display:flex;flex-direction:column;
  padding:22px 16px;
}
.sidebar__brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px}
.brandmark{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  background:#F4E9E6;color:var(--bordo);
  display:grid;place-items:center;font-weight:800;font-size:17px;letter-spacing:-.5px;
}
.sidebar__brand b{font-size:15px;font-weight:800;letter-spacing:.2px;color:#fff;display:block;line-height:1.1}
.sidebar__brand span{font-size:11px;color:#D9B9B4;letter-spacing:.6px;text-transform:uppercase}

/* ============================== LOGIN (protótipo) ============================== */
.login{position:fixed;inset:0;z-index:1000;display:flex}
body.is-locked{overflow:hidden}

/* painel esquerdo — marca */
.login__brandpanel{
  flex:1 1 50%;
  background:radial-gradient(120% 120% at 28% 0%, var(--bordo-700) 0%, var(--bordo) 55%, #46110F 100%);
  color:#fff; padding:48px 56px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.login__brandpanel::after{
  content:''; position:absolute; right:-140px; bottom:-90px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,255,255,.06), transparent 62%); pointer-events:none;
}
.login__logo{display:flex; align-items:flex-start; gap:14px; z-index:1}
.login__logo span{font-size:18px; font-weight:600; line-height:1.18; color:#F4E9E6}
.login__hero{z-index:1}
.login__kicker{font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#1C8E8B; margin-bottom:10px}
.login__headline{margin:0; font-size:54px; font-weight:800; line-height:1.02; letter-spacing:-1px}

/* painel direito — formulário */
.login__formpanel{flex:1 1 50%; background:var(--cream); display:flex; align-items:center; justify-content:center; padding:40px; position:relative}
/* logomarca oficial GMD no canto superior direito — recolorida ao bordô da paleta via mask */
.login__mark{
  position:absolute; top:34px; right:40px; z-index:2;
  width:206px; aspect-ratio:1684 / 638;
  background-color:var(--bordo);
  -webkit-mask:url(assets/logo-gmd.png?v=1) center/contain no-repeat;
          mask:url(assets/logo-gmd.png?v=1) center/contain no-repeat;
}
.login__form{width:100%; max-width:380px; animation:loginIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes loginIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.login__eyebrow{font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#1C8E8B; margin-bottom:6px}
.login__formtitle{margin:0 0 22px; font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.5px}
.login__card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 22px 24px; display:flex; flex-direction:column; gap:14px;
}
.login__field{display:flex; flex-direction:column; gap:6px}
.login__field span{font-size:12px; font-weight:700; color:var(--muted)}
.login__err{font-size:12.5px; font-weight:700; color:var(--bad); background:var(--bad-050); border-radius:8px; padding:9px 11px}
.login__btn{width:100%; display:flex; justify-content:center; padding:12px; font-size:14px; margin-top:2px}
.login__hint{margin:14px 2px 0; font-size:11px; line-height:1.55; color:var(--muted)}

/* responsivo: empilha em telas estreitas */
@media (max-width:760px){
  .login{flex-direction:column}
  .login__brandpanel{flex:0 0 auto; padding:28px 26px; gap:26px}
  .login__headline{font-size:34px}
  .login__formpanel{flex:1 1 auto; padding:24px 22px 28px; flex-direction:column; align-items:stretch}
  /* no mobile a logo entra no fluxo, alinhada à direita acima do formulário */
  .login__mark{position:static; width:150px; align-self:flex-end; margin:0 2px 20px}
  .login__form{margin:0 auto}
}

/* ============================== COLAPSÁVEL (details nos cards) ============================== */
details.collapse{border:0}
details.collapse > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
details.collapse > summary::-webkit-details-marker{display:none}
details.collapse > summary::marker{content:''}
details.collapse > summary .chev{transition:transform .2s ease; color:var(--muted); flex:0 0 auto}
details.collapse[open] > summary .chev{transform:rotate(90deg)}
details.collapse > summary:hover .card__title{color:var(--bordo)}

.nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.nav__section{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#C99A94;padding:16px 10px 7px}
.nav__item{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:9px;
  color:#EAD3CF;font-weight:600;font-size:13.5px;cursor:pointer;
  transition:background .15s,color .15s;
}
.nav__item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav__item--active{background:#F4E9E6;color:var(--bordo);font-weight:700}
.nav__ic{width:17px;height:17px;flex:0 0 17px;opacity:.9}
.nav__item--active .nav__ic{opacity:1}
.sidebar__foot{margin-top:auto;padding:14px 10px 2px;font-size:11px;color:#C99A94;border-top:1px solid rgba(255,255,255,.12)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:5;
  background:rgba(247,244,239,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topbar__title h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.3px}
.topbar__title p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.topbar__actions{display:flex;align-items:center;gap:10px}
.topbar__brand{display:none;font-weight:800;font-size:17px;color:var(--bordo);letter-spacing:-.4px;align-items:center}
.tabbar{display:none}
.content{padding:24px 28px 56px;max-width:1280px;width:100%}
.page{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ============================== CONTROLES ============================== */
.segmented{display:inline-flex;background:var(--paper);border:1px solid var(--line-2);border-radius:9px;padding:3px}
.segmented button{
  border:0;background:transparent;color:var(--muted);
  font-family:inherit;font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:6px;cursor:pointer;
}
.segmented button.is-on{background:var(--bordo);color:#fff}
/* seletor de campanha na topbar (escala p/ N campanhas) */
.tb-camp-wrap{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line-2);border-radius:9px;padding:4px 8px 4px 12px}
.tb-camp-cap{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tb-camp-sel{border:0;background:transparent;font-family:inherit;font-weight:800;font-size:13px;color:var(--bordo);cursor:pointer;padding:5px 4px;outline:none;max-width:180px}
.btn{
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  font-family:inherit;font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:.15s;
}
.btn:hover{border-color:var(--ink)}
.btn--primary{background:var(--bordo);border-color:var(--bordo);color:#fff}
.btn--primary:hover{background:var(--bordo-700)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:700;color:var(--muted)}
.input{
  font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);
  border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;background:var(--paper);width:100%;
}
.input:focus{outline:2px solid var(--bordo-050);border-color:var(--bordo)}

/* ============================== GRID & CARDS ============================== */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.card__title{font-size:14px;font-weight:800;letter-spacing:-.1px}
.card__hint{font-size:11.5px;color:var(--muted);font-weight:600}
.section-title{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:6px 2px 12px}
.divider{height:1px;background:var(--line);border:0;margin:16px 0}

/* KPI */
.kpi__label{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:7px}
.kpi__value{font-size:30px;font-weight:800;letter-spacing:-1px;margin:8px 0 2px;line-height:1}
.kpi__foot{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px}
.delta{font-weight:800;font-size:12px;display:inline-flex;align-items:center;gap:3px}
.delta--up{color:var(--ok)}
.delta--down{color:var(--bad)}
.kpi__spark{margin-top:12px}

/* ============================== SELOS ============================== */
.selo{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:11px;letter-spacing:.5px;
  padding:4px 9px 4px 8px;border-radius:999px;
  color:#fff;background:var(--selo,#999);white-space:nowrap;
}
.selo .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.85)}
.selo--ghost{background:transparent;color:var(--selo);border:1px solid var(--selo)}
.selo--infinity{--selo:var(--selo-infinity)}
.selo--diamond{--selo:var(--selo-diamond)}
.selo--black{--selo:var(--selo-black)}
.selo--gold{--selo:var(--selo-gold)}
.selo--starter{--selo:var(--selo-starter);color:#3a342f}

/* ============================== BARRAS / RANKING ============================== */
.barlist{display:flex;flex-direction:column;gap:13px}
.barlist__row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.barlist__label{font-size:13px;font-weight:700;display:flex;align-items:center;gap:9px}
.barlist__val{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.bar{grid-column:1/-1;height:8px;border-radius:99px;background:var(--bordo-050);overflow:hidden}
.bar__fill{height:100%;border-radius:99px;background:var(--fill,var(--bordo));transition:width .6s cubic-bezier(.2,.7,.2,1)}

.rank{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:var(--cream);border:1px solid var(--line);font-weight:800;font-size:11.5px;color:var(--muted)}
.rank--1{background:var(--bordo);color:#fff;border-color:var(--bordo)}
.rank--2,.rank--3{background:var(--bordo-050);color:var(--bordo);border-color:transparent}

/* ============================== TABELA ============================== */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  font-weight:800;padding:0 12px 10px;border-bottom:1px solid var(--line);
}
.table td{padding:12px;border-bottom:1px solid var(--line)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--cream)}
.table__num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.table__name{font-weight:700}

/* ============================== SEMÁFORO ============================== */
.sema{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;
  padding:6px 12px;border-radius:999px}
.sema .sema__dot{width:9px;height:9px;border-radius:50%}
.sema--seguro{background:var(--ok-050);color:var(--ok)}
.sema--seguro .sema__dot{background:var(--ok)}
.sema--regular{background:var(--warn-050);color:var(--warn)}
.sema--regular .sema__dot{background:var(--warn)}
.sema--inseguro{background:var(--bad-050);color:var(--bad)}
.sema--inseguro .sema__dot{background:var(--bad)}
.sema-track{position:relative;height:10px;border-radius:99px;margin:18px 0 8px;
  background:linear-gradient(90deg,var(--bad) 0 33%,var(--warn) 33% 66%,var(--ok) 66% 100%)}
.sema-track .pin{position:absolute;top:-5px;width:3px;height:20px;border-radius:3px;background:var(--ink);
  box-shadow:0 0 0 3px var(--paper)}

/* ============================== DONUT / MISC ============================== */
.donut{width:140px;height:140px;border-radius:50%;
  background:conic-gradient(var(--bordo) var(--p,0%),var(--bordo-050) 0);
  display:grid;place-items:center;flex:0 0 auto}
.donut::after{content:'';width:96px;height:96px;border-radius:50%;background:var(--paper);grid-area:1/1}
.donut__lbl{grid-area:1/1;z-index:1;text-align:center}
.donut__lbl b{font-size:24px;font-weight:800;display:block;line-height:1}
.donut__lbl span{font-size:11px;color:var(--muted);font-weight:700}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  padding:3px 9px;border-radius:999px;background:var(--cream);border:1px solid var(--line);color:var(--muted)}
.tag--info{background:var(--bordo-050);color:var(--bordo);border-color:transparent}
.muted{color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.legend i{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;font-style:normal;color:var(--muted)}
.legend i::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--c,var(--bordo))}

.note{font-size:11.5px;color:var(--muted);font-style:italic}
.callout{display:flex;gap:12px;padding:14px;border-radius:var(--radius-sm);
  background:var(--bordo-050);border:1px solid transparent}
.callout b{color:var(--bordo)}

.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}

/* Kanban (CRM Tarefas) — 3 colunas no desktop, empilhado no celular */
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.kb__col{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:12px;min-height:72px}
.kb__col h4{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.kb__count{background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700;color:var(--muted)}
.kb__card{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--c,var(--bordo));border-radius:10px;padding:10px 11px;margin-bottom:9px;box-shadow:var(--shadow)}
/* celular: mantém as 3 colunas lado a lado (como no mockup), só aperta o espaçamento */
@media (max-width:760px){ .kb{gap:7px} .kb__col{padding:8px 7px} .kb__col h4{font-size:10.5px;gap:4px} .kb__card{padding:8px;border-radius:9px} }
/* busca de profissional (form de tarefa) */
.tar-wrap{position:relative}
.tar-list{position:absolute;left:0;right:0;top:calc(100% + 2px);background:var(--paper);border:1px solid var(--line-2);border-radius:9px;box-shadow:var(--shadow);z-index:20;max-height:240px;overflow:auto}
.tar-list:empty{display:none}
.tar-opt{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px}
.tar-opt:last-child{border-bottom:0}
.tar-opt:hover{background:var(--bordo-050)}

/* Janela (modal / bottom-sheet) — histórico completo */
.modal{position:fixed;inset:0;z-index:100;background:rgba(43,36,34,.45);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease}
.modal__panel{background:var(--paper);width:100%;max-width:560px;border-radius:16px 16px 0 0;padding:18px;max-height:88vh;overflow:auto;box-shadow:0 -8px 30px -10px rgba(43,36,34,.45)}
@media (min-width:760px){ .modal{align-items:center;padding:20px} .modal__panel{border-radius:16px} }
/* variante larga p/ detalhe do profissional (tabelas densas) */
.modal__panel--wide{max-width:960px}
.arqd-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.arqd-close:hover{background:var(--bordo-050);color:var(--bordo)}
.arqd-lojarow{cursor:pointer;transition:background .15s}
.arqd-lojarow:hover{background:var(--bordo-050)}
.arqd-name{cursor:pointer}
.arqd-name:hover{color:var(--bordo);text-decoration:underline;text-underline-offset:2px}

/* Agenda — faixa semanal + compromissos + FAB */
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:10px 0 4px}
.wk__d{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:10px;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.wk__d small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.03em}
.wk__d b{font-size:15px}
.wk__dot{width:5px;height:5px;border-radius:50%;background:var(--bordo)}
.wk__d--hoje{background:var(--bordo);border-color:var(--bordo);color:#fff}
.wk__d--hoje small{color:#F0D9D6}
.wk__d--hoje .wk__dot{background:#fff}
.wk__d--sel{outline:2px solid var(--bordo-050);outline-offset:1px}
.cmp{display:flex;gap:11px;align-items:center;padding:11px;border:1px solid var(--line);border-left:3px solid var(--c,var(--bordo));border-radius:10px;background:var(--paper);margin-bottom:8px;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.fab{position:fixed;right:18px;bottom:24px;width:52px;height:52px;border-radius:50%;background:var(--bordo);color:#fff;border:0;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px -6px rgba(43,36,34,.5);cursor:pointer;z-index:45}
.fab:hover{background:var(--bordo-700)}
@media (max-width:760px){ .fab{bottom:calc(74px + env(safe-area-inset-bottom))} }

/* Toggle (Config — preferências) */
.sw{position:relative;display:inline-block;width:40px;height:23px;flex:0 0 40px}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:.2s;cursor:pointer}
.sw span::before{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.sw input:checked + span{background:var(--bordo)}
.sw input:checked + span::before{transform:translateX(17px)}
.sw input:disabled + span{opacity:.5;cursor:not-allowed}

/* ============================== RESPONSIVO ============================== */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .span-3{grid-column:span 2}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:40;width:240px;transform:translateX(-100%);transition:transform .25s}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open::after{content:'';position:fixed;inset:0;background:rgba(43,36,34,.4);z-index:30}
  .menu-toggle{display:inline-grid !important}
  .content{padding:18px 16px 48px}
  .topbar{padding:14px 16px}
}
/* mobile (alvo do CRM de campo): navegação vira barra inferior fixa */
@media (max-width:760px){
  .sidebar{display:none}
  .menu-toggle{display:none !important}
  .tb-camp-wrap{display:none}
  .topbar__brand{display:flex}
  .content{padding:18px 14px calc(74px + env(safe-area-inset-bottom))}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--paper);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 -2px 12px -8px rgba(43,36,34,.45);
  }
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar__item{
    flex:1 0 auto;min-width:62px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:5px 8px;border-radius:10px;
    color:var(--muted);font-size:10.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  }
  .tabbar__item .nav__ic{width:21px;height:21px;flex:0 0 21px;opacity:.85}
  .tabbar__item--active{color:var(--bordo)}
  .tabbar__item--active .nav__ic{opacity:1}
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .span-2,.span-3{grid-column:span 1}
  .kpi__value{font-size:26px}
}
.menu-toggle{display:none;border:1px solid var(--line-2);background:var(--paper);border-radius:9px;
  width:38px;height:38px;place-items:center;cursor:pointer}