/* GENERATED from the Open Design mock css/juhjuh.css by generate_od_css.py — DO NOT EDIT BY HAND.
   Every rule is namespaced under `.od`; tokens light on `.od`, dark on `html.dark .od`. */
html.dark .od, html.dark .od {color-scheme: dark;
  --bg:            oklch(15% 0.004 265);
  --bg-subtle:     oklch(13% 0.004 265);
  --surface:       oklch(18% 0.004 265);
  --surface-2:     oklch(21.5% 0.005 265);
  --surface-3:     oklch(25% 0.006 265);
  --fg:            oklch(96% 0.004 265);
  --fg-2:          oklch(82% 0.006 265);
  --muted:         oklch(64% 0.012 265);   
  --faint:         oklch(50% 0.01 265);
  --border:        oklch(26% 0.004 265);
  --border-soft:   oklch(22% 0.004 265);
  --border-strong: oklch(32% 0.006 265);

  --accent:        oklch(62% 0.19 256);    
  --accent-fg:     oklch(99% 0 0);
  --accent-soft:   color-mix(in oklab, var(--accent) 16%, var(--surface));
  --accent-text:   oklch(74% 0.13 254);    

  
  --violet:        oklch(62% 0.20 300);
  --violet-text:   oklch(74% 0.15 300);

  --success:  oklch(72% 0.13 158);
  --warning:  oklch(83% 0.14 90);
  --danger:   oklch(66% 0.18 22);
  --info:     oklch(70% 0.14 246);

  --shadow-overlay: 0 8px 28px -6px rgba(0,0,0,.55), 0 2px 8px -2px rgba(0,0,0,.4);
  --card-shadow: none;
  
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 32%, transparent);
  --sel-ring:   0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent);

  
  --syn-bg:     #0d1117;
  --syn-fg:     #c9d1d9;
  --syn-head:   #141a22;
  --syn-gutter: #454c56;
  --syn-kw:     #79c0ff;
  --syn-str:    #7ee787;
  --syn-com:    #768390;
  --syn-num:    #f0883e;
  --syn-fn:     #d2a8ff;
  --syn-typ:    #ffa657;
  --syn-dec:    #f0883e;}
.od {color-scheme: light;
  --bg:            #F8F8F6;
  --bg-subtle:     #F1F0ED;
  --surface:       #FFFFFF;
  --surface-2:     #F6F5F2;
  --surface-3:     #EFEEEA;
  --fg:            #151513;
  --fg-2:          #45433D;
  --muted:         #74726B;
  --faint:         #A3A099;
  --border:        #ECEBE8;
  --border-soft:   #F1F0ED;
  --border-strong: #E2E1DD;

  --accent:        #0070F3;
  --accent-fg:     #FFFFFF;
  --accent-soft:   #EAF1FC;
  --accent-text:   #005AD2;

  --violet:        #6E56CF;
  --violet-text:   #5B45B0;

  --success:  #2E7D5B;
  --warning:  #8A6400;
  --danger:   #B23329;
  --info:     #1F5FBF;

  --shadow-overlay: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --card-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.06);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
  --sel-ring:   0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);

  
  --syn-bg:     #FFFFFF;
  --syn-fg:     #1F2328;
  --syn-head:   #F6F8FA;
  --syn-gutter: #BDC4CC;
  --syn-kw:     #0058C7;
  --syn-str:    #197A47;
  --syn-com:    #8A877F;
  --syn-num:    #B65C0E;
  --syn-fn:     #7A4FC9;
  --syn-typ:    #9A5A00;
  --syn-dec:    #B65C0E;}
.od * {box-sizing: border-box;}
.od, .od {height: 100%;}
.od {margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  font-feature-settings: 'cv05','ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;}
.od ::selection {background: color-mix(in oklab, var(--accent) 40%, transparent);}
.od ::-webkit-scrollbar {width: 10px; height: 10px;}
.od ::-webkit-scrollbar-thumb {background: color-mix(in oklab, var(--border-strong) 70%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;}
.od ::-webkit-scrollbar-thumb:hover {background: var(--border-strong); background-clip: padding-box;}
.od .mono {font-family: var(--font-mono); font-variant-numeric: tabular-nums;}
.od .sha {display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1; letter-spacing: -.01em; color: var(--fg-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1);
  padding: 3px 6px; vertical-align: middle; white-space: nowrap; text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);}
.od .sha svg {width: 12px; height: 12px; opacity: .7; flex: none;}
.od a.sha, .od .sha.link {cursor: pointer;}
.od a.sha:hover, .od .sha.link:hover {color: var(--fg); border-color: var(--border-strong); background: var(--surface-3); text-decoration: none;}
.od .sha:focus-visible {outline: none; box-shadow: var(--focus-ring); border-color: var(--accent);}
.od .sha.lg {font-size: 13px; padding: 5px 9px; gap: 6px;}
.od .sha.plain {background: none; border-color: transparent; padding: 0; color: var(--muted);}
.od a.sha.plain:hover {background: none; color: var(--fg); border-color: transparent;}
.od .path {font-family: var(--font-mono); font-size: 12px; color: var(--muted);}
.od .h1 {font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0;}
.od .h2 {font-size: 15px; font-weight: 600; letter-spacing: -.012em; margin: 0;}
.od .eyebrow {font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);}
.od .muted {color: var(--muted);}
.od .faint {color: var(--faint);}
.od .tnum {font-variant-numeric: tabular-nums;}
.od .app {display: grid; grid-template-columns: 244px 1fr; height: 100vh; overflow: hidden;}
.od .app.collapsed {grid-template-columns: 60px 1fr;}
.od .sidebar {background: var(--bg-subtle);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0; padding: 8px;}
.od .ws {display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
  transition: background .12s;}
.od .ws:hover {background: var(--surface-2);}
.od .ws-logo {width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: grid; place-items: center; color: var(--accent-text); font-weight: 700; font-size: 13px;
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);}
.od .ws-name {font-weight: 600; font-size: 13px; letter-spacing: -.01em;}
.od .ws-sub {font-size: 11px; color: var(--muted);}
.od .ws-chev {margin-left: auto; color: var(--faint); display: flex; flex-direction: column; line-height: .5;}
.od .ico {width: 17px; height: 17px; flex: none;}
.od .search {display: flex; align-items: center; gap: 8px; margin: 8px 0 4px;
  padding: 6px 9px; border-radius: 8px; cursor: text;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  transition: border-color .12s;}
.od .search:hover {border-color: var(--border-strong);}
.od .search .kbd {margin-left: auto;}
.od .kbd {font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; line-height: 1.5;}
.od .seg {display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 6px 0 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 3px;}
.od .seg button {font: inherit; font-size: 12.5px; font-weight: 550; color: var(--muted);
  background: none; border: 0; border-radius: 6px; padding: 5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;}
.od .seg button svg {width: 16px; height: 16px; flex: none;}
.od .seg button.on {background: var(--surface-3); color: var(--fg);}
.od .seg button:hover:not(.on) {color: var(--fg-2); background: var(--surface-2);}
.od .seg button:active:not(.on) {background: var(--surface-3);}
.od .seg button:focus-visible {outline: none; box-shadow: var(--focus-ring);}
.od .nav {display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; min-height: 0; padding: 2px 0;}
.od .nav-label {font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  padding: 12px 9px 4px; font-weight: 600;}
.od .nav-item {display: flex; align-items: center; gap: 10px;
  padding: 6px 9px; border-radius: 7px; color: var(--fg-2);
  text-decoration: none; font-size: 13px; font-weight: 500; position: relative;
  transition: background .1s, color .1s;}
.od .nav-item .ico {width: 17px; height: 17px; flex: none; color: var(--muted);}
.od .nav-item:hover {background: var(--surface-2); color: var(--fg);}
.od .nav-item:hover .ico {color: var(--fg-2);}
.od .nav-item.on {background: var(--surface-2); color: var(--fg);}
.od .nav-item.on .ico {color: var(--accent-text);}
.od .nav-item.on::before {content: ''; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 2.5px;
  background: var(--accent); border-radius: 0 2px 2px 0;}
.od .nav-item .count {margin-left: auto; font-size: 11px; color: var(--faint);}
.od .nav-item .ico.ext {width: 13px; height: 13px; margin-left: auto; color: var(--faint); opacity: .8;}
.od .nav-item:hover .ico.ext {color: var(--muted);}
.od .sb-bottom .nav-item .count {background: var(--surface-3); color: var(--fg-2);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600;}
.od .nav-item .count.danger-count {background: var(--danger); color: #fff; margin-left: auto;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600;}
.od .collapsed .ws-name, .od .collapsed .ws-sub, .od .collapsed .ws-chev, .od .collapsed .nav-item span, .od .collapsed .nav-label, .od .collapsed .seg button span, .od .collapsed .search span, .od .collapsed .uname, .od .collapsed .usub, .od .collapsed .jj-version {display: none;}
.od .sb-bottom {border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; display: flex; flex-direction: column; gap: 1px;}
.od .user {display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; margin-top: 2px; cursor: pointer;}
.od .user:hover {background: var(--surface-2);}
.od .user .ico {color: var(--muted);}
.od .user:hover .ico {color: var(--fg-2);}
.od .avatar {width: 26px; height: 26px; border-radius: 999px; flex: none; object-fit: cover; overflow: hidden;
  display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff;}
.od .avatar img {width: 100%; height: 100%; object-fit: cover; display: block;}
.od .jj-av img, .od .jj-avstack .jj-av img {width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;}
.od .uname {font-size: 12.5px; font-weight: 600;}
.od .usub {font-size: 11px; color: var(--muted);}
.od .jj-version {font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .02em; padding: 4px 8px 2px;}
.od .main {display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg);}
.od .topbar {height: 48px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 18px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: saturate(150%) blur(12px); position: sticky; top: 0; z-index: 5;}
.od .crumb {display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted);}
.od .crumb a {color: var(--muted); text-decoration: none;}
.od .crumb a:hover {color: var(--fg);}
.od .crumb .cur {color: var(--fg); font-weight: 550;}
.od .crumb .sep {color: var(--faint);}
.od .topbar .spacer {flex: 1;}
.od .content {flex: 1; overflow-y: auto; min-height: 0;}
.od .page {max-width: 1180px; margin: 0 auto; padding: 26px 30px 60px;}
.od .page-head {display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px;}
.od .page-head .h1-wrap {flex: 1;}
.od .page-head p {margin: 4px 0 0; color: var(--muted); font-size: 13px;}
.od .btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 12.5px;
  font-weight: 550; padding: 6px 11px; border-radius: 7px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg);
  transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .06s ease-out;
  white-space: nowrap;}
