@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  /* Fundo geral da página — branco. Os cards (linhas de pedido, modais, painel de
     detalhes) continuam escuros por dentro, usando --panel/--panel-2/--text como antes;
     só o que ficava "atrás" dos cards mudou. */
  --bg:#FFFFFF;
  --panel:#1A1A1A;
  --panel-2:#242424;
  --border:#3D3D3A;
  --border-soft:#2A2A28;
  --text:#F5F5F2;
  --text-secondary:#D8D8D4;
  --text-muted:#BFBFB9;
  --silver:#C7C7C2;
  --silver-text:#141412;
  --rust:#C9573F;
  --rust-text:#3A1108;

  /* Texto/borda para o que fica direto sobre o fundo branco da página (fora dos cards
     escuros) — ex: título no topo, botões "fantasma" na barra superior. */
  --page-text:#141412;
  --page-text-secondary:#5A5A55;
  --page-border:#D8D8D4;

  /* Fundo "recuado" usado em inputs/checkboxes/insets DENTRO de cards escuros — é o
     tom escuro que --bg tinha antes de virar branco, mantido à parte pra esse uso. */
  --surface-inset:#101010;

  /* Únicos acentos de cor fora do preto/branco/prata — indicadores funcionais de
     progresso do pedido (barra lateral do card e checkbox marcado), pedido explícito. */
  --amber:#D9A93B;
  --amber-green:#94AC54;
  --green:#4FAE6D;
  /* Laranja: endereço de entrega alterado manualmente em relação ao extraído do PDF --
     precisa ser visualmente distinto do âmbar (progresso/"escolhida"), por isso mais
     saturado/"queimado" em vez do tom dourado do âmbar. */
  --orange:#D97706;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',sans-serif;font-size:16px;line-height:1.5;}
h1,h2,h3,.hnum{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:0.2px;}
button{font-family:'IBM Plex Sans',sans-serif;cursor:pointer;}
input,textarea,select{font-family:'IBM Plex Sans',sans-serif;}
a{color:var(--silver);}
::selection{background:var(--silver);color:var(--silver-text);}

#app{min-height:100vh;display:flex;flex-direction:column;}

/* ---------- Top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--border-soft);gap:16px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:38px;height:38px;flex-shrink:0;}
.brand h1{font-size:24px;margin:0;color:var(--page-text);}
.brand span{color:var(--page-text-secondary);font-size:15px;}
.topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.user-pill{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel);border:1px solid var(--border-soft);font-size:15px;color:var(--text-secondary);}
.user-pill b{color:var(--text);font-weight:500;}
.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);padding:9px 16px;font-size:15.5px;}
.btn:hover{background:var(--panel-2);}
.btn:disabled{opacity:0.5;cursor:default;}
.btn-primary{background:var(--text);border-color:var(--text);color:var(--silver-text);font-weight:500;}
.btn-primary:hover{background:var(--silver);}
.btn-ghost{background:transparent;border:1px solid var(--border-soft);color:var(--text-secondary);}
.btn-ghost:hover{color:var(--text);border-color:var(--border);}
/* .btn-ghost também aparece na topbar, que fica direto sobre o fundo branco da página
   (não é um card escuro) — precisa de texto/borda escuros ali, diferente do uso padrão
   dentro de modal/drawer. */
.topbar .btn-ghost{color:var(--page-text-secondary);border-color:var(--page-border);}
.topbar .btn-ghost:hover{color:var(--page-text);border-color:var(--text-muted);}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--silver);outline-offset:1px;}

/* ---------- Login ---------- */
.login-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{width:100%;max-width:380px;border:1px solid var(--border-soft);padding:32px;background:var(--panel);}
.login-card .logo-row{display:flex;justify-content:center;margin-bottom:18px;}
.login-card .logo-row img{width:64px;height:64px;}
.login-card h2{margin:0 0 6px;font-size:26px;text-align:center;}
.login-card p{color:var(--text-secondary);font-size:15px;margin:0 0 22px;text-align:center;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:14px;color:var(--text-muted);margin-bottom:6px;}
.field select,.field input,.field textarea{width:100%;background:var(--surface-inset);border:1px solid var(--border);color:var(--text);padding:9px 10px;font-size:16px;}
.field textarea{resize:vertical;min-height:70px;}

/* Par de campos lado a lado (produto/serviço, na Manutenção) -- cada .field dentro mantém seu
   próprio espaçamento, só divide a largura em 2 colunas. Empilha em 1 coluna no mobile. */
