/* ============================================================
   Panel Bot Telegram  -  Tema claro: blanco + azul oscuro
   Estructura compacta, bordes finos, sin sombras pesadas.
   ============================================================ */

:root{
  /* ---- Color ---- */
  --primary:#1d4ed8;          /* azul de acciones */
  --primary-soft:#2563eb;     /* hover */
  --primary-deep:#15316b;     /* azul oscuro de titulos y enlaces */
  --on-primary:#ffffff;

  --sidebar:#102a4c;          /* azul oscuro del menu */
  --sidebar-hover:#1b3c68;
  --sidebar-ink:#cfdcee;

  --ink:#0f1b2d;              /* texto principal */
  --ink-strong:#07101d;
  --body:#41526a;             /* texto secundario */
  --mute:#76859b;             /* texto tenue */

  --hairline:#dfe5ee;
  --hairline-fuerte:#c7d2e2;
  --hairline-dashed:#d7deea;

  --canvas:#ffffff;           /* tarjetas */
  --canvas-soft:#f3f6fb;      /* inputs, cabeceras de tabla */
  --page:#eef2f8;             /* fondo general */
  --canvas-text-soft:#0f1b2d;

  --ok:#0f7a4a;
  --ok-soft:#e3f6ec;
  --danger:#c62828;
  --danger-soft:#fdeaea;
  --warn:#a35b00;
  --warn-soft:#fdf2e0;

  /* ---- Radios ---- */
  --r-xs:0; --r-sm:0; --r-md:2px; --r-pill:9999px;

  /* ---- Espaciado (compacto) ---- */
  --s-xxs:2px; --s-xs:3px; --s-sm:6px; --s-md:9px; --s-lg:12px;
  --s-xl:15px; --s-2xl:18px; --s-3xl:22px; --s-4xl:28px; --s-5xl:34px; --s-6xl:44px;

  /* ---- Tipografia ---- */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Cascadia Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:auto;}
html,body{background:var(--page);}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-soft);text-decoration:underline;}

h1,h2,h3,h4{margin:0;color:var(--primary-deep);letter-spacing:-.2px;line-height:1.3;}
p{margin:0 0 var(--s-sm);}
ul,ol{margin:0 0 var(--s-sm);padding-left:18px;}
li{margin-bottom:2px;}

code,kbd,pre,.mono{font-family:var(--mono);}

code{
  background:var(--canvas-soft);
  border:1px solid var(--hairline);
  color:var(--primary-deep);
  padding:0 4px;
  border-radius:var(--r-xs);
  font-size:12.5px;
}

pre{
  background:#0f2440;
  color:#e8eefb;
  border-radius:var(--r-md);
  padding:var(--s-lg);
  margin:var(--s-sm) 0 var(--s-lg);
  overflow:auto;
  font-size:12.5px;
  line-height:1.5;
}
pre code{background:none;border:0;color:inherit;padding:0;}

/* ============ Layout ============ */

.layout{display:flex;min-height:100vh;}

.sidebar{
  width:212px;flex:0 0 212px;
  background:var(--sidebar);
  padding:var(--s-lg) 0 var(--s-2xl);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  scrollbar-width:thin;
}

.sidebar .brand{
  display:flex;align-items:center;gap:var(--s-sm);
  padding:0 var(--s-lg) var(--s-lg);
  margin-bottom:var(--s-sm);
  border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:14px;font-weight:600;line-height:1.25;
}
.sidebar .brand .bolt{
  width:24px;height:24px;flex:0 0 24px;
  display:grid;place-items:center;
  background:var(--primary);color:#fff;
  border-radius:var(--r-sm);font-size:13px;
}
.sidebar .brand small{
  display:block;color:#8fa6c4;font-size:11px;font-weight:400;margin-top:1px;
}

.sidebar .eyebrow{
  padding:var(--s-md) var(--s-lg) 2px;
  color:#7f96b5;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.4px;
}

