/* ═══════════════════════════════════════════════════════════════
   Recruiter Tool — HexaCrewTools
   Material Design 3 (color roles · shape scale · type scale ·
   state layers · soft elevation) + Apple Liquid Glass materials
   (backdrop blur/saturation · specular edges · floating controls)
   Brand hue: hexacrewtools electric blue on deep navy.
   ═══════════════════════════════════════════════════════════════ */

/* ── M3 color roles (dark scheme, brand hue 210°) ───────────── */
:root {
  --primary:              #6FBBFF;
  --on-primary:           #002F55;
  --primary-container:    #0068C2;
  --on-primary-container: #D6E9FF;

  --tertiary:             #C4B5FD;
  --tertiary-container:   #4C3D99;
  --on-tertiary-container:#E9E2FF;

  --error:                #FFB4AB;
  --error-container:      #93000A;
  --on-error-container:   #FFDAD6;

  --success:              #7BE8A8;
  --success-container:    #00522B;
  --on-success-container: #C4FFD8;

  --warn:                 #FFD37E;
  --warn-container:       #6A4B00;
  --on-warn-container:    #FFE9C0;

  --surface-dim:          #04101F;
  --surface:              #071627;
  --surface-container-low:#0A1C31;
  --surface-container:    #0D2340;
  --surface-container-high:#123054;
  --on-surface:           #E4EEF9;
  --on-surface-variant:   #A9C0D6;
  --outline:              #557294;
  --outline-variant:      #24405F;

  /* Liquid Glass material */
  --glass-fill:    linear-gradient(155deg, rgba(38, 80, 132, 0.42), rgba(13, 35, 64, 0.50) 55%, rgba(24, 56, 98, 0.38));
  --glass-blur:    blur(28px) saturate(1.8) brightness(1.08);
  --glass-edge:    linear-gradient(155deg, rgba(255,255,255,0.42), rgba(255,255,255,0.06) 30%, rgba(120,190,255,0.10) 65%, rgba(255,255,255,0.22));
  --glass-specular:radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 45%, transparent 70%);

  /* Timeline colours (match the delivered docx) */
  --tl-edu:  #CCE5FF;
  --tl-work: #D4EDDA;
  --tl-gap:  #FDE8C8;

  /* M3 shape scale */
  --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px;
  --shape-lg: 16px; --shape-xl: 28px; --shape-full: 9999px;

  /* M3 state layer opacities */
  --state-hover: 0.08; --state-press: 0.12;
}

/* ── Reset + M3 type scale ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background:
    radial-gradient(140% 100% at 85% -10%, #0A2A52 0%, transparent 55%),
    radial-gradient(120% 90% at -10% 110%, #0B1E4A 0%, transparent 55%),
    #04101F;
  color: var(--on-surface);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;                      /* body-large */
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1 { font-size: 2rem;    font-weight: 800; line-height: 1.2; }   /* headline-large */
h2 { font-size: 1.55rem; font-weight: 800; line-height: 1.25; }  /* headline-small */
h3 { font-size: 1rem;    font-weight: 800; letter-spacing: .01em; } /* title-medium */
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: .95rem; }