.od a.btn, .od a.btn-sm, .od a.btn-primary, .od a.btn-ghost, .od a.icon-btn, .od a.iconbtn-sm, .od a.pill, .od a.badge, .od a.tab, .od a.subtab, .od a.chip, .od a.seg, .od a.seg button, .od a.menu-item {text-decoration: none;}
.od .btn:hover {background: var(--surface-2); border-color: var(--border-strong);}
.od .btn:active {transform: translateY(.5px); background: var(--surface-3);}
.od .btn:focus-visible {outline: none; box-shadow: var(--focus-ring); border-color: var(--accent);}
.od .btn:disabled, .od .btn[disabled], .od .btn[aria-disabled="true"] {opacity: .5; cursor: not-allowed; transform: none;}
.od .btn:disabled:hover, .od .btn[disabled]:hover {background: var(--surface); border-color: var(--border-strong);}
.od .btn-primary:disabled:hover, .od .btn-primary[disabled]:hover {background: var(--accent); border-color: var(--accent);}
.od .btn-ghost:disabled:hover, .od .btn-ghost[disabled]:hover {background: transparent; border-color: transparent;}
.od .btn .ico, .od .btn > svg {width: 15px; height: 15px; flex: none;}
.od .btn-sm > svg {width: 14px; height: 14px;}
.od .icon-btn > svg {width: 16px; height: 16px;}
.od .btn-primary {background: var(--accent); border-color: var(--accent); color: var(--accent-fg);}
.od .btn-primary:hover {background: color-mix(in oklab, var(--accent) 88%, #000); border-color: transparent;}
.od .btn-primary:active {background: color-mix(in oklab, var(--accent) 76%, #000);}
.od .btn-ghost {background: transparent; border-color: transparent; color: var(--muted);}
.od .btn-ghost:hover {background: var(--surface-2); color: var(--fg);}
.od .btn-ghost:active {background: var(--surface-3);}
.od .btn-sm {padding: 4px 8px; font-size: 12px;}
.od .icon-btn {display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .06s ease-out;}
.od .icon-btn:hover {background: var(--surface-2); color: var(--fg);}
.od .icon-btn:active {transform: translateY(.5px); background: var(--surface-3);}
.od .icon-btn:focus-visible {outline: none; box-shadow: var(--focus-ring);}
.od .card {background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--card-shadow);}
.od .card-pad {padding: 16px;}
.od .grid {display: grid; gap: 12px;}
.od .auth-card {box-sizing: border-box; width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-md); padding: 32px;}
.od .auth-col {box-sizing: border-box; width: 100%;}
@media (max-width: 480px) {
  .od .auth-card {padding: 22px 18px; border-radius: 14px;}
}
.od .pill {display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 550;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--muted); background: var(--surface-2); line-height: 1.6;}
.od .pill .dot {width: 6px; height: 6px; border-radius: 999px; background: currentColor;}
.od .pill.success {color: var(--success); background: color-mix(in oklab, var(--success) 14%, var(--surface)); border-color: color-mix(in oklab, var(--success) 28%, transparent);}
.od .pill.warning {color: var(--warning); background: color-mix(in oklab, var(--warning) 15%, var(--surface)); border-color: color-mix(in oklab, var(--warning) 30%, transparent);}
.od .pill.danger {color: var(--danger);  background: color-mix(in oklab, var(--danger) 14%, var(--surface));  border-color: color-mix(in oklab, var(--danger) 28%, transparent);}
.od .pill.info {color: var(--info);    background: color-mix(in oklab, var(--info) 14%, var(--surface));    border-color: color-mix(in oklab, var(--info) 28%, transparent);}
.od .pill.accent {color: var(--accent-text); background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 30%, transparent);}
.od .label-chip {display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg-2);
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong);}
.od .label-chip .dot {width: 7px; height: 7px; border-radius: 999px;}
.od .banner {display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: color-mix(in oklab, var(--danger) 12%, var(--surface));
  border-bottom: 1px solid color-mix(in oklab, var(--danger) 26%, transparent);
  color: var(--fg); font-size: 12.5px;}
.od .banner .ico {color: var(--danger); width: 16px; height: 16px; flex: none;}
.od .banner b {font-weight: 600;}
.od .list {border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface);}
.od .list-group-head {display: flex; align-items: center; gap: 9px; padding: 7px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 600;}
.od .list-group-head .count {color: var(--faint); font-weight: 500;}
.od .list-group-head .spacer {flex: 1;}
.od .row {display: flex; align-items: center; gap: 11px; padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft); cursor: pointer; position: relative;
  transition: background .1s;}
.od .row:last-child {border-bottom: 0;}
.od .row:hover {background: var(--surface-2);}
.od .row .pri, .od .row .stat {width: 16px; height: 16px; flex: none;}
.od .row .rid {font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); width: 62px; flex: none;}
.od .row .title {flex: 1; font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.od .row .meta {display: flex; align-items: center; gap: 8px; flex: none;}
.od .row .when {font-size: 11.5px; color: var(--faint); width: 42px; text-align: right;}
.od .glyph {display: inline-grid; place-items: center; flex: none;}
/* Modifiers are chained to .s-circle on purpose: bare `.s-<name>` collides with
   any element that names its state the same way (the prompt timeline row is
   `pl-item s-{{ prompt.status }}`, so `s-partial` painted the whole row green). */
.od .s-circle {width: 14px; height: 14px; border-radius: 999px; border: 1.6px solid var(--faint);}
.od .s-circle.s-todo {border-color: var(--muted);}
.od .s-circle.s-prog {border-color: var(--warning); background:
  conic-gradient(var(--warning) 0 50%, transparent 50% 100%);}
.od .s-circle.s-done {border: 0; background: var(--accent);}
.od .s-circle.s-backlog {border-style: dashed;}
.od .s-circle.s-verify {border-color: var(--info); background:
  conic-gradient(var(--info) 0 50%, transparent 50% 100%);}
.od .s-circle.s-deploy {border: 0; background: var(--success);}
.od .s-circle.s-partial {border-color: var(--success); background:
  conic-gradient(var(--success) 0 50%, transparent 50% 100%);}
.od .s-circle.s-skip {border-style: dashed; border-color: var(--faint); opacity: .65;}
.od .s-pulse {position: relative;}
.od .s-pulse::after {content: ''; position: absolute; inset: -3px; border-radius: 999px;
  border: 1.6px solid currentColor; color: inherit; opacity: .5;
  animation: od-s-pulse-ring 1.8s var(--ease-out) infinite;}
.od .s-prog.s-pulse::after, .od .s-verify.s-pulse::after {border-color: var(--warning);}
.od .s-verify.s-pulse::after {border-color: var(--info);}
@keyframes od-s-pulse-ring { 0% { transform: scale(.8); opacity: .55; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .od .s-pulse::after {animation: none;}
}
.od .kpi-grid {display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface);}
.od .kpi {padding: 14px 16px; border-right: 1px solid var(--border);}
.od .kpi:last-child {border-right: 0;}
.od .kpi .k-label {font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px;}
.od .kpi .k-val {font-size: 23px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums;}
.od .kpi .k-delta {font-size: 11px; margin-top: 3px;}
.od .up {color: var(--success);}
.od .down {color: var(--danger);}
.od #cmdk {position: fixed; inset: 0; z-index: 50; display: none;}
.od #cmdk.on {display: block;}
.od .cmdk-backdrop {position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px);}
.od .cmdk-box {position: relative; max-width: 560px; margin: 12vh auto 0; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-overlay); overflow: hidden;}
.od .cmdk-input {display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border); color: var(--muted);}
.od .cmdk-input input {flex: 1; background: none; border: 0; outline: none; color: var(--fg); font: inherit; font-size: 14px;}
.od .cmdk-list {padding: 6px; max-height: 320px; overflow-y: auto;}
.od .cmdk-item {display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 7px; color: var(--fg-2); cursor: pointer; font-size: 13px;}
.od .cmdk-item .ico {width: 16px; height: 16px; color: var(--muted);}
.od .cmdk-item:hover, .od .cmdk-item:first-child {background: var(--surface-2); color: var(--fg);}
.od .cmdk-item .kbd {margin-left: auto;}
.od .subtabs {display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--border);
  margin-bottom: 20px; overflow-x: auto;}
.od .subtab {display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; font-size: 13px;
  font-weight: 500; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; margin-bottom: -1px; text-decoration: none; transition: color .12s, border-color .12s;}
.od .subtab .ico {width: 15px; height: 15px;}
.od .subtab:hover {color: var(--fg-2);}
.od .subtab.on {color: var(--fg); border-bottom-color: var(--accent);}
.od .subtab .badge-n {font-size: 10.5px; color: var(--faint);}
.od .tbl {width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;}
.od .tbl thead th {text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--faint); padding: 9px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;}
.od .tbl tbody td {padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;}
.od .tbl tbody tr:last-child td {border-bottom: 0;}
.od .tbl tbody tr {transition: background .1s;}
.od .tbl tbody tr.clickable {cursor: pointer;}
.od .tbl tbody tr.clickable:hover {background: var(--surface-2);}
.od .tbl td.num, .od .tbl th.num {text-align: right; font-variant-numeric: tabular-nums;}
.od .tbl td.muted {color: var(--muted);}
.od .tbl td.actions, .od .tbl th.actions {text-align: right; white-space: nowrap;}
.od .tbl.matrix thead th, .od .tbl.matrix tbody td {text-align: center;}
.od .tbl.matrix .perm, .od .tbl.matrix .perm-col {text-align: left;}
.od .kvtbl {width: 100%; border-collapse: collapse; font-size: 12.5px;}
.od .kvtbl td {padding: 9px 0; border-bottom: 1px solid var(--border-soft); vertical-align: middle;}
.od .kvtbl tr:last-child td {border-bottom: 0;}
.od .kvtbl td:last-child {text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;}
.od .kvtbl td.muted {color: var(--muted); font-weight: 400;}
.od .row-acts {display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity .12s;}
.od .tbl tbody tr:hover .row-acts, .od .tbl tbody tr:focus-within .row-acts {opacity: 1;}
.od .row-hover:hover .row-acts, .od .row-hover:focus-within .row-acts {opacity: 1;}
@media (hover: none) {
  .od .row-acts {opacity: 1;}
}
.od .ic-act {width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 0; background: none;
  color: var(--muted); cursor: pointer; transition: background .12s, color .12s;}
.od .ic-act:hover {background: var(--surface-3); color: var(--fg);}
.od .ic-act:focus-visible {outline: none; box-shadow: var(--focus-ring);}
.od .ic-act.danger:hover {background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger);}
.od .ic-act:disabled {opacity: .35; cursor: not-allowed;}
.od .ic-act:disabled:hover {background: none; color: var(--muted);}
.od .ic-act svg {width: 16px; height: 16px;}
.od .empty {text-align: center; padding: 56px 20px; color: var(--muted);}
.od .empty .e-ico {width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 12px;}
.od .empty .e-ico .ico {width: 22px; height: 22px; color: var(--faint);}
.od .empty .e-title {font-size: 14px; font-weight: 600; color: var(--fg-2);}
.od .empty .e-desc {font-size: 12.5px; margin-top: 4px;}
.od .mbar {height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; width: 90px;}
.od .mbar > i {display: block; height: 100%; background: var(--accent); border-radius: 999px;}
.od .flex {display: flex;}
/* Tailwind's `.hidden` (0,1,0) loses to `.od .flex` / `.od .grid` (0,2,0), so any
   `hidden`+`flex` toggle (modals, banners) stayed visible. Restore `hidden` with a
   matching-specificity rule placed AFTER the display utilities so it wins the cascade. */
