/* ==========================================================================
   base.css — tokens e componentes do DESIGN.md (fonte de verdade visual)
   Carregar depois de styles.css. As variáveis com o mesmo nome de styles.css têm o mesmo valor
   (não muda nada existente); as novas cobrem o que faltava. Componentes usam o prefixo .ui-.
   Modo escuro: theme.css redefine as variáveis base em :root[data-theme="dark"]; as classes .ui-
   só leem variáveis, então acompanham o tema sem regra extra.
   ========================================================================== */

:root{
  /* marca Melivu — pinho (ação), lima (energia), creme (marca-texto) */
  --pinho:#277065;--lima:#c8f653;--creme:#f8feb4;--on-lima:#0c2a25;
  --green:#277065;--green-dark:#1d564e;--green-bright:#c8f653;--green-mint:#e6fbaa;
  --green-soft:#e7f0ec;--green-tint:#f2f7f4;--teal:#2f8a7c;
  --brand-gradient:linear-gradient(135deg,#2f8a7c,#1d564e);
  /* neutros (claro) — cinzas puxados para o pinho */
  --ink:#0f2622;--body:#3b4c48;--muted:#6b7c77;--muted-2:#8a9893;
  --line:#e2e8e3;--line-soft:#edf1ec;--bg:#f3f6f2;--white:#fff;--surface:#fff;--surface-soft:#f9fbf7;
  /* ambiente escuro (usado pelas telas premium mesmo no tema claro) */
  --sidebar:#0e2825;--sidebar-2:#143632;
  --dark-canvas:#0a1e1b;--dark-surface:#11302b;--dark-surface-2:#0c2421;
  --dark-ink:#eaf4ef;--dark-body:#adc6c0;--dark-muted:#8fb0a9;--dark-muted-2:#6d8e87;
  --dark-line:rgba(255,255,255,.09);--dark-line-soft:rgba(255,255,255,.06);--glass:rgba(12,36,33,.72);
  /* semânticas */
  --danger:#e2574a;--danger-soft:#fdeeec;--danger-on-dark:#ff9c92;
  --warn:#c8850f;--warn-soft:#fff4de;--warn-on-dark:#ffd27a;
  --orange:#f28a51;--orange-on-dark:#ffb98a;
  --violet:#6658c1;--violet-soft:#eeebff;--violet-on-dark:#c5bdff;
  /* forma */
  --radius-sm:7px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-2xl:22px;--radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(13,31,28,.05);--shadow-sm:0 4px 14px rgba(13,31,28,.06);--shadow-md:0 10px 28px rgba(13,31,28,.09);
  --shadow-lg:0 24px 56px rgba(8,20,18,.16);--shadow-card:0 2px 6px rgba(13,31,28,.05);--shadow-card-hover:0 8px 22px rgba(13,31,28,.09);
  --shadow-brand:0 6px 16px rgba(39,112,101,.3);--shadow-brand-hover:0 10px 22px rgba(39,112,101,.38);--glow:0 0 0 4px rgba(39,112,101,.12);
  --shadow-dark-card:0 20px 50px rgba(0,0,0,.25);--shadow-dark-lg:0 30px 80px rgba(0,0,0,.55);
  --glow-dark:0 0 0 4px rgba(200,246,83,.14),0 0 24px rgba(200,246,83,.12);
  /* tipografia */
  --font-body:'DM Sans',system-ui,sans-serif;--font-display:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;--font-mono:ui-monospace,Menlo,Consolas,monospace;
  --text-xs:11px;--text-sm:12.5px;--text-md:13.5px;--text-lg:15.5px;--text-xl:20px;--text-2xl:22px;
  /* movimento */
  --ease-out:cubic-bezier(.2,.8,.2,1);--dur-fast:.15s;--dur-base:.25s;--dur-enter:.5s;
  /* medidas */
  --topbar-h:64px;--sidebar-w:240px;--page-pad:28px 30px 34px;--card-pad:20px 22px;
}

/* ---------- tipografia utilitária ---------- */
.ui-display{font:800 clamp(24px,2.4vw,34px)/1.1 var(--font-display);letter-spacing:-.015em}
.ui-title{font:800 var(--text-2xl)/1.15 var(--font-display);letter-spacing:-.01em}
.ui-heading{font:700 var(--text-lg)/1.3 var(--font-display)}
.ui-label{font:700 var(--text-xs) var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ui-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11.5px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--green-bright)}
.ui-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green-bright);animation:ui-ping 2s ease-out infinite}
.ui-muted{color:var(--muted);font-size:var(--text-sm)}
.ui-kpi{font:800 30px/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- botões ---------- */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  font:700 13px var(--font-display);color:var(--ink);background:transparent;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.ui-btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.ui-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ui-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
.ui-btn-primary{background:var(--brand-gradient);color:#fff;box-shadow:var(--shadow-brand)}
.ui-btn-primary:hover:not(:disabled){transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow-brand-hover)}
.ui-btn-primary:active:not(:disabled){transform:scale(.97)}
.ui-btn-primary .ui-btn-arrow{transition:transform var(--dur-base) var(--ease-out)}
.ui-btn-primary:hover:not(:disabled) .ui-btn-arrow{transform:translateX(3px)}
.ui-btn-secondary{background:var(--surface);border-color:var(--line);color:var(--ink)}
.ui-btn-secondary:hover:not(:disabled){background:var(--green-tint);border-color:var(--green)}
.ui-btn-ghost{border-radius:var(--radius-pill);border-color:var(--dark-line);color:var(--dark-ink);background:rgba(255,255,255,.04)}
.ui-btn-ghost:hover:not(:disabled){border-color:rgba(200,246,83,.4);background:rgba(200,246,83,.08)}
.ui-btn-danger{background:var(--danger);color:#fff}
.ui-btn-link{height:auto;padding:6px;color:var(--green);font:600 var(--text-sm) var(--font-body)}
.ui-btn-link:hover{text-decoration:underline}
.ui-btn-lg{height:48px;padding:0 22px;border-radius:13px;font-size:14.5px}
.ui-btn-sm{height:32px;padding:0 12px;font:600 12px var(--font-body)}
.ui-btn-icon{width:38px;height:38px;padding:0;border-radius:50%;border-color:var(--line);color:var(--muted);background:var(--surface)}
.ui-btn-icon:hover:not(:disabled){color:var(--green-dark);border-color:var(--green)}
.ui-btn.is-loading .ui-btn-arrow{display:none}
.ui-btn.is-loading::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ui-spin .8s linear infinite}

/* ---------- campos ---------- */
.ui-field{display:grid;gap:6px}
.ui-field>label{font:700 var(--text-xs) var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ui-input{position:relative;display:flex;align-items:center;gap:10px;height:46px;padding:0 12px 0 14px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--surface);
  transition:border-color var(--dur-fast),box-shadow var(--dur-base),background var(--dur-fast)}
.ui-input>svg{width:18px;height:18px;flex:none;color:var(--muted);stroke:currentColor;fill:none;stroke-width:1.8;transition:color var(--dur-fast),transform var(--dur-base)}
.ui-input input,.ui-input select,.ui-input textarea{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:14px var(--font-body);caret-color:var(--green)}
.ui-input input::placeholder,.ui-input textarea::placeholder{color:var(--muted-2)}
.ui-input:focus-within{border-color:var(--green);box-shadow:var(--glow);background:var(--green-tint)}
.ui-input:focus-within>svg{color:var(--green);transform:scale(1.08)}
.ui-input.is-textarea{height:auto;padding:10px 12px;align-items:flex-start}
.ui-input.is-textarea textarea{height:auto;min-height:80px;resize:vertical;line-height:1.5}
.ui-field.is-invalid .ui-input{border-color:rgba(226,87,74,.7);background:var(--danger-soft);box-shadow:0 0 0 4px rgba(226,87,74,.14)}
.ui-field.is-invalid .ui-input>svg{color:var(--danger)}
.ui-field-error{display:block;font-size:11.5px;color:var(--danger);opacity:0;transform:translateY(-3px);transition:opacity var(--dur-fast),transform var(--dur-fast)}
.ui-field.is-invalid .ui-field-error{opacity:1;transform:none}
.ui-field.is-shaking .ui-input{animation:ui-shake .42s ease-in-out}
.ui-hint{font-size:11.5px;color:var(--muted)}
.ui-select{height:42px;padding:0 34px 0 12px;border-radius:var(--radius-md);border:1px solid var(--line);color:var(--ink);font:500 13px var(--font-body);appearance:none;cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23707b74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;transition:border-color var(--dur-fast)}
.ui-select:hover{border-color:var(--green)}
.ui-select:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.ui-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:12.5px;color:var(--body)}
.ui-check input{position:absolute;opacity:0;width:0;height:0}
.ui-check-box{width:16px;height:16px;border-radius:5px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;transition:background var(--dur-fast),border-color var(--dur-fast)}
.ui-check-box::after{content:"";width:8px;height:5px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform var(--dur-fast) var(--ease-out)}
.ui-check input:checked+.ui-check-box{background:var(--green-dark);border-color:var(--green)}
.ui-check input:checked+.ui-check-box::after{transform:rotate(-45deg) scale(1)}
.ui-check input:focus-visible+.ui-check-box{outline:2px solid var(--green);outline-offset:2px}
.ui-search{display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface)}
.ui-search svg{width:16px;height:16px;color:var(--muted);stroke:currentColor;fill:none;stroke-width:2}
.ui-search input{border:0;outline:0;background:transparent;width:100%;font:14px var(--font-body);color:var(--ink)}
.ui-search:focus-within{border-color:var(--green);box-shadow:var(--glow)}