/* ── Scrollbars — thin, glassy, never square ────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(111,187,255,.35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(111,187,255,.3);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(111,187,255,.5); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Vivid backdrop — gives the glass something to bend ─────── */
.bg-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora { position: absolute; border-radius: 50%; filter: blur(80px); }
.a1 { width: 560px; height: 560px; top: -180px; left: -140px; opacity: .55;
      background: radial-gradient(circle at 35% 35%, #0E7DFF 0%, #0A3D8F 45%, transparent 72%);
      animation: drift1 24s ease-in-out infinite alternate; }
.a2 { width: 500px; height: 500px; bottom: -200px; right: -120px; opacity: .42;
      background: radial-gradient(circle at 60% 40%, #00D1FF 0%, #0060CC 50%, transparent 74%);
      animation: drift2 30s ease-in-out infinite alternate; }
.a3 { width: 420px; height: 420px; top: 34%; left: 52%; opacity: .30;
      background: radial-gradient(circle at 50% 50%, #8B5CF6 0%, #4C1D95 55%, transparent 75%);
      animation: drift3 36s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(110px, 70px) scale(1.18); } }
@keyframes drift2 { to { transform: translate(-90px, -60px) scale(1.12); } }
@keyframes drift3 { to { transform: translate(-70px, 50px) scale(0.88); } }

/* ── Liquid Glass material ──────────────────────────────────── */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.22),          /* specular top edge */
    inset 0 -1px 1px rgba(0,0,0,0.28),               /* refraction bottom */
    0 18px 44px rgba(0, 4, 12, 0.5),
    0 2px 8px rgba(0, 4, 12, 0.35);
  isolation: isolate;
}
.glass::before {                                     /* gradient light edge */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.glass::after {                                      /* convex specular sheen */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--glass-specular);
  pointer-events: none;
  z-index: 1;
}
.glass > * { position: relative; z-index: 3; }

/* ── Floating glass app bar (Liquid Glass toolbar) ──────────── */
.appbar {
  background: linear-gradient(155deg, rgba(22, 48, 82, .96), rgba(8, 23, 41, .97) 55%, rgba(16, 37, 64, .96));
  position: sticky; top: 14px; z-index: 40;
  margin: 14px auto 0;
  width: min(960px, calc(100% - 32px));
  height: 104px; padding: 0 16px 0 26px;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--shape-full);
}
.brand-logo { height: 78px; }
.appbar-spacer { flex: 1; }
.icon-btn {
  width: 42px; height: 42px; border-radius: var(--shape-full);
  background: transparent; border: none; color: var(--on-surface-variant);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden;
  transition: color .2s;
}
.icon-btn::after {                                   /* M3 state layer */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity .15s;
}
.icon-btn:hover { color: var(--on-surface); }
.icon-btn:hover::after { opacity: var(--state-hover); }
.icon-btn:active::after { opacity: var(--state-press); }

/* ── Layout ─────────────────────────────────────────────────── */
.main {
  position: relative; z-index: 1;
  flex: 1; width: 100%; max-width: 960px;
  margin: 0 auto; padding: 30px 20px 90px;
}
.stage { display: none; }
.stage-active { display: block; animation: rise .4s cubic-bezier(.2,.9,.25,1) both; }
.stage-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ── M3 buttons (filled · tonal · text) ─────────────────────── */
.btn {
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px;
  border-radius: var(--shape-full);                  /* M3 full shape */
  font-size: .95rem; font-weight: 800; letter-spacing: .01em; /* label-large */
  color: var(--on-primary);
  background: linear-gradient(160deg, #8FCBFF, var(--primary) 60%);
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,120,255,.28),
              inset 0 1px 0 rgba(255,255,255,.45);   /* glassy specular */
  position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .15s cubic-bezier(.2,.9,.25,1), filter .2s;
}
.btn::after {                                        /* M3 state layer */
  content: ''; position: absolute; inset: 0;
  background: var(--on-primary); opacity: 0; transition: opacity .15s;
}
.btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 10px 26px rgba(0,140,255,.4),
             inset 0 1px 0 rgba(255,255,255,.5); }
