/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  FlowLex Design System v2
  灵感内化 — 极简专注 · 温暖工程 · 几何精确
  不明说任何名字，用像素说话
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

:root {
  /*══════════════════════════════════════════════════════
    COLOR — 深墨基底 + 司法金暖调
    ══════════════════════════════════════════════════════*/
  --ink-0:   #08090a;
  --ink-1:   #0C0D12;
  --ink-2:   #14151D;
  --ink-3:   #1B1D27;
  --ink-4:   #252736;
  --ink-5:   #323545;
  --ink-6:   #434659;
  --ink-7:   #84889C;
  --ink-8:   #A4A8B8;
  --ink-9:   #C4C8D4;
  --ink-10:  #CFD1DB;
  --ink-11:  #E7E9EE;
  --ink-12:  #F6F7FA;

  /* Accent — 司法金 */
  --gold-0:  #141009;
  --gold-1:  #261C0C;
  --gold-2:  #3D2D12;
  --gold-3:  #554019;
  --gold-4:  #7A5E28;
  --gold-5:  #967536;
  --gold-6:  #B08C44;
  --gold-7:  #C8A454;
  --gold-8:  #DEBC68;
  --gold-9:  #F2D07C;
  --gold-10: #F9E0A0;
  --gold-11: #FCECC8;
  --gold-12: #FEF7EB;

  /* Accent — 暖铜 (supplementary to gold) */
  --copper-3:  #4A2810;
  --copper-5:  #8B4F22;
  --copper-7:  #B0682A;
  --copper-8:  #C2783A;
  --copper-9:  #D4894A;
  --copper-10: #E69A5A;

  --brand-copper:       var(--copper-8);
  --brand-copper-hover: var(--copper-9);
  --brand-copper-muted: rgba(194,120,58,.15);
  --brand-copper-ring:  rgba(194,120,58,.25);

  /* Semantic */
  --red-500:  #EF4444; --red-600: #DC2626;
  --green-500: #22C55E; --green-600: #16A34A;

  /*══════════════════════════════════════════════════════
    SURFACE MAPPING — 暗色系统(默认)
    ══════════════════════════════════════════════════════*/

  --bg-root:        var(--ink-0);
  --bg-subtle:      var(--ink-1);
  --bg-default:     var(--ink-2);
  --bg-raised:      var(--ink-3);
  --bg-hover:       var(--ink-4);
  --bg-active:      var(--ink-5);
  --bg-hero:        #0D1117;    /* dark hero background */

  --border-subtle:  var(--ink-4);
  --border-default: var(--ink-5);
  --border-strong:  var(--ink-6);

  --text-dim:       #B8BCC6;
  --text-secondary: #CDD0D9;
  --text-primary:   var(--ink-11);
  --text-accent:    var(--gold-8);

  --brand:          var(--gold-9);
  --brand-hover:    var(--gold-8);
  --brand-muted:    var(--gold-3);
  --brand-ring:     rgba(191,154,76,.25);

  /*══════════════════════════════════════════════════════
    TYPOGRAPHY — SF Pro / PingFang SC
    ══════════════════════════════════════════════════════*/

  --font-sans: 'SF Pro Display', -apple-system, BlinkMacSystemFont,
               'PingFang SC', 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
  --font-numeric: 'SF Pro Display', 'SF Mono', 'Tabular Numbers';

  --text-2xs: 11px; --text-xs: 12px;  --text-sm: 13px;
  --text-base:14px; --text-md: 15px;  --text-lg: 17px;
  --text-xl: 20px;  --text-2xl:24px;  --text-3xl:30px;
  --text-4xl: 38px; --text-5xl:50px;  --text-6xl:62px;

  --leading-tight: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7;

  --weight-normal: 550; --weight-medium: 600;
  --weight-semibold: 650; --weight-bold: 750; --weight-extrabold: 850;

  --tracking-tight: -0.022em;
  --tracking-normal: -0.011em;
  --tracking-wide: 0.02em;

  /*══════════════════════════════════════════════════════
    SPACING — 4px rhythm / 法条级的空间精确
    ══════════════════════════════════════════════════════*/
  --sp-0:  0;     --sp-px: 1px;   --sp-0_5: 2px;
  --sp-1:  4px;   --sp-1_5: 6px;  --sp-2:    8px;
  --sp-2_5:10px;  --sp-3:  12px;  --sp-3_5: 14px;
  --sp-4:  16px;  --sp-5:  20px;  --sp-6:    24px;
  --sp-7:  28px;  --sp-8:  32px;  --sp-9:    36px;
  --sp-10: 40px;  --sp-11: 44px;  --sp-12:   48px;
  --sp-13: 52px;  --sp-14: 56px;  --sp-15:   60px;
  --sp-16: 64px;  --sp-18: 72px;  --sp-20:   80px;
  --sp-22: 88px;  --sp-24: 96px;  --sp-28:  112px;
  --sp-32:128px;  --sp-36:144px;  --sp-40:  160px;
  --sp-48:192px;

  /*══════════════════════════════════════════════════════
    RADIUS — 微妙圆角层次
    ══════════════════════════════════════════════════════*/
  --radius-none: 0;     --radius-xs: 4px;   --radius-sm: 6px;
  --radius-md: 8px;     --radius-lg: 12px;  --radius-xl: 16px;
  --radius-2xl:20px;    --radius-full: 9999px;

  /*══════════════════════════════════════════════════════
    SHADOW — z-depth layering
    ══════════════════════════════════════════════════════*/
  --shadow-xs:  0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.3);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.6), 0 8px 10px -6px rgba(0,0,0,.4);
  --shadow-glow: 0 0 24px var(--brand-ring);

  /*══════════════════════════════════════════════════════
    MOTION — spring physics / purpose-driven
    ══════════════════════════════════════════════════════*/
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 50ms;
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;
  --duration-glacial: 500ms;

  /*══════════════════════════════════════════════════════
    LAYOUT
    ══════════════════════════════════════════════════════*/
  --sidebar-w: 220px;
  --topbar-h:  52px;
  --content-max: 1200px;

  /* Semantic aliases — 比赛页/验证页兼容 */
  --surface:       var(--bg-raised);
  --border:        var(--border-subtle);
  --border-light:  var(--border-subtle);
  --text:          var(--text-primary);
  --text-tertiary: var(--text-dim);
  --success:       var(--green-500);
  --success-light: rgba(34,197,94,.12);
  --warning:       #DEBC68;
  --warning-light: rgba(191,154,76,.12);
  --danger:        var(--red-500);
  --danger-light:  rgba(239,68,68,.12);
  --accent:        var(--brand);
  --accent-light:  var(--brand-muted);
  --brand-light:   rgba(191,154,76,.12);
  --blue-200:      #93c5fd;
  --gray-25:       var(--bg-subtle);
  --gray-50:       var(--bg-default);
  --gray-100:      var(--bg-raised);
  --gray-200:      var(--bg-hover);

  /* spacing aliases → --space-N → --sp-N */
  --space-1:  var(--sp-1);   --space-2:  var(--sp-2);
  --space-3:  var(--sp-3);   --space-4:  var(--sp-4);
  --space-5:  var(--sp-5);   --space-6:  var(--sp-6);
  --space-8:  var(--sp-8);   --space-10: var(--sp-10);
  --space-16: var(--sp-16);

  /* radius alias */
  --radius: var(--radius-md);

  /* brand gradient token */
  --brand-gradient: linear-gradient(135deg, var(--gold-7), var(--gold-9));
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  THEME — 暖铜 accent override
  Toggle with data-accent="copper" on <html>
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
[data-accent="copper"] {
  --brand:          var(--brand-copper);
  --brand-hover:    var(--brand-copper-hover);
  --brand-muted:    var(--brand-copper-muted);
  --brand-ring:     var(--brand-copper-ring);
  --text-accent:    var(--copper-9);
  --brand-gradient: linear-gradient(135deg, var(--copper-7), var(--copper-9));
  --brand-light:    var(--brand-copper-muted);
  --accent:         var(--brand-copper);
  --accent-light:   var(--brand-copper-muted);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  THEME — 明亮模式 (data-theme="light")
  ══════════════════════════════════════════════════════*/
[data-theme="light"] {
  /* Surface mapping — flip ink scale */
  --bg-root:        #F4F5F8;
  --bg-subtle:      #FFFFFF;
  --bg-default:     #EBEDF2;
  --bg-raised:      #FFFFFF;
  --bg-hover:       #E2E5EB;
  --bg-active:      #D8DBE3;
  --bg-hero:        #EEF0F5;

  /* Borders — lighter */
  --border-subtle:  #E4E7ED;
  --border-default: #D1D5DD;
  --border-strong:  #BCC1CA;

  /* Text — darker for light bg */
  --text-dim:       #8E92A2;
  --text-secondary: #555A6E;
  --text-primary:   #181B27;
  --text-accent:    #A1722C;  /* darker gold for readability */

  /* Brand — slightly adjusted for light bg contrast */
  --brand:          var(--gold-7);
  --brand-hover:    var(--gold-8);
  --brand-muted:    rgba(160,115,40,.15);
  --brand-ring:     rgba(160,115,40,.25);

  /* Shadows — subtle on light */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.03);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.09), 0 8px 10px -6px rgba(0,0,0,.05);
  --shadow-glow: 0 0 24px var(--brand-ring);

  /* Semantic aliases */
  --warning:       #B8860B;
  --warning-light: #FFF3CD;
  --brand-light:   rgba(191,154,76,.08);
  --blue-200:      #3B82F6;
  --gray-25:       var(--bg-subtle);
  --gray-50:       var(--bg-default);
  --gray-100:      var(--bg-raised);
  --gray-200:      var(--bg-hover);

  /* Brand gradient */
  --brand-gradient: linear-gradient(135deg, var(--gold-5), var(--gold-7));
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  RESET
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-sans);font-size:var(--text-base);font-weight:550;line-height:var(--leading-normal);color:var(--text-primary);background:var(--bg-root);letter-spacing:var(--tracking-normal)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--brand-muted);color:var(--text-accent)}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  TYPOGRAPHY UTILITY
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.t-5xl{font-size:var(--text-5xl);line-height:1.1;letter-spacing:-0.04em;font-weight:var(--weight-extrabold)}
.t-4xl{font-size:var(--text-4xl);line-height:1.15;letter-spacing:-0.035em;font-weight:var(--weight-bold)}
.t-3xl{font-size:var(--text-3xl);line-height:1.2;letter-spacing:-0.03em;font-weight:var(--weight-bold)}
.t-2xl{font-size:var(--text-2xl);line-height:1.25;letter-spacing:-0.025em;font-weight:var(--weight-semibold)}
.t-xl {font-size:var(--text-xl);line-height:1.3;letter-spacing:-0.02em;font-weight:var(--weight-semibold)}
.t-lg {font-size:var(--text-lg);line-height:1.4}
.t-md {font-size:var(--text-md);line-height:1.5}
.t-sm {font-size:var(--text-sm);color:var(--text-secondary)}
.t-xs {font-size:var(--text-xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;font-weight:var(--weight-semibold)}
.t-mono{font-family:var(--font-mono);font-size:var(--text-sm)}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  BUTTONS
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-2_5) var(--sp-5);border:none;border-radius:var(--radius-md);
  cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);
  text-decoration:none;white-space:nowrap;
  transition:all var(--duration-fast) var(--ease-out);
  letter-spacing:-0.01em;
}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--brand);color:#000}
.btn-primary:hover{background:var(--brand-hover);box-shadow:var(--shadow-glow)}
.btn-secondary{background:var(--bg-raised);color:var(--text-primary);border:1px solid var(--border-default)}
.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-sm{padding:var(--sp-1_5) var(--sp-3);font-size:var(--text-xs);border-radius:var(--radius-sm)}
.btn-lg{padding:var(--sp-3_5) var(--sp-7);font-size:var(--text-md);border-radius:var(--radius-lg)}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  CARDS
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.card{
  background:var(--bg-raised);border-radius:var(--radius-lg);padding:var(--sp-6);
  border:1px solid var(--border-subtle);
  transition:border-color var(--duration-normal) var(--ease-out),
             box-shadow var(--duration-normal) var(--ease-out);
}
.card:hover{border-color:var(--border-default);box-shadow:var(--shadow-md)}