.field-row{display:flex;gap:12px;}
.field-row .field{flex:1;min-width:0;}
@media (max-width:600px){.field-row{flex-direction:column;gap:0;}}
/* Endereço: textarea que cresce em altura sozinha (JS ajusta style.height no input, ver
   autoResizeTextarea) em vez de rolar por dentro ou ficar cortada numa linha só -- essa
   classe cancela o resize manual/min-height genérico de .field textarea, que faria o JS e o
   usuário arrastando a alça brigarem pelo tamanho. */
.textarea-auto{resize:none;overflow:hidden;min-height:0;font-family:'IBM Plex Sans',sans-serif;line-height:1.4;}

/* E-mail em chips (etiquetas removíveis) -- visualmente se parece com o .field input normal
   (mesmo fundo/borda), mas cresce em altura sozinho conforme quebra linha (flex-wrap), sem
   virar uma faixa horizontal infinita. */
.chips-field{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;background:var(--surface-inset);border:1px solid var(--border);padding:6px 8px;min-height:40px;cursor:text;}
.chips-field:focus-within{border-color:var(--silver);}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);font-size:13.5px;padding:4px 4px 4px 10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.chip-remove{background:none;border:none;color:var(--text-muted);font-size:15px;line-height:1;cursor:pointer;padding:3px 6px;flex-shrink:0;}
.chip-remove:hover{color:var(--rust);}
.chips-input{flex:1 1 120px;min-width:120px;background:none;border:none;color:var(--text);font-size:14px;padding:4px 2px;outline:none;font-family:'IBM Plex Sans',sans-serif;}
/* Sem isso, o placeholder usa a cor cinza padrão do navegador (ignora --text-muted) --
   fica sem contraste nenhum contra o fundo escuro dos inputs. Regra global (não só
   dentro de .field) porque tem input com placeholder fora de formulário também, tipo o
   campo de rastreio/coleta/observação no card do pedido. */
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1;}
.login-note{font-size:13.5px;color:var(--text-muted);margin-top:16px;border-top:1px solid var(--border-soft);padding-top:14px;}

.password-field{position:relative;}
.password-field input{padding-right:38px;}
.password-toggle{position:absolute;top:0;right:0;bottom:0;width:36px;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);}
.password-toggle:hover{color:var(--text);}
.password-toggle svg{display:block;}

/* ---------- Lista de pedidos ---------- */
.board-wrap{flex:1;padding:20px 24px 40px;}
.list-empty{color:var(--page-text-secondary);font-size:15px;padding:30px;border:1px dashed var(--page-border);text-align:center;}
/* Barra esquerda = progresso dos 3 checks (NF/Pagamento/Enviado), preenchendo de baixo pra
   cima em incrementos de 1/3, do âmbar (início) ao verde (completo) -- sem vermelho em
   nenhum estágio. É uma barra de verdade (.progress-fill), não a border-left em si (que
   fica transparente só pra reservar o espaço) -- assim o preenchimento acompanha a altura
   real do card (variável conforme o conteúdo) sem precisar calcular pixels em JS: as duas
   fatias internas usam flex-grow na proporção marcado/faltante, e flex-direction:column-reverse
   faz a fatia "marcado" nascer relativa ao fundo, crescendo pra cima.
   Barra direita = só acende (verde) quando o pedido já foi enviado de fato (e-mail/WhatsApp). */
.pedido-row{position:relative;background:var(--panel);border:1px solid var(--border-soft);border-left:8px solid transparent;border-right:8px solid var(--ship-color,transparent);}
.progress-fill{position:absolute;top:0;bottom:0;left:-8px;width:8px;display:flex;flex-direction:column-reverse;}
.progress-fill .filled{flex-grow:var(--fill,0);background:var(--fill-color,var(--border));transition:flex-grow 0.2s,background-color 0.2s;}
.progress-fill .empty{flex-grow:var(--empty,3);background:var(--border);}

/* ---------- Accordion por dia ---------- */
.day-groups{display:flex;flex-direction:column;gap:10px;max-width:1180px;}
.day-group{border:1px solid var(--border-soft);background:var(--panel);}
.day-header{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:13px 18px;background:none;border:none;color:var(--text);cursor:pointer;text-align:left;font-family:'IBM Plex Sans',sans-serif;}
.day-header:hover{background:var(--panel-2);}
.day-arrow{display:inline-block;flex-shrink:0;font-size:13px;color:var(--text-muted);transition:transform 0.15s;}
.day-group.open .day-arrow{transform:rotate(90deg);}
.day-date{font-size:16.5px;font-weight:500;flex-shrink:0;}
.day-count{font-size:14px;color:var(--text-muted);flex-shrink:0;}
/* flex-basis:100% joga essa linha inteira pra baixo do cabeçalho (arrow+data+contador),
   numa linha própria que pode quebrar livremente -- sem reticências, sem cortar nome. */