.od .hidden {display: none;}
/* Tailwind responsive display utilities are (0,1,0) and lose to the (0,2,0)
   `.od .flex` / `.od .grid` / `.od .hidden` rules above, so a `hidden lg:block`
   reveal (e.g. the ticket-detail right sidebar) could never show, and a
   `md:hidden` on a flex/grid element could never hide — anything inside the
   `.od` scope was stuck at its base display. Re-assert every responsive display
   utility at matching (0,2,0) specificity, after the base rules and inside its
   breakpoint, so responsive show/hide works under `.od`. */
@media (min-width: 640px) {
  .od .sm\:block {display: block;}    .od .sm\:flex {display: flex;}
  .od .sm\:grid {display: grid;}      .od .sm\:inline {display: inline;}
  .od .sm\:inline-flex {display: inline-flex;}
  .od .sm\:inline-block {display: inline-block;}
  .od .sm\:table {display: table;}    .od .sm\:contents {display: contents;}
  .od .sm\:hidden {display: none;}
}
@media (min-width: 768px) {
  .od .md\:block {display: block;}    .od .md\:flex {display: flex;}
  .od .md\:grid {display: grid;}      .od .md\:inline {display: inline;}
  .od .md\:inline-flex {display: inline-flex;}
  .od .md\:inline-block {display: inline-block;}
  .od .md\:table {display: table;}    .od .md\:contents {display: contents;}
  .od .md\:hidden {display: none;}
}
@media (min-width: 1024px) {
  .od .lg\:block {display: block;}    .od .lg\:flex {display: flex;}
  .od .lg\:grid {display: grid;}      .od .lg\:inline {display: inline;}
  .od .lg\:inline-flex {display: inline-flex;}
  .od .lg\:inline-block {display: inline-block;}
  .od .lg\:table {display: table;}    .od .lg\:contents {display: contents;}
  .od .lg\:hidden {display: none;}
}
@media (min-width: 1280px) {
  .od .xl\:block {display: block;}    .od .xl\:flex {display: flex;}
  .od .xl\:grid {display: grid;}      .od .xl\:inline {display: inline;}
  .od .xl\:inline-flex {display: inline-flex;}
  .od .xl\:inline-block {display: inline-block;}
  .od .xl\:table {display: table;}    .od .xl\:contents {display: contents;}
  .od .xl\:hidden {display: none;}
}
@media (min-width: 1536px) {
  .od .\32 xl\:block {display: block;} .od .\32 xl\:flex {display: flex;}
  .od .\32 xl\:grid {display: grid;}   .od .\32 xl\:hidden {display: none;}
}
.od .between {justify-content: space-between;}
.od .center {align-items: center;}
.od .gap-2 {gap: 8px;}
.od .gap-3 {gap: 12px;}
.od .gap-4 {gap: 16px;}
.od .wrap {flex-wrap: wrap;}
.od .divider {height: 1px; background: var(--border); border: 0; margin: 0;}
html.dark .od, html.dark .od {--ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: .1s;  --dur-2: .15s;  --dur-3: .25s;  --dur-4: .4s;
  
  --r-1: 5px; --r-2: 7px; --r-3: 10px; --r-4: 12px; --r-5: 16px; --r-full: 999px;
  
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  
  --text-xs: 11px; --text-sm: 12.5px; --text-base: 13px; --text-md: 15px;
  --text-lg: 18px; --text-xl: 21px; --text-2xl: 26px; --text-3xl: 32px;
  
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 44px -10px rgba(0,0,0,.6), 0 6px 14px -6px rgba(0,0,0,.45);}
.od {--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,.12), 0 2px 6px -2px rgba(0,0,0,.07);
  --shadow-lg: 0 18px 44px -10px rgba(0,0,0,.18), 0 6px 14px -6px rgba(0,0,0,.1);}
@media (prefers-reduced-motion: reduce) {
  html.dark .od, html.dark .od, .od {--dur-1:0s; --dur-2:0s; --dur-3:0s; --dur-4:0s;}
}
.od .field {display: flex; flex-direction: column; gap: 6px;}
.od .field > .label, .od .label {font-size: var(--text-sm); font-weight: 550; color: var(--fg-2);}
.od .field .hint {font-size: var(--text-xs); color: var(--muted);}
.od .field .err {font-size: var(--text-xs); color: var(--danger);}
.od .input, .od .textarea, .od .select {font: inherit; font-size: var(--text-base); color: var(--fg); width: 100%;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-2);
  padding: 7px 10px; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  outline: none; appearance: none;}
.od .input::placeholder, .od .textarea::placeholder {color: var(--faint);}
.od .input:hover, .od .textarea:hover, .od .select:hover {border-color: var(--muted);}
.od .input:focus, .od .textarea:focus, .od .select:focus {border-color: var(--accent); box-shadow: var(--focus-ring);}
.od .input:disabled, .od .textarea:disabled, .od .select:disabled {opacity: .55; cursor: not-allowed;}
.od .input.invalid, .od .textarea.invalid, .od .select.invalid {border-color: var(--danger);}
.od .textarea {min-height: 96px; resize: vertical; line-height: 1.5;}
.od .select {background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; cursor: pointer;}
.od .input-group {display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-2); padding: 0 10px; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);}
.od .input-group:focus-within {border-color: var(--accent); box-shadow: var(--focus-ring);}
.od .input-group svg {width: 15px; height: 15px; color: var(--muted); flex: none;}
.od .input-group input {flex: 1; background: none; border: 0; outline: none; color: var(--fg); font: inherit; font-size: var(--text-base); padding: 7px 0;}
.od .fld input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), .od .fld select, .od .fld textarea, .od .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), .od .field select, .od .field textarea, .od .frow input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), .od .frow select, .od .frow textarea {font: inherit; font-size: var(--text-base); color: var(--fg); width: 100%;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-2);
  padding: 7px 10px; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  outline: none; appearance: none;}
.od .fld textarea, .od .field textarea, .od .frow textarea {min-height: 96px; resize: vertical; line-height: 1.5;}
.od .fld select, .od .field select, .od .frow select {background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; cursor: pointer;}
.od .fld input::placeholder, .od .fld textarea::placeholder, .od .field input::placeholder, .od .field textarea::placeholder, .od .frow input::placeholder, .od .frow textarea::placeholder {color: var(--faint);}
.od .fld input:hover, .od .fld select:hover, .od .fld textarea:hover, .od .field input:hover, .od .field select:hover, .od .field textarea:hover, .od .frow input:hover, .od .frow select:hover, .od .frow textarea:hover {border-color: var(--muted);}
.od .fld input:focus, .od .fld select:focus, .od .fld textarea:focus, .od .field input:focus, .od .field select:focus, .od .field textarea:focus, .od .frow input:focus, .od .frow select:focus, .od .frow textarea:focus {border-color: var(--accent); box-shadow: var(--focus-ring);}
.od .fld input:disabled, .od .fld select:disabled, .od .fld textarea:disabled, .od .field input:disabled, .od .field select:disabled, .od .field textarea:disabled, .od .frow input:disabled, .od .frow select:disabled, .od .frow textarea:disabled {opacity: .55; cursor: not-allowed;}
.od .fld .invalid, .od .field .invalid, .od .frow .invalid {border-color: var(--danger) !important;}
.od .fld > label, .od .field > label, .od .frow > label {display: block; font-size: var(--text-sm); font-weight: 550; color: var(--fg-2);
  margin-bottom: 6px; letter-spacing: 0;}
.od .card-int {cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);}
.od .card-int:hover {border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px);}
.od .ecard-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px; align-items: stretch;}
.od .ecard {position: relative; display: flex; flex-direction: column; gap: 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4);
  box-shadow: var(--card-shadow); padding: 15px; min-height: 158px; height: 100%;
  text-decoration: none; color: inherit;}
.od .ecard-head {display: flex; align-items: flex-start; gap: 11px;}
.od .ecard-ic {width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--fg); font-size: 18px;}
.od .ecard-ic svg {width: 18px; height: 18px;}
.od .ecard-ic.accent {background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 24%, transparent); color: var(--accent-text);}
.od .ecard-ic.accent svg {color: var(--accent-text);}
.od .ecard-hd {flex: 1; min-width: 0;}
.od .ecard-title {font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.3em * 2);}
.od .ecard-eyebrow {font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4;}
.od .ecard-desc {font-size: 12.5px; color: var(--muted); line-height: 1.55; min-height: calc(1.55em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.od .ecard-body {flex: 1; min-width: 0;}
.od .ecard-foot {display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 11px;
  border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--muted);}
.od .ecard-foot .right {margin-left: auto; display: inline-flex; align-items: center; gap: 8px;}
.od .ecard-act {position: absolute; top: 12px; right: 12px; background: none; border: 0; cursor: pointer; padding: 3px;
  color: var(--faint); display: grid; place-items: center; border-radius: 6px;}
.od .ecard-act:hover {background: var(--surface-2); color: var(--fg);}
.od .ecard-act svg {width: 16px; height: 16px;}
.od .check {width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong);
  display: inline-grid; place-items: center; cursor: pointer; flex: none; background: var(--surface);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);}
.od .check svg {width: 11px; height: 11px; color: var(--accent-fg); opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);}
.od .check.on {background: var(--accent); border-color: var(--accent);}
.od .check.on svg {opacity: 1; transform: scale(1);}
.od .switch {width: 34px; height: 20px; border-radius: var(--r-full); background: var(--surface-3);
  border: 1px solid var(--border-strong); position: relative; cursor: pointer; flex: none;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);}
.od .switch::after {content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: var(--r-full); background: var(--muted); transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);}
.od .switch.on {background: var(--accent); border-color: var(--accent);}
.od .switch.on::after {transform: translateX(14px); background: #fff;}
.od .alert {display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r-3); font-size: var(--text-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--fg-2); align-items: flex-start;}
.od .alert svg, .od .alert .ico {width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--muted);}
.od .alert .a-body {flex: 1; min-width: 0;}
.od .alert .a-title {font-weight: 600; color: var(--fg); font-size: var(--text-base);}
.od .alert.success {background: color-mix(in oklab,var(--success) 11%,var(--surface)); border-color: color-mix(in oklab,var(--success) 28%,transparent);}
.od .alert.success svg, .od .alert.success .ico {color: var(--success);}
.od .alert.warning {background: color-mix(in oklab,var(--warning) 12%,var(--surface)); border-color: color-mix(in oklab,var(--warning) 30%,transparent);}
.od .alert.warning svg, .od .alert.warning .ico {color: var(--warning);}
.od .alert.danger {background: color-mix(in oklab,var(--danger) 11%,var(--surface)); border-color: color-mix(in oklab,var(--danger) 28%,transparent);}
.od .alert.danger svg, .od .alert.danger .ico {color: var(--danger);}
.od .alert.info {background: color-mix(in oklab,var(--info) 11%,var(--surface)); border-color: color-mix(in oklab,var(--info) 28%,transparent);}
.od .alert.info svg, .od .alert.info .ico {color: var(--info);}
.od .alert.accent {background: var(--accent-soft); border-color: color-mix(in oklab,var(--accent) 30%,transparent);}
.od .alert.accent svg, .od .alert.accent .ico {color: var(--accent-text);}
.od .scrim {position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);}
.od .scrim.open {display: flex; opacity: 1;}

