:root {
  --ink: #132131;
  --ink-soft: #5d6875;
  --navy: #07111f;
  --navy-soft: #10243b;
  --blue: #1b4d72;
  --ivory: #f6f4ee;
  --paper: #ece8de;
  --paper-deep: #d9d3c7;
  --white: #fffefa;
  --copper: #b8793d;
  --copper-deep: #8f5929;
  --copper-soft: #f4e6d6;
  --green: #17633a;
  --green-soft: #e4f2e9;
  --red: #982d35;
  --red-soft: #f9e8e9;
  --amber: #8a5a1e;
  --amber-soft: #fdf0db;
  --shadow-sm: 0 8px 24px rgba(7, 17, 31, 0.07);
  --shadow-lg: 0 26px 80px rgba(7, 17, 31, 0.24);
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.18; letter-spacing: -0.025em; margin: 0 0 10px; }
h1 { font-size: clamp(1.8rem, 3vw, 2.45rem); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 14px; }
code { overflow-wrap: anywhere; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--white); padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.skip-link:focus { top: 16px; }
.eyebrow { margin: 0 0 8px; color: var(--copper-deep); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.helper-text { color: var(--ink-soft); font-size: .82rem; }

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { color: var(--white); font-size: .95rem; line-height: 1.25; }
.brand-lockup small { color: rgba(255,255,255,.58); font-size: .72rem; margin-top: 2px; }
.brand-mark { align-items: center; background: linear-gradient(145deg, var(--copper), #d8a36d); border-radius: 11px; color: var(--navy); display: inline-flex; flex: 0 0 40px; font-size: .82rem; font-weight: 900; height: 40px; justify-content: center; letter-spacing: -.04em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.brand-lockup--compact .brand-mark { height: 34px; flex-basis: 34px; border-radius: 9px; }
.brand-lockup--compact strong { font-size: .85rem; }
.brand-lockup--compact small { font-size: .68rem; }
.brand-lockup--center { justify-content: center; margin-bottom: 24px; }
.brand-lockup--center strong { color: var(--navy); }
.brand-lockup--center small { color: var(--ink-soft); }

.btn { align-items: center; border: 1px solid transparent; border-radius: 9px; cursor: pointer; display: inline-flex; font-size: .9rem; font-weight: 750; gap: 8px; justify-content: center; min-height: 42px; padding: 10px 18px; transition: background .18s, border-color .18s, box-shadow .18s, transform .12s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, .nav-toggle:focus-visible, .logout-button:focus-visible { outline: 3px solid rgba(184,121,61,.35); outline-offset: 2px; }
.btn-primary { background: var(--copper); color: var(--white); box-shadow: 0 6px 16px rgba(143,89,41,.18); }
.btn-primary:hover { background: var(--copper-deep); }
.btn-ghost { background: var(--white); border-color: var(--paper-deep); color: var(--navy); }
.btn-ghost:hover { background: var(--paper); border-color: #c8c0b1; }
.btn-danger { background: var(--red); color: var(--white); }
.btn-sm { font-size: .8rem; min-height: 34px; padding: 6px 11px; }
.btn-block { width: 100%; }
.btn[disabled] { cursor: not-allowed; opacity: .48; transform: none; }

.field { margin-bottom: 17px; }
.field label { color: var(--ink); display: block; font-size: .8rem; font-weight: 750; margin-bottom: 6px; }
.field input, .field select, .field textarea { background: var(--white); border: 1px solid var(--paper-deep); border-radius: 9px; color: var(--ink); font-size: .94rem; min-height: 44px; padding: 10px 12px; transition: border-color .15s, box-shadow .15s; width: 100%; }
.field input::placeholder, .field textarea::placeholder { color: #9298a0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(184,121,61,.13); outline: none; }
.field textarea { min-height: 104px; resize: vertical; }
.field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }

.alert { border: 1px solid; border-radius: 10px; font-size: .88rem; margin-bottom: 16px; padding: 12px 15px; }
.alert-error, .alert-danger { background: var(--red-soft); border-color: #e7bdc0; color: var(--red); }
.alert-success { background: var(--green-soft); border-color: #b7d9c3; color: var(--green); }
.alert-info { background: #e8f1f7; border-color: #bdd3e3; color: var(--blue); }
.flash-stack { margin-bottom: 20px; }

.badge { border-radius: 999px; display: inline-flex; font-size: .7rem; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; text-transform: uppercase; white-space: nowrap; }
.badge-draft, .badge-expired { background: var(--paper); color: var(--ink-soft); }
.badge-sent { background: var(--amber-soft); color: var(--amber); }
.badge-signed { background: var(--green-soft); color: var(--green); }
.badge-cancelled { background: var(--red-soft); color: var(--red); }

/* Access */
.auth-shell { background: var(--navy); display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); min-height: 100vh; }
.auth-story { background: radial-gradient(circle at 15% 20%, rgba(184,121,61,.18), transparent 34%), linear-gradient(150deg, #07111f 0%, #10243b 100%); color: rgba(255,255,255,.74); display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(40px, 7vw, 84px); }
.auth-story h1 { color: var(--white); font-size: clamp(2.2rem, 4.3vw, 4.2rem); max-width: 680px; }
.auth-story > div > p:last-child { font-size: 1.04rem; max-width: 600px; }
.auth-story .eyebrow { color: #dbac7b; }
.trust-list { display: grid; gap: 12px; list-style: none; margin: 34px 0 0; padding: 0; }
.trust-list li { align-items: center; display: flex; gap: 10px; }
.trust-list span { align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #dbac7b; display: inline-flex; height: 26px; justify-content: center; width: 26px; }
.auth-card { align-self: center; background: var(--white); border: 1px solid rgba(255,255,255,.4); border-radius: 18px; box-shadow: var(--shadow-lg); justify-self: center; margin: 36px; max-width: 460px; padding: 42px; width: calc(100% - 72px); }
.auth-card h1 { font-size: 1.85rem; margin-bottom: 8px; }
.auth-intro { color: var(--ink-soft); margin-bottom: 26px; }
.auth-brand-mobile { align-items: center; display: none; gap: 10px; margin-bottom: 28px; }
.auth-links { display: flex; font-size: .84rem; justify-content: flex-end; margin-top: 18px; }
.auth-links a, .auth-support a { color: var(--copper-deep); font-weight: 700; }
.auth-support { border-top: 1px solid var(--paper); color: var(--ink-soft); font-size: .8rem; margin: 28px 0 0; padding-top: 20px; text-align: center; }

/* Authenticated shell */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { background: var(--navy); color: var(--ivory); display: flex; flex: 0 0 264px; flex-direction: column; min-height: 100vh; padding: 28px 18px 20px; position: sticky; top: 0; }
.app-sidebar > .brand-lockup { border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 8px 24px; }
.app-sidebar nav { flex: 1; }
.app-nav { display: grid; gap: 5px; list-style: none; margin: 24px 0; padding: 0; }
.app-nav a { align-items: center; border-radius: 9px; color: rgba(255,255,255,.68); display: flex; font-size: .88rem; font-weight: 700; gap: 12px; padding: 11px 13px; }
.app-nav a > span { color: rgba(255,255,255,.42); display: inline-flex; font-size: 1rem; justify-content: center; width: 18px; }
.app-nav a:hover, .app-nav a.active { background: rgba(255,255,255,.08); color: var(--white); }
.app-nav a.active { box-shadow: inset 3px 0 0 var(--copper); }
.app-nav a.active > span { color: var(--copper); }
.sidebar-account { align-items: center; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 10px; grid-template-columns: 34px minmax(0,1fr) auto; padding: 18px 6px 0; }
.account-avatar { align-items: center; background: rgba(184,121,61,.18); border: 1px solid rgba(184,121,61,.3); border-radius: 50%; color: #e1b180; display: flex; font-size: .8rem; font-weight: 800; height: 34px; justify-content: center; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: var(--white); font-size: .78rem; }
.account-copy small { color: rgba(255,255,255,.48); font-size: .68rem; }
.logout-button { background: transparent; border: 0; color: rgba(255,255,255,.5); cursor: pointer; font-size: 1rem; padding: 7px; }
.logout-button:hover { color: var(--white); }
.app-main { flex: 1; min-width: 0; }
.mobile-bar { align-items: center; background: var(--navy); display: none; justify-content: space-between; padding: 12px 16px; }
.nav-toggle { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: var(--white); cursor: pointer; padding: 8px 12px; }
.app-content { margin: 0 auto; max-width: 1360px; padding: 42px clamp(26px, 5vw, 68px) 24px; width: 100%; }
.app-footer { border-top: 1px solid var(--paper-deep); color: var(--ink-soft); font-size: .74rem; margin-top: 48px; padding: 20px 0 0; }

.page-head { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; margin-bottom: 28px; }
.page-head p { color: var(--ink-soft); margin: 4px 0 0; max-width: 700px; }
.page-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.welcome-panel { background: linear-gradient(135deg, var(--navy), #173653); border-radius: 16px; color: rgba(255,255,255,.7); display: grid; gap: 24px; grid-template-columns: minmax(0,1fr) auto; margin-bottom: 26px; overflow: hidden; padding: 30px 32px; position: relative; }
.welcome-panel::after { background: rgba(184,121,61,.15); border-radius: 50%; content: ""; height: 220px; position: absolute; right: -80px; top: -110px; width: 220px; }
.welcome-panel h1 { color: var(--white); font-size: clamp(1.65rem, 3vw, 2.35rem); }
.welcome-panel p { margin: 0; max-width: 680px; }
.welcome-panel .btn { align-self: center; position: relative; z-index: 1; }

.kpi-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); margin-bottom: 32px; }
.kpi-card { background: var(--white); border: 1px solid var(--paper-deep); border-radius: 13px; box-shadow: 0 4px 14px rgba(7,17,31,.03); padding: 20px; }
.kpi-card .num { color: var(--navy); font-size: 2rem; font-weight: 850; letter-spacing: -.04em; }
.kpi-card .label { color: var(--ink-soft); font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.section-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: 0 0 12px; }
.section-head a { color: var(--copper-deep); font-size: .82rem; font-weight: 750; }
.quick-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 32px; }
.quick-card { background: var(--white); border: 1px solid var(--paper-deep); border-radius: 13px; padding: 20px; transition: border-color .18s, transform .18s; }
.quick-card:hover { border-color: var(--copper); transform: translateY(-2px); }
.quick-card strong { color: var(--navy); display: block; margin-bottom: 4px; }
.quick-card span { color: var(--ink-soft); font-size: .82rem; }

.card { background: var(--white); border: 1px solid var(--paper-deep); border-radius: 13px; box-shadow: 0 4px 14px rgba(7,17,31,.025); margin-bottom: 20px; padding: 24px 26px; }
.table-scroll { border: 1px solid var(--paper-deep); border-radius: 13px; overflow-x: auto; }
table.list { background: var(--white); border-collapse: collapse; min-width: 700px; width: 100%; }
table.list th, table.list td { border-bottom: 1px solid var(--paper); font-size: .86rem; padding: 13px 15px; text-align: left; vertical-align: middle; }
table.list th { background: #f0ede5; color: var(--ink-soft); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
table.list tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover td { background: #fbfaf6; }
.list-empty { color: var(--ink-soft); padding: 34px; text-align: center; }
.file-name { align-items: center; display: flex; gap: 9px; font-weight: 700; }
.file-icon { align-items: center; background: var(--copper-soft); border-radius: 7px; color: var(--copper-deep); display: inline-flex; flex: 0 0 30px; font-size: .68rem; font-weight: 850; height: 30px; justify-content: center; }
.row-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.hash-preview { color: var(--ink-soft); font-size: .72rem; }

.tabs { border-bottom: 1px solid var(--paper-deep); display: flex; gap: 2px; margin: 0 0 22px; overflow-x: auto; }
.tabs a, .tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-size: .84rem; font-weight: 750; padding: 10px 14px; white-space: nowrap; }
.tabs a.active, .tabs button.active { border-bottom-color: var(--copper); color: var(--navy); }
.tabs a:focus-visible, .tabs button:focus-visible { outline: 2px solid var(--copper); outline-offset: -2px; }

.signature-pad-wrap { background: var(--white); border: 1px dashed #b9b1a4; border-radius: 10px; }
.signature-pad-wrap canvas { cursor: crosshair; display: block; height: 180px; touch-action: none; width: 100%; }
.signature-actions { display: flex; gap: 10px; margin-top: 10px; }
.meta-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.meta-grid .label { color: var(--ink-soft); font-size: .7rem; font-weight: 800; letter-spacing: .06em; margin-bottom: 4px; text-transform: uppercase; }
.meta-grid .value { color: var(--navy); font-size: .98rem; font-weight: 750; }

.contract-paper { background: var(--white); border: 1px solid var(--paper-deep); border-radius: 15px; box-shadow: var(--shadow-sm); margin-bottom: 20px; padding: clamp(26px, 5vw, 52px); }
.contract-paper__header { align-items: flex-start; border-bottom: 2px solid var(--navy); display: flex; justify-content: space-between; margin-bottom: 28px; padding-bottom: 18px; }
.contract-paper__header strong { color: var(--navy); font-size: 1rem; }
.contract-paper__title { font-size: 1.45rem; margin-bottom: 5px; }
.contract-paper__meta { color: var(--ink-soft); font-size: .82rem; margin-bottom: 30px; }
.contract-paper h3 { font-size: .98rem; margin-top: 24px; }
.contract-paper p { line-height: 1.72; }
.contract-signoff { border-top: 1px solid var(--paper-deep); display: grid; gap: 36px; grid-template-columns: 1fr 1fr; margin-top: 46px; padding-top: 30px; }
.contract-signoff__block { text-align: center; }
.contract-signoff__line { border-bottom: 1px solid var(--ink-soft); height: 60px; margin-bottom: 8px; }
.contract-signoff__signature-img { display: block; margin: 0 auto 8px; max-height: 60px; max-width: 100%; object-fit: contain; }
.contract-signoff__pad { margin-bottom: 8px; }
.contract-signoff__pad canvas { height: 60px; }

.status-shell { align-items: center; background: radial-gradient(circle at 50% 0, #1b3550, var(--navy) 58%); display: flex; justify-content: center; min-height: 100vh; padding: 24px; }
.status-card { background: var(--white); border-radius: 18px; box-shadow: var(--shadow-lg); max-width: 520px; padding: 40px; text-align: center; }
.status-card > p:not(.status-code) { color: var(--ink-soft); margin: 0 auto 24px; max-width: 420px; }
.status-code { color: var(--copper-deep); font-size: .76rem; font-weight: 850; letter-spacing: .14em; margin-bottom: 7px; }

@media (max-width: 900px) {
  .auth-shell { display: flex; justify-content: center; padding: 24px; }
  .auth-story { display: none; }
  .auth-card { margin: auto; width: 100%; }
  .auth-brand-mobile { display: flex; }
  .app-shell { display: block; }
  .mobile-bar { display: flex; position: sticky; top: 0; z-index: 40; }
  .app-sidebar { box-shadow: 16px 0 50px rgba(0,0,0,.28); height: 100vh; left: 0; position: fixed; top: 0; transform: translateX(-110%); transition: transform .2s ease; z-index: 60; }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-content { padding: 28px 20px 20px; }
}

@media (max-width: 640px) {
  .field-row, .contract-signoff, .welcome-panel { grid-template-columns: 1fr; }
  .auth-shell { padding: 0; }
  .auth-card { border-radius: 0; box-shadow: none; min-height: 100vh; padding: 30px 24px; }
  .page-head { align-items: stretch; }
  .page-head .page-actions, .page-head .page-actions .btn { width: 100%; }
  .welcome-panel { padding: 24px; }
  .welcome-panel .btn { width: 100%; }
  .card { padding: 20px; }
  .contract-paper__header { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}