.day-clients{font-size:14.5px;color:var(--text-secondary);flex-basis:100%;line-height:1.5;}
.day-body{display:flex;flex-direction:column;gap:14px;padding:14px 18px 18px;border-top:1px solid var(--border-soft);}
.row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;}
.row-id{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.row-id .cliente{font-size:18px;font-weight:500;margin:0;}
.status-badge{display:inline-block;font-size:13px;padding:3px 9px;border:1px solid var(--col-color,var(--border));color:var(--col-color,var(--text));white-space:nowrap;}
.row-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:14.5px;color:var(--text-secondary);margin-top:5px;}
.row-meta .valor{color:var(--text);font-weight:500;}
.row-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* ---------- Manutenção: lista em cards (sem agrupamento por data) ---------- */
.cards-manutencao{display:flex;flex-direction:column;gap:10px;max-width:1180px;}
.list-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;max-width:1180px;}
.list-filtros input[type="text"],.list-filtros select{background:var(--panel);color:var(--text);border:1px solid var(--border-soft);padding:8px 10px;font-family:inherit;font-size:14.5px;}
.checklist-grupo{margin-bottom:10px;}
.checklist-linha input[type="checkbox"]{width:17px;height:17px;flex-shrink:0;accent-color:var(--amber,#D9A93B);}
.checklist-pendencias{word-break:break-word;}

.row-checklist{display:flex;border-top:1px solid var(--border-soft);}
.check-seg{flex:1 1 0;min-width:190px;padding:12px 18px;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--border-soft);}
.check-seg:first-child{border-left:none;}
.seg-head{display:flex;align-items:center;gap:8px;}
.seg-check{width:19px;height:19px;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent;background:var(--surface-inset);padding:0;}
.seg-check:hover{border-color:var(--silver);}
.seg-check.on{background:var(--green);border-color:var(--green);color:var(--silver-text);}
.seg-head span{font-size:14.5px;font-weight:500;color:var(--text-secondary);}
.seg-head.done span{color:var(--text);}
.seg-body{display:flex;flex-direction:column;gap:6px;}
.filebtn{border:1px solid var(--border);background:var(--surface-inset);padding:5px 9px;font-size:14px;color:var(--text-secondary);display:inline-block;width:fit-content;}
.filebtn:hover{color:var(--text);border-color:var(--silver);}
.filebtn input[type=file]{display:none;}
.fname{color:var(--silver);font-size:14px;word-break:break-all;}
.seg-body .rastreio-row{display:flex;gap:6px;flex-wrap:wrap;}
.seg-body .rastreio-row input{flex:1;min-width:110px;background:var(--surface-inset);border:1px solid var(--border);color:var(--text);padding:5px 8px;font-size:14.5px;}
.seg-body .rastreio-row button{border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:14px;padding:5px 9px;flex-shrink:0;}
.seg-body .rastreio-row button:hover{border-color:var(--silver);}
.payment-options{display:flex;gap:6px;flex-wrap:wrap;}
.pay-btn{border:1px solid var(--border);background:var(--surface-inset);color:var(--text-secondary);font-size:14px;padding:5px 9px;}
.pay-btn:hover{border-color:var(--silver);color:var(--text);}
.pay-btn.selected{background:var(--green);border-color:var(--green);color:var(--silver-text);font-weight:500;}
/* "Chosen" = modalidade escolhida na criação (informativo); "selected" = pagamento
   confirmado como recebido (ação do admin) -- só mostra o contorno quando os dois não
   coincidem, pra não competir visualmente com o preenchimento verde da confirmação. */
.pay-btn.chosen:not(.selected){border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber);}
.envio-badge{font-size:13.5px;color:var(--text-muted);}
.endereco-alterado{color:var(--orange);font-weight:500;}
.email-falha-badge{font-size:13.5px;color:var(--rust);font-weight:500;}

/* Afiação (Maza Afiação) reaproveita a mesma estrutura visual do Pedido (Mazacat), só que em
   tom cinza (--panel-2, já usado no resto do app pra hover/inset -- nenhuma cor nova) pra
   diferenciar os dois tipos à primeira vista, sem depender só do rótulo "Afiação". */
