@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--color-primary-50:#e5effd;--color-primary-200:#a7c9fa;--color-primary-300:#779ef8;--color-primary-400:#3f71f6;--color-primary-600:#254ec2;--color-primary-800:#0c2771;--color-primary:var(--color-primary-400);--color-primary-hover:var(--color-primary-300);--color-primary-subtle:var(--color-primary-50);--color-white:#fff;--color-neutral-100:#f3f5f5;--color-neutral-200:#dbe0e4;--color-neutral-300:#c6ced6;--color-neutral-400:#979fa4;--color-neutral-600:#50565f;--color-neutral-700:#363941;--color-neutral-900:#1f232b;--color-bg-page:var(--color-neutral-100);--color-bg-card:var(--color-white);--color-bg-hover:var(--color-neutral-100);--color-text-heading:var(--color-neutral-900);--color-text-body:var(--color-neutral-700);--color-text-secondary:var(--color-neutral-600);--color-text-placeholder:var(--color-neutral-400);--color-text-link:var(--color-primary-400);--color-text-link-hover:var(--color-primary-600);--color-border:var(--color-neutral-300);--color-border-subtle:var(--color-neutral-200);--color-focus-ring:var(--color-primary-300);--color-success-100:#eafee2;--color-success-500:#55ba86;--color-success-800:#194137;--color-success:var(--color-success-500);--color-success-subtle:var(--color-success-100);--color-success-text:var(--color-success-800);--color-warning-100:#fef7de;--color-warning-500:#e8b047;--color-warning-800:#593f11;--color-warning:var(--color-warning-500);--color-warning-subtle:var(--color-warning-100);--color-warning-text:var(--color-warning-800);--color-alert-100:#fceede;--color-alert-500:#e46c44;--color-alert-800:#611d0a;--color-alert:var(--color-alert-500);--color-alert-subtle:var(--color-alert-100);--color-alert-text:var(--color-alert-800);--color-error-100:#f9dedc;--color-error-500:#de5546;--color-error-800:#570d07;--color-error:var(--color-error-500);--color-error-subtle:var(--color-error-100);--color-error-text:var(--color-error-800);--color-info-100:#cde0fc;--color-info-500:var(--color-primary-400);--color-info-800:#0c2771;--color-info:var(--color-info-500);--color-info-subtle:var(--color-info-100);--color-info-text:var(--color-info-800);--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", Consolas, monospace;--text-xs:11px;--text-sm:12px;--text-base:13px;--text-md:14px;--text-lg:16px;--text-xl:20px;--text-2xl:22px;--text-3xl:24px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--line-tight:1.2;--line-normal:1.5;--line-relaxed:1.7;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;--radius-pill:100px;--border-width-thin:.5px;--border-width-default:1px;--border-width-accent:1.5px;--border-width-active:3px;--shadow-none:none;--shadow-sm:0 1px 3px #1f232b14;--shadow-md:0 4px 12px #1f232b1a;--shadow-lg:0 8px 24px #1f232b1f;--shadow-focus:0 0 0 3px #3f71f61f;--transition-fast:.12s ease;--transition-default:.15s ease;--transition-slow:.25s ease;--z-base:0;--z-dropdown:10;--z-sticky:20;--z-modal-backdrop:40;--z-modal:50;--z-toast:60;--z-tooltip:70}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-body);background:var(--color-bg-page);line-height:var(--line-normal)}a{color:var(--color-text-link);transition:color var(--transition-default);text-decoration:none}a:hover{color:var(--color-text-link-hover)}.h1,h1{font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--color-text-heading);letter-spacing:-.02em;line-height:var(--line-tight)}.h2,h2{font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text-heading);line-height:var(--line-tight)}.h3,h3{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-heading)}.text-caption{font-size:var(--text-xs);color:var(--color-text-secondary)}.text-mono{font-family:var(--font-mono)}.btn{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-default), opacity var(--transition-default);align-items:center;gap:var(--space-2);white-space:nowrap;border:none;padding:8px 16px;text-decoration:none;display:inline-flex}.btn-primary{background:var(--color-primary);color:var(--color-white)}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-white);color:var(--color-primary);border:var(--border-width-accent) solid var(--color-primary)}.btn-secondary:hover{background:var(--color-primary-subtle)}.btn-ghost{color:var(--color-text-secondary);border:var(--border-width-default) solid var(--color-border);background:0 0}.btn-ghost:hover{background:var(--color-bg-hover)}.btn-disabled,.btn:disabled{background:var(--color-border-subtle);color:var(--color-text-placeholder);cursor:not-allowed}.input{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-body);background:var(--color-white);border:var(--border-width-default) solid var(--color-border);border-radius:var(--radius-md);width:100%;transition:border-color var(--transition-default), box-shadow var(--transition-default);outline:none;padding:10px 12px}.input:focus{border-color:var(--color-primary-200);box-shadow:var(--shadow-focus)}.input::placeholder{color:var(--color-text-placeholder)}.input-label{font-size:var(--text-md);color:var(--color-text-heading);margin-bottom:var(--space-1);font-weight:var(--weight-medium);display:block}.card{background:var(--color-bg-card);border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}.card-interactive{transition:box-shadow var(--transition-default), border-color var(--transition-default);cursor:pointer}.card-interactive:hover{box-shadow:var(--shadow-md);border-color:var(--color-border)}.badge{align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-weight:var(--weight-medium);border-radius:var(--radius-pill);white-space:nowrap;padding:3px 10px;display:inline-flex}.badge-dot{border-radius:var(--radius-pill);width:7px;height:7px;display:inline-block}.badge-active,.badge-success{background:var(--color-success-subtle);color:var(--color-success-text)}.badge-active .badge-dot{background:var(--color-success)}.badge-pending,.badge-warning{background:var(--color-warning-subtle);color:var(--color-warning-text)}.badge-pending .badge-dot{background:var(--color-warning)}.badge-alert{background:var(--color-alert-subtle);color:var(--color-alert-text)}.badge-alert .badge-dot{background:var(--color-alert)}.badge-error,.badge-overdue{background:var(--color-error-subtle);color:var(--color-error-text)}.badge-error .badge-dot{background:var(--color-error)}.badge-info,.badge-draft{background:var(--color-info-subtle);color:var(--color-info-text)}.badge-info .badge-dot{background:var(--color-info)}.table{border-collapse:collapse;width:100%;font-size:var(--text-base)}.table thead th{background:var(--color-neutral-100);color:var(--color-text-heading);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-subtle)}.table tbody td{color:var(--color-text-body);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);vertical-align:middle}.table tbody tr:hover{background:var(--color-primary-subtle)}.table tbody tr:last-child td{border-bottom:none}.nav-item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;transition:background var(--transition-default);justify-content:space-between;align-items:center;margin-bottom:2px;display:flex}.nav-item:hover{background:var(--color-bg-hover)}.nav-item.active{background:var(--color-primary-subtle);color:var(--color-primary-600);font-weight:var(--weight-semibold);border-left:var(--border-width-active) solid var(--color-primary);padding-left:calc(var(--space-3) - var(--border-width-active));border-radius:0 var(--radius-md) var(--radius-md) 0}.nav-badge{background:var(--color-primary);color:var(--color-white);font-size:var(--text-xs);font-weight:var(--weight-medium);border-radius:var(--radius-pill);padding:1px 8px}.metric-card{background:var(--color-bg-card);border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4)}.metric-label{font-size:var(--text-xs);color:var(--color-text-secondary);font-weight:var(--weight-medium);letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--space-2)}.metric-value{font-size:var(--text-3xl);font-weight:var(--weight-semibold);color:var(--color-text-heading);line-height:var(--line-tight)}.metric-change{font-size:var(--text-xs);margin-top:var(--space-1)}.metric-change.positive{color:var(--color-success)}.metric-change.negative{color:var(--color-error)}.divider{background:var(--color-border-subtle);height:1px;margin:var(--space-5) 0;border:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
