/* ════════════════════════════════════════════════════════════════════
   NORTHSTAR HQ — THEME: OSAKA JADE
   A calm, dark, deep-jade dev-tool dashboard. Loaded AFTER style.css
   (and after base.html's inline sidebar <style>) only when the
   'ui_theme' setting is 'osaka-jade'; see THEMES in app/app.py.

   Palette & mood: "Osaka Jade" by Justin Lowry, from Omarchy —
   https://github.com/Justikun/omarchy-osaka-jade-theme
   MIT License, (c) 2025 Justin Lowry. Colour values taken from the
   upstream theme files; background image (static/img/themes/
   osaka-jade-bg.jpg) is the upstream wallpaper, resized.

   CONVENTIONS (every theme file follows these):
   • Every selector starts with  body.theme-<id>  — nothing leaks into
     other themes, and specificity (0,x,1+) beats style.css + the
     template-level <style> blocks without needing !important. Use
     !important ONLY where style.css itself used it.
   • Section A overrides the design-system tokens; later sections only
     restyle components whose *shape* differs from the base theme.
   • Dark-only: THEMES['osaka-jade'].supports_light = False, so the
     server never renders body.light with this theme.

   TOKENS a theme must define (read by style.css + templates):
     --acid --acid-deep --magenta --magenta-2 --dirty --dirty-2 --rust
     --cyan --violet --deepblue --ink --paper --tarmac --tarmac-2
     --glass-bg --glass-border --accent --accent-hover --accent-dim
     --purple --text --text-2 --text-3 --success --warn --info --danger
     --card-bg --modal-bg --modal-border --modal-divider --item-bg
     --item-border --item-bg-hover --select-bg --bg-1 --bg-2 --bg-3
     --border --text-1 --panel-ink --panel-w --pop --pop-color --radius
     --dot-color --dot-strong --halftone --halftone-size --hazard
     --grain
     plus theme-hook tokens used by hermes/docs templates:
     --code-bg --code-fg --on-accent-2 --chip-muted --frame-bg
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ══ A. TOKENS ═══════════════════════════════════════════════════════ */
body.theme-osaka-jade {
  /* Osaka Jade palette (named for this file only) */
  --oj-bg:        #0d1714;
  --oj-base:      #111c18;
  --oj-surface:   rgba(17, 30, 25, 0.86);
  --oj-surface-2: #16251f;
  --oj-raise:     #1b2d26;
  --oj-border:    #214237;
  --oj-border-2:  #2c5446;
  --oj-line:      rgba(33, 66, 55, 0.55);
  --oj-jade:      #2dd5b7;
  --oj-jade-2:    #71cead;
  --oj-mint:      #9eebb3;
  --oj-softcyan:  #8cd3cb;
  --oj-green:     #63b07a;
  --oj-gold:      #e1b55e;
  --oj-red:       #ff5345;
  --oj-rose:      #d2689c;
  --oj-salmon:    #e67d64;
  --oj-title:     #ebe8cf;
  --oj-fg:        #d6d5bc;
  --oj-fg-2:      #a9ae8e;
  --oj-fg-3:      #6f8577;
  --oj-on-jade:   #07201a;
  --oj-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --oj-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --oj-r:    10px;
  --oj-r-sm: 6px;
  --oj-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.22);
  --oj-ring:   0 0 0 3px rgba(45, 213, 183, 0.18);

  /* Base design-system tokens, re-pointed */
  --acid:        var(--oj-jade);
  --acid-deep:   #1fa98f;
  --magenta:     var(--oj-salmon);
  --magenta-2:   #db9f9c;
  --dirty:       var(--oj-gold);
  --dirty-2:     #deb266;
  --rust:        var(--oj-salmon);
  --cyan:        var(--oj-softcyan);
  --violet:      #509475;
  --deepblue:    var(--oj-base);
  --ink:         #0a1310;
  --paper:       var(--oj-title);
  --tarmac:      var(--oj-bg);
  --tarmac-2:    var(--oj-base);

  --glass-bg:      var(--oj-surface);
  --glass-border:  var(--oj-border);
  --glass-shine:   transparent;
  --accent:        var(--oj-jade);
  --accent-hover:  #4fe0c6;
  --accent-glow:   transparent;
  --accent-dim:    rgba(45, 213, 183, 0.12);
  --purple:        var(--oj-rose);

  --text:   var(--oj-fg);
  --text-2: var(--oj-fg-2);
  --text-3: var(--oj-fg-3);

  --success: var(--oj-green);
  --warn:    var(--oj-gold);
  --info:    var(--oj-softcyan);
  --danger:  var(--oj-red);

  --card-bg:       var(--oj-surface-2);
  --modal-bg:      var(--oj-base);
  --modal-border:  var(--oj-border);
  --modal-divider: var(--oj-line);
  --item-bg:       rgba(214, 213, 188, 0.03);
  --item-border:   var(--oj-border);
  --item-bg-hover: rgba(45, 213, 183, 0.07);
  --select-bg:     var(--oj-surface-2);

  --bg-1: var(--oj-bg);
  --bg-2: var(--oj-surface-2);
  --bg-3: var(--oj-raise);
  --border: var(--oj-border);
  --text-1: var(--oj-title);

  --panel-ink:  var(--oj-border);
  --panel-w:    1px;
  --pop:        0px;
  --pop-color:  transparent;
  --radius:     var(--oj-r);

  --dot-color:     transparent;
  --dot-strong:    transparent;
  --halftone:      none;
  --halftone-size: auto;
  --hazard:        none;
  --grain:         none;

  --code-bg:     #0a1310;
  --code-fg:     var(--oj-fg);
  --on-accent-2: var(--oj-on-jade);
  --chip-muted:  var(--oj-raise);
  --frame-bg:    #fff;
}

/* ══ B. PAGE SHELL & TYPE ════════════════════════════════════════════ */
body.theme-osaka-jade {
  font-family: var(--oj-sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--text);
  background-color: var(--oj-bg);
  background-image:
    linear-gradient(180deg, rgba(11, 20, 17, 0.90) 0%, rgba(11, 20, 17, 0.95) 45%, rgba(11, 20, 17, 0.985) 100%),
    url(../img/themes/osaka-jade-bg.jpg);
  background-size: cover, cover;
  background-position: center, center top;
  background-attachment: fixed, fixed;
  font-feature-settings: 'cv11', 'ss01';
}
body.theme-osaka-jade::after { display: none; }
body.theme-osaka-jade .main::before { display: none; }
body.theme-osaka-jade ::selection { background: rgba(45, 213, 183, 0.32); color: var(--oj-title); }

body.theme-osaka-jade a { color: var(--oj-softcyan); font-weight: 500; }
body.theme-osaka-jade a:hover { color: var(--oj-jade); }