.pedido-row-afiacao{background:var(--panel-2);}
.day-group-afiacao{background:var(--panel-2);}
.day-group-afiacao .day-header:hover{background:var(--panel);}
.tipo-tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 7px;border:1px solid var(--silver);color:var(--silver);white-space:nowrap;}

/* Manutenção reaproveita a mesma estrutura visual do Pedido/Afiação, diferenciada por um
   friso âmbar (--amber, já usado no resto do app pro meio da barra de progresso -- nenhuma
   cor nova) em vez do fundo cinza da Afiação, pra não confundir as 2 variações visuais. */
.pedido-row-manutencao{box-shadow:inset 4px 0 0 var(--amber);}
.day-group-manutencao{box-shadow:inset 4px 0 0 var(--amber);}
.tipo-tag-manutencao{border-color:var(--amber);color:var(--amber);}

/* Toggle Pedido/Afiação/Manutenção no topo do modal "Novo pedido" -- escolha inicial, antes do
   resto do formulário (ver JS: troca de aba reconstrói o formulário do zero). */
.tipo-toggle{display:flex;gap:0;margin-bottom:18px;border:1px solid var(--border);}
.tipo-toggle-btn{flex:1;padding:9px;background:var(--surface-inset);border:none;color:var(--text-muted);font-family:'IBM Plex Sans',sans-serif;font-size:14px;cursor:pointer;}
.tipo-toggle-btn:not(:first-child){border-left:1px solid var(--border);}
.tipo-toggle-btn.active{background:var(--panel-2);color:var(--text);font-weight:500;}

@media (max-width:900px){
  .row-checklist{flex-direction:column;}
  .check-seg{border-left:none;border-top:1px solid var(--border-soft);}
}

/* ---------- Modal (novo pedido) ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,14,15,0.6);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow-y:auto;}
.modal{width:100%;max-width:480px;background:var(--panel);border:1px solid var(--border-soft);padding:26px;}
/* Modal da Manutenção (Nova autorização) é mais largo que o padrão -- a linha de equipamento
   (5 campos) fica cortada/espremida nos 480px do modal padrão de Pedido/Afiação. */
.modal-manutencao{max-width:760px;}
.modal-manutencao .field-row{flex-wrap:wrap;}

/* Linha de equipamento: flex-wrap em vez de flex fixo -- cada campo tem uma largura mínima
   confortável e quebra pra próxima linha (célula, ou modal estreito) em vez de espremer/cortar
   texto. Em telas largas cabem todos numa linha só. */
.equip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;}
.equip-row>*{flex:1 1 120px;min-width:0;}
.equip-row .equip-modelo{flex:2 1 180px;position:relative;}
.equip-row .equip-qtd{flex:0 1 70px;min-width:60px;}
.equip-row .equip-remove{flex:0 0 auto;}
.equip-modelo-sugestoes{position:absolute;top:100%;left:0;right:0;background:var(--panel);border:1px solid var(--border);max-height:180px;overflow-y:auto;z-index:5;}
.equip-modelo-sugestao{padding:7px 10px;cursor:pointer;font-size:14px;}
.equip-modelo-sugestao:hover{background:var(--surface-inset);}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-head h2{margin:0;font-size:22px;}
.x-close{background:none;border:none;color:var(--text-muted);font-size:22px;line-height:1;padding:4px;}
.x-close:hover{color:var(--text);}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.err{color:var(--rust);font-size:14px;margin-top:4px;}
.filehint{font-size:13.5px;color:var(--text-muted);margin-top:5px;}
.oleo-checkbox-list{display:flex;flex-direction:column;gap:8px;background:var(--surface-inset);border:1px solid var(--border);padding:10px;}
.oleo-checkbox-item{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--text);cursor:pointer;}
.field .oleo-checkbox-item input{width:auto;flex-shrink:0;margin-top:3px;padding:0;background:none;border:none;}

/* Checkbox de uma linha só (ex. "É garantia", "Atendimento com viagem" na Manutenção) --
   mesma ideia do .oleo-checkbox-item acima: sem isso, a caixa herda width:100% de ".field
   input" e vira um bloco gigante empurrando o texto pra baixo em vez de ficar do lado. */
.field-check label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer;margin-bottom:0;}
.field-check input[type=checkbox]{width:auto;flex-shrink:0;padding:0;background:none;border:none;}

