/* ============================================================
   TicketsToolCloClo — project theme and app shell
   Framework rule: colours only through variables. This file
   redefines the palette (dark-first, light available) and adds
   the board's own components. Design: IA_MD/inspiration/boards.md
   ============================================================ */

/* ── Palette: dark (default) ──────────────────────────────── */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-primary:         #6f7bff;
    --color-primary-hover:   #8b95ff;
    --color-primary-active:  #5e6ad2;
    --color-primary-light:   #9aa3ff;
    --color-primary-lighter: rgba(111, 123, 255, 0.16);
    --color-primary-dark:    #4f59c4;

    --color-ai:              #2dd4bf;
    --color-ai-bg:           rgba(45, 212, 191, 0.14);
    --color-ai-text:         #7ff2e2;

    --color-bg:              #0f1011;
    --color-bg-card:         #151617;
    --color-bg-muted:        #1b1c1e;
    --color-bg-elevated:     #1f2124;
    --color-bg-overlay:      rgba(0, 0, 0, 0.6);
    --color-bg-hover:        rgba(255, 255, 255, 0.04);

    --color-text:            #f7f8f8;
    --color-text-muted:      #8a8f98;
    --color-text-light:      #5f646d;
    --color-text-on-primary: #ffffff;
    --color-text-on-primary-light: #dfe2ff;
    --color-text-link:       var(--color-primary-light);
    --color-text-link-hover: #ffffff;

    --color-border:          #26282b;
    --color-border-strong:   #33363a;
    --color-border-focus:    var(--color-primary);

    --color-navbar-bg:       var(--color-bg-card);
    --color-navbar-text:     var(--color-text);
    --color-navbar-link:     var(--color-text-muted);
    --color-navbar-link-hover: var(--color-text);
    --color-navbar-brand:    var(--color-text);

    --color-footer-bg:       var(--color-bg);
    --color-footer-text:     var(--color-text-light);
    --color-footer-link:     var(--color-text-muted);

    --color-btn-primary-bg:      var(--color-primary);
    --color-btn-primary-hover:   var(--color-primary-hover);
    --color-btn-primary-active:  var(--color-primary-active);
    --color-btn-secondary-bg:    var(--color-bg-elevated);
    --color-btn-secondary-text:  var(--color-text);
    --color-btn-secondary-hover: #2a2d31;
    --color-btn-outline-border:  var(--color-border-strong);
    --color-btn-outline-text:    var(--color-text);
    --color-btn-outline-hover-bg: var(--color-bg-elevated);
    --color-btn-outline-hover-text: var(--color-text);
    --color-btn-ghost-text:      var(--color-text-muted);
    --color-btn-ghost-hover-bg:  var(--color-bg-hover);
    --color-btn-danger-bg:       #ef4444;
    --color-btn-danger-hover:    #dc2626;
    --color-btn-success-bg:      #22c55e;
    --color-btn-success-hover:   #16a34a;

    --color-success:        #22c55e;
    --color-success-bg:     rgba(34, 197, 94, 0.14);
    --color-success-border: rgba(34, 197, 94, 0.35);
    --color-success-text:   #86efac;
    --color-error:          #ef4444;
    --color-error-bg:       rgba(239, 68, 68, 0.14);
    --color-error-border:   rgba(239, 68, 68, 0.35);
    --color-error-text:     #fca5a5;
    --color-warning:        #f59e0b;
    --color-warning-bg:     rgba(245, 158, 11, 0.14);
    --color-warning-border: rgba(245, 158, 11, 0.35);
    --color-warning-text:   #fcd34d;
    --color-info:           #3b82f6;
    --color-info-bg:        rgba(59, 130, 246, 0.14);
    --color-info-border:    rgba(59, 130, 246, 0.35);
    --color-info-text:      #93c5fd;
    --color-neutral:        #6b7280;
    --color-neutral-bg:     rgba(107, 114, 128, 0.16);
    --color-neutral-text:   #b3b8c2;
    --color-purple:         #a78bfa;
    --color-purple-bg:      rgba(167, 139, 250, 0.14);
    --color-purple-text:    #d6ccff;

    --color-input-bg:           var(--color-bg);
    --color-input-text:         var(--color-text);
    --color-input-border:       var(--color-border-strong);
    --color-input-focus-border: var(--color-primary);
    --color-input-focus-shadow: rgba(111, 123, 255, 0.2);
    --color-input-placeholder:  var(--color-text-light);
    --color-label:              var(--color-text-muted);

    --color-table-header-bg:   var(--color-bg-muted);
    --color-table-header-text: var(--color-text-muted);
    --color-table-border:      var(--color-border);
    --color-table-row-hover:   var(--color-bg-hover);
    --color-table-stripe:      transparent;

    --color-badge-default-bg:   var(--color-neutral-bg);
    --color-badge-default-text: var(--color-neutral-text);
    --color-status-open-bg:          var(--color-neutral-bg);
    --color-status-open-text:        var(--color-neutral-text);
    --color-status-in_progress-bg:   var(--color-info-bg);
    --color-status-in_progress-text: var(--color-info-text);
    --color-status-closed-bg:        var(--color-success-bg);
    --color-status-closed-text:      var(--color-success-text);

    --color-sidebar-bg:          var(--color-bg-card);
    --color-sidebar-text:        var(--color-text-muted);
    --color-sidebar-link:        var(--color-text-muted);
    --color-sidebar-link-hover:  var(--color-text);
    --color-sidebar-link-active: var(--color-text);
    --color-sidebar-active-bg:   var(--color-bg-elevated);
    --color-sidebar-border:      var(--color-border);
    --color-sidebar-heading:     var(--color-text-light);
    --color-sidebar-icon:        var(--color-text-light);
    --color-sidebar-icon-active: var(--color-text);

    --font-family:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
    --font-size-base:   0.875rem;   /* 14px — dense, readable */
    --font-size-sm:     0.8125rem;  /* 13px lists */
    --font-size-xs:     0.6875rem;  /* 11px metadata */
    --line-height:      1.5;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow:    0 2px 6px rgba(0,0,0,0.45);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
    --shadow-xl: 0 24px 60px rgba(0,0,0,0.6);

    --sidebar-width:    240px;
    --sidebar-width-sm: 56px;
    --topbar-height:    48px;
    --radius:           6px;
    --radius-md:        8px;
    --radius-lg:        10px;
}