body.theme-osaka-jade h1 {
  font-family: var(--oj-sans);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: none;
  text-shadow: none;
  color: var(--oj-title);
  margin-bottom: 4px;
}
body.theme-osaka-jade h2 {
  font-family: var(--oj-sans);
  font-size: 16px; font-weight: 600; line-height: 1.3;
  text-transform: none; letter-spacing: -0.005em;
  text-shadow: none; color: var(--oj-title);
}
body.theme-osaka-jade h3,
body.theme-osaka-jade h4 {
  font-family: var(--oj-sans);
  font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--oj-title);
}
body.theme-osaka-jade .sub {
  font-family: var(--oj-sans);
  font-size: 14px; color: var(--text-2);
  transform: none; margin-bottom: 20px;
}
body.theme-osaka-jade .sec {
  display: block;
  font-family: var(--oj-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  background: none; border: 0; box-shadow: none; transform: none;
  padding: 0; margin: 32px 0 12px;
}
body.theme-osaka-jade code,
body.theme-osaka-jade pre,
body.theme-osaka-jade .mono { font-family: var(--oj-mono); }

body.theme-osaka-jade .gz-flicker,
body.theme-osaka-jade .gz-jitter { animation: none; }
body.theme-osaka-jade .gz-tilt-l,
body.theme-osaka-jade .gz-tilt-r { transform: none; }

/* ══ C. PAGE HEADER BAND ═════════════════════════════════════════════ */
body.theme-osaka-jade .gz-head {
  padding: 28px 42px 24px;
  margin-bottom: 28px;
  background: linear-gradient(180deg, rgba(17, 30, 25, 0.70), rgba(17, 30, 25, 0.35));
  background-size: auto;
  border-bottom: 1px solid var(--oj-border);
  clip-path: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.theme-osaka-jade .gz-head::before,
body.theme-osaka-jade .gz-head::after { display: none; }
body.theme-osaka-jade .gz-head--box {
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-r);
}
body.theme-osaka-jade .gz-kicker {
  font-family: var(--oj-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--oj-jade);
  margin-bottom: 6px; padding-left: 0;
}
body.theme-osaka-jade .gz-kicker::before { content: none; }
body.theme-osaka-jade .gz-tag {
  font-family: var(--oj-mono);
  font-size: 12px; color: var(--text-3);
  transform: none;
}
body.theme-osaka-jade .gz-tape {
  height: 1px; margin: 24px 0;
  background: var(--oj-border); border: 0; opacity: 1; transform: none;
}

/* ══ D. SURFACES / CARDS ═════════════════════════════════════════════ */
body.theme-osaka-jade .glass,
body.theme-osaka-jade .tbl,
body.theme-osaka-jade .add-box,
body.theme-osaka-jade .edit-box,
body.theme-osaka-jade .stat,
body.theme-osaka-jade .pcard,
body.theme-osaka-jade .gz-panel {
  background-color: var(--oj-surface);
  background-image: none;
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-r);
  box-shadow: var(--oj-shadow);
}
body.theme-osaka-jade .glass::before,
body.theme-osaka-jade .add-box::before,
body.theme-osaka-jade .edit-box::before { display: none; }
body.theme-osaka-jade .gz-panel--acid   { border-color: rgba(45, 213, 183, 0.45); }
body.theme-osaka-jade .gz-panel--pink   { border-color: rgba(230, 125, 100, 0.45); }
body.theme-osaka-jade .gz-panel--yellow { border-color: rgba(225, 181, 94, 0.45); }

/* Stat tiles: clean cards, muted label, large tabular number */
body.theme-osaka-jade .stats { gap: 16px; }
body.theme-osaka-jade .stat,
body.theme-osaka-jade .stat:nth-child(odd),
body.theme-osaka-jade .stat:nth-child(even) {
  transform: none; border-color: var(--oj-border);
  padding: 16px 20px;
}
body.theme-osaka-jade .stat:hover {
  transform: translateY(-1px);
  border-color: var(--oj-border-2);
  box-shadow: var(--oj-shadow);
}
body.theme-osaka-jade .stat .n {
  font-family: var(--oj-sans);
  font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--oj-title); text-shadow: none;
}
body.theme-osaka-jade .stat .l {
  font-family: var(--oj-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3); margin-top: 6px;
}

/* ══ E. TABLES ═══════════════════════════════════════════════════════ */
body.theme-osaka-jade thead { background: rgba(214, 213, 188, 0.025); background-image: none; }
body.theme-osaka-jade th {
  font-family: var(--oj-sans);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-3);
  padding: 11px 16px;
  border-bottom: 1px solid var(--oj-border);
}
body.theme-osaka-jade td {
  font-size: 14px; color: var(--text-2);
  padding: 11px 16px;
  border-bottom: 1px solid var(--oj-line);
}
body.theme-osaka-jade tbody tr:hover td,
body.theme-osaka-jade tbody tr.clickable-row:hover td {
  background: rgba(45, 213, 183, 0.05); color: var(--oj-title);
}
body.theme-osaka-jade tr.email-unread td { color: var(--oj-title) !important; font-weight: 600; }
body.theme-osaka-jade .unread-dot { background: var(--oj-jade); border: 0; box-shadow: 0 0 0 3px rgba(45, 213, 183, 0.18); }