/* ---------- cartões e superfícies ---------- */
.ui-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow-card);transition:box-shadow var(--dur-base),transform var(--dur-base) var(--ease-out)}
.ui-card.is-hoverable:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-1px)}
.ui-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ui-card-head h2{margin:0 0 3px;font:700 var(--text-lg) var(--font-display)}
.ui-card-head p{margin:0;font-size:12px;color:var(--muted)}
.ui-card-dark{color:var(--dark-ink);border:1px solid var(--dark-line);border-radius:20px;padding:var(--card-pad);backdrop-filter:blur(10px);box-shadow:var(--shadow-dark-card);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025))}
.ui-glass{position:relative;color:var(--dark-ink);border-radius:var(--radius-2xl);padding:26px;border:1px solid rgba(200,246,83,.35);
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:var(--shadow-dark-lg),0 0 0 6px rgba(200,246,83,.08),0 0 60px rgba(200,246,83,.16),inset 0 1px 0 rgba(255,255,255,.08)}
.ui-kpi-tile{display:grid;gap:4px;padding:16px 18px;border-radius:var(--radius-xl);border:1px solid var(--line);background:var(--surface);text-align:left}
.ui-kpi-tile .ui-kpi-icon{width:32px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--green-soft);color:var(--green-dark)}
.ui-kpi-tile small{font-size:11.5px;color:var(--muted)}
.ui-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:24px}
.ui-hero.is-compact{grid-template-columns:1fr;margin-bottom:20px}
.ui-hero p{margin:0;max-width:56ch;font-size:14px;line-height:1.6;color:var(--body)}
.ui-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* ---------- pílulas, etiquetas, chips ---------- */
.ui-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-pill);border:1px solid transparent;font:600 10.5px var(--font-body);letter-spacing:.02em;white-space:nowrap;
  background:var(--line-soft);color:var(--muted)}