/* ── Palette: light ───────────────────────────────────────── */
:root[data-theme="light"] {
    color-scheme: light;
    --color-primary:         #5e6ad2;
    --color-primary-hover:   #4f59c4;
    --color-primary-active:  #434cab;
    --color-primary-light:   #7c86e6;
    --color-primary-lighter: rgba(94, 106, 210, 0.12);
    --color-ai:              #0d9488;
    --color-ai-bg:           rgba(13, 148, 136, 0.12);
    --color-ai-text:         #0f766e;
    --color-bg:              #f6f7f9;
    --color-bg-card:         #ffffff;
    --color-bg-muted:        #f0f1f4;
    --color-bg-elevated:     #ffffff;
    --color-bg-overlay:      rgba(15, 16, 17, 0.45);
    --color-bg-hover:        rgba(0, 0, 0, 0.035);
    --color-text:            #1a1b1e;
    --color-text-muted:      #6b7280;
    --color-text-light:      #9ca3af;
    --color-text-link:       var(--color-primary);
    --color-text-link-hover: var(--color-primary-hover);
    --color-border:          #e5e7eb;
    --color-border-strong:   #d1d5db;
    --color-btn-secondary-bg:    #eef0f3;
    --color-btn-secondary-text:  var(--color-text);
    --color-btn-secondary-hover: #e3e6ea;
    --color-success-text:   #166534;
    --color-error-text:     #991b1b;
    --color-warning-text:   #92400e;
    --color-info-text:      #1e40af;
    --color-neutral-text:   #4b5563;
    --color-purple-text:    #5b21b6;
    --color-input-bg:       #ffffff;
    --color-input-focus-shadow: rgba(94, 106, 210, 0.18);
    --color-sidebar-bg:     #ffffff;
    --color-sidebar-active-bg: #eef0f3;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow:    0 2px 6px rgba(0,0,0,0.07);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 16px 40px rgba(0,0,0,0.1);
    --shadow-xl: 0 24px 60px rgba(0,0,0,0.12);
}

/* ── Base tweaks ──────────────────────────────────────────── */
html { height: 100%; }
body.app-body { min-height: 100vh; display: block; }
h1, h2, h3 { letter-spacing: var(--letter-spacing-tight); }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { color: var(--color-text-link-hover); }
::selection { background: var(--color-primary-lighter); }
code, kbd, .mono { font-family: var(--font-family-mono); font-size: 0.85em; }
.icon { font-size: 18px; }
.icon--ai { color: var(--color-ai); }
[hidden] { display: none !important; }

