/* ================================================================
   COE-UI DESIGN SYSTEM v1.0
   ================================================================ */

/* ── 1. BRAND TOKENS (imutáveis) ──────────────────────────────── */
:root {
  --coe-teal:      #00C4B4;  --coe-teal-d:   #009e91;  --coe-teal-l: #33d0c2;
  --coe-gold:      #E4B208;  --coe-gold-d:   #b88c06;
  --coe-rose:      #e07352;  --coe-rose-d:   #c0552e;
  --coe-sage:      #74c365;  --coe-sage-d:   #57a349;
  --coe-blue:      #3b82f6;  --coe-purple:   #8264ff;

  --coe-teal-a10:  rgba(0,196,180,.10);  --coe-teal-a15: rgba(0,196,180,.15);
  --coe-teal-a22:  rgba(0,196,180,.22);  --coe-teal-a30: rgba(0,196,180,.30);
  --coe-gold-a10:  rgba(228,178,8,.10);  --coe-gold-a20: rgba(228,178,8,.20);
  --coe-rose-a10:  rgba(224,115,82,.10); --coe-rose-a20: rgba(224,115,82,.20);
  --coe-sage-a10:  rgba(116,195,101,.10);--coe-sage-a20: rgba(116,195,101,.20);
  --coe-blue-a10:  rgba(59,130,246,.10); --coe-blue-a22: rgba(59,130,246,.22);

  --font-display: 'Changa', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-cond:    'Barlow Condensed', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px;
  --sp6:24px; --sp8:32px; --sp10:40px;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --tr: 160ms ease;
}

/* ── 2. TEMA DARK (padrão) ───────────────────────────────────── */
:root, :root[data-theme="dark"] {
  --bg:      #080e1c;
  --bg2:     #0d1526;
  --bg3:     #111d30;
  --bg4:     #162038;

  --tx:      #e8edf5;
  --tx2:     rgba(232,237,245,.55);
  --tx3:     rgba(232,237,245,.28);
  --tx-inv:  #080e1c;
  --tx-link: var(--coe-teal);

  --bdr:     rgba(255,255,255,.06);
  --bdr2:    rgba(255,255,255,.10);
  --bdr3:    rgba(255,255,255,.18);
  --bdr-b:   var(--coe-teal-a22);
  --bdr-bs:  var(--coe-teal-a30);

  --sf-h:   rgba(255,255,255,.05);
  --sf-a:   rgba(255,255,255,.09);
  --sf-sel: var(--coe-teal-a10);

  --grid-line: rgba(0,196,180,.018);
  --shadow:    0 2px 8px rgba(0,0,0,.35);
  --shadow-lg: 0 4px 20px rgba(0,0,0,.48);
  --overlay:   rgba(0,0,0,.62);

  --sb-track: var(--bg3);
  --sb-thumb: rgba(255,255,255,.12);
}

/* ── 3. TEMA LIGHT ───────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:      #f0f4f8;
  --bg2:     #ffffff;
  --bg3:     #e8edf5;
  --bg4:     #dde4ee;

  --tx:      #1a2438;
  --tx2:     rgba(26,36,56,.55);
  --tx3:     rgba(26,36,56,.30);
  --tx-inv:  #f0f4f8;
  --tx-link: var(--coe-teal-d);

  --bdr:     rgba(26,36,56,.07);
  --bdr2:    rgba(26,36,56,.12);
  --bdr3:    rgba(26,36,56,.22);
  --bdr-b:   var(--coe-teal-a22);
  --bdr-bs:  var(--coe-teal-a30);

  --sf-h:   rgba(26,36,56,.04);
  --sf-a:   rgba(26,36,56,.08);
  --sf-sel: var(--coe-teal-a10);

  --grid-line: rgba(26,36,56,.025);
  --shadow:    0 2px 8px rgba(26,36,56,.09);
  --shadow-lg: 0 4px 20px rgba(26,36,56,.12);
  --overlay:   rgba(26,36,56,.52);

  --sb-track: var(--bg3);
  --sb-thumb: rgba(26,36,56,.15);
}

/* ── 4. RESET & BASE ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--tx);font-family:var(--font-body);
  transition:background var(--tr),color var(--tr)}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:52px 52px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--sb-track)}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:3px}
a{color:var(--tx-link);text-decoration:none}

/* ── 5. COE-BTN ──────────────────────────────────────────────── */
.coe-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);
  padding:0 var(--sp5);height:40px;border-radius:var(--r-md);
  border:1px solid var(--bdr2);background:var(--sf-h);
  font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--tx);
  cursor:pointer;user-select:none;white-space:nowrap;text-decoration:none;
  transition:background var(--tr),border-color var(--tr),color var(--tr),transform 80ms ease}