/* ---- Screen-share compositor guard --------------------------------------
   A live `backdrop-filter: blur()` on a FULLSCREEN fixed overlay forces the
   GPU to re-blur the entire viewport every frame. Under screen capture
   (getDisplayMedia) this stalls the macOS/Chrome compositor and freezes the
   shared screen. Neutralise the blur on fullscreen scrims only — both the
   `.od` CSS scrims (command palette, drawers, modals) and any Tailwind
   `inset-0 backdrop-blur-*` modal scrim. Small frosted surfaces
   (sticky topbar, save bar, chips, dropdowns) are intentionally left intact.

   Match `.absolute.inset-0` as well as `.fixed.inset-0`: the app's dominant
   modal shape is a `fixed inset-0` positioning wrapper that carries no blur,
   holding an `absolute inset-0` scrim that does. Keying only on `.fixed` left
   44 of the 50 Tailwind scrims unguarded — including `window.confirmModal`,
   `confirm_modal.html`, and every chat modal — which is why the freeze looked
   like it affected "all modals". An `absolute inset-0` element fills its
   positioned ancestor rather than the viewport, so this is scoped further by
   requiring `inset-0`: every current match is a dialog scrim, and small
   frosted dropdowns (`invite_member_form`, `story_points_badge`) are inset-
   less and keep their blur.

   The named scrims below are the same shape declared in CSS instead of
   utilities, so no attribute selector reaches them: chat search / threads /
   unreads (`.cx-soverlay`), the project overview scrim, and the ticket-detail
   modal and image lightbox. Enforced by
   `web_app/tests/test_modal_scrim_blur_guard.py`. */
.od .scrim,
.od .cmdk-backdrop,
.od .jj-drawer-scrim,
.od .cx-soverlay,
.od-ov .jjs-scrim,
.modal-back,
.jc-lightbox,
.fixed.inset-0[class*="backdrop-blur"],
.absolute.inset-0[class*="backdrop-blur"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.od .modal {width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-4); box-shadow: var(--shadow-lg); overflow: hidden; max-height: 88vh; display: flex; flex-direction: column;
  transform: translateY(8px) scale(.99); opacity: 0; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);}
.od .scrim.open .modal {transform: none; opacity: 1;}
.od .modal-head {display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border);}
.od .modal-head .m-title {font-size: var(--text-md); font-weight: 600; flex: 1;}
.od .modal-body {padding: 18px; overflow-y: auto;}
.od .modal-foot {display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--bg-subtle);}
.od .modal-foot .fi {flex: 1; font-size: var(--text-xs); color: var(--muted);}
.od .menu {min-width: 200px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-3); box-shadow: var(--shadow-md); padding: 5px;}
.od .menu-label {font-size: var(--text-xs); color: var(--faint); text-transform: uppercase; letter-spacing: .05em; padding: 7px 9px 4px; font-weight: 600;}
.od .menu-item {display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-2);
  color: var(--fg-2); font-size: var(--text-base); text-decoration: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);}
.od .menu-item svg {width: 15px; height: 15px; color: var(--muted); flex: none;}
.od .menu-item:hover {background: var(--surface-2); color: var(--fg);}
.od .menu-item:hover svg {color: var(--fg-2);}
.od .menu-item.danger {color: var(--danger);}
.od .menu-item.danger svg {color: var(--danger);}
.od .menu-sep {height: 1px; background: var(--border); margin: 5px 0;}
.od .toast-wrap {position: fixed; top: 16px; right: 16px; left: auto; bottom: auto; transform: none; z-index: 90;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  width: 360px; max-width: calc(100vw - 32px); pointer-events: none;}
.od .toast {display: flex; align-items: flex-start; gap: 11px; padding: 12px 12px 12px 13px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  pointer-events: auto; position: relative; overflow: hidden;
  animation: od-toast-in var(--dur-3) var(--ease-out);}
.od .toast .t-ic {width: 30px; height: 30px; border-radius: var(--r-2); flex: none; display: grid; place-items: center;
  background: var(--surface-3); color: var(--fg-2);}
.od .toast .t-ic svg, .od .toast .t-ic .ico {width: 17px; height: 17px; flex: none;}
.od .toast .t-msg {flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 500; color: var(--fg);
  line-height: 1.4; padding-top: 5px; word-break: break-word;}
.od .toast .t-act {flex: none; align-self: center; display: grid; place-items: center; width: 22px; height: 22px;
  color: var(--accent-text); cursor: pointer;}
.od .toast .t-act svg {width: 16px; height: 16px;}
.od .toast .t-x {flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-1);
  color: var(--muted); cursor: pointer; transition: background var(--dur-1), color var(--dur-1);}
.od .toast .t-x:hover {background: var(--surface-2); color: var(--fg);}
.od .toast .t-x svg {width: 15px; height: 15px;}
.od .toast .t-bar {position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); width: 100%;}
.od .toast.success .t-ic {background: color-mix(in oklab, var(--success) 16%, transparent); color: var(--success);}
.od .toast.success .t-bar {background: var(--success);}
.od .toast.danger .t-ic, .od .toast.error .t-ic {background: color-mix(in oklab, var(--danger) 16%, transparent); color: var(--danger);}
.od .toast.danger .t-bar, .od .toast.error .t-bar {background: var(--danger);}
.od .toast.warning .t-ic {background: color-mix(in oklab, var(--warning) 18%, transparent); color: var(--warning);}
.od .toast.warning .t-bar {background: var(--warning);}
.od .toast.info .t-ic {background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-text);}
.od .toast.info .t-bar {background: var(--accent);}
.od .toast.leaving {animation: od-toast-out var(--dur-2) var(--ease-out) forwards;}
@keyframes od-toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes od-toast-out { to { opacity: 0; transform: translateX(14px); } }
@keyframes od-toast-shrink { from { width: 100%; } to { width: 0; } }
@media (max-width: 480px) {
  .od .toast-wrap {left: 16px; right: 16px; width: auto;}
}
.od .badge {display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 6px; border-radius: var(--r-full); font-size: 10.5px; font-weight: 600; line-height: 1;
  background: var(--surface-3); color: var(--fg-2);}
.od .badge.accent {background: var(--accent); color: var(--accent-fg);}
.od .badge.danger {background: var(--danger); color: #fff;}
.od .badge.success {background: var(--success); color: #06281a;}
.od .stack {display: flex; flex-direction: column;}
.od .stack-2 {gap: var(--space-2);}
.od .stack-3 {gap: var(--space-3);}
.od .stack-4 {gap: var(--space-4);}
.od .stack-6 {gap: var(--space-6);}
.od .langbar {display: flex; width: 100%; height: 9px; border-radius: var(--r-full); overflow: hidden;
  background: var(--surface-3);}
.od .langbar > span {height: 100%; display: block;}
.od .langbar.thin {height: 6px;}
.od .lang-legend {display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;}
.od .lang-legend .li {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2);}
.od .lang-legend .li .dot {width: 9px; height: 9px; border-radius: var(--r-full); flex: none;}
.od .lang-legend .li .pct {color: var(--muted); font-variant-numeric: tabular-nums;}
.od .checks {display: flex; flex-direction: column;}
.od .checks.boxed {border: 1px solid var(--border); border-radius: var(--r-3);
  overflow: hidden; background: var(--surface);}
.od .checkrow {display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border-soft);}
.od .checks.boxed .checkrow {padding: 11px 14px;}
.od .checkrow:last-child {border-bottom: 0;}
.od .checkrow .ck-ic {width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: var(--r-full);}
.od .checkrow .ck-ic svg {width: 13px; height: 13px;}
.od .checkrow .ck-ic.ok {background: color-mix(in oklab, var(--success) 18%, transparent); color: var(--success);}
.od .checkrow .ck-ic.run {background: color-mix(in oklab, var(--warning) 20%, transparent); color: var(--warning);}
.od .checkrow .ck-ic.fail {background: color-mix(in oklab, var(--danger) 18%, transparent); color: var(--danger);}
.od .checkrow .ck-ic.skip {background: var(--surface-3); color: var(--muted);}
.od .checkrow .ck-ic.idle {background: var(--surface-3); color: var(--faint);}
.od .checkrow .ck-ic.run svg {animation: od-ck-spin 1s linear infinite;}
@keyframes od-ck-spin { to { transform: rotate(360deg); } }
.od .checkrow .ck-main {flex: 1; min-width: 0;}
.od .checkrow .ck-name {font-size: 13px; font-weight: 600; color: var(--fg);}
.od .checkrow .ck-desc {font-size: 12px; color: var(--muted); margin-top: 1px;}
.od .checkrow .ck-meta {font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  flex: none; font-variant-numeric: tabular-nums;}
.od .checkrow .ck-link {font-size: 12px; color: var(--accent-text); text-decoration: none; flex: none;}
.od .checkrow .ck-link:hover {text-decoration: underline;}
.od .btn-danger {display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px;
  font-weight: 550; padding: 6px 11px; border-radius: 7px; cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--danger) 45%, transparent);
  background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger);
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .06s var(--ease-out);}
.od .btn-danger:hover {background: var(--danger); border-color: var(--danger); color: #fff;}
.od .btn-danger:disabled, .od .btn-danger[disabled] {opacity: .5; cursor: not-allowed;}
.od .btn-danger:disabled:hover, .od .btn-danger[disabled]:hover {background: color-mix(in oklab, var(--danger) 12%, var(--surface)); border-color: color-mix(in oklab, var(--danger) 45%, transparent); color: var(--danger);}
.od .btn-danger:active {transform: translateY(.5px);}
.od .btn-danger:focus-visible {outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 30%, transparent);}
.od .btn-danger.solid {background: var(--danger); border-color: var(--danger); color: #fff;}
.od .btn-danger > svg, .od .btn-danger .ico {width: 15px; height: 15px; flex: none;}
.od .jj-stepper {display: flex; align-items: center;}
.od .jj-step {display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 500;}
.od .jj-step .n {width: 22px; height: 22px; border-radius: 999px; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; border: 1.5px solid var(--border-strong); color: var(--faint); background: var(--surface);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);}
.od .jj-step .n svg {width: 12px; height: 12px;}
.od .jj-step.on {color: var(--fg);}
.od .jj-step.on .n {border-color: var(--accent); color: var(--accent-text);}
.od .jj-step.done {color: var(--fg-2);}
.od .jj-step.done .n {background: var(--accent); border-color: var(--accent); color: var(--accent-fg);}
.od .jj-step-sep {flex: 1; height: 1.5px; background: var(--border); margin: 0 12px; min-width: 16px;}
.od .jj-step-sep.done {background: var(--accent);}
.od .jj-opt-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); gap: 10px;}
.od .jj-opt {position: relative; display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-3); text-align: left;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);}
.od .jj-opt:hover {border-color: var(--muted);}
.od .jj-opt.on {border-color: var(--accent); box-shadow: var(--sel-ring); background: var(--accent-soft);}
.od .jj-opt .jj-opt-t {font-size: 13px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 8px;}
.od .jj-opt .jj-opt-t svg {width: 16px; height: 16px; color: var(--muted); flex: none;}
.od .jj-opt.on .jj-opt-t svg {color: var(--accent-text);}
.od .jj-opt .jj-opt-d {font-size: 12px; color: var(--muted); line-height: 1.5;}
.od .jj-opt .jj-opt-ck {position: absolute; top: 11px; right: 11px; width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--border-strong); display: grid; place-items: center;}
.od .jj-opt.on .jj-opt-ck {background: var(--accent); border-color: var(--accent);}
.od .jj-opt.on .jj-opt-ck::after {content: ''; width: 6px; height: 6px; border-radius: 999px; background: #fff;}
.od .jj-pdots {display: flex; gap: 8px; width: 100%;}
.od .jj-pdot {flex: 1; height: 4px; border-radius: 999px; background: var(--surface-3); transition: background var(--dur-2) var(--ease-out);}
.od .jj-pdot.active {background: color-mix(in oklab, var(--accent) 60%, var(--surface-3));}
.od .jj-pdot.done {background: var(--accent);}
.od .jj-plan {position: relative; display: block; cursor: pointer; padding: 16px; margin: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-4);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);}
.od .jj-plan:hover {border-color: var(--muted);}
.od .jj-plan.sel {border-color: var(--accent); box-shadow: var(--sel-ring); background: var(--accent-soft);}
.od .jj-plan input {position: absolute; opacity: 0; pointer-events: none;}
.od .jj-plan-head {display: flex; align-items: baseline; justify-content: space-between; gap: 10px;}
.od .jj-plan-name {font-size: 14px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 8px;}
.od .jj-plan-price {font-size: 16px; font-weight: 600; color: var(--fg); white-space: nowrap;}
.od .jj-plan-price span {font-size: 11.5px; color: var(--muted); font-weight: 400;}
.od .jj-plan-badge {font-size: 9.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  background: var(--accent); color: var(--accent-fg); padding: 2px 6px; border-radius: var(--r-1);}
.od .jj-plan-feats {list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px;}
.od .jj-plan-feats li {font-size: 12px; color: var(--fg-2); display: flex; align-items: center; gap: 7px;}
.od .jj-plan-feats li svg {width: 14px; height: 14px; color: var(--accent); flex: none;}
.od .jj-summary {background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-4); padding: 4px 16px;}
.od .jj-summary-row {display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--border-soft);}
.od .jj-summary-row:last-child {border-bottom: 0;}
.od .jj-summary-row .k {color: var(--muted);}
.od .jj-summary-row .v {font-weight: 550; color: var(--fg); text-align: right;}
.od .jj-setrow {display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border-soft);}
.od .jj-setrow:last-child {border-bottom: 0;}
.od .jj-setrow .jj-set-main {flex: 1; min-width: 0;}
.od .jj-setrow .jj-set-name {font-size: 13px; font-weight: 550; color: var(--fg);}
.od .jj-setrow .jj-set-desc {font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5;}
.od .jj-setrow .jj-set-ctl {flex: none;}
.od .jj-danger {border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent); border-radius: var(--r-3);
  background: color-mix(in oklab, var(--danger) 5%, var(--surface)); overflow: hidden;}