.ui-pill-success,.ui-pill-done{background:var(--green-soft);color:var(--green-dark);border-color:rgba(39,112,101,.25)}
.ui-pill-waiting,.ui-pill-warning{background:rgba(242,138,81,.14);color:#b45a26;border-color:rgba(242,138,81,.3)}
.ui-pill-progress,.ui-pill-info{background:var(--violet-soft);color:var(--violet);border-color:rgba(102,88,193,.25)}
.ui-pill-danger{background:var(--danger-soft);color:#b5413b;border-color:rgba(226,87,74,.25)}
.ui-pill-dark{background:rgba(255,255,255,.06);color:var(--dark-muted);border-color:rgba(255,255,255,.1)}
.ui-pill-dark.ui-pill-success{background:rgba(200,246,83,.16);color:var(--green-bright);border-color:rgba(200,246,83,.35)}
.ui-pill-dark.ui-pill-waiting{background:rgba(242,138,81,.14);color:var(--orange-on-dark);border-color:rgba(242,138,81,.3)}
.ui-pill-dark.ui-pill-progress{background:rgba(139,127,240,.16);color:var(--violet-on-dark);border-color:rgba(139,127,240,.3)}
.ui-pill-dark.ui-pill-danger{background:rgba(226,87,74,.16);color:var(--danger-on-dark);border-color:rgba(255,138,122,.32)}
.ui-tag{--h:150;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-pill);font:600 11px var(--font-body);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;
  color:hsl(var(--h) 45% 32%);background:hsl(var(--h) 60% 92%);border:1px solid hsl(var(--h) 50% 80%)}
.ui-tag-dark{color:hsl(var(--h) 70% 78%);background:hsl(var(--h) 60% 40% / .22);border-color:hsl(var(--h) 60% 55% / .35)}
.ui-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--line);background:transparent;color:var(--muted);font:600 12px var(--font-body);cursor:pointer;transition:all var(--dur-fast)}
.ui-chip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.ui-chip:hover{color:var(--ink);border-color:var(--muted-2);background:var(--surface-soft)}
.ui-chip.is-active{color:var(--green-dark);border-color:rgba(39,112,101,.45);background:var(--green-soft)}
.ui-chip-dark{border-color:var(--dark-line);color:var(--dark-muted)}
.ui-chip-dark:hover{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.ui-chip-dark.is-active{color:var(--green-bright);border-color:rgba(200,246,83,.45);background:rgba(200,246,83,.12)}
.ui-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted-2)}
.ui-dot.is-on{background:var(--green-bright);box-shadow:0 0 0 4px rgba(200,246,83,.18)}
.ui-dot.is-off{background:var(--danger);box-shadow:0 0 0 4px rgba(226,87,74,.18)}