/* ══ F. BADGES (pills) ═══════════════════════════════════════════════ */
body.theme-osaka-jade .badge,
body.theme-osaka-jade .wf-type-badge {
  font-family: var(--oj-sans);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em; text-transform: none;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid transparent; box-shadow: none; transform: none;
}
body.theme-osaka-jade .s-active,
body.theme-osaka-jade .s-assigned        { background: rgba(45,213,183,.12);  color: var(--oj-jade);     border-color: rgba(45,213,183,.35); }
body.theme-osaka-jade .s-in_progress     { background: rgba(225,181,94,.12);  color: var(--oj-gold);     border-color: rgba(225,181,94,.35); }
body.theme-osaka-jade .s-delivered,
body.theme-osaka-jade .s-hired,
body.theme-osaka-jade .s-completed,
body.theme-osaka-jade .s-profiled        { background: rgba(140,211,203,.10); color: var(--oj-softcyan); border-color: rgba(140,211,203,.32); }
body.theme-osaka-jade .s-pending         { background: rgba(210,104,156,.12); color: #e39cc0;            border-color: rgba(210,104,156,.35); }
body.theme-osaka-jade .s-closed,
body.theme-osaka-jade .s-cancelled,
body.theme-osaka-jade .s-on_hold         { background: rgba(214,213,188,.05); color: var(--text-3);      border-color: var(--oj-border); }
body.theme-osaka-jade .s-researching     { background: rgba(99,176,122,.12);  color: var(--oj-mint);     border-color: rgba(99,176,122,.35); }
body.theme-osaka-jade .wf-type-partner        { background: rgba(45,213,183,.12);  color: var(--oj-jade); }
body.theme-osaka-jade .wf-type-client         { background: rgba(140,211,203,.10); color: var(--oj-softcyan); }
body.theme-osaka-jade .wf-type-supplier       { background: rgba(225,181,94,.12);  color: var(--oj-gold); }
body.theme-osaka-jade .wf-type-vessel         { background: rgba(80,148,117,.18);  color: var(--oj-mint); }
body.theme-osaka-jade .wf-type-service        { background: rgba(99,176,122,.14);  color: var(--oj-green); }
body.theme-osaka-jade .wf-type-agent          { background: rgba(230,125,100,.12); color: var(--oj-salmon); }
body.theme-osaka-jade .wf-type-communications { background: rgba(210,104,156,.12); color: #e39cc0; }

/* ══ G. FORMS ════════════════════════════════════════════════════════ */
body.theme-osaka-jade .add-box { padding: 24px; }
body.theme-osaka-jade .add-box h3 {
  display: block;
  font-family: var(--oj-sans); font-size: 15px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  color: var(--oj-title); background: none;
  border: 0; box-shadow: none; transform: none;
  padding: 0; margin-bottom: 16px;
}
body.theme-osaka-jade .form-row { gap: 16px; }
body.theme-osaka-jade .form-row label,
body.theme-osaka-jade .edit-grid label {
  font-family: var(--oj-sans);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-2); gap: 6px;
}
body.theme-osaka-jade .form-row input,  body.theme-osaka-jade .form-row select,  body.theme-osaka-jade .form-row textarea,
body.theme-osaka-jade .edit-grid input, body.theme-osaka-jade .edit-grid select, body.theme-osaka-jade .edit-grid textarea,
body.theme-osaka-jade .filter-input, body.theme-osaka-jade .mini-input, body.theme-osaka-jade .email-input,
body.theme-osaka-jade .bm-input, body.theme-osaka-jade .login-input, body.theme-osaka-jade .ph-status-sel,
body.theme-osaka-jade .hz-field, body.theme-osaka-jade .dw-search {
  font-family: var(--oj-sans);
  font-size: 14px; font-weight: 400;
  color: var(--oj-title);
  background: rgba(10, 19, 16, 0.75);
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-r-sm);
  padding: 9px 12px;
  box-shadow: none; transform: none;
  transition: border-color .15s, box-shadow .15s;
}
body.theme-osaka-jade .form-row input:focus,  body.theme-osaka-jade .form-row select:focus,  body.theme-osaka-jade .form-row textarea:focus,
body.theme-osaka-jade .edit-grid input:focus, body.theme-osaka-jade .edit-grid select:focus, body.theme-osaka-jade .edit-grid textarea:focus,
body.theme-osaka-jade .filter-input:focus, body.theme-osaka-jade .mini-input:focus, body.theme-osaka-jade .email-input:focus,
body.theme-osaka-jade .bm-input:focus, body.theme-osaka-jade .login-input:focus,
body.theme-osaka-jade .hz-field:focus, body.theme-osaka-jade .dw-search:focus {
  border-color: var(--oj-jade-2);
  box-shadow: var(--oj-ring);
  transform: none;
}
body.theme-osaka-jade input::placeholder,
body.theme-osaka-jade textarea::placeholder { color: var(--text-3); font-style: normal; }
body.theme-osaka-jade select option { background: var(--oj-surface-2); color: var(--oj-fg); }

/* ══ H. BUTTONS ══════════════════════════════════════════════════════ */
body.theme-osaka-jade .btn,
body.theme-osaka-jade .login-btn {
  font-family: var(--oj-sans);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--oj-on-jade);
  background: var(--oj-jade);
  border: 1px solid var(--oj-jade);
  border-radius: var(--oj-r-sm);
  padding: 8px 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 1px 2px rgba(0,0,0,0.3);
  transform: none;
}
body.theme-osaka-jade .btn:hover,
body.theme-osaka-jade .login-btn:hover {
  background: #4fe0c6; border-color: #4fe0c6;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 2px 8px rgba(45,213,183,0.25);
  transform: none;
}
body.theme-osaka-jade .btn:active,
body.theme-osaka-jade .login-btn:active { transform: translateY(1px); box-shadow: none; }
body.theme-osaka-jade .btn:focus-visible,
body.theme-osaka-jade .btn-ghost:focus-visible { outline: none; box-shadow: var(--oj-ring); }

body.theme-osaka-jade .btn-ghost {
  font-family: var(--oj-sans);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--oj-fg);
  background: transparent;
  border: 1px solid var(--oj-border-2);
  border-radius: var(--oj-r-sm);
  padding: 8px 16px;
  box-shadow: none; transform: none;
}
body.theme-osaka-jade .btn-ghost:hover {
  color: var(--oj-title);
  background: rgba(113, 206, 173, 0.08);
  border-color: var(--oj-jade-2);
  transform: none;
}
body.theme-osaka-jade .btn-ghost:active { transform: translateY(1px); box-shadow: none; }