.sidebar nav a{
  display:flex;align-items:center;gap:var(--s-sm);
  padding:5px var(--s-lg);
  color:var(--sidebar-ink);
  font-size:13.5px;line-height:1.35;
  border-left:3px solid transparent;
}
.sidebar nav a:hover{background:var(--sidebar-hover);color:#fff;text-decoration:none;}
.sidebar nav a.active{
  background:var(--sidebar-hover);
  border-left-color:var(--primary);
  color:#fff;font-weight:600;
}
.sidebar nav a .ico{width:15px;text-align:center;opacity:.7;font-size:12px;}
.sidebar .sep{margin:var(--s-md) var(--s-lg);border-top:1px solid rgba(255,255,255,.12);}

/* --- Secciones plegables del menu --- */
.grupo-menu{margin-top:var(--s-xs);}
.grupo-menu .cab{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);
  width:100%;padding:5px var(--s-lg);
  background:none;border:0;cursor:pointer;
  color:#7f96b5;font-family:var(--sans);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;
}
.grupo-menu .cab:hover{color:#cfdcee;}
.grupo-menu .cab .chev{font-size:11px;transition:transform .15s;letter-spacing:0;}
.grupo-menu.cerrado .cab .chev{transform:rotate(-90deg);}
.grupo-menu.cerrado > nav{display:none;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-lg);
  padding:var(--s-md) var(--s-2xl);
  background:var(--canvas);
  border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:5;
}
.topbar h1{font-size:17px;font-weight:600;}
.topbar .who{color:var(--mute);font-size:12px;display:flex;align-items:center;gap:var(--s-sm);}
.topbar .who strong{color:var(--ink);font-weight:600;}

.content{padding:var(--s-xl) var(--s-2xl) var(--s-4xl);max-width:1180px;width:100%;}
.content > .lead{color:var(--body);font-size:13.5px;margin:0 0 var(--s-lg);max-width:80ch;}

/* ============ Eyebrow ============ */

.eyebrow{
  color:var(--mute);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.6px;margin-bottom:var(--s-xs);
}

/* ============ Tarjetas ============ */

.card{
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:var(--s-xl);
  margin-bottom:var(--s-lg);
}
.card.destacada{border-color:var(--primary);border-top:3px solid var(--primary);}

.card > h2{
  font-size:15px;font-weight:600;
  padding-bottom:var(--s-sm);margin-bottom:var(--s-lg);
  border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:var(--s-sm);flex-wrap:wrap;
}
.card > h2 .right{margin-left:auto;font-size:12px;font-weight:400;color:var(--mute);}
.card > h3{font-size:13.5px;font-weight:600;margin:var(--s-lg) 0 var(--s-sm);color:var(--ink);}
.card .hint,.hint{color:var(--mute);font-size:12.5px;line-height:1.5;}

.grid{display:grid;gap:var(--s-lg);margin-bottom:var(--s-lg);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.grid.dos{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));}

.stat{
  background:var(--canvas);border:1px solid var(--hairline);
  border-top:3px solid var(--primary);
  border-radius:var(--r-md);padding:var(--s-lg);
}
.stat .label{color:var(--mute);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.3px;}
.stat .num{font-size:26px;line-height:1.1;font-weight:700;color:var(--primary-deep);margin:var(--s-xs) 0 2px;}
.stat .foot{color:var(--body);font-size:12px;}
.stat .foot .verde{color:var(--ok);font-weight:600;}

/* ============ Formularios ============ */

.field{margin-bottom:var(--s-lg);}
.field > label{
  display:block;margin-bottom:var(--s-xs);
  color:var(--ink);font-size:12.5px;font-weight:600;
}
.field small,.field .ayuda{
  display:block;margin-top:3px;color:var(--mute);font-size:11.5px;line-height:1.45;
}

input[type=text],input[type=password],input[type=number],input[type=url],
input[type=email],input[type=search],input[type=time],input[type=file],
textarea,select{
  width:100%;
  padding:7px var(--s-md);
  background:var(--canvas);
  color:var(--ink);
  border:1px solid var(--hairline-fuerte);
  border-radius:var(--r-sm);
  font-family:var(--sans);
  font-size:13.5px;line-height:1.4;
}
input::placeholder,textarea::placeholder{color:#9aa7b8;}

textarea{min-height:110px;resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.5;}
textarea.grande{min-height:230px;}

select{cursor:pointer;background:var(--canvas);}
select[multiple]{padding:4px;min-height:130px;}

input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(29,78,216,.12);
}
input[type=file]{padding:5px;font-family:var(--mono);font-size:11.5px;background:var(--canvas-soft);}
input[type=checkbox],input[type=radio]{
  width:14px;height:14px;margin:0 var(--s-sm) 0 0;accent-color:var(--primary);vertical-align:-2px;
}

.row{display:flex;gap:var(--s-lg);flex-wrap:wrap;}
.row > *{flex:1 1 210px;min-width:0;}
.row.ajusta > *{flex:0 0 auto;}

.check{display:flex;align-items:flex-start;gap:var(--s-sm);
  padding:3px 0;font-size:13px;color:var(--ink);font-weight:400;}