.btn:hover::after { opacity: var(--state-hover); }
.btn:active { transform: scale(.98); }
.btn:active::after { opacity: var(--state-press); }
.btn:disabled {
  cursor: not-allowed;
  background: rgba(228,238,249,.12); color: rgba(228,238,249,.38);
  box-shadow: none;
}
.btn:disabled::after { opacity: 0; }
.btn-ghost {                                         /* M3 outlined button */
  background: transparent; color: var(--primary);
  border: 1px solid var(--outline); box-shadow: none;
}
.btn-ghost::after { background: var(--primary); }
.btn-ghost:hover { box-shadow: none; border-color: var(--primary); }
/* Gate buttons: glass at rest, colour floods in on hover */
.btn-gate {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  color: var(--on-surface);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(0,4,12,.4);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .15s cubic-bezier(.2,.9,.25,1);
}
.btn-gate::after { display: none; }
.btn-gate-yes:hover {
  background: linear-gradient(160deg, #9FF0C0, var(--success) 60%);
  color: #00391C; border-color: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 10px 26px rgba(0,220,120,.36), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-gate-no:hover {
  background: linear-gradient(160deg, #FFC9C2, var(--error) 60%);
  color: #5F1410; border-color: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 10px 26px rgba(255,120,110,.34), inset 0 1px 0 rgba(255,255,255,.5);
}
.mini-btn {                                          /* M3 assist chip */
  margin-left: auto;
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 14px;
  border-radius: var(--shape-sm);
  border: 1px solid var(--outline-variant); background: transparent;
  color: var(--primary); font-weight: 800; font-size: .8rem; cursor: pointer;
  position: relative; overflow: hidden; transition: border-color .2s;
}
.mini-btn::after { content: ''; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: opacity .15s; }
.mini-btn:hover { border-color: var(--outline); }
.mini-btn:hover::after { opacity: var(--state-hover); }

/* ── Landing ────────────────────────────────────────────────── */
.landing-title {
  text-align: center;
  margin-top: 8vh;
  font-size: clamp(34px, 4.5vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.landing-title em {
  font-style: normal;
  font-weight: 700;
  color: #00AAFF;
}
.landing-sub {
  text-align: center;
  margin-top: 10px;
  color: var(--on-surface-variant);
  font-size: .98rem;
  font-weight: 400;
}

/* ── Single hero dropzone (expressive XL shape + glass) ─────── */
.drop-single {
  margin-top: 28px;
  padding: 70px 30px;
  min-height: 300px;
  border-radius: var(--shape-xl);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.9,.25,1), box-shadow .3s;
}
.drop-single:hover { transform: translateY(-3px); }
.drop-single.dragover {
  transform: scale(1.015);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.28),
    0 0 0 3px rgba(111,187,255,.35), 0 24px 60px rgba(0,90,200,.45);
}
.drop-single.hasfile .dropcard-icon { background: linear-gradient(160deg, rgba(123,232,168,.32), rgba(0,82,43,.30)); color: var(--success); }
.dropcard-icon {
  width: 84px; height: 84px; margin-bottom: 18px;
  border-radius: var(--shape-lg) var(--shape-xl) var(--shape-lg) var(--shape-xl); /* expressive mixed radii */
  background: linear-gradient(160deg, rgba(111,187,255,.30), rgba(0,104,194,.26));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px rgba(0,60,140,.35);
  display: flex; align-items: center; justify-content: center; color: var(--primary);
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), border-radius .3s;
}
.drop-single:hover .dropcard-icon { transform: translateY(-4px); border-radius: var(--shape-xl); }
.dropcard-title { font-size: 1.2rem; font-weight: 500; letter-spacing: .01em; color: var(--on-surface); }
.dropcard-hint { color: var(--on-surface-variant); font-size: .9rem; margin-top: 5px; }
.dropcard-file { margin-top: 14px; font-size: .9rem; font-weight: 700; color: var(--success); overflow-wrap: anywhere; }

/* ── Loading scene (M3 expressive loading + glass orb) ──────── */
.loading-scene {
  border-radius: var(--shape-xl); padding: 64px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  margin-top: 10vh;
}
.liquid-orb { position: relative; width: 132px; height: 132px; }
.orb-core {
  position: absolute; inset: 22px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.65), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #55B4FF, #0068C2 70%);
  box-shadow: 0 0 48px rgba(40,150,255,.55), inset 0 -6px 14px rgba(0,30,80,.5),
              inset 0 2px 6px rgba(255,255,255,.5);
  animation: orbPulse 2.4s ease-in-out infinite;
}
.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #8FCBFF; border-right-color: rgba(111,187,255,.3);
}
.orb-ring.r1 { animation: spin 1.5s cubic-bezier(.45,.15,.55,.85) infinite; }
.orb-ring.r2 { inset: 9px; border-top-color: #00D1FF; animation: spin 2.3s cubic-bezier(.45,.15,.55,.85) reverse infinite; opacity: .7; }
.orb-plane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: bob 2.4s ease-in-out infinite; }
@keyframes orbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.progress-track {
  width: min(340px, 80%); height: 5px; border-radius: var(--shape-full);
  background: var(--surface-container-high); overflow: hidden; position: relative;
}
.progress-fill {
  position: absolute; height: 100%; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #00D1FF, var(--primary));
  animation: indeterminate 1.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes indeterminate {
  0% { left: -40%; width: 40%; } 60% { left: 55%; width: 55%; } 100% { left: 110%; width: 40%; }
}
.working-msg { color: var(--on-surface-variant); font-weight: 700; min-height: 1.5em; text-align: center; transition: opacity .25s; }

/* ── Cards (glass surfaces, M3 large/XL shapes) ─────────────── */
.card { border-radius: var(--shape-xl); padding: 22px; margin-bottom: 18px; }
.card-compact { padding: 18px 20px; margin-bottom: 14px; border-radius: var(--shape-lg); }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h3 { color: var(--on-surface); }

/* M3 suggestion chips */
.chip {
  display: inline-flex; align-items: center;
  min-height: 26px; padding: 2px 12px;
  border-radius: var(--shape-sm);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant); background: transparent;
}
.chip-blue { color: var(--on-primary-container); background: rgba(0,104,194,.35); border-color: transparent; }
.chip-ok   { color: var(--on-success-container); background: rgba(0,82,43,.45); border-color: transparent; }
.chip-bad  { color: var(--on-error-container); background: rgba(147,0,10,.45); border-color: transparent; }