/* ---------- tabela ---------- */
.ui-table-wrap{overflow-x:auto}
.ui-table{width:100%;border-collapse:collapse;min-width:720px}
.ui-table th{text-align:left;padding:10px 12px;font:700 10.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface-soft);border-bottom:1px solid var(--line)}
.ui-table td{padding:12px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--ink);vertical-align:middle}
.ui-table tbody tr{transition:background var(--dur-fast)}
.ui-table tbody tr.is-clickable{cursor:pointer}
.ui-table tbody tr:hover td{background:var(--green-tint)}
.ui-table tbody tr.is-current td{background:var(--green-soft);box-shadow:inset 3px 0 0 var(--green)}
.ui-table tbody tr.is-current td:not(:first-child){box-shadow:none}
.ui-table tr:last-child td{border-bottom:0}
.ui-table-dark th{background:transparent;color:var(--dark-muted);border-bottom-color:var(--dark-line)}
.ui-table-dark td{color:var(--dark-ink);border-bottom-color:rgba(255,255,255,.05)}
.ui-table-dark tbody tr:hover td{background:rgba(200,246,83,.08)}
.ui-cell{display:inline-flex;align-items:center;gap:10px}

/* ---------- avatar, lista, estado vazio ---------- */
.ui-avatar{--h:150;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;font:700 12px var(--font-body);color:#fff;background:hsl(var(--h) 45% 45%)}
.ui-avatar img{width:100%;height:100%;object-fit:cover}
.ui-avatar-sm{width:30px;height:30px;font-size:10.5px}
.ui-avatar-lg{width:56px;height:56px;font-size:17px}
.ui-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);color:inherit;cursor:pointer;transition:all var(--dur-fast)}
.ui-row:hover{border-color:var(--green);background:var(--green-tint)}
.ui-row-main{display:grid;gap:2px;min-width:0;flex:1}
.ui-row-main strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-row-main small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-empty{text-align:center;padding:34px 20px;color:var(--muted)}
.ui-empty>span{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;border-radius:16px;background:var(--green-soft);color:var(--green-dark)}
.ui-empty>span svg{width:24px;height:24px}
.ui-empty h3{margin:0 0 6px;font:700 15px var(--font-display);color:var(--ink)}
.ui-empty p{margin:0 auto 14px;max-width:38ch;font-size:12.5px;line-height:1.55}