.od .jj-danger-h {padding: 11px 15px; font-size: 12.5px; font-weight: 600; color: var(--danger);
  border-bottom: 1px solid color-mix(in oklab, var(--danger) 22%, transparent);}
.od .jj-danger-row {display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--border-soft);}
.od .jj-danger-row:last-child {border-bottom: 0;}
.od .jj-danger-row .jj-dr-main {flex: 1; min-width: 0;}
.od .jj-danger-row .jj-dr-name {font-size: 13px; font-weight: 600; color: var(--fg);}
.od .jj-danger-row .jj-dr-desc {font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5;}
.od .jj-confirm {margin-top: 4px;}
.od .jj-confirm label {display: block; font-size: 12.5px; color: var(--fg-2); margin-bottom: 7px;}
.od .jj-confirm .jj-confirm-name {color: var(--danger); font-family: var(--font-mono);}
.od .jj-confirm input {width: 100%;}
.od .jj-statusdot {display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted);}
.od .jj-statusdot::before {content: ''; width: 6px; height: 6px; border-radius: 999px; flex: none; background: currentColor;}
.od .jj-statusdot.success {color: var(--success);}
.od .jj-statusdot.danger {color: var(--danger);}
.od .jj-statusdot.warning {color: var(--warning);}
.od .jj-statusdot.info {color: var(--accent-text);}
.od .jj-statusdot.muted {color: var(--muted);}
.od .jj-emptystate {max-width: 560px; margin: 34px auto; text-align: center;}
.od .jj-emptystate-ic {width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 16px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);}
.od .jj-emptystate-ic svg {width: 26px; height: 26px;}
.od .jj-emptystate h2 {font-size: 17px; font-weight: 600; margin: 0 0 7px; letter-spacing: -.01em;}
.od .jj-emptystate p {color: var(--muted); font-size: 13px; margin: 0 auto 18px; max-width: 46ch; line-height: 1.55;}
.od .jj-keyreveal {background: var(--surface-2); border: 1px solid color-mix(in oklab, var(--warning) 35%, var(--border)); border-radius: 9px; padding: 13px 14px;}
.od .jj-keyreveal-warn {display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--fg-2); margin-bottom: 11px;}
.od .jj-keyreveal-warn svg {width: 16px; height: 16px; color: var(--warning); flex: none; margin-top: 1px;}
.od .jj-keybox {display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 11px;}
.od .jj-keybox code {flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--fg); word-break: break-all;}
.od .jj-copy {flex: none;}
.od .jj-copy.done, .od .jj-copy.done:hover {background: var(--success); border-color: var(--success); color: #fff;}
.od .jj-timeline {display: flex; flex-direction: column;}
.od .jj-tl {display: flex; gap: 11px; padding: 0 0 16px; position: relative;}
.od .jj-tl::before {content: ''; position: absolute; left: 9.5px; top: 22px; bottom: -2px; width: 1.5px; background: var(--border);}
.od .jj-tl:last-child {padding-bottom: 0;}
.od .jj-tl:last-child::before {display: none;}
.od .jj-tl .jj-tl-dot {width: 20px; height: 20px; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); z-index: 1;}
.od .jj-tl .jj-tl-dot svg {width: 11px; height: 11px;}
.od .jj-tl .jj-tl-dot.accent {background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--accent-text);}
.od .jj-tl .jj-tl-dot.success {background: color-mix(in oklab, var(--success) 16%, transparent); border-color: transparent; color: var(--success);}
.od .jj-tl .jj-tl-dot.danger {background: color-mix(in oklab, var(--danger) 16%, transparent); border-color: transparent; color: var(--danger);}
.od .jj-tl .jj-tl-body {flex: 1; min-width: 0; padding-top: 1px;}
.od .jj-tl .jj-tl-text {font-size: 13px; color: var(--fg-2); line-height: 1.5;}
.od .jj-tl .jj-tl-text b {color: var(--fg); font-weight: 600;}
.od .jj-tl .jj-tl-time {font-size: 11.5px; color: var(--faint); margin-top: 2px; font-variant-numeric: tabular-nums;}
.od .jj-tl .jj-tl-head {display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;}
.od .jj-tl .jj-tl-who {font-size: 12.5px; font-weight: 600; color: var(--fg);}
.od .jj-tl .jj-tl-kind {font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-family: var(--font-mono);}
.od .jj-tl .jj-tl-head .jj-tl-time {margin-top: 0; margin-left: auto;}
.od .jj-tl .jj-tl-tags {margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px;}
.od .jj-tl .jj-tl-tag {font-size: 11px; padding: 2px 7px; border-radius: var(--r-1); background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-soft);}
.od .jj-tl .jj-tl-dot.warning {background: color-mix(in oklab, var(--warning) 16%, transparent); border-color: transparent; color: var(--warning);}
.od .jj-stat-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;}
.od .jj-stat {background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: 14px 16px; box-shadow: var(--card-shadow);}
.od .jj-stat .jj-stat-top {display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px;}
.od .jj-stat .jj-stat-ic {width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-2);}
.od .jj-stat .jj-stat-ic svg {width: 14px; height: 14px;}
.od .jj-stat .jj-stat-val {font-size: 23px; font-weight: 600; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums;}
.od .jj-stat .jj-stat-delta {font-size: 11.5px; margin-top: 3px; display: inline-flex; align-items: center; gap: 3px;}
.od .jj-stat .jj-stat-delta.up {color: var(--success);}
.od .jj-stat .jj-stat-delta.down {color: var(--danger);}
.od .jj-stat .jj-stat-delta.flat {color: var(--muted);}
.od .jj-drawer-scrim {position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);}
.od .jj-drawer-scrim.open {opacity: 1; visibility: visible;}
.od .jj-drawer {position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; z-index: 61;
  background: var(--surface); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-3) var(--ease-out);}
.od .jj-drawer.open {transform: none;}
.od .jj-drawer-h {display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); flex: none;}
.od .jj-drawer-h .jj-drawer-title {font-size: var(--text-md); font-weight: 600; flex: 1; min-width: 0;}
.od .jj-drawer-body {flex: 1; overflow-y: auto; padding: 18px;}
.od .jj-drawer-foot {display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border); flex: none;}
.od .jj-secret {display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-2); padding: 0 5px 0 10px;}
.od .jj-secret .jj-secret-val {flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
  padding: 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .04em;}
.od .jj-secret.empty .jj-secret-val {color: var(--faint); font-family: inherit; letter-spacing: 0;}
.od .jj-bulkbar {position: fixed; bottom: 22px; left: 50%; z-index: 55; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 16px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-4); box-shadow: var(--shadow-lg);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);}
.od .jj-bulkbar.open {opacity: 1; visibility: visible; transform: translateX(-50%);}
.od .jj-bulkbar .jj-bulk-count {font-size: 13px; font-weight: 600;}
.od .jj-bulkbar .jj-bulk-count b {color: var(--accent-text);}
.od .jj-bulkbar .jj-bulk-sep {width: 1px; height: 20px; background: var(--border);}
.od .jj-savebar {position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; z-index: 4;
  background: color-mix(in oklab, var(--surface) 82%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); margin-top: 8px;}
.od .jj-savebar .jj-save-note {flex: 1; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px;}
.od .jj-savebar .jj-dirty {width: 7px; height: 7px; border-radius: 999px; background: var(--warning); flex: none;}
.od .jj-live {position: relative; width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block;
  background: var(--success); color: var(--success);}