.check input{margin-top:3px;}

.lista-check{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:var(--s-sm);background:var(--canvas-soft);
  max-height:210px;overflow:auto;
}
.lista-check label{
  display:flex;align-items:center;gap:var(--s-sm);
  padding:3px var(--s-sm);border-radius:var(--r-xs);
  font-size:13px;cursor:pointer;
}
.lista-check label:hover{background:#e4ebf6;}

.dias{display:flex;gap:var(--s-xs);flex-wrap:wrap;}
.dias label{
  display:flex;align-items:center;gap:4px;
  border:1px solid var(--hairline-fuerte);border-radius:var(--r-pill);
  padding:3px var(--s-md);font-size:12.5px;cursor:pointer;background:var(--canvas);
}
.dias label:hover{border-color:var(--primary);}

/* ============ Botones ============ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-sm);
  padding:7px var(--s-lg);
  background:var(--primary);color:var(--on-primary);
  border:1px solid var(--primary);border-radius:var(--r-sm);
  font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.35;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--primary-soft);border-color:var(--primary-soft);color:#fff;text-decoration:none;}

.btn.linea{background:var(--canvas);color:var(--primary-deep);border-color:var(--hairline-fuerte);}
.btn.linea:hover{background:var(--canvas-soft);border-color:var(--primary);color:var(--primary);}

.btn.fantasma{background:transparent;color:var(--primary);border-color:transparent;}
.btn.fantasma:hover{background:var(--canvas-soft);text-decoration:none;}

.btn.peligro{background:var(--canvas);color:var(--danger);border-color:var(--hairline-fuerte);}
.btn.peligro:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);}

.btn.mini{padding:3px var(--s-md);font-size:12px;}
.btn.ancho{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

.acciones{display:flex;gap:var(--s-sm);flex-wrap:wrap;align-items:center;}
.acciones form{margin:0;}

/* ============ Tablas ============ */

.tabla-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-sm);}

table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:6px var(--s-md);text-align:left;vertical-align:middle;}
th{
  background:var(--canvas-soft);color:var(--body);
  font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  border-bottom:1px solid var(--hairline);white-space:nowrap;
}
td{border-bottom:1px solid var(--hairline);color:var(--ink);}
tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:#f7f9fd;}
td small{color:var(--mute);font-size:11.5px;display:block;line-height:1.35;}
td .mono,th .mono,.mono{font-family:var(--mono);font-size:12px;}

/* ============ Avisos y etiquetas ============ */