.coe-btn:hover{background:var(--sf-a);border-color:var(--bdr3)}
.coe-btn:active{transform:scale(.96)}
.coe-btn:disabled{opacity:.38;pointer-events:none}
.coe-btn--sm{height:32px;padding:0 var(--sp4);font-size:13px}
.coe-btn--lg{height:48px;padding:0 var(--sp8);font-size:16px}
.coe-btn--primary{background:var(--coe-teal);border-color:var(--coe-teal);color:var(--tx-inv)}
.coe-btn--primary:hover{background:var(--coe-teal-d);border-color:var(--coe-teal-d);color:var(--tx-inv)}
.coe-btn--outline{background:transparent;border-color:var(--coe-teal);color:var(--coe-teal)}
.coe-btn--outline:hover{background:var(--coe-teal-a10)}
.coe-btn--danger{background:var(--coe-rose-a10);border-color:var(--coe-rose);color:var(--coe-rose)}
.coe-btn--danger:hover{background:var(--coe-rose-a20)}
.coe-btn--ghost{background:transparent;border-color:transparent;color:var(--tx2)}
.coe-btn--ghost:hover{background:var(--sf-h);border-color:var(--bdr);color:var(--tx)}
.coe-btn--icon{width:40px;height:40px;padding:0}
.coe-btn--icon.coe-btn--sm{width:32px;height:32px}

/* ── 6. COE-BADGE ────────────────────────────────────────────── */
.coe-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 10px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent}
.coe-badge i{font-size:9px}
.coe-badge--success{background:var(--coe-sage-a10);border-color:var(--coe-sage-a20);color:var(--coe-sage)}
.coe-badge--danger{background:var(--coe-rose-a10);border-color:var(--coe-rose-a20);color:var(--coe-rose)}
.coe-badge--warning{background:var(--coe-gold-a10);border-color:var(--coe-gold-a20);color:var(--coe-gold)}
.coe-badge--info{background:var(--coe-blue-a10);border-color:var(--coe-blue-a22);color:var(--coe-blue)}
.coe-badge--neutral{background:var(--sf-h);border-color:var(--bdr2);color:var(--tx2)}
.coe-badge--brand{background:var(--coe-teal-a10);border-color:var(--coe-teal-a22);color:var(--coe-teal)}

/* ── 7. COE-ALERT ────────────────────────────────────────────── */
.coe-alert{
  display:flex;gap:var(--sp4);align-items:flex-start;
  padding:var(--sp4) var(--sp5);border-radius:var(--r-md);
  border:1px solid transparent;font-size:14px;line-height:1.65;color:var(--tx)}
.coe-alert__icon{font-size:17px;flex-shrink:0;margin-top:2px}
.coe-alert__body{flex:1}
.coe-alert__title{font-weight:700;font-size:14px;margin-bottom:3px}
.coe-alert--info{background:var(--coe-teal-a10);border-color:var(--coe-teal-a22)}
.coe-alert--info .coe-alert__icon{color:var(--coe-teal)}
.coe-alert--warning{background:var(--coe-gold-a10);border-color:var(--coe-gold-a20)}
.coe-alert--warning .coe-alert__icon{color:var(--coe-gold)}
.coe-alert--danger{background:var(--coe-rose-a10);border-color:var(--coe-rose-a20)}
.coe-alert--danger .coe-alert__icon{color:var(--coe-rose)}
.coe-alert--success{background:var(--coe-sage-a10);border-color:var(--coe-sage-a20)}
.coe-alert--success .coe-alert__icon{color:var(--coe-sage)}

