:root {
            /* TYH workspace design foundation. Keep aliases stable for older pages. */
            --tyh-color-navy-950: #0b1220;
            --tyh-color-navy-900: #101827;
            --tyh-color-navy-800: #182235;
            --tyh-color-navy-700: #243044;
            --tyh-color-gold-600: #a77b16;
            --tyh-color-gold-500: #c9a227;
            --tyh-color-gold-100: #fff7d6;
            --tyh-color-teal-700: #0f766e;
            --tyh-color-teal-100: #e6fffb;
            --tyh-color-neutral-900: #0f172a;
            --tyh-color-neutral-800: #1f2937;
            --tyh-color-neutral-700: #334155;
            --tyh-color-neutral-600: #475569;
            --tyh-color-neutral-500: #64748b;
            --tyh-color-neutral-200: #e2e8f0;
            --tyh-color-neutral-100: #f7f9fb;
            --tyh-color-neutral-050: #fbfcfe;
            --tyh-color-success: #166534;
            --tyh-color-success-bg: #ecfdf3;
            --tyh-color-success-border: #bbf7d0;
            --tyh-color-warning: #92400e;
            --tyh-color-warning-bg: #fffbeb;
            --tyh-color-warning-border: #fde68a;
            --tyh-color-danger: #991b1b;
            --tyh-color-danger-bg: #fef2f2;
            --tyh-color-danger-border: #fecaca;
            --tyh-color-info: #1d4ed8;
            --tyh-color-info-bg: #eff6ff;
            --tyh-color-info-border: #bfdbfe;
            --tyh-space-1: 4px;
            --tyh-space-2: 8px;
            --tyh-space-3: 12px;
            --tyh-space-4: 16px;
            --tyh-space-5: 20px;
            --tyh-space-6: 24px;
            --tyh-space-8: 32px;
            --tyh-radius-xs: 4px;
            --tyh-radius-sm: 6px;
            --tyh-radius-md: 7px;
            --tyh-radius-lg: 8px;
            --tyh-radius-xl: 12px;
            --tyh-radius-pill: 999px;
            --tyh-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
            --tyh-shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.05);
            --tyh-shadow-md: 0 12px 28px rgba(15, 23, 42, 0.08);
            --tyh-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14);
            --tyh-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            --tyh-font-size-xs: 12px;
            --tyh-font-size-sm: 13px;
            --tyh-font-size-md: 14px;
            --tyh-font-size-base: 15px;
            --tyh-font-size-lg: 18px;
            --tyh-font-size-xl: 24px;
            --tyh-line-tight: 1.2;
            --tyh-line-base: 1.45;
            --tyh-bg: #eef2f6;
            --tyh-surface: var(--tyh-color-neutral-050);
            --tyh-surface-raised: #ffffff;
            --tyh-surface-soft: var(--tyh-color-neutral-100);
            --tyh-border: #cfdae6;
            --tyh-border-soft: var(--tyh-color-neutral-200);
            --tyh-text: var(--tyh-color-neutral-900);
            --tyh-muted: var(--tyh-color-neutral-500);
            --tyh-link: #075985;
            --tyh-primary: var(--tyh-color-navy-900);
            --tyh-primary-hover: var(--tyh-color-navy-700);
            --tyh-gold: var(--tyh-color-gold-500);
            --tyh-gold-soft: var(--tyh-color-gold-100);
            --tyh-teal: var(--tyh-color-teal-700);
            --tyh-teal-soft: var(--tyh-color-teal-100);
            --tyh-focus: #0ea5e9;
            --tyh-shadow: var(--tyh-shadow-md);
            --tyh-command: var(--tyh-color-navy-900);
            --tyh-command-soft: var(--tyh-color-navy-800);
        }

        html {
            font-size: 16px;
        }

        body {
            font-family: var(--tyh-font-sans);
            background: var(--tyh-bg);
            color: var(--tyh-text);
            margin: 0;
            font-size: var(--tyh-font-size-base);
            line-height: 1.55;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        .skip-link {
            position: absolute;
            left: 12px;
            top: 8px;
            z-index: 1000;
            transform: translateY(-140%);
            padding: 8px 12px;
            border-radius: 7px;
            background: #fff7d6;
            color: #111827;
            font-weight: 800;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
        }

        .skip-link:focus {
            transform: translateY(0);
            text-decoration: none;
        }

        .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;
        }

        a {
            color: var(--tyh-link);
            text-decoration: none;
            font-weight: 500;
        }

        a:hover {
            text-decoration: underline;
        }

        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 3px solid rgba(37, 99, 235, 0.28);
            outline-offset: 2px;
        }

        input,
        select,
        textarea,
        button {
            font: inherit;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        input[type="time"],
        input[type="url"],
        select,
        textarea {
            min-height: 36px;
            padding: 7px 9px;
            border-radius: 7px;
            border: 1px solid #cbd5e1;
            background: #ffffff;
            color: var(--tyh-text);
            font-size: 0.95rem;
            line-height: 1.4;
            box-sizing: border-box;
        }

        textarea {
            min-height: 72px;
        }

        /* ✅ Header with logo */
        .site-header {
            background: var(--tyh-command);
            border-bottom: 1px solid rgba(255, 255, 255, 0.10);
            border-top: 3px solid var(--tyh-gold);
            padding: 9px 18px;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .site-header-inner {
            max-width: 1500px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            color: #ffffff;
        }

        .brand-logo {
            height: 48px;
            width: 48px;
            object-fit: contain;
            border-radius: 8px;
            display: block;
            background: transparent;
            border: 0;
            box-shadow: none;
        }

        .brand-title {
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 0;
            margin: 0;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #ffffff;
        }

        .workspace-menu-button {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 40px;
            padding: 8px 12px;
            border: 1px solid rgba(201, 162, 39, 0.44);
            border-radius: var(--tyh-radius-lg);
            background: rgba(255, 247, 214, 0.12);
            color: #fff7d6;
            font: inherit;
            font-size: var(--tyh-font-size-sm);
            font-weight: 850;
            line-height: 1;
            cursor: pointer;
        }

        .workspace-menu-button:hover {
            background: rgba(255, 247, 214, 0.2);
        }

        .workspace-menu-icon,
        .sidebar-close-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .workspace-menu-icon svg,
        .sidebar-close-button svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .header-right {
            text-align: right;
            font-size: 0.88rem;
            white-space: normal;
            color: #cbd5e1;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
        }

        .header-right .small {
            margin: 0 0 5px 0;
        }

        .header-right .links,
        .workspace-nav {
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 6px;
            align-items: center;
        }

        .workspace-nav a,
        .workspace-nav .nav-cluster-toggle,
        .header-right .links a,
        .logout-link-button {
            min-height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 9px;
            border: 1px solid var(--tyh-border);
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.08);
            color: #f8fafc;
            font-size: 0.84rem;
            line-height: 1.2;
        }

        .workspace-nav a:hover,
        .workspace-nav .nav-cluster-toggle:hover,
        .header-right .links a:hover,
        .logout-link-button:hover {
            background: rgba(201, 162, 39, 0.18);
            border-color: rgba(201, 162, 39, 0.44);
            color: #fff7d6;
            text-decoration: none;
        }

        .workspace-nav a.is-active,
        .workspace-nav .nav-cluster-toggle.is-active,
        .header-right .links a.is-active {
            background: var(--tyh-gold);
            border-color: var(--tyh-gold);
            color: #111827;
        }

        .logout-inline-form {
            display: inline;
            margin: 0;
        }

        .logout-link-button {
            appearance: none;
            cursor: pointer;
            font: inherit;
            font-weight: 650;
        }

        .workspace-nav-backdrop {
            display: none;
        }

        .app-shell {
            max-width: 1540px;
            margin: 0 auto;
            padding: 20px 24px 44px;
            display: grid;
            grid-template-columns: 268px minmax(0, 1fr);
            gap: 24px;
            box-sizing: border-box;
        }

        .workspace-sidebar {
            position: sticky;
            top: 84px;
            align-self: start;
            display: flex;
            flex-direction: column;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 34%),
                var(--tyh-command);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-top: 3px solid var(--tyh-gold);
            border-radius: var(--tyh-radius-lg);
            padding: 14px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
            min-height: calc(100vh - 108px);
            max-height: calc(100vh - 108px);
            overflow: auto;
            overscroll-behavior: contain;
            box-sizing: border-box;
        }

        .sidebar-mobile-head {
            display: none;
        }

        .sidebar-kicker {
            color: #94a3b8;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            margin: 2px 2px 10px;
        }

        .sidebar-profile {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            margin: 0 0 12px;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid rgba(226, 232, 240, 0.14);
            background: rgba(255, 255, 255, 0.07);
        }

        .sidebar-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #fff7d6;
            color: #5f4700;
            font-size: 15px;
            font-weight: 900;
            border: 1px solid rgba(201, 162, 39, 0.55);
        }

        .sidebar-profile-text {
            min-width: 0;
        }

        .sidebar-profile-name {
            display: block;
            color: #ffffff;
            font-size: 0.92rem;
            font-weight: 800;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-profile-role {
            display: block;
            margin-top: 3px;
            color: #cbd5e1;
            font-size: 0.78rem;
            line-height: 1.2;
        }

        .workspace-sidebar .workspace-nav {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 7px;
            padding: 10px 0;
            border-top: 1px solid rgba(226, 232, 240, 0.13);
            border-bottom: 1px solid rgba(226, 232, 240, 0.13);
        }

        .workspace-sidebar .workspace-nav a,
        .workspace-sidebar .workspace-nav .nav-cluster-toggle,
        .workspace-sidebar .logout-link-button {
            width: 100%;
            min-height: 42px;
            justify-content: flex-start;
            gap: 10px;
            padding: 9px 11px;
            box-sizing: border-box;
            font-size: 14px;
            font-weight: 800;
            border-left: 3px solid transparent;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
            transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
        }

        .workspace-sidebar .workspace-nav .nav-cluster-toggle {
            appearance: none;
            border-top: 1px solid rgba(255, 255, 255, 0.18);
            border-right: 1px solid rgba(255, 255, 255, 0.18);
            border-bottom: 1px solid rgba(255, 255, 255, 0.18);
            cursor: pointer;
            color: #f8fafc;
            text-align: left;
            font-family: inherit;
        }

        .workspace-sidebar .workspace-nav a::before {
            display: none;
        }

        .workspace-sidebar .nav-icon,
        .workspace-sidebar .logout-link-button .nav-icon {
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: 1px solid rgba(226, 232, 240, 0.16);
            background: rgba(255, 255, 255, 0.08);
            color: #dbe4f0;
            line-height: 1;
        }

        .workspace-sidebar .nav-icon svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .workspace-sidebar .workspace-nav a:hover,
        .workspace-sidebar .workspace-nav .nav-cluster-toggle:hover {
            transform: translateX(2px);
            border-left-color: rgba(255, 247, 214, 0.58);
        }

        .workspace-sidebar .workspace-nav a.is-active,
        .workspace-sidebar .workspace-nav .nav-cluster-toggle.is-active {
            background: #fff7d6;
            border-color: rgba(255, 247, 214, 0.95);
            border-left-color: var(--tyh-gold);
            box-shadow: 0 8px 18px rgba(201, 162, 39, 0.16);
            color: #111827;
        }

        .workspace-sidebar .workspace-nav a.is-active::before {
            background: #111827;
        }

        .workspace-sidebar .workspace-nav a.is-active .nav-icon,
        .workspace-sidebar .workspace-nav .nav-cluster-toggle.is-active .nav-icon {
            background: #111827;
            color: #fff7d6;
            border-color: rgba(17, 24, 39, 0.42);
        }

        .workspace-sidebar .workspace-nav a .nav-link-label,
        .workspace-sidebar .workspace-nav .nav-cluster-toggle .nav-link-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .workspace-sidebar .workspace-nav a.nav-with-badge,
        .workspace-sidebar .workspace-nav .nav-cluster-toggle.nav-with-badge {
            justify-content: flex-start;
        }

        .workspace-sidebar .workspace-nav a.nav-with-badge .nav-badge,
        .workspace-sidebar .workspace-nav .nav-cluster-toggle.nav-with-badge .nav-badge {
            margin-left: auto;
        }

        .nav-chevron {
            width: 16px;
            height: 16px;
            margin-left: auto;
            color: #cbd5e1;
            transition: transform .16s ease;
        }

        .nav-chevron svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .nav-cluster.is-open .nav-chevron {
            transform: rotate(90deg);
        }

        .workspace-sidebar .workspace-nav .nav-cluster-toggle.is-active .nav-chevron {
            color: #111827;
        }

        .nav-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            padding: 0 7px;
            border-radius: 999px;
            background: #dc2626;
            color: #ffffff;
            font-size: 12px;
            font-weight: 900;
        }

        .workspace-sidebar .workspace-nav a.is-active .nav-badge {
            background: #111827;
            color: #ffffff;
        }

        .workspace-sidebar .nav-cluster {
            display: flex;
            flex-direction: column;
            gap: 7px;
            min-width: 0;
        }

        .workspace-subnav {
            display: none;
            flex-direction: column;
            gap: 5px;
            margin: 0 0 4px 41px;
            padding-left: 9px;
            border-left: 1px solid rgba(226, 232, 240, 0.16);
        }

        .nav-cluster.is-open .workspace-subnav {
            display: flex;
        }

        .workspace-sidebar .workspace-subnav a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-height: 32px;
            padding: 7px 10px;
            border-left: 0;
            border-radius: 7px;
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.045);
            box-shadow: none;
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

        .subnav-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .subnav-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            min-height: 20px;
            padding: 2px 6px;
            border-radius: 999px;
            background: rgba(219, 234, 254, .16);
            color: #bfdbfe;
            font-size: 11px;
            font-weight: 900;
            line-height: 1;
        }

        .workspace-sidebar .workspace-subnav a:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.095);
            transform: none;
        }

        .workspace-sidebar .workspace-subnav a.is-sub-active {
            color: #111827;
            background: #fff7d6;
            box-shadow: inset 3px 0 0 var(--tyh-gold);
        }

        .workspace-sidebar .workspace-subnav a.is-sub-active .subnav-count {
            background: rgba(17, 24, 39, .12);
            color: #111827;
        }

        .workspace-sidebar .logout-inline-form {
            display: block;
            margin-top: auto;
            padding-top: 10px;
            border-top: 1px solid rgba(226, 232, 240, 0.16);
        }

        .workspace-sidebar .logout-link-button {
            color: #fee2e2;
            border-color: rgba(248, 113, 113, 0.32);
        }

        .workspace-sidebar .logout-link-button .nav-icon {
            color: #fecaca;
            border-color: rgba(248, 113, 113, 0.28);
            background: rgba(185, 28, 28, 0.14);
        }

        .workspace-sidebar .logout-link-button:hover {
            color: #ffffff;
            background: rgba(185, 28, 28, 0.28);
            border-color: rgba(248, 113, 113, 0.52);
        }

        .workspace-nav-backdrop {
            display: none;
        }

        .workspace-nav-backdrop[hidden] {
            display: none !important;
        }

        .app-shell .container {
            max-width: none;
            margin: 0;
            padding: 2px 0 32px;
        }

        .app-shell .container,
        .app-shell .card,
        .app-shell .stack,
        .app-shell .stack > *,
        .app-shell .dash-col,
        .app-shell .dash-section,
        .app-shell .todo-section,
        .app-shell .tr-section,
        .app-shell form {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        .container {
            max-width: 1360px;
            margin: 24px auto 46px;
            padding: 0 24px 30px;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            box-sizing: border-box;
        }

        h1, h2, h3 {
            margin-top: 0;
            color: var(--tyh-text);
            line-height: 1.2;
        }

        h2 {
            margin-bottom: 10px;
        }

        h3 {
            margin-bottom: 8px;
        }

        .page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin: 0 0 var(--tyh-space-5);
            gap: var(--tyh-space-4);
            flex-wrap: wrap;
            padding-bottom: var(--tyh-space-4);
            border-bottom: 1px solid var(--tyh-border-soft);
        }

        .page-header h1,
        .page-header h2 {
            margin-bottom: 0;
            font-size: var(--tyh-font-size-xl);
            font-weight: 850;
            letter-spacing: 0;
            line-height: var(--tyh-line-tight);
        }

        .sub-links {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--tyh-space-2);
            font-size: var(--tyh-font-size-sm);
            margin: 0 0 var(--tyh-space-3);
            color: var(--tyh-muted);
        }

        .breadcrumb,
        .breadcrumbs {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--tyh-space-2);
            margin: 0 0 var(--tyh-space-3);
            color: var(--tyh-muted);
            font-size: var(--tyh-font-size-sm);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 7px 12px;
            border-radius: var(--tyh-radius-md);
            border: 1px solid transparent;
            font-size: 0.92rem;
            font-weight: 650;
            line-height: 1.25;
            cursor: pointer;
            text-decoration: none;
            box-sizing: border-box;
            transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
        }

        .btn:active {
            transform: translateY(1px);
        }

        .btn:hover {
            text-decoration: none;
        }

        .btn-primary {
            background: var(--tyh-primary);
            color: #fff;
            border-color: var(--tyh-primary);
            box-shadow: 0 7px 16px rgba(15, 23, 42, 0.14);
        }

        .btn-primary:hover {
            background: var(--tyh-primary-hover);
        }

        .btn-outline {
            background: #fff;
            color: var(--tyh-text);
            border-color: #cbd5e1;
        }

        .btn-outline:hover {
            background: var(--tyh-gold-soft);
            border-color: rgba(201, 162, 39, 0.45);
        }

        .btn-secondary {
            background: #ffffff;
            color: var(--tyh-text);
            border-color: #cbd5e1;
        }

        .btn-secondary:hover {
            background: var(--tyh-surface-soft);
            border-color: var(--tyh-border);
        }

        .btn-sm,
        .btn.btn-sm {
            min-height: 32px;
            padding: 6px 10px;
            font-size: var(--tyh-font-size-sm);
        }

        .btn-danger {
            background: var(--tyh-color-danger);
            color: #ffffff;
            border-color: var(--tyh-color-danger);
        }

        .btn-danger:hover {
            background: #7f1d1d;
            border-color: #7f1d1d;
        }

        .btn-outline.btn-danger {
            background: #ffffff;
            color: var(--tyh-color-danger);
            border-color: var(--tyh-color-danger-border);
        }

        .btn-outline.btn-danger:hover {
            background: var(--tyh-color-danger-bg);
            border-color: #fca5a5;
        }

        .btn-success {
            background: var(--tyh-color-success);
            color: #ffffff;
            border-color: var(--tyh-color-success);
        }

        .btn-warning {
            background: var(--tyh-color-warning-bg);
            color: var(--tyh-color-warning);
            border-color: var(--tyh-color-warning-border);
        }

        .card {
            background: var(--tyh-surface-raised);
            border: 1px solid var(--tyh-border-soft);
            border-radius: var(--tyh-radius-lg);
            box-shadow: var(--tyh-shadow);
        }

        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 12px;
            align-items: center;
            padding: var(--tyh-space-3);
            background: var(--tyh-surface-raised);
            border-radius: var(--tyh-radius-lg);
            border: 1px solid var(--tyh-border-soft);
            margin-bottom: var(--tyh-space-4);
            font-size: 0.95rem;
            box-shadow: var(--tyh-shadow-sm);
        }

        .filters label {
            font-weight: 650;
            margin-right: 4px;
            color: var(--tyh-color-neutral-700);
        }

        .filters select,
        .filters input[type="text"] {
            min-width: 150px;
            font-size: 0.95rem;
        }

        .filters input[type="text"] {
            min-width: 240px;
        }

        table.data-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--tyh-surface-raised);
            font-size: 0.92rem;
            line-height: 1.45;
            border: 1px solid var(--tyh-border-soft);
        }

        .data-table thead {
            background: var(--tyh-surface-soft);
        }

        .data-table th,
        .data-table td {
            padding: 8px 10px;
            border: 0;
            border-bottom: 1px solid var(--tyh-border-soft);
            vertical-align: top;
        }

        .data-table th {
            text-align: left;
            font-weight: 700;
            color: var(--tyh-color-neutral-700);
            white-space: nowrap;
        }

        .data-table td {
            color: var(--tyh-color-neutral-800);
        }

        .data-table tr:nth-child(even) {
            background: var(--tyh-surface);
        }

        .data-table tr:hover td {
            background: #fffdf4;
        }

        .group-row {
            background: #e8edf5 !important;
            font-weight: 700;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 3px 8px;
            border-radius: var(--tyh-radius-pill);
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.25;
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .badge-active {
            background: var(--tyh-color-success-bg);
            color: var(--tyh-color-success);
            border-color: var(--tyh-color-success-border);
        }

        .badge-inactive {
            background: var(--tyh-color-danger-bg);
            color: var(--tyh-color-danger);
            border-color: var(--tyh-color-danger-border);
        }

        .alert,
        .notice,
        .tyh-alert {
            display: block;
            margin: 0 0 var(--tyh-space-4);
            padding: var(--tyh-space-3) var(--tyh-space-4);
            border: 1px solid var(--tyh-color-info-border);
            border-radius: var(--tyh-radius-lg);
            background: var(--tyh-color-info-bg);
            color: var(--tyh-color-info);
            font-size: var(--tyh-font-size-sm);
            font-weight: 700;
            line-height: var(--tyh-line-base);
        }

        .alert-success,
        .tyh-alert--success {
            background: var(--tyh-color-success-bg);
            border-color: var(--tyh-color-success-border);
            color: var(--tyh-color-success);
        }

        .alert-warning,
        .tyh-alert--warning {
            background: var(--tyh-color-warning-bg);
            border-color: var(--tyh-color-warning-border);
            color: var(--tyh-color-warning);
        }

        .alert-danger,
        .tyh-alert--danger {
            background: var(--tyh-color-danger-bg);
            border-color: var(--tyh-color-danger-border);
            color: var(--tyh-color-danger);
        }

        .alert-info,
        .tyh-alert--info {
            background: var(--tyh-color-info-bg);
            border-color: var(--tyh-color-info-border);
            color: var(--tyh-color-info);
        }

        .messages,
        .tyh-message-list {
            display: grid;
            gap: var(--tyh-space-2);
            margin: 0 0 var(--tyh-space-4);
        }

        .tyh-page {
            max-width: 1360px;
            margin: 0 auto;
            min-width: 0;
        }

        .tyh-page--narrow {
            max-width: 960px;
        }

        .tyh-stack {
            display: grid;
            gap: var(--tyh-space-4);
        }

        .tyh-stack--tight {
            gap: var(--tyh-space-2);
        }

        .tyh-text-muted,
        .tyh-muted {
            color: var(--tyh-muted);
        }

        .tyh-text-small {
            font-size: var(--tyh-font-size-sm);
            line-height: var(--tyh-line-base);
        }

        .tyh-eyebrow {
            margin: 0 0 var(--tyh-space-1);
            color: var(--tyh-teal);
            font-size: var(--tyh-font-size-xs);
            font-weight: 900;
            letter-spacing: .08em;
            line-height: var(--tyh-line-tight);
            text-transform: uppercase;
        }

        .tyh-page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--tyh-space-4);
            margin: 0 0 var(--tyh-space-5);
            padding-bottom: var(--tyh-space-4);
            border-bottom: 1px solid var(--tyh-border-soft);
        }

        .tyh-page-header-main {
            min-width: 0;
        }

        .tyh-page-title {
            margin: 0;
            color: var(--tyh-text);
            font-size: var(--tyh-font-size-xl);
            font-weight: 850;
            letter-spacing: 0;
            line-height: var(--tyh-line-tight);
        }

        .tyh-page-subtitle {
            margin: var(--tyh-space-2) 0 0;
            max-width: 820px;
            color: var(--tyh-muted);
            font-size: var(--tyh-font-size-sm);
            line-height: var(--tyh-line-base);
        }

        .tyh-page-actions,
        .tyh-action-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: var(--tyh-space-2);
        }

        .tyh-card {
            background: var(--tyh-surface-raised);
            border: 1px solid var(--tyh-border-soft);
            border-radius: var(--tyh-radius-lg);
            box-shadow: var(--tyh-shadow-sm);
            box-sizing: border-box;
        }

        .tyh-card--padded {
            padding: var(--tyh-space-4);
        }

        .tyh-card--soft {
            background: var(--tyh-surface-soft);
            box-shadow: none;
        }

        .tyh-card__header,
        .tyh-section-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--tyh-space-3);
            padding-bottom: var(--tyh-space-3);
            border-bottom: 1px solid var(--tyh-border-soft);
        }

        .tyh-section-title {
            margin: 0;
            color: var(--tyh-text);
            font-size: var(--tyh-font-size-lg);
            font-weight: 800;
            line-height: var(--tyh-line-tight);
        }

        .tyh-section-meta {
            margin: var(--tyh-space-1) 0 0;
            color: var(--tyh-muted);
            font-size: var(--tyh-font-size-sm);
            line-height: var(--tyh-line-base);
        }

        .tyh-table-wrap {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid var(--tyh-border-soft);
            border-radius: var(--tyh-radius-lg);
            background: var(--tyh-surface-raised);
            box-shadow: var(--tyh-shadow-sm);
        }

        .tyh-table-wrap > table,
        table.tyh-data-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--tyh-surface-raised);
        }

        .tyh-table-wrap > table th,
        .tyh-table-wrap > table td,
        table.tyh-data-table th,
        table.tyh-data-table td {
            padding: 9px 11px;
            border-bottom: 1px solid var(--tyh-border-soft);
            vertical-align: top;
        }

        .tyh-table-wrap > table th,
        table.tyh-data-table th {
            background: var(--tyh-surface-soft);
            color: var(--tyh-color-neutral-700);
            font-size: var(--tyh-font-size-sm);
            font-weight: 800;
            text-align: left;
            white-space: nowrap;
        }

        .tyh-filter-panel {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: var(--tyh-space-3);
            margin: 0 0 var(--tyh-space-4);
            padding: var(--tyh-space-4);
            border: 1px solid var(--tyh-border-soft);
            border-radius: var(--tyh-radius-lg);
            background: var(--tyh-surface-raised);
            box-shadow: var(--tyh-shadow-sm);
        }

        .tyh-filter-group {
            display: grid;
            gap: var(--tyh-space-1);
            min-width: 160px;
        }

        .tyh-filter-group label {
            color: var(--tyh-color-neutral-700);
            font-size: var(--tyh-font-size-xs);
            font-weight: 850;
            text-transform: uppercase;
        }

        .tyh-metric-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--tyh-space-3);
        }

        .tyh-metric-card {
            display: grid;
            gap: var(--tyh-space-2);
            padding: var(--tyh-space-4);
            border: 1px solid var(--tyh-border-soft);
            border-radius: var(--tyh-radius-lg);
            background: var(--tyh-surface-raised);
            box-shadow: var(--tyh-shadow-sm);
        }

        .tyh-metric-label {
            color: var(--tyh-muted);
            font-size: var(--tyh-font-size-xs);
            font-weight: 850;
            text-transform: uppercase;
        }

        .tyh-metric-value {
            color: var(--tyh-text);
            font-size: var(--tyh-font-size-xl);
            font-weight: 900;
            line-height: var(--tyh-line-tight);
        }

        .tyh-metric-note {
            color: var(--tyh-muted);
            font-size: var(--tyh-font-size-sm);
            line-height: var(--tyh-line-base);
        }

        .tyh-badge,
        .tyh-status-badge,
        .tyh-money-badge,
        .tyh-date-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 22px;
            padding: 3px 8px;
            border: 1px solid var(--tyh-border-soft);
            border-radius: var(--tyh-radius-pill);
            background: var(--tyh-surface-soft);
            color: var(--tyh-color-neutral-700);
            font-size: var(--tyh-font-size-xs);
            font-weight: 850;
            line-height: var(--tyh-line-tight);
            white-space: nowrap;
        }

        .tyh-badge--success,
        .tyh-status-badge.is-success,
        .tyh-status-badge--success {
            background: var(--tyh-color-success-bg);
            border-color: var(--tyh-color-success-border);
            color: var(--tyh-color-success);
        }

        .tyh-badge--warning,
        .tyh-status-badge.is-warning,
        .tyh-status-badge--warning {
            background: var(--tyh-color-warning-bg);
            border-color: var(--tyh-color-warning-border);
            color: var(--tyh-color-warning);
        }

        .tyh-badge--danger,
        .tyh-status-badge.is-danger,
        .tyh-status-badge--danger {
            background: var(--tyh-color-danger-bg);
            border-color: var(--tyh-color-danger-border);
            color: var(--tyh-color-danger);
        }

        .tyh-badge--info,
        .tyh-status-badge.is-info,
        .tyh-status-badge--info {
            background: var(--tyh-color-info-bg);
            border-color: var(--tyh-color-info-border);
            color: var(--tyh-color-info);
        }

        .tyh-money-badge {
            background: var(--tyh-gold-soft);
            border-color: rgba(201, 162, 39, 0.38);
            color: #6b4f00;
            font-variant-numeric: tabular-nums;
        }

        .tyh-date-badge {
            background: var(--tyh-teal-soft);
            border-color: rgba(15, 118, 110, 0.25);
            color: var(--tyh-teal);
            font-variant-numeric: tabular-nums;
        }

        .tyh-empty-state {
            display: grid;
            justify-items: start;
            gap: var(--tyh-space-2);
            padding: var(--tyh-space-6);
            border: 1px dashed var(--tyh-border);
            border-radius: var(--tyh-radius-lg);
            background: var(--tyh-surface);
            color: var(--tyh-muted);
        }

        .tyh-empty-state h2,
        .tyh-empty-state h3,
        .tyh-empty-state-title {
            margin: 0;
            color: var(--tyh-text);
            font-size: var(--tyh-font-size-lg);
            font-weight: 850;
        }

        .tyh-empty-state p {
            margin: 0;
            max-width: 680px;
        }

        .tyh-record-list {
            display: grid;
            gap: var(--tyh-space-3);
        }

        .tyh-record-card,
        .tyh-mobile-card {
            display: grid;
            gap: var(--tyh-space-2);
            padding: var(--tyh-space-4);
            border: 1px solid var(--tyh-border-soft);
            border-radius: var(--tyh-radius-lg);
            background: var(--tyh-surface-raised);
            box-shadow: var(--tyh-shadow-sm);
            box-sizing: border-box;
        }

        .tyh-record-card__top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--tyh-space-2);
        }

        .tyh-record-card__title {
            margin: 0;
            color: var(--tyh-text);
            font-size: var(--tyh-font-size-md);
            font-weight: 850;
            line-height: var(--tyh-line-tight);
        }

        .tyh-record-card__meta {
            display: flex;
            flex-wrap: wrap;
            gap: var(--tyh-space-2);
            color: var(--tyh-muted);
            font-size: var(--tyh-font-size-sm);
        }

        .tyh-record-card__actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--tyh-space-2);
        }

        .pagination {
            margin-top: 12px;
            font-size: 0.95rem;
        }

        .pagination a,
        .pagination strong {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            min-width: 30px;
            margin: 0 2px;
        }

        @media (min-width: 1181px) and (max-width: 1200px) {
            .app-shell {
                grid-template-columns: 240px minmax(0, 1fr);
                gap: 16px;
                padding: 18px 16px 40px;
            }

            .workspace-sidebar {
                top: 88px;
                padding: 10px;
            }

            .sidebar-profile {
                grid-template-columns: 34px minmax(0, 1fr);
                gap: 8px;
                padding: 8px;
            }

            .sidebar-avatar {
                width: 34px;
                height: 34px;
                font-size: 14px;
            }

            .workspace-sidebar .workspace-nav a,
            .workspace-sidebar .logout-link-button {
                min-height: 36px;
                padding: 7px 9px;
                font-size: 0.88rem;
            }

            .app-shell table.data-table {
                display: block;
                max-width: 100%;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
            }

            .app-shell .table-wrap,
            .app-shell .table-scroll,
            .app-shell .client-table-wrap,
            .app-shell .follow-table-wrap,
            .app-shell .tdhub-table-wrap,
            .app-shell .cd-table-wrap,
            .app-shell .scrollX,
            .app-shell .tc-table-wrap {
                max-width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
        }

        @media (max-width: 1180px) {
            .site-header-inner {
                align-items: center;
                gap: 10px;
            }

            .brand {
                flex: 1 1 auto;
            }

            .brand-logo {
                height: 42px;
                width: 42px;
            }

            .brand-title {
                font-size: 15px;
                white-space: normal;
            }

            .workspace-menu-button {
                display: inline-flex;
                flex: 0 0 auto;
            }

            .header-right {
                text-align: left;
                width: auto;
                align-items: flex-end;
            }

            .app-shell {
                display: block;
                padding: 16px 12px 28px;
            }

            .workspace-sidebar {
                position: fixed;
                inset: 0 auto 0 0;
                top: 0;
                z-index: 90;
                width: min(326px, calc(100vw - 48px));
                height: 100vh;
                height: 100dvh;
                max-height: none;
                min-height: 0;
                margin: 0;
                overflow-x: hidden;
                overflow-y: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
                display: flex;
                align-items: stretch;
                gap: 10px;
                padding: 12px;
                border-radius: 0 var(--tyh-radius-lg) var(--tyh-radius-lg) 0;
                transform: translateX(-108%);
                transition: transform .2s ease;
                scrollbar-width: thin;
            }

            .workspace-nav-open,
            .workspace-nav-open body {
                overflow: hidden;
            }

            .workspace-nav-open .workspace-sidebar {
                transform: translateX(0);
            }

            .workspace-nav-backdrop {
                position: fixed;
                inset: 0;
                z-index: 80;
                background: rgba(15, 23, 42, 0.54);
                backdrop-filter: blur(2px);
            }

            .workspace-nav-open .workspace-nav-backdrop:not([hidden]) {
                display: block;
            }

            .sidebar-mobile-head {
                position: sticky;
                top: 0;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                padding: 2px 0 10px;
                background: var(--tyh-command);
                border-bottom: 1px solid rgba(226, 232, 240, 0.14);
            }

            .sidebar-mobile-title {
                color: #fff7d6;
                font-size: var(--tyh-font-size-sm);
                font-weight: 900;
                letter-spacing: .04em;
                text-transform: uppercase;
            }

            .sidebar-close-button {
                width: 38px;
                height: 38px;
                padding: 0;
                border: 1px solid rgba(226, 232, 240, 0.2);
                border-radius: var(--tyh-radius-lg);
                background: rgba(255, 255, 255, 0.08);
                color: #f8fafc;
                cursor: pointer;
            }

            .sidebar-kicker {
                display: none;
            }

            .sidebar-profile {
                display: grid;
                margin-bottom: 4px;
            }

            .workspace-sidebar .workspace-nav {
                flex: 0 0 auto;
                min-width: 0;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: stretch;
                overflow: visible;
                padding: 10px 0;
                border-top: 1px solid rgba(226, 232, 240, 0.13);
                border-bottom: 1px solid rgba(226, 232, 240, 0.13);
            }

            .workspace-sidebar .nav-cluster {
                flex: 0 0 auto;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: stretch;
                gap: 7px;
            }

            .workspace-subnav,
            .nav-cluster.is-open .workspace-subnav {
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: stretch;
                gap: 5px;
                margin: 0 0 4px 40px;
                padding-left: 9px;
                border-left: 1px solid rgba(226, 232, 240, 0.16);
            }

            .workspace-subnav {
                display: none;
            }

            .nav-cluster.is-open .workspace-subnav {
                display: flex;
            }

            .workspace-sidebar .workspace-nav a,
            .workspace-sidebar .workspace-nav .nav-cluster-toggle,
            .workspace-sidebar .logout-link-button {
                width: 100%;
                min-width: 0;
                min-height: 44px;
                padding: 9px 11px;
                font-size: 14px;
                border-left-width: 3px;
            }

            .workspace-sidebar .workspace-subnav a {
                flex: 0 0 auto;
                min-height: 34px;
                padding: 7px 10px;
                font-size: 13px;
                background: rgba(255, 255, 255, 0.06);
            }

            .workspace-sidebar .workspace-nav a::before {
                display: none;
            }

            .workspace-sidebar .workspace-nav a:hover,
            .workspace-sidebar .workspace-nav .nav-cluster-toggle:hover {
                transform: none;
            }

            .workspace-sidebar .logout-inline-form {
                flex: 0 0 auto;
                padding-top: 10px;
                border-top: 1px solid rgba(226, 232, 240, 0.16);
                margin-top: auto;
            }

            .container {
                margin: 0;
                padding: 0;
            }

            .filters {
                align-items: stretch;
            }

            .filters select,
            .filters input[type="text"] {
                min-width: 100%;
            }

            table.data-table {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .page-header .btn {
                width: 100%;
            }

            .tyh-page-header,
            .tyh-card__header,
            .tyh-section-header,
            .tyh-record-card__top {
                flex-direction: column;
                align-items: stretch;
            }

            .tyh-page-actions,
            .tyh-action-toolbar,
            .tyh-record-card__actions {
                justify-content: flex-start;
            }

            .tyh-page-actions .btn,
            .tyh-action-toolbar .btn,
            .tyh-filter-panel .btn {
                width: 100%;
            }

            .tyh-filter-panel,
            .tyh-filter-group {
                display: grid;
                width: 100%;
            }

            .tyh-metric-grid {
                grid-template-columns: 1fr;
            }
        }