/* ── Banners / flags (M3 containers) ────────────────────────── */
.banner {
  border-radius: var(--shape-lg); padding: 15px 18px; margin-bottom: 16px;
  display: flex; gap: 13px; align-items: flex-start;
  font-weight: 700;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 22px rgba(0,4,12,.35);
  animation: rise .35s cubic-bezier(.2,.9,.25,1) both;
}
.banner-ok    { background: rgba(0, 82, 43, .40);  color: var(--on-success-container); border: 1px solid rgba(123,232,168,.28); }
.banner-block { background: rgba(147, 0, 10, .38); color: var(--on-error-container);   border: 1px solid rgba(255,180,171,.30); }
.banner-warn  { background: rgba(106, 75, 0, .40); color: var(--on-warn-container);    border: 1px solid rgba(255,211,126,.28); }
.banner small { display: block; color: var(--on-surface-variant); font-weight: 600; margin-top: 3px; }
.banner .banner-body { flex: 1; }
.flag-list { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.flag {
  display: flex; gap: 10px; align-items: center;
  font-size: .88rem; font-weight: 700; color: var(--on-surface-variant);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md); padding: 10px 14px;
}
.flag-warn   { border-left: 4px solid var(--warn); }
.flag-info   { border-left: 4px solid #00D1FF; }
.flag-danger { border-left: 4px solid var(--error); }

/* ── Fields (M3 outlined text fields) ───────────────────────── */
.personal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--on-surface-variant);                  /* label-small */
}
.field input, .field select, .entry-row input, .entry-row select {
  background: rgba(4, 16, 31, 0.45);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md);
  color: var(--on-surface);
  padding: 11px 13px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  width: 100%;
}
.field input:focus, .entry-row input:focus, .entry-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(111,187,255,.22);       /* M3 focus indicator */
  background: rgba(4, 16, 31, 0.7);
}
.field-full { grid-column: 1 / -1; }