.stat-card{text-align:center;padding:var(--sp-8) var(--sp-6)}
.stat-value{font-size:var(--text-5xl);font-weight:var(--weight-extrabold);color:var(--text-primary);letter-spacing:-0.04em;line-height:1}
.stat-label{font-size:var(--text-xs);color:var(--text-dim);margin-top:var(--sp-2);text-transform:uppercase;letter-spacing:0.06em;font-weight:var(--weight-semibold)}
.stat-accent-gold .stat-value{color:var(--gold-8)}

.feature-card{background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--sp-6);transition:all var(--duration-normal) var(--ease-out)}
.feature-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.feature-icon{font-size:24px;margin-bottom:var(--sp-4)}
.feature-card h3{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--sp-1_5)}
.feature-card p{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}
.feature-link{display:inline-block;margin-top:var(--sp-3);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-accent)}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  FORMS
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.form-field{margin-bottom:var(--sp-5)}
.form-field label{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);margin-bottom:var(--sp-1_5)}
.form-input{
  width:100%;padding:var(--sp-2_5) var(--sp-3_5);
  background:var(--bg-subtle);border:1px solid var(--border-default);
  border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-base);
  color:var(--text-primary);outline:none;
  transition:border-color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out);
}
.form-input::placeholder{color:var(--text-dim)}
.form-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  BADGE
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.badge{display:inline-flex;align-items:center;padding:var(--sp-0_5) var(--sp-2);border-radius:var(--radius-full);font-size:var(--text-2xs);font-weight:var(--weight-bold);letter-spacing:0.04em;text-transform:uppercase}
.badge-neutral{background:var(--bg-hover);color:var(--text-secondary)}
.badge-gold{background:var(--gold-2);color:var(--gold-9)}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  NAVIGATION (sidebar)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.nav-item{
  display:flex;align-items:center;gap:var(--sp-2_5);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);
  color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);
  transition:all var(--duration-fast) var(--ease-out);
  text-decoration:none;
}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.active{background:var(--brand-muted);color:var(--text-accent)}
.nav-item.active::before{content:'';position:absolute;left:0;width:2px;height:20px;background:var(--brand);border-radius:0 2px 2px 0}
.nav-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-label{flex:1}
.nav-badge{font-size:var(--text-2xs);padding:1px 6px;border-radius:var(--radius-full);background:var(--brand-muted);color:var(--text-accent);font-weight:var(--weight-bold)}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  LAYOUT UTILITIES
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)}.gap-6{gap:var(--sp-6)}.gap-8{gap:var(--sp-8)}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-4{margin-top:var(--sp-4)}.mt-8{margin-top:var(--sp-8)}.mt-16{margin-top:var(--sp-16)}
.mb-4{margin-bottom:var(--sp-4)}.mb-8{margin-bottom:var(--sp-8)}.mb-16{margin-bottom:var(--sp-16)}
.p-8{padding:var(--sp-8)}.p-16{padding:var(--sp-16)}
.max-w-lg{max-width:512px}.max-w-2xl{max-width:720px}.max-w-content{max-width:var(--content-max)}