/* ---------- modal / sheet ---------- */
.ui-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(8,20,18,.45);backdrop-filter:blur(2px)}
.ui-modal{width:430px;max-width:90vw;max-height:90vh;overflow:auto;background:var(--surface);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-lg);animation:ui-pop .18s ease-out}
.ui-modal-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.ui-modal-icon{width:44px;height:44px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--green-soft);color:var(--green-dark);flex:none}
.ui-modal-head h2{margin:0 0 2px;font:800 18px var(--font-display)}
.ui-modal-head p{margin:0;font-size:12.5px;color:var(--muted)}
.ui-modal-close{margin-left:auto;width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.ui-modal-close:hover{background:var(--line-soft);color:var(--ink)}
.ui-modal-body{display:grid;gap:12px}
.ui-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.ui-panel{position:fixed;top:0;right:0;bottom:0;z-index:65;width:min(460px,100vw);overflow-y:auto;padding:22px 22px 28px;display:flex;flex-direction:column;gap:18px;
  color:var(--dark-ink);background:linear-gradient(170deg,#0f2b27,#0a1c19 55%,#081513);border-left:1px solid rgba(255,255,255,.1);box-shadow:-24px 0 60px rgba(0,0,0,.45)}
.ui-panel-backdrop{position:fixed;inset:0;z-index:64;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.ui-bulkbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 16px;border-radius:var(--radius-pill);
  border:1px solid rgba(200,246,83,.35);background:rgba(12,31,28,.92);backdrop-filter:blur(14px);box-shadow:var(--shadow-dark-lg);color:var(--dark-ink);max-width:calc(100vw - 32px);flex-wrap:wrap;justify-content:center}
.ui-panel[hidden],.ui-panel-backdrop[hidden],.ui-bulkbar[hidden],.ui-backdrop[hidden]{display:none!important}

/* ---------- foco visível global (DESIGN.md: outline 2px verde em todo controle) ---------- */
/* inputs e textareas ficam de fora: os invólucros (.ui-input, .al-input, .field) já mostram o foco com brilho */
:is(button,a[href],select,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--green);outline-offset:2px}
[data-theme="dark"] :is(button,a[href],select,summary,[tabindex]):focus-visible{outline-color:var(--green-bright)}

/* ---------- utilidades ---------- */
.hidden,[hidden]{display:none!important}
.ui-stack{display:grid;gap:12px}
.ui-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ui-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ui-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ui-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ui-focus:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media(max-width:900px){.ui-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-hero{grid-template-columns:1fr}}
@media(max-width:720px){.ui-grid-2,.ui-grid-3{grid-template-columns:1fr}.ui-panel{width:100vw;border-left:0}.ui-input input{font-size:16px}}
@media(prefers-reduced-motion:reduce){
  .ui-btn,.ui-card,.ui-input,.ui-chip,.ui-row,.ui-check-box,.ui-check-box::after{transition:none}
  .ui-modal,.ui-field.is-shaking .ui-input,.ui-eyebrow i{animation:none}
}

@keyframes ui-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes ui-ping{0%{box-shadow:0 0 0 0 rgba(200,246,83,.5)}100%{box-shadow:0 0 0 10px rgba(200,246,83,0)}}