.od .jj-live.running {background: var(--warning); color: var(--warning);}
.od .jj-live.danger {background: var(--danger);  color: var(--danger);}
.od .jj-live::after {content: ''; position: absolute; inset: -3px; border-radius: 999px; border: 1.5px solid currentColor;
  opacity: .5; animation: od-jj-live-ring 1.8s var(--ease-out) infinite;}
@keyframes od-jj-live-ring { 0% { transform: scale(.7); opacity: .5; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .od .jj-live::after {animation: none;}
}
.od .jj-otp {display: flex; gap: 8px;}
.od .jj-otp input {width: 44px; height: 52px; text-align: center; font-family: var(--font-mono); font-size: 20px;
  font-weight: 600; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-2);
  outline: none; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);}
.od .jj-otp input:focus {border-color: var(--accent); box-shadow: var(--focus-ring);}
.od .jj-drop {display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-3); background: var(--surface-2); cursor: pointer; color: var(--muted);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);}
.od .jj-drop:hover, .od .jj-drop.over {border-color: var(--accent); background: var(--accent-soft); color: var(--fg-2);}
.od .jj-drop svg {width: 24px; height: 24px; color: var(--faint);}
.od .jj-drop .jj-drop-t {font-size: 13px; font-weight: 550; color: var(--fg-2);}
.od .jj-drop .jj-drop-d {font-size: 11.5px;}
.od .jj-uploadtile {display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px dashed var(--border-strong);
  border-radius: var(--r-3); cursor: pointer; background: var(--surface-2); color: var(--fg);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);}
.od .jj-uploadtile:hover {border-color: var(--accent); background: var(--accent-soft);}
.od .jj-uploadtile-ic {width: 42px; height: 42px; border-radius: var(--r-3); background: var(--surface-3); flex: none;
  display: grid; place-items: center; overflow: hidden; color: var(--muted);}