/* ── 8. COE-CARD ─────────────────────────────────────────────── */
.coe-card{
  background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r-lg);
  overflow:hidden;position:relative;
  transition:border-color var(--tr),background var(--tr)}
.coe-card--interactive{cursor:pointer}
.coe-card--interactive:hover{border-color:var(--bdr-b)}
.coe-card--interactive:hover::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--coe-teal);border-radius:var(--r-lg) var(--r-lg) 0 0}
.coe-card--interactive:active{transform:scale(.99)}
.coe-card__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp5) var(--sp6);border-bottom:1px solid var(--bdr)}
.coe-card__title{
  font-family:var(--font-display);font-size:17px;font-weight:700;
  color:var(--tx);display:flex;align-items:center;gap:var(--sp3)}
.coe-card__title i{color:var(--coe-teal)}
.coe-card__body{padding:var(--sp5) var(--sp6)}
.coe-card__foot{
  padding:var(--sp4) var(--sp6);border-top:1px solid var(--bdr);
  background:var(--bg3);display:flex;align-items:center;
  justify-content:flex-end;gap:var(--sp3)}
.coe-kpi-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx2)}
.coe-kpi-value{font-family:var(--font-display);font-size:34px;font-weight:800;
  color:var(--coe-teal);letter-spacing:-.02em;line-height:1.05}
.coe-kpi-delta{font-family:var(--font-mono);font-size:11px;color:var(--tx2)}
.coe-kpi-delta--up{color:var(--coe-sage)}
.coe-kpi-delta--down{color:var(--coe-rose)}

/* ── 9. COE-TABLE ────────────────────────────────────────────── */
.coe-table-wrap{
  width:100%;overflow-x:auto;border-radius:var(--r-lg);
  border:1px solid var(--bdr);background:var(--bg2)}
.coe-table{width:100%;border-collapse:collapse;
  font-family:var(--font-mono);font-size:13px;color:var(--tx)}
.coe-table thead tr{background:var(--bg3);border-bottom:1px solid var(--bdr2)}
.coe-table th{
  padding:11px 14px;text-align:left;font-family:var(--font-body);
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx2);white-space:nowrap;border-right:1px solid var(--bdr);
  cursor:pointer;user-select:none;transition:color var(--tr),background var(--tr)}
.coe-table th:last-child{border-right:none}
.coe-table th:hover{color:var(--coe-teal);background:var(--sf-h)}
.coe-table th.sorted{color:var(--coe-teal)}
.coe-sort-icon{opacity:.3;margin-left:4px;font-size:9px}
.coe-table th.sorted .coe-sort-icon{opacity:1}
.coe-table td{
  padding:9px 14px;border-bottom:1px solid var(--bdr);
  border-right:1px solid var(--bdr);vertical-align:middle;
  transition:background var(--tr)}
.coe-table td:last-child{border-right:none}
.coe-table tbody tr:last-child td{border-bottom:none}
.coe-table tbody tr:hover td{background:var(--sf-h)}
.coe-table tfoot tr{background:var(--bg3);border-top:2px solid var(--bdr2)}
.coe-table tfoot td{font-weight:700;font-size:13px}
.coe-table--dense th,.coe-table--dense td{padding:6px 12px;font-size:12px}
.coe-table--striped tbody tr:nth-child(even) td{background:var(--bg3)}
.coe-table--striped tbody tr:nth-child(even):hover td{background:var(--sf-h)}
/* cell modifiers */
.td-brand{color:var(--coe-teal);font-weight:600}
.td-danger{color:var(--coe-rose);font-weight:600}
.td-warning{color:var(--coe-gold)}
.td-success{color:var(--coe-sage)}
.td-muted{color:var(--tx3)}
.td-r{text-align:right}.td-c{text-align:center}