.grid-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-4)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-4)}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ANIMATION UTILITY
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.fade-in{animation:fadeIn var(--duration-slow) var(--ease-out)}
.slide-up{animation:slideUp var(--duration-slow) var(--spring)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  SCROLLBAR
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  TAG — 内联标签
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.12); color: var(--text-secondary);
}
.tag-gold   { background: rgba(191,154,76,.12); color: #DEBC68; }
.tag-red    { background: rgba(239,68,68,.12);  color: #EF4444; }
.tag-amber  { background: rgba(245,158,11,.12); color: #F59E0B; }
.tag-green  { background: rgba(34,197,94,.12);  color: #22C55E; }
.tag-purple { background: rgba(139,92,246,.12); color: #A78BFA; }
.tag-blue   { background: rgba(59,130,246,.12); color: #60A5FA; }
.tag-gray   { background: var(--bg-hover); color: var(--text-dim); }
.tag-pink   { background: rgba(244,114,182,.12); color: #F472B6; }

/* Missing badge variants */
.badge-gray  { background: var(--bg-hover); color: var(--text-dim); }
.badge-pink  { background: rgba(244,114,182,.12); color: #F472B6; }

/* stat-accent variants for invoices/time_tracking */
.stat-accent-green { border-top-color: var(--green-500); }
.stat-accent-amber { border-top-color: #F59E0B; }

/* card-link — clickable card wrapper */
.card-link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg); transition: background var(--duration-fast) var(--ease-out); }
.card-link:hover { background: var(--bg-hover); }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  SPINNER — shared loading indicator
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  FORM CARD — 表单容器
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.form-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.form-card-title {
  font-size: 16px; font-weight: 600; color: var(--text-primary);
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.form-row { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.form-group { flex: 1; min-width: 0; }
.form-group label {
  display: block; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary); margin-bottom: var(--sp-1_5);
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: var(--sp-2_5) var(--sp-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--text-primary); outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-actions { display: flex; gap: var(--sp-2); }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  BUTTON VARIANTS — outline / accent
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.btn-outline {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-outline:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }
.btn-accent {
  background: linear-gradient(135deg, var(--gold-5), var(--gold-7));
  color: #000; font-weight: var(--weight-bold);
}
.btn-accent:hover { background: linear-gradient(135deg, var(--gold-6), var(--gold-8)); box-shadow: var(--shadow-glow); }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  PAGE STATS — 页面统计卡片行
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.page-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  FILTER BAR — Linear-style透明输入
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.filter-bar {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.filter-bar form { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.filter-input {
  padding: 12px 16px 12px 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 14px;
  color: #f7f8f8;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f7f8f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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: 14px center;
  background-size: 16px;
}
.filter-input:focus {
  border-color: rgba(255,255,255,0.2);
}
.filter-input::placeholder { color: var(--text-dim); }

.filter-select {
  padding: 12px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 14px;
  color: #f7f8f8;
  font-family: var(--font-sans);
  outline: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.filter-select:focus {
  border-color: rgba(255,255,255,0.2);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  WIDE SEARCH — Linear command-palette style (glass wrap)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.filter-search-wrap {
  position: relative;
  width: 100%;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.filter-search-wrap::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f7f8f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}
.filter-search-wide {
  width: 100%;
  padding: 14px 18px 14px 48px;
  background: transparent;
  border: none;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: #f7f8f8;
  outline: none;
}
.filter-search-wide::placeholder { color: var(--text-dim); }
.filter-search-wide:focus {
  outline: none;
}

.filter-search-wrap.mini::before {
  width: 14px; height: 14px; left: 12px;
}
.filter-search-wrap.mini .filter-search-wide {
  padding: 10px 14px 10px 38px;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  CONTRACT INBOX — card enhancements
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.contract-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.contract-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.contract-card-urgent {
  border-left: 3px solid var(--red-500);
}
.contract-card-urgent:hover { border-left-color: #f87171; }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  GLASS — frosted surface utility
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.glass, .glass-surface {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ROW CARD — 列表行卡片 (glass)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.row-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.row-card:hover { border-color: rgba(255,255,255,0.12); }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  SECTION HEADER
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.section-hd h3 { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  EMPTY STATE — 空状态引导
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.page-empty {
  text-align: center; padding: 64px 24px;
  color: var(--text-dim); font-size: var(--text-sm);
}
.page-empty-icon { font-size: 40px; margin-bottom: var(--sp-4); opacity: .5; }
.page-empty h3 { font-size: var(--text-lg); color: var(--text-primary); margin-bottom: var(--sp-2); }
.page-empty p  { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-5); line-height: var(--leading-relaxed); }
.page-empty-cta { margin-top: var(--sp-4); }

/* empty-state — Linear 风格初始空状态（放大镜图标 + 搜索引导 + 双操作按钮）*/
.empty-state {
  text-align: center; padding: 64px 24px;
  color: var(--text-dim); font-size: var(--text-sm);
}
.empty-state-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 16px;
  background: var(--bg-hover); color: var(--text-secondary);
  margin-bottom: var(--sp-5);
  animation: empty-icon-in .4s ease;
}
@keyframes empty-icon-in {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
.empty-state-title {
  font-size: var(--text-xl); font-weight: var(--weight-semibold);
  color: var(--text-primary); margin-bottom: var(--sp-2);
}
.empty-state-desc {
  font-size: var(--text-sm); color: var(--text-secondary);
  margin-bottom: var(--sp-5); line-height: var(--leading-relaxed);
  max-width: 360px; margin-left: auto; margin-right: auto;
}
.empty-state-actions {
  display: flex; gap: var(--sp-3); margin-top: var(--sp-1);
  justify-content: center; align-items: center;
  flex-wrap: wrap;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  SKELETON — 骨架加载屏 (shimmer)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-hover) 25%,
    var(--bg-active) 50%,
    var(--bg-hover) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text { height: 14px; margin-bottom: var(--sp-2); }
.skeleton-text:last-child { width: 60%; }
.skeleton-heading { height: 22px; width: 180px; margin-bottom: var(--sp-4); }
.skeleton-stat { height: 64px; border-radius: var(--radius-lg); }
.skeleton-card { height: 120px; border-radius: var(--radius-lg); }
.skeleton-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); flex-shrink: 0; }
.skeleton-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ERROR STATE — 结构化错误卡片
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.error-card {
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.16);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.error-card-icon {
  width: 48px; height: 48px; margin: 0 auto var(--sp-4);
  border-radius: 50%; background: rgba(239,68,68,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.error-card-title {
  font-size: var(--text-md); font-weight: 700;
  color: var(--text-primary); margin-bottom: var(--sp-2);
}
.error-card-desc {
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: 1.6; margin-bottom: var(--sp-5);
}
.error-card-code {
  font-size: var(--text-xs); color: var(--text-dim);
  font-family: var(--font-mono); margin-bottom: var(--sp-4);
}
.error-card-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  TRANSITION UTILITIES — show/hide with animation
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-out {
  animation: fadeOut var(--duration-fast) var(--ease-out) forwards;
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

.expandable {
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}
.expandable-collapsed { max-height: 0; opacity: 0; }
.expandable-expanded { max-height: 2000px; opacity: 1; }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  SCROLL-DRIVEN ANIMATIONS — view() timeline fade-in
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.fade-in-up {
  animation: fadeInUp linear both;
  animation-timeline: view();
  animation-range: entry 5% cover 30%;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in-up { animation: none; }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  FOCUS & ACCESSIBILITY
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Tablet breakpoint ── */
@media (max-width: 768px) {
  .form-row { flex-direction: column; gap: var(--sp-3); }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-stats { grid-template-columns: 1fr; }

  .card { padding: var(--sp-4); }
  .form-card { padding: var(--sp-4); }
  .stat-card { padding: var(--sp-5) var(--sp-4); }

  .filter-bar form { flex-direction: column; align-items: stretch; }
  .filter-input, .filter-select { width: 100%; }

  .section-hd { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .summary-bar { flex-direction: column; align-items: flex-start; }

  .clause-grid { grid-template-columns: 1fr; }

  .review-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .review-tabs::-webkit-scrollbar { display: none; }

  .error-card { max-width: 100%; margin: 0; }
  .error-card-actions { flex-direction: column; }
  .error-card-actions .btn { width: 100%; justify-content: center; }
}

/* ── Phone breakpoint ── */
@media (max-width: 480px) {
  .stat-card { padding: var(--sp-4); width: 100%; }
  .stat-value { font-size: var(--text-2xl); }
  .form-card { padding: var(--sp-3_5); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: var(--sp-3_5); }

  .btn { min-height: 44px; padding: var(--sp-2_5) var(--sp-4); }
  .btn-sm { min-height: 36px; }
  .btn-lg { min-height: 48px; }

  .nav-item { min-height: 44px; }

  .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
  .form-group textarea { min-height: 100px; }

  .page-empty { padding: 40px 16px; }
  .page-empty-icon { font-size: 32px; }

  .filter-search-wide { font-size: 14px; }
  .filter-search-wrap.mini .filter-search-wide { font-size: var(--text-sm); }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  LIGHT THEME — component overrides
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* Glass surfaces → tinted dark instead of white */
[data-theme="light"] .glass,
[data-theme="light"] .glass-surface {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .row-card {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .row-card:hover { border-color: rgba(0,0,0,.10); }

/* Filter bar */
[data-theme="light"] .filter-bar {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .filter-input {
  color: var(--text-primary);
  border-color: rgba(0,0,0,.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}
[data-theme="light"] .filter-input:focus { border-color: rgba(0,0,0,.18); }
[data-theme="light"] .filter-select {
  color: var(--text-primary);
  border-color: rgba(0,0,0,.10);
}
[data-theme="light"] .filter-select:focus { border-color: rgba(0,0,0,.18); }

/* Wide search */
[data-theme="light"] .filter-search-wrap {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .filter-search-wrap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}
[data-theme="light"] .filter-search-wide { color: var(--text-primary); }

/* Tags */
[data-theme="light"] .tag {
  background: rgba(0,0,0,.06);
  color: var(--text-secondary);
}

/* Badge neutral */
[data-theme="light"] .badge-neutral {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
[data-theme="light"] .badge-gray {
  background: var(--bg-hover);
  color: var(--text-dim);
}