/* ── Entry rows ─────────────────────────────────────────────── */
.entry-list { display: flex; flex-direction: column; gap: 10px; }
.entry-row {
  display: grid; gap: 10px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-lg); padding: 13px;
  animation: rise .3s cubic-bezier(.2,.9,.25,1) both;
}
.entry-row.needs-dates { border-color: rgba(255,211,126,.6); box-shadow: 0 0 0 1px rgba(255,211,126,.25); }
.entry-row .row-main { display: grid; grid-template-columns: minmax(128px,148px) minmax(128px,148px) 1fr 1fr auto; gap: 10px; align-items: end; }
.entry-row .row-main.cols-3 { grid-template-columns: minmax(128px,148px) minmax(128px,148px) 1fr auto; }
.entry-row label { display: flex; flex-direction: column; gap: 4px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); }
.entry-row .raw-note { font-size: .76rem; color: var(--warn); font-weight: 700; margin-top: 4px; }
.del-btn {
  width: 38px; height: 40px; border-radius: var(--shape-md);
  border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface-variant);
  cursor: pointer; font-size: 1rem; transition: all .2s;
}
.del-btn:hover { border-color: var(--error); color: var(--error); background: rgba(147,0,10,.25); }
.empty-note { color: var(--on-surface-variant); font-size: .88rem; font-weight: 700; padding: 4px 2px; }