/* ── 10. COE-TABS ────────────────────────────────────────────── */
.coe-tabs{display:flex;gap:2px;border-bottom:1px solid var(--bdr2);margin-bottom:var(--sp5)}
.coe-tab{
  display:inline-flex;align-items:center;gap:var(--sp2);
  padding:0 var(--sp5);height:40px;background:transparent;border:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--tx2);
  cursor:pointer;user-select:none;border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color var(--tr),border-color var(--tr),background var(--tr)}
.coe-tab:hover{color:var(--tx);background:var(--sf-h)}
.coe-tab.active{color:var(--coe-teal);border-bottom-color:var(--coe-teal);background:var(--coe-teal-a10)}
.coe-tab-panel{display:none;animation:tabfade .2s ease}
.coe-tab-panel.active{display:block}
@keyframes tabfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.coe-tabs--pills{border-bottom:none;gap:var(--sp2)}
.coe-tabs--pills .coe-tab{
  border-radius:var(--r-pill);border-bottom:none;margin-bottom:0;
  background:var(--bg3);border:1px solid var(--bdr);height:34px;padding:0 var(--sp4)}
.coe-tabs--pills .coe-tab:hover{border-color:var(--bdr2);background:var(--sf-a)}
.coe-tabs--pills .coe-tab.active{
  background:var(--coe-teal);color:var(--tx-inv);border-color:var(--coe-teal)}

/* ── 11. COE-INPUT / SELECT ──────────────────────────────────── */
.coe-field{display:flex;flex-direction:column;gap:4px}
.coe-label{
  font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx2)}
.coe-input,.coe-select,.coe-textarea{
  width:100%;padding:0 var(--sp4);height:40px;
  background:var(--bg2);color:var(--tx);
  border:1px solid var(--bdr2);border-radius:var(--r-md);
  font-family:var(--font-body);font-size:14px;outline:none;
  appearance:none;-webkit-appearance:none;
  transition:border-color var(--tr),background var(--tr)}
.coe-textarea{height:auto;padding:var(--sp3) var(--sp4);resize:vertical}
.coe-input::placeholder,.coe-textarea::placeholder{color:var(--tx3)}
.coe-input:hover,.coe-select:hover,.coe-textarea:hover{border-color:var(--bdr3)}
.coe-input:focus,.coe-select:focus,.coe-textarea:focus{
  border-color:var(--coe-teal);background:var(--bg3)}
.coe-select{
  cursor:pointer;background-repeat:no-repeat;
  background-position:right 12px center;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300C4B4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.coe-input-group{
  display:flex;align-items:center;border:1px solid var(--bdr2);
  border-radius:var(--r-md);background:var(--bg2);overflow:hidden;
  transition:border-color var(--tr)}
.coe-input-group:focus-within{border-color:var(--coe-teal)}
.coe-input-group .coe-input{border:none;background:transparent}
.coe-input-group .coe-input:focus{border:none;background:transparent}
.coe-input-addon{
  display:flex;align-items:center;justify-content:center;
  padding:0 var(--sp4);height:40px;flex-shrink:0;
  font-size:14px;color:var(--tx2);
  background:var(--bg3);border-right:1px solid var(--bdr)}
.coe-input-addon--r{border-right:none;border-left:1px solid var(--bdr)}
.coe-hint{font-family:var(--font-mono);font-size:11px;color:var(--tx3)}
.coe-input--error{border-color:var(--coe-rose)!important}
.coe-input--success{border-color:var(--coe-sage)!important}

/* ── 12. COE-MODAL ───────────────────────────────────────────── */
.coe-overlay{
  position:fixed;inset:0;z-index:9000;background:var(--overlay);
  backdrop-filter:blur(6px);display:none;
  align-items:center;justify-content:center;padding:var(--sp6)}
.coe-overlay.open{display:flex}
.coe-modal{
  background:var(--bg2);border:1px solid var(--bdr-b);
  border-radius:var(--r-xl);display:flex;flex-direction:column;
  max-height:90vh;width:100%;position:relative;overflow:hidden;
  animation:modalin .26s cubic-bezier(.16,1,.3,1)}
.coe-modal::before{
  content:'';display:block;flex-shrink:0;height:2px;
  background:linear-gradient(90deg,var(--coe-teal),var(--coe-teal-a15),transparent)}
@keyframes modalin{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.coe-modal--sm{max-width:480px}
.coe-modal--md{max-width:720px}
.coe-modal--lg{max-width:1020px}
.coe-modal--xl{max-width:1320px}
.coe-modal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp5) var(--sp6);border-bottom:1px solid var(--bdr);flex-shrink:0}
.coe-modal__title{
  font-family:var(--font-display);font-size:21px;font-weight:700;
  color:var(--tx);display:flex;align-items:center;gap:var(--sp3)}