.od .jj-uploadtile-ic svg {width: 19px; height: 19px;}
.od .jj-uploadtile-ic img {width: 100%; height: 100%; object-fit: cover;}
.od .jj-uploadtile-t {font-size: 13px; font-weight: 600;}
.od .jj-uploadtile-d {font-size: 11.5px; color: var(--muted); margin-top: 2px;}
.od .jj-acc {border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; background: var(--surface);}
.od .jj-acc + .jj-acc {margin-top: 8px;}
.od .jj-acc-sum {display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 550;}
.od .jj-acc-sum::-webkit-details-marker {display: none;}
.od .jj-acc-sum .jj-acc-chev {margin-left: auto; color: var(--faint); transition: transform var(--dur-2) var(--ease-out); display: inline-flex;}
.od .jj-acc-sum .jj-acc-chev svg {width: 15px; height: 15px;}
.od .jj-acc[open] > .jj-acc-sum .jj-acc-chev {transform: rotate(90deg);}
.od .jj-acc-body {padding: 0 14px 14px; font-size: 12.5px; color: var(--muted);}
.od .jj-avstack {display: inline-flex; align-items: center;}
.od .jj-avstack .jj-av {width: 26px; height: 26px; border-radius: 999px; flex: none; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 600; color: #fff; border: 2px solid var(--surface); margin-left: -7px;}
.od .jj-avstack .jj-av:first-child {margin-left: 0;}
.od .jj-avstack .jj-av.more {background: var(--surface-3); color: var(--fg-2);}
.od .jj-rating {display: inline-flex; align-items: center; gap: 5px;}
.od .jj-rating .jj-stars {display: inline-flex; gap: 1px; color: var(--warning);}
.od .jj-rating .jj-stars svg {width: 13px; height: 13px;}
.od .jj-rating .jj-stars .empty {color: var(--border-strong);}
.od .jj-rating .jj-rate-n {font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;}
.od .jj-term {background: #0d1117; border: 1px solid var(--border-strong); border-radius: var(--r-3); overflow: hidden;}
.od .jj-term-h {display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #161b22; border-bottom: 1px solid #21262d;}
.od .jj-term-h .jj-term-dots {display: flex; gap: 6px;}
.od .jj-term-h .jj-term-dots i {width: 11px; height: 11px; border-radius: 999px; display: block;}
.od .jj-term-h .jj-term-title {font-family: var(--font-mono); font-size: 11.5px; color: #8b949e;}
.od .jj-term-b {padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: #c9d1d9; max-height: 320px; overflow-y: auto;}
.od .jj-term-b .ln {white-space: pre-wrap; word-break: break-word;}
.od .jj-term-b .ln-cmd::before {content: '$ '; color: #3fb950;}
.od .jj-term-b .ln-ok {color: #3fb950;}
.od .jj-term-b .ln-err {color: #f85149;}
.od .jj-term-b .ln-warn {color: #d29922;}
.od .jj-term-b .ln-muted {color: #6e7681;}
/* ---- juju terminal (.jterm) — shared dark macOS-style log terminal used by the
   ticket execution panel (terminal_panel/claude_terminal_panel) AND the cauldron
   CI build-log pane. Global so every surface reuses one component; ticket-only
   extras (.jterm-tools/.jterm-prog/.jterm-log/.jterm-banner) stay in od-ticket.css. */
.od .jterm {border-radius: 11px; overflow: hidden; background: #0a0c10; border: 1px solid #1c2230; box-shadow: 0 1px 0 rgba(255,255,255,.02) inset;}
.od .jterm-head {display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: #0f131b; border-bottom: 1px solid #1c2230;}
.od .jterm-dots {display: flex; gap: 6px;}
.od .jterm-dots i {width: 11px; height: 11px; border-radius: 99px; display: block;}
.od .jterm-dots i:nth-child(1) {background: #ef5f57;}
.od .jterm-dots i:nth-child(2) {background: #fdbc2e;}
.od .jterm-dots i:nth-child(3) {background: #29c841;}
.od .jterm-title {font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #8b95a7; margin-left: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.od .jterm-body {padding: 12px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 1.75; color: #c7d0de; max-height: 340px; overflow-y: auto;}
.od .jterm-body .ln {white-space: pre-wrap; word-break: break-word;}
.od .jterm-body .ts {display: none;}
.od .jterm-body .err .msg {color: #fca5a5;}
.od .jterm-body .warn .msg {color: #fcd34d;}
.od .jterm-body .ok .msg {color: #86efac;}
.od .jterm-body .info .msg {color: #93c5fd;}
.od .jterm-body .dim .msg {color: #5b6472;}
.od .jterm-body .caret {display: inline-block; width: 8px; height: 14px; background: #5cadff; vertical-align: text-bottom; margin-left: 2px; animation: od-tb 1s step-end infinite;}
@keyframes od-tb { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .od .jterm-body .caret { animation: none; } }
.od .jj-pwmeter {display: flex; flex-direction: column; gap: 6px;}
.od .jj-pwmeter .jj-pw-bars {display: flex; gap: 4px;}
.od .jj-pwmeter .jj-pw-bars i {flex: 1; height: 4px; border-radius: 999px; background: var(--surface-3); transition: background var(--dur-2) var(--ease-out);}
.od .jj-pwmeter .jj-pw-label {font-size: 11.5px; color: var(--muted);}
.od .jj-logomark, .od .jj-logoglyph {display: inline-block; flex: none;
  width: var(--logo-size, 1.3em); height: var(--logo-size, 1.3em);
  
  background: url("../assets/juhjuh-logo-dark.1b890d4d369f.png") center / contain no-repeat;}
.od .jj-logomark, .od .jj-logoglyph {background-image: url("../assets/juhjuh-logo-light.fae92e7b0cd0.png");}
.od .brand-mark:has(> .jj-logomark), .od .brand-mark:has(> .jj-logoglyph), .od .logo:has(> .jj-logomark), .od .logo:has(> .jj-logoglyph) {background: transparent !important; border: 0 !important; box-shadow: none !important;}
.od .brand-mark > .jj-logomark, .od .brand-mark > .jj-logoglyph, .od .logo > .jj-logomark, .od .logo > .jj-logoglyph {width: 100% !important; height: 100% !important;}
.od a.jj-logolink {text-decoration: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-2, .15s) var(--ease-out, ease);}
.od a.jj-logolink:hover {opacity: .82;}
.od a.jj-logolink:focus-visible {outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;}
.od .jj-meter {display: flex; align-items: center; gap: 11px; margin-top: 11px;}
.od .jj-meter:first-child {margin-top: 0;}
.od .jj-meter .jj-m-label {width: 120px; flex: none; font-size: 12px; color: var(--muted);}
.od .jj-meter .jj-m-track {flex: 1; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden;}
.od .jj-meter .jj-m-track > i {display: block; height: 100%; border-radius: var(--r-full); background: var(--m-color, var(--accent)); width: 0; transition: width .3s var(--ease-out);}
.od .jj-meter .jj-m-value {width: 92px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 12.5px; font-weight: 550;}
.od .jj-meter.ok {--m-color: var(--success);}
.od .jj-meter.warn {--m-color: var(--warning);}
.od .jj-meter.crit {--m-color: var(--danger);}
.od .jj-meter.ok .jj-m-value {color: var(--success);}
.od .jj-meter.warn .jj-m-value {color: var(--warning);}
.od .jj-meter.crit .jj-m-value {color: var(--danger);}
.od .jj-meter.bare .jj-m-track {visibility: hidden;}
.od .jj-insight {border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-4); box-shadow: var(--card-shadow); padding: 16px 18px; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);}
.od .jj-insight:hover {border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px);}
.od .jj-insight .ji-top {display: flex; align-items: center; gap: 10px;}
.od .jj-insight .ji-cat {width: 30px; height: 30px; flex: none; border-radius: var(--r-2); display: grid; place-items: center; background: var(--surface-2); color: var(--muted);}
.od .jj-insight .ji-cat svg {width: 16px; height: 16px;}
.od .jj-insight .ji-title {font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; flex: 1; min-width: 0;}
.od .jj-insight .ji-sev {font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--r-full); white-space: nowrap;}
.od .jj-insight .ji-sev.crit {color: #fff; background: var(--danger);}
.od .jj-insight .ji-sev.warn {color: var(--warning); background: color-mix(in oklab, var(--warning) 15%, var(--surface));}
.od .jj-insight .ji-sev.info {color: var(--info); background: color-mix(in oklab, var(--info) 14%, var(--surface));}
.od .jj-insight .ji-sev.opt {color: var(--success); background: color-mix(in oklab, var(--success) 14%, var(--surface));}
.od .jj-insight .ji-conf {font-size: 11px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;}
.od .jj-insight .ji-conf b {color: var(--fg-2); font-weight: 600;}
.od .jj-insight .ji-hyp {font-size: 13px; color: var(--fg-2); line-height: 1.55; margin: 11px 0 0;}
.od .jj-insight .ji-hyp .ai-tag {font-size: 10px; font-weight: 600; color: var(--accent-text); text-transform: uppercase; letter-spacing: .04em; margin-right: 6px;}
.od .jj-insight .ji-ev {display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px;}
.od .jj-insight .ji-ev a, .od .jj-insight .ji-ev > span {display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 4px 9px; border-radius: var(--r-2); border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--fg-2); text-decoration: none; font-family: var(--font-mono);}
.od .jj-insight .ji-ev a:hover {border-color: var(--border-strong); color: var(--fg);}
.od .jj-insight .ji-ev svg {width: 13px; height: 13px; flex: none; color: var(--faint);}
.od .jj-insight .ji-reco {margin-top: 13px; background: var(--surface-2); border-radius: var(--r-2); padding: 12px 14px;}
.od .jj-insight .ji-reco-h {display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint);}
.od .jj-insight .ji-risk {font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-full);}
.od .jj-insight .ji-risk.low {color: var(--success); background: color-mix(in oklab, var(--success) 13%, var(--surface));}
.od .jj-insight .ji-risk.med {color: var(--warning); background: color-mix(in oklab, var(--warning) 14%, var(--surface));}
.od .jj-insight .ji-risk.high {color: var(--danger);  background: color-mix(in oklab, var(--danger) 14%, var(--surface));}
.od .jj-insight .ji-reco p {font-size: 13px; color: var(--fg); margin: 7px 0 0; line-height: 1.5;}
.od .jj-insight .ji-acts {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;}
.od .jj-pager {display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px;}
.od .jj-pager .jj-pg-info {font-size: 12.5px; color: var(--muted);}
.od .jj-pager .jj-pg-info b {color: var(--fg-2); font-weight: 600; font-variant-numeric: tabular-nums;}
.od .jj-pager .jj-pg-nav {display: flex; align-items: center; gap: 4px; margin-left: auto;}
.od .jj-pg-btn {min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); border-radius: var(--r-2);
  font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .12s var(--ease-out), background .12s var(--ease-out), color .12s var(--ease-out);}
.od .jj-pg-btn:hover:not(:disabled):not(.on) {border-color: var(--border-strong); color: var(--fg);}
.od .jj-pg-btn.on {background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; cursor: default;}
.od .jj-pg-btn:disabled {opacity: .4; cursor: not-allowed;}
.od .jj-pg-btn:focus-visible {outline: none; box-shadow: var(--focus-ring);}
.od .jj-pg-btn svg {width: 15px; height: 15px;}
.od .jj-pg-gap {min-width: 22px; text-align: center; color: var(--faint); font-size: 12.5px; user-select: none;}
.od .jj-pager .jj-pg-size {display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted);}
.od .jj-pager .jj-pg-size .select {height: 30px; padding: 0 26px 0 9px; font-size: 12.5px;}
.od .jj-loadmore {display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px;}
.od .jj-loadmore .jj-lm-info {font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums;}
.od .jj-lm-btn {display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--fg); border-radius: var(--r-full); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color .12s var(--ease-out), background .12s var(--ease-out);}
.od .jj-lm-btn:hover {border-color: var(--accent); color: var(--accent-text);}
.od .jj-lm-btn:focus-visible {outline: none; box-shadow: var(--focus-ring);}
.od .jj-lm-btn svg {width: 15px; height: 15px;}
.od .jj-loadmore.done .jj-lm-btn {display: none;}
.od .jj-loadmore.loading .jj-lm-btn {pointer-events: none; opacity: .7;}
.od .jj-loadmore.loading .jj-lm-spin {display: inline-flex;}
.od .jj-lm-spin {display: none; width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: od-jj-lm-rot .6s linear infinite;}
@keyframes od-jj-lm-rot { to { transform: rotate(360deg); } }
.od .jj-lm-skel {height: 64px; border-radius: var(--r-3); border: 1px solid var(--border); background:
  linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 200% 100%;
  animation: od-jj-lm-shim 1.1s ease-in-out infinite;}
@keyframes od-jj-lm-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.od .jj-lm-in {animation: od-jj-lm-enter .32s var(--ease-out) both;}
@keyframes od-jj-lm-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .od .jj-lm-spin, .od .jj-lm-skel {animation: none;}
  .od .jj-lm-in {animation: none;}
}
.od .jj-segbar {display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--surface-3); width:100%;}
.od .jj-segbar i {display:block; height:100%;}
.od .jj-segbar i.ok {background:var(--success);}
.od .jj-segbar i.run {background:var(--warning);}
.od .jj-segbar i.fail {background:var(--danger);}
.od .jj-segbar i.skip {background:var(--muted);}
.od .jj-segbar-legend {display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:12px; color:var(--muted);}
.od .jj-segbar-legend span {display:inline-flex; align-items:center; gap:6px;}
.od .jj-segbar-legend span::before {content:''; width:8px; height:8px; border-radius:2px; background:var(--muted);}
.od .jj-segbar-legend span.ok::before {background:var(--success);}
.od .jj-segbar-legend span.run::before {background:var(--warning);}
.od .jj-segbar-legend span.fail::before {background:var(--danger);}
.od .jj-segbar-legend span.skip::before {background:var(--muted);}
.od .skel {position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-1);}
.od .skel::after {content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 8%, transparent), transparent);
  animation: od-jj-skel 1.3s ease-in-out infinite;}
@keyframes od-jj-skel { 100% { transform: translateX(100%); } }
.od .skel-line {height: 11px; border-radius: var(--r-1);}
.od .skel-line.sm {height: 9px;}
.od .skel-line.lg {height: 15px;}
.od .skel-circle {border-radius: var(--r-full); flex: none;}
.od .skel-block {border-radius: var(--r-3);}
.od .skel-card {border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface); padding: 15px;}
.od .skel-card .sk-head {display: flex; gap: 11px; align-items: center; margin-bottom: 14px;}
.od .skel-card .sk-body {display: flex; flex-direction: column; gap: 9px;}
.od .skel-card .sk-foot {display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border-soft);}
.od .skel-trow td {padding: 13px 14px;}
@media (prefers-reduced-motion: reduce) {
  .od .skel::after {animation: none;}
}
.od .spinner {display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: od-jj-spin .6s linear infinite; vertical-align: middle;}
.od .spinner.sm {width: 14px; height: 14px;}
.od .spinner.lg {width: 28px; height: 28px; border-width: 3px;}
.od .spinner.on-accent {border-color: color-mix(in oklab, var(--accent-fg) 40%, transparent); border-top-color: var(--accent-fg);}
@keyframes od-jj-spin { to { transform: rotate(360deg); } }
.od .loading-pane {display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 20px; color: var(--muted); font-size: var(--text-sm);}
@media (prefers-reduced-motion: reduce) {
  .od .spinner {animation-duration: 1.3s;}
}
.od .modal.notify {max-width: 400px; text-align: center; padding: 26px 24px 22px;}
.od .notify-ic {width: 50px; height: 50px; border-radius: var(--r-full); display: grid; place-items: center;
  margin: 0 auto 15px; background: var(--surface-3); color: var(--fg-2);}
.od .notify-ic svg {width: 25px; height: 25px;}
.od .modal.notify.success .notify-ic {background: color-mix(in oklab, var(--success) 16%, transparent); color: var(--success);}
.od .modal.notify.danger .notify-ic, .od .modal.notify.error .notify-ic {background: color-mix(in oklab, var(--danger) 16%, transparent); color: var(--danger);}
.od .modal.notify.warning .notify-ic {background: color-mix(in oklab, var(--warning) 18%, transparent); color: var(--warning);}
.od .modal.notify.info .notify-ic {background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-text);}
.od .notify-title {font-size: 16px; font-weight: 600; color: var(--fg); letter-spacing: -.01em;}
.od .notify-msg {font-size: var(--text-sm); color: var(--muted); margin-top: 7px; line-height: 1.5;}
.od .notify-foot {display: flex; gap: 8px; justify-content: center; margin-top: 20px;}
.od .notify-foot .btn {min-width: 96px;}
.od .modal.celebrate {max-width: 380px; text-align: center; padding: 30px 26px 24px;}
.od .modal.celebrate.celebrate-pop {animation: od-celebrate-pop 320ms cubic-bezier(.16,1,.3,1) both;}
@keyframes od-celebrate-pop { 0% { opacity: 0; transform: scale(.92) translateY(8px); } 100% { opacity: 1; transform: none; } }
.od .celebrate-ic {width: 58px; height: 58px; border-radius: var(--r-full); display: grid; place-items: center;
  margin: 0 auto 16px; background: color-mix(in oklab, var(--accent) 15%, transparent); color: var(--accent-text);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);}
.od .celebrate-ic svg {width: 28px; height: 28px;}
.od .celebrate-kicker {font-size: var(--text-sm); color: var(--muted);}
.od .celebrate-title {font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-text); margin-top: 2px;}
.od .celebrate-msg {font-size: var(--text-sm); color: var(--muted); margin-top: 9px; line-height: 1.5;}
.od .confetti-layer {position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 95;}
.od .confetti-piece {position: absolute; top: -18px; width: 8px; height: 14px; border-radius: 1px;
  animation: od-confetti-fall linear forwards;}
@keyframes od-confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(96vh) rotate(600deg); } }
@media (prefers-reduced-motion: reduce) {
  .od .confetti-piece {display: none;}
  .od .modal.celebrate.celebrate-pop {animation: none;}
}
.od .jj-shot {border: 1px solid var(--border-strong); border-radius: var(--r-5); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-overlay);}
.od .jj-shot .jj-shot-bar {display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);}
.od .jj-shot .jj-shot-bar i {width: 10px; height: 10px; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--border-strong);}
.od .jj-shot .jj-shot-url {margin-left: 10px; font-family: var(--font-mono);
  font-size: 11px; color: var(--faint);}
.od .jj-shot > img {display: block; width: 100%; height: auto;}
.od .jj-grad {background: linear-gradient(96deg, var(--accent-text), color-mix(in oklab, var(--accent-text) 55%, var(--fg)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.od .jj-reveal {opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.od .jj-reveal.in {opacity: 1; transform: none;}
.od .jj-reveal[data-d="1"] {transition-delay: .07s;}
.od .jj-reveal[data-d="2"] {transition-delay: .14s;}
.od .jj-reveal[data-d="3"] {transition-delay: .21s;}
.od .jj-reveal[data-d="4"] {transition-delay: .28s;}
@media (prefers-reduced-motion: reduce) {
  .od .jj-reveal {transition: none; opacity: 1; transform: none;}
}
.od .jj-feature {border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface); padding: 20px;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);}
.od .jj-feature:hover {border-color: var(--border-strong); transform: translateY(-2px);}
.od .jj-feature .jj-feature-ic {width: 36px; height: 36px; border-radius: var(--r-2); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);}
.od .jj-feature .jj-feature-ic svg {width: 18px; height: 18px;}
.od .jj-feature h3 {font-size: 15px; font-weight: 600; margin: 16px 0 0; letter-spacing: -.01em;}
.od .jj-feature p {font-size: 13px; color: var(--muted); margin: 7px 0 0; line-height: 1.55;}
.od .jj-statepill {display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 5px 11px; background: var(--surface);}
.od .jj-statepill .d {width: 6px; height: 6px; border-radius: var(--r-full); background: var(--faint);}
.od .jj-statepill.on {color: var(--accent-text); border-color: color-mix(in oklab, var(--accent) 36%, transparent); background: var(--accent-soft);}
.od .jj-statepill.on .d {background: var(--accent);}
.od .jj-statepill.done {color: var(--success); border-color: color-mix(in oklab, var(--success) 32%, transparent);}
.od .jj-statepill.done .d {background: var(--success);}
.od a.jj-feature {display: block; text-decoration: none; color: inherit;}
.od .jj-feature .jj-go {margin-top: 14px; font-size: 12.5px; color: var(--accent-text);
  display: inline-flex; align-items: center; gap: 5px; font-weight: 500;}
.od .jj-feature .jj-go svg {width: 13px; height: 13px; transition: transform var(--dur-2) var(--ease-out);}
.od a.jj-feature:hover .jj-go svg {transform: translateX(3px);}
.od .jj-showcase-tabs {display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 24px;}
.od .jj-showcase-tab {font: inherit; font-size: 13px; font-weight: 540; color: var(--muted); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-full);
  padding: 8px 15px; display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);}