.btn { padding: 0.4rem 0.75rem; font-size: var(--font-size-sm); border-radius: var(--radius); }
.btn--sm { padding: 0.25rem 0.55rem; font-size: var(--font-size-xs); }
.btn--icon { width: 30px; height: 30px; padding: 0; }
.btn .icon { font-size: 16px; }
.form-group { margin-bottom: var(--space-4); }
.form-group label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-label); font-weight: var(--font-weight-medium); }
.form-group input, .form-group select, .form-group textarea { font-size: var(--font-size-sm); padding: 0.45rem 0.6rem; }
.form-group textarea { min-height: 120px; font-family: var(--font-family); line-height: 1.5; }
.form-group textarea.mono { font-family: var(--font-family-mono); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
.msg { font-size: var(--font-size-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); }

/* ── Auth page ────────────────────────────────────────────── */
body.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, var(--color-primary-lighter), transparent 60%), var(--color-bg); }
.auth-box--cc { max-width: 380px; padding: var(--space-8); }
.auth-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.auth-brand__name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); letter-spacing: var(--letter-spacing-tight); }
.auth-brand__name b { color: var(--color-primary-light); font-weight: var(--font-weight-semibold); }
.auth-brand__sub { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.auth-footer { margin-top: var(--space-5); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; }

/* ── App shell ────────────────────────────────────────────── */
.sb {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width);
    background: var(--color-sidebar-bg); border-right: 1px solid var(--color-sidebar-border);
    display: flex; flex-direction: column; z-index: var(--z-sidebar);
    transition: width var(--transition-medium), transform var(--transition-medium);
    overflow: hidden;
}
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin var(--transition-medium); }
.topbar { position: sticky; top: 0; z-index: var(--z-nav); height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); background: color-mix(in srgb, var(--color-bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.topbar__menu { display: none; background: none; border: 0; color: var(--color-text-muted); cursor: pointer; }
.topbar__actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); min-width: 0; }
.crumbs a { color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.crumbs a:hover { color: var(--color-text); }
.crumbs__sep { color: var(--color-text-light); }
.crumbs__current { color: var(--color-text); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-content { padding: var(--space-6) var(--space-6) var(--space-12); max-width: 1400px; width: 100%; }
.app-content--wide { max-width: none; }

.sb__brand { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3) var(--space-2); }
.sb__logo { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-tight); }
.sb__logo b { color: var(--color-primary-light); font-weight: var(--font-weight-semibold); }
.sb__logo-mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--color-primary), var(--color-ai)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0; flex: none; }
.sb__collapse { background: none; border: 0; color: var(--color-text-light); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
.sb__collapse:hover { color: var(--color-text); background: var(--color-bg-hover); }
.sb__nav { display: flex; flex-direction: column; gap: 1px; padding: 0 var(--space-2); }
.sb__projects { flex: 1; overflow-y: auto; padding-bottom: var(--space-3); }
.sb__link, .sb__sublink {
    display: flex; align-items: center; gap: var(--space-2); padding: 6px 8px; border-radius: var(--radius);
    color: var(--color-sidebar-link); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
    background: none; border: 0; cursor: pointer; width: 100%; text-align: left; white-space: nowrap;
}
.sb__link .icon, .sb__sublink .icon { font-size: 18px; color: var(--color-sidebar-icon); flex: none; }
.sb__link:hover, .sb__sublink:hover { color: var(--color-sidebar-link-hover); background: var(--color-bg-hover); }
.sb__link.active, .sb__sublink.active { color: var(--color-sidebar-link-active); background: var(--color-sidebar-active-bg); }
.sb__link.active .icon, .sb__sublink.active .icon { color: var(--color-sidebar-icon-active); }
.sb__group-label { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-1); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-sidebar-heading); font-weight: var(--font-weight-semibold); }
.sb__mini { color: var(--color-text-light); display: inline-flex; padding: 2px; border-radius: var(--radius-sm); }
.sb__mini:hover { color: var(--color-text); background: var(--color-bg-hover); }
.sb__mini .icon { font-size: 16px; }
.sb__project .sb__ptext { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sb__project--muted { opacity: 0.55; }
.sb__pkey { font-family: var(--font-family-mono); font-size: 10px; color: var(--color-text-light); }
/* unread chat messages: red dot with a count, per project (D-024) */
.sb__link, .sb__sublink { position: relative; }
.sb__dot { margin-left: auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--color-error); color: #fff; font-size: 10px; font-weight: var(--font-weight-semibold, 600); line-height: 17px; text-align: center; flex: 0 0 auto; }
.sb__project .sb__dot { margin-left: auto; margin-right: 4px; }
.sb__pcolor { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); flex: none; }
.sb__pcolor .icon { font-size: 14px; color: inherit; }
.sb__sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 14px; padding-left: 8px; border-left: 1px solid var(--color-border); }
.sb__sublink { padding: 5px 8px; font-weight: var(--font-weight-normal); }
.sb__sublink .icon { font-size: 16px; }
.sb__empty { padding: var(--space-3) var(--space-4); color: var(--color-text-light); font-size: var(--font-size-xs); }
.sb__footer { border-top: 1px solid var(--color-sidebar-border); padding: var(--space-2); display: flex; flex-direction: column; gap: 1px; }
.sb__user span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* collapsed sidebar */
html.sb-collapsed .sb { width: var(--sidebar-width-sm); }
html.sb-collapsed .app-main { margin-left: var(--sidebar-width-sm); }
html.sb-collapsed .sb__logo-text, html.sb-collapsed .sb__link > span:not(.icon):not(.avatar):not(.sb__dot), html.sb-collapsed .sb__sublink > span:not(.icon):not(.sb__dot),
html.sb-collapsed .sb__ptext, html.sb-collapsed .sb__pkey, html.sb-collapsed .sb__group-label span, html.sb-collapsed .sb__mini { display: none; }
/* collapsed: the badge shrinks to a bare dot pinned to the icon */
html.sb-collapsed .sb__dot { position: absolute; top: 4px; right: 10px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
html.sb-collapsed .sb__sub { margin-left: 0; padding-left: 0; border: 0; }
html.sb-collapsed .sb__brand { justify-content: center; flex-direction: column; gap: 6px; }
html.sb-collapsed .sb__collapse .icon { transform: rotate(180deg); }
html.sb-collapsed .sb__link, html.sb-collapsed .sb__sublink { justify-content: center; padding: 7px 0; }

.sb-overlay { display: none; position: fixed; inset: 0; background: var(--color-bg-overlay); z-index: calc(var(--z-sidebar) - 1); }

/* language switcher */
.langsw { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.langsw__item { padding: 3px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); letter-spacing: 0.04em; }
.langsw__item:hover { color: var(--color-text); background: var(--color-bg-hover); }
.langsw__item.active { color: var(--color-text); background: var(--color-bg-elevated); }
.sb__lang { display: flex; justify-content: center; padding: 6px 0 4px; }
html.sb-collapsed .sb__lang .langsw { flex-direction: column; }
.auth-lang { display: flex; justify-content: center; margin-top: var(--space-4); }

/* account page (framework layout): breathing room between cards */
.account-page .card + .card { margin-top: var(--space-5); }
.account-page .card h2 { font-size: var(--font-size-lg); margin: 0 0 var(--space-4); }
.account-page .page-header { margin-bottom: var(--space-6); }

/* environments */
.envgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.env { border-top: 3px solid var(--env-c, var(--color-border)); }
.env--local { --env-c: var(--color-neutral); }
.env--test { --env-c: var(--color-warning); }
.env--production { --env-c: var(--color-error); }
.env .panel__head .hint { font-weight: normal; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.env fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.env legend { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.env .form-group { margin-bottom: var(--space-3); }
.env .form-row { gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.secret { display: flex; gap: 4px; }
.secret input { flex: 1; }
.check { font-size: var(--font-size-xs); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.check .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral); }
.check--ok .dot { background: var(--color-success); }
.check--bad .dot { background: var(--color-error); }
.deploy-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.deploy-row:last-child { border-bottom: 0; }
.deploy-row .result { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: pre-wrap; }

/* ── Page header ──────────────────────────────────────────── */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.ph h1 { font-size: var(--font-size-xl); margin: 0; }
.ph p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ph__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* ── Cards / panels ───────────────────────────────────────── */
.panel { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.panel__head .icon { font-size: 16px; color: var(--color-text-muted); }
.panel__head a { font-weight: var(--font-weight-normal); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.panel__body { padding: var(--space-4); }
.panel__body--flush { padding: 0; }
.panel + .panel { margin-top: var(--space-4); }
.grid-dash { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; }
.grid-dash > .col { display: flex; flex-direction: column; gap: var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.kpi__label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; }
.kpi__label .icon { font-size: 14px; }
.kpi__value { font-size: 1.6rem; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: 1.1; }
.kpi__sub { font-size: var(--font-size-xs); color: var(--color-text-light); }
.kpi--accent .kpi__value { color: var(--color-primary-light); }
.kpi--ok .kpi__value { color: var(--color-success); }
.kpi--warn .kpi__value { color: var(--color-warning); }
.kpi--bad .kpi__value { color: var(--color-error); }

/* progress bar + health */
.progress { height: 6px; background: var(--color-bg-muted); border-radius: var(--radius-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width var(--transition-slow); }
.progress--ok > span { background: var(--color-success); }
.health { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.health .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.health--on_track { color: var(--color-success); }
.health--at_risk { color: var(--color-warning); }
.health--blocked { color: var(--color-error); }
.health .dot { background: currentColor; }

/* status bar (stacked) */
.statusbar { display: flex; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-bg-muted); }
.statusbar > span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--c); vertical-align: middle; }

/* ── Pills ────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.6; white-space: nowrap; background: var(--color-neutral-bg); color: var(--color-neutral-text); border: 1px solid transparent; }
.pill .icon { font-size: 13px; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin: 0 2px; }
.pill--open        { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.pill--in_progress { background: var(--color-info-bg); color: var(--color-info-text); }
.pill--blocked     { background: var(--color-error-bg); color: var(--color-error-text); }
.pill--review      { background: var(--color-purple-bg); color: var(--color-purple-text); }
.pill--done        { background: var(--color-success-bg); color: var(--color-success-text); }
.pill--rejected    { background: var(--color-neutral-bg); color: var(--color-text-light); text-decoration: line-through; }
.pill--bug     { background: var(--color-error-bg); color: var(--color-error-text); }
.pill--feature { background: var(--color-purple-bg); color: var(--color-purple-text); }
.pill--task    { background: var(--color-info-bg); color: var(--color-info-text); }
.pill--idea    { background: var(--color-warning-bg); color: var(--color-warning-text); }
.pill--priority { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.pill--urgent { color: var(--color-error); border-color: var(--color-error-border); }
.pill--high   { color: var(--color-warning); }
.pill--low    { color: var(--color-text-light); }
.pill--on_track { background: var(--color-success-bg); color: var(--color-success-text); }
.pill--at_risk  { background: var(--color-warning-bg); color: var(--color-warning-text); }
.pill--health.pill--blocked { background: var(--color-error-bg); color: var(--color-error-text); }
.pill--working { background: var(--color-success-bg); color: var(--color-success-text); }
.pill--partial { background: var(--color-warning-bg); color: var(--color-warning-text); }
.pill--broken  { background: var(--color-error-bg); color: var(--color-error-text); }
.pill--planned { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.pill--passed    { background: var(--color-success-bg); color: var(--color-success-text); }
.pill--failed    { background: var(--color-error-bg); color: var(--color-error-text); }
.pill--pending   { background: var(--color-info-bg); color: var(--color-info-text); }
.pill--suggested { background: var(--color-ai-bg); color: var(--color-ai-text); }
.pill--skipped   { background: var(--color-neutral-bg); color: var(--color-text-light); }
.pill--active { background: var(--color-success-bg); color: var(--color-success-text); }
.pill--paused { background: var(--color-warning-bg); color: var(--color-warning-text); }
.pill--archived, .pill--project.pill--done { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.pill--ai { background: var(--color-ai-bg); color: var(--color-ai-text); }

.key { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: 0; cursor: pointer; }
.key:hover { color: var(--color-text); }

/* avatars */
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex: none; }
.avatar--sm { width: 20px; height: 20px; font-size: 9px; }
.avatar--lg { width: 36px; height: 36px; font-size: 13px; }
.avatar--xl { width: 56px; height: 56px; font-size: 20px; }
.avatar--ai { background: var(--color-ai-bg); border-color: var(--color-ai); color: var(--color-ai); }
.avatar--ai .icon { font-size: 14px; }
.avatar--lg.avatar--ai .icon { font-size: 20px; }
.avatar--xl.avatar--ai .icon { font-size: 30px; }
.avatar--empty { border-style: dashed; color: var(--color-text-light); }
.avatar--empty .icon { font-size: 14px; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar + .avatar { margin-left: -6px; }

/* ── Ticket list ──────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.filters select, .filters input { font-size: var(--font-size-sm); padding: 5px 8px; background: var(--color-input-bg); border: 1px solid var(--color-input-border); color: var(--color-input-text); border-radius: var(--radius); }
.filters input[type=search] { min-width: 220px; }
.filters .spacer { flex: 1; }

/* compact filter bar: search on top, selects in a grid (4-5 per row, 2 on mobile) */
.fbar { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.fbar__top { display: flex; gap: var(--space-2); align-items: center; }
.fbar__top input[type=search] { flex: 1; min-width: 0; font-size: var(--font-size-sm); padding: 7px 10px; background: var(--color-input-bg); border: 1px solid var(--color-input-border); color: var(--color-input-text); border-radius: var(--radius); }
.fbar__count { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.fbar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); align-items: center; }
.fbar__grid select { width: 100%; font-size: var(--font-size-sm); padding: 6px 8px; background: var(--color-input-bg); border: 1px solid var(--color-input-border); color: var(--color-input-text); border-radius: var(--radius); }
.fbar__grid .fbar__opt { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.fbar__grid .fbar__opt input { accent-color: var(--color-primary); }
@media (max-width: 760px) {
    .fbar__grid { grid-template-columns: 1fr 1fr; }
    .fbar__top { flex-wrap: wrap; }
    .fbar__top input[type=search] { flex-basis: 100%; }
}

/* features: parts, priority pills, idea */
.part { margin-bottom: var(--space-6); }
.part__head { display: flex; align-items: center; gap: var(--space-3); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.pill--core     { background: var(--color-primary-lighter); color: var(--color-primary-light); }
.pill--optional { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.pill--featPriority { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.pill--critical { color: var(--color-error); border-color: var(--color-error-border); background: var(--color-error-bg); }
.pill--featPriority.pill--high { color: var(--color-warning); }
.pill--featPriority.pill--none { color: var(--color-text-light); }
.frow--feature { grid-template-columns: auto 1fr auto; }
.frow--feature .frow__desc.md p { margin: 0; }
.rules { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-4); align-items: start; }
.rules__nav { padding-bottom: var(--space-2); position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
.rules__link { display: block; padding: 6px var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.rules__link:hover { color: var(--color-text); background: var(--color-bg-hover); }
.rules__link.active { color: var(--color-text); background: var(--color-sidebar-active-bg); }
.rules__body .md { max-width: 80ch; }
.md-table { overflow-x: auto; margin: 0 0 var(--space-3); }
.md-table table { border-collapse: collapse; font-size: var(--font-size-sm); min-width: 100%; }
.md-table th, .md-table td { border: 1px solid var(--color-border); padding: 4px 8px; text-align: left; vertical-align: top; }
.md-table th { background: var(--color-bg-muted); font-weight: var(--font-weight-semibold); }
@media (max-width: 900px) { .rules { grid-template-columns: 1fr; } .rules__nav { position: static; } }
.seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.seg button { background: none; border: 0; color: var(--color-text-muted); padding: 5px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); }
.seg button .icon { font-size: 16px; }
.seg button.active { background: var(--color-bg-elevated); color: var(--color-text); }

.tlist { display: flex; flex-direction: column; }
.tgroup__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-bg-muted); border-bottom: 1px solid var(--color-border); position: sticky; top: var(--topbar-height); z-index: 1; }
.tgroup__head .count { color: var(--color-text-light); font-weight: normal; }
.trow { display: grid; grid-template-columns: 22px 78px 1fr auto; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); min-height: 38px; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: var(--font-size-sm); }
.trow:hover { background: var(--color-table-row-hover); color: var(--color-text); }
.trow__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.trow__title span { overflow: hidden; text-overflow: ellipsis; }
.trow__meta { display: flex; align-items: center; gap: var(--space-2); }
.trow__meta .ago { font-size: var(--font-size-xs); color: var(--color-text-light); min-width: 52px; text-align: right; }
.trow .pill--priority { padding-right: 5px; }
.trow .pill--priority span:not(.icon) { display: none; }
.trow .pill--type span:not(.icon) { display: none; }
.trow .pill--type { padding-right: 5px; }
.trow__project { font-size: var(--font-size-xs); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 4px; }

/* board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-4); align-items: start; }
.bcol { background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); min-height: 120px; display: flex; flex-direction: column; }
.bcol__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.bcol__head .count { color: var(--color-text-light); font-weight: normal; }
.bcol__body { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2); min-height: 40px; }
.bcol.drop { outline: 2px dashed var(--color-primary); outline-offset: -4px; }
.bcard { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 6px; color: var(--color-text); cursor: grab; }
.bcard:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.bcard.dragging { opacity: 0.5; }
.bcard__top { display: flex; justify-content: space-between; align-items: center; }
.bcard__title { font-size: var(--font-size-sm); line-height: 1.35; }
.bcard__foot { display: flex; align-items: center; gap: var(--space-2); }
.bcard__foot .spacer { flex: 1; }

/* ── Ticket detail ────────────────────────────────────────── */
.tdetail { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-5); align-items: start; }
.tdetail__main { min-width: 0; }
.tdetail__side { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
.tdetail h1 { font-size: var(--font-size-xl); margin: 0 0 var(--space-3); line-height: 1.3; }
.tdetail__key { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.prop { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: var(--space-2); padding: 6px var(--space-4); font-size: var(--font-size-sm); }
.prop + .prop { border-top: 1px solid var(--color-border); }
.prop__label { color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.prop select { width: 100%; background: transparent; border: 1px solid transparent; color: var(--color-text); font-size: var(--font-size-sm); padding: 3px 4px; border-radius: var(--radius-sm); cursor: pointer; }
.prop select:hover, .prop select:focus { border-color: var(--color-border-strong); background: var(--color-bg); }
.prop__value { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

.thread { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.tmsg { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); }
.tmsg__body { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); min-width: 0; }
.tmsg__head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.tmsg__head b { color: var(--color-text); font-weight: var(--font-weight-medium); }
.tmsg--ai .tmsg__body { border-color: color-mix(in srgb, var(--color-ai) 40%, var(--color-border)); }
.tmsg--system { grid-template-columns: 28px 1fr; }
.tmsg--system .tmsg__body { background: transparent; border: 0; padding: 2px 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.tmsg--system .tmsg__body b { color: var(--color-text); font-weight: var(--font-weight-medium); }
.tmsg__sys-icon { width: 28px; display: flex; justify-content: center; color: var(--color-text-light); }
.tmsg__sys-icon .icon { font-size: 16px; }
.report { border-left: 3px solid var(--color-ai); }
.composer { margin-top: var(--space-4); }
.composer textarea { width: 100%; }
.composer__actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); gap: var(--space-2); flex-wrap: wrap; }
.composer__hint { font-size: var(--font-size-xs); color: var(--color-text-light); }

/* markdown */
.md { font-size: var(--font-size-base); line-height: 1.6; word-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 var(--space-3); }
.md h2, .md h3, .md h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.md h2 { font-size: var(--font-size-lg); }
.md ul, .md ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.md li { margin: 2px 0; }
.md ul.md-tasks { list-style: none; padding-left: 0; }
.md ul.md-tasks li { display: flex; gap: 6px; align-items: flex-start; }
.md ul.md-tasks li .icon { font-size: 16px; margin-top: 3px; color: var(--color-text-muted); }
.md ul.md-tasks li.done { color: var(--color-text-muted); }
.md ul.md-tasks li.done .icon { color: var(--color-success); }
.md code { background: var(--color-bg-muted); border: 1px solid var(--color-border); padding: 0 4px; border-radius: 4px; }
.md pre.md-code { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); overflow-x: auto; font-size: var(--font-size-xs); margin: 0 0 var(--space-3); position: relative; }
.md pre.md-code[data-lang]::before { content: attr(data-lang); position: absolute; top: 4px; right: 8px; font-size: 10px; color: var(--color-text-light); }
.md pre.md-code code { background: none; border: 0; padding: 0; }
.md blockquote { border-left: 3px solid var(--color-border-strong); margin: 0 0 var(--space-3); padding: 2px var(--space-3); color: var(--color-text-muted); }
.md hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
.md a.ticket-key { font-family: var(--font-family-mono); font-size: 0.85em; background: var(--color-primary-lighter); padding: 0 4px; border-radius: 4px; }
.md--sm { font-size: var(--font-size-sm); }

/* ── Chat ─────────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-height) - var(--space-6) * 2); min-height: 420px; }
.chat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); }
.chat__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); padding-right: var(--space-2); scroll-behavior: smooth; }
.cmsg { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3); padding: 6px 4px; border-radius: var(--radius-md); }
.cmsg:hover { background: var(--color-bg-hover); }
.cmsg--cont { grid-template-columns: 30px 1fr; padding-top: 0; }
.cmsg--cont .avatar { visibility: hidden; height: 0; }
.cmsg--cont .cmsg__head { display: none; }
.cmsg__head { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: 2px; }
.cmsg__head b { color: var(--color-text); font-size: var(--font-size-sm); }
.cmsg--ai .cmsg__head b { color: var(--color-ai); }
.cmsg__body { min-width: 0; }
.cmsg--system { grid-template-columns: 1fr; justify-items: center; }
.cmsg--system .cmsg__body { font-size: var(--font-size-xs); color: var(--color-text-light); background: var(--color-bg-muted); padding: 2px 10px; border-radius: var(--radius-full); }
.chat__day { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-light); margin: var(--space-3) 0 var(--space-1); position: relative; }
.chat__day::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--color-border); z-index: 0; }
.chat__day span { background: var(--color-bg); padding: 0 10px; position: relative; }
.chat__form { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.chat__form textarea { flex: 1; min-height: 42px; max-height: 200px; resize: none; padding: 9px 12px; background: var(--color-input-bg); border: 1px solid var(--color-input-border); color: var(--color-input-text); border-radius: var(--radius-md); font-family: var(--font-family); font-size: var(--font-size-sm); line-height: 1.45; }
.chat__form textarea:focus { outline: none; border-color: var(--color-input-focus-border); box-shadow: 0 0 0 3px var(--color-input-focus-shadow); }
.chat__members { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.chat__empty { margin: auto; text-align: center; color: var(--color-text-light); font-size: var(--font-size-sm); }
/* history pager: one page of older messages at a time */
.chat__more { display: flex; justify-content: center; padding: var(--space-2) 0 var(--space-1); flex: 0 0 auto; }
.chat__more-end { font-size: var(--font-size-xs); color: var(--color-text-light); }
/* "delivered / thinking": what the AI account is doing with this chat */
.chat__status { display: flex; align-items: center; gap: var(--space-2); min-height: 20px; padding: var(--space-2) 4px 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.chat__status[data-state="thinking"] { color: var(--color-ai); }
.chat__dots { display: inline-flex; gap: 3px; }
.chat__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: cc-dots 1.2s infinite ease-in-out; }
.chat__dots i:nth-child(2) { animation-delay: .18s; }
.chat__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes cc-dots { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chat__dots i { animation: none; opacity: .6; } }

/* ── Activity feed ────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; }
.fitem { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.fitem:last-child { border-bottom: 0; }
.fitem__icon { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-muted); color: var(--color-text-muted); }
.fitem__icon .icon { font-size: 14px; }
.fitem--ai .fitem__icon { background: var(--color-ai-bg); color: var(--color-ai); }
.fitem__text { min-width: 0; }
.fitem__text b { font-weight: var(--font-weight-medium); }
.fitem__text .who--ai { color: var(--color-ai); }
.fitem__summary { color: var(--color-text-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fitem__summary a { color: var(--color-text); }
.fitem__ago { font-size: var(--font-size-xs); color: var(--color-text-light); white-space: nowrap; }
.fitem__proj { font-size: var(--font-size-xs); color: var(--color-text-light); }

/* ── Features / tests ─────────────────────────────────────── */
.area { margin-bottom: var(--space-5); }
.area__head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: var(--font-weight-semibold); padding: 0 var(--space-1) var(--space-2); }
.area__head .count { font-weight: normal; color: var(--color-text-light); }
.frow { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.frow:last-child { border-bottom: 0; }
.frow__title { min-width: 0; }
.frow__desc { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-top: 1px; }
.frow__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-light); }
.frow__actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition); }
.frow:hover .frow__actions { opacity: 1; }
.frow .btn--icon { width: 26px; height: 26px; }
.frow .btn--icon .icon { font-size: 15px; }
.trow-test { grid-template-columns: auto 1fr auto; }
.tresult { font-family: var(--font-family-mono); font-size: var(--font-size-xs); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); white-space: pre-wrap; max-height: 220px; overflow: auto; margin-top: var(--space-2); color: var(--color-text-muted); }
.cmd { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* inline edit forms in panels */
.inline-form { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-bg-muted); }
.inline-form .form-group { margin: 0; }
.inline-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.inline-form__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ── Projects hub ─────────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.pcard { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--color-text); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color var(--transition), transform var(--transition); }
.pcard:hover { border-color: var(--color-border-strong); transform: translateY(-1px); color: var(--color-text); }
.pcard__head { display: flex; align-items: center; gap: var(--space-3); }
.pcard__head .sb__pcolor { width: 32px; height: 32px; border-radius: 8px; }
.pcard__head .sb__pcolor .icon { font-size: 18px; }
.pcard__name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); }
.pcard__key { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-light); }
.pcard__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); flex: 1; }
.pcard__stats { display: flex; gap: var(--space-4); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.pcard__stats b { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.pcard__foot { display: flex; justify-content: space-between; align-items: center; }

/* Claude page */
.hero-ai { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); background: linear-gradient(135deg, var(--color-ai-bg), transparent 70%), var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.hero-ai h1 { margin: 0; font-size: var(--font-size-xl); }
.hero-ai p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.endpoints { font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.endpoints div { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-3); padding: 5px var(--space-4); border-bottom: 1px solid var(--color-border); }
.endpoints div:last-child { border-bottom: 0; }
.endpoints .m { color: var(--color-ai); }
.endpoints .d { font-family: var(--font-family); color: var(--color-text-muted); }

/* ── Empty state, modal, kbd ──────────────────────────────── */
.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.empty .icon { font-size: 32px; color: var(--color-text-light); display: block; margin: 0 auto var(--space-2); }
.modal { position: fixed; inset: 0; background: var(--color-bg-overlay); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal__box { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); width: 100%; max-width: 520px; box-shadow: var(--shadow-xl); }
.modal__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.kbd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--color-bg-muted); color: var(--color-text); font-size: 11px; text-align: center; margin-right: 2px; }
.toast { position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%); background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); color: var(--color-text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--font-size-sm); box-shadow: var(--shadow-lg); z-index: var(--z-toast); opacity: 0; transition: opacity var(--transition); pointer-events: none; }
.toast.show { opacity: 1; }
.muted { color: var(--color-text-muted); }
.light { color: var(--color-text-light); }
.small { font-size: var(--font-size-xs); }
.nowrap { white-space: nowrap; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.tbl th { text-align: left; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: var(--font-weight-medium); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); }
.tbl td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }

/* chart */
.chart { width: 100%; height: 160px; display: block; }
.chart .grid line { stroke: var(--color-border); stroke-width: 1; }
.chart .created { fill: none; stroke: var(--color-text-light); stroke-width: 1.5; }
.chart .closed { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.chart .closed-area { fill: var(--color-primary-lighter); }
.chart text { fill: var(--color-text-light); font-size: 10px; font-family: var(--font-family); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1000px) {
    .grid-dash { grid-template-columns: 1fr; }
    .tdetail { grid-template-columns: 1fr; }
    .tdetail__side { position: static; }
}
@media (max-width: 760px) {
    .sb { transform: translateX(-100%); width: var(--sidebar-width); }
    html.sb-open .sb { transform: none; }
    html.sb-open .sb-overlay { display: block; }
    html.sb-collapsed .sb { width: var(--sidebar-width); }
    html.sb-collapsed .sb__logo-text, html.sb-collapsed .sb__link > span, html.sb-collapsed .sb__sublink > span, html.sb-collapsed .sb__ptext, html.sb-collapsed .sb__pkey, html.sb-collapsed .sb__group-label span { display: initial; }
    .app-main, html.sb-collapsed .app-main { margin-left: 0; }
    .topbar__menu { display: inline-flex; }
    .sb__collapse { display: none; }
    .app-content { padding: var(--space-4) var(--space-3) var(--space-10); }
    .trow { grid-template-columns: 22px 1fr auto; }
    .trow__key { display: none; }
    .kbd-grid { grid-template-columns: 1fr; }
}