.coe-modal__title i{color:var(--coe-teal)}
.coe-modal__body{padding:var(--sp6);flex:1;overflow-y:auto}
.coe-modal__foot{
  padding:var(--sp4) var(--sp6);border-top:1px solid var(--bdr);
  background:var(--bg3);flex-shrink:0;
  display:flex;align-items:center;justify-content:flex-end;gap:var(--sp3)}

/* ── 13. COE-PROGRESS ────────────────────────────────────────── */
.coe-progress__lbl{
  display:flex;justify-content:space-between;
  margin-bottom:5px;font-family:var(--font-mono);font-size:11px;color:var(--tx2)}
.coe-progress__track{
  width:100%;height:8px;background:var(--bg3);
  border-radius:var(--r-pill);overflow:hidden;border:1px solid var(--bdr)}
.coe-progress__fill{
  height:100%;border-radius:var(--r-pill);background:var(--coe-teal);
  transition:width .5s ease}
.coe-progress__fill--warn{background:var(--coe-gold)}
.coe-progress__fill--danger{background:var(--coe-rose)}
.coe-progress__fill--success{background:var(--coe-sage)}
.coe-progress--sm .coe-progress__track{height:4px}
.coe-progress--lg .coe-progress__track{height:14px}

/* ── 14. STAT BAR (inline) ───────────────────────────────────── */
.coe-stat-bar{display:flex;align-items:center;gap:var(--sp3)}
.coe-stat-bar__track{flex:1;height:6px;background:var(--bg3);border-radius:var(--r-pill);overflow:hidden}
.coe-stat-bar__fill{height:100%;background:var(--coe-teal);border-radius:var(--r-pill)}

/* ── 15. SPINNER ─────────────────────────────────────────────── */
.coe-spinner{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--bdr2);border-top-color:var(--coe-teal);
  animation:spin .7s linear infinite;display:inline-block}
.coe-spinner--lg{width:32px;height:32px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 16. UTILITÁRIOS DE LAYOUT ───────────────────────────────── */
.u-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp5)}
.u-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp5)}
.u-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp5)}
.u-flex{display:flex;gap:var(--sp4);align-items:center}
.u-flex--wrap{flex-wrap:wrap}
.u-stack{display:flex;flex-direction:column;gap:var(--sp4)}
.u-stack--sm{gap:var(--sp2)}
.u-stack--lg{gap:var(--sp6)}
.u-divider{border:none;border-top:1px solid var(--bdr);margin:var(--sp6) 0}

/* ── 17. TIPOGRAFIA UTILITÁRIA ───────────────────────────────── */
.t-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--coe-teal)}
.t-xl{font-family:var(--font-display);font-size:52px;font-weight:800;
  letter-spacing:-.02em;line-height:.95;color:var(--tx)}
.t-lg{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--tx)}
.t-md{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--tx)}
.t-sm{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--tx)}
.t-body{font-family:var(--font-body);font-size:15px;line-height:1.7;color:var(--tx2)}
.t-mono{font-family:var(--font-mono);font-size:13px;color:var(--tx2)}
.t-muted{color:var(--tx3)}

/* ── 18. THEME TOGGLE BUTTON ─────────────────────────────────── */
#theme-toggle{
  position:fixed;bottom:32px;right:32px;z-index:9999;
  width:52px;height:52px;border-radius:var(--r-pill);
  background:var(--bg2);border:1px solid var(--bdr-b);
  color:var(--coe-teal);font-size:20px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  transition:background var(--tr),transform 120ms ease;
  box-shadow:var(--shadow-lg)}