.od .jj-showcase-tab:hover {color: var(--fg); border-color: var(--border-strong);}
.od .jj-showcase-tab .d {width: 6px; height: 6px; border-radius: var(--r-full); background: var(--faint);
  transition: background var(--dur-2) var(--ease-out);}
.od .jj-showcase-tab.is-active {color: var(--accent-text); background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 36%, transparent);}
.od .jj-showcase-tab.is-active .d {background: var(--accent);}
.od .jj-showcase-stage {position: relative; max-width: 1080px; margin: 0 auto;}
.od .jj-showcase-stage::after {content: ""; position: absolute; inset: -8% 4% -22%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 30%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%);
  filter: blur(8px);}
.od .jj-showcase-frames {position: relative; aspect-ratio: 16 / 10; background: var(--bg-subtle);}
.od .jj-showcase-frames img {position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; opacity: 0;
  transition: opacity var(--dur-4) var(--ease-out);}
.od .jj-showcase-frames img.is-active {opacity: 1;}
.od .jj-showcase-cap {text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); min-height: 1.2em;}
.od .jj-flow {overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.od .jj-flow::-webkit-scrollbar {display: none;}
.od .jj-flow-track {position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-width: 760px; max-width: 960px; margin: 0 auto; padding: 12px 6px;}
.od .jj-flow-track::before {content: ""; position: absolute; left: 28px; right: 28px; top: 50%; height: 2px;
  transform: translateY(-50%); background: var(--border); z-index: 0;}
.od .jj-flow-track::after {content: ""; position: absolute; left: 28px; right: 28px; top: 50%; height: 2px;
  transform: translateY(-50%); z-index: 0; border-radius: var(--r-full);
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  background-size: 28% 100%; background-repeat: no-repeat;
  animation: od-jj-flow-run 3s linear infinite;}
@keyframes od-jj-flow-run { from { background-position: -12% 0; } to { background-position: 112% 0; } }
.od .jj-flow-track .jj-statepill {position: relative; z-index: 1;}
@media (prefers-reduced-motion: reduce) {
  .od .jj-flow-track::after {animation: none; opacity: 0;}
}
.od .jj-flownode {display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px;
  font-size: 11px; font-weight: 550; border: 1px solid transparent; flex: none; white-space: nowrap;}
.od .jj-flownode svg {width: 12px; height: 12px;}
.od .jj-flowlink {width: 14px; height: 2px; background: var(--border-strong); flex: none;}
.od .jj-flownode.c-trigger {color: #D98A1F; background: color-mix(in oklab, #D98A1F 14%, transparent);}
.od .jj-flownode.c-ai {color: var(--accent-text); background: var(--accent-soft);}
.od .jj-flownode.c-logic {color: #0E8A8A; background: color-mix(in oklab, #0E8A8A 14%, transparent);}
.od .jj-flownode.c-integration {color: #1F8A4C; background: color-mix(in oklab, #1F8A4C 14%, transparent);}
.od .jj-flownode.c-action {color: #0E7C86; background: color-mix(in oklab, #0E7C86 14%, transparent);}
.od .jj-flownode.c-output {color: var(--success); background: color-mix(in oklab, var(--success) 15%, transparent);}
.od .jj-charmnode {position: relative; width: 212px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 13px; overflow: hidden;}
.od .jj-charmnode::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--nc, var(--accent)); opacity: .7;}
.od .jj-charmnode-h {display: flex; align-items: center; gap: 8px; padding: 9px 11px 9px 12px;}
.od .jj-charmnode-ic {width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center;}
.od .jj-charmnode-ic svg {width: 15px; height: 15px;}
.od .jj-charmnode-tt {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.15;}
.od .jj-charmnode-t {font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.od .jj-charmnode-sub {font-size: 9.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.od .jj-charmnode-sub.trg {font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--nc, var(--accent)); opacity: .85;}
.od .jj-charmnode-cat {margin-left: auto; font-size: 9px; font-family: var(--font-mono); text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; flex: none;}
.od .jj-charmnode.c-trigger {--nc: #D98A1F;}
.od .jj-charmnode.c-ai {--nc: var(--accent-text);}
.od .jj-charmnode.c-logic {--nc: #0E8A8A;}
.od .jj-charmnode.c-integration {--nc: #1F8A4C;}
.od .jj-charmnode.c-action {--nc: #0E7C86;}
.od .jj-charmnode.c-output {--nc: var(--success);}
.od .jj-charmnode-ic.c-trigger {color: #D98A1F; background: color-mix(in oklab, #D98A1F 14%, transparent);}
.od .jj-charmnode-ic.c-ai {color: var(--accent-text); background: var(--accent-soft);}
.od .jj-charmnode-ic.c-logic {color: #0E8A8A; background: color-mix(in oklab, #0E8A8A 14%, transparent);}
.od .jj-charmnode-ic.c-integration {color: #1F8A4C; background: color-mix(in oklab, #1F8A4C 14%, transparent);}
.od .jj-charmnode-ic.c-action {color: #0E7C86; background: color-mix(in oklab, #0E7C86 14%, transparent);}
.od .jj-charmnode-ic.c-output {color: var(--success); background: color-mix(in oklab, var(--success) 15%, transparent);}
.od .jj-charmnode-cat.c-trigger {color: #D98A1F; background: color-mix(in oklab, #D98A1F 14%, transparent);}
.od .jj-charmnode-cat.c-ai {color: var(--accent-text); background: var(--accent-soft);}
.od .jj-charmnode-cat.c-logic {color: #0E8A8A; background: color-mix(in oklab, #0E8A8A 14%, transparent);}
.od .jj-charmnode-cat.c-integration {color: #1F8A4C; background: color-mix(in oklab, #1F8A4C 14%, transparent);}
.od .jj-charmnode-cat.c-action {color: #0E7C86; background: color-mix(in oklab, #0E7C86 14%, transparent);}
.od .jj-charmnode-cat.c-output {color: var(--success); background: color-mix(in oklab, var(--success) 15%, transparent);}
.od .jj-charmnode--rich {width: 212px;}
.od .jj-charmnode--rich .jj-charmnode-h {border-bottom: 1px solid var(--border-soft);}
.od .jj-charmnode-num {width: 17px; height: 17px; border-radius: 5px; flex: none; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; font-family: var(--font-mono); color: var(--faint);
  background: var(--bg-subtle); border: 1px solid var(--border-soft);}
.od .jj-charmnode-body {padding: 9px 11px 9px 12px; font-size: 11.5px; color: var(--muted); line-height: 1.45; min-height: 14px;}
.od .jj-charmnode-body b {color: var(--fg); font-weight: 500;}
.od .jj-charmnode-work {display: none; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px;
  font-weight: 500; letter-spacing: .02em; color: var(--nc, var(--accent-text));}
.od .jj-charmnode-work::before {content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: od-jj-charmwork 1.05s ease-in-out infinite;}
@keyframes od-jj-charmwork { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .od .jj-charmnode-work::before {animation: none;}
}
.od .jj-charmnode-io {border-top: 1px solid var(--border-soft); padding: 7px 11px; display: flex; flex-direction: column; gap: 6px;}
.od .jj-charmnode-iorow {display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.od .jj-charmnode-iok {font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); flex: none;}
.od .jj-charmnode-iopill {display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-subtle); border: 1px solid var(--border-soft); color: var(--fg);
  max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.od .jj-charmnode-iopill.out {background: color-mix(in oklab, var(--success) 12%, transparent); border-color: color-mix(in oklab, var(--success) 30%, transparent);}
.od .jj-charmnode-pd {width: 6px; height: 6px; border-radius: 999px; flex: none;}
.od .jj-charmnode-iobr {font-size: 8.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .03em; margin-left: 5px;
  padding: 0 4px; border-radius: 4px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent-text);}
.od .jj-legal {display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 48px; align-items: start; margin-top: 8px;}
.od .jj-legal-toc {position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px;}
.od .jj-legal-toc a {font-size: 13px; color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: var(--r-2);
  border-left: 2px solid transparent; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);}
.od .jj-legal-toc a:hover {color: var(--fg);}
.od .jj-legal-toc a.active {color: var(--fg); border-left-color: var(--accent); background: var(--surface);}
.od .jj-legal-body {max-width: 720px;}
.od .jj-legal-sec {padding-top: 8px; margin-bottom: 36px; scroll-margin-top: 88px;}
.od .jj-legal-sec h2 {font-size: clamp(18px,2vw,22px); letter-spacing: -.01em; margin: 0 0 14px; display: flex; gap: 10px; align-items: baseline;}
.od .jj-legal-n {font-family: var(--font-mono); font-size: 13px; color: var(--accent-text);}
.od .jj-legal-sec h3 {font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--fg-2);}
.od .jj-legal-sec p, .od .jj-legal-sec li {color: var(--muted); font-size: 14.5px; line-height: 1.65;}
.od .jj-legal-sec p {margin: 0 0 12px;}
.od .jj-legal-sec ul {margin: 0 0 12px; padding-left: 20px; display: grid; gap: 7px;}
.od .jj-legal-sec a {color: var(--accent-text); text-decoration: none;}
.od .jj-legal-sec a:hover {text-decoration: underline;}
.od .jj-legal-sec b {color: var(--fg-2); font-weight: 600;}
.od .jj-legal-callout {border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--r-3);
  background: var(--surface); padding: 14px 16px; margin: 4px 0 12px; font-size: 14px; color: var(--fg-2);}
.od .jj-legal-updated {font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 18px;}
@media (max-width: 860px) {
  .od .jj-legal {grid-template-columns: 1fr; gap: 24px;}
  .od .jj-legal-toc {position: static; flex-direction: row; flex-wrap: wrap; gap: 6px;}
  .od .jj-legal-toc a {border-left: 0; border: 1px solid var(--border);}
}