/* ── Coverage map ───────────────────────────────────────────── */
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.lg { font-size: .72rem; font-weight: 800; color: var(--on-surface-variant); display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ''; width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg-edu::before  { background: var(--tl-edu); }
.lg-work::before { background: var(--tl-work); }
.lg-add::before  { background: var(--tertiary); }
.lg-gap::before  { background: #F1998E; }
.lg-hole::before { background: var(--error); }
.coverage-map {
  display: flex; height: 44px; border-radius: var(--shape-md); overflow: hidden;
  border: 1px solid var(--outline-variant);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
.cov-seg { position: relative; min-width: 2px; }
.cov-seg:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--surface-container-high); color: var(--on-surface);
  font-size: .74rem; font-weight: 700;
  padding: 6px 10px; border-radius: var(--shape-sm); white-space: nowrap; z-index: 10;
  border: 1px solid var(--outline-variant); box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.cov-edu  { background: var(--tl-edu); }
.cov-work { background: var(--tl-work); }
.cov-add  { background: var(--tertiary); }
.cov-gap  { background: #F1998E; }
.cov-hole { background: repeating-linear-gradient(45deg, #E5484D, #E5484D 6px, #A93338 6px, #A93338 12px); }
.coverage-scale { display: flex; justify-content: space-between; margin-top: 6px; color: var(--on-surface-variant); font-size: .72rem; font-weight: 700; }

/* ── Clarification cards (glass, warn-tinted) ───────────────── */
.clarify-card {
  position: relative;
  border-radius: var(--shape-lg); padding: 18px; margin-bottom: 12px;
  border: 1px solid rgba(255,180,171,.45);
  background: linear-gradient(155deg, rgba(96,18,20,.46), rgba(64,10,12,.42));
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(0,4,12,.4);
  animation: rise .3s cubic-bezier(.2,.9,.25,1) both;
}
.clarify-card.resolved {
  border-color: rgba(123,232,168,.4);
  background: linear-gradient(155deg, rgba(0,72,38,.42), rgba(0,50,26,.40));
}
.clarify-head { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 7px; flex-wrap: wrap; }
.clarify-raw { color: var(--on-surface-variant); font-weight: 600; font-size: .85rem; }
.clarify-head .cbadge {
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 800;
  padding: 3px 10px; border-radius: var(--shape-sm);
  background: rgba(147,0,10,.85); color: var(--on-error-container);
}
.clarify-card.resolved .cbadge { background: rgba(0,82,43,.85); color: var(--on-success-container); }
.clarify-body { color: var(--on-surface-variant); font-size: .9rem; margin-bottom: 12px; }
.clarify-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.clarify-controls .field { min-width: 148px; }
.clarify-controls .field input[type="month"] { font-size: .84rem; }
.clarify-controls .grow { flex: 1; min-width: 210px; }
.suggest-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.suggest {                                            /* M3 suggestion chip */
  display: inline-flex; align-items: center;
  min-height: 30px; padding: 0 13px;
  font-size: .78rem; font-weight: 800; cursor: pointer;
  border-radius: var(--shape-sm);
  background: rgba(111,187,255,.14); color: var(--primary);
  border: 1px solid var(--outline-variant);
  position: relative; overflow: hidden;
  transition: border-color .2s;
}
.suggest::after { content: ''; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: opacity .15s; }
.suggest:hover { border-color: var(--outline); }
.suggest:hover::after { opacity: var(--state-hover); }

/* ── Final gate section ─────────────────────────────────────── */
.gate-card { border-radius: var(--shape-xl); }
.seg {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: var(--shape-full);
  background: rgba(4, 16, 31, 0.5);
  border: 1px solid var(--outline-variant);
  margin-bottom: 16px;
}
.seg-btn {
  min-height: 36px; padding: 0 18px;
  border-radius: var(--shape-full);
  border: none; background: transparent; cursor: pointer;
  color: var(--on-surface-variant); font-weight: 800; font-size: .84rem;
  transition: background .2s, color .2s;
}
.seg-btn:hover { color: var(--on-surface); }
.seg-active, .seg-btn.seg-active:hover {
  background: linear-gradient(160deg, #8FCBFF, var(--primary) 60%);
  color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.gate-q { font-weight: 800; font-size: 1.05rem; margin-bottom: 13px; }
.gate-btns { display: flex; gap: 13px; flex-wrap: wrap; }
.gate-note { color: var(--warn); font-size: .85rem; font-weight: 500; margin: -6px 0 10px; }
.skip-label {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; color: var(--on-surface-variant);
  font-size: .85rem; cursor: pointer;
}
.btn-gate:disabled {
  opacity: .4; cursor: not-allowed;
  background: var(--glass-fill); color: var(--on-surface);
  border-color: rgba(255,255,255,.12); box-shadow: none;
}
.gate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px; margin-bottom: 8px; }

/* ── Done stage ─────────────────────────────────────────────── */
.final-card {
  max-width: 560px; margin: 8vh auto 0;
  border-radius: var(--shape-xl); padding: 36px 30px;
  text-align: center;
}
.final-card h2 { margin-bottom: 20px; }
.final-sub { color: var(--on-surface-variant); font-weight: 700; margin: -10px 0 6px; }
.file-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.file-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(4, 16, 31, 0.45);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-md);
  padding: 11px 14px; text-align: left;
}
.file-kind {
  flex-shrink: 0;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-primary-container); background: rgba(0,104,194,.35);
  padding: 3px 9px; border-radius: var(--shape-sm);
}
.file-name { flex: 1; min-width: 0; font-size: .84rem; font-weight: 700; overflow-wrap: anywhere; }
.file-dl {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--shape-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary); cursor: pointer; position: relative; overflow: hidden;
}
.file-dl::after { content: ''; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: opacity .15s; }
.file-dl:hover::after { opacity: var(--state-hover); }
.check-circle {
  width: 76px; height: 76px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 45%),
    linear-gradient(145deg, #58E794, #00944F 70%);
  box-shadow: 0 0 44px rgba(0,220,120,.35), inset 0 2px 5px rgba(255,255,255,.5), 0 10px 26px rgba(0,60,30,.5);
  display: flex; align-items: center; justify-content: center; color: #fff;
  margin: 0 auto 16px;
  animation: pop .5s cubic-bezier(.34,1.45,.64,1) both;
}
.deny-circle {
  width: 76px; height: 76px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.45), rgba(255,255,255,0) 45%),
    linear-gradient(145deg, #FF9B93, #B3261E 70%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.45), 0 10px 26px rgba(80,10,10,.5);
  display: flex; align-items: center; justify-content: center; color: #fff;
  margin: 0 auto 16px; font-size: 1.8rem; font-weight: 800;
  animation: pop .5s cubic-bezier(.34,1.45,.64,1) both;
}
.delivery-hero { text-align: center; padding: 8vh 20px 6px; }
.delivery-hero p { color: var(--on-surface-variant); margin-top: 6px; font-weight: 700; }

/* ── Settings sheet (glass dialog, M3 XL shape) ─────────────── */
.sheet-backdrop[hidden] { display: none; }
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(1, 5, 12, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .25s ease both;
}
.sheet {
  width: min(430px, 100%); border-radius: var(--shape-xl); padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  animation: pop .4s cubic-bezier(.34,1.4,.64,1) both;
  max-height: 92dvh; overflow-y: auto; overflow-x: hidden;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-sub { color: var(--on-surface-variant); font-size: .84rem; margin-top: -8px; }

.sheet-div { height: 1px; background: var(--outline-variant); margin: 6px 0; }
.pw-msg { color: var(--error); font-size: .85rem; font-weight: 500; }
.pw-msg.pw-ok { color: var(--success); }

.adddoc-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.adddoc-hint { color: var(--on-surface-variant); font-size: .8rem; }

/* ── Error box ──────────────────────────────────────────────── */
.error-box {
  position: fixed; top: 134px; left: 50%; transform: translateX(-50%);
  z-index: 200; max-width: min(560px, calc(100% - 40px));
  padding: 14px 20px; border-radius: var(--shape-lg);
  background: rgba(96, 14, 18, .88);
  border: 1px solid rgba(255,180,171,.5);
  color: var(--on-error-container); font-weight: 700; text-align: center;
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 40px rgba(0,0,0,.55);
  cursor: pointer;
  animation: dropIn .35s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes dropIn { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes shake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); } 75% { transform: translateX(-3px); }
}
.appfoot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 16px 26px; color: var(--on-surface-variant); font-size: .78rem; font-weight: 700;
}

