:root {
  --ink: #15231e;
  --muted: #6c7872;
  --line: #dfe5e2;
  --soft: #f3f6f4;
  --paper: #ffffff;
  --green: #167754;
  --green-dark: #0d583d;
  --green-soft: #e7f4ed;
  --amber: #a96705;
  --amber-soft: #fff3d9;
  --blue: #2e61b7;
  --blue-soft: #eaf1ff;
  --red: #b43a39;
  --red-soft: #fdeceb;
  --shadow: 0 18px 45px rgba(16, 43, 32, .1);
  font-family: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--soft);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--soft); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.plain-button { padding: 0; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.modal-open { overflow: hidden; }
.lucide { width: 18px; height: 18px; stroke-width: 1.8; }

.site-header {
  height: 76px; padding: 0 clamp(22px, 5vw, 72px); display: flex; align-items: center;
  justify-content: space-between; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 6px; }
.brand-mark .lucide { width: 21px; height: 21px; }
.brand > span:last-child { display: flex; align-items: baseline; gap: 8px; }
.brand strong { font-size: 20px; letter-spacing: 0; }
.brand small { color: var(--muted); font-size: 12px; }
.admin-link, .back-link { display: inline-flex; align-items: center; gap: 7px; color: #52605a; font-size: 14px; font-weight: 500; }
.admin-link:hover, .back-link:hover { color: var(--green); }
.user-nav { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--soft); }
.user-nav button { height: 34px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 3px; background: transparent; color: #6a756f; font-size: 12px; }
.user-nav button.active { background: white; color: var(--green-dark); box-shadow: 0 1px 4px rgba(20,50,38,.1); font-weight: 600; }
.user-nav .lucide { width: 15px; height: 15px; }

.auth-page { min-height: 100vh; background: #eef3f0; }
.auth-header { height: 76px; padding: 0 clamp(22px, 5vw, 72px); display: flex; align-items: center; background: white; border-bottom: 1px solid var(--line); }
.auth-shell { min-height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(330px, .88fr) minmax(500px, 1.12fr); }
.auth-intro { padding: clamp(54px, 9vh, 105px) clamp(38px, 7vw, 110px); background: #123f31; color: white; position: relative; overflow: hidden; }
.auth-intro::after { content: ""; position: absolute; width: 440px; height: 440px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; right: -220px; bottom: -180px; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.auth-intro h1 { margin: 0; color: white; font-size: clamp(37px, 4vw, 54px); line-height: 1.35; }
.auth-intro > p:not(.eyebrow) { max-width: 390px; margin: 24px 0 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.9; }
.role-paths { max-width: 390px; margin-top: clamp(55px, 11vh, 120px); display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.46); }
.role-paths > div { display: flex; align-items: center; gap: 10px; }
.role-paths > div > .lucide { width: 21px; color: #73d0aa; }
.role-paths > .lucide { width: 18px; color: rgba(255,255,255,.26); }
.role-paths span { display: flex; flex-direction: column; gap: 2px; }
.role-paths strong { color: white; font-size: 13px; }
.role-paths small { font-size: 11px; white-space: nowrap; }
.auth-form-panel { display: grid; place-items: center; padding: 45px 30px; background: #f8faf9; }
.unified-login { width: min(430px, 100%); }
.login-footnote { margin: 22px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #8a9690; font-size: 11px; }
.login-footnote .lucide { width: 14px; height: 14px; color: var(--green); }

.intake-shell { min-height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(330px, .82fr) minmax(540px, 1.18fr); }
.intro-panel { min-height: 100%; padding: clamp(55px, 8vh, 100px) clamp(38px, 7vw, 105px); display: flex; flex-direction: column; background: #123f31; color: white; position: relative; overflow: hidden; }
.intro-panel::after { content: ""; position: absolute; width: 440px; height: 440px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; right: -220px; bottom: -180px; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.eyebrow, .step-label { margin: 0 0 16px; color: #79d4ae; font-size: 12px; font-weight: 700; letter-spacing: .15em; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 23px; height: 2px; background: #79d4ae; }
.intro-copy h1 { margin: 0; font-size: clamp(38px, 3.7vw, 50px); line-height: 1.25; letter-spacing: 0; }
.intro-text { max-width: 450px; margin: 24px 0 0; font-size: 16px; line-height: 1.9; color: rgba(255,255,255,.68); }
.process-list { margin-top: clamp(50px, 8vh, 90px); }
.process-item { display: flex; align-items: center; gap: 15px; color: rgba(255,255,255,.46); }
.process-item > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; font-size: 11px; font-weight: 700; }
.process-item div { display: flex; flex-direction: column; gap: 2px; }
.process-item strong { font-size: 14px; font-weight: 600; }
.process-item small { font-size: 12px; }
.process-item.active { color: white; }
.process-item.active > span { background: #73cea8; border-color: #73cea8; color: #123f31; }
.process-line { width: 1px; height: 27px; margin: 5px 0 5px 18px; background: rgba(255,255,255,.2); }
.privacy-note { margin: auto 0 0; padding-top: 48px; display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,.45); font-size: 12px; position: relative; z-index: 1; }
.privacy-note .lucide { width: 14px; height: 14px; }

.form-panel { padding: clamp(42px, 6vh, 72px) clamp(34px, 8vw, 120px); background: var(--paper); }
.form-heading { max-width: 730px; margin: 0 auto 34px; display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.form-heading .step-label, .login-box .step-label, .detail-drawer .step-label { color: var(--green); margin-bottom: 7px; }
.form-heading h2 { margin: 0; font-size: 28px; letter-spacing: 0; }
.required-note { color: var(--muted); font-size: 12px; }
.field b, .required-note b { color: var(--red); }
#demand-form { max-width: 730px; margin: 0 auto; display: grid; gap: 21px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 9px; min-width: 0; }
.field > span, .field legend { font-size: 13px; font-weight: 600; color: #3f4d47; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #d7dfdb; border-radius: 5px; background: #fbfcfb; color: var(--ink); outline: 0; transition: border-color .15s, box-shadow .15s, background .15s; }
.field input, .field select { height: 46px; padding: 0 13px; }
.field textarea { padding: 13px; resize: vertical; min-height: 130px; line-height: 1.65; }
.field input::placeholder, .field textarea::placeholder { color: #a4ada8; }
.field input:focus, .field textarea:focus, .field select:focus { background: white; border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,119,84,.1); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 38px; }
.select-wrap > .lucide { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; pointer-events: none; color: #748079; }
.urgency-field { margin: 0; padding: 0; border: 0; }
.urgency-field legend { margin-bottom: 9px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--soft); border: 1px solid #d7dfdb; border-radius: 5px; padding: 3px; height: 46px; }
.segmented label { min-width: 0; }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented span { height: 38px; display: grid; place-items: center; border-radius: 3px; color: #68746e; font-size: 12px; cursor: pointer; white-space: nowrap; }
.segmented input:checked + span { background: white; color: var(--green-dark); box-shadow: 0 1px 4px rgba(20,50,38,.12); font-weight: 600; }
.char-count { margin: -30px 12px 10px auto; color: #99a29e; font-size: 11px; position: relative; pointer-events: none; }
.consent { display: flex; gap: 9px; align-items: flex-start; color: #78827d; font-size: 12px; line-height: 1.65; cursor: pointer; }
.consent input { position: absolute; opacity: 0; }
.checkmark { width: 17px; height: 17px; flex: 0 0 auto; border: 1px solid #bec8c3; border-radius: 3px; display: grid; place-items: center; margin-top: 1px; }
.checkmark .lucide { width: 12px; opacity: 0; }
.consent input:checked + .checkmark { background: var(--green); border-color: var(--green); color: white; }
.consent input:checked + .checkmark .lucide { opacity: 1; }
.primary-button, .secondary-button { height: 47px; border: 0; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; transition: transform .15s, background .15s, opacity .15s; }
.primary-button { background: var(--green); color: white; padding: 0 22px; }
.primary-button:hover { background: var(--green-dark); transform: translateY(-1px); }
.primary-button:disabled { opacity: .65; cursor: wait; transform: none; }
.secondary-button { border: 1px solid var(--line); background: white; color: #3c4943; padding: 0 16px; font-size: 13px; }
.secondary-button:hover { border-color: #b9c6c0; background: #fafcfb; }
.form-message { min-height: 0; font-size: 12px; color: var(--muted); }
.form-message:not(:empty) { padding: 10px 12px; border-radius: 4px; }
.form-message.error { color: var(--red); background: var(--red-soft); }
.form-message.success { color: var(--green-dark); background: var(--green-soft); }

.success-overlay, .drawer-overlay { position: fixed; inset: 0; background: rgba(10, 26, 20, .5); backdrop-filter: blur(3px); z-index: 20; }
.success-overlay { display: grid; place-items: center; padding: 20px; }
.success-dialog { width: min(440px, 100%); padding: 42px; background: white; box-shadow: var(--shadow); border-radius: 7px; text-align: center; }
.success-icon { width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.success-icon .lucide { width: 27px; height: 27px; stroke-width: 2.4; }
.success-dialog h2 { margin: 0 0 8px; font-size: 25px; }
.success-dialog > p:not(.step-label) { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.7; }
.reference-box { margin: 24px 0; padding: 14px; display: flex; justify-content: space-between; background: var(--soft); border: 1px dashed #bfcbc5; border-radius: 5px; font-size: 13px; }
.reference-box span { color: var(--muted); }
.reference-box strong { color: var(--green-dark); }
.success-dialog .primary-button { width: 100%; }
.success-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.success-actions .primary-button, .success-actions .secondary-button { width: 100%; }

.tracking-page { min-height: calc(100vh - 76px); padding: clamp(45px, 8vh, 82px) clamp(24px, 8vw, 120px); background: #f5f7f6; }
.tracking-heading { max-width: 820px; margin: 0 auto; text-align: center; }
.tracking-heading .eyebrow { justify-content: center; color: var(--green); }
.tracking-heading h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); }
.tracking-heading > p:not(.eyebrow) { margin: 13px 0 0; color: var(--muted); font-size: 14px; }
.tracking-form { max-width: 690px; margin: 32px auto 0; text-align: left; }
.tracking-input { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; padding: 5px; border: 1px solid #d7dfdb; border-radius: 6px; background: white; box-shadow: 0 8px 26px rgba(16,43,32,.06); }
.tracking-input > .lucide { justify-self: center; color: #829089; }
.tracking-input input { height: 43px; padding: 0 8px; border: 0; outline: 0; background: transparent; text-transform: uppercase; }
.tracking-input .primary-button { height: 42px; min-width: 105px; }
.tracking-form .form-message { margin-top: 8px; }
.tracking-empty { max-width: 820px; min-height: 300px; margin: 30px auto 0; display: grid; align-content: center; justify-items: center; border-top: 1px solid var(--line); color: #929d97; text-align: center; }
.tracking-empty > .lucide { width: 35px; height: 35px; margin-bottom: 13px; color: #95aaa0; }
.tracking-empty h2 { margin: 0; color: #53615b; font-size: 16px; }
.tracking-empty p { margin: 7px 0 0; font-size: 12px; }
.tracking-result { max-width: 900px; margin: 35px auto 0; padding: 28px 31px 31px; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 6px; background: white; box-shadow: 0 12px 35px rgba(16,43,32,.07); }
.tracking-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.tracking-result-head .step-label { margin-bottom: 7px; color: var(--green); }
.tracking-result-head h2 { margin: 0; font-size: 22px; }
.tracking-meta { margin-top: 16px; padding-bottom: 21px; display: flex; flex-wrap: wrap; gap: 11px 22px; border-bottom: 1px solid var(--line); color: #7f8a84; font-size: 11px; }
.tracking-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tracking-meta .lucide { width: 14px; height: 14px; }
.tracking-timeline { padding: 27px 5px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; }
.tracking-step { display: flex; align-items: center; gap: 10px; opacity: .48; }
.tracking-step > span { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #aeb9b3; border-radius: 50%; font-size: 11px; font-weight: 700; }
.tracking-step > span .lucide { width: 15px; height: 15px; }
.tracking-step > div { display: flex; flex-direction: column; gap: 2px; }
.tracking-step strong { font-size: 12px; white-space: nowrap; }
.tracking-step small { max-width: 145px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.tracking-step.done, .tracking-step.current { opacity: 1; }
.tracking-step.done > span { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.tracking-step.current > span { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 0 0 5px var(--green-soft); }
.tracking-line { height: 1px; margin: 0 14px; background: #d7dfdb; }
.tracking-reply { padding: 20px; border-radius: 5px; background: #f3f7f5; }
.reply-heading { display: flex; align-items: center; gap: 10px; }
.reply-heading > .lucide { color: var(--green); }
.reply-heading > div { display: flex; flex-direction: column; gap: 2px; }
.reply-heading strong { font-size: 13px; }
.reply-heading small { color: var(--muted); font-size: 10px; }
.tracking-reply p { margin: 15px 0 0; padding-top: 15px; border-top: 1px solid #dce6e1; color: #3f4d47; font-size: 13px; line-height: 1.8; word-break: break-word; }
.tracking-reply p.muted-reply { color: #89948e; }

/* Admin */
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 100px 20px 40px; background: #eef3f0; position: relative; }
.login-view > .brand { position: absolute; top: 28px; left: 34px; }
.login-box { width: min(420px, 100%); padding: 40px; border: 1px solid var(--line); border-top: 3px solid var(--green); background: white; box-shadow: var(--shadow); border-radius: 6px; }
.login-icon { width: 43px; height: 43px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 5px; margin-bottom: 23px; }
.login-box h1 { margin: 0 0 7px; font-size: 28px; }
.login-box > p:not(.step-label) { margin: 0 0 27px; color: var(--muted); font-size: 14px; }
.login-box form { display: grid; gap: 18px; }
.input-icon { position: relative; }
.input-icon .lucide { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #87928d; width: 17px; }
.input-icon input { padding-left: 40px; }
.back-link { margin-top: 23px; justify-content: center; width: 100%; font-size: 12px; }

.dashboard { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); background: #f4f6f5; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 17px; background: #102f26; color: white; display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 7px 27px; border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar .brand-mark { background: #65c79f; color: #102f26; }
.sidebar .brand small { color: rgba(255,255,255,.47); }
.sidebar nav { margin-top: 22px; }
.nav-item { width: 100%; height: 43px; display: flex; align-items: center; gap: 11px; padding: 0 13px; border: 0; background: transparent; color: rgba(255,255,255,.6); border-radius: 5px; font-size: 14px; text-align: left; }
.nav-item + .nav-item { margin-top: 5px; }
.nav-item.active { background: rgba(255,255,255,.1); color: white; }
.nav-item.active::before { content: ""; width: 3px; height: 18px; margin-left: -13px; background: #73d0aa; border-radius: 0 2px 2px 0; }
.sidebar-foot { margin-top: auto; padding: 18px 5px 0; border-top: 1px solid rgba(255,255,255,.09); display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 9px; }
.admin-avatar, .mini-avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 600; }
.admin-avatar { width: 34px; height: 34px; background: #d7ebdf; color: #164c39; font-size: 13px; }
.sidebar-foot > div:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.sidebar-foot strong { font-size: 12px; }
.sidebar-foot small { color: rgba(255,255,255,.45); font-size: 10px; }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #78847e; }
.icon-button:hover { color: var(--green); background: var(--green-soft); }
.sidebar .icon-button { color: rgba(255,255,255,.5); }
.sidebar .icon-button:hover { color: white; background: rgba(255,255,255,.08); }

.dashboard-main { min-width: 0; padding: 38px clamp(24px, 4vw, 58px) 50px; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.breadcrumb { margin: 0 0 10px !important; color: #8b9691 !important; font-size: 11px !important; }
.dashboard-header h1 { margin: 0; font-size: 27px; }
.dashboard-header p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.compact-button { width: auto; height: 41px; font-size: 13px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stats-grid article { min-width: 0; height: 96px; padding: 20px; display: flex; align-items: center; gap: 15px; background: white; border: 1px solid var(--line); border-radius: 6px; }
.stat-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 5px; }
.stat-icon.neutral { color: #53615b; background: #edf1ef; }
.stat-icon.amber { color: var(--amber); background: var(--amber-soft); }
.stat-icon.blue { color: var(--blue); background: var(--blue-soft); }
.stat-icon.green { color: var(--green); background: var(--green-soft); }
.stats-grid article > div:last-child { display: flex; flex-direction: column; }
.stats-grid span { color: var(--muted); font-size: 11px; }
.stats-grid strong { font-size: 26px; line-height: 1.2; }

.list-section { background: white; border: 1px solid var(--line); border-radius: 6px; }
.list-toolbar { padding: 16px 18px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.search-box { width: min(390px, 42%); position: relative; }
.search-box .lucide { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8b9691; width: 17px; }
.search-box input { width: 100%; height: 38px; padding: 0 12px 0 38px; border: 1px solid var(--line); border-radius: 4px; outline: 0; font-size: 12px; }
.search-box input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,119,84,.08); }
.filter-group { display: flex; gap: 8px; }
.select-wrap.compact select { height: 38px; min-width: 120px; border: 1px solid var(--line); border-radius: 4px; background: white; padding: 0 35px 0 11px; font-size: 12px; color: #53615b; }
.refresh-button { width: 38px; height: 38px; border: 1px solid var(--line); }
.table-wrap { overflow-x: auto; min-height: 240px; position: relative; }
table { width: 100%; min-width: 900px; border-collapse: collapse; }
th { height: 43px; padding: 0 15px; text-align: left; color: #828d87; background: #fafbfa; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; white-space: nowrap; }
td { height: 69px; padding: 9px 15px; border-bottom: 1px solid #edf0ee; font-size: 12px; color: #4e5b55; }
tbody tr { transition: background .12s; cursor: pointer; }
tbody tr:hover { background: #f9fbfa; }
.request-cell, .person-cell > div { display: flex; flex-direction: column; min-width: 0; }
.request-cell { max-width: 270px; }
.request-cell strong, .person-cell strong { color: #2c3a34; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.request-cell small, .person-cell small { color: #929c97; font-size: 10px; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.person-cell { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 9px; max-width: 170px; }
.mini-avatar { width: 29px; height: 29px; background: #e6eee9; color: #52655c; font-size: 11px; }
.category-tag { display: inline-block; padding: 4px 7px; background: #f0f3f1; color: #5d6963; border-radius: 3px; font-size: 10px; white-space: nowrap; }
.urgency, .status { display: inline-flex; align-items: center; white-space: nowrap; font-size: 10px; font-weight: 600; }
.urgency { gap: 6px; }
.urgency i { width: 6px; height: 6px; border-radius: 50%; background: #82908a; }
.urgency-urgent { color: var(--amber); }
.urgency-urgent i { background: #e39a2c; }
.urgency-critical { color: var(--red); }
.urgency-critical i { background: var(--red); }
.status { padding: 5px 8px; border-radius: 3px; }
.status-pending { background: var(--amber-soft); color: #996008; }
.status-processing { background: var(--blue-soft); color: var(--blue); }
.status-completed { background: var(--green-soft); color: var(--green); }
.status-disabled { background: #edf0ee; color: #727d77; }
.date-cell { color: #87928c; white-space: nowrap; }
.row-open { width: 30px; height: 30px; }
.row-actions { display: flex; align-items: center; gap: 3px; }
.danger-button:hover { color: var(--red); background: var(--red-soft); }
.username-text { color: #33413b; font-size: 12px; }
.user-table { min-width: 760px; }
.user-table-wrap { min-height: 320px; }
.loading-row td { text-align: center; color: var(--muted); height: 180px; }
.empty-state { position: absolute; inset: 43px 0 0; display: grid; align-content: center; justify-items: center; color: #8a9590; }
.empty-state .lucide { width: 31px; height: 31px; margin-bottom: 10px; }
.empty-state h3 { margin: 0; font-size: 14px; color: #52605a; }
.empty-state p { margin: 5px 0 0; font-size: 11px; }
.list-footer { min-height: 45px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #919b96; font-size: 10px; }

.drawer-overlay { z-index: 30; }
.detail-drawer { position: fixed; z-index: 31; top: 0; right: 0; width: min(590px, 100%); height: 100vh; background: white; box-shadow: -20px 0 50px rgba(17,42,32,.16); transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; }
.detail-drawer.open { transform: translateX(0); }
.detail-drawer > header { min-height: 94px; padding: 23px 26px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); }
.detail-drawer h2 { margin: 0; max-width: 460px; font-size: 19px; line-height: 1.45; }
.drawer-body { flex: 1; overflow-y: auto; padding: 23px 26px; }
.detail-meta { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: #8d9792; font-size: 11px; }
.detail-section { padding: 23px 0; border-bottom: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 16px; font-size: 13px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.detail-item { display: flex; gap: 10px; align-items: flex-start; }
.detail-item > .lucide { width: 16px; margin-top: 2px; color: #819089; }
.detail-item > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detail-item span, .detail-description > div > span { color: #8c9691; font-size: 10px; }
.detail-item strong { font-size: 12px; word-break: break-word; }
.detail-description > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.detail-description p { margin: 0; padding: 15px; background: #f6f8f7; border-radius: 4px; color: #46534d; font-size: 13px; line-height: 1.8; word-break: break-word; }
.drawer-footer { padding: 20px 26px 25px; display: grid; grid-template-columns: 150px 1fr; gap: 15px; border-top: 1px solid var(--line); background: #fbfcfb; }
.drawer-footer .field:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.drawer-footer .admin-notes-field { grid-column: 1 / -1; grid-row: 3; }
.drawer-footer textarea { min-height: 95px; }
.drawer-footer .form-message { grid-column: 1; align-self: end; }
.drawer-footer .primary-button { grid-column: 1; width: 100%; align-self: end; }

.user-modal-overlay { z-index: 40; }
.user-dialog { width: min(500px, 100%); background: white; border-radius: 7px; box-shadow: var(--shadow); text-align: left; }
.user-dialog > header { padding: 22px 25px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); }
.user-dialog h2 { margin: 0; font-size: 21px; }
.user-dialog form { padding: 24px 25px 26px; display: grid; gap: 18px; }
.field span small { color: var(--muted); font-size: 11px; font-weight: 400; }
.switch-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.switch-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.switch-row strong { color: #3f4d47; font-size: 13px; }
.switch-row small { color: var(--muted); font-size: 11px; }
.switch-row input { position: absolute; opacity: 0; }
.switch { width: 38px; height: 22px; padding: 3px; border-radius: 11px; background: #bec7c2; transition: background .15s; }
.switch::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .15s; }
.switch-row input:checked + .switch { background: var(--green); }
.switch-row input:checked + .switch::after { transform: translateX(16px); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.dialog-actions .secondary-button { height: 43px; }
.dialog-actions .primary-button { height: 43px; }

@media (max-width: 1050px) {
  .intake-shell { grid-template-columns: 340px minmax(0, 1fr); }
  .intro-panel { padding-left: 38px; padding-right: 38px; }
  .form-panel { padding-left: 42px; padding-right: 42px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .site-header { height: 64px; }
  .brand small, .admin-link span { display: none; }
  .intake-shell { min-height: auto; display: block; }
  .intro-panel { min-height: auto; padding: 43px 24px 35px; }
  .intro-copy h1 { font-size: 37px; }
  .intro-text { font-size: 14px; }
  .process-list { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .process-item { display: block; }
  .process-item > span { margin-bottom: 9px; }
  .process-item small { display: none; }
  .process-line { display: none; }
  .privacy-note { display: none; }
  .form-panel { padding: 34px 20px 46px; }
  .form-heading { margin-bottom: 27px; }
  .form-heading h2 { font-size: 23px; }
  .field-row { grid-template-columns: 1fr; gap: 21px; }
  .success-dialog { padding: 34px 24px; }
  .tracking-page { min-height: calc(100vh - 64px); padding: 35px 18px 45px; }
  .tracking-heading h1 { font-size: 29px; }
  .tracking-input { grid-template-columns: 35px 1fr; }
  .tracking-input .primary-button { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
  .tracking-result { padding: 23px 19px; }
  .tracking-timeline { grid-template-columns: 1fr; gap: 0; padding-left: 5px; }
  .tracking-step small { max-width: none; }
  .tracking-line { width: 1px; height: 24px; margin: 5px 0 5px 15px; }

  .dashboard { display: block; }
  .sidebar { position: static; width: 100%; height: 65px; padding: 0 18px; flex-direction: row; align-items: center; justify-content: space-between; }
  .sidebar .brand { border: 0; padding: 0; }
  .sidebar .brand small, .sidebar-foot > div:not(.admin-avatar) { display: none; }
  .sidebar nav { display: flex; gap: 5px; margin: 0 0 0 auto; }
  .sidebar .nav-item { width: 39px; height: 39px; padding: 0; justify-content: center; margin: 0; }
  .sidebar .nav-item span { display: none; }
  .sidebar .nav-item.active::before { display: none; }
  .sidebar-foot { width: auto; margin: 0; padding: 0; border: 0; display: flex; }
  .admin-avatar { display: none; }
  .dashboard-main { padding: 25px 16px 40px; }
  .dashboard-header { align-items: flex-end; }
  .dashboard-header h1 { font-size: 23px; }
  .dashboard-header > div > p:not(.breadcrumb) { display: none; }
  .secondary-button { width: 38px; padding: 0; }
  .secondary-button { font-size: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stats-grid article { height: 79px; padding: 13px; gap: 10px; }
  .stat-icon { width: 35px; height: 35px; }
  .stats-grid strong { font-size: 21px; }
  .list-toolbar { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .filter-group { display: grid; grid-template-columns: 1fr 1fr 38px; }
  .select-wrap.compact select { width: 100%; min-width: 0; }
  .list-footer span:last-child { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .drawer-footer { grid-template-columns: 1fr; }
  .drawer-footer .field:nth-child(2), .drawer-footer .admin-notes-field, .drawer-footer .form-message, .drawer-footer .primary-button { grid-column: 1; grid-row: auto; }
}

@media (max-width: 420px) {
  .stats-grid article { align-items: flex-start; }
  .stat-icon { display: none; }
  .segmented span { font-size: 11px; }
  .login-view { padding-left: 14px; padding-right: 14px; }
  .login-view > .brand { left: 20px; }
  .login-box { padding: 31px 23px; }
  .user-nav button { width: 36px; padding: 0; justify-content: center; }
  .user-nav button span { display: none; }
  .success-actions { grid-template-columns: 1fr; }
}