body.theme-osaka-jade .act-btn {
  font-family: var(--oj-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  padding: 4px 10px;
  color: var(--text-2);
  background: rgba(214, 213, 188, 0.04);
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-r-sm);
  box-shadow: none;
}
body.theme-osaka-jade .act-btn:hover { transform: none; box-shadow: none; filter: none; color: var(--oj-title); border-color: var(--oj-border-2); }
body.theme-osaka-jade .act-btn:active { transform: translateY(1px); }
body.theme-osaka-jade .act-btn.edit   { color: var(--oj-jade); border-color: rgba(45,213,183,.35); background: rgba(45,213,183,.08); }
body.theme-osaka-jade .act-btn.delete { color: #ff8a7f;       border-color: rgba(255,83,69,.35);  background: rgba(255,83,69,.08); }

/* ══ I. EMPTY / FLASH / ERRORS ═══════════════════════════════════════ */
body.theme-osaka-jade .empty {
  font-family: var(--oj-sans);
  font-size: 14px; color: var(--text-3);
  background: rgba(214, 213, 188, 0.02);
  border: 1px dashed var(--oj-border-2);
  border-radius: var(--oj-r);
  transform: none; padding: 40px 24px;
}
body.theme-osaka-jade .flash {
  font-family: var(--oj-sans);
  font-size: 14px; font-weight: 500;
  color: var(--oj-title);
  background: rgba(45, 213, 183, 0.10);
  border: 1px solid rgba(45, 213, 183, 0.35);
  border-radius: 8px;
  box-shadow: none; transform: none;
  padding: 12px 16px 12px 20px;
  overflow: hidden;
}
body.theme-osaka-jade .flash::before {
  width: 3px; background: var(--oj-jade); border: 0;
}
body.theme-osaka-jade .login-error,
body.theme-osaka-jade .error-box {
  font-size: 14px; font-weight: 500;
  color: #ffb1a8;
  background: rgba(255, 83, 69, 0.10);
  border: 1px solid rgba(255, 83, 69, 0.40);
  border-radius: 8px;
  box-shadow: none; transform: none;
}

/* ══ J. SIGN-IN SCREENS ══════════════════════════════════════════════ */
body.theme-osaka-jade .login-card {
  width: min(400px, 92vw);
  background: rgba(15, 26, 22, 0.92);
  border: 1px solid var(--oj-border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(113,206,173,0.04) inset;
  padding: 36px 32px 32px;
  transform: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.theme-osaka-jade .login-card::before,
body.theme-osaka-jade .login-card::after { display: none; }
body.theme-osaka-jade .login-mark img { height: 40px; filter: grayscale(1) brightness(2.2); opacity: .85; }
body.theme-osaka-jade .login-title {
  font-family: var(--oj-sans);
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  text-transform: none; text-shadow: none; color: var(--oj-title);
  margin-bottom: 4px;
}
body.theme-osaka-jade .login-sub {
  font-family: var(--oj-sans);
  font-size: 14px; color: var(--text-3);
  transform: none; margin-bottom: 26px;
}
body.theme-osaka-jade .login-input { width: 100%; margin-bottom: 16px; padding: 10px 12px; }
body.theme-osaka-jade .login-btn { width: 100%; padding: 10px 16px; margin-top: 8px; font-size: 14px; }

/* ══ K. MISC NAV-ISH COMPONENTS ══════════════════════════════════════ */
body.theme-osaka-jade .back-link {
  font-family: var(--oj-sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-2); border-bottom: 0;
}
body.theme-osaka-jade .back-link:hover { color: var(--oj-jade); }

body.theme-osaka-jade .state-tabs { gap: 6px; }
body.theme-osaka-jade .state-tab {
  font-family: var(--oj-sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-r-sm);
  padding: 6px 12px;
  box-shadow: none; transform: none;
}
body.theme-osaka-jade .state-tab:hover { color: var(--oj-title); background: rgba(214,213,188,.04); }
body.theme-osaka-jade .state-tab.active {
  color: var(--oj-jade);
  background: rgba(45, 213, 183, 0.12);
  border-color: rgba(45, 213, 183, 0.40);
  box-shadow: none; transform: none;
}
body.theme-osaka-jade .filter-count {
  font-family: var(--oj-mono);
  font-size: 12px; color: var(--text-3); transform: none;
}
body.theme-osaka-jade .pg-btn {
  font-family: var(--oj-sans) !important;
  font-size: 12.5px !important;
  color: var(--text-2) !important;
  border: 1px solid var(--oj-border) !important;
  border-radius: var(--oj-r-sm) !important;
  background: transparent !important;
  box-shadow: none;
}
body.theme-osaka-jade .pg-btn:hover { color: var(--oj-title) !important; background: rgba(214,213,188,.05) !important; }
body.theme-osaka-jade .pg-active {
  color: var(--oj-on-jade) !important;
  background: var(--oj-jade) !important;
  border-color: var(--oj-jade) !important;
  box-shadow: none;
}

body.theme-osaka-jade ::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-osaka-jade ::-webkit-scrollbar-track { background: transparent; }
body.theme-osaka-jade ::-webkit-scrollbar-thumb {
  background: var(--oj-border); border: 3px solid transparent;
  background-clip: padding-box; border-radius: 10px;
}
body.theme-osaka-jade ::-webkit-scrollbar-thumb:hover { background: var(--oj-border-2); background-clip: padding-box; }

/* Profile cards */
body.theme-osaka-jade .pcard,
body.theme-osaka-jade .pcard:nth-child(odd),
body.theme-osaka-jade .pcard:nth-child(even) { transform: none; }
body.theme-osaka-jade .pcard:hover { transform: translateY(-1px); border-color: var(--oj-border-2); box-shadow: var(--oj-shadow); }
body.theme-osaka-jade .av { border: 1px solid var(--oj-border-2); box-shadow: none; filter: none; }
body.theme-osaka-jade .pname {
  font-family: var(--oj-sans); font-size: 16px; font-weight: 600;
  text-transform: none; text-shadow: none; color: var(--oj-title);
}
body.theme-osaka-jade .prole {
  font-family: var(--oj-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em; text-transform: none;
  color: var(--oj-jade); background: rgba(45,213,183,.10);
  border: 1px solid rgba(45,213,183,.30); border-radius: 999px;
  box-shadow: none; transform: none; padding: 2px 9px;
}
body.theme-osaka-jade .pjoin { font-family: var(--oj-mono); }

/* ══ L. SHARED SUB-COMPONENTS (style.css §16 used !important) ═══════ */
body.theme-osaka-jade .vp-card, body.theme-osaka-jade .stab-panel,
body.theme-osaka-jade .ph-panel, body.theme-osaka-jade .nt-meta-block {
  background-color: var(--oj-surface) !important;
  background-image: none;
  border: 1px solid var(--oj-border) !important;
  border-radius: var(--oj-r) !important;
  box-shadow: var(--oj-shadow) !important;
}
body.theme-osaka-jade .dp-head,
body.theme-osaka-jade .vp-section-title,
body.theme-osaka-jade .ph-section-label {
  font-family: var(--oj-sans) !important;
  text-transform: none; letter-spacing: 0;
  color: var(--oj-title) !important;
}
body.theme-osaka-jade .dp-empty, body.theme-osaka-jade .ph-empty,
body.theme-osaka-jade .file-viewer-empty, body.theme-osaka-jade .wa-empty {
  font-family: var(--oj-sans) !important;
  color: var(--text-3) !important;
}
body.theme-osaka-jade .ph-chip, body.theme-osaka-jade .sug-chip, body.theme-osaka-jade .nt-pill,
body.theme-osaka-jade .lbl-badge, body.theme-osaka-jade .mesh-badge, body.theme-osaka-jade .vp-badge,
body.theme-osaka-jade .ib-label, body.theme-osaka-jade .bm-label, body.theme-osaka-jade .am-label,
body.theme-osaka-jade .wf-chip {
  border-radius: 999px !important;
  border: 1px solid var(--oj-border) !important;
  box-shadow: none;
  font-family: var(--oj-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em; text-transform: none;
}
body.theme-osaka-jade .lbl-critical { background: rgba(255,83,69,.12)   !important; color: #ff8a7f !important;          border-color: rgba(255,83,69,.35) !important; }
body.theme-osaka-jade .lbl-high     { background: rgba(230,125,100,.12) !important; color: var(--oj-salmon) !important; border-color: rgba(230,125,100,.35) !important; }
body.theme-osaka-jade .lbl-medium   { background: rgba(225,181,94,.12)  !important; color: var(--oj-gold) !important;   border-color: rgba(225,181,94,.35) !important; }
body.theme-osaka-jade .lbl-low      { background: rgba(214,213,188,.05) !important; color: var(--text-3) !important;    border-color: var(--oj-border) !important; }

body.theme-osaka-jade .ph-tabs { border-bottom: 1px solid var(--oj-border) !important; }
body.theme-osaka-jade .ph-tab, body.theme-osaka-jade .ph-nav-tab {
  font-family: var(--oj-sans) !important;
  font-size: 13px !important; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  border-radius: var(--oj-r-sm) var(--oj-r-sm) 0 0 !important;
}
body.theme-osaka-jade .ph-tab.active, body.theme-osaka-jade .ph-nav-tab.active {
  background: rgba(45,213,183,.08) !important;
  color: var(--oj-jade) !important;
  box-shadow: inset 0 -2px 0 var(--oj-jade);
}
body.theme-osaka-jade .ph-nav-badge {
  background: var(--oj-jade) !important; color: var(--oj-on-jade) !important;
  border: 0;
}

body.theme-osaka-jade .proj-card {
  border: 1px solid var(--oj-border) !important;
  border-left: 3px solid var(--proj-colour, var(--oj-jade)) !important;
  border-radius: var(--oj-r) !important;
  box-shadow: var(--oj-shadow) !important;
  background-image: none;
}
body.theme-osaka-jade .proj-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.35) !important; }

body.theme-osaka-jade .email-card {
  border-radius: 8px !important;
  border: 1px solid var(--oj-border) !important;
  box-shadow: none !important;
}
body.theme-osaka-jade .email-card--linked { border-color: rgba(45,213,183,.45) !important; }

body.theme-osaka-jade .edit-panel, body.theme-osaka-jade .email-reader-panel {
  background-color: var(--oj-base) !important;
  background-image: none;
  border-left: 1px solid var(--oj-border) !important;
  box-shadow: -24px 0 64px rgba(0,0,0,.45) !important;
}
body.theme-osaka-jade .email-reader-overlay, body.theme-osaka-jade .modal-overlay {
  background: rgba(5, 10, 8, 0.70) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

body.theme-osaka-jade .org-node {
  background-color: var(--oj-surface-2) !important;
  background-image: none;
  border: 1px solid var(--oj-border) !important;
  border-left-width: 3px !important;
  border-radius: 8px !important;
  box-shadow: none;
  font-family: var(--oj-sans);
}
body.theme-osaka-jade .org-node strong {
  font-family: var(--oj-sans); font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--oj-title);
}

body.theme-osaka-jade .nmea-stat, body.theme-osaka-jade .w-kv {
  border: 1px solid var(--oj-border) !important;
  border-radius: 8px !important;
  box-shadow: none;
}
body.theme-osaka-jade .nmea-stat-val, body.theme-osaka-jade .w-v {
  font-family: var(--oj-mono) !important;
  color: var(--oj-jade) !important;
}
body.theme-osaka-jade .nmea-stat-label, body.theme-osaka-jade .w-k, body.theme-osaka-jade .nt-label,
body.theme-osaka-jade .email-field-label, body.theme-osaka-jade .login-label, body.theme-osaka-jade .bm-field label {
  font-family: var(--oj-sans) !important;
  font-size: 12px !important; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
  color: var(--text-2) !important;
}
body.theme-osaka-jade .login-label { display: block; margin-bottom: 6px; }

body.theme-osaka-jade .lg-copy-btn, body.theme-osaka-jade .ib-btn-sm {
  border-radius: var(--oj-r-sm) !important;
  border: 1px solid rgba(45,213,183,.35) !important;
  box-shadow: none;
  background: rgba(45,213,183,.10) !important; color: var(--oj-jade) !important;
  font-weight: 600 !important; text-transform: none;
}

body.theme-osaka-jade .gantt-wrap { border: 1px solid var(--oj-border) !important; border-radius: var(--oj-r) !important; }
body.theme-osaka-jade .gantt-hdr  { background: var(--oj-surface-2) !important; border-bottom: 1px solid var(--oj-border) !important; }

body.theme-osaka-jade .sortable:hover { color: var(--oj-jade) !important; }
body.theme-osaka-jade .sort-arrow { color: var(--oj-jade); }
body.theme-osaka-jade details summary:hover { color: var(--oj-jade); }

body.theme-osaka-jade pre {
  background: var(--code-bg) !important;
  border: 1px solid var(--oj-border);
  border-radius: 8px !important;
  color: var(--text-2);
}

body.theme-osaka-jade .nav-badge {
  background: var(--oj-jade) !important;
  color: var(--oj-on-jade) !important;
  border: 0;
  font-family: var(--oj-mono); font-weight: 600;
}

/* Inline gorillaz hex colours left in templates → palette */
body.theme-osaka-jade [style*="color:#c9ff1d"], body.theme-osaka-jade [style*="color: #c9ff1d"] { color: var(--oj-jade) !important; }
body.theme-osaka-jade [style*="color:#ffc61a"], body.theme-osaka-jade [style*="color: #ffc61a"] { color: var(--oj-gold) !important; }
body.theme-osaka-jade [style*="background:#ffc61a"] { background: rgba(225,181,94,.16) !important; color: var(--oj-gold) !important; }

/* ══ M. SIDEBAR (markup + base styles in base.html) ══════════════════ */
body.theme-osaka-jade .sidebar {
  background-color: rgba(10, 18, 15, 0.94);
  background-image: none;
  border-right: 1px solid var(--oj-border);
  font-family: var(--oj-sans);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.theme-osaka-jade .sidebar::after { display: none; }
body.theme-osaka-jade .sb-logo {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--oj-border);
  background: none;
}
body.theme-osaka-jade .sb-logo-mark img { filter: grayscale(1) brightness(2.2); opacity: .85; }
body.theme-osaka-jade .sb-logo-mark:hover img { filter: none; opacity: 1; }
body.theme-osaka-jade .sb-logo-text {
  font-family: var(--oj-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--oj-jade);
  background: rgba(45, 213, 183, 0.08);
  border: 1px solid rgba(45, 213, 183, 0.28);
  border-radius: 4px;
  box-shadow: none; transform: none;
  padding: 2px 7px;
}
body.theme-osaka-jade .sb-greet {
  font-family: var(--oj-sans);
  font-size: 12.5px !important; color: var(--text-3) !important;
  background: none; border: 0; padding: 0;
  transform: none;
}
body.theme-osaka-jade .sb-item {
  font-family: var(--oj-sans);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--oj-fg-2);
  border: 1px solid transparent;
  border-radius: var(--oj-r-sm);
  padding: 7px 10px; margin: 1px 0;
}
body.theme-osaka-jade .sb-item:hover {
  color: var(--oj-title);
  background: rgba(214, 213, 188, 0.045);
  border-color: transparent;
  transform: none;
}
body.theme-osaka-jade .sb-item.active,
body.theme-osaka-jade .sb-footer .sb-item.active {
  color: #ebfff2;
  background: rgba(45, 213, 183, 0.11);
  border-color: transparent;
  box-shadow: none; transform: none;
}
body.theme-osaka-jade .sb-item.active::before {
  left: -9px; top: 7px; bottom: 7px; width: 3px;
  background: var(--oj-jade); border: 0; border-radius: 0 3px 3px 0;
}
body.theme-osaka-jade .sb-item-icon { opacity: .55; }
body.theme-osaka-jade .sb-item.active .sb-item-icon { opacity: 1; color: var(--oj-jade); }
body.theme-osaka-jade .sb-group { margin-top: 8px; }
body.theme-osaka-jade .sb-group-hdr {
  font-family: var(--oj-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 0; border-radius: var(--oj-r-sm);
  padding: 6px 10px;
}
body.theme-osaka-jade .sb-group-hdr:hover { color: var(--oj-fg); background: rgba(214,213,188,.035); }
body.theme-osaka-jade .sb-group-hdr.open { color: var(--oj-fg-2); }
body.theme-osaka-jade .sb-children { border-left: 1px solid var(--oj-border); }
body.theme-osaka-jade .sb-divider {
  height: 1px; margin: 10px 12px;
  background: var(--oj-border); border: 0; opacity: 1;
}
body.theme-osaka-jade .sb-qicon {
  color: var(--text-2); background: transparent;
  border: 1px solid var(--oj-border); border-radius: var(--oj-r-sm);
  box-shadow: none;
}
body.theme-osaka-jade .sb-qicon:hover { color: var(--oj-jade); background: rgba(45,213,183,.10); transform: none; }
body.theme-osaka-jade .sb-qicon.active { color: var(--oj-on-jade); background: var(--oj-jade); border-color: var(--oj-jade); }
body.theme-osaka-jade .sb-footer { border-top: 1px solid var(--oj-border); background: none; }
body.theme-osaka-jade .sb-footer .sb-item { font-size: 13px; color: var(--text-3); }
body.theme-osaka-jade .sb-footer .sb-item:hover { color: var(--oj-title); }
body.theme-osaka-jade .sb-tile {
  font-family: var(--oj-sans); font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 11px;
  color: var(--text-3); background: transparent;
  border: 1px solid var(--oj-border); border-radius: var(--oj-r-sm);
}
body.theme-osaka-jade .sb-tile:hover { color: var(--oj-title); background: rgba(214,213,188,.045); border-color: var(--oj-border); }
body.theme-osaka-jade .sb-tile.active { color: #ebfff2; background: rgba(45,213,183,.11); border-color: rgba(45,213,183,.28); }
body.theme-osaka-jade .sb-status { font-family: var(--oj-sans); font-weight: 500; color: var(--text-3); }
body.theme-osaka-jade .sb-update { border: 0; border-radius: var(--oj-r-sm); box-shadow: none; }
body.theme-osaka-jade .sb-item.active .nav-badge { background: var(--oj-jade) !important; color: var(--oj-on-jade) !important; border: 0; }

body.theme-osaka-jade .mobile-topbar {
  background-color: rgba(10, 18, 15, 0.96);
  background-image: none;
  border-bottom: 1px solid var(--oj-border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.theme-osaka-jade .mobile-topbar::after { display: none; }
body.theme-osaka-jade .mobile-logo {
  font-family: var(--oj-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--oj-title);
}
body.theme-osaka-jade .hamburger {
  background: transparent; border: 1px solid var(--oj-border-2);
  border-radius: var(--oj-r-sm); box-shadow: none;
}
body.theme-osaka-jade .hamburger:active { transform: none; box-shadow: none; }
body.theme-osaka-jade .hamburger span { background: var(--oj-fg); height: 2px; border-radius: 2px; }
body.theme-osaka-jade .hamburger.active { background: rgba(45,213,183,.12); }
body.theme-osaka-jade .mobile-nav-overlay { background: rgba(5, 10, 8, 0.6); }

/* ══ N. PAGE-SPECIFIC: dashboard.html ════════════════════════════════ */
body.theme-osaka-jade .dash-kpi-bar { gap: 8px; }
body.theme-osaka-jade .kpi-item,
body.theme-osaka-jade .kpi-item:nth-child(odd),
body.theme-osaka-jade .kpi-item:nth-child(even) {
  background: var(--oj-surface);
  border: 1px solid var(--oj-border);
  border-radius: 8px;
  box-shadow: none; transform: none;
  padding: 7px 12px; gap: 8px;
}
body.theme-osaka-jade .kpi-item:hover {
  background: rgba(45,213,183,.06);
  border-color: var(--oj-border-2);
  transform: translateY(-1px); box-shadow: none;
}
body.theme-osaka-jade .kpi-n {
  font-family: var(--oj-mono); font-weight: 600;
  font-size: 16px; color: var(--oj-title);
  font-variant-numeric: tabular-nums;
}
body.theme-osaka-jade .kpi-l {
  font-family: var(--oj-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none; color: var(--text-3);
}
body.theme-osaka-jade .dash-grid { gap: 16px; }
body.theme-osaka-jade .dash-panel,
body.theme-osaka-jade .dash-panel:nth-child(3n),
body.theme-osaka-jade .dash-panel:nth-child(3n+2) {
  background-color: var(--oj-surface);
  background-image: none;
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-r);
  box-shadow: var(--oj-shadow);
}
body.theme-osaka-jade .dash-panel:hover { border-color: var(--oj-border-2); }
body.theme-osaka-jade .dash-panel .dp-head {
  background: rgba(214, 213, 188, 0.02);
  border-bottom: 1px solid var(--oj-border);
  font-size: 13px; font-weight: 600;
  padding: 10px 14px;
}
body.theme-osaka-jade .dp-link {
  font-family: var(--oj-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-2);
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-r-sm);
  padding: 2px 9px;
}
body.theme-osaka-jade .dp-link:hover { color: var(--oj-jade); background: transparent; border-color: rgba(45,213,183,.45); }
body.theme-osaka-jade .dp-table thead th { font-size: 11px; font-weight: 600; letter-spacing: .05em; padding: 7px 12px; border-bottom: 1px solid var(--oj-border); }
body.theme-osaka-jade .dp-table td { font-size: 13px; padding: 7px 12px; border-bottom: 1px solid var(--oj-line); }
body.theme-osaka-jade .dp-col-btns { border: 1px solid var(--oj-border); border-radius: var(--oj-r-sm); background: transparent; }
body.theme-osaka-jade .dp-col-btn { border-right-color: var(--oj-border); }
body.theme-osaka-jade .dp-col-btn--on { background: rgba(45,213,183,.14) !important; color: var(--oj-jade) !important; }

/* ══ O. PAGE-SPECIFIC: settings.html ═════════════════════════════════ */
body.theme-osaka-jade .stab { border-radius: var(--oj-r-sm) var(--oj-r-sm) 0 0; }
body.theme-osaka-jade .theme-card { border: 1px solid var(--oj-border); border-radius: var(--oj-r); background: rgba(214,213,188,.02); }
body.theme-osaka-jade .theme-card:hover { border-color: var(--oj-border-2); }
body.theme-osaka-jade .theme-card.is-active { border-color: var(--oj-jade); box-shadow: var(--oj-ring); }
body.theme-osaka-jade .theme-card-swatches { border-radius: 6px; overflow: hidden; border-color: var(--oj-border); }
body.theme-osaka-jade .theme-card-active { border-radius: 999px; font-family: var(--oj-mono); font-weight: 600; letter-spacing: .04em; }

/* ══ P. PAGE-SPECIFIC: hermes.html (hz-*) ════════════════════════════ */
body.theme-osaka-jade .hz-dot { border: 0; border-radius: 50%; }
body.theme-osaka-jade .hz-tabs { gap: 6px; margin: 4px 0 20px; }
body.theme-osaka-jade .hz-tab {
  font-family: var(--oj-sans);
  font-size: 13.5px; font-weight: 500; text-transform: none;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--oj-border);
  border-radius: 8px;
  padding: 7px 14px;
  box-shadow: none;
}
body.theme-osaka-jade .hz-tab:hover { color: var(--oj-title); background: rgba(214,213,188,.04); }
body.theme-osaka-jade .hz-tab[aria-selected=true] {
  color: var(--oj-jade);
  background: rgba(45, 213, 183, 0.12);
  border-color: rgba(45, 213, 183, 0.45);
  box-shadow: none; transform: none;
}
body.theme-osaka-jade .hz-tab .hz-n {
  font: 500 11px var(--oj-mono);
  color: var(--text-2);
  background: rgba(214,213,188,.07);
  border-radius: 999px; padding: 1px 7px;
}
body.theme-osaka-jade .hz-err,
body.theme-osaka-jade .dw-err {
  border: 1px solid rgba(255,83,69,.40); border-radius: 8px;
  background: rgba(255,83,69,.08); color: #ffb1a8; font-weight: 500;
}
body.theme-osaka-jade .hz-stale {
  border: 1px solid rgba(225,181,94,.35); border-radius: 8px;
  background: rgba(225,181,94,.08); color: var(--oj-gold); font-weight: 500;
}
body.theme-osaka-jade .hz-badge,
body.theme-osaka-jade .dw-kind {
  font-family: var(--oj-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em; text-transform: none;
  border: 1px solid transparent; border-radius: 999px;
  box-shadow: none; padding: 1px 8px;
}
body.theme-osaka-jade .hz-cat, body.theme-osaka-jade .dw-kind { background: rgba(140,211,203,.10); color: var(--oj-softcyan); border-color: rgba(140,211,203,.28); }
body.theme-osaka-jade .hz-cat.none   { background: rgba(214,213,188,.05); color: var(--text-3); border-color: var(--oj-border); }
body.theme-osaka-jade .hz-files, body.theme-osaka-jade .dw-kind.html { background: rgba(225,181,94,.10); color: var(--oj-gold); border-color: rgba(225,181,94,.30); }
body.theme-osaka-jade .hz-used    { background: rgba(99,176,122,.12); color: var(--oj-mint); border-color: rgba(99,176,122,.32); }
body.theme-osaka-jade .hz-missing { background: rgba(255,83,69,.10);  color: #ff8a7f;       border-color: rgba(255,83,69,.32); }
body.theme-osaka-jade .hz-empty,
body.theme-osaka-jade .dw-empty { font-family: var(--oj-sans); font-size: 14px; color: var(--text-3); }
body.theme-osaka-jade .hz-loading { font-family: var(--oj-mono); }
body.theme-osaka-jade .hz-count,
body.theme-osaka-jade .dw-count {
  font: 500 12px var(--oj-mono); letter-spacing: .02em; text-transform: none; color: var(--text-3);
}
body.theme-osaka-jade .hz-chips { gap: 6px; }
body.theme-osaka-jade .hz-chip {
  font: 500 12.5px var(--oj-sans); letter-spacing: 0; text-transform: none;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--oj-border);
  border-radius: 999px;
  padding: 4px 11px;
}
body.theme-osaka-jade .hz-chip:hover { color: var(--oj-title); border-color: var(--oj-border-2); }
body.theme-osaka-jade .hz-chip b { font-weight: 500; font-family: var(--oj-mono); font-size: 11px; }
body.theme-osaka-jade .hz-chip.on { color: var(--oj-on-jade); background: var(--oj-jade); border-color: var(--oj-jade); box-shadow: none; }
body.theme-osaka-jade .hz-chip.on b { color: rgba(7,32,26,.7); }
body.theme-osaka-jade .hz-grid { gap: 14px; }
body.theme-osaka-jade .hz-sk { padding: 16px; gap: 8px; }
body.theme-osaka-jade .hz-sk:hover { transform: translateY(-1px); border-color: var(--oj-border-2); }
body.theme-osaka-jade .hz-sk:focus-visible { outline: none; box-shadow: var(--oj-ring); }
body.theme-osaka-jade .hz-sk.missing { border-style: dashed; }
body.theme-osaka-jade .hz-nm { font: 600 14.5px var(--oj-sans); color: var(--oj-title); }
body.theme-osaka-jade .hz-ds { font-size: 13px; color: var(--text-2); }
body.theme-osaka-jade .hz-side h3,
body.theme-osaka-jade .hz-roster h3 {
  font: 500 11px var(--oj-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
body.theme-osaka-jade .hz-f { font-family: var(--oj-mono); color: var(--oj-softcyan); border: 1px solid transparent; border-radius: var(--oj-r-sm); }
body.theme-osaka-jade .hz-f.on { border-color: rgba(45,213,183,.4); }
body.theme-osaka-jade .hz-ro { border-top: 1px solid var(--oj-border); }
body.theme-osaka-jade .hz-meta td { border: 1px solid var(--oj-border); }
body.theme-osaka-jade .hz-meta td:first-child { font: 500 11.5px var(--oj-mono); letter-spacing: .02em; text-transform: none; color: var(--text-3); }
/* shared markdown body (hermes + docs) */
body.theme-osaka-jade .hz-md h2, body.theme-osaka-jade .dw-md h2 { font-family: var(--oj-sans); color: var(--oj-title); font-size: 17px; font-weight: 600; text-transform: none; }
body.theme-osaka-jade .hz-md h3, body.theme-osaka-jade .hz-md h4,
body.theme-osaka-jade .dw-md h3, body.theme-osaka-jade .dw-md h4 { font: 600 14px var(--oj-sans); letter-spacing: 0; text-transform: none; color: var(--oj-title); }
body.theme-osaka-jade .hz-md code, body.theme-osaka-jade .dw-md code { background: rgba(45,213,183,.07); border: 1px solid var(--oj-border); border-radius: 4px; color: var(--oj-mint); }
body.theme-osaka-jade .hz-md pre, body.theme-osaka-jade .dw-md pre { border: 1px solid var(--oj-border); border-radius: 8px; }
body.theme-osaka-jade .hz-md pre code, body.theme-osaka-jade .dw-md pre code { background: none; border: 0; color: inherit; }
body.theme-osaka-jade .hz-md blockquote, body.theme-osaka-jade .dw-md blockquote { border-left: 3px solid var(--oj-jade-2); background: rgba(113,206,173,.04); }
body.theme-osaka-jade .hz-md th, body.theme-osaka-jade .hz-md td,
body.theme-osaka-jade .dw-md th, body.theme-osaka-jade .dw-md td { border: 1px solid var(--oj-border); }
body.theme-osaka-jade .hz-md hr, body.theme-osaka-jade .dw-md hr { border-top: 1px solid var(--oj-border); }
/* chat */
body.theme-osaka-jade .hz-pp { border: 1px solid transparent; border-radius: 8px; }
body.theme-osaka-jade .hz-pp:focus-visible { outline: none; box-shadow: var(--oj-ring); }
body.theme-osaka-jade .hz-pp.on { color: var(--oj-title); background: rgba(45,213,183,.11); border-color: transparent; box-shadow: inset 3px 0 0 var(--oj-jade); }
body.theme-osaka-jade .hz-pp.on .hz-t i { color: var(--text-2); }
body.theme-osaka-jade .hz-avi, body.theme-osaka-jade .hz-big { border: 1px solid var(--oj-border-2); border-radius: 8px; box-shadow: none; }
body.theme-osaka-jade .hz-t b { font: 600 13.5px var(--oj-sans); letter-spacing: 0; text-transform: none; }
body.theme-osaka-jade .hz-who b { font: 600 16px var(--oj-sans); }
body.theme-osaka-jade .hz-th-hdr { border-bottom: 1px solid var(--oj-border); }
body.theme-osaka-jade .hz-psk, body.theme-osaka-jade .hz-threads { border-bottom: 1px solid var(--oj-line); }
body.theme-osaka-jade .hz-lbl { font: 500 11px var(--oj-mono); letter-spacing: .06em; }
body.theme-osaka-jade .hz-thr { font: 500 12px var(--oj-sans); border: 1px solid var(--oj-border); border-radius: 999px; padding: 3px 10px; }
body.theme-osaka-jade .hz-thr.on { border-color: rgba(45,213,183,.5); color: var(--oj-title); background: rgba(45,213,183,.08); }
body.theme-osaka-jade .hz-linkbtn { font: 500 12px var(--oj-sans); }
body.theme-osaka-jade .hz-bub {
  background: var(--oj-surface-2);
  border: 1px solid var(--oj-border);
  border-radius: 12px 12px 12px 4px;
  box-shadow: none;
}
body.theme-osaka-jade .hz-m.me .hz-bub {
  color: var(--oj-title);
  background: rgba(45,213,183,.13);
  border-color: rgba(45,213,183,.32);
  border-radius: 12px 12px 4px 12px;
  box-shadow: none;
}
body.theme-osaka-jade .hz-m.me .hz-bub code { color: var(--oj-mint); }
body.theme-osaka-jade .hz-m.err .hz-bub { color: #ff8a7f; border-style: solid; border-color: rgba(255,83,69,.4); font-weight: 500; }
body.theme-osaka-jade .hz-ini { border: 1px solid rgba(225,181,94,.35); border-radius: 8px; background: rgba(225,181,94,.12); color: var(--oj-gold); font: 600 13px var(--oj-sans); }
body.theme-osaka-jade .hz-route { font-family: var(--oj-mono); border: 1px dashed var(--oj-border-2); border-radius: 999px; }
body.theme-osaka-jade .hz-composer { border-top: 1px solid var(--oj-border); }

/* ══ Q. PAGE-SPECIFIC: docs.html (dw-*) ══════════════════════════════ */
body.theme-osaka-jade .dw-group h2 {
  font: 500 11.5px var(--oj-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
body.theme-osaka-jade .dw-list { padding: 0; overflow: hidden; }
body.theme-osaka-jade .dw-row { border-bottom: 1px solid var(--oj-line); padding: 11px 16px; }
body.theme-osaka-jade .dw-row:hover { background: rgba(45,213,183,.05); }
body.theme-osaka-jade .dw-row-t b { font-weight: 600; color: var(--oj-title); }
body.theme-osaka-jade .dw-row-t span, body.theme-osaka-jade .dw-meta, body.theme-osaka-jade .dw-path { font-family: var(--oj-mono); }
body.theme-osaka-jade .dw-fm td:first-child { font: 500 11.5px var(--oj-mono); letter-spacing: .02em; text-transform: none; }
body.theme-osaka-jade .dw-frame { border: 1px solid var(--oj-border); border-radius: var(--oj-r); box-shadow: var(--oj-shadow); }

/* ══ R. MOBILE ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.theme-osaka-jade { font-size: 15px; }
  body.theme-osaka-jade h1 { font-size: 22px; text-shadow: none; }
  body.theme-osaka-jade .gz-head { padding: 78px 16px 18px; margin-bottom: 20px; }
  body.theme-osaka-jade .gz-head--inline { padding: 18px 16px 16px; }
  body.theme-osaka-jade .stat .n { font-size: 26px; }
  body.theme-osaka-jade .btn,
  body.theme-osaka-jade .btn-ghost { min-height: 40px; padding: 9px 16px; font-size: 14px; }
  body.theme-osaka-jade .hz-tab { padding: 7px 12px; font-size: 13px; }
}