.alert{
  padding:var(--s-sm) var(--s-lg);
  border:1px solid var(--hairline);border-left-width:3px;
  border-radius:var(--r-sm);
  margin-bottom:var(--s-lg);
  font-size:13px;line-height:1.5;color:var(--ink);
  background:var(--canvas);
}
.alert.ok{border-left-color:var(--ok);background:var(--ok-soft);}
.alert.error{border-left-color:var(--danger);background:var(--danger-soft);}
.alert.warn{border-left-color:var(--warn);background:var(--warn-soft);}
.alert.info{border-left-color:var(--primary);background:#eef3fd;}
.alert strong{color:var(--primary-deep);}

.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:1px var(--s-sm);
  border:1px solid var(--hairline-fuerte);border-radius:var(--r-pill);
  font-size:11px;font-weight:600;color:var(--body);background:var(--canvas);
}
.tag.on{color:var(--ok);border-color:#aadcc2;background:var(--ok-soft);}
.tag.off{color:var(--mute);background:var(--canvas-soft);}
.tag.super{color:#fff;background:var(--primary);border-color:var(--primary);}
.tag.alerta{color:var(--warn);border-color:#f0cf97;background:var(--warn-soft);}
.tag.error{color:var(--danger);border-color:#f2b8b8;background:var(--danger-soft);}

/* ============ Resultados Mundial ============ */

/* Selector de dias del historial */
.rm-dias{display:flex;align-items:center;gap:var(--s-xs);flex-wrap:wrap;margin-bottom:var(--s-md);font-size:13px;}
.rm-dias > span:first-child{color:var(--mute);margin-right:var(--s-xs);}
.rm-dias a{
  padding:2px var(--s-md);border:1px solid var(--hairline-fuerte);border-radius:var(--r-pill);
  color:var(--body);text-decoration:none;font-size:12.5px;
}
.rm-dias a:hover{border-color:var(--primary);color:var(--primary);}
.rm-dias a.activo{background:var(--primary);border-color:var(--primary);color:#fff;}

/* Historial: unos 10 resultados a la vista, el resto con su propia barra */
.rm-lista{max-height:430px;overflow-y:auto;overscroll-behavior:contain;}
.rm-lista thead th{position:sticky;top:0;z-index:1;}

/* Modo de conexion */
.rm-modos{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--s-md);}

/* Filtro de pais */
.rm-paises{
  display:flex;gap:var(--s-xs);flex-wrap:wrap;
  padding-bottom:var(--s-md);margin-bottom:var(--s-md);
  border-bottom:1px solid var(--hairline);
}
.rm-pais{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px var(--s-lg);border:1px solid var(--hairline-fuerte);border-radius:var(--r-pill);
  background:var(--canvas);color:var(--body);
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;
}
.rm-pais:hover{border-color:var(--primary);color:var(--primary);}
.rm-pais.activo{background:var(--primary);border-color:var(--primary);color:#fff;}
.rm-cuenta:empty{display:none;}
.rm-cuenta{
  min-width:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--ok-soft);color:var(--ok);font-size:11px;line-height:18px;text-align:center;
}
.rm-pais.activo .rm-cuenta{background:rgba(255,255,255,.25);color:#fff;}

.rm-resumen{font-size:13px;color:var(--body);margin-bottom:var(--s-md);}

/* Bloques por pais y categoria */
.rm-titulo-pais{font-size:14px;font-weight:700;color:var(--primary-deep);margin:var(--s-lg) 0 var(--s-sm);}
.rm-categoria{border:1px solid var(--hairline);border-radius:var(--r-sm);margin-bottom:var(--s-md);}
.rm-cat-cabecera{
  display:flex;align-items:center;gap:var(--s-md);
  padding:var(--s-sm) var(--s-md);
  background:var(--canvas-soft);border-bottom:1px solid var(--hairline);
}
.rm-cat-cabecera b{font-size:13.5px;color:var(--ink);}
.rm-cat-cabecera .btn{margin-left:auto;}
.rm-cat-lista{
  display:grid;gap:1px;padding:var(--s-sm);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.rm-cat-lista .check{padding:3px var(--s-sm);cursor:pointer;}
.rm-cat-lista .check:hover{background:#e4ebf6;}

.vacio{
  color:var(--mute);font-size:13px;text-align:center;
  padding:var(--s-2xl) var(--s-lg);
  border:1px dashed var(--hairline-fuerte);border-radius:var(--r-sm);
  background:var(--canvas-soft);
}

.divisor{border:0;border-top:1px dashed var(--hairline-dashed);margin:var(--s-lg) 0;}
.divisor-verde{border:0;border-top:2px solid var(--primary);margin:var(--s-lg) 0;}

.previa{
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--canvas-soft);padding:var(--s-lg);
  font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
}
.miniatura{
  max-width:130px;max-height:90px;border-radius:var(--r-sm);
  border:1px solid var(--hairline-fuerte);display:block;margin-top:var(--s-xs);
}

/* ---- Pasos numerados ---- */
.pasos{counter-reset:paso;list-style:none;padding:0;margin:0;}
.pasos > li{
  counter-increment:paso;position:relative;
  padding:0 0 var(--s-lg) var(--s-3xl);
  border-left:1px solid var(--hairline);margin-left:11px;
}
.pasos > li:last-child{border-left-color:transparent;padding-bottom:0;}
.pasos > li::before{
  content:counter(paso);
  position:absolute;left:-11px;top:-2px;
  width:22px;height:22px;border-radius:var(--r-pill);
  background:var(--primary);border:2px solid var(--canvas);
  color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;
}
.pasos h3{margin:0 0 3px;font-size:13.5px;}
.pasos p{color:var(--body);font-size:13px;line-height:1.5;margin-bottom:var(--s-xs);}

/* ---- Chat de ejemplo (guia de BotFather) ---- */
.chat{
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--canvas-soft);padding:var(--s-lg);
  display:flex;flex-direction:column;gap:var(--s-sm);margin:var(--s-sm) 0 var(--s-lg);
}
.chat .msg{
  max-width:88%;padding:6px var(--s-lg);border-radius:12px;
  font-size:13px;line-height:1.45;border:1px solid var(--hairline);
}
.chat .msg.bot{background:#fff;border-bottom-left-radius:3px;}
.chat .msg.yo{background:#dcf0ff;border-color:#b8ddf7;align-self:flex-end;border-bottom-right-radius:3px;}
.chat .msg b{color:var(--primary-deep);}
.chat .quien{display:block;font-size:10.5px;color:var(--mute);margin-bottom:1px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;}

/* ---- Selector de emojis ---- */
.emoji-bar{margin-bottom:4px;}
.emoji-caja{
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--canvas-soft);padding:var(--s-sm);
  max-height:190px;overflow:auto;margin-top:4px;
}
.emoji-cat{
  font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--mute);margin:var(--s-sm) 0 2px;
}
.emoji-grid{display:flex;flex-wrap:wrap;gap:1px;}
.emoji-grid button{
  font-size:18px;line-height:1;border:0;background:none;cursor:pointer;
  padding:3px 4px;border-radius:var(--r-xs);
}
.emoji-grid button:hover{background:#dce5f3;}

/* ---- Vista previa estilo Telegram ---- */
.tg-previa{
  background:#dfe9f2;border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--s-lg);margin-bottom:var(--s-lg);
}
.tg-burbuja{
  background:#fff;border-radius:10px;border-bottom-left-radius:3px;
  padding:var(--s-md) var(--s-lg);max-width:460px;
  box-shadow:0 1px 2px rgba(10,30,60,.18);
  font-size:13.5px;line-height:1.5;color:#1a1a1a;
  word-break:break-word;
}
.tg-burbuja b{color:#000;}
.tg-burbuja a{color:#2481cc;}
.tg-burbuja code{background:#f1f3f5;border:0;color:#444;font-size:12.5px;}
.tg-burbuja .foto{
  display:block;max-width:100%;border-radius:6px;margin-bottom:var(--s-sm);
  border:1px solid var(--hairline);
}
.tg-burbuja .sinfoto{
  display:block;padding:var(--s-lg);margin-bottom:var(--s-sm);text-align:center;
  background:var(--canvas-soft);border:1px dashed var(--hairline-fuerte);border-radius:6px;
  color:var(--mute);font-size:12px;
}
.tg-teclado{max-width:460px;margin-top:4px;display:flex;flex-direction:column;gap:3px;}
.tg-teclado .fila{display:flex;gap:3px;}
.tg-teclado .tecla{
  flex:1;text-align:center;background:#fff;border-radius:6px;
  padding:6px var(--s-sm);font-size:12.5px;color:#2481cc;font-weight:500;
  box-shadow:0 1px 2px rgba(10,30,60,.18);
}
.tg-teclado .tecla .tipo{display:block;font-size:10px;color:var(--mute);font-weight:400;}
.tg-nota{color:#44566e;font-size:11.5px;margin-top:var(--s-sm);}

/* ============ Login ============ */

.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:var(--s-2xl);
  background:var(--primary-deep) center/cover no-repeat;position:relative;
}
.login-wrap::before{
  content:"";position:absolute;inset:0;
  background:var(--primary-deep);opacity:var(--velo,.75);
}
.login-box{
  position:relative;z-index:1;width:100%;max-width:370px;
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:var(--s-3xl);
  box-shadow:0 18px 45px rgba(8,25,51,.35);
}
.login-box .bolt{
  width:32px;height:32px;display:grid;place-items:center;
  background:var(--primary);color:#fff;border-radius:var(--r-sm);
  font-size:17px;margin-bottom:var(--s-lg);
}
.login-box h1{font-size:20px;font-weight:700;}
.login-box .sub{color:var(--mute);font-size:12.5px;margin:2px 0 var(--s-xl);}
.login-box .pie{
  margin:var(--s-lg) 0 0;padding-top:var(--s-md);
  border-top:1px solid var(--hairline);
  color:var(--mute);font-size:11.5px;line-height:1.45;
}

/* ============ Responsive ============ */

@media (max-width:900px){
  .layout{flex-direction:column;}
  .sidebar{
    width:100%;flex:none;height:auto;position:static;
    padding:var(--s-md) 0;
  }
  .sidebar nav{display:flex;flex-wrap:wrap;gap:3px;padding:0 var(--s-md) var(--s-sm);}
  .sidebar nav a{
    border-left:0;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);
    padding:3px var(--s-md);font-size:12.5px;
  }
  .sidebar nav a.active{border-color:var(--primary);background:var(--primary);}
  .sidebar .eyebrow,.sidebar .sep{display:none;}
  .topbar{padding:var(--s-sm) var(--s-lg);}
  .content{padding:var(--s-lg) var(--s-lg) var(--s-3xl);}
  .card{padding:var(--s-lg);}
}