/* ---------- Drawer ---------- */
.drawer-overlay{position:fixed;inset:0;background:rgba(10,14,15,0.5);z-index:40;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:460px;background:var(--panel);border-left:1px solid var(--border-soft);z-index:41;overflow-y:auto;padding:26px;}
.drawer-afiacao{background:var(--panel-2);}
.drawer-manutencao{box-shadow:inset 4px 0 0 var(--amber);}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.drawer-head h2{margin:0;font-size:24px;}
.drawer-sub{color:var(--text-secondary);font-size:15px;margin:0 0 20px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;background:var(--surface-inset);border:1px solid var(--border-soft);padding:14px;margin-bottom:22px;font-size:15px;}
.info-grid .k{color:var(--text-muted);font-size:13px;margin-bottom:2px;}
.info-grid .v{color:var(--text);}
.info-grid .full{grid-column:1/-1;}

.email-box{border:1px solid var(--border-soft);padding:16px;margin-top:20px;}
.email-box h3{margin:0 0 10px;font-size:16.5px;font-weight:500;}
.email-box p{color:var(--text-muted);font-size:14px;margin:8px 0 0;}

.history{margin-top:22px;border-top:1px solid var(--border-soft);padding-top:14px;}
.history h4{margin:0 0 8px;font-size:14px;color:var(--text-muted);font-weight:500;}
.history-item{font-size:14px;color:var(--text-secondary);margin-bottom:4px;}
.history-item span{color:var(--text-muted);}

/* ---------- Página pública do pedido ---------- */
.public-wrap{flex:1;display:flex;justify-content:center;padding:40px 16px;}
.public-card{width:100%;max-width:520px;}
.public-card-afiacao{background:var(--panel-2);}
.public-card .logo-row{display:flex;justify-content:center;margin-bottom:18px;}
.public-card .logo-row img{width:56px;height:56px;}
.public-card h2{text-align:center;margin:0 0 4px;font-size:26px;}
.public-card .sub{text-align:center;color:var(--text-secondary);font-size:15px;margin:0 0 24px;}
.public-status{display:flex;justify-content:center;margin-bottom:20px;}
.download-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}

@media (max-width:760px){
  .info-grid{grid-template-columns:1fr;}
  .drawer{max-width:100%;}
}

/* ---------- Seletor de área: Central de Pedidos <-> Cortesa ---------- */
.topbar.area-central{border-top:5px solid var(--page-text);}
.area-switch{display:inline-flex;border:1px solid var(--page-border);background:var(--bg);}
.area-btn{padding:8px 16px;background:transparent;border:none;color:var(--page-text-secondary);font-size:14.5px;font-family:'IBM Plex Sans',sans-serif;cursor:pointer;}
.area-btn + .area-btn{border-left:1px solid var(--page-border);}
.area-btn:hover{color:var(--page-text);}
.area-btn.active{background:var(--page-text);color:#fff;font-weight:500;cursor:default;}
.topbar.area-cortesa .area-btn.active{background:var(--rust);}
.topbar.area-manutencao .area-btn.active{background:var(--amber);color:var(--silver-text);}

/* ---------- Tela de escolha (logo depois de logar) ---------- */
.area-chooser{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px;}
.area-chooser-inner{width:100%;max-width:760px;text-align:center;}
.area-chooser-inner .logo-row img{width:64px;height:64px;}
.area-chooser-inner h2{margin:12px 0 4px;font-size:30px;color:var(--page-text);}
.area-chooser-inner p{color:var(--page-text-secondary);margin:0 0 28px;}
.area-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.area-card{text-align:left;background:var(--panel);border:1px solid var(--border-soft);border-top:6px solid var(--silver);padding:26px 24px;color:var(--text);cursor:pointer;font-family:'IBM Plex Sans',sans-serif;}
.area-card:hover{background:var(--panel-2);}
.area-card h3{margin:0 0 6px;font-size:26px;}
.area-card span{color:var(--text-secondary);font-size:15px;}
.area-card-cortesa{border-top-color:var(--rust);}
.area-card-manutencao{border-top-color:var(--amber);}
.area-chooser-sair{margin-top:22px;}
@media (max-width:900px){.area-cards{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.area-cards{grid-template-columns:1fr;}}
.area-chooser-sair .btn-ghost{color:var(--page-text-secondary);border-color:var(--page-border);}
.area-chooser-sair .btn-ghost:hover{color:var(--page-text);border-color:var(--text-muted);}