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

      /* Token definitions live in styles/tokens.css (loaded before this file).
         See docs/UI_AUDIT_2026.md §4.1 for the canonical token set. */
      * { box-sizing: border-box; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        line-height: 1.45;
        -webkit-font-smoothing: antialiased;
      }
      h1, h2, h3, h4, h5, h6 {
        font-family: "Rajdhani", "Inter", "Segoe UI", sans-serif;
        font-weight: 600;
        letter-spacing: 0.01em;
      }
      .skip-link {
        position: absolute;
        top: 12px;
        left: 14px;
        z-index: 2500;
        padding: 10px 14px;
        border-radius: 999px;
        background: #172119;
        color: #f5fbf2;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.14);
        transform: translateY(-180%);
        transition: transform 0.16s ease, box-shadow 0.16s ease;
        box-shadow: 0 14px 28px rgba(12, 19, 14, 0.18);
      }
      .skip-link:focus-visible {
        transform: translateY(0);
        outline: none;
      }
      /* Fiori/UI5-style app shell: the viewport is locked, the sidebar is
         immovable, and only the main content area scrolls. The previous
         `position: sticky` approach was fragile because `overflow-x: hidden`
         on `.layout` created a competing scroll container that broke sticky
         in some browsers. Locking the layout height + scrolling inside `.main`
         is the canonical pattern and far more robust. */
      .layout { height: 100vh; display: grid; grid-template-columns: 240px 1fr; overflow: hidden; }

      /* ── Sagez / Fiori Sidebar ── */
      .sidebar {
        background: linear-gradient(180deg, #0c3347 0%, #0f3d55 60%, #113f59 100%);
        color: var(--sidebar-text);
        padding: 0 0 16px;
        display: flex;
        flex-direction: column;
        border-right: 1px solid rgba(255,255,255,.06);
        box-shadow: 2px 0 8px rgba(0,0,0,.18);
        /* Fill the locked layout height; `.menu` scrolls internally if items overflow. */
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }
      .logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 12px 14px;
        height: 88px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        background:
          radial-gradient(circle at 22px 18px, rgba(232,168,73,.2), transparent 32px),
          linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
      }
      .logo-img {
        flex: 0 0 auto;
        display: block;
        width: 92px;
        max-width: 100%;
        height: 64px;
        object-fit: contain;
        object-position: left center;
        filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
      }
      /* ── Menu search ─────────────────── */
      .menu-search-wrap { padding: 8px 10px 4px; }
      .menu-search {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 6px;
        padding: 6px 10px 6px 28px;
        color: #fff;
        font-size: var(--font-sm);
        font-family: "Inter", sans-serif;
        outline: none;
        transition: background .15s, border-color .15s;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 9px center;
      }
      .menu-search::placeholder { color: rgba(255,255,255,.35); }
      .menu-search:focus { background-color: rgba(255,255,255,.11); border-color: rgba(232,168,73,.45); }

      /* ── Menu layout ─────────────────── */
      .menu { display: flex; flex-direction: column; gap: 0; padding: 4px 0 10px; overflow-y: auto; flex: 1; }
      .menu button {
        width: 100%;
        border: 0;
        border-left: 3px solid transparent;
        border-radius: 0 6px 6px 0;
        text-align: left;
        padding: 8px 12px 8px 13px;
        color: var(--sidebar-text);
        background: transparent;
        cursor: pointer;
        font-size: var(--font-md);
        font-family: "Inter", sans-serif;
        transition: background .13s, border-color .13s, color .13s;
        opacity: .82;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .menu button:hover, .menu button:focus-visible {
        background: rgba(255,255,255,.07);
        border-left-color: rgba(255,255,255,.18);
        color: #fff;
        opacity: 1;
        outline: none;
      }
      .menu button.active {
        background: rgba(232,168,73,.16);
        border-left-color: var(--sagez-orange);
        border-left-width: 4px;
        padding-left: 12px;
        color: #fff;
        opacity: 1;
        font-weight: 600;
        box-shadow: inset 0 -1px 0 rgba(232,168,73,.12);
      }
      /* Custom thin scrollbar for the sidebar — UI5 stays clean and unobtrusive */
      .menu::-webkit-scrollbar { width: 6px; }
      .menu::-webkit-scrollbar-track { background: transparent; }
      .menu::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.08);
        border-radius: 3px;
      }
      .menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }
      .menu { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }

      /* ── Group header ───────────────── */
      .menu-divider { height: 1px; background: rgba(255,255,255,.06); margin: 4px 12px 2px; }
      .menu-group-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 12px 4px;
        cursor: pointer;
        user-select: none;
        gap: 6px;
      }
      .menu-group-header:hover .menu-group-title { color: rgba(255,255,255,.7); }
      .menu-group-title {
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--sidebar-muted);
        font-weight: 700;
        font-family: "Inter", sans-serif;
        flex: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color .13s;
      }
      .menu-group-icon { font-size: 8px; opacity: .55; flex-shrink: 0; }
      .menu-group-chevron {
        font-size: 8px;
        opacity: .4;
        transition: transform .2s ease;
        flex-shrink: 0;
        color: var(--sidebar-muted);
      }
      .menu-group.collapsed .menu-group-chevron { transform: rotate(-90deg); }
      .menu-group-items {
        display: flex;
        flex-direction: column;
        gap: 1px;
        overflow: hidden;
        max-height: 800px;
        transition: max-height .22s ease, opacity .18s ease;
        opacity: 1;
        padding: 0 4px 0 0;
      }
      .menu-group.collapsed .menu-group-items { max-height: 0; opacity: 0; pointer-events: none; }

      /* ── Sub-menu (dropdown) ─────────── */
      .menu-dropdown { display: flex; flex-direction: column; }
      .menu-dropdown-toggle { position: relative; display: flex; justify-content: space-between; align-items: center; }
      .dropdown-arrow { font-size: 7px; transition: transform .2s ease; opacity: .5; flex-shrink: 0; }
      .menu-dropdown.expanded .dropdown-arrow { transform: rotate(180deg); opacity: .8; }
      .menu-dropdown-content { display: none; flex-direction: column; gap: 1px; margin: 1px 0 2px 0; }
      .menu-dropdown.expanded .menu-dropdown-content { display: flex; }
      .menu-dropdown-item {
        padding-left: var(--space-5) !important;
        font-size: var(--font-sm) !important;
        border-left: 3px solid rgba(255,255,255,.06) !important;
        border-radius: 0 6px 6px 0 !important;
        opacity: .75 !important;
      }
      .menu-dropdown-item:hover { border-left-color: rgba(255,255,255,.2) !important; opacity: 1 !important; }
      .menu-dropdown-item.active { border-left-color: var(--sagez-orange) !important; background: rgba(232,168,73,.1) !important; opacity: 1 !important; }

      /* ── No-results ─────────────────── */
      .menu-no-results { padding: 10px 14px; font-size: var(--font-sm); color: rgba(255,255,255,.3); font-style: italic; }

      .sidebar-footer { border-top: 1px solid rgba(255,255,255,.07); padding: 10px 14px 0; color: var(--sidebar-muted); font-size: var(--font-xs); }

      /* ============================================
         MODERN UI STYLES - My Routine Page
         ============================================ */
      
      /* Modern Card — Fiori/Sagez style */
      .modern-card {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--line);
        padding: 20px 24px;
        margin-bottom: var(--space-4);
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
      }
      .modern-card:hover {
        box-shadow: var(--shadow-md);
        border-color: #b8d0de;
      }
      
      /* Welcome Header — Sagez brand gradient */
      .welcome-header {
        background: linear-gradient(135deg, #0d3d55 0%, #1a6b8a 55%, #1d8a7e 100%);
        border-radius: 10px;
        padding: 28px 32px;
        color: #ffffff;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.06);
        box-shadow: var(--shadow-md);
      }
      .welcome-header::before {
        content: '';
        position: absolute;
        top: -40%;
        right: -5%;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(232,168,73,.18) 0%, transparent 70%);
        border-radius: 50%;
      }
      .welcome-header::after {
        content: '';
        position: absolute;
        bottom: -60%;
        left: 20%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
        border-radius: 50%;
      }
      .welcome-header h2 {
        margin: 0 0 8px 0;
        font-size: 28px;
        font-weight: 700;
        position: relative;
        z-index: 1;
      }
      .welcome-header p {
        margin: 0;
        opacity: 0.9;
        font-size: 15px;
        position: relative;
        z-index: 1;
      }
      /* Split hero — welcome copy on the left, Quick Actions on the right.
         Buttons sit on the dark gradient with a frosted-glass treatment. */
      .welcome-header-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-5);
        align-items: center;
        padding: 24px 32px;
      }
      .welcome-header-split .welcome-copy { position: relative; z-index: 1; }
      .welcome-header-split .welcome-copy h2 { margin-bottom: 6px; font-size: 26px; }
      .welcome-header-split .welcome-copy p { font-size: 14px; }
      .welcome-actions {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 10px;
        justify-content: end;
      }
      .welcome-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 118px;
        min-height: 86px;
        padding: 12px 14px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.08);
        color: #ffffff;
        cursor: pointer;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background .15s ease, border-color .15s ease, transform .15s ease;
      }
      .welcome-action-btn:hover,
      .welcome-action-btn:focus-visible {
        background: rgba(255,255,255,.16);
        border-color: rgba(232,168,73,.55);
        transform: translateY(-1px);
        outline: none;
      }
      .welcome-action-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(232,168,73,.22);
        color: var(--sagez-orange);
      }
      .welcome-action-label {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .01em;
        text-align: center;
        line-height: 1.2;
      }
      @media (max-width: 900px) {
        .welcome-header-split {
          grid-template-columns: 1fr;
          gap: var(--space-3);
        }
        .welcome-actions {
          grid-template-columns: repeat(2, max-content);
          justify-content: start;
        }
        .welcome-action-btn { width: 112px; }
      }
      
      /* Modern KPI Cards */
      .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--space-4);
        margin-bottom: var(--space-5);
      }
      .kpi-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 18px 20px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--line);
        border-top: 3px solid var(--sagez-blue);
        transition: box-shadow 0.15s ease, transform 0.15s ease;
        position: relative;
        overflow: hidden;
      }
      .kpi-card.warn  { border-top-color: var(--warn); }
      .kpi-card.good  { border-top-color: var(--good); }
      .kpi-card.bad   { border-top-color: var(--bad); }
      .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
      .kpi-label {
        font-size: var(--font-sm);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
        margin-bottom: var(--space-2);
      }
      .kpi-value {
        font-size: 32px;
        font-weight: 700;
        color: #111827;
        line-height: 1;
      }
      
      /* Section Headers — Fiori style */
      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line);
      }
      .section-title {
        font-size: var(--font-lg);
        font-weight: 600;
        color: var(--text);
        margin: 0;
        font-family: "Rajdhani","Inter",sans-serif;
        letter-spacing: 0.02em;
      }
      
      /* ═══════════════════════════════════════════════════════════════════
         Canonical button system — see docs/UI_AUDIT_2026.md §4.5
         All button class families (btn / modern-btn / ftoolbar-btn / wf-btn /
         wf-tool-btn / cw-save-btn / cw-back-btn) share these rules.
         Variants: .primary / .danger / .warn / .ghost (default = secondary).
         Sizes:    .btn-sm / .btn-lg (default = md, height 32px).
         ═══════════════════════════════════════════════════════════════════ */
      .btn,
      .modern-btn,
      .ftoolbar-btn,
      .wf-btn,
      .wf-tool-btn,
      .cw-save-btn,
      .cw-back-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: 0 var(--space-3);
        height: var(--btn-h-md);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface);
        color: var(--text);
        font-family: inherit;
        font-size: var(--font-md);
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1;
        transition: background .12s ease, border-color .12s ease, color .12s ease;
        letter-spacing: 0.01em;
      }
      .btn:hover:not(:disabled),       .btn:focus-visible:not(:disabled),
      .modern-btn:hover:not(:disabled),.modern-btn:focus-visible:not(:disabled),
      .ftoolbar-btn:hover:not(:disabled),.ftoolbar-btn:focus-visible:not(:disabled),
      .wf-btn:hover:not(:disabled),    .wf-btn:focus-visible:not(:disabled),
      .wf-tool-btn:hover:not(:disabled),.wf-tool-btn:focus-visible:not(:disabled),
      .cw-back-btn:hover:not(:disabled),.cw-back-btn:focus-visible:not(:disabled) {
        background: var(--bg-subtle);
        border-color: var(--primary);
        color: var(--primary);
        outline: none;
      }
      .btn:disabled, .modern-btn:disabled, .ftoolbar-btn:disabled,
      .wf-btn:disabled, .wf-tool-btn:disabled,
      .cw-save-btn:disabled, .cw-back-btn:disabled {
        opacity: 0.5;
        cursor: default;
      }
      /* primary variant */
      .btn.primary,
      .modern-btn.primary,
      .ftoolbar-btn.ftb-primary,
      .ftoolbar-btn.ftb-active,
      .wf-btn.wf-btn-primary,
      .cw-save-btn {
        background: var(--primary);
        border-color: var(--primary-dark);
        color: var(--primary-fg);
        font-weight: 600;
      }
      .btn.primary:hover:not(:disabled),
      .modern-btn.primary:hover:not(:disabled),
      .ftoolbar-btn.ftb-primary:hover:not(:disabled),
      .wf-btn.wf-btn-primary:hover:not(:disabled),
      .cw-save-btn:hover:not(:disabled) {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: var(--primary-fg);
      }
      .btn.primary:disabled,
      .cw-save-btn:disabled {
        background: var(--text-subtle);
        border-color: var(--text-subtle);
        color: var(--primary-fg);
        opacity: 1;
      }
      /* danger / warn — destructive outlined */
      .btn.danger,
      .btn.warn,
      .ftoolbar-btn.ftb-danger,
      .wf-btn.wf-btn-danger {
        background: var(--surface);
        border-color: var(--bad);
        color: var(--bad);
      }
      .btn.danger:hover:not(:disabled),
      .btn.warn:hover:not(:disabled),
      .ftoolbar-btn.ftb-danger:hover:not(:disabled),
      .wf-btn.wf-btn-danger:hover:not(:disabled) {
        background: rgba(204, 77, 81, 0.08);
        border-color: var(--bad);
        color: var(--bad);
      }
      /* ghost variant */
      .btn.ghost,
      .cw-back-btn {
        background: transparent;
        border-color: var(--line);
        color: var(--text-muted);
      }
      /* size: small (default for toolbar / tool families) */
      .btn.btn-sm,
      .ftoolbar-btn,
      .wf-btn,
      .wf-tool-btn,
      .btn.logs-btn-sm {
        height: var(--btn-h-sm);
        padding: 0 var(--space-2);
        font-size: var(--font-sm);
      }
      /* size: large */
      .btn.btn-lg,
      .cw-save-btn {
        height: var(--btn-h-lg);
        padding: 0 var(--space-4);
        font-size: var(--font-lg);
      }
      /* embedded SVG icon sizing */
      .btn svg, .modern-btn svg, .ftoolbar-btn svg, .wf-btn svg,
      .wf-tool-btn svg, .cw-save-btn svg, .cw-back-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
      }
      .modern-btn svg { width: 18px; height: 18px; }

      /* Modern Tabs — Fiori style */
      .modern-tabs {
        display: flex;
        gap: 0;
        background: transparent;
        border-bottom: 2px solid var(--line);
        margin-bottom: var(--space-4);
      }
      .modern-tab {
        padding: 8px 18px;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        background: transparent;
        color: var(--muted);
        font-size: var(--font-md);
        font-weight: 500;
        cursor: pointer;
        transition: color 0.12s ease, border-color 0.12s ease;
        font-family: "Inter", sans-serif;
      }
      .modern-tab:hover { color: var(--sagez-blue); }
      .modern-tab.active {
        color: var(--sagez-blue);
        border-bottom-color: var(--sagez-blue);
        font-weight: 600;
      }
      
      /* Modern Tables */
      .modern-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
      }
      .modern-table thead th {
        background: #f9fafb;
        padding: 12px 16px;
        text-align: left;
        font-size: var(--font-sm);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
        border-bottom: 2px solid #e5e7eb;
      }
      .modern-table tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid #e5e7eb;
        font-size: var(--font-md);
        color: #374151;
      }
      .modern-table tbody tr {
        transition: background 0.1s ease;
      }
      .modern-table tbody tr:hover {
        background: #f9fafb;
      }
      .modern-table tbody tr:last-child td {
        border-bottom: none;
      }
      
      /* Modern Status Badges */
      .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: var(--font-sm);
        font-weight: 600;
        text-transform: capitalize;
      }
      .status-badge.todo { background: #f3f4f6; color: #6b7280; }
      .status-badge.in-progress { background: #dbeafe; color: #1d4ed8; }
      .status-badge.review { background: #fef3c7; color: #d97706; }
      .status-badge.done { background: #d1fae5; color: #065f46; }
      
      /* Modern Priority Badges */
      .priority-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 6px;
        font-size: var(--font-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
      }
      .priority-badge.critical { background: #fee2e2; color: #dc2626; }
      .priority-badge.high { background: #fed7aa; color: #ea580c; }
      .priority-badge.medium { background: #dbeafe; color: #2563eb; }
      .priority-badge.low { background: #e5e7eb; color: #4b5563; }
      
      /* Modern Kanban */
      .kanban-board {
        display: flex;
        gap: var(--space-4);
        overflow-x: auto;
        padding-bottom: var(--space-2);
      }
      .kanban-column {
        min-width: 280px;
        flex: 1;
        background: #f9fafb;
        border-radius: 12px;
        padding: var(--space-4);
      }
      .kanban-column-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
        border-bottom: 2px solid #e5e7eb;
      }
      .kanban-column-title {
        font-size: var(--font-md);
        font-weight: 700;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .kanban-count {
        background: #e5e7eb;
        color: #6b7280;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: var(--font-sm);
        font-weight: 600;
      }
      .kanban-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .kanban-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
        border-color: #d1d5db;
      }
      .kanban-card-title {
        font-size: var(--font-md);
        font-weight: 600;
        color: #111827;
        margin-bottom: var(--space-2);
      }
      .kanban-card-meta {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-sm);
        color: #6b7280;
      }
      
      /* Modern Progress Bar */
      .progress-bar {
        width: 100%;
        height: 6px;
        background: #e5e7eb;
        border-radius: 3px;
        overflow: hidden;
        margin-top: var(--space-2);
      }
      .progress-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #1a6b8a 0%, #1d8a7e 100%);
        border-radius: 3px;
        transition: width 0.3s ease;
      }
      
      /* Modern Quick Actions */
      .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--space-3);
      }
      .quick-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 20px 16px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .quick-action-btn:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      }
      .quick-action-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--sagez-blue-light);
        border-radius: 8px;
        color: var(--sagez-blue);
        border: 1px solid rgba(26,107,138,.15);
      }
      .quick-action-label {
        font-size: var(--font-md);
        font-weight: 600;
        color: #374151;
        text-align: center;
      }
      
      /* Modern Notifications */
      .notification-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: 14px;
        border-radius: 10px;
        background: #f9fafb;
        margin-bottom: 10px;
        transition: background 0.15s ease;
      }
      .notification-item:hover {
        background: #f3f4f6;
      }
      .notification-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e5e7eb;
        border-radius: 8px;
        color: #6b7280;
        flex-shrink: 0;
      }
      .notification-content {
        flex: 1;
      }
      .notification-title {
        font-size: var(--font-md);
        font-weight: 600;
        color: #111827;
        margin-bottom: var(--space-1);
      }
      .notification-text {
        font-size: var(--font-md);
        color: #6b7280;
      }
      .notification-time {
        font-size: var(--font-xs);
        color: #9ca3af;
        margin-top: var(--space-1);
      }
      
      /* Modern Cascade View */
      .cascade-item {
        margin-left: 20px;
        border-left: 2px solid #e5e7eb;
        padding-left: var(--space-4);
        margin-bottom: var(--space-3);
      }
      .cascade-item-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: var(--space-3);
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .cascade-item-header:hover {
        background: #f9fafb;
        border-color: #d1d5db;
      }

      /* Task Priority Badges */
      .task-priority-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
      .task-priority-badge.critical { background: #d15a5c; color: #fff; }
      .task-priority-badge.high { background: #d09a38; color: #fff; }
      .task-priority-badge.medium { background: #1a6b8a; color: #fff; }
      .task-priority-badge.low { background: #9ccf65; color: #333; }
      /* Task Type Badges */
      .tasks-type-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
      .tasks-type-badge.story { background: #ede9fe; color: #7c3aed; }
      .tasks-type-badge.task { background: #dbeafe; color: #1d4ed8; }
      .tasks-type-badge.bug { background: #fee2e2; color: #b91c1c; }
      .tasks-type-badge.epic { background: #fef3c7; color: #d97706; }
      /* Agile Kanban Board */
      /* ── Task Kanban Board — Sagez portal-native ─────────────────── */
      .tasks-kanban-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: var(--space-3); align-items: flex-start; }
      .tasks-kanban-col { min-width: 230px; flex: 1; border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
      .tasks-kanban-col-head { padding: 10px 12px; display: flex; align-items: center; gap: var(--space-2); background: var(--panel); border-bottom: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; border-left: 3px solid var(--col-accent, var(--primary)); }
      .tasks-kanban-col-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col-accent, var(--primary)); flex-shrink: 0; }
      .tasks-kanban-col-name { font-weight: 600; font-size: var(--font-md); flex: 1; color: var(--text); }
      .tasks-kanban-col-count { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; font-size: var(--font-xs); font-weight: 600; color: var(--muted); }
      .tasks-kanban-col-edit { opacity: 0; transition: opacity .15s; background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px 5px; border-radius: 4px; font-size: var(--font-sm); line-height: 1; }
      .tasks-kanban-col-head:hover .tasks-kanban-col-edit { opacity: 1; }
      .tasks-kanban-col-edit:hover { color: var(--primary); background: var(--bg); }
      .tasks-kanban-col-body { flex: 1; background: var(--bg); padding: var(--space-2); display: flex; flex-direction: column; gap: 6px; min-height: 160px; border-radius: 0 0 var(--radius-md) var(--radius-md); }
      .tasks-kanban-col-create { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); cursor: pointer; color: var(--muted); font-size: var(--font-sm); font-weight: 500; transition: all .15s; background: transparent; width: 100%; text-align: left; }
      .tasks-kanban-col-create:hover { border-color: var(--primary); color: var(--primary); background: var(--sagez-blue-light, #e0f2f8); }
      .tasks-kanban-task-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--col-accent, var(--primary)); border-radius: var(--radius-sm); padding: 10px 11px; cursor: pointer; transition: box-shadow .15s, border-color .15s, opacity .15s; }
      .tasks-kanban-task-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
      .tasks-kanban-task-card[draggable="true"] { cursor: grab; }
      .tasks-kanban-task-card[draggable="true"]:active { cursor: grabbing; }
      .tasks-kanban-col[data-drop-active="true"] { box-shadow: 0 0 0 2px var(--col-accent, var(--primary)); }
      .tasks-kanban-col[data-drop-active="true"] .tasks-kanban-col-body { background: color-mix(in srgb, var(--col-accent, var(--primary)) 8%, var(--bg)); }
      .case-card-selected { box-shadow: 0 0 0 2px var(--col-accent, var(--primary)) !important; }
      .tasks-kanban-task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: var(--space-1); }
      .tasks-kanban-task-title { font-weight: 600; font-size: var(--font-md); color: var(--text); line-height: 1.4; }
      .tasks-kanban-task-num { font-size: 10px; color: var(--muted); font-family: ui-monospace, monospace; margin-bottom: 3px; }
      .tasks-kanban-task-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
      .tasks-kanban-task-date { font-size: var(--font-xs); color: var(--muted); display: flex; align-items: center; gap: 3px; }
      .tasks-kanban-task-date.overdue { color: var(--bad); font-weight: 600; }
      .tasks-kanban-task-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
      /* Status column editor overlay */
      .task-col-editor-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 2100; align-items: center; justify-content: center; }
      .task-col-editor-overlay.open { display: flex; }
      .task-col-editor-modal { background: var(--panel); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); width: 520px; max-width: 96vw; max-height: 88vh; overflow-y: auto; }
      .task-col-editor-modal h3 { margin: 0 0 4px; }
      .task-col-row { display: grid; grid-template-columns: 28px 1fr 90px 30px 30px 30px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
      .task-col-row:last-child { border-bottom: none; }
      .task-col-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; }
      .tasks-priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
      .tasks-priority-dot.critical { background: #dc2626; }
      .tasks-priority-dot.high { background: #d97706; }
      .tasks-priority-dot.medium { background: #2563eb; }
      .tasks-priority-dot.low { background: #9ca3af; }
      /* Task detail panel */
      /* ── Task Detail Panel ────────────────────────────────────── */
      .task-detail-panel { background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; margin-top: var(--space-4); overflow: hidden; }
      .tdp-header { padding: 16px 20px 14px; border-bottom: 1px solid var(--border, #e5e7eb); background: var(--bg-subtle, #f9fafb); }
      .tdp-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
      .tdp-title-input { font-size: var(--font-lg); font-weight: 600; border: none; background: transparent; padding: 4px 0; width: 100%; outline: none; color: var(--text, #111); }
      .tdp-title-input:focus { outline: 2px solid var(--primary, #3b7a57); outline-offset: 2px; border-radius: 4px; }
      .task-detail-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--font-xs); color: var(--text-muted, #6b7280); margin-bottom: var(--space-2); flex-wrap: wrap; }
      .task-detail-breadcrumb .bc-chip { background: var(--bg, #f3f4f6); border: 1px solid var(--border, #e5e7eb); border-radius: 4px; padding: 2px 7px; font-weight: 500; color: var(--text, #374151); }
      .tdp-body { display: grid; grid-template-columns: 1fr 260px; min-height: 0; }
      .tdp-main { padding: 18px 20px; border-right: 1px solid var(--border, #e5e7eb); }
      .tdp-meta { padding: 18px 16px; background: var(--bg-subtle, #f9fafb); }
      .tdp-meta-row { margin-bottom: 14px; }
      .tdp-meta-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted, #9ca3af); display: block; margin-bottom: var(--space-1); }
      .tdp-progress-display { height: 6px; background: var(--border, #e5e7eb); border-radius: 3px; margin-top: 6px; overflow: hidden; }
      .tdp-progress-display-fill { height: 100%; background: var(--primary, #3b7a57); border-radius: 3px; transition: width .2s; }
      .tdp-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border, #e5e7eb); background: var(--bg-subtle, #f9fafb); }
      @media (max-width: 680px) { .tdp-body { grid-template-columns: 1fr; } .tdp-main { border-right: none; border-bottom: 1px solid var(--border, #e5e7eb); } }
      /* Task Cascade View */
      .task-cascade-item { border-left: 2px solid #e8eee7; padding-left: var(--space-3); margin-bottom: var(--space-2); }
      .task-cascade-item-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: #fff; border: 1px solid #e8eee7; border-radius: 6px; cursor: pointer; }
      .task-cascade-item-header:hover { background: #f8f9f8; }
      .task-cascade-children { margin-top: var(--space-2); margin-left: 20px; }
      /* Task Status Colors */
      .task-status-todo { background: #e8eee7; color: #333; }
      .task-status-in_progress { background: #5aa5d8; color: #fff; }
      .task-status-review { background: #d09a38; color: #fff; }
      .task-status-done { background: #1a6b8a; color: #fff; }
      .task-status-blocked { background: #d15a5c; color: #fff; }

      /* ── Fiori-inspired Main Area ── */
      .main {
        min-width: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        background: var(--bg);
        /* Only this column scrolls; the sidebar stays planted. The sticky
           `.toolbar` below pins to the top of this scrolling container. */
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
      }
      /* Shell bar — Fiori top header */
      .toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        background: #ffffff;
        padding: 12px 20px;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 1px 4px rgba(13,45,65,.06);
        position: sticky;
        top: 0;
        z-index: 100;
      }
      /* Page content wrapper */
      .toolbar ~ * { padding: 16px 20px; }
      .page.active { padding: 16px 20px; }
      .title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
      .title h1 { margin: 0; font-size: var(--font-xl); font-weight: 600; font-family: "Rajdhani","Inter",sans-serif; color: var(--text); letter-spacing: 0.02em; }
      .title p { margin: 0; color: var(--muted); font-size: var(--font-sm); width: 100%; }
      .toolbar-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: var(--space-2);
      }
      .toolbar-lang {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 8px;
        border: 1px solid #cfd9cf;
        background: #fff;
        cursor: pointer;
        font-size: var(--font-md);
        color: #2f4031;
        transition: all 0.15s ease;
      }
      .toolbar-lang:hover {
        background: #f9fafb;
        border-color: #9ca3af;
      }
      .toolbar-lang svg {
        width: 16px;
        height: 16px;
        color: #6b7280;
      }
      .toolbar-lang-select {
        border: none;
        background: transparent;
        font-size: var(--font-md);
        font-weight: 600;
        color: #374151;
        cursor: pointer;
        padding: 2px 4px;
        outline: none;
      }
      .lang-option:hover {
        background: #f3f4f6 !important;
      }
      .lang-option[data-lang="en"].active,
      .lang-option[data-lang="pt-BR"].active {
        background: #e0f0f8 !important;
        color: #1a6b8a !important;
        font-weight: 600;
      }
      .toolbar-context {
        min-width: 220px;
        display: grid;
        gap: var(--space-1);
      }
      .toolbar-context label {
        margin: 0;
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .toolbar-context select {
        padding: 7px 9px;
        font-size: var(--font-sm);
      }
      .toolbar-context .note {
        margin: 0;
        font-size: var(--font-xs);
      }
      /* .btn rules consolidated into the canonical button system at the top
         of this file (search "Canonical button system"). */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [tabindex="0"]:focus-visible {
        outline: 3px solid rgba(26, 107, 138, 0.28);
        outline-offset: 2px;
      }
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible {
        border-color: #1a8baf;
        box-shadow: 0 0 0 3px rgba(26, 107, 138, 0.15);
      }
      /* ── SearchableSelect (sg-sel) ─────────────────────────────────────── */
      .sg-sel { position: relative; display: block; width: 100%; }
      .sg-sel.open { z-index: 9010; }
      /* Inside flex toolbars — auto-width so it behaves like a normal flex child */
      .ftoolbar .sg-sel { display: inline-flex; width: auto; min-width: 110px; flex-shrink: 0; }
      .ftoolbar .sg-sel-trigger { min-width: 0; width: 100%; }
      .ftoolbar .sg-sel-dropdown { min-width: max(100%, 200px); }
      .sg-sel select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
      .sg-sel-trigger {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; border: 1px solid #ced8ce; border-radius: 8px;
        padding: 9px 10px; font-size: var(--font-md); font-family: inherit;
        background: #fff; cursor: pointer; color: var(--text);
        transition: border-color .15s, box-shadow .15s; gap: 6px;
      }
      .sg-sel-trigger:hover { border-color: var(--primary); }
      .sg-sel-trigger:focus-visible { outline: 3px solid rgba(26,107,138,.28); outline-offset: 2px; border-color: #1a8baf; box-shadow: 0 0 0 3px rgba(26,107,138,.15); }
      .sg-sel-trigger.open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,107,138,.12); border-radius: 8px 8px 0 0; }
      .sg-sel-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .sg-sel-trigger-label.placeholder { color: var(--muted); }
      .sg-sel-chevron { flex-shrink: 0; width: 14px; height: 14px; transition: transform .2s; color: var(--muted); }
      .sg-sel-trigger.open .sg-sel-chevron { transform: rotate(180deg); }
      .sg-sel-dropdown {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border: 1px solid var(--primary); border-top: none;
        border-radius: 0 0 8px 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
        z-index: 9000; max-height: 300px; overflow: hidden;
        flex-direction: column;
      }
      .sg-sel-dropdown.dropup {
        top: auto; bottom: 100%;
        border-top: 1px solid var(--primary); border-bottom: none;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -6px 20px rgba(0,0,0,.12);
      }
      .sg-sel-dropdown.open { display: flex; }
      .sg-sel-search-wrap { padding: 8px 8px 6px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
      .sg-sel-search {
        width: 100%; border: 1px solid var(--line); border-radius: 6px;
        padding: 6px 32px 6px 10px; font-size: var(--font-sm); font-family: inherit;
        background: #f8fafb; color: var(--text); outline: none;
      }
      .sg-sel-search:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 2px rgba(26,107,138,.1); }
      .sg-sel-search-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
      .sg-sel-list { overflow-y: auto; flex: 1; padding: 4px 0; }
      .sg-sel-opt {
        padding: 8px 14px; font-size: var(--font-md); cursor: pointer; color: var(--text);
        display: flex; align-items: center; gap: var(--space-2); transition: background .1s;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .sg-sel-opt:hover, .sg-sel-opt.highlighted { background: rgba(26,107,138,.08); }
      .sg-sel-opt.selected { background: rgba(26,107,138,.12); font-weight: 600; color: var(--primary); }
      .sg-sel-opt.selected::before { content: "✓"; margin-right: var(--space-1); font-size: var(--font-xs); }
      .sg-sel-opt[data-disabled="true"] { color: var(--muted); cursor: default; pointer-events: none; }
      .sg-sel-opt.optgroup-label { font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; padding: 10px 14px 4px; pointer-events: none; background: none !important; }
      .sg-sel-empty { padding: 12px 14px; font-size: var(--font-sm); color: var(--muted); text-align: center; font-style: italic; }

      /* ── Theme Variables ────────────────────────────────────────────────── */
      [data-theme="sagez-green"] {
        --sagez-blue:         #5a9e30;
        --sagez-blue-dark:    #3e7020;
        --sagez-blue-mid:     #6aaa3a;
        --sagez-blue-light:   #d6f0c0;
        --sagez-orange:       #e8a849;
        --sagez-orange-dark:  #c8891e;
        --sagez-teal:         #4a8a65;
        --bg:                 #f2f7ee;
        --panel:              #ffffff;
        --sidebar:            #1c3a0d;
        --sidebar-text:       #c8e8a0;
        --sidebar-muted:      #80aa60;
        --primary:            #5a9e30;
        --primary-dark:       #3e7020;
        --line:               #c8e0b0;
        --text:               #1c2e14;
        --muted:              #5a7040;
        --good:               #1a8a4e;
        --warn:               #d08f2e;
        --bad:                #cc4d51;
        --shell-bg:           #2a5a10;
      }
      [data-theme="sagez-green"] .sidebar {
        background: linear-gradient(180deg, #1c3a0d 0%, #1f4010 60%, #224512 100%);
      }
      [data-theme="sagez-green"] .menu-dropdown-item.active {
        border-left-color: var(--sagez-orange) !important;
        background: rgba(232,168,73,.1) !important;
      }
      [data-theme="sagez-green"] .btn.primary { background: var(--primary); border-color: var(--primary-dark); }
      [data-theme="sagez-green"] .btn.primary:hover { background: var(--primary-dark); }
      [data-theme="sagez-green"] .opr-logo-badge { display: none; }
      [data-theme="sagez-green"] .logo { display: none; }
      [data-theme="sagez-green"] .toolbar { border-bottom-color: var(--line); background: var(--panel); }
      [data-theme="sagez-green"] input:focus-visible,
      [data-theme="sagez-green"] select:focus-visible,
      [data-theme="sagez-green"] textarea:focus-visible { outline-color: rgba(90,158,48,.28); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(90,158,48,.15); }
      [data-theme="sagez-green"] .sg-sel-trigger:hover,
      [data-theme="sagez-green"] .sg-sel-trigger.open { border-color: var(--primary); }
      [data-theme="sagez-green"] .sg-sel-dropdown { border-color: var(--primary); }
      [data-theme="sagez-green"] .sg-sel-opt.selected { color: var(--primary); }
      [data-theme="sagez-green"] .dashboard-bar-row .bar-fill { background: linear-gradient(90deg, #5a9e30, #8acc50); }

      /* ── Theme picker dropdown ──────────────────────────────────────────── */
      .theme-picker-btn { display: flex; align-items: center; gap: 6px; }
      .theme-swatch { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); display: inline-block; }
      #themePicker {
        position: absolute; top: 100%; right: 0; margin-top: 6px;
        background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: var(--space-2); min-width: 160px;
        z-index: 100;
      }
      .theme-opt {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 8px 12px; border: none; background: transparent; border-radius: 6px;
        cursor: pointer; font-size: var(--font-md); color: #374151; text-align: left;
      }
      .theme-opt:hover { background: #f3f4f6; }
      .theme-opt.active { background: #e0f2fe; color: #0369a1; font-weight: 600; }

      .icon-btn {
        width: 42px;
        height: 42px;
        padding: 0;
        display: inline-grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.88);
      }
      .icon-btn.primary {
        background: linear-gradient(135deg, var(--sagez-orange), var(--sagez-orange-dark));
        box-shadow: 0 4px 14px rgba(232,168,73,.30);
        border-color: var(--sagez-orange-dark);
      }
      .icon-btn .btn-icon {
        width: 18px;
        height: 18px;
        display: inline-grid;
        place-items: center;
      }
      .icon-btn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .icon-btn[data-loading="true"] .btn-icon {
        animation: toolbar-spin 0.85s linear infinite;
      }
      @keyframes toolbar-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      .stats { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
      .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: var(--space-3); box-shadow: var(--shadow-sm); border-top: 2px solid var(--sagez-blue); }
      .stat .label { color: var(--muted); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.5px; }
      .stat .value { margin-top: 7px; font-size: 26px; font-weight: 700; }
      .stat.good .value { color: var(--good); }
      .stat.warn .value { color: var(--warn); }
      .stat.bad .value { color: var(--bad); }

      /* ═══════════════════════════════════════════════════════════════════
         Canonical card system — see docs/UI_AUDIT_2026.md §4.5
         All container families (panel / cw-card / card) share these rules.
         Variants: .card-inset (subtle bg) / .card-kpi (compact metric).
         ═══════════════════════════════════════════════════════════════════ */
      .panel,
      .cw-card,
      .card {
        margin-top: var(--space-3);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        box-shadow: var(--shadow-sm);
      }
      .panel h3, .cw-card h3, .card h3 {
        margin: 0 0 var(--space-3);
        font-size: var(--font-lg);
        font-family: "Rajdhani","Inter",sans-serif;
        font-weight: 600;
        color: var(--text);
      }
      .panel h4, .cw-card h4, .card h4 {
        margin: 0 0 var(--space-2);
        font-size: var(--font-md);
        font-family: "Rajdhani","Inter",sans-serif;
        font-weight: 600;
      }
      .card-inset, .panel.inset, .cw-card.inset {
        background: var(--surface-2);
        box-shadow: none;
      }
      .card-kpi, .panel.kpi {
        padding: var(--space-3);
        margin-top: 0;
      }

      /* ═══════════════════════════════════════════════════════════════════
         Canonical table system — see docs/UI_AUDIT_2026.md §4.5
         Default density is "comfy"; add .table-compact for denser rows.
         ═══════════════════════════════════════════════════════════════════ */
      table { width: 100%; border-collapse: collapse; }
      th, td {
        font-size: var(--font-sm);
        text-align: left;
        padding: var(--space-2);
        border-bottom: 1px solid var(--line);
        vertical-align: top;
      }
      th {
        color: var(--text-muted);
        font-weight: 600;
      }
      table.table-compact th, table.table-compact td {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-xs);
      }
      table.table-fixed { table-layout: fixed; }
      tr.row-clickable { cursor: pointer; }
      tr.row-clickable:hover td,
      tr.row-clickable:focus-within td {
        background: var(--bg-subtle);
      }
      /* ─── Canonical badge / chip / status-pill — see UI_AUDIT §4.5 ─── */
      .badge, .chip {
        display: inline-flex;
        align-items: center;
        font-size: var(--font-xs);
        padding: 2px var(--space-2);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text);
        line-height: 1.4;
      }
      .badge.good, .chip.good { background: rgba(26, 138, 78, .12);  color: var(--good); }
      .badge.warn, .chip.warn { background: rgba(208, 143, 46, .14); color: var(--warn); }
      .badge.bad,  .chip.bad  { background: rgba(204, 77, 81, .12);  color: var(--bad); }
      .badge.info, .chip.info { background: rgba(26, 139, 175, .12); color: var(--info); }
      tr.row-ok td { background: #eefaf2; }
      tr.row-warn td { background: #fff8e8; }
      tr.row-bad td { background: #ffefef; }
      tr.row-selected td { outline: 2px solid #1a6b8a; outline-offset: -2px; }
      tr.clickable-row { cursor: pointer; }
      tr.clickable-row:focus-within td,
      tr.clickable-row:hover td {
        background: #f0f6fa;
      }

      .pages { margin-top: var(--space-3); }
      .page { display: none; }
      .page.active { display: block; }

      /* ── Phase 11: .split / .triple as token-driven 12-col grids ─────────
         Default behaviour preserved (.split = two equal columns, .triple = three).
         Children can opt into different widths with .cw-field-xs/-sm/-md/-lg/-full
         without any markup change. */
      .split, .triple { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
      .split > * { grid-column: span 6; }
      .triple > * { grid-column: span 4; }
      .split > .cw-field-xs,   .triple > .cw-field-xs   { grid-column: span 2; }
      .split > .cw-field-sm,   .triple > .cw-field-sm   { grid-column: span 3; }
      .split > .cw-field-md,   .triple > .cw-field-md   { grid-column: span 4; }
      .split > .cw-field-lg,   .triple > .cw-field-lg   { grid-column: span 8; }
      .split > .cw-field-full, .triple > .cw-field-full { grid-column: 1 / -1; }
      label { display: block; font-size: var(--font-sm); color: #637267; margin-bottom: 6px; }
      label.is-required::after,
      label[data-required="true"]::after {
        content: " *";
        color: var(--bad);
        font-weight: 800;
      }
      .required-hint {
        color: var(--muted);
        font-size: var(--font-xs);
      }
      input, select, textarea { width: 100%; border: 1px solid #ced8ce; border-radius: 8px; padding: 9px; font-size: var(--font-md); }
      textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
      .llm-editor-card {
        max-width: 960px;
        margin-top: var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background:
          linear-gradient(135deg, rgba(26, 107, 138, .08), rgba(90, 158, 48, .06)),
          var(--surface);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
      }
      .llm-editor-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, .72);
      }
      .llm-editor-kicker {
        margin-bottom: 2px;
        color: var(--sagez-blue);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .llm-editor-head h4 {
        margin: 0;
        color: var(--text);
      }
      .llm-editor-head .note {
        margin: 2px 0 0;
        max-width: 520px;
      }
      .llm-editor-actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-shrink: 0;
      }
      .llm-form-grid {
        display: grid;
        grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr);
        gap: var(--space-3);
        padding: var(--space-4);
      }
      .llm-form-section {
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, .78);
        padding: var(--space-3);
      }
      .llm-form-section-title {
        margin: 0 0 var(--space-2);
        color: var(--text);
        font-family: "Rajdhani", "Inter", sans-serif;
        font-size: var(--font-md);
        font-weight: 700;
      }
      .llm-form-grid-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
      }
      .llm-form-grid-fields.one {
        grid-template-columns: 1fr;
      }
      .llm-form-grid-fields.compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .llm-editor-card label {
        margin-bottom: 3px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .llm-editor-card input,
      .llm-editor-card select {
        min-height: 34px;
        padding: 7px 9px;
        border-color: var(--line);
        background: var(--surface);
        font-size: var(--font-sm);
      }
      .llm-editor-card .sg-sel-trigger {
        min-height: 34px;
      }
      .llm-editor-msg {
        margin: 0;
        padding: 0 var(--space-4) var(--space-4);
      }

      .role-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
      .note { color: var(--muted); font-size: var(--font-sm); }
      .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: var(--space-3); }
      .detail-card { border: 1px solid var(--line); border-radius: 6px; background: #f8fbfd; padding: 10px; min-height: 84px; }
      .detail-card .label { color: var(--muted); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.5px; }
      .detail-card .value { margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.35; word-break: break-word; }
      .dashboard-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
      .dashboard-bars { display: flex; flex-direction: column; gap: var(--space-2); }
      .dashboard-bar-row { display: grid; grid-template-columns: minmax(110px, 1fr) 64px 1fr; align-items: center; gap: var(--space-2); }
      .dashboard-bar-row .bar-label { font-size: var(--font-sm); color: #2f4031; word-break: break-word; }
      .dashboard-bar-row .bar-count { font-size: var(--font-sm); color: var(--muted); text-align: right; }
      .dashboard-bar-row .bar-track { position: relative; height: 10px; border-radius: 999px; background: #edf3ed; overflow: hidden; }
      .dashboard-bar-row .bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #1a6b8a, #4eafd4); }
      .dashboard-attention td:first-child { min-width: 240px; }
      .dashboard-overview {
        margin-top: var(--space-3);
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: var(--space-3);
      }
      .dashboard-hero {
        background: linear-gradient(135deg, #0c3044, #133d54 50%, #1a4f6b);
        color: #e8f4f8;
        border-color: #213226;
      }
      .dashboard-hero .note,
      .dashboard-hero .detail-card .label,
      .dashboard-hero .scope-chip {
        color: #d1e2d0;
      }
      .dashboard-hero-copy {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
      }
      .dashboard-hero-copy > div {
        min-width: 0;
      }
      .dashboard-kicker {
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #cfe1ce;
      }
      .dashboard-hero-total {
        margin-top: var(--space-2);
        font-size: 54px;
        font-weight: 700;
        line-height: 0.95;
      }
      .dashboard-hero-caption {
        margin-top: var(--space-2);
        font-size: var(--font-md);
        color: #dbe9da;
        max-width: 720px;
        line-height: 1.4;
      }
      .dashboard-hero-stats {
        margin-top: var(--space-4);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }
      .hero-stat {
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(6px);
      }
      .hero-stat .label {
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #d5e5d3;
      }
      .hero-stat .value {
        margin-top: 6px;
        font-size: var(--font-xl);
        font-weight: 700;
        color: #fff;
      }
      .dashboard-scope-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--space-2);
      }
      .scope-chip {
        border-radius: 999px;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: var(--font-xs);
        line-height: 1.2;
      }
      .scope-chip strong {
        display: block;
        color: #fff;
        font-size: var(--font-sm);
        margin-top: 2px;
      }
      .report-callouts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: var(--space-3);
      }
      .report-callout {
        border: 1px solid #e4ebe1;
        border-radius: 14px;
        background: linear-gradient(180deg, #fcfdfe, #f4f8fc);
        padding: var(--space-3);
        min-height: 150px;
      }
      .report-callout.ticket-hover-target {
        transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      }
      .report-callout.ticket-hover-target:hover,
      .report-callout.ticket-hover-target:focus,
      .report-callout.ticket-hover-target:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 12px 30px rgba(44, 67, 49, 0.08);
        border-color: #bfd2bb;
      }
      .report-callout .eyebrow {
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: var(--muted);
      }
      .report-callout h4 {
        margin: 8px 0 0;
        font-size: 18px;
        line-height: 1.2;
      }
      .report-callout p {
        margin: 10px 0 0;
        font-size: var(--font-sm);
        line-height: 1.5;
        color: #425244;
      }
      .report-callout-meta {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        font-size: var(--font-xs);
        color: var(--muted);
      }
      .report-callout-actions {
        margin-top: var(--space-3);
        display: flex;
        justify-content: flex-start;
      }
      .report-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: var(--space-3);
        margin-top: var(--space-3);
      }
      .my-routine-work-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      }
      /* ── Cases master-detail split layout ──────────────────────────────── */
      .cases-layout-split {
        display: flex;
        gap: var(--space-4);
        align-items: flex-start;
        margin-top: var(--space-3);
      }
      .cases-workspace-main { flex: 1; min-width: 0; }
      .cases-detail-panel {
        width: 420px;
        flex-shrink: 0;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        position: sticky;
        top: 16px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-color, #e5e7eb) transparent;
        display: none;
      }
      .cases-detail-panel.open { display: flex; flex-direction: column; }
      .cases-detail-panel::-webkit-scrollbar { width: 5px; }
      .cases-detail-panel::-webkit-scrollbar-thumb { background: var(--border-color, #e5e7eb); border-radius: 4px; }
      .cases-detail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px 10px;
        border-bottom: 1px solid var(--line);
        position: sticky;
        top: 0;
        background: var(--panel);
        z-index: 2;
        gap: var(--space-2);
      }
      .cases-detail-header h4 { margin: 0; font-size: var(--font-md); font-weight: 700; flex: 1; }
      .cases-detail-header .cases-detail-close {
        background: none; border: none; cursor: pointer; font-size: 18px; color: var(--muted);
        line-height: 1; padding: 2px 6px; border-radius: 4px; transition: background .15s;
      }
      .cases-detail-header .cases-detail-close:hover { background: var(--bg); color: var(--text); }
      .cases-detail-body { padding: 14px 16px; flex: 1; }
      .cases-detail-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
      .cases-detail-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
      .cases-detail-section h5 { font-size: var(--font-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 8px; }
      @media (max-width: 1100px) {
        .cases-layout-split { flex-direction: column; }
        .cases-detail-panel { width: 100%; position: static; max-height: none; }
      }
      /* Highlighted list row when detail panel is open */
      .ua-row-active { background: var(--accent-subtle, rgba(59,130,246,.08)) !important; }

      .workspace-view-toggle,
      .cases-view-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1);
        border-radius: 999px;
        background: #f0f5f9;
        border: 1px solid #dbe5d8;
      }
      .workspace-view-btn,
      .cases-view-btn {
        min-width: 88px;
        border-radius: 999px;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
      }
      .workspace-view-btn[data-active="true"],
      .cases-view-btn[data-active="true"] {
        background: linear-gradient(135deg, #1a8baf, #0d4a5f);
        color: #fff;
        border-color: #0d4a5f;
        box-shadow: 0 6px 20px rgba(26, 107, 138, 0.22);
      }
      .workspace-scope-chips,
      .cases-scope-chips {
        margin-top: var(--space-3);
        justify-content: flex-start;
      }
      .workspace-scope-chips .scope-chip,
      .cases-scope-chips .scope-chip {
        background: #f6faf4;
        border-color: #dbe6d6;
        color: #58705c;
      }
      .workspace-scope-chips .scope-chip strong,
      .cases-scope-chips .scope-chip strong {
        color: #233326;
      }
      /* ── Collapsible filter bar ──────────────────────────── */
      details.filter-bar {
        margin-bottom: var(--space-2);
      }
      details.filter-bar > summary {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        user-select: none;
        font-size: var(--font-sm);
        font-weight: 600;
        color: var(--text-secondary, #5a6b5e);
        padding: 5px 8px;
        border-radius: 6px;
        background: var(--bg-subtle, #f5f7f5);
        border: 1px solid var(--border, #dde5da);
        list-style: none;
        transition: background 0.15s;
      }
      details.filter-bar > summary::-webkit-details-marker { display: none; }
      details.filter-bar > summary::before {
        content: "▶";
        font-size: 9px;
        transition: transform 0.2s;
        display: inline-block;
      }
      details.filter-bar[open] > summary::before { transform: rotate(90deg); }
      details.filter-bar > summary:hover { background: var(--border, #dde5da); }
      details.filter-bar .filter-body {
        padding: 10px 0 4px;
      }
      details.filter-bar .filter-chips,
      .ftoolbar .filter-chips {
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        margin-left: var(--space-2);
      }
      details.filter-bar .filter-chip,
      .ftoolbar .filter-chip {
        font-size: var(--font-xs);
        font-weight: 400;
        background: var(--accent-light, #e8f0e6);
        color: var(--accent, #2d6a4f);
        border-radius: 10px;
        padding: 1px 7px;
        border: 1px solid var(--accent-border, #b7d5c4);
      }

      /* ── Filter Toolbar ─────────────────────────────────────────────── */
      .ftoolbar {
        display: flex;
        align-items: center;
        gap: 3px;
        flex-wrap: wrap;
        margin-bottom: 10px;
      }
      /* .ftoolbar-btn rules consolidated into the canonical button system. */
      .ftoolbar-sep {
        width: 1px;
        height: 16px;
        background: var(--line);
        margin: 0 3px;
        flex-shrink: 0;
      }
      .finance-payable-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin: 12px 0 10px;
      }
      .finance-payable-toolbar-group,
      .finance-payable-filter-group,
      .finance-payable-month {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        min-width: 0;
      }
      .finance-payable-filter-group {
        justify-content: flex-end;
      }
      .finance-payable-toolbar .sg-sel {
        display: inline-flex;
        width: clamp(150px, 18vw, 230px);
        min-width: 150px;
        flex: 0 1 230px;
      }
      .finance-payable-toolbar .sg-sel-trigger {
        min-width: 0;
        width: 100%;
      }
      .finance-payable-toolbar .sg-sel-dropdown {
        min-width: max(100%, 210px);
      }
      .finance-payable-filter,
      .finance-payable-search,
      .finance-payable-month input {
        height: 30px;
        font-size: var(--font-sm);
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--panel);
        color: var(--text);
      }
      .finance-payable-filter {
        min-width: 132px;
      }
      .finance-payable-search {
        width: clamp(150px, 16vw, 220px);
        padding: 4px 9px;
      }
      .finance-payable-month {
        padding: 2px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(244, 246, 248, 0.65);
      }
      .finance-payable-month .ftoolbar-btn {
        width: 28px;
        min-width: 28px;
        justify-content: center;
        border-color: transparent;
        background: transparent;
      }
      .finance-payable-month input {
        width: 136px;
        border-color: transparent;
        background: transparent;
        padding: 2px 4px;
      }
      .finance-payable-kpis {
        display: grid;
        grid-template-columns: repeat(7, minmax(145px, 1fr));
        gap: 10px;
        margin: 10px 0 14px;
      }
      .finance-kpi-card {
        min-width: 0;
        min-height: 92px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        padding: 11px 12px;
        box-shadow: 0 1px 2px rgba(13, 45, 65, 0.04);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 7px;
      }
      .finance-kpi-card-due {
        border-color: rgba(245, 158, 11, 0.35);
        background: rgba(245, 158, 11, 0.055);
      }
      .finance-kpi-card-total {
        border-color: rgba(26, 107, 138, 0.35);
        background: rgba(26, 107, 138, 0.065);
      }
      .finance-kpi-card-alert {
        border-color: rgba(239, 68, 68, 0.22);
      }
      .finance-kpi-card.is-muted {
        opacity: 0.72;
      }
      .finance-kpi-label {
        color: var(--muted);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .finance-kpi-value {
        color: var(--text);
        font-size: 18px;
        font-weight: 800;
        line-height: 1.18;
        overflow-wrap: anywhere;
      }
      .finance-kpi-value-multi {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: var(--font-lg);
      }
      .finance-kpi-currency-line {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .finance-kpi-card-total .finance-kpi-value {
        color: var(--primary);
      }
      .finance-kpi-card-alert .finance-kpi-value {
        color: var(--bad);
      }
      .finance-kpi-meta {
        color: var(--muted);
        font-size: var(--font-xs);
        line-height: 1.25;
      }
      .finance-payable-table-wrap {
        overflow-x: auto;
        border-top: 1px solid var(--line);
      }
      .finance-payable-table {
        width: 100%;
        min-width: 1120px;
        font-size: var(--font-xs);
      }
      .finance-payable-table th {
        color: #5f6f61;
        font-size: var(--font-xs);
        font-weight: 700;
        background: rgba(248, 251, 253, 0.75);
      }
      .finance-payable-table td {
        vertical-align: middle;
      }
      .finance-payable-row-forecast {
        background: rgba(26, 107, 138, 0.035);
        color: var(--muted);
        font-style: italic;
      }
      .finance-payable-row-forecast td {
        border-top-color: rgba(26, 107, 138, 0.08);
      }
      .fin-rec-actions {
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        min-width: 132px;
      }
      .fin-rec-action {
        width: 30px;
        height: 30px;
        padding: 0;
        display: inline-grid;
        place-items: center;
        border-radius: 6px;
      }
      .fin-rec-action svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .fin-rec-action.primary:hover,
      .fin-rec-action.primary:focus-visible {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
      }
      .fin-rec-action.danger {
        color: var(--bad);
      }
      .fin-rec-action.danger:hover,
      .fin-rec-action.danger:focus-visible {
        background: #fef2f2;
        border-color: var(--bad);
        color: var(--bad);
      }
      .finance-notes-column {
        min-width: 170px;
        width: 18%;
      }
      .finance-note-cell {
        max-width: 260px;
        color: var(--text-muted, var(--muted));
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .finance-note-cell.empty {
        color: var(--muted);
        opacity: 0.65;
      }
      .finance-payable-editor {
        margin-top: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: 0 10px 24px rgba(13, 45, 65, 0.08);
        overflow: hidden;
      }
      .finance-payable-editor-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(26, 107, 138, 0.06), rgba(255, 255, 255, 0));
      }
      .finance-payable-editor-head h4 {
        margin: 1px 0 0;
        font-size: 20px;
        line-height: 1.1;
      }
      .finance-form-kicker,
      .finance-summary-kicker,
      .finance-section-title {
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .finance-editor-close {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        flex: 0 0 auto;
      }
      .finance-payable-editor-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 14px;
        padding: 14px 16px 12px;
        align-items: start;
      }
      .finance-payable-fields {
        display: grid;
        gap: var(--space-3);
        min-width: 0;
      }
      .finance-form-section {
        display: grid;
        gap: var(--space-2);
      }
      .finance-field-grid {
        display: grid;
        gap: var(--space-2);
      }
      .finance-field-grid-document {
        grid-template-columns: minmax(110px, 0.55fr) minmax(260px, 2fr) minmax(170px, 1fr) minmax(150px, 0.9fr);
      }
      .finance-field-grid-financials {
        grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.8fr) minmax(86px, 0.55fr) minmax(150px, 1fr) minmax(130px, 0.9fr);
      }
      .finance-field-grid-dates {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
      }
      .finance-field {
        display: grid;
        gap: var(--space-1);
        min-width: 0;
      }
      .finance-field span {
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
      }
      .finance-field input,
      .finance-field select {
        width: 100%;
        min-width: 0;
        height: 34px;
        font-size: var(--font-sm);
        padding: 6px 9px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--panel);
        color: var(--text);
      }
      .finance-notes-field {
        margin-top: 2px;
      }
      .finance-payable-summary {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: var(--space-3);
        background: rgba(26, 107, 138, 0.04);
      }
      .finance-payable-summary strong {
        display: block;
        margin-top: 2px;
        color: var(--primary);
        font-size: 24px;
        line-height: 1.1;
        font-family: "Rajdhani", "Inter", sans-serif;
      }
      .finance-payable-summary dl {
        margin: 12px 0 0;
        display: grid;
        gap: 7px;
      }
      .finance-payable-summary dl div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        border-top: 1px solid rgba(86, 112, 128, 0.16);
        padding-top: 7px;
      }
      .finance-payable-summary dt {
        margin: 0;
        color: var(--muted);
        font-size: var(--font-xs);
      }
      .finance-payable-summary dd {
        margin: 0;
        color: var(--text);
        font-size: var(--font-xs);
        font-weight: 700;
        text-align: right;
      }
      .finance-payable-editor-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-2);
        padding: 12px 16px 14px;
        border-top: 1px solid var(--line);
        background: rgba(244, 246, 248, 0.7);
      }
      .finance-payable-editor-actions .note {
        margin: 0 auto 0 0;
        min-height: 18px;
        font-size: var(--font-xs);
      }
      @media (max-width: 1180px) {
        .finance-payable-kpis {
          grid-template-columns: repeat(3, minmax(170px, 1fr));
        }
        .finance-payable-editor-body {
          grid-template-columns: 1fr;
        }
        .finance-payable-summary {
          display: grid;
          grid-template-columns: 180px 1fr;
          align-items: start;
          gap: 4px 16px;
        }
        .finance-payable-summary dl {
          margin-top: 0;
        }
      }
      @media (max-width: 920px) {
        .finance-payable-toolbar {
          grid-template-columns: 1fr;
          align-items: stretch;
        }
        .finance-payable-toolbar-group,
        .finance-payable-filter-group {
          width: 100%;
          justify-content: flex-start;
          flex-wrap: wrap;
        }
        .finance-payable-toolbar .sg-sel {
          flex: 1 1 180px;
          width: auto;
        }
        .finance-payable-search {
          flex: 1 1 180px;
        }
        .finance-payable-kpis {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .finance-field-grid-document,
        .finance-field-grid-financials,
        .finance-field-grid-dates {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .finance-field-wide {
          grid-column: 1 / -1;
        }
      }
      @media (max-width: 620px) {
        .finance-payable-kpis {
          grid-template-columns: 1fr;
        }
        .finance-payable-month,
        .finance-payable-filter,
        .finance-payable-search,
        .finance-payable-filter-group .ftoolbar-btn {
          width: 100%;
        }
        .finance-payable-month input {
          flex: 1;
        }
        .finance-payable-editor-head,
        .finance-payable-editor-body,
        .finance-payable-editor-actions {
          padding-left: var(--space-3);
          padding-right: var(--space-3);
        }
        .finance-field-grid-document,
        .finance-field-grid-financials,
        .finance-field-grid-dates,
        .finance-payable-summary {
          grid-template-columns: 1fr;
        }
        .finance-payable-editor-actions {
          flex-wrap: wrap;
        }
        .finance-payable-editor-actions .note {
          flex-basis: 100%;
        }
      }
      .ftb-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        background: rgba(255,255,255,0.25);
        font-size: 10px;
        font-weight: 700;
        padding: 0 3px;
      }
      .ftoolbar-btn:not(.ftb-primary) .ftb-count {
        background: var(--primary);
        color: #fff;
      }
      /* When filter-bar is inside ftoolbar it becomes a button-shaped trigger */
      .ftoolbar details.filter-bar {
        margin-bottom: 0;
        position: relative;
      }
      .ftoolbar details.filter-bar > summary {
        height: 28px;
        padding: 0 10px;
        border-radius: 6px;
        font-size: var(--font-sm);
        font-weight: 500;
        background: var(--panel);
        border: 1px solid var(--line);
        color: var(--muted);
        gap: 5px;
        transition: background 0.12s, border-color 0.12s, color 0.12s;
      }
      .ftoolbar details.filter-bar > summary:hover,
      .ftoolbar details.filter-bar[open] > summary {
        background: var(--bg);
        border-color: var(--primary);
        color: var(--primary);
      }
      .ftoolbar details.filter-bar[open] > summary {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
      }
      .ftoolbar details.filter-bar .filter-body {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 60;
        background: var(--panel);
        border: 1px solid var(--line);
        border-top: none;
        border-radius: 0 6px 6px 6px;
        padding: 12px 14px 10px;
        box-shadow: var(--shadow-md);
        width: min(720px, calc(100vw - 32px));
        min-width: min(640px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
      }
      .ftoolbar details.filter-bar .filter-body .split > *,
      .ftoolbar details.filter-bar .filter-body .triple > * {
        min-width: 0;
      }
      .ftoolbar details.filter-bar .filter-body input,
      .ftoolbar details.filter-bar .filter-body select,
      .ftoolbar details.filter-bar .filter-body textarea,
      .ftoolbar details.filter-bar .filter-body .sg-sel,
      .ftoolbar details.filter-bar .filter-body .sg-sel-trigger {
        min-width: 0;
        max-width: 100%;
      }
      .ftoolbar details.filter-bar .filter-body .sg-sel {
        display: block;
        width: 100%;
        flex-shrink: 1;
      }
      .ftoolbar details.filter-bar .filter-body .sg-sel-trigger-label {
        min-width: 0;
      }
      @media (max-width: 720px) {
        .ftoolbar details.filter-bar .filter-body {
          width: calc(100vw - 24px);
          min-width: calc(100vw - 24px);
          max-width: calc(100vw - 24px);
          left: 0;
        }
        .ftoolbar details.filter-bar .filter-body .split,
        .ftoolbar details.filter-bar .filter-body .triple {
          grid-template-columns: 1fr;
        }
        .ftoolbar details.filter-bar .filter-body .split > *,
        .ftoolbar details.filter-bar .filter-body .triple > * {
          grid-column: 1 / -1;
        }
      }

      /* ── Auto-Refresh Menu ── */
      .ar-menu-item { display: block; width: 100%; padding: 6px 12px; background: transparent; border: none; border-radius: 5px; font-size: var(--font-sm); color: var(--text); text-align: left; cursor: pointer; font-family: inherit; white-space: nowrap; }
      .ar-menu-item:hover { background: var(--hover, rgba(0,0,0,.06)); }
      .ar-menu-item.ar-active { font-weight: 700; color: var(--primary); }
      .ar-menu-item.ar-active::before { content: "◉ "; }
      .ar-menu-item:not(.ar-active).ar-interval::before { content: "○ "; color: var(--muted); }
      .ar-menu-sep { height: 1px; background: var(--line); margin: 4px 0; }

      /* ── Timesheet Calendar ── */
      .ts-work-layout { display: grid; grid-template-columns: 200px 1fr; gap: 10px; margin: 6px 0 4px; align-items: start; }
      .ts-work-sidebar { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; }
      .ts-work-sidebar .detail-card { padding: 8px 10px; }
      .ts-work-sidebar .detail-card .label { font-size: 9px; }
      .ts-work-sidebar .detail-card .value { font-size: var(--font-lg); }
      .ts-work-main { min-width: 0; }
      @media (max-width: 900px) { .ts-work-layout { grid-template-columns: 1fr; } }
      .ts-cal { margin: 0; }
      .ts-cal-head { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 2px; }
      .ts-cal-dh { text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); padding: 3px 0; text-transform: uppercase; letter-spacing: 0.05em; }
      .ts-cal-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 2px; }
      .ts-cal-day { min-height: 50px; padding: 3px 4px 2px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; background: var(--surface); transition: background 0.1s, border-color 0.1s; box-sizing: border-box; }
      .ts-cal-day:hover { background: var(--hover, rgba(0,0,0,.04)); border-color: var(--primary); }
      .ts-cal-day.ts-cal-other { opacity: 0.25; pointer-events: none; }
      .ts-cal-day.ts-cal-today { border-color: var(--primary); }
      .ts-cal-day.ts-cal-selected { background: var(--primary-bg, rgba(59,130,246,.08)); border-color: var(--primary); border-width: 2px; }
      .ts-cal-dn { font-size: var(--font-xs); font-weight: 600; color: var(--text); line-height: 1; }
      .ts-cal-day.ts-cal-today .ts-cal-dn { color: var(--primary); }
      .ts-cal-hours { font-size: var(--font-md); font-weight: 700; color: var(--text); margin: 3px 0 2px; line-height: 1; }
      .ts-cal-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
      .ts-cal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
      .ts-cal-dot.draft    { background: var(--muted); }
      .ts-cal-dot.submitted { background: #3b82f6; }
      .ts-cal-dot.approved  { background: #22c55e; }
      .ts-cal-dot.rejected  { background: #ef4444; }
      /* Day panel */
      .ts-day-panel { border-top: 2px solid var(--primary); margin-top: var(--space-1); padding-top: 6px; }
      .ts-day-entries { display: flex; flex-direction: column; gap: 3px; margin-top: var(--space-1); }
      .ts-day-entry { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; font-size: var(--font-xs); background: var(--surface); flex-wrap: wrap; }
      .ts-day-entry-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
      .ts-day-entry-scope { font-weight: 600; flex: 1; min-width: 80px; }
      .ts-day-entry-activity { color: var(--muted); flex-shrink: 0; font-size: 10px; }
      .ts-day-entry-hours { font-weight: 700; flex-shrink: 0; }
      .ts-day-entry-desc { color: var(--muted); flex: 2; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
      .ts-day-entry-status { flex-shrink: 0; font-size: 10px; }
      .ts-day-entry-actions { display: flex; gap: 3px; margin-left: auto; }
      /* Compact quick-form */
      /* Single-line timesheet entry form */
      .ts-inline-form { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
      .ts-inline-form input, .ts-inline-form select { height: 24px; font-size: 10px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface, #fff); }
      .ts-inline-form input[type="date"] { width: 110px; }
      .ts-inline-form select { max-width: 120px; }
      .ts-inline-form input[type="number"] { width: 50px; }
      /* Legacy classes kept for backward compat */
      .ts-quick-form { display: grid; grid-template-columns: 90px 1fr 1fr 1fr 60px 1fr; gap: 4px 6px; align-items: end; }
      .ts-quick-form input, .ts-quick-form select { height: 24px; font-size: 10px; padding: 1px 4px; }
      .ts-quick-form-desc { display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; align-items: end; margin-top: var(--space-1); }
      .ts-quick-form-desc input { height: 24px; font-size: 10px; padding: 1px 4px; }
      .ts-quick-form label, .ts-quick-form-desc label { font-size: 9px; color: var(--muted); display: block; margin-bottom: 0; }
      @media (max-width: 900px) {
        .ts-quick-form { grid-template-columns: 1fr 1fr 1fr; }
      }

      .workspace-card-grid {
        margin-top: var(--space-3);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-3);
      }
      .workspace-card {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: linear-gradient(180deg, var(--panel), var(--bg));
        padding: 14px;
        box-shadow: 0 12px 24px rgba(28, 42, 31, 0.06);
        transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      }
      .workspace-card.ticket-hover-target:hover,
      .workspace-card.ticket-hover-target:focus,
      .workspace-card.ticket-hover-target:focus-visible,
      .workspace-card:hover,
      .workspace-card:focus-within {
        transform: translateY(-1px);
        box-shadow: 0 18px 30px rgba(31, 45, 33, 0.09);
        border-color: var(--primary);
      }
      .workspace-card[data-selected="true"] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(26, 107, 138, 0.14), 0 18px 30px rgba(31, 45, 33, 0.09);
      }
      [data-theme="sagez-green"] .workspace-card[data-selected="true"] {
        box-shadow: 0 0 0 3px rgba(90, 158, 48, 0.14), 0 18px 30px rgba(31, 45, 33, 0.09);
      }
      .workspace-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }
      .workspace-card-kicker {
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: var(--muted);
      }
      .workspace-card-title {
        margin-top: var(--space-1);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
        color: #1f2b22;
      }
      .workspace-card-code {
        margin-top: var(--space-1);
        font-size: var(--font-sm);
        color: var(--muted);
      }
      .workspace-card-summary {
        margin-top: 10px;
        font-size: var(--font-md);
        line-height: 1.5;
        color: #344436;
      }
      .workspace-card-meta {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .workspace-card-stats {
        margin-top: var(--space-3);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
      }
      .workspace-card-stat {
        border-radius: 14px;
        padding: 10px;
        background: #f5f9f3;
        border: 1px solid #e1ebdd;
      }
      .workspace-card-stat .label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--muted);
      }
      .workspace-card-stat .value {
        margin-top: var(--space-1);
        font-size: 15px;
        font-weight: 700;
        color: #223225;
      }
      .workspace-card-footer {
        margin-top: var(--space-3);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
      }
      .workspace-card-footnote {
        font-size: var(--font-xs);
        color: var(--muted);
      }
      .workspace-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: flex-end;
      }
      .kanban-chip.health-green {
        background: #eef7e9;
        border-color: #d2e4c7;
        color: #4d6c32;
      }
      .kanban-chip.health-amber {
        background: #fff2e3;
        border-color: #f0d1aa;
        color: #975c13;
      }
      .kanban-chip.health-red {
        background: #fdeaea;
        border-color: #efc5c5;
        color: #9f2f2f;
      }
      .kanban-chip.health-blue {
        background: #ebf3ff;
        border-color: #cdddf9;
        color: #285c97;
      }
      .kanban-board {
        margin-top: var(--space-3);
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(296px, 1fr);
        gap: var(--space-3);
        overflow-x: auto;
        padding-bottom: var(--space-2);
        align-items: start;
      }
      .kanban-column {
        min-width: 296px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: linear-gradient(180deg, var(--panel), var(--bg));
        padding: var(--space-3);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
      }
      .kanban-column[data-drop-active="true"] {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(26, 107, 138, 0.12);
      }
      [data-theme="sagez-green"] .kanban-column[data-drop-active="true"] {
        box-shadow: 0 0 0 4px rgba(90, 158, 48, 0.12);
      }
      .kanban-column-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
      }
      .kanban-column-title {
        font-size: 15px;
        font-weight: 700;
        color: #213125;
      }
      .kanban-column-subtitle {
        margin-top: var(--space-1);
        font-size: var(--font-xs);
        color: var(--muted);
      }
      .kanban-column-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: 220px;
      }
      .kanban-column-empty {
        min-height: 92px;
        border: 1px dashed #d7e1d3;
        border-radius: 14px;
        display: grid;
        place-items: center;
        padding: 14px;
        color: var(--muted);
        font-size: var(--font-sm);
        text-align: center;
        background: rgba(255, 255, 255, 0.6);
      }
      .kanban-card {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--panel);
        padding: var(--space-3);
        box-shadow: 0 10px 22px rgba(28, 42, 31, 0.06);
        transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
      }
      .kanban-card:hover,
      .kanban-card:focus-within {
        transform: translateY(-1px);
        box-shadow: 0 16px 32px rgba(31, 45, 33, 0.09);
        border-color: var(--primary);
      }
      .kanban-card[data-selected="true"] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(26, 107, 138, 0.14), 0 16px 32px rgba(31, 45, 33, 0.09);
      }
      [data-theme="sagez-green"] .kanban-card[data-selected="true"] {
        box-shadow: 0 0 0 3px rgba(90, 158, 48, 0.14), 0 16px 32px rgba(31, 45, 33, 0.09);
      }
      .kanban-card[draggable="true"] {
        cursor: grab;
      }
      .kanban-card[draggable="true"]:active {
        cursor: grabbing;
      }
      .kanban-card[data-dragging="true"] {
        opacity: 0.55;
        transform: rotate(1deg);
      }
      .kanban-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }
      .kanban-ticket {
        font-size: var(--font-md);
        font-weight: 700;
        color: #1f2b22;
      }
      .kanban-case-type {
        margin-top: var(--space-1);
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: var(--muted);
      }
      .kanban-card-summary {
        margin-top: 10px;
        font-size: var(--font-md);
        line-height: 1.45;
        color: #334336;
      }
      .kanban-card-meta {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .kanban-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--bg);
        padding: 4px 8px;
        font-size: var(--font-xs);
        color: var(--muted);
      }
      .kanban-chip.priority-critical {
        background: #fdeaea;
        border-color: #efc5c5;
        color: #9f2f2f;
      }
      .kanban-chip.priority-high {
        background: #fff2e3;
        border-color: #f0d1aa;
        color: #975c13;
      }
      .kanban-chip.priority-medium {
        background: #f5f1de;
        border-color: #ddd2a4;
        color: #74621a;
      }
      .kanban-chip.priority-low {
        background: #eef7e9;
        border-color: #d2e4c7;
        color: #4d6c32;
      }
      .kanban-card-footer {
        margin-top: var(--space-3);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-2);
      }
      .kanban-card-footnote {
        font-size: var(--font-xs);
        color: var(--muted);
      }
      .panel-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
      }
      .panel-head h3 {
        margin-bottom: 2px;
      }
      .panel-head p {
        margin: 0;
      }
      .report-trend-shell {
        border: 1px solid #e6ece4;
        border-radius: 14px;
        padding: var(--space-3);
        background: linear-gradient(180deg, #fbfdf9, #f4f9f1);
      }
      .trend-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: var(--space-2);
        font-size: var(--font-xs);
        color: var(--muted);
      }
      .legend-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .legend-swatch {
        width: 10px;
        height: 10px;
        border-radius: 999px;
      }
      .trend-summary {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-2);
      }
      .trend-summary .detail-card {
        min-height: 0;
        background: rgba(255, 255, 255, 0.72);
      }
      .trend-svg {
        width: 100%;
        height: auto;
        display: block;
      }
      .donut-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
      }
      .donut-card {
        border: 1px solid #e6ece4;
        border-radius: 14px;
        padding: var(--space-3);
        background: linear-gradient(180deg, #fbfdf9, #f8fbf6);
      }
      .donut-title {
        font-size: var(--font-sm);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--muted);
      }
      .donut-shell {
        margin: 12px auto 0;
        width: 152px;
        height: 152px;
        border-radius: 999px;
        position: relative;
        display: grid;
        place-items: center;
      }
      .donut-shell::after {
        content: "";
        position: absolute;
        inset: 18px;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1px #edf3ed;
      }
      .donut-center {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 0 16px;
      }
      .donut-center strong {
        display: block;
        font-size: 24px;
        color: var(--text);
      }
      .donut-center span {
        display: block;
        font-size: var(--font-xs);
        color: var(--muted);
        margin-top: 2px;
      }
      .donut-legend {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-top: 14px;
      }
      .donut-legend-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--space-2);
        align-items: center;
        font-size: var(--font-sm);
      }
      .donut-legend-item strong {
        font-size: var(--font-md);
        color: var(--text);
      }
      .dashboard-spotlights {
        display: grid;
        gap: 10px;
        margin-top: 14px;
      }
      .spotlight-ticket {
        position: relative;
        overflow: hidden;
        border: 1px solid #e5ece2;
        border-radius: 14px;
        padding: var(--space-3);
        background: linear-gradient(180deg, #fff, #f7fbf5);
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      }
      .spotlight-ticket::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: #1a6b8a;
      }
      .spotlight-ticket.risk-expiring::before {
        background: #d09a38;
      }
      .spotlight-ticket.risk-breached::before {
        background: #d15a5c;
      }
      .spotlight-ticket:hover,
      .spotlight-ticket:focus,
      .spotlight-ticket:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 12px 32px rgba(44, 67, 49, 0.08);
        border-color: #bfd2bb;
      }
      .spotlight-ticket h4 {
        margin: 0;
        font-size: var(--font-md);
      }
      .spotlight-ticket .spotlight-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--space-2);
        font-size: var(--font-xs);
        color: var(--muted);
      }
      .report-table-note {
        margin-top: var(--space-2);
        font-size: var(--font-xs);
        color: var(--muted);
      }
      .ticket-hover-target {
        cursor: default;
      }
      .ticket-hover-target td {
        transition: background 0.12s ease;
      }
      .ticket-hover-target:hover td,
      .ticket-hover-target:focus-visible td,
      .ticket-hover-target:focus-within td {
        background: #f0f6fa;
      }
      .itsm-hover-card {
        position: fixed;
        z-index: 1000;
        width: min(360px, calc(100vw - 24px));
        border-radius: 14px;
        background: rgba(25, 34, 28, 0.96);
        color: #f3f8f2;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 20px 50px rgba(18, 27, 21, 0.28);
        padding: var(--space-3);
        pointer-events: none;
      }
      .itsm-hover-card.hidden {
        display: none;
      }
      .itsm-hover-card h4 {
        margin: 0;
        font-size: var(--font-md);
      }
      .hover-card-kicker {
        margin-top: 2px;
        font-size: var(--font-xs);
        color: #c4d7c2;
      }
      .hover-card-summary {
        margin-top: 10px;
        font-size: var(--font-sm);
        color: #ecf5eb;
        line-height: 1.45;
      }
      .hover-card-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        margin-top: var(--space-3);
      }
      .hover-card-metric {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        padding: var(--space-2);
      }
      .hover-card-metric .label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #c4d7c2;
      }
      .hover-card-metric .value {
        margin-top: var(--space-1);
        font-size: var(--font-sm);
        color: #fff;
        line-height: 1.4;
        word-break: break-word;
      }
      .hover-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: var(--space-3);
      }
      .hover-card-tag {
        padding: 4px 8px;
        border-radius: 999px;
        font-size: var(--font-xs);
        background: rgba(255, 255, 255, 0.08);
        color: #e8f3e6;
      }
      .chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
      /* .chip canonical rules live with .badge — see UI_AUDIT §4.5. */
      .feature-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 6px;
        border: 1px solid #ced8ce;
        border-radius: 8px;
        background: #fbfdf9;
        max-height: 380px;
        overflow: auto;
      }
      .feature-group {
        border: 1px solid #dde7db;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
      }
      .feature-group-panel {
        margin: 0;
      }
      .feature-group-summary {
        list-style: none;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px 6px;
        cursor: pointer;
      }
      .feature-group-summary::-webkit-details-marker {
        display: none;
      }
      .feature-group-summary-main {
        min-width: 0;
      }
      .feature-group-title {
        margin: 0;
        font-size: var(--font-xs);
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: #516352;
      }
      .feature-group-sub {
        margin: 2px 0 0;
        font-size: 10px;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .feature-group-count {
        flex: 0 0 auto;
        align-self: center;
        border-radius: 999px;
        border: 1px solid #dbe8d8;
        background: #f4faf0;
        color: #466248;
        padding: 2px 7px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
      }
      .feature-group-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: var(--space-1);
        padding: 0 8px 8px;
      }
      .feature-item {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);
        align-items: start;
        gap: 6px;
        font-size: var(--font-xs);
        color: #2f4031;
        border: 1px solid #e6eee4;
        border-radius: 7px;
        background: #f8fbf6;
        padding: 5px 7px;
        min-height: 0;
      }
      .feature-item input {
        margin: 2px 0 0;
        width: 14px;
        height: 14px;
      }
      .feature-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 2px;
        width: 100%;
        min-width: 0;
      }
      .feature-label-row {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        min-width: 0;
        flex-wrap: wrap;
      }
      .feature-label {
        font-weight: 700;
        color: #233524;
        font-size: var(--font-xs);
        line-height: 1.15;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .feature-type-chip {
        flex: 0 0 auto;
        border-radius: 999px;
        border: 1px solid #dde8d9;
        background: #ffffff;
        color: #59705b;
        padding: 0 5px;
        font-size: 9px;
        line-height: 1.6;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
      }
      .feature-meta {
        display: none;
      }
      .feature-key {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 9px;
        color: #7a897a;
        justify-self: start;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .role-feature-summary {
        display: grid;
        gap: 6px;
      }
      .role-feature-groups {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .role-feature-group-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2px 8px;
        border-radius: 999px;
        background: #eef5ea;
        color: #355338;
        font-size: var(--font-xs);
      }
      .role-feature-details {
        font-size: var(--font-xs);
      }
      .role-feature-details summary {
        cursor: pointer;
        color: #607061;
        user-select: none;
      }
      .role-feature-badges {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        margin-top: 6px;
      }
      .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .itsm-form-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-3);
        align-items: start;
      }
      .itsm-form-field {
        grid-column: span 2;
        min-width: 0;
      }
      .itsm-form-field.span-two {
        grid-column: span 3;
      }
      .itsm-form-field.span-all {
        grid-column: 1 / -1;
      }
      .itsm-form-field input,
      .itsm-form-field select {
        max-width: 520px;
      }
      .itsm-form-field.span-two input,
      .itsm-form-field.span-two select,
      .itsm-form-field.span-all input,
      .itsm-form-field.span-all select,
      .itsm-form-field textarea {
        max-width: none;
      }
      .itsm-advanced-fields {
        margin-top: 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--bg);
        padding: 10px 12px 12px;
      }
      .itsm-advanced-fields summary {
        cursor: pointer;
        color: #3f5f45;
        font-size: var(--font-md);
        font-weight: 700;
        user-select: none;
      }
      .itsm-advanced-fields .itsm-form-grid {
        margin-top: var(--space-3);
      }
      .itsm-editor-drawer:not(.hidden) {
        position: fixed;
        top: 18px;
        right: 18px;
        bottom: 18px;
        width: min(880px, calc(100vw - 36px));
        z-index: 160;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-top: 0 !important;
        padding: 18px;
        border: 1px solid #ccd9cc;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 24px 80px rgba(18, 44, 30, 0.26);
        overflow-y: auto;
      }
      .itsm-editor-drawer h4 {
        position: sticky;
        top: -18px;
        z-index: 1;
        margin: -18px -18px 0;
        padding: 16px 18px 12px;
        border-bottom: 1px solid #e2ebe0;
        background: rgba(255, 255, 255, 0.98);
      }
      .itsm-editor-drawer.is-dirty h4::after {
        content: "Unsaved";
        display: inline-flex;
        align-items: center;
        margin-left: 10px;
        padding: 2px 8px;
        border-radius: 999px;
        background: #fff5e4;
        color: #9a5c05;
        font-size: var(--font-xs);
        font-family: "Inter", sans-serif;
        font-weight: 700;
      }
      .itsm-editor-drawer > div:last-of-type {
        position: sticky;
        bottom: -18px;
        margin: auto -18px -18px !important;
        padding: 12px 18px 16px;
        border-top: 1px solid #e2ebe0;
        background: rgba(255, 255, 255, 0.98);
      }
      .multiselect-field {
        min-height: 112px;
      }
      .user-multiselect-search {
        width: 100%;
        box-sizing: border-box;
        padding: 6px 10px 6px 30px;
        border: 1px solid var(--input-border, #c7d9c0);
        border-radius: 6px;
        font-size: var(--font-sm);
        background: var(--input-bg, #f8fbf6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") 9px center no-repeat;
        color: var(--text-main);
        margin-bottom: 5px;
      }
      .user-multiselect-box {
        border: 1px solid var(--input-border, #c7d9c0);
        border-radius: 8px;
        background: var(--input-bg, #f8fbf6);
        padding: var(--space-1);
        max-height: 240px;
        overflow-y: auto;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 2px;
      }
      .user-multiselect-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 7px;
        border-radius: 5px;
        cursor: pointer;
        color: var(--text-main);
        user-select: none;
        min-width: 0;
        overflow: hidden;
        border: 1px solid transparent;
        transition: background .1s, border-color .1s;
      }
      .user-multiselect-item:has(input:checked) {
        background: var(--primary-tint, #e8f5e3);
        border-color: var(--primary, #4a8c3f);
      }
      .user-multiselect-item:hover {
        background: var(--hover-bg, #e8f5e3);
      }
      .user-multiselect-item input[type="checkbox"] {
        display: none;
      }
      .user-msitem-avatar {
        width: 22px;
        min-width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0;
      }
      .user-msitem-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--font-sm);
        line-height: 1.3;
      }
      .user-msitem-check {
        width: 14px;
        min-width: 14px;
        height: 14px;
        border-radius: 3px;
        border: 1.5px solid var(--input-border, #c7d9c0);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 700;
        color: transparent;
        background: var(--bg, #fff);
        flex-shrink: 0;
        transition: background .1s, border-color .1s;
      }
      .user-multiselect-item:has(input:checked) .user-msitem-check {
        background: var(--primary, #4a8c3f);
        border-color: var(--primary, #4a8c3f);
        color: #fff;
      }
      .sla-priority-matrix {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .sla-priority-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: linear-gradient(180deg, var(--panel), var(--bg));
        padding: var(--space-3);
      }
      .sla-priority-card h5 {
        margin: 0 0 10px;
        font-size: var(--font-md);
      }
      .sla-priority-card .matrix-fields {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
      }
      .sla-priority-card .matrix-fields label {
        font-size: var(--font-xs);
        margin-bottom: var(--space-1);
      }
      .sla-priority-card .matrix-fields input {
        font-size: var(--font-sm);
      }
      .sla-step-matrix {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .sla-step-row {
        display: grid;
        grid-template-columns: minmax(180px, 1.4fr) minmax(110px, .8fr) minmax(120px, .8fr) minmax(150px, 1fr);
        gap: var(--space-2);
        align-items: end;
        padding: var(--space-2);
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--bg);
      }
      .sla-step-name {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .sla-step-name strong {
        font-size: var(--font-sm);
        color: var(--text);
        overflow-wrap: anywhere;
      }
      .sla-step-name span {
        font-size: var(--font-xs);
        color: var(--text-muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }
      .sla-step-row label {
        font-size: var(--font-xs);
        margin-bottom: var(--space-1);
      }
      .sla-step-row input,
      .sla-step-row select {
        width: 100%;
        font-size: var(--font-sm);
      }
      .hidden { display: none; }
      
      /* Modern UI - Additional Polish */
      .modern-card .modern-table { margin: 0; }
      .modern-card .section-header { margin-top: -4px; }
      .modern-card p.note { margin-top: var(--space-3); }

      /* Dashboard scrollable panels — show ~10 rows then scroll */
      .dashboard-scroll-wrap {
        max-height: 440px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--border-color, #e5e7eb) transparent;
      }
      .dashboard-scroll-wrap::-webkit-scrollbar { width: 5px; }
      .dashboard-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
      .dashboard-scroll-wrap::-webkit-scrollbar-thumb { background: var(--border-color, #e5e7eb); border-radius: 4px; }
      .dashboard-scroll-wrap .modern-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--card-bg, #fff);
      }
      
      /* Smooth transitions for all interactive elements */
      .modern-btn, .quick-action-btn, .kanban-card, .kpi-card {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Better focus states */
      .modern-btn:focus-visible, .quick-action-btn:focus-visible, .modern-tab:focus-visible {
        outline: 2px solid #667eea;
        outline-offset: 2px;
      }
      
      /* Responsive adjustments */
      @media (max-width: 768px) {
        .kpi-grid { grid-template-columns: repeat(2, 1fr); }
        .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
        .kanban-board { flex-direction: column; }
        .kanban-column { min-width: 100%; }
      }
      
      body.auth-active {
        overflow: hidden;
      }
      .auth-overlay {
        position: fixed;
        inset: 0;
        z-index: 2000;
        overflow: auto;
        background:
          radial-gradient(circle at 12% 14%, rgba(135, 204, 72, 0.2), transparent 26%),
          radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.08), transparent 18%),
          radial-gradient(circle at 78% 78%, rgba(77, 123, 45, 0.2), transparent 26%),
          linear-gradient(135deg, #0c120f 0%, #142019 42%, #1d2f22 100%);
        display: block;
      }
      .auth-overlay.hidden {
        display: none;
      }
      .auth-shell {
        width: 100%;
        min-height: 100vh;
        display: grid;
        grid-template-columns: minmax(420px, 1.2fr) minmax(420px, 0.8fr);
      }
      .auth-stage {
        position: relative;
        display: grid;
        align-content: space-between;
        gap: 26px;
        padding: 56px 54px 44px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
          linear-gradient(145deg, rgba(117, 178, 64, 0.18), rgba(9, 15, 11, 0.14) 62%, rgba(255, 255, 255, 0.03));
        color: #e8f4f8;
      }
      .auth-stage::before,
      .auth-stage::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
      }
      .auth-stage::before {
        width: 360px;
        height: 360px;
        top: -120px;
        right: -90px;
        background: radial-gradient(circle, rgba(130, 198, 71, 0.24), rgba(130, 198, 71, 0));
      }
      .auth-stage::after {
        width: 260px;
        height: 260px;
        bottom: -120px;
        left: -90px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
      }
      .auth-stage-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .auth-kicker {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 8px 13px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: var(--font-xs);
        letter-spacing: 0.7px;
        text-transform: uppercase;
      }
      .auth-stage-status {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: var(--font-sm);
        color: rgba(241, 247, 237, 0.84);
      }
      .auth-stage-status::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: linear-gradient(180deg, #95d252, #74b23f);
        box-shadow: 0 0 0 4px rgba(116, 178, 63, 0.18);
      }
      .auth-stage-body {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 26px;
      }
      .auth-stage h2 {
        margin: 0 0 12px;
        font-size: clamp(40px, 5vw, 68px);
        line-height: 0.92;
        letter-spacing: -1.8px;
        font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
      }
      .auth-stage p {
        margin: 0;
        max-width: 560px;
        font-size: var(--font-lg);
        line-height: 1.6;
        color: rgba(236, 243, 233, 0.86);
      }
      .auth-stage-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
      }
      .auth-stage-card {
        border-radius: 22px;
        padding: 18px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(8px);
      }
      .auth-stage-card .label {
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: rgba(224, 236, 220, 0.78);
      }
      .auth-stage-card .value {
        margin-top: var(--space-2);
        font-size: 30px;
        font-weight: 700;
        color: #fff;
      }
      .auth-stage-card p {
        margin-top: var(--space-2);
        font-size: var(--font-sm);
        color: rgba(232, 240, 228, 0.82);
      }
      .auth-stage-list {
        display: grid;
        gap: 10px;
      }
      .auth-stage-list-item {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        align-items: start;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .auth-stage-list-item strong {
        display: block;
        font-size: var(--font-md);
        color: #fff;
      }
      .auth-stage-list-item span {
        display: block;
        margin-top: var(--space-1);
        font-size: var(--font-sm);
        line-height: 1.5;
        color: rgba(229, 237, 226, 0.82);
      }
      .auth-stage-dot {
        width: 10px;
        height: 10px;
        margin-top: var(--space-1);
        border-radius: 999px;
        background: linear-gradient(180deg, #95d252, #74b23f);
        box-shadow: 0 0 0 4px rgba(116, 178, 63, 0.18);
      }
      .auth-stage-footer {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }
      .auth-stage-footer-chip {
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: var(--font-sm);
        color: rgba(237, 244, 234, 0.82);
      }
      .auth-card {
        display: grid;
        align-content: center;
        gap: 18px;
        padding: 56px 54px 44px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 244, 0.98)),
          linear-gradient(135deg, rgba(116, 178, 63, 0.08), rgba(255, 255, 255, 0));
      }
      .auth-card-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .auth-card-head {
        display: grid;
        gap: var(--space-2);
      }
      .auth-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #59695a;
      }
      .auth-host-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 7px 11px;
        border-radius: 999px;
        border: 1px solid #dae5d7;
        background: #f3f8f1;
        color: #5d6d5e;
        font-size: var(--font-xs);
      }
      .auth-brand-mark {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #7cc748, #2f5a30);
        color: #fff;
        font-weight: 800;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
      }
      .auth-card h3 {
        margin: 0;
        font-size: 34px;
        letter-spacing: -0.8px;
        font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
      }
      .auth-card-copy {
        margin: 0;
        font-size: var(--font-md);
        line-height: 1.6;
        color: #5e6d5f;
      }
      .auth-welcome-note {
        margin: 2px 0 0;
        font-size: var(--font-sm);
        line-height: 1.6;
        color: #738174;
      }
      .auth-pills {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
      }
      .auth-pill {
        border-radius: 999px;
        padding: 7px 11px;
        background: #eef6e9;
        border: 1px solid #d7e6d1;
        font-size: var(--font-xs);
        color: #4b5b4c;
      }
      .auth-form-card {
        border-radius: 26px;
        padding: var(--space-5);
        border: 1px solid #e2eadf;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 249, 241, 0.96)),
          linear-gradient(135deg, rgba(116, 178, 63, 0.05), rgba(255, 255, 255, 0));
        box-shadow: 0 24px 60px rgba(31, 44, 32, 0.08);
      }
      .auth-signin-title {
        margin: 0 0 14px;
        font-size: var(--font-sm);
        text-transform: uppercase;
        letter-spacing: 0.9px;
        color: #708071;
      }
      .auth-form {
        display: grid;
        gap: 14px;
      }
      .auth-grid {
        display: grid;
        gap: 10px;
      }
      .auth-grid-two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .auth-credentials {
        display: grid;
        gap: var(--space-3);
      }
      .auth-field {
        display: grid;
        gap: 7px;
      }
      .auth-field label {
        margin: 0;
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: #627163;
      }
      .auth-field input {
        height: 54px;
        border-radius: 16px;
        border: 1px solid #d6e2d4;
        background: rgba(255, 255, 255, 0.92);
        padding: 0 14px;
        font-size: 15px;
        color: #1f2821;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      }
      .auth-field input:focus {
        outline: none;
        border-color: #8ec65a;
        box-shadow: 0 0 0 4px rgba(116, 178, 63, 0.14);
      }
      .auth-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .auth-actions .btn.primary {
        min-width: 200px;
        height: 52px;
        border-radius: 14px;
        font-size: var(--font-md);
        font-weight: 700;
        background: linear-gradient(135deg, #1a8baf, #0d4a5f);
        box-shadow: 0 14px 28px rgba(116, 178, 63, 0.2);
      }
      .auth-link-btn {
        border: 0;
        padding: 0;
        background: transparent;
        color: #4f7a31;
        font-size: var(--font-sm);
        font-weight: 600;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .auth-link-btn:hover,
      .auth-link-btn:focus-visible {
        color: #34551d;
        outline: none;
      }
      .auth-assist-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .auth-assist-copy {
        font-size: var(--font-sm);
        color: #6a786a;
      }
      .auth-help-box {
        border-radius: 18px;
        padding: 14px 16px;
        background: #f8fbf6;
        border: 1px solid #e1ebdd;
        font-size: var(--font-sm);
        color: #5c6b5d;
        line-height: 1.55;
      }
      .auth-help-box strong {
        color: #243324;
      }
      .auth-meta {
        padding-top: var(--space-1);
        border-top: 1px solid #e4ebe1;
        display: grid;
        gap: 14px;
      }
      .auth-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .auth-bootstrap {
        border-radius: 18px;
        padding: 14px 16px;
        background: #f5f9f2;
        border: 1px solid #dce9d7;
      }
      .auth-bootstrap strong {
        color: #1f3220;
      }
      .auth-footer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
      }
      .auth-footer-chip {
        border-radius: 999px;
        padding: 6px 10px;
        background: #f0f5ee;
        border: 1px solid #dde7db;
        font-size: var(--font-xs);
        color: #5f6f61;
      }
      .auth-copyright {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        padding-top: 2px;
        font-size: var(--font-xs);
        color: #738173;
      }
      .auth-status {
        min-height: 20px;
        margin: 0;
        font-size: var(--font-sm);
        color: #617163;
      }
      .toolbar-auth {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: var(--bg);
        min-width: auto;
        max-width: none;
      }
      .toolbar-auth .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #74b23f, #5a9431);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-md);
        font-weight: 700;
        flex-shrink: 0;
      }
      .toolbar-auth .user-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .toolbar-auth .user-name {
        font-size: var(--font-md);
        font-weight: 600;
        color: var(--text);
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
      }
      .toolbar-auth .user-role {
        font-size: 10px;
        color: var(--muted);
        line-height: 1.2;
      }
      .toolbar-auth .label,
      .toolbar-auth .meta {
        display: none;
      }
      .assistant-launcher-btn {
        background: linear-gradient(135deg, #f3b63f, #d48b16);
        border-color: #c77e11;
        color: #fff;
        box-shadow: 0 10px 22px rgba(212, 139, 22, .22);
      }
      .assistant-launcher-btn:hover {
        background: linear-gradient(135deg, #f0c158, #cf8618);
        border-color: #b86f0f;
      }
      .assistant-drawer {
        position: fixed;
        top: 88px;
        right: 18px;
        width: min(400px, calc(100vw - 28px));
        height: min(640px, calc(100vh - 110px));
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 24px 50px rgba(15, 23, 42, .18);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        z-index: 140;
      }
      .assistant-drawer.hidden { display: none; }
      .assistant-drawer-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
        padding: 16px 18px 14px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(26, 107, 138, .08), rgba(26, 107, 138, .02));
      }
      .assistant-drawer-title {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .assistant-badge {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: linear-gradient(135deg, #f3b63f, #d48b16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 22px rgba(212, 139, 22, .18);
      }
      .assistant-drawer-title h3 {
        margin: 0;
        font-size: var(--font-lg);
      }
      .assistant-drawer-title p {
        margin: 3px 0 0;
        font-size: var(--font-sm);
        color: var(--muted);
      }
      .assistant-drawer-context {
        padding: 10px 18px;
        border-bottom: 1px solid var(--line);
        font-size: var(--font-sm);
        color: var(--muted);
        background: rgba(248, 250, 252, .85);
      }
      .assistant-messages {
        flex: 1;
        overflow-y: auto;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        background: linear-gradient(180deg, rgba(248, 250, 252, .85), rgba(255, 255, 255, 1));
      }
      .assistant-message {
        max-width: 88%;
        padding: 11px 13px;
        border-radius: 14px;
        border: 1px solid var(--line);
        white-space: pre-wrap;
        word-break: break-word;
        font-size: var(--font-md);
        line-height: 1.45;
      }
      .assistant-message.assistant {
        align-self: flex-start;
        background: #f7fbff;
        border-left: 3px solid var(--sagez-blue);
      }
      .assistant-message.user {
        align-self: flex-end;
        background: #f0f8eb;
        border-left: 3px solid #5a9e30;
      }
      .assistant-empty {
        padding: 18px 16px;
        border: 1px dashed var(--line);
        border-radius: 14px;
        background: rgba(255,255,255,.78);
        color: var(--muted);
        font-size: var(--font-md);
      }
      .assistant-drawer-foot {
        border-top: 1px solid var(--line);
        padding: 14px 16px 16px;
        background: var(--panel);
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .assistant-drawer-foot textarea {
        min-height: 82px;
        resize: vertical;
      }
      .assistant-drawer-actions {
        display: flex;
        gap: var(--space-2);
        flex-wrap: wrap;
      }
      .assistant-status {
        min-height: 18px;
        margin: 0;
        font-size: var(--font-sm);
        color: var(--muted);
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }

      /* ── Hamburger Button ── */
      .hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--text); flex-shrink: 0; }
      .hamburger-btn:hover { background: var(--hover, rgba(0,0,0,.06)); }
      /* ── Sidebar Backdrop ── */
      .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 199; }
      .sidebar-backdrop:not(.hidden) { display: block; }

      @media (max-width: 980px) {
        .hamburger-btn { display: flex; align-items: center; }
        .layout { grid-template-columns: 1fr; }
        .sidebar {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          width: 260px;
          z-index: 200;
          transform: translateX(-100%);
          transition: transform 0.25s ease;
          padding: 0 0 16px;
          overflow-y: auto;
        }
        .sidebar.sidebar-open {
          transform: translateX(0);
        }
        .main {
          padding: 14px;
        }
        .menu {
          flex-direction: column;
          flex-wrap: nowrap;
          max-height: none;
          overflow: visible;
          padding-right: 0;
        }
        .menu button {
          width: 100%;
          min-height: 40px;
        }
        .menu-divider, .menu-group-title { width: 100%; }
        .split, .role-grid, .triple, .itsm-form-grid, .dashboard-grid, .dashboard-overview, .report-grid, .donut-grid, .dashboard-hero-copy, .dashboard-hero-stats, .trend-summary, .hover-card-grid, .report-callouts, .feature-group-list, .row, .sla-priority-matrix, .sla-priority-card .matrix-fields, .sla-step-row { grid-template-columns: 1fr; }
        .split > *, .triple > *,
        .split > .cw-field-xs, .split > .cw-field-sm, .split > .cw-field-md, .split > .cw-field-lg, .split > .cw-field-full,
        .triple > .cw-field-xs, .triple > .cw-field-sm, .triple > .cw-field-md, .triple > .cw-field-lg, .triple > .cw-field-full { grid-column: 1 / -1; }
        .itsm-form-field,
        .itsm-form-field.span-two,
        .itsm-form-field.span-all {
          grid-column: 1 / -1;
        }
        .itsm-editor-drawer:not(.hidden) {
          inset: 10px;
          width: auto;
        }
        .dashboard-scope-chips { justify-content: flex-start; }
        .auth-shell { grid-template-columns: 1fr; min-height: auto; }
        .auth-stage-grid { grid-template-columns: 1fr; }
        .auth-grid-two,
        .auth-meta-grid { grid-template-columns: 1fr; }
        .workspace-view-toggle,
        .cases-view-toggle {
          width: 100%;
          justify-content: stretch;
        }
        .workspace-view-btn,
        .cases-view-btn {
          flex: 1 1 0;
        }
        .toolbar {
          flex-direction: column;
          align-items: stretch;
        }
        .toolbar-actions {
          justify-content: flex-start;
          align-items: stretch;
          width: 100%;
        }
        .toolbar-auth,
        .toolbar-context {
          min-width: 0;
          max-width: none;
          width: 100%;
        }
        .assistant-drawer {
          top: 76px;
          right: 10px;
          left: 10px;
          width: auto;
          height: min(70vh, calc(100vh - 92px));
        }
        .panel-head {
          flex-direction: column;
        }
        .kanban-board {
          grid-auto-columns: minmax(280px, 82vw);
        }
        .workspace-card-stats {
          grid-template-columns: 1fr;
        }
        .dashboard-bar-row {
          grid-template-columns: 1fr;
          gap: var(--space-1);
        }
        .dashboard-bar-row .bar-count {
          text-align: left;
        }
        .feature-grid {
          max-height: none;
        }
      }
      @media (max-width: 720px) {
        .skip-link {
          left: 10px;
          right: 10px;
          width: calc(100% - 20px);
          text-align: center;
        }
        .main {
          padding: var(--space-3);
        }
        .title h1 {
          font-size: 21px;
        }
        .toolbar-auth {
          padding: 10px 12px;
        }
        .icon-btn {
          width: 38px;
          height: 38px;
          border-radius: 12px;
        }
        table {
          display: block;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }
        th,
        td {
          white-space: nowrap;
        }
        .auth-overlay {
          overflow: auto;
        }
        .auth-stage,
        .auth-card {
          padding: 26px 18px;
        }
        .auth-stage h2 {
          font-size: 36px;
        }
        .auth-actions {
          flex-direction: column;
          align-items: stretch;
        }
        .auth-actions .btn.primary {
          width: 100%;
        }
        .auth-assist-row,
        .auth-copyright,
        .auth-card-topbar,
        .auth-stage-top {
          align-items: flex-start;
        }
        .auth-form-card {
          padding: 18px;
          border-radius: 20px;
        }
        .dashboard-hero-total {
          font-size: 42px;
        }
        .dashboard-hero-caption {
          font-size: var(--font-md);
        }
      }

      /* ── One Page Report ─────────────────────────────────────── */
      .opr-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: var(--space-4); }
      .opr-toolbar select { min-width:220px; }
      .report-opr { background:#fff; border:1px solid var(--line); border-radius:6px; padding: var(--space-4); }
      /* Presentation mode — near full-screen */
      .report-present-mode { position: fixed; inset: 0; z-index: 500; background: var(--bg); overflow-y: auto; padding: 0; }
      .report-present-mode > .panel { max-width: 100%; margin: 0; border-radius: 0; box-shadow: none; padding: 0; }
      .report-present-mode #reportToolbar { display: none !important; }
      .report-present-mode .opr-toolbar { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px 20px; }
      .report-present-mode .report-opr { border: none; border-radius: 0; padding: 20px 32px; min-height: calc(100vh - 80px); }
      .report-present-mode .opr-phase-selector { padding: 0 20px; }
      .report-present-mode #reportExitPresentBtn {
        display: inline-flex !important;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 510;
        padding: 10px 20px;
        font-size: var(--font-md);
        font-weight: 600;
        background: var(--panel);
        color: var(--text);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: 0 4px 14px rgba(0,0,0,0.18);
        cursor: pointer;
        align-items: center;
        gap: 6px;
        font-family: "Inter", sans-serif;
        transition: background 0.12s, box-shadow 0.12s;
      }
      .report-present-mode #reportExitPresentBtn:hover {
        background: var(--bg);
        box-shadow: 0 6px 18px rgba(0,0,0,0.22);
      }
      .opr-header { display:grid; grid-template-columns:1fr auto; gap: var(--space-3); align-items:center; background:linear-gradient(90deg,#1a4f6b,#1a6b8a); color:#fff; border-radius:4px 4px 0 0; padding:12px 16px; margin:-16px -16px 0 -16px; }
      .opr-header-left { display:flex; flex-direction:column; gap:2px; }
      .opr-title-label { font-size:10px; font-family:'Rajdhani',sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
      .opr-project-name { font-family:'Rajdhani',sans-serif; font-weight:700; font-size: var(--font-xl); letter-spacing:.03em; }
      .opr-header-right { display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; }
      .opr-meta-box { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:4px 10px; min-width:80px; text-align:center; display:flex; flex-direction:column; gap:1px; }
      .opr-meta-label { font-size:9px; text-transform:uppercase; letter-spacing:.1em; opacity:.7; }
      .opr-meta-value { font-family:'Rajdhani',sans-serif; font-weight:600; font-size: var(--font-md); }
      .opr-rag { border-radius:4px; padding:4px 12px; min-width:72px; text-align:center; display:flex; flex-direction:column; gap:1px; border:1px solid rgba(255,255,255,.3); cursor:pointer; }
      .opr-rag-label { font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
      .opr-rag-value { font-family:'Rajdhani',sans-serif; font-weight:700; font-size: var(--font-sm); }
      .opr-rag-green { background:#1a8a4e; }
      .opr-rag-amber { background:#c8891e; }
      .opr-rag-red { background:#cc4d51; }
      .opr-rag-blue { background:#1a6b8a; }
      .opr-rag-grey { background:rgba(255,255,255,.15); }
      .opr-logo-badge { display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.95); border-radius:6px; padding:6px 12px; }
      .opr-phase-bar { display:flex; margin:12px -16px 0 -16px; overflow:hidden; }
      .opr-phase-item { flex:1; display:flex; align-items:center; justify-content:center; padding:8px 4px; font-family:'Rajdhani',sans-serif; font-weight:600; font-size: var(--font-md); color:rgba(255,255,255,.85); background:#1a4f6b; position:relative; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%); margin-right:-8px; cursor:pointer; transition:background .15s; }
      .opr-phase-item:first-child { clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%); }
      .opr-phase-item:last-child { clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%); margin-right:0; }
      .opr-phase-item.active { background:var(--sagez-orange); color:#fff; z-index:1; }
      .opr-phase-dates { font-size:9px; opacity:0.75; margin-top:1px; font-weight:400; letter-spacing:0; }
      .opr-phase-item.done { background:var(--sagez-blue-mid); }
      .opr-grid { display:grid; grid-template-columns:28% 1fr 1fr; gap:10px; margin-top: var(--space-3); }
      .opr-col-left { display:flex; flex-direction:column; gap: var(--space-2); }
      .opr-col-middle, .opr-col-right { display:flex; flex-direction:column; gap: var(--space-2); }
      .opr-col-header { font-family:'Rajdhani',sans-serif; font-weight:600; font-size: var(--font-sm); letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:3px; color:#fff; }
      .opr-col-header-orange { background:#c8891e; }
      .opr-col-header-blue { background:#1a4f6b; }
      .opr-col-header[contenteditable="true"]:focus { outline:2px solid var(--sagez-orange); }
      .opr-text-box { flex:1; min-height:90px; border:1px dashed #c5d8e8; border-radius:3px; padding: var(--space-2); font-size: var(--font-sm); color:var(--text); line-height:1.5; }
      .opr-text-box[contenteditable="true"]:focus { outline:2px solid #1a6b8a44; border-color:#1a6b8a; }
      .opr-text-box .opr-placeholder { color:#a0b8c8; font-style:italic; }
      .opr-chart-box { border:1px solid var(--line); border-radius:4px; padding:10px; text-align:center; background:var(--bg); }
      .opr-chart-label { font-size:10px; color:var(--muted); margin-top: var(--space-1); font-weight:500; }
      .opr-donut-wrap { display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; }
      .opr-donut { width:80px; height:80px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; }
      .opr-donut-center { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; color:var(--text); }
      .opr-donut-legend { display:flex; flex-direction:column; gap:3px; font-size:10px; color:var(--muted); }
      .opr-donut-legend span { display:flex; align-items:center; gap: var(--space-1); }
      .opr-donut-legend span::before { content:''; display:inline-block; width:8px; height:8px; border-radius:2px; flex-shrink:0; }
      .opr-bars { display:flex; flex-direction:column; gap: var(--space-1); }
      .opr-bar-row { display:flex; align-items:center; gap:6px; font-size:10px; }
      .opr-bar-label { width:70px; text-align:right; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .opr-bar-track { flex:1; height:8px; background:#e0eaf2; border-radius:4px; overflow:hidden; }
      .opr-bar-fill { height:100%; border-radius:4px; background:var(--sagez-blue); transition:width .3s; }
      .opr-bar-val { width:30px; font-weight:600; color:var(--text); }
      .opr-phase-selector { display:flex; gap: var(--space-2); align-items:center; margin:8px 0; }
      .opr-phase-selector label { font-size: var(--font-sm); color:var(--muted); }
      .opr-kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
      .opr-kpi { background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:6px 8px; text-align:center; }
      .opr-kpi-label { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
      .opr-kpi-value { font-family:'Rajdhani',sans-serif; font-weight:700; font-size: var(--font-lg); color:var(--text); }
      #rptExecutiveTemplate { display:none; }
      .report-opr.report-template-executive { padding:0; border-color:#d8e2eb; overflow:hidden; background:#fff; }
      .report-opr.report-template-executive > :not(#rptExecutiveTemplate) { display:none !important; }
      .report-opr.report-template-executive #rptExecutiveTemplate { display:block; }
      .rptx-shell { aspect-ratio:297 / 210; color:var(--text); background:#fff; font-family:"Inter",sans-serif; overflow:hidden; display:flex; flex-direction:column; }
      .rptx-header { display:grid; grid-template-columns:minmax(280px,1fr) minmax(220px,.68fr) minmax(260px,.78fr) 132px; gap: var(--space-3); align-items:center; padding:12px 16px; background:linear-gradient(90deg,#1a4f6b,#1a6b8a); color:#fff; }
      .rptx-title-label { font-size:10px; font-family:'Rajdhani',sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
      .rptx-title-block h1 { margin:2px 0 2px; font-family:'Rajdhani',sans-serif; font-size:24px; line-height:1.05; font-weight:700; color:#fff; letter-spacing:.03em; }
      .rptx-meta-line { font-size: var(--font-xs); color:rgba(255,255,255,.75); }
      .rptx-header-facts { display:grid; grid-template-columns:repeat(2,minmax(96px,1fr)); gap:6px; }
      .rptx-fact { display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:54px; padding:6px 9px; text-align:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:4px; }
      .rptx-fact span { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.72); }
      .rptx-fact strong { font-family:'Rajdhani',sans-serif; font-size: var(--font-md); color:#fff; font-weight:600; line-height:1.12; overflow-wrap:anywhere; }
      .rptx-rag-grid { display:grid; grid-template-columns:repeat(3,minmax(68px,1fr)); align-self:stretch; border:1px solid rgba(255,255,255,.28); border-radius:4px; overflow:hidden; background:rgba(255,255,255,.95); }
      .rptx-rag-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:54px; padding:5px 6px; border-right:1px solid #d7dee7; color:var(--text); text-align:center; }
      .rptx-rag-card:last-child { border-right:0; }
      .rptx-rag-card span { width:100%; font-size:9px; font-weight:700; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .rptx-rag-card strong { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; max-width:100%; font-size: var(--font-sm); line-height:1.2; font-weight:600; white-space:nowrap; }
      .rptx-rag-card strong::before, .rptx-status-dot, .rptx-legend .dot { content:""; width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; background:#8c98a5; }
      .rptx-rag-card.green strong::before, .rptx-status-dot.green, .rptx-legend .dot.green { background:#318a47; }
      .rptx-rag-card.amber strong::before, .rptx-status-dot.amber, .rptx-legend .dot.amber { background:#f2a516; }
      .rptx-rag-card.red strong::before, .rptx-status-dot.red, .rptx-legend .dot.red { background:#cf2f3b; }
      .rptx-rag-card.green { background:#1a8a4e; color:#fff; }
      .rptx-rag-card.amber { background:#c8891e; color:#fff; }
      .rptx-rag-card.red { background:#cc4d51; color:#fff; }
      .rptx-rag-card.grey { background:rgba(255,255,255,.92); color:var(--text); }
      .rptx-rag-card.green strong::before,
      .rptx-rag-card.amber strong::before,
      .rptx-rag-card.red strong::before { background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.55); }
      .rptx-logo-badge { display:flex; align-items:center; justify-content:center; min-height:54px; background:rgba(255,255,255,.95); border-radius:6px; padding:6px 10px; }
      .rptx-logo-badge img { width:112px; max-height:48px; object-fit:contain; }
      .rptx-phase-row { padding:14px 24px 8px; }
      .rptx-phase-track { display:grid; grid-template-columns:repeat(6,1fr); position:relative; min-height:48px; }
      .rptx-phase-track::before { content:""; position:absolute; top:16px; left:0; right:0; height:3px; background:#d3dde8; }
      .rptx-phase-track::after { content:""; position:absolute; top:16px; left:0; width:var(--rptx-phase-progress, 0%); height:3px; background:#1768c6; }
      .rptx-phase-step { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; color:#718197; font-size: var(--font-sm); font-weight:700; z-index:1; }
      .rptx-phase-step span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:2px solid #91a2b7; background:#fff; color:#718197; }
      .rptx-phase-step.done span, .rptx-phase-step.active span { border-color:#1768c6; background:#1768c6; color:#fff; }
      .rptx-phase-step.active strong { color:#1768c6; }
      .rptx-section { margin:6px 24px 0; border:1px solid #d9e2ec; border-radius:6px; padding:10px 12px; }
      .rptx-section h2 { margin:0 0 8px; font-family:'Rajdhani',sans-serif; font-size: var(--font-md); color:#1a4f6b; text-transform:uppercase; letter-spacing:.04em; }
      .rptx-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
      .rptx-summary-card, .rptx-narrative, .rptx-panel { border:1px solid #d9e2ec; border-radius:6px; background:#fff; }
      .rptx-summary-card { display:grid; grid-template-columns:42px minmax(0,1fr); gap:9px; min-height:92px; padding:10px; }
      .rptx-card-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid #c9d8fb; background:#eef4ff; color:#1768c6; font-size:9px; font-weight:800; }
      .rptx-card-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
      .rptx-summary-card h3, .rptx-panel h3, .rptx-narrative h3 { margin:0 0 6px; font-family:'Rajdhani',sans-serif; font-size: var(--font-md); color:#123b70; line-height:1.1; }
      .rptx-summary-card p { margin:0; color:#27384c; font-size: var(--font-xs); line-height:1.35; }
      .rptx-muted-text { color:#7c8b9b !important; }
      .rptx-accent-blue .rptx-card-icon { color:#1768c6; background:#eef4ff; border-color:#c9d8fb; }
      .rptx-accent-teal .rptx-card-icon { color:#159184; background:#e8faf6; border-color:#c5efe8; }
      .rptx-accent-red .rptx-card-icon { color:#c5323a; background:#fff0f0; border-color:#f5caca; }
      .rptx-accent-purple .rptx-card-icon { color:#6e43bd; background:#f3ecff; border-color:#ded0fa; }
      .rptx-accent-green .rptx-card-icon { color:#318a47; background:#eef9f0; border-color:#ccebd3; }
      .rptx-accent-orange .rptx-card-icon { color:#c96d13; background:#fff4e3; border-color:#f7d5b8; }
      .rptx-delivery-grid { display:grid; grid-template-columns:1.22fr .9fr 1.2fr; gap:10px; }
      .rptx-panel { padding:10px 12px; min-height:148px; }
      .rptx-table { width:100%; border-collapse:collapse; font-size:10.5px; }
      .rptx-table th { text-align:left; font-size:9px; color:#507092; font-weight:700; padding:5px 6px; border-bottom:1px solid #d9e2ec; }
      .rptx-table td { padding:5px 6px; border-bottom:1px solid #eef2f6; color:#27384c; vertical-align:top; }
      .rptx-status { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
      .rptx-table-note, .rptx-empty { color:#8090a0; font-size: var(--font-xs); padding:12px 0; text-align:center; }
      .rptx-progress { display:flex; flex-direction:column; gap:10px; margin-top: var(--space-2); }
      .rptx-progress-row { display:grid; grid-template-columns:58px minmax(0,1fr) 36px; gap: var(--space-2); align-items:center; font-size: var(--font-xs); }
      .rptx-progress-row div { height:14px; background:#e9eef4; border-radius:2px; overflow:hidden; }
      .rptx-progress-row i { display:block; height:100%; width:0; background:#1768c6; }
      .rptx-progress-row:first-child i { background:#9aa7b7; }
      .rptx-progress-note { margin-top: var(--space-3); border-radius:4px; background:#f1f5fa; padding:8px 10px; color:#27384c; font-size:10.5px; line-height:1.35; }
      .rptx-action-item { display:grid; grid-template-columns:30px minmax(0,1fr) 64px 70px; gap: var(--space-2); align-items:center; padding:6px 0; border-bottom:1px solid #eef2f6; }
      .rptx-action-item:last-child { border-bottom:0; }
      .rptx-action-item .rptx-card-icon { width:28px; height:28px; font-size:8px; }
      .rptx-action-item p { margin:0; font-size:10.5px; line-height:1.25; color:#27384c; }
      .rptx-action-item small { color:#6e7f90; font-size:9px; border-left:1px solid #d9e2ec; padding-left:7px; }
      .rptx-action-item strong { color:#27384c; font-size:9.5px; font-weight:500; }
      .rptx-narrative-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px 10px; margin:8px 24px 0; }
      .rptx-narrative { display:grid; grid-template-columns:36px minmax(0,1fr); gap: var(--space-2); min-height:63px; padding:8px 10px; }
      .rptx-narrative .rptx-card-icon { width:28px; height:28px; font-size:8px; }
      .rptx-narrative h3 { margin-bottom:2px; text-transform:uppercase; font-size: var(--font-sm); }
      .rptx-narrative ul { margin:0; padding-left:14px; color:#27384c; font-size:10.5px; line-height:1.3; }
      .rptx-footer { display:grid; grid-template-columns:150px 150px minmax(0,1fr); gap: var(--space-4); align-items:center; margin-top:auto; padding:10px 24px; border-top:1px solid #d9e2ec; background:#f8fafc; }
      .rptx-footer span { display:block; color:#6d7d90; font-size:10px; }
      .rptx-footer strong { color:#27384c; font-size: var(--font-sm); }
      .rptx-legend { display:flex; align-items:center; justify-content:flex-end; gap:7px; color:#27384c; font-size:10.5px; white-space:nowrap; }
      .rptx-legend .dot { width:9px; height:9px; }
      @media (max-width: 1180px) {
        .rptx-shell { aspect-ratio:auto; overflow:visible; }
        .rptx-header { grid-template-columns:1fr; }
        .rptx-rag-grid { grid-template-columns:repeat(3,1fr); }
        .rptx-summary-grid, .rptx-delivery-grid { grid-template-columns:1fr 1fr; }
        .rptx-delivery-grid .rptx-panel:last-child { grid-column:1 / -1; }
      }
      @media (max-width: 760px) {
        .rptx-header, .rptx-phase-row, .rptx-summary-grid, .rptx-delivery-grid, .rptx-narrative-grid, .rptx-footer { grid-template-columns:1fr; }
        .rptx-header-facts, .rptx-rag-grid { grid-template-columns:1fr 1fr; }
        .rptx-phase-track { overflow-x:auto; min-width:640px; }
        .rptx-logo-badge { justify-content:flex-start; }
        .rptx-section, .rptx-narrative-grid { margin-left: var(--space-3); margin-right: var(--space-3); }
        .rptx-legend { justify-content:flex-start; flex-wrap:wrap; }
      }

      @media print {
        @page { size: A4 landscape; margin: 8mm; }
        .no-print, .sidebar, .toolbar, .opr-toolbar, .opr-phase-selector { display:none !important; }
        .layout { grid-template-columns:1fr; }
        .main { padding:0; }
        .page { display:block !important; }
        .page:not(#project-report) { display:none !important; }
        .report-opr { border:none; padding:0; }
        .report-opr.report-template-executive { width: 100%; }
        .report-opr.report-template-executive #rptExecutiveTemplate { aspect-ratio: 297 / 210; overflow:hidden; page-break-inside: avoid; }
        body { background:#fff; }
        .opr-text-box { border:1px solid #ddd; }
      }

      /* ── Knowledge Base Editor ─────────────────────────────── */
      .kb-list-intro h3 {
        margin-bottom: var(--space-1);
      }
      .kb-toolbar {
        margin-top: var(--space-2);
        flex-wrap: wrap;
        gap: var(--space-1);
      }
      .kb-editor {
        margin-top: var(--space-2);
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: 0 8px 22px rgba(28, 46, 56, 0.08);
        overflow: hidden;
      }
      .kb-editor-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(26, 107, 138, 0.05), rgba(255, 255, 255, 0));
      }
      .kb-editor-titleblock {
        min-width: 0;
      }
      .kb-editor-eyebrow {
        display: block;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
      }
      .kb-editor-titleblock h4 {
        margin: 3px 0 0;
        color: var(--text);
        font-size: var(--font-lg);
        font-weight: 700;
        line-height: 1.25;
      }
      .kb-editor-close {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 6px;
      }
      .kb-editor-body {
        display: grid;
        gap: var(--space-3);
        padding: 14px 16px 16px;
      }
      .kb-editor-grid {
        display: grid;
        grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(132px, 1fr));
        gap: 10px;
        align-items: end;
      }
      .kb-editor-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
        gap: 10px;
      }
      .kb-editor-bottom {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: end;
      }
      .kb-editor-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 34px;
      }
      .kb-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
        margin: 0;
      }
      .kb-field > span {
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        line-height: 1.2;
        text-transform: uppercase;
      }
      .kb-field input,
      .kb-field select {
        height: 34px;
        min-width: 0;
        border-radius: 6px;
        padding: 7px 10px;
        font-size: var(--font-sm);
        font-family: inherit;
      }
      .kb-field .sg-sel-trigger {
        min-height: 34px;
        border-radius: 6px;
        padding: 7px 10px;
        font-size: var(--font-sm);
      }
      .kb-body-field {
        gap: 6px;
      }
      .kb-rte-host {
        min-width: 0;
      }
      .kb-editor-msg {
        margin: -4px 16px 14px;
        min-height: 15px;
        font-size: var(--font-xs);
      }
      @media (max-width: 1100px) {
        .kb-editor-grid,
        .kb-editor-row,
        .kb-editor-bottom {
          grid-template-columns: 1fr 1fr;
        }
        .kb-field-title {
          grid-column: 1 / -1;
        }
      }
      @media (max-width: 720px) {
        .kb-editor-head,
        .kb-editor-bottom {
          align-items: stretch;
        }
        .kb-editor-grid,
        .kb-editor-row,
        .kb-editor-bottom {
          grid-template-columns: 1fr;
        }
        .kb-editor-actions {
          justify-content: stretch;
        }
        .kb-editor-actions .ftoolbar-btn {
          width: 100%;
          justify-content: center;
        }
      }

      /* ── Rich Text Editor (reusable) ──────────────────────── */
      .rte-wrap { border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg); }
      .rte-toolbar { display:flex;flex-wrap:wrap;gap: var(--space-1);padding:6px;border-bottom:1px solid var(--line);background:var(--surface);align-items:center; }
      .rte-btn { display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;flex:0 0 auto;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer;font-size: var(--font-xs);color:var(--text);padding:0; }
      .rte-btn:hover { background:var(--hover);border-color:var(--line); }
      .rte-select { width:auto;min-width:116px;height:26px;flex:0 0 auto;border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:2px 24px 2px 8px;font-size: var(--font-xs);font-family:inherit;color:var(--text); }
      .rte-select-size { min-width:92px; }
      .rte-color { width:28px;height:26px;flex:0 0 auto;border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:2px;cursor:pointer; }
      .rte-sep { width:1px;height:18px;background:var(--line);margin:0 2px;flex:0 0 auto; }
      .rte-body { padding:10px 12px;font-size: var(--font-md);line-height:1.6;outline:none;overflow-y:auto;max-height:360px;color:var(--text);background:#fff; }
      .rte-body:focus { box-shadow: inset 0 0 0 2px rgba(26, 107, 138, 0.18); }
      .rte-body:empty::before { content:attr(data-placeholder);color:var(--muted);pointer-events:none;font-style:italic; }
      .rte-body.rte-empty::before { content:attr(data-placeholder);color:var(--muted);pointer-events:none;font-style:italic; }
      .rte-body p { margin:0 0 6px; }
      .rte-body h3 { margin:8px 0 5px;font-size:15px; }
      .rte-body h4 { margin:6px 0 3px;font-size: var(--font-md);font-weight:600; }
      .rte-body blockquote { margin:6px 0;padding:6px 12px;border-left:3px solid var(--sagez-orange);background:rgba(232,168,73,.08);font-size: var(--font-sm); }
      /* ── RTE image resize ─────────────────────────────────────────────
         Inline image becomes selectable; a floating popover lets the user
         scale it or remove it. Selection state is a subtle outline so the
         active image is obvious without redrawing the layout. */
      .rte-body img {
        max-width: 100%;
        height: auto;
        cursor: pointer;
        border-radius: 4px;
        transition: outline-color .12s ease;
      }
      .rte-body img.rte-img-selected {
        outline: 2px solid var(--sagez-orange);
        outline-offset: 2px;
      }
      .rte-img-resize-popover {
        position: absolute;
        z-index: 1000;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 4px 6px;
        background: #1c2e38;
        color: #fff;
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(13,45,65,.28);
        font-family: "Inter", sans-serif;
        font-size: 11px;
      }
      .rte-img-resize-popover.hidden { display: none; }
      .rte-img-resize-popover button {
        appearance: none;
        background: transparent;
        color: #fff;
        border: 0;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 4px;
        cursor: pointer;
        line-height: 1;
        transition: background .12s ease;
      }
      .rte-img-resize-popover button:hover,
      .rte-img-resize-popover button:focus-visible {
        background: rgba(255,255,255,.12);
        outline: none;
      }
      .rte-img-resize-popover .rte-img-resize-danger { color: #fecaca; }
      .rte-img-resize-popover .rte-img-resize-danger:hover { background: rgba(239,68,68,.35); color:#fff; }
      .rte-img-resize-popover .rte-img-resize-sep {
        width: 1px;
        height: 14px;
        background: rgba(255,255,255,.18);
        margin: 0 4px;
      }
      .rte-body ul, .rte-body ol { margin:4px 0;padding-left:22px; }
      .rte-body li { margin:2px 0; }

      /* ── MCP scope picker ───────────────────────────────────── */
      .mcp-scope-radio { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size: var(--font-md); padding:5px 10px; border:1px solid var(--border); border-radius:6px; transition:background .15s,border-color .15s; user-select:none; }
      .mcp-scope-radio:has(input:checked) { background:rgba(232,168,73,.12); border-color:var(--sagez-orange); font-weight:600; }
      .mcp-scope-radio input[type=radio] { accent-color:var(--sagez-orange); }
      .mcp-customer-picker { display:flex; flex-wrap:wrap; gap:6px; padding: var(--space-2); border:1px solid var(--border); border-radius:6px; min-height:38px; max-height:130px; overflow-y:auto; background:var(--bg); margin-top: var(--space-1); }
      .mcp-customer-tag { display:inline-flex; align-items:center; gap: var(--space-1); padding:3px 10px; border-radius:20px; font-size: var(--font-sm); border:1px solid var(--border); cursor:pointer; user-select:none; transition:background .12s,border-color .12s,color .12s; }
      .mcp-customer-tag:hover { border-color:var(--sagez-orange); color:var(--sagez-orange); }
      .mcp-customer-tag.selected { background:var(--sagez-orange); border-color:var(--sagez-orange); color:#fff; font-weight:600; }
      .mcp-scope-badge { font-size: var(--font-xs); padding:2px 7px; border-radius:10px; font-weight:600; }
      .mcp-scope-badge.global { background:rgba(34,139,34,.12); color:#228b22; border:1px solid rgba(34,139,34,.25); }
      .mcp-scope-badge.customers { background:rgba(232,168,73,.15); color:#a06800; border:1px solid rgba(232,168,73,.4); }

      /* ── API Reference page ─────────────────────────────────── */
      .api-ref-tabs { display:flex; flex-wrap:wrap; gap:0; margin-bottom:14px; border-bottom:2px solid var(--border); }
      .api-tab { padding:7px 18px; border:none; border-bottom:2px solid transparent; background:transparent; font-size: var(--font-md); cursor:pointer; color:var(--text-muted); margin-bottom:-2px; transition:color .15s,border-color .15s; }
      .api-tab.active { color:var(--sagez-orange); border-bottom-color:var(--sagez-orange); font-weight:600; }
      .api-tab:hover:not(.active) { color:var(--text); }
      .api-endpoint-card { border:1px solid var(--border); border-radius:8px; margin-bottom:10px; overflow:visible; }
      .api-card-header { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; user-select:none; }
      .api-card-header:hover { background:rgba(232,168,73,.05); }
      .api-method-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:4px; min-width:44px; text-align:center; flex-shrink:0; }
      .api-method-badge.POST { background:rgba(34,139,34,.12); color:#228b22; border:1px solid rgba(34,139,34,.3); }
      .api-method-badge.GET  { background:rgba(30,100,200,.10); color:#1e64c8; border:1px solid rgba(30,100,200,.25); }
      .api-card-path { font-family:monospace; font-size: var(--font-sm); font-weight:600; }
      .api-card-title { font-size: var(--font-md); color:var(--text-muted); }
      .api-card-toggle { margin-left:auto; font-size: var(--font-md); color:var(--text-muted); transition:transform .2s; }
      .api-endpoint-card.expanded .api-card-toggle { transform:rotate(180deg); }
      .api-card-body { display:none; padding:14px; border-top:1px solid var(--border); }
      .api-endpoint-card.expanded .api-card-body { display:block; }
      .api-fields-row { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 10px; }
      .api-field-tag { font-family:monospace; font-size: var(--font-xs); padding:2px 7px; border-radius:4px; }
      .api-field-tag.req { background:rgba(220,50,50,.08); color:#b30000; border:1px solid rgba(220,50,50,.2); }
      .api-field-tag.opt { background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }
      .api-json-block { background:#111827; color:#a8f0c6; font-family:monospace; font-size: var(--font-sm); line-height:1.55; padding:12px 14px; border-radius:6px; overflow:auto; max-height:280px; white-space:pre; position:relative; margin:6px 0; }
      .api-copy-btn { position:absolute; top:8px; right:8px; font-size:10px; padding:2px 8px; background:rgba(255,255,255,.1); color:#ccc; border:1px solid rgba(255,255,255,.15); border-radius:4px; cursor:pointer; }
      .api-copy-btn:hover { background:rgba(255,255,255,.2); }
      .api-try-wrap { margin-top: var(--space-3); border-top:1px solid var(--border); padding-top:10px; }
      .api-try-label { font-size: var(--font-xs); font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }
      .api-client-summary { display:grid; grid-template-columns:repeat(4,minmax(110px,1fr)); gap: var(--space-2); margin:0 0 10px; max-width:720px; }
      .api-client-summary div { border:1px solid var(--border); border-radius:6px; padding:8px 10px; background:var(--bg); }
      .api-client-summary span { display:block; font-family:'Rajdhani',sans-serif; font-size: var(--font-xl); font-weight:700; line-height:1; color:var(--text); }
      .api-client-summary small { display:block; margin-top:2px; color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
      .api-client-modebar { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
      .api-client-mode-btn { border:1px solid var(--border); background:var(--panel); color:var(--text-muted); border-radius:6px; padding:7px 12px; font-size: var(--font-sm); cursor:pointer; }
      .api-client-mode-btn:hover { color:var(--text); border-color:var(--sagez-orange); }
      .api-client-mode-btn.active { color:#fff; background:var(--sagez-orange); border-color:var(--sagez-orange); font-weight:600; }
      .api-client-workspace { min-height:180px; }
      .api-client-table-scroll { max-height:220px; border:1px solid var(--border); border-radius:6px; }
      .api-client-editor { margin-top: var(--space-3); border-top:1px solid var(--border); padding-top: var(--space-3); max-width:1180px; }
      .api-client-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-3); margin-bottom:10px; }
      .api-client-editor h4 { margin:0; font-size:15px; color:var(--text); }
      .api-client-editor-actions { display:flex; gap: var(--space-2); align-items:center; }
      .api-client-grid-main { display:grid; grid-template-columns:minmax(180px,260px) minmax(220px,320px) minmax(130px,170px) minmax(210px,260px); gap:10px 12px; align-items:end; }
      .api-client-grid-scopes { display:grid; grid-template-columns:minmax(280px,380px) minmax(220px,300px) minmax(240px,320px); gap:10px 12px; margin-top:10px; }
      .api-client-notes-row { display:grid; grid-template-columns:minmax(360px,640px) minmax(220px,320px); gap: var(--space-3); margin-top:10px; align-items:stretch; }
      .api-client-help { border:1px solid var(--border); border-radius:6px; background:var(--bg); padding:9px 10px; font-size: var(--font-sm); color:var(--text-muted); display:flex; flex-direction:column; gap: var(--space-1); }
      .api-client-help strong { color:var(--text); font-size: var(--font-sm); }
      #apiClientAdmin label { display:block; font-size: var(--font-sm); color:var(--text-muted); }
      #apiClientAdmin input, #apiClientAdmin textarea, #apiClientAdmin select { width:100%; margin-top: var(--space-1); box-sizing:border-box; }
      #apiClientAdmin input, #apiClientAdmin select:not([multiple]) { height:34px; }
      #apiClientAdmin textarea { min-height:78px; resize:vertical; }
      #apiClientAdmin select[multiple] { min-height:150px; padding:6px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text); font-size: var(--font-sm); }
      #apiClientAdmin select[multiple] option { padding:4px 6px; border-radius:4px; }
      .api-client-key-row { margin-top:10px; max-width:760px; }
      .api-client-secret { border:1px solid var(--border); border-radius:6px; background:var(--bg); padding:9px 10px; }
      .api-client-secret-control { display:grid; grid-template-columns:minmax(220px,1fr) 34px auto; gap:6px; align-items:center; margin-top: var(--space-1); }
      .api-client-secret-control input { font-family:monospace; margin-top:0 !important; }
      .api-client-secret-control .icon-btn { width:34px; height:34px; padding:0; }
      .api-client-secret-control .btn-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
      .api-client-key-cell { display:inline-flex; align-items:center; gap:6px; }
      .api-client-key-cell .icon-btn { width:28px; height:28px; padding:0; }
      .api-client-key-cell .btn-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
      .api-client-test { max-width:980px; border-top:1px solid var(--border); padding-top: var(--space-3); }
      .api-client-test h4 { margin:0; font-size:15px; color:var(--text); }
      .api-client-test-grid { display:grid; grid-template-columns:120px minmax(280px,420px) minmax(280px,1fr); gap:10px 12px; align-items:end; margin-bottom:10px; }
      .api-client-test .api-client-secret-control { grid-template-columns:minmax(180px,1fr) 34px; }
      .api-client-test textarea { font-family:monospace; min-height:120px; }
      .api-client-reference { max-width:980px; }
      @media (max-width: 1180px) { .api-client-grid-main, .api-client-grid-scopes, .api-client-notes-row { grid-template-columns:1fr 1fr; } }
      @media (max-width: 760px) { .api-client-summary, .api-client-grid-main, .api-client-grid-scopes, .api-client-notes-row, .api-client-test-grid { grid-template-columns:1fr; } .api-client-editor-head { flex-direction:column; } }
      .api-try-textarea { width:100%; box-sizing:border-box; font-family:monospace; font-size: var(--font-sm); background:#111827; color:#e8d5a3; border:1px solid var(--border); border-radius:6px; padding:10px 12px; resize:vertical; min-height:100px; }
      .api-try-actions { display:flex; gap: var(--space-2); margin-top:7px; align-items:center; }
      .api-response-box { margin-top: var(--space-2); padding:10px 12px; border-radius:6px; font-family:monospace; font-size: var(--font-sm); max-height:200px; overflow:auto; white-space:pre; line-height:1.5; }
      .api-response-box.ok  { background:rgba(34,139,34,.07); border:1px solid rgba(34,139,34,.2); color:#1a5c1a; }
      .api-response-box.err { background:rgba(220,50,50,.07); border:1px solid rgba(220,50,50,.2); color:#8b0000; }
      .api-context-bar { display:flex; align-items:center; gap: var(--space-4); flex-wrap:wrap; margin-bottom:14px; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:6px; }
      .api-ctx-group { display:flex; align-items:center; gap:7px; }
      .api-ctx-group label { font-size: var(--font-sm); color:var(--text-muted); white-space:nowrap; }
      .api-ctx-group select { font-size: var(--font-md); min-width:180px; }

      /* ── Data Setup page ─────────────────────────────────────── */
      .seed-result-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap: var(--space-2); margin-top:10px; }
      .seed-kpi { background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:8px 10px; }
      .seed-kpi-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
      .seed-kpi-value { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:20px; color:var(--text); }

      /* ── Case Work Page ──────────────────────────────────────── */
      .cw-header { display:flex; align-items:center; justify-content:space-between; padding:12px 0 16px; border-bottom:1px solid var(--line); margin-bottom: var(--space-4); flex-wrap:wrap; gap:10px; }
      .cw-breadcrumb { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
      /* .cw-back-btn consolidated into the canonical button system (variant: ghost). */
      .cw-case-id { font-size:18px; font-weight:700; color:var(--text); font-family:'Rajdhani',sans-serif; }
      .cw-header-actions { display:flex; gap: var(--space-2); align-items:center; flex-wrap:wrap; }
      /* .cw-save-btn consolidated into the canonical button system (variant: primary, size: lg). */
      .cw-save-btn.dirty { background:#f59e0b; animation:none; }

      /* ── Case Create Intake ─────────────────────────────────────── */
      .case-intake-form {
        max-width: 1220px;
        margin: 0 auto;
      }
      .case-intake-heading {
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap: var(--space-4);
        margin:0 0 14px;
      }
      .case-intake-heading h4 {
        margin:0;
        font-size:18px;
        color:var(--text);
      }
      .case-intake-heading .note {
        margin:3px 0 0;
      }
      .case-intake-grid {
        display:grid;
        grid-template-columns:minmax(0, 1fr) minmax(280px, 340px);
        gap:14px;
        align-items:start;
      }
      .case-intake-main,
      .case-intake-sidebar {
        display:flex;
        flex-direction:column;
        gap: var(--space-3);
        min-width:0;
      }
      .case-form-section {
        border:1px solid var(--line);
        background:var(--panel);
        border-radius:8px;
        padding:14px 16px;
        box-shadow:var(--shadow-sm);
      }
      .case-form-section h5 {
        margin:0;
        font-size: var(--font-md);
        color:var(--text);
      }
      .case-form-section-head {
        display:flex;
        gap:10px;
        align-items:flex-start;
        margin-bottom: var(--space-3);
      }
      .case-form-section-head .note {
        margin:2px 0 0;
      }
      .case-form-step {
        flex:0 0 auto;
        width:22px;
        height:22px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:999px;
        background:var(--sagez-blue-light);
        color:var(--primary-dark);
        font-size: var(--font-xs);
        font-weight:700;
      }
      .case-form-grid {
        display:grid;
        gap:10px;
      }
      .case-form-grid.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .case-form-grid.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
      .case-form-stack {
        display:grid;
        gap:10px;
      }
      .case-intake-form label {
        display:block;
        margin:0 0 4px;
        font-size: var(--font-xs);
        font-weight:500;
        color:var(--muted);
      }
      .case-intake-form input,
      .case-intake-form select,
      .case-intake-form textarea {
        width:100%;
      }
      .case-description-field {
        margin-top:10px;
      }
      .case-description-field textarea {
        min-height:190px;
        resize:vertical;
      }
      .case-checkbox-row {
        min-height:34px;
        display:flex;
        align-items:center;
        gap: var(--space-2);
        color:var(--muted);
        font-size: var(--font-sm);
      }
      .case-checkbox-row input {
        width:auto;
        margin:0;
      }
      .case-form-actions {
        position:sticky;
        bottom:0;
        display:flex;
        align-items:center;
        gap: var(--space-2);
        margin-top:14px;
        padding:12px 0 0;
        background:linear-gradient(180deg, rgba(255,255,255,0), var(--panel) 35%);
        z-index:2;
      }
      .case-form-actions .btn {
        width:auto;
        min-width:96px;
        justify-content:center;
      }
      .case-form-actions .note {
        margin:0 0 0 4px;
      }
      .comment-source-textarea {
        display:none !important;
      }
      .comment-rich-composer {
        width:100%;
        min-height:96px;
        padding:10px 12px;
        border:1px solid var(--line);
        border-radius:6px;
        background:#fff;
        color:var(--text);
        font-size: var(--font-md);
        line-height:1.45;
        white-space:pre-wrap;
        word-break:break-word;
        outline:none;
        overflow:auto;
      }
      .comment-rich-composer:focus {
        border-color:var(--primary);
        box-shadow:0 0 0 3px rgba(26,107,138,.12);
      }
      .comment-rich-composer:empty::before {
        content:attr(data-placeholder);
        color:var(--muted);
        pointer-events:none;
      }
      .comment-composer-image-wrap {
        display:inline-block;
        position:relative;
        max-width:min(100%, 760px);
        margin:6px 0;
        border:1px solid var(--line);
        border-radius:6px;
        background:#fff;
        overflow:hidden;
        vertical-align:top;
      }
      .comment-composer-image {
        display:block;
        max-width:100%;
        max-height:460px;
        object-fit:contain;
      }
      .comment-composer-caption {
        display:block;
        padding:5px 8px;
        color:var(--muted);
        background:var(--bg);
        font-size: var(--font-xs);
      }
      .comment-composer-remove {
        position:absolute;
        top:6px;
        right:6px;
        border:1px solid rgba(0,0,0,.15);
        border-radius:999px;
        background:rgba(255,255,255,.92);
        color:var(--text);
        font-size:10px;
        padding:2px 7px;
        cursor:pointer;
      }
      .comment-inline-image {
        display:block;
        max-width:min(100%, 760px);
        max-height:560px;
        object-fit:contain;
        border:1px solid var(--line);
        border-radius:6px;
        background:#fff;
      }
      @media(max-width:980px) {
        .case-intake-grid {
          grid-template-columns:1fr;
        }
        .case-form-grid.two,
        .case-form-grid.three {
          grid-template-columns:1fr;
        }
        .case-form-actions {
          position:static;
          flex-wrap:wrap;
        }
      }
      .cw-body { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap: var(--space-4); align-items:start; }
      @media(max-width:900px){ .cw-body { grid-template-columns:1fr; } }
      .cw-main { display:flex; flex-direction:column; gap: var(--space-4); min-width:0; }
      .cw-sidebar { display:flex; flex-direction:column; gap: var(--space-3); }
      /* .cw-card consolidated into canonical card system at the top of file. */
      .cw-card-title, .card-title {
        font-size: var(--font-sm);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text-muted);
        margin-bottom: var(--space-3);
      }
      .cw-fields-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
      .cw-fields-grid > .cw-field { grid-column:span 6; }
      .cw-fields-grid > .cw-field-xs   { grid-column:span 2; }
      .cw-fields-grid > .cw-field-sm   { grid-column:span 3; }
      .cw-fields-grid > .cw-field-md   { grid-column:span 4; }
      .cw-fields-grid > .cw-field-lg   { grid-column:span 8; }
      .cw-fields-grid > .cw-field-full { grid-column:1 / -1; }
      @media (max-width: 720px) {
        .cw-fields-grid > .cw-field,
        .cw-fields-grid > .cw-field-xs,
        .cw-fields-grid > .cw-field-sm,
        .cw-fields-grid > .cw-field-md,
        .cw-fields-grid > .cw-field-lg { grid-column:1 / -1; }
      }
      /* ── Status Report — Phase E UI polish (2026-04-24) ──────────────────── */
      /* Structured highlights: compact sub-fields inside a single frame */
      .opr-structured-highlights .opr-highlight-sub {
        padding: 2px 4px;
        min-height: 16px;
        border-radius: 3px;
        transition: background 0.15s;
      }
      .opr-structured-highlights .opr-highlight-sub:hover {
        background: rgba(52,152,219,0.05);
      }
      .opr-structured-highlights .opr-highlight-sub:focus {
        outline: 1px solid rgba(52,152,219,0.4);
        background: rgba(52,152,219,0.05);
      }
      /* Executive summary block — label/value vertical rhythm */
      .opr-exec-summary > div { line-height: 1.35; }
      /* Top 3 focus cards — hover lift */
      .opr-top3-card { transition: transform 0.15s, box-shadow 0.15s; }
      .opr-top3-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
      /* KPI lane labels (Phase E grouping) */
      .opr-kpi-lane-label {
        grid-column: span 4;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        margin-top: var(--space-1);
        font-weight: 700;
      }
      /* Print adjustments — keep report readable on paper */
      @media print {
        #rptSinceLast { display: none !important; } /* busy in printed form */
        .opr-top3-card { box-shadow: none !important; }
        .opr-exec-summary { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
        .opr-col-header-blue, .opr-col-header-orange {
          print-color-adjust: exact; -webkit-print-color-adjust: exact;
        }
      }

      /* Project detail header — colored band with chips + inline stats */
      .project-header { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
      .project-hdr-stat {
        min-width: 72px; padding: 8px 12px; border-radius: 6px;
        background: rgba(255,255,255,0.08); text-align: center;
      }
      .project-hdr-stat .label {
        font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
        opacity: 0.7; margin-bottom: 2px;
      }
      .project-hdr-stat .value {
        font-size: var(--font-lg); font-weight: 700; color: #fff;
      }
      .project-hdr-chip {
        display: inline-flex; align-items: center; gap: var(--space-1);
        padding: 3px 10px; border-radius: 12px; font-size: 10px;
        background: rgba(255,255,255,0.15); color: #fff;
        text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
      }
      .project-hdr-chip.chip-health-green { background: rgba(39,174,96,0.4); }
      .project-hdr-chip.chip-health-amber { background: rgba(230,126,34,0.4); }
      .project-hdr-chip.chip-health-red   { background: rgba(231,76,60,0.5); }
      .project-hdr-chip.chip-phase { background: rgba(52,152,219,0.4); }
      .project-hdr-chip.chip-status { background: rgba(155,89,182,0.4); }
      .project-hdr-chip.chip-type { background: rgba(22,160,133,0.4); }

      .project-meeting-editor {
        margin-top:14px;
        border:1px solid color-mix(in srgb, var(--line) 82%, var(--primary));
        border-radius:8px;
        background:var(--panel);
        box-shadow:0 10px 28px rgba(13, 74, 95, .09);
        overflow:hidden;
      }
      .project-meeting-editor-head {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        padding:10px 12px 10px 14px;
        border-bottom:1px solid var(--line);
        background:linear-gradient(90deg, #103f55 0%, #1a6b8a 72%, #c8891e 100%);
      }
      .project-meeting-editor-head h4 {
        margin:2px 0 0;
        font-size: var(--font-lg);
        line-height:1.1;
        color:#fff;
      }
      .project-meeting-kicker {
        color:rgba(255,255,255,.72);
        font-size:10px;
        font-weight:800;
        letter-spacing:.12em;
        text-transform:uppercase;
      }
      .project-meeting-head-actions {
        display:flex;
        align-items:center;
        gap: var(--space-2);
        flex-wrap:wrap;
      }
      .project-meeting-head-actions .btn {
        min-height:30px;
        padding:5px 11px;
        font-size: var(--font-sm);
      }
      .project-meeting-head-actions .btn:not(.primary) {
        background:rgba(255,255,255,.12);
        border-color:rgba(255,255,255,.28);
        color:#fff;
      }
      .project-meeting-delete {
        color:#fff !important;
        border-color:rgba(255,255,255,.32) !important;
        background:rgba(159,47,49,.82) !important;
      }
      .project-meeting-shell {
        display:grid;
        gap:0;
        padding:0;
      }
      .project-meeting-section {
        border:0;
        border-radius:0;
        background:transparent;
        padding: var(--space-3);
      }
      .project-meeting-section-main {
        display:grid;
        grid-template-columns:minmax(260px, 1.25fr) minmax(150px, .45fr) minmax(150px, .45fr);
        gap:10px;
        align-items:end;
        border-bottom:1px solid var(--line);
        background:color-mix(in srgb, var(--sagez-blue-light) 42%, var(--panel));
        padding: var(--space-3);
      }
      .project-meeting-body {
        display:grid;
        grid-template-columns:minmax(0, 1fr) 330px;
        min-height:0;
      }
      .project-meeting-notes {
        border-right:1px solid var(--line);
        padding: var(--space-3);
      }
      .project-meeting-side {
        display:flex;
        flex-direction:column;
        background:color-mix(in srgb, var(--bg) 72%, var(--panel));
      }
      .project-meeting-side .project-meeting-section {
        border-bottom:1px solid var(--line);
      }
      .project-meeting-side .project-meeting-section:last-child {
        border-bottom:0;
      }
      .project-meeting-muted-section {
        opacity:.9;
      }
      .project-meeting-section-title {
        display:flex;
        align-items:center;
        gap:7px;
        margin:0 0 9px;
        color:var(--primary-dark);
        font-size:10px;
        font-weight:800;
        letter-spacing:.11em;
        text-transform:uppercase;
      }
      .project-meeting-section-title::before {
        content:"";
        width:6px;
        height:6px;
        border-radius:999px;
        background:var(--sagez-orange);
      }
      .project-meeting-grid {
        display:grid;
        grid-template-columns:1fr;
        gap: var(--space-2);
        align-items:end;
      }
      .project-meeting-wide {
        grid-column:span 2;
      }
      .project-meeting-text-grid {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px 12px;
      }
      .project-meeting-field {
        min-width:0;
      }
      .project-meeting-field label {
        display:block;
        margin:0 0 4px;
        color:var(--muted);
        font-size:10px;
        font-weight:750;
        letter-spacing:.05em;
        text-transform:uppercase;
      }
      .project-meeting-field input,
      .project-meeting-field select,
      .project-meeting-field textarea {
        width:100%;
        min-height:30px;
        border:1px solid color-mix(in srgb, var(--line) 88%, var(--muted));
        border-radius:6px;
        background:#fff;
        color:var(--text);
        font-size: var(--font-sm);
        line-height:1.35;
        padding:5px 8px;
        box-sizing:border-box;
        box-shadow:inset 0 1px 0 rgba(13,74,95,.025);
      }
      .project-meeting-title-field input {
        min-height:34px;
        font-size: var(--font-md);
        font-weight:650;
      }
      .project-meeting-field textarea {
        min-height:82px;
        resize:vertical;
      }
      .project-meeting-field #projectMeetingTranscript {
        min-height:128px;
        font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: var(--font-xs);
      }
      .project-meeting-field input:focus,
      .project-meeting-field select:focus,
      .project-meeting-field textarea:focus {
        outline:none;
        border-color:var(--primary);
        box-shadow:0 0 0 3px rgba(26,107,138,.12);
      }
      .project-meeting-editor #projectMeetingEditorMsg {
        margin:0 12px 12px;
      }
      @media (max-width: 1100px) {
        .project-meeting-section-main,
        .project-meeting-text-grid {
          grid-template-columns:1fr 1fr;
        }
        .project-meeting-body {
          grid-template-columns:1fr;
        }
        .project-meeting-notes {
          border-right:0;
          border-bottom:1px solid var(--line);
        }
        .project-meeting-side {
          display:grid;
          grid-template-columns:repeat(3, minmax(0, 1fr));
        }
        .project-meeting-side .project-meeting-section {
          border-right:1px solid var(--line);
          border-bottom:0;
        }
        .project-meeting-side .project-meeting-section:last-child {
          border-right:0;
        }
      }
      @media (max-width: 720px) {
        .project-meeting-editor-head {
          align-items:flex-start;
          flex-direction:column;
        }
        .project-meeting-head-actions {
          width:100%;
        }
        .project-meeting-section-main,
        .project-meeting-text-grid {
          grid-template-columns:1fr;
        }
        .project-meeting-side {
          grid-template-columns:1fr;
        }
        .project-meeting-side .project-meeting-section {
          border-right:0;
          border-bottom:1px solid var(--line);
        }
        .project-meeting-wide {
          grid-column:span 1;
        }
      }

      .cw-sidebar-fields { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-2); }
      .cw-compact-card { padding: var(--space-3); }
      .cw-compact-card .cw-card-title { margin-bottom:9px; }
      .cw-sidebar .cw-field label { font-size:10px; margin-bottom:3px; }
      .cw-sidebar .cw-field input,
      .cw-sidebar .cw-field select,
      .cw-sidebar .cw-field textarea { padding:6px 8px; font-size: var(--font-sm); border-radius:5px; }
      .cw-sidebar .cw-field textarea { min-height:48px; }
      .cw-sidebar .cw-field:nth-child(3n),
      .cw-sidebar .cw-field:has(textarea) { grid-column:1/-1; }
      .cw-sync-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
      .cw-sync-actions .modern-btn { padding:6px 10px; font-size: var(--font-sm); }
      .cw-field-full { grid-column:1/-1; }
      .cw-field label { display:block; font-size: var(--font-xs); font-weight:600; color:var(--text-muted); margin-bottom: var(--space-1); text-transform:uppercase; letter-spacing:.06em; }
      .cw-field input, .cw-field select, .cw-field textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-size: var(--font-md); background:var(--bg); color:var(--text); box-sizing:border-box; }
      .cw-field textarea { resize:vertical; min-height:80px; }
      .cw-field input:focus, .cw-field select:focus, .cw-field textarea:focus { outline:2px solid var(--accent); border-color:transparent; }
      .cw-section-title { font-size: var(--font-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); grid-column:1/-1; }
      .cw-status-flow { display:flex; gap: var(--space-1); flex-wrap:wrap; margin-bottom: var(--space-3); }
      .cw-status-btn { padding:5px 12px; border-radius:20px; border:2px solid var(--line); background:var(--bg); font-size: var(--font-sm); font-weight:600; cursor:pointer; color:var(--text-muted); transition:all .15s; }
      .cw-status-btn:hover { border-color:var(--accent); color:var(--accent); }
      .cw-status-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
      .cw-status-btn.status-open { --accent:#3b82f6; }
      .cw-status-btn.status-in_progress { --accent:#8b5cf6; }
      .cw-status-btn.status-pending { --accent:#f59e0b; }
      .cw-status-btn.status-resolved { --accent:#10b981; }
      .cw-status-btn.status-closed { --accent:#6b7280; }
      .cw-activity-tabs { display:flex; gap:0; border-bottom:2px solid var(--line); margin-bottom: var(--space-4); }
      .cw-activity-tab { padding:8px 16px; border:none; background:none; font-size: var(--font-md); font-weight:600; cursor:pointer; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; }
      .cw-activity-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
      .cw-activity-panel { display:none; } .cw-activity-panel.active { display:block; }
      /* Attachment-tab toolbar — keeps file picker, type select, upload button
         on a single line. Overrides the global `input,select,textarea {width:100%}`
         rule that otherwise wraps each control onto its own row. */
      .cw-attachment-toolbar {
        display: flex;
        gap: var(--space-2);
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: var(--space-3);
      }
      .cw-attachment-toolbar > input[type="file"] {
        width: auto;
        max-width: 280px;
        font-size: var(--font-sm);
        padding: 4px 6px;
      }
      .cw-attachment-toolbar > select {
        width: auto;
        min-width: 140px;
        font-size: var(--font-sm);
        padding: 6px 10px;
      }
      .cw-attachment-toolbar > .note { font-size: var(--font-xs); margin: 0; }
      .cw-comment-form { display:flex; flex-direction:column; gap: var(--space-2); margin-bottom: var(--space-4); }
      .cw-comment-form textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; font-size: var(--font-md); resize:vertical; min-height:80px; background:var(--bg); color:var(--text); box-sizing:border-box; }
      .cw-comment-actions { display:flex; gap: var(--space-2); align-items:center; }
      .cw-comment-item { padding:12px 0; border-bottom:1px solid var(--line); }
      .cw-comment-item:last-child { border-bottom:none; }
      .cw-comment-meta { display:flex; gap: var(--space-2); align-items:center; margin-bottom:6px; font-size: var(--font-sm); color:var(--text-muted); }
      .cw-comment-author { font-weight:600; color:var(--text); }
      .cw-comment-body { font-size: var(--font-md); color:var(--text); white-space:pre-wrap; line-height:1.5; }
      .cw-sla-bar { height:8px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:6px; }
      .cw-sla-bar-fill { height:100%; border-radius:4px; transition:width .3s; }
      .cw-sla-ok .cw-sla-bar-fill { background:#10b981; }
      .cw-sla-warn .cw-sla-bar-fill { background:#f59e0b; }
      .cw-sla-breach .cw-sla-bar-fill { background:#ef4444; }
      .cw-sidebar-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--line); font-size: var(--font-md); }
      .cw-sidebar-row:last-child { border-bottom:none; }
      .cw-sidebar-label { font-size: var(--font-xs); color:var(--text-muted); font-weight:600; }
      .cw-sidebar-value { font-size: var(--font-md); color:var(--text); text-align:right; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .cw-assign-me { font-size: var(--font-xs); padding:3px 8px; border:1px solid var(--accent); border-radius:4px; background:none; color:var(--accent); cursor:pointer; }
      .cw-assign-me:hover { background:var(--accent); color:#fff; }
      .cw-empty-activity { text-align:center; padding:32px; color:var(--text-muted); font-size: var(--font-md); }
      .cw-worklog-form { display:grid; grid-template-columns:1fr 1fr auto; gap: var(--space-2); align-items:end; margin-bottom: var(--space-4); }
      .cw-worklog-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size: var(--font-md); }
      .cw-worklog-item:last-child { border-bottom:none; }
      .cw-worklog-icon { width:32px; height:32px; border-radius:50%; background:var(--hover); display:flex; align-items:center; justify-content:center; font-size: var(--font-md); flex-shrink:0; }
      .cw-timeline-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size: var(--font-sm); }
      .cw-timeline-item:last-child { border-bottom:none; }
      .cw-timeline-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top: var(--space-1); flex-shrink:0; }
      .timeline-rich-list { display:flex; flex-direction:column; gap:0; }
      .timeline-rich-item { display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; padding:14px 0; border-bottom:1px solid var(--line); background:transparent; }
      .timeline-rich-item:last-child { border-bottom:none; }
      .timeline-rich-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); margin-top:7px; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent); }
      .timeline-rich-main { min-width:0; }
      .timeline-rich-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start; }
      .timeline-rich-title { font-size: var(--font-md); font-weight:500; color:var(--text); line-height:1.45; overflow-wrap:anywhere; }
      .timeline-rich-actor { font-weight:650; }
      .timeline-rich-action { font-weight:800; }
      .timeline-rich-action-updated { color:#2563eb; }
      .timeline-rich-action-created,
      .timeline-rich-action-added { color:#16a34a; }
      .timeline-rich-action-deleted { color:#dc2626; }
      .timeline-rich-action-assigned { color:#7c3aed; }
      .timeline-rich-time { color:var(--text-muted); font-size: var(--font-sm); font-variant-numeric:tabular-nums; white-space:nowrap; }
      .timeline-rich-details { margin-top:8px; }
      .timeline-rich-details summary { display:inline-flex; align-items:center; min-height:28px; padding:3px 10px; border:1px solid var(--line); border-radius:8px; background:var(--hover); color:var(--text); cursor:pointer; font-size: var(--font-sm); font-weight:700; list-style:none; }
      .timeline-rich-details summary::-webkit-details-marker { display:none; }
      .timeline-rich-details summary:hover { border-color:var(--accent); color:var(--accent); }
      .timeline-rich-note { margin-top:8px; color:var(--text-muted); font-size: var(--font-sm); line-height:1.45; overflow-wrap:anywhere; }
      .timeline-rich-change-list { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
      .timeline-rich-change { display:grid; grid-template-columns:minmax(110px, 190px) minmax(0,1fr); gap:10px; align-items:start; padding:7px 0; border-top:1px solid var(--line); }
      .timeline-rich-change-field { color:var(--text); font-size: var(--font-sm); font-weight:700; overflow-wrap:anywhere; }
      .timeline-rich-change-values { display:flex; gap:8px; align-items:baseline; min-width:0; color:var(--text); font-size: var(--font-sm); overflow-wrap:anywhere; }
      .timeline-rich-change-value { min-width:0; overflow-wrap:anywhere; }
      .timeline-rich-change-value.is-empty { color:var(--text-muted); font-style:italic; }
      .timeline-rich-change-arrow { color:var(--text-muted); flex:0 0 auto; }
      @media (max-width: 760px) {
        .timeline-rich-head { grid-template-columns:1fr; gap:4px; }
        .timeline-rich-time { white-space:normal; }
        .timeline-rich-change { grid-template-columns:1fr; gap:4px; }
        .timeline-rich-change-values { flex-wrap:wrap; }
      }
      .cw-unsaved-dot { display:inline-block; width:8px; height:8px; background:#f59e0b; border-radius:50%; margin-right:6px; }
      .ai-obsv { display:flex; flex-direction:column; gap:14px; }
      .ai-obsv-hero { display:grid; grid-template-columns:minmax(150px, 190px) minmax(0, 1fr); gap: var(--space-3); align-items:stretch; }
      .ai-obsv-score { border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:14px; display:flex; flex-direction:column; justify-content:center; min-height:112px; }
      .ai-obsv-score-value { font-size:30px; line-height:1; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
      .ai-obsv-score-label { margin-top:6px; font-size: var(--font-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
      .ai-obsv-summary { border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:14px; min-width:0; }
      .ai-obsv-summary-title { font-size: var(--font-md); font-weight:700; margin-bottom:6px; color:var(--text); }
      .ai-obsv-summary-text { font-size: var(--font-md); line-height:1.5; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; }
      .ai-obsv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
      .ai-obsv-card { border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:10px 12px; min-width:0; }
      .ai-obsv-card-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:5px; }
      .ai-obsv-card-value { font-size: var(--font-md); font-weight:650; color:var(--text); overflow-wrap:anywhere; }
      .ai-obsv-section { border:1px solid var(--line); border-radius:8px; background:var(--panel); padding: var(--space-3); }
      .ai-obsv-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
      .ai-obsv-section-title { font-size: var(--font-sm); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; }
      .ai-obsv-section-head .ai-obsv-section-title { margin-bottom:0; }
      .ai-obsv-checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap: var(--space-2); }
      .ai-obsv-check { display:flex; align-items:flex-start; gap: var(--space-2); border:1px solid var(--line); border-radius:7px; padding:8px 10px; background:var(--bg); font-size: var(--font-sm); }
      .ai-obsv-check-dot { width:9px; height:9px; border-radius:50%; margin-top: var(--space-1); flex-shrink:0; background:#ef4444; }
      .ai-obsv-check.is-ready .ai-obsv-check-dot { background:#16a34a; }
      .ai-obsv-check-label { font-weight:700; color:var(--text); }
      .ai-obsv-check-note { color:var(--text-muted); margin-top:2px; overflow-wrap:anywhere; }
      .ai-obsv-tags { display:flex; flex-wrap:wrap; gap:6px; }
      .ai-obsv-tag { border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:3px 8px; font-size: var(--font-xs); color:var(--text); max-width:100%; overflow:hidden; text-overflow:ellipsis; }
      .ai-obsv-evidence { display:grid; gap: var(--space-2); }
      .ai-obsv-evidence-row { display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size: var(--font-sm); }
      .ai-obsv-evidence-row:last-child { border-bottom:none; }
      .ai-obsv-evidence-label { color:var(--text-muted); font-weight:700; }
      .ai-obsv-evidence-value { color:var(--text); overflow-wrap:anywhere; }
      .ai-obsv-md { width:100%; min-height:280px; box-sizing:border-box; resize:vertical; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; color:var(--text); font:12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre; overflow:auto; }
      .ai-obsv-json { margin:0; max-height:320px; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; font-size: var(--font-xs); line-height:1.45; color:var(--text); white-space:pre-wrap; word-break:break-word; }
      @media (max-width: 760px) {
        .ai-obsv-hero { grid-template-columns:1fr; }
        .ai-obsv-evidence-row { grid-template-columns:1fr; gap:3px; }
      }

      /* ── CRM Workspace ──────────────────────────────────────── */
      .crm-kpi-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
      .crm-kpi-card {
        position:relative;
        overflow:hidden;
        border-top:3px solid var(--crm-kpi-accent,#1a6b8a);
      }
      .crm-kpi-card::after {
        content:"";
        position:absolute;
        inset:auto -18px -26px auto;
        width:76px;
        height:76px;
        border-radius:999px;
        background:color-mix(in srgb, var(--crm-kpi-accent,#1a6b8a) 12%, transparent);
      }
      .crm-kpi-contacts { --crm-kpi-accent:#1a6b8a; }
      .crm-kpi-sponsors { --crm-kpi-accent:#7c3aed; }
      .crm-kpi-pipeline,
      .crm-kpi-value { --crm-kpi-accent:#168a53; }
      .crm-kpi-due,
      .crm-kpi-renewal,
      .crm-kpi-meetings { --crm-kpi-accent:#d08f2e; }
      .crm-kpi-overdue { --crm-kpi-accent:#cc4d51; }
      .crm-view-tabs {
        display:inline-flex;
        gap:3px;
        padding: var(--space-1);
        background:color-mix(in srgb, var(--bg) 82%, var(--panel));
        border:1px solid var(--line);
        border-radius:999px;
        flex-wrap:wrap;
      }
      .crm-view-tab {
        border:0;
        border-radius:999px;
        background:transparent;
        color:var(--text-muted);
        cursor:pointer;
        font-size: var(--font-sm);
        font-weight:700;
        padding:6px 14px;
      }
      .crm-view-tab:hover { color:var(--text); background:var(--hover); }
      .crm-view-tab.active {
        background:var(--primary);
        color:#fff;
        box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 24%, transparent);
      }
      .crm-workbench-section { display:none; }
      .crm-workbench-section.active { display:block; }
      .crm-overview-panel { border-radius:12px; }
      .crm-table {
        border-collapse:separate;
        border-spacing:0;
        overflow:hidden;
        border:1px solid var(--line);
        border-radius:12px;
        background:var(--panel);
      }
      .crm-table th {
        position:sticky;
        top:0;
        z-index:1;
        background:color-mix(in srgb, var(--panel) 88%, var(--bg));
        border-bottom:1px solid var(--line);
        font-size: var(--font-xs);
        letter-spacing:.08em;
        text-transform:uppercase;
      }
      .crm-table td { border-bottom:1px solid color-mix(in srgb, var(--line) 72%, transparent); vertical-align:top; }
      .crm-row {
        --crm-row-accent:#1a6b8a;
        background:linear-gradient(90deg, var(--crm-row-accent) 0 4px, color-mix(in srgb, var(--crm-row-accent) 6%, var(--panel)) 4px, transparent 20px);
        transition:background .14s ease, box-shadow .14s ease;
      }
      .crm-row:nth-child(even) {
        background:linear-gradient(90deg, var(--crm-row-accent) 0 4px, color-mix(in srgb, var(--crm-row-accent) 4%, var(--panel)) 4px, color-mix(in srgb, var(--bg) 38%, var(--panel)) 100%);
      }
      .crm-row:hover td { background:color-mix(in srgb, var(--crm-row-accent) 9%, transparent); }
      .crm-row-contact { --crm-row-accent:#1a6b8a; }
      .crm-row-opportunity { --crm-row-accent:#168a53; }
      .crm-row-activity { --crm-row-accent:#d08f2e; }
      .crm-row-overdue,
      .crm-row-critical,
      .crm-row-lost { --crm-row-accent:#cc4d51; }
      .crm-row-won,
      .crm-row-completed { --crm-row-accent:#168a53; }
      .crm-row-on_hold,
      .crm-row-canceled { --crm-row-accent:#6b7280; }
      .crm-main-text { font-weight:700; color:var(--text); line-height:1.3; }
      .crm-subtext { margin-top:3px; color:var(--muted); font-size: var(--font-sm); line-height:1.35; }
      .crm-pill {
        display:inline-flex;
        align-items:center;
        gap:5px;
        border-radius:999px;
        border:1px solid color-mix(in srgb, var(--crm-pill-accent,#1a6b8a) 24%, transparent);
        background:color-mix(in srgb, var(--crm-pill-accent,#1a6b8a) 8%, transparent);
        color:color-mix(in srgb, var(--crm-pill-accent,#1a6b8a) 82%, var(--text));
        font-size: var(--font-xs);
        font-weight:800;
        letter-spacing:.02em;
        padding:2px 8px;
        white-space:nowrap;
      }
      .crm-pill::before {
        content:"";
        width:6px;
        height:6px;
        border-radius:999px;
        background:currentColor;
      }
      .crm-pill-contact { --crm-pill-accent:#1a6b8a; }
      .crm-pill-stage { --crm-pill-accent:#168a53; }
      .crm-pill-status { --crm-pill-accent:#1a6b8a; }
      .crm-pill-priority { --crm-pill-accent:#d08f2e; }
      .crm-pill-critical,
      .crm-pill-overdue,
      .crm-pill-lost { --crm-pill-accent:#cc4d51; }
      .crm-pill-won,
      .crm-pill-completed,
      .crm-pill-active { --crm-pill-accent:#168a53; }
      .crm-pill-on_hold,
      .crm-pill-canceled,
      .crm-pill-inactive { --crm-pill-accent:#6b7280; }
      .crm-actions { display:flex; gap:6px; flex-wrap:wrap; }
      .crm-actions .btn { padding:4px 8px; font-size: var(--font-xs); }
      .crm-editor-panel { background:transparent; border:0; box-shadow:none; padding:0; }
      .crm-work-body { margin-top:0; }
      .crm-work-body .cw-main .cw-card:first-child { border-top:3px solid var(--primary); }
      .crm-pipeline-bar {
        margin:0 0 14px;
        overflow-x:auto;
        padding:10px;
        border:1px solid var(--line);
        border-radius:12px;
        background:color-mix(in srgb, var(--panel) 88%, var(--bg));
      }
      .crm-pipeline-steps { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
      .crm-pipeline-step {
        padding:5px 10px;
        border:1px solid var(--line);
        border-radius:999px;
        background:var(--bg);
        color:var(--text-muted);
        font-size: var(--font-sm);
        font-weight:700;
        cursor:pointer;
        white-space:nowrap;
      }
      .crm-pipeline-step.done {
        border-color:color-mix(in srgb, #168a53 30%, transparent);
        background:color-mix(in srgb, #168a53 10%, transparent);
        color:#168a53;
      }
      .crm-pipeline-step.active {
        background:var(--primary);
        border-color:var(--primary);
        color:#fff;
      }
      .crm-pipeline-extra {
        margin-left:6px;
        font-size: var(--font-sm);
        font-weight:800;
        color:var(--muted);
      }
      .crm-pipeline-extra.lost { color:#cc4d51; }
      .crm-pipeline-extra.on_hold { color:#6b7280; }
      .crm-pipeline-summary {
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
        gap: var(--space-2);
        margin:8px 0 12px;
      }
      .crm-pipeline-card {
        border:1px solid var(--line);
        border-radius:10px;
        background:linear-gradient(135deg, color-mix(in srgb, #168a53 9%, var(--panel)), var(--panel));
        padding:9px 10px;
        text-align:left;
        cursor:pointer;
        color:var(--text);
      }
      .crm-pipeline-card:hover { border-color:color-mix(in srgb, #168a53 36%, var(--line)); transform:translateY(-1px); }
      .crm-pipeline-card.active { outline:2px solid color-mix(in srgb, var(--primary) 58%, transparent); border-color:var(--primary); }
      .crm-pipeline-card-stage { font-size: var(--font-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
      .crm-pipeline-card-count { margin-top:5px; font-family:'Rajdhani',sans-serif; font-size:24px; font-weight:800; color:var(--text); }
      .crm-pipeline-card-value { margin-top:2px; font-size: var(--font-xs); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      @media(max-width:900px) {
        .crm-view-tabs { width:100%; justify-content:space-between; }
        .crm-view-tab { flex:1; }
      }

      /* ── Field Visibility Admin Page ─────────────────────────── */
      .fv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top: var(--space-3); }
      .fv-card { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
      .fv-card-info { flex:1; min-width:0; }
      .fv-card-label { font-size: var(--font-md); font-weight:600; color:var(--text); }
      .fv-card-key { font-size: var(--font-xs); color:var(--text-muted); font-family:monospace; }
      .fv-toggle { position:relative; width:42px; height:22px; flex-shrink:0; }
      .fv-toggle input { opacity:0; width:0; height:0; }
      .fv-toggle-slider { position:absolute; cursor:pointer; inset:0; background:#d1d5db; border-radius:22px; transition:.2s; }
      .fv-toggle-slider:before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
      .fv-toggle input:checked + .fv-toggle-slider { background:var(--accent); }
      .fv-toggle input:checked + .fv-toggle-slider:before { transform:translateX(20px); }
      .fv-section-header { font-size: var(--font-sm); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:20px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }

      /* ── Cases Table ───────────────────────────────────────── */
      .cases-table {
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
      }
      .cases-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: color-mix(in srgb, var(--panel) 86%, var(--bg));
        border-bottom: 1px solid var(--line);
      }
      .cases-table td {
        border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
      }
      .cases-table .case-row {
        --case-row-accent: var(--primary);
        --case-row-tint: color-mix(in srgb, var(--case-row-accent) 8%, var(--panel));
        background: linear-gradient(90deg, var(--case-row-accent) 0 4px, var(--case-row-tint) 4px, transparent 18px);
        transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
      }
      .cases-table .case-row:nth-child(even) {
        background: linear-gradient(90deg, var(--case-row-accent) 0 4px, color-mix(in srgb, var(--case-row-accent) 5%, var(--panel)) 4px, color-mix(in srgb, var(--bg) 42%, var(--panel)) 100%);
      }
      .cases-table .case-row:hover td {
        background: color-mix(in srgb, var(--case-row-accent) 10%, transparent);
      }
      .cases-table .case-row.row-selected td {
        background: color-mix(in srgb, var(--case-row-accent) 14%, transparent);
        box-shadow: inset 0 0 0 999px rgba(255,255,255,.02);
      }
      .cases-table .case-status-open { --case-row-accent:#2563eb; }
      .cases-table .case-status-in_progress { --case-row-accent:#1a6b8a; }
      .cases-table .case-status-pending,
      .cases-table .case-status-pending_customer,
      .cases-table .case-status-waiting_customer { --case-row-accent:#d08f2e; }
      .cases-table .case-status-resolved { --case-row-accent:#1a8a4e; }
      .cases-table .case-status-closed { --case-row-accent:#6b7280; }
      .cases-table .case-priority-critical,
      .cases-table .case-sla-breached { --case-row-accent:#cc4d51; }
      .cases-table .case-priority-high:not(.case-sla-breached) { --case-row-accent:#d97706; }
      .case-ticket-main {
        font-weight: 700;
        color: var(--text);
      }
      .case-ticket-summary {
        margin-top: 2px;
        color: var(--muted);
        font-size: var(--font-sm);
        line-height: 1.35;
      }
      .case-type-pill,
      .case-status-pill,
      .case-sla-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .case-type-pill {
        padding: 2px 8px;
        background: color-mix(in srgb, var(--primary) 9%, transparent);
        color: var(--primary);
        border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
        font-size: var(--font-xs);
        font-weight: 700;
      }
      .case-status-stack {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
      }
      .case-status-pill {
        padding: 1px 7px;
        background: color-mix(in srgb, var(--case-row-accent) 9%, transparent);
        color: color-mix(in srgb, var(--case-row-accent) 82%, var(--text));
        border: 1px solid color-mix(in srgb, var(--case-row-accent) 22%, transparent);
        font-size: var(--font-xs);
        font-weight: 700;
        text-transform: capitalize;
      }
      .case-sla-pill {
        padding: 1px 7px;
        font-size: 10px;
        font-weight: 700;
        border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
        background: color-mix(in srgb, var(--muted) 7%, transparent);
        color: var(--muted);
      }
      .case-sla-pill .case-sla-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: currentColor;
      }
      .case-sla-pill.running {
        border-color: color-mix(in srgb, var(--primary) 24%, transparent);
        background: color-mix(in srgb, var(--primary) 7%, transparent);
        color: var(--primary);
      }
      .case-sla-pill.paused {
        border-color: color-mix(in srgb, #2563eb 28%, transparent);
        background: color-mix(in srgb, #2563eb 8%, transparent);
        color: #2563eb;
      }
      .case-sla-pill.completed {
        border-color: color-mix(in srgb, var(--good) 28%, transparent);
        background: color-mix(in srgb, var(--good) 8%, transparent);
        color: var(--good);
      }
      .case-sla-pill.breached {
        border-color: color-mix(in srgb, var(--bad) 34%, transparent);
        background: color-mix(in srgb, var(--bad) 9%, transparent);
        color: var(--bad);
      }
      .case-source-text {
        font-size: var(--font-sm);
        color: var(--text);
      }

      /* ── Database Admin: KPI Cards ── */
      .db-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-top: var(--space-2);
      }
      .db-kpi-card {
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: 7px 10px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .db-kpi-label {
        font-size: 9px;
        color: var(--muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .db-kpi-value {
        font-size: 17px;
        font-weight: 700;
        font-family: "Rajdhani", "Inter", sans-serif;
        color: var(--text);
        line-height: 1.1;
      }
      .db-kpi-sub {
        font-size: 10px;
        color: var(--muted);
      }
      .db-kpi-card.good .db-kpi-value { color: var(--good); }
      .db-kpi-card.warn .db-kpi-value { color: var(--warn); }
      .db-kpi-card.bad  .db-kpi-value { color: var(--bad);  }

      /* ── Database Admin: Scrollable table with sticky header ── */
      .db-table-scroll {
        overflow: auto;
        max-width: 100%;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
      }
      .db-table-scroll table {
        width: 100%;
        border-collapse: collapse;
        min-width: 300px;
      }
      .db-table-scroll thead th {
        position: sticky;
        top: 0;
        background: var(--bg);
        z-index: 1;
        white-space: nowrap;
        font-size: var(--font-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 6px 10px;
        border-bottom: 2px solid var(--line);
        color: var(--muted);
        text-align: left;
      }
      .db-table-scroll tbody td {
        padding: 5px 10px;
        font-size: var(--font-sm);
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
      .db-table-scroll tbody tr:last-child td { border-bottom: 0; }
      .db-table-scroll tbody tr:hover td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
      .db-table-scroll .mono { font-family: "SFMono-Regular", Consolas, monospace; }
      @media (max-width: 900px) {
        .db-kpi-grid { grid-template-columns: 1fr 1fr; }
      }
      .db-sort-th {
        cursor: pointer;
        user-select: none;
        transition: color 0.12s, background 0.12s;
      }
      .db-sort-th:hover { color: var(--text); background: color-mix(in srgb, var(--primary) 8%, var(--bg)); }
      .db-sort-icon { font-size: 9px; opacity: 0.45; margin-left: 3px; }
      .db-sort-th[data-active="true"] .db-sort-icon { opacity: 1; color: var(--primary); }

      /* ── Database Connection: page layout ── */
      .db-conn-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .db-conn-header h3 { margin: 0; }
      .db-conn-header .note { margin: 4px 0 0; }
      .db-conn-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
      .db-conn-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-top: var(--space-2);
      }
      .db-conn-field {
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 5px 9px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .db-conn-label {
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }
      .db-conn-value {
        font-size: var(--font-sm);
        color: var(--text);
        font-weight: 500;
        word-break: break-all;
      }
      .db-conn-value.mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: var(--font-xs); }
      .db-section-divider {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 13px 0 7px;
        padding-bottom: 5px;
        border-bottom: 2px solid var(--line);
      }
      .db-section-label {
        font-family: "Rajdhani", "Inter", sans-serif;
        font-size: var(--font-sm);
        font-weight: 700;
        color: var(--text);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .db-version-short { font-size: var(--font-md) !important; line-height: 1.2; }
      .db-version-full { font-size: 10px !important; word-break: break-word; white-space: normal; line-height: 1.5; opacity: 0.7; }
      @media (max-width: 900px) {
        .db-conn-grid { grid-template-columns: 1fr 1fr; }
        .db-conn-header { flex-direction: column; }
        .db-conn-actions { width: 100%; }
      }

      /* ── System Logs: Page Header + Tabs ── */
      .logs-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        flex-wrap: wrap;
        margin-bottom: var(--space-3);
      }
      .logs-tab-bar {
        display: flex;
        gap: 3px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: 3px;
      }
      .logs-tab-btn {
        background: transparent;
        border: none;
        border-radius: var(--radius-sm);
        padding: 5px 13px;
        font-size: var(--font-sm);
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        white-space: nowrap;
        font-family: "Inter", sans-serif;
        transition: background 0.12s, color 0.12s;
      }
      .logs-tab-btn:hover { background: var(--line); color: var(--text); }
      .logs-tab-btn.active {
        background: var(--panel);
        color: var(--text);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      }
      .logs-tab-pane { display: none; }
      .logs-tab-pane.active { display: block; }

      /* ── System Logs: Compact Filter Bar ── */
      .logs-filter-bar {
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 7px 10px;
        margin-bottom: var(--space-2);
      }
      .logs-filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: flex-end;
      }
      .logs-filter-field {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
      }
      .logs-filter-field label {
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }
      .logs-filter-field input,
      .logs-filter-field select {
        font-size: var(--font-sm);
        height: 27px;
        padding: 0 6px;
        min-width: 100px;
      }
      .logs-filter-wide { flex: 1 1 170px; }
      .logs-filter-field input.logs-filter-wide { min-width: 170px; }
      .logs-filter-actions {
        display: flex;
        gap: 5px;
        align-items: flex-end;
        flex-wrap: wrap;
        padding-bottom: 1px;
      }
      .logs-btn-sm { padding: 4px 9px !important; font-size: var(--font-xs) !important; }
      .logs-check-label {
        font-size: var(--font-xs);
        display: flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--muted);
        white-space: nowrap;
        padding-bottom: 3px;
        cursor: pointer;
      }

      /* ── System Logs: Execution detail split ── */
      .logs-detail-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .logs-detail-col {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      /* ── System Logs: Cleanup stats grid ── */
      .logs-stats-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        margin-bottom: var(--space-3);
      }
      .logs-stat-card {
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 7px 10px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .logs-stat-date { font-size: var(--font-sm) !important; line-height: 1.3; }

      /* ── System Logs: Cleanup controls ── */
      .logs-cleanup-row {
        display: flex;
        align-items: flex-end;
        gap: var(--space-3);
        flex-wrap: wrap;
        padding: 10px 12px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
      }
      .logs-cleanup-btns {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: flex-end;
      }

      @media (max-width: 900px) {
        .logs-page-header { flex-direction: column; align-items: flex-start; }
        .logs-detail-split { grid-template-columns: 1fr; }
        .logs-stats-grid { grid-template-columns: repeat(3, 1fr); }
      }

      /* ═══════════════════════════════════════════════════════════════════
         Phase 7 — Page shells (list / detail / dashboard)
         ═══════════════════════════════════════════════════════════════════ */
      .sgz-page {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
      }
      .sgz-page-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
      }
      .sgz-page-toolbar > .sgz-search {
        flex: 1;
        min-width: 200px;
      }
      .sgz-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .sgz-page-title {
        font-size: var(--font-xl);
        font-weight: 600;
        margin: 0;
      }
      .sgz-page-subtitle {
        color: var(--text-muted);
        font-size: var(--font-sm);
        margin: 0;
      }
      .sgz-kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--space-3);
      }
      .sgz-kpi {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: var(--space-3);
      }
      .sgz-kpi .label {
        font-size: var(--font-xs);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--space-1);
      }
      .sgz-kpi .value {
        font-size: var(--font-xl);
        font-weight: 700;
        line-height: 1.1;
      }

      /* ═══════════════════════════════════════════════════════════════════
         Phase 6 — Modal / Drawer / Toast / Empty primitives
         ═══════════════════════════════════════════════════════════════════ */

      /* ─── Modal (centered dialog) ─── */
      .sgz-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .42);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-modal);
      }
      .sgz-modal-backdrop.hidden { display: none; }
      .sgz-modal {
        background: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        max-width: min(640px, 92vw);
        max-height: 92vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .sgz-modal.sgz-modal-sm  { max-width: 420px; }
      .sgz-modal.sgz-modal-lg  { max-width: 880px; }
      .sgz-modal.sgz-modal-full { max-width: 96vw; height: 92vh; }
      .sgz-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-4);
        border-bottom: 1px solid var(--line);
      }
      .sgz-modal-title { margin: 0; font-size: var(--font-lg); font-weight: 600; }
      .sgz-modal-body { flex: 1; padding: var(--space-4); overflow: auto; }
      .sgz-modal-foot {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border-top: 1px solid var(--line);
        background: var(--surface-2);
      }

      /* ─── Drawer (right slide-in) ─── */
      .sgz-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: min(440px, 92vw);
        height: 100vh;
        background: var(--surface);
        border-left: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        display: flex;
        flex-direction: column;
        z-index: var(--z-modal);
      }
      .sgz-drawer.hidden { display: none; }

      /* ─── Toast host + toast item ─── */
      #sgzToastHost {
        position: fixed;
        bottom: var(--space-4);
        right: var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        z-index: var(--z-toast);
        pointer-events: none;
      }
      .sgz-toast {
        pointer-events: auto;
        min-width: 240px;
        max-width: 380px;
        padding: var(--space-3) var(--space-4);
        background: var(--surface);
        border: 1px solid var(--line);
        border-left: 4px solid var(--info);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        font-size: var(--font-sm);
        color: var(--text);
        animation: sgz-toast-in 0.18s ease-out;
      }
      .sgz-toast.success { border-left-color: var(--good); }
      .sgz-toast.warn    { border-left-color: var(--warn); }
      .sgz-toast.error   { border-left-color: var(--bad); }
      @keyframes sgz-toast-in {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* ─── Empty / loading / error placeholder ─── */
      .sgz-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--space-5);
        color: var(--text-muted);
        font-size: var(--font-sm);
        gap: var(--space-2);
        min-height: 120px;
      }
      .sgz-empty.error { color: var(--bad); }
      .sgz-spinner {
        width: 22px;
        height: 22px;
        border: 2px solid var(--line);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: sgz-spin 0.7s linear infinite;
      }
      @keyframes sgz-spin {
        to { transform: rotate(360deg); }
      }
      /* ── ITSM Scenarios — compact, collapsible card ──────────────────── */
      .itsm-scenario-card {
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--bg-subtle, #fafbfa);
        margin-bottom: var(--space-2);
        overflow: visible;
      }
      .itsm-scenario-card.is-open { background: #fff; }
      .itsm-scenario-row {
        display: grid;
        grid-template-columns: minmax(180px, 2fr) 90px minmax(0, 3fr) auto auto;
        gap: var(--space-2);
        align-items: center;
        padding: var(--space-2) var(--space-3);
        overflow: visible;
      }
      .itsm-scenario-row > select,
      .itsm-scenario-row > input { height: 30px; font-size: var(--font-sm); }
      .itsm-scenario-row .sc-method { font-weight: 600; }
      .itsm-scenario-row .sc-expand-btn,
      .itsm-scenario-row .sc-remove-btn {
        height: 30px;
        padding: 0 var(--space-2);
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
        font-size: var(--font-sm);
        color: var(--text-muted);
      }
      .itsm-scenario-row .sc-expand-btn:hover { color: var(--primary); border-color: var(--primary); }
      .itsm-scenario-row .sc-remove-btn { color: var(--bad); }
      .itsm-scenario-row .sc-remove-btn:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
      .itsm-scenario-details {
        padding: 0 var(--space-3) var(--space-3);
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--space-2);
        margin-top: var(--space-2);
      }
      .itsm-scenario-details > .sc-field { grid-column: span 12; }
      .itsm-scenario-details > .sc-field.half { grid-column: span 6; }
      .itsm-scenario-details label { font-size: var(--font-xs); color: var(--text-muted); margin-bottom: 2px; }
      .itsm-scenario-details textarea {
        width: 100%;
        font-family: var(--font-mono, monospace);
        font-size: 11px;
        padding: 6px 8px;
      }
      @media (max-width: 720px) {
        .itsm-scenario-row {
          grid-template-columns: 1fr;
        }
        .itsm-scenario-details > .sc-field.half { grid-column: span 12; }
      }
      /* Empty/loading/error placeholder inside a <tbody> row */
      .sgz-empty-row {
        padding: var(--space-4) var(--space-3);
        color: var(--text-muted);
        font-size: var(--font-sm);
        text-align: center;
      }
      .sgz-empty-row.error { color: var(--bad); }
      .sgz-empty-row.loading { color: var(--text-muted); }
      .sgz-empty-row > .sgz-spinner-inline {
        display: inline-block;
        vertical-align: -3px;
        width: 12px;
        height: 12px;
        margin-right: var(--space-2);
        border-width: 2px;
      }
      .sgz-spinner-inline {
        border: 2px solid var(--line);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: sgz-spin 0.7s linear infinite;
      }