#theme-toggle:hover{background:var(--coe-teal-a15)}
#theme-toggle:active{transform:scale(.9) rotate(18deg)}


/* ── 19. LOADING SCREEN ──────────────────────────────────────── */
.coe-loading{
  position:fixed;inset:0;z-index:9900;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.coe-loading.out{opacity:0;transform:scale(1.04);pointer-events:none}
.coe-loading.gone{display:none}
.ls-rings{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;pointer-events:none}
.ls-ring{
  position:absolute;border-radius:50%;border:1px solid var(--bdr-b);
  animation:lring 40s linear infinite}
@keyframes lring{to{transform:rotate(360deg)}}
.ls-scan{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--coe-teal-a30),transparent);
  animation:lscan 4s ease-in-out infinite;z-index:1;pointer-events:none}
@keyframes lscan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.ls-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.ls-icon{
  width:110px;height:110px;border-radius:30px;
  background:var(--coe-teal-a10);border:2px solid var(--bdr-bs);
  display:flex;align-items:center;justify-content:center;
  font-size:52px;color:var(--coe-teal);margin-bottom:28px;
  animation:lpulse 3s ease-in-out infinite}
@keyframes lpulse{0%,100%{border-color:var(--coe-teal-a22)}50%{border-color:var(--coe-teal-a30)}}
.ls-title{
  font-family:var(--font-display);font-size:68px;font-weight:800;
  letter-spacing:-.02em;line-height:.95;color:var(--tx);
  margin:12px 0;text-align:center}
.ls-sub{
  font-family:var(--font-body);font-size:17px;font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx2);margin-bottom:46px;text-align:center}
.ls-track{
  width:460px;height:3px;background:var(--bg3);
  border-radius:var(--r-pill);overflow:hidden;
  border:1px solid var(--bdr);margin-bottom:14px}
.ls-fill{height:100%;width:0;background:var(--coe-teal);
  border-radius:var(--r-pill);transition:width .35s ease}
.ls-msg{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--tx2);height:18px;text-align:center}
.ls-dots{display:flex;gap:12px;margin-top:28px}
.ls-dot{width:8px;height:8px;border-radius:50%;background:var(--coe-teal-a22);
  animation:ldot 1.4s ease-in-out infinite}
.ls-dot:nth-child(2){animation-delay:.2s}
.ls-dot:nth-child(3){animation-delay:.4s}
@keyframes ldot{0%,80%,100%{transform:scale(.8);background:var(--coe-teal-a22)}40%{transform:scale(1.25);background:var(--coe-teal)}}
.ls-ver{
  position:absolute;bottom:26px;font-family:var(--font-mono);font-size:10px;
  color:var(--tx3);letter-spacing:.14em;display:flex;align-items:center;gap:8px}
.ls-ver i{color:var(--coe-teal)}

/* ── 20. LOGIN SCREEN ────────────────────────────────────────── */
.coe-login{
  position:fixed;inset:0;z-index:9800;display:flex;
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.coe-login.out{opacity:0;transform:scale(1.03);pointer-events:none}
.coe-login.gone{display:none!important}
.lg-left{
  width:52%;background:var(--bg);
  border-right:1px solid var(--bdr);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:60px}
.lg-left::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:160px;
  background:linear-gradient(0deg,var(--coe-teal-a10),transparent);pointer-events:none}
.lg-deco{
  position:absolute;pointer-events:none;opacity:.04;
  width:700px;height:700px;top:50%;left:50%;transform:translate(-50%,-50%)}
.lg-deco::before,.lg-deco::after{
  content:'';position:absolute;background:var(--coe-teal);border-radius:6px}
.lg-deco::before{left:50%;top:0;bottom:0;width:56px;transform:translateX(-50%)}
.lg-deco::after{top:50%;left:0;right:0;height:56px;transform:translateY(-50%)}
.lg-brand{position:relative;z-index:1;text-align:center}
.lg-icon{
  width:90px;height:90px;border-radius:24px;
  background:var(--coe-teal-a10);border:2px solid var(--bdr-bs);
  display:flex;align-items:center;justify-content:center;
  font-size:40px;color:var(--coe-teal);margin:0 auto 22px}