/* ── Motion (M3 expressive easing) ──────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

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

/* ── Responsive / overflow safety ───────────────────────────── */
.entry-row .row-main > * , .personal-grid > *, .gate-grid > * { min-width: 0; }
.entry-row input, .entry-row select, .field input, .field select { min-width: 0; max-width: 100%; }
.entry-row input[type="month"] { font-size: .84rem; padding-right: 6px; }
.card, .clarify-card { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .entry-row .row-main, .entry-row .row-main.cols-3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .entry-row .row-main .grow2 { grid-column: 1 / -1; }
  .personal-grid, .gate-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .card, .card-compact { padding: 14px; }
  .clarify-card { padding: 14px; }
  .clarify-controls .field { min-width: 110px; }
  .clarify-controls .grow { min-width: 150px; }
  .appbar { top: 8px; margin-top: 8px; width: calc(100% - 20px); }
  .landing-title { margin-top: 4vh; font-size: clamp(26px, 7vw, 34px); }
  .drop-single { padding: 46px 18px; min-height: 240px; }
  .final-card { margin-top: 4vh; padding: 26px 18px; }
}

/* ── Login + user chip ──────────────────────────────────────── */
.login-card { max-width: 400px; margin-top: 14vh; }
.login-logo { height: 84px; margin-bottom: 6px; }
.login-title { font-size: 1.9rem; margin-bottom: 18px; }
.login-card form { text-align: left; }
.login-err { color: var(--on-error-container); background: rgba(147,0,10,.4); border: 1px solid rgba(255,180,171,.4); border-radius: var(--shape-md); padding: 9px 13px; font-weight: 700; font-size: .85rem; margin-bottom: 14px; }
.user-chip { color: var(--on-surface-variant); font-weight: 700; font-size: .86rem; margin-right: 4px; }
.user-chip a { color: var(--primary); text-decoration: none; font-weight: 800; }
.user-chip a:hover { text-decoration: underline; }