.lg-muni{
  font-family:var(--font-display);font-size:52px;font-weight:800;
  line-height:.96;color:var(--tx);margin-bottom:8px}
.lg-sub{
  font-family:var(--font-body);font-size:15px;font-weight:300;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.lg-tag{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  background:var(--coe-teal-a10);border:1px solid var(--bdr-b);
  border-radius:var(--r-pill);padding:6px 16px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--coe-teal)}
.lg-stats{display:flex;gap:44px;margin-top:48px;position:relative;z-index:1}
.lg-stat-v{font-family:var(--font-display);font-size:38px;font-weight:800;
  color:var(--coe-teal);letter-spacing:-.02em}
.lg-stat-k{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);margin-top:2px}
.lg-right{
  width:48%;background:var(--bg2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:70px 90px;position:relative}
.lg-right::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--coe-teal),transparent);opacity:.4}
.lg-form-ttl{
  font-family:var(--font-body);font-size:24px;font-weight:600;
  color:var(--tx);margin-bottom:4px;text-align:center}
.lg-form-sub{
  font-family:var(--font-mono);font-size:10px;color:var(--tx2);
  letter-spacing:.12em;text-align:center;margin-bottom:40px}
.lg-pin-dots{display:flex;gap:16px;justify-content:center;margin-bottom:28px}
.lg-dot{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--coe-teal-a22);background:transparent;
  transition:all .18s}
.lg-dot.filled{background:var(--coe-teal);border-color:var(--coe-teal)}
.lg-pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:320px}
.lg-key{
  height:74px;background:var(--bg3);border:1px solid var(--bdr2);
  border-radius:var(--r-md);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  font-family:var(--font-body);font-size:26px;font-weight:700;color:var(--tx);
  cursor:pointer;user-select:none;
  transition:background var(--tr),transform 80ms ease}
.lg-key-sub{font-family:var(--font-mono);font-size:7px;color:var(--tx3);letter-spacing:.1em}
.lg-key:hover{background:var(--sf-a);border-color:var(--bdr3)}
.lg-key:active,.lg-key.pressed{background:var(--coe-teal-a15);border-color:var(--bdr-b);transform:scale(.91)}
.lg-err{font-family:var(--font-mono);font-size:11px;color:var(--coe-rose);
  text-align:center;margin-top:12px;height:16px}
.lg-hint{position:absolute;bottom:28px;font-family:var(--font-mono);
  font-size:10px;color:var(--tx3);letter-spacing:.1em}

/* ── 21. KITCHEN SINK LAYOUT ─────────────────────────────────── */
#ks{display:none;position:relative;z-index:1}
.ks-wrap{max-width:1420px;margin:0 auto;padding:56px 48px 100px}
.ks-hero{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:60px;padding-bottom:24px;border-bottom:1px solid var(--bdr2)}
.ks-ver-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--coe-teal-a10);border:1px solid var(--bdr-b);
  border-radius:var(--r-pill);padding:5px 14px;
  font-family:var(--font-mono);font-size:11px;color:var(--coe-teal);letter-spacing:.1em}
.ks-sec{margin-bottom:68px}
.ks-sec-head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:26px;padding-bottom:13px;border-bottom:1px solid var(--bdr)}
.ks-num{
  width:32px;height:32px;border-radius:var(--r-md);
  background:var(--coe-teal-a10);border:1px solid var(--bdr-b);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;color:var(--coe-teal);font-weight:600}
.ks-sec-title{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--tx)}
.ks-sec-desc{font-family:var(--font-mono);font-size:10px;color:var(--tx3);letter-spacing:.1em;margin-left:auto}
.ks-block{
  background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r-lg);overflow:hidden}
.ks-block__h{
  background:var(--bg3);padding:9px 18px;border-bottom:1px solid var(--bdr);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3);
  display:flex;align-items:center;gap:8px}
.ks-block__h i{color:var(--coe-teal)}
.ks-block__b{padding:22px}