:root {
  --ink: #171717;
  --muted: #707070;
  --line: #dedede;
  --paper: #fff;
  --canvas: #f5f5f5;
  --teal: #181818;
  --teal-dark: #000;
  --teal-pale: #ededed;
  --coral: #303030;
  --amber: #555;
  --blue: #414141;
  --green: #292929;
  --danger: #b3261e;
  --shadow: 0 14px 38px rgba(0, 0, 0, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Noto Sans TC", sans-serif; font-size: 14px; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hidden { display: none !important; }
.eyebrow { color: var(--teal); font: 700 11px/1.2 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.light { color: #bdbdbd; }
.subtle { color: var(--muted); }
.text-button { padding: 0; color: var(--teal); border: 0; background: none; font-weight: 600; }
.primary-button, .secondary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px;
  border-radius: 9px; border: 1px solid var(--teal); font-weight: 700; transition: .2s ease;
}
.primary-button { color: #fff; background: var(--teal); box-shadow: 0 7px 16px rgba(0, 0, 0, .15); }
.primary-button:hover { background: var(--teal-dark); transform: translateY(-1px); }
.secondary-button { color: var(--teal); background: #fff; border-color: #b8ccc8; }
.secondary-button:hover { background: var(--teal-pale); border-color: var(--teal); }
.primary-button svg, .secondary-button svg { width: 17px; height: 17px; }
.primary-button.full { width: 100%; min-height: 50px; }
.secondary-button.compact { min-height: 40px; padding: 0 14px; font-size: 13px; }
.icon-button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); }

/* Login */
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 53% 47%; background: #fff; }
.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 54px 7vw; color: #fff; background: linear-gradient(145deg, #050505 0%, #191919 62%, #303030 100%); }
.login-brand::before { content: ""; position: absolute; inset: auto -12% -30% 20%; height: 70%; background: radial-gradient(circle, rgba(255,255,255,.09), transparent 65%); }
.brand { display: flex; align-items: center; gap: 13px; font-size: 20px; font-weight: 700; letter-spacing: .08em; }
.brand-logo { display: block; width: 132px; height: 100px; object-fit: contain; object-position: center; }
.brand-service-name { max-width: 94px; font-size: 13px; line-height: 1.5; letter-spacing: .08em; }
.brand-light { position: relative; z-index: 2; color: #fff; }
.brand-light .brand-logo { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.brand-light .brand-service-name { max-width: 150px; font-size: 18px; font-weight: 700; }
.login-copy { position: relative; z-index: 2; max-width: 590px; margin-top: auto; margin-bottom: auto; }
.login-copy h1 { margin: 18px 0 22px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.38; letter-spacing: -.025em; white-space: nowrap; }
.login-copy p { max-width: 530px; color: #d1d1d1; font-size: 17px; line-height: 1.9; }
.login-flow { position: relative; z-index: 2; display: flex; gap: 55px; }
.login-flow div { display: grid; gap: 5px; }
.login-flow strong { color: #aaa; font: 700 12px "Space Grotesk", sans-serif; letter-spacing: .12em; }
.login-flow span { font-size: 15px; font-weight: 600; }
.login-orbit { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.orbit-a { width: 420px; height: 420px; right: -160px; top: -100px; }
.orbit-b { width: 650px; height: 650px; right: -275px; top: -220px; }
.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; }
.login-box { width: min(410px, 100%); }
.mobile-brand { display: none; }
.mobile-brand .brand-logo { width: 132px; height: 100px; }
.mobile-brand .brand-service-name { max-width: 130px; font-size: 16px; }
.login-box h2 { margin: 13px 0 7px; font-size: 34px; letter-spacing: -.03em; }
.login-box form { display: grid; gap: 20px; margin-top: 34px; }
.field { position: relative; display: grid; gap: 9px; color: #333; font-weight: 600; }
.field > span:first-child b, .page-heading p b, .consent b { color: var(--coral); }
.field input, .field select, .field textarea, .filter-row select {
  width: 100%; color: var(--ink); background: #fff; border: 1px solid #ccc; border-radius: 8px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input, .field select { height: 48px; padding: 0 14px; }
.field textarea { min-height: 96px; padding: 13px 14px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus, .filter-row select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,0,0,.1); }
.field > small { color: var(--muted); font-weight: 400; }
.input-wrap { position: relative; display: block; }
.input-wrap > svg { position: absolute; left: 15px; top: 14px; color: #7d8d8a; width: 19px; }
.input-wrap input { padding-left: 45px; }
.password-toggle { position: absolute; right: 14px; top: 14px; color: var(--muted); }
.password-toggle svg { width: 19px; }
.login-options { display: flex; justify-content: space-between; align-items: center; }
.check-label { display: flex; align-items: flex-start; gap: 9px; color: #526663; cursor: pointer; line-height: 1.5; }
.check-label input { margin: 4px 0 0; accent-color: var(--teal); }
.login-help { margin: 23px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.login-help a { color: var(--teal); font-weight: 700; }
.join-entry-button { width: 100%; margin-top: 14px; min-height: 43px; color: #111; background: #f2f2f2; border: 1px solid #d6d6d6; border-radius: 9px; font-weight: 700; }
.join-entry-button:hover { background: #e8e8e8; }
.demo-button { width: 100%; margin-top: 14px; padding: 10px; color: var(--teal); border: 0; background: transparent; font-weight: 700; }
.copyright { margin: 18px 0 0; color: #9ba8a6; font-size: 11px; text-align: center; }

/* Shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 226px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 226px; padding: 27px 17px 20px; background: #fff; border-right: 1px solid var(--line); }
.sidebar .brand { padding: 0 6px 26px; }
.sidebar .brand-logo { width: 112px; height: 86px; }
.sidebar .brand-service-name { font-size: 12px; }
.main-nav { display: grid; gap: 4px; margin-top: 10px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 46px; padding: 0 13px; color: #696969; background: transparent; border: 0; border-radius: 8px; font-weight: 600; text-align: left; transition: .18s; }
.nav-item:hover { color: var(--teal); background: #f2f2f2; }
.nav-item.active { color: var(--teal); background: var(--teal-pale); }
.nav-item.active::before { content: ""; position: absolute; left: -17px; width: 3px; height: 25px; background: var(--teal); border-radius: 0 3px 3px 0; }
.nav-item svg { width: 19px; height: 19px; }
.onboarding-nav { align-items: flex-start; min-height: 62px; padding-top: 11px; padding-bottom: 11px; line-height: 1.45; }
.nav-badge { margin-left: auto; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; color: #fff; background: var(--coral); border-radius: 20px; font-size: 11px; }
.sidebar-bottom { display: grid; gap: 15px; margin-top: auto; }
.support-card { display: grid; gap: 5px; padding: 17px; background: #f3f3f3; border: 1px solid var(--line); border-radius: 11px; }
.support-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 5px; color: var(--teal); background: #dedede; border-radius: 8px; }
.support-card span:not(.support-icon) { color: var(--muted); font-size: 10px; }
.support-card a { color: var(--teal); font: 700 14px "Space Grotesk", sans-serif; letter-spacing: .02em; }
.main { min-width: 0; grid-column: 2; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; height: 76px; padding: 0 34px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.menu-toggle { display: none; }
.search { position: relative; width: min(430px, 45vw); }
.search svg { position: absolute; left: 14px; top: 10px; color: #83918e; width: 18px; }
.search input { width: 100%; height: 40px; padding: 0 55px 0 43px; color: var(--ink); background: #f5f7f7; border: 1px solid transparent; border-radius: 8px; outline: none; }
.search input:focus { background: #fff; border-color: #bcd0cc; }
.search kbd { position: absolute; right: 10px; top: 9px; padding: 3px 6px; color: #82908d; background: #fff; border: 1px solid #dce3e1; border-radius: 4px; font: 10px sans-serif; }
.top-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.notification { width: 37px; height: 37px; color: #516663; background: #f3f6f5; border-radius: 50%; }
.notification span { position: absolute; width: 7px; height: 7px; margin: -17px -17px 0 0; background: var(--coral); border: 2px solid #fff; border-radius: 50%; }
.user { display: flex; align-items: center; gap: 10px; padding-left: 20px; border-left: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; background: #111; border-radius: 50%; font-size: 13px; font-weight: 700; }
.user-copy { display: grid; gap: 2px; }
.user-copy strong { font-size: 13px; }
.user-copy small { color: var(--muted); font-size: 10px; }
.logout-button { margin-left: 5px; padding: 5px 8px; color: var(--muted); background: none; border: 0; font-size: 11px; }
.role-switch { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; color: #fff; background: #181818; border: 1px solid #181818; border-radius: 7px; font-size: 11px; font-weight: 700; }
.role-switch svg { width: 15px; }
.role-switch:hover { background: #3a3a3a; }
.content { max-width: 1500px; min-height: calc(100vh - 76px); margin: 0 auto; padding: 35px 3vw 55px; }
.view { display: none; animation: rise .32s ease both; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.welcome-row, .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.welcome-row h1, .page-heading h1 { margin: 6px 0 5px; font-size: 30px; letter-spacing: -.035em; }
.welcome-row p, .page-heading p { margin: 0; color: var(--muted); }
.back-link { margin-bottom: 12px; padding: 0; color: var(--muted); background: none; border: 0; font-size: 12px; }

/* Dashboard */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 14px; min-height: 139px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 15px rgba(24,49,47,.025); }
.stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--teal); opacity: .75; }
.stat-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; }
.stat-icon.teal { color: var(--teal); background: var(--teal-pale); }
.stat-icon.amber { color: var(--amber); background: #f8eddb; }
.stat-icon.blue { color: var(--blue); background: #e7eff4; }
.stat-icon.green { color: var(--green); background: #e7f2eb; }
.stat-card > div { display: grid; }
.stat-card div > span { color: var(--muted); font-size: 12px; }
.stat-card strong { margin: 3px 0 2px; font: 700 30px "Space Grotesk", sans-serif; }
.stat-card small { color: #899693; font-size: 10px; }
.stat-card small b { color: var(--green); }
.mini-chart { position: absolute; right: 14px; bottom: 17px; width: 56px; height: 25px; opacity: .6; clip-path: polygon(0 80%, 17% 55%, 32% 72%, 50% 30%, 68% 48%, 83% 12%, 100% 25%, 100% 100%, 0 100%); }
.chart-a { background: #8cc6bd; }.chart-b { background: #e0b66e; }.chart-c { background: #86adc4; }.chart-d { background: #83b99c; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-top: 20px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 15px rgba(24,49,47,.025); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 23px 18px; }
.panel-heading h2 { margin: 0 0 3px; font-size: 17px; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.arrow-link { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.arrow-link svg { width: 15px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 10px 19px; color: #86928f; background: #f7f9f8; border-top: 1px solid #e8eeec; border-bottom: 1px solid #e8eeec; font-size: 10px; font-weight: 500; text-align: left; letter-spacing: .04em; }
td { padding: 15px 19px; border-bottom: 1px solid #edf1f0; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdfc; }
td > strong { color: var(--teal); font: 700 11px "Space Grotesk", sans-serif; }
td > b { display: block; margin-bottom: 2px; font-size: 11px; }
td > small { color: var(--muted); font: 10px "Space Grotesk", sans-serif; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 20px; font-size: 10px; font-weight: 600; }
.status::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.waiting { color: #a66f19; background: #fcf1df; }.processing { color: #396f91; background: #e8f1f7; }.need-info { color: #b35642; background: #fae9e5; }.done { color: #3f7c5c; background: #e5f2ea; }
.row-arrow { color: #7e8f8c; background: none; border: 0; }
.row-arrow svg { width: 15px; }
.detail-button { min-width: 48px; padding: 6px 10px; color: #222; background: #fff; border: 1px solid #bbb; border-radius: 6px; font-size: 11px; font-weight: 700; }
.detail-button:hover { color: #fff; background: #222; border-color: #222; }
.detail-button.supplement-needed { color: #fff; background: #222; border-color: #222; }
.detail-button.supplement-needed:hover { background: #555; }
.cases-panel th { font-size: 12px; }
.cases-panel .panel-heading h2 { font-size: 20px; }
.cases-panel .panel-heading p { font-size: 13px; }
.cases-panel .arrow-link { font-size: 14px; }
.cases-panel td { font-size: 15px; line-height: 1.55; }
.cases-panel td > strong,
.cases-panel td > b { font-size: 15px; }
.cases-panel td > small { font-size: 13px; line-height: 1.45; }
.cases-panel .status { font-size: 13px; }
.cases-panel .detail-button { min-height: 38px; padding: 0 14px; font-size: 14px; }
.action-panel { padding-bottom: 18px; }
.quick-action { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); min-height: 58px; margin: 0 16px 10px; padding: 10px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; text-align: left; }
.quick-action:hover { border-color: #afc9c4; transform: translateY(-1px); }
.quick-action > span:first-child { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; color: var(--teal); background: var(--teal-pale); border-radius: 8px; }
.quick-action.featured { color: #fff; background: var(--teal); border-color: var(--teal); }
.quick-action.featured > span:first-child { color: #fff; background: rgba(255,255,255,.15); }
.quick-action div { display: grid; gap: 3px; }
.quick-action strong { font-size: 12px; }
.quick-action small { color: var(--muted); font-size: 9px; }
.quick-action.featured small { color: #c3deda; }
.quick-arrow { width: 15px; margin-left: auto; color: #82918e; }
.quick-action.featured .quick-arrow { color: #fff; }
.notice-card { margin: 18px 16px 0; padding: 16px; background: #fbf6ec; border-left: 3px solid #d2a254; border-radius: 4px 9px 9px 4px; }
.notice-card > span { color: #b17824; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.notice-card strong { display: block; margin: 6px 0; font-size: 12px; }
.notice-card p { margin: 0 0 8px; color: #7d796f; font-size: 10px; line-height: 1.6; }
.notice-card .text-button { color: #9c6a20; font-size: 10px; }
.sidebar-notice-card {
  margin: 0;
  padding: 18px;
}
.sidebar-notice-card > span { font-size: 11px; }
.sidebar-notice-card strong {
  margin: 8px 0;
  font-size: 17px;
  line-height: 1.45;
}
.sidebar-notice-card p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.75;
}
.sidebar-notice-card .text-button { font-size: 13px; }
.action-support-card { margin: 18px 16px 0; }
.guide-panel { display: block; }
.guide-drive-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 32px);
  margin: 0 16px;
  padding: 18px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .05);
}
.guide-drive-card:hover { border-color: #888; transform: translateY(-1px); }
.guide-drive-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: #fff;
  background: #171717;
  border-radius: 13px;
}
.guide-drive-icon svg { width: 24px; height: 24px; }
.guide-drive-card div { display: grid; gap: 7px; }
.guide-drive-card strong { font-size: 16px; line-height: 1.35; }
.guide-drive-card p { margin: 0; color: #555; font-size: 13px; line-height: 1.7; }
.guide-drive-card small { color: #777; font-size: 12px; font-weight: 700; }
.guide-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  margin: 0 16px;
  padding-right: 4px;
  overflow-y: auto;
}
.guide-list::-webkit-scrollbar { width: 5px; }
.guide-list::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 999px; }
.guide-category {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
}
.guide-category[open] { border-color: #999; box-shadow: 0 10px 22px rgba(0, 0, 0, .06); }
.guide-category > summary {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 2px 12px;
  align-items: center;
  padding: 15px 38px 15px 14px;
  list-style: none;
  cursor: pointer;
}
.guide-category > summary::-webkit-details-marker { display: none; }
.guide-category > summary::after {
  content: "查看";
  position: absolute;
  right: 13px;
  top: 50%;
  color: #777;
  font-size: 10px;
  font-weight: 700;
  transform: translateY(-50%);
}
.guide-category[open] > summary::after { content: "收合"; }
.guide-category > summary span {
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  color: #fff;
  background: #171717;
  border-radius: 10px;
  font: 700 12px "Space Grotesk", sans-serif;
}
.guide-category > summary strong { font-size: 14px; }
.guide-category > summary small { color: var(--muted); font-size: 10px; }
.guide-category-body {
  display: grid;
  gap: 8px;
  padding: 0 10px 12px;
}
.guide-item {
  overflow: hidden;
  background: #f8f8f8;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.guide-item[open] { border-color: #a7a7a7; box-shadow: 0 8px 18px rgba(0, 0, 0, .05); }
.guide-item summary {
  display: block;
  padding: 12px 13px;
  list-style: none;
  cursor: pointer;
}
.guide-item summary::-webkit-details-marker { display: none; }
.guide-item summary::after {
  content: "+";
  position: absolute;
  right: 13px;
  top: 12px;
  color: #888;
  font-weight: 700;
}
.guide-item[open] summary::after { content: "-"; }
.guide-item summary { position: relative; padding-right: 32px; }
.guide-item summary strong { font-size: 12px; line-height: 1.5; }
.guide-item p,
.guide-item ol {
  margin: 0 13px 13px;
  color: #5f5f5f;
  font-size: 11px;
  line-height: 1.75;
}
.guide-item ol { padding-left: 18px; }
.guide-item li + li { margin-top: 5px; }

/* Form */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 22px; padding: 0; list-style: none; }
.stepper li { position: relative; display: flex; align-items: center; gap: 10px; color: #8a9895; }
.stepper li::after { content: ""; position: absolute; top: 17px; left: 46px; right: 12px; height: 1px; background: #d5dfdc; }
.stepper li:last-child::after { display: none; }
.stepper li > span { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; background: #fff; border: 1px solid #cbd8d5; border-radius: 50%; font: 700 12px "Space Grotesk", sans-serif; }
.stepper li > div { position: relative; z-index: 2; display: grid; padding-right: 13px; background: var(--canvas); }
.stepper strong { font-size: 12px; }
.stepper small { font-size: 9px; }
.stepper li.active, .stepper li.completed { color: var(--teal); }
.stepper li.active > span { color: #fff; background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-pale); }
.stepper li.completed > span { color: #fff; background: #5b9c90; border-color: #5b9c90; }
.stepper li.completed::after { background: #6ea99e; }
.form-step { display: none; }
.form-step.active { display: block; animation: rise .28s ease; }
.form-card { padding: 27px 30px 30px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.form-card-heading { display: flex; align-items: flex-start; gap: 15px; padding-bottom: 23px; border-bottom: 1px solid #e8eeec; }
.section-number { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; color: var(--teal); background: var(--teal-pale); border-radius: 9px; font: 700 11px "Space Grotesk", sans-serif; }
.form-card-heading h2 { margin: 0 0 4px; font-size: 18px; }
.form-card-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px 26px; max-width: 980px; margin-top: 25px; }
.vehicle-grid { align-items: start; max-width: none; }
.vehicle-grid .field > span:first-child { font-size: 14px; }
.vehicle-grid .field input, .vehicle-grid .field select { height: 54px; font-size: 14px; font-weight: 600; }
.full-span { grid-column: 1 / -1; }
.char-count { position: absolute; right: 12px; bottom: 10px; color: var(--muted); font-size: 10px; font-weight: 400; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.error { display: none; color: var(--danger) !important; font-size: 10px; }
.field.invalid .error, .error.show { display: block; }
.info-strip, .warning-strip { display: flex; align-items: flex-start; gap: 10px; margin-top: 25px; padding: 13px 15px; color: #526b67; background: #eef6f4; border-radius: 8px; font-size: 11px; line-height: 1.6; }
.info-strip svg, .warning-strip svg { flex: 0 0 auto; width: 17px; color: var(--teal); }
.inline-link { padding: 0; color: var(--teal); background: none; border: 0; font-weight: 700; text-decoration: underline; }
.upload-section { margin-top: 27px; padding-top: 23px; border-top: 1px solid #e8eeec; }
.upload-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.upload-heading h3 { margin: 0 0 4px; font-size: 14px; }
.upload-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.upload-heading > span { color: var(--muted); font-size: 10px; }
.drop-zone { display: grid; place-items: center; min-height: 160px; padding: 25px; color: #617571; background: #fbfdfc; border: 1.5px dashed #abc4bf; border-radius: 10px; cursor: pointer; text-align: center; }
.drop-zone.dragging { background: var(--teal-pale); border-color: var(--teal); }
.drop-zone strong { margin: 10px 0 5px; font-size: 12px; }
.drop-zone u { color: var(--teal); }
.drop-zone small { color: var(--muted); font-size: 9px; }
.upload-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--teal); background: var(--teal-pale); border-radius: 50%; }
.file-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.file-chip { position: relative; overflow: hidden; display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 7px; background: #f6f9f8; border: 1px solid var(--line); border-radius: 8px; }
.file-visual { position: relative; overflow: hidden; display: grid; place-items: center; width: 86px; height: 64px; color: #fff; background: #222; border-radius: 6px; }
.file-visual img, .file-visual video { width: 100%; height: 100%; object-fit: cover; }
.video-label { position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; color: #fff; background: rgba(0,0,0,.7); border-radius: 3px; font-size: 8px; }
.file-meta { min-width: 0; }
.file-chip svg { flex: 0 0 auto; width: 17px; color: var(--teal); }
.file-chip span { min-width: 0; }
.file-chip strong, .file-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip strong { font-size: 10px; }.file-chip small { color: var(--muted); font-size: 8px; }
.file-chip button { margin-left: auto; padding: 3px; color: var(--muted); background: none; border: 0; }
.file-chip button svg { width: 13px; }
.parts-toolbar, .filter-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 24px; }
.parts-reference-copy { display: flex; align-items: center; gap: 12px; color: #333; }
.parts-reference-copy > svg { width: 28px; height: 28px; }
.parts-reference-copy > span { display: grid; gap: 3px; }
.parts-reference-copy strong { font-size: 12px; }
.parts-reference-copy small { color: var(--muted); font-size: 10px; }
.part-search { position: relative; width: min(430px, 100%); }
.part-search svg { position: absolute; left: 13px; top: 11px; width: 17px; color: #7f8f8c; }
.part-search input { width: 100%; height: 40px; padding: 0 13px 0 40px; color: var(--ink); background: #fff; border: 1px solid #cedbd8; border-radius: 8px; outline: none; }
.parts-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }
.part-option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 75px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: .18s; }
.part-option:hover { border-color: #a6c4be; }
.part-option:has(input:checked) { background: #f2f9f7; border-color: var(--teal); }
.part-option > input { position: absolute; opacity: 0; }
.part-check { display: grid; place-items: center; flex: 0 0 auto; width: 19px; height: 19px; color: transparent; background: #fff; border: 1px solid #b9c9c6; border-radius: 5px; }
.part-check svg { width: 13px; }
.part-option input:checked + .part-check { color: #fff; background: var(--teal); border-color: var(--teal); }
.part-thumb { display: grid; place-items: center; flex: 0 0 auto; width: 45px; height: 45px; color: #617975; background: #edf2f1; border-radius: 8px; }
.part-option > span:nth-of-type(3) { display: grid; min-width: 0; }
.part-option strong { font-size: 12px; }
.part-option small { color: var(--muted); font: 9px "Space Grotesk", sans-serif; }
.part-option > b { margin-left: auto; color: var(--teal); background: var(--teal-pale); border-radius: 20px; padding: 4px 7px; font-size: 8px; }
.top-gap { margin-top: 22px; }
.warning-strip { color: #776542; background: #fbf4e7; }
.warning-strip svg { color: #b8862f; }
.review-content { display: grid; gap: 13px; margin-top: 23px; }
.review-section { padding: 18px; background: #f8faf9; border: 1px solid #e5ecea; border-radius: 9px; }
.review-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.review-section-heading strong { font-size: 13px; }
.review-section-heading button { font-size: 10px; }
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 24px; }
.review-item { display: grid; gap: 3px; }
.review-item span { color: var(--muted); font-size: 9px; }
.review-item strong { font-size: 11px; line-height: 1.55; }
.dealer-confirm { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding: 17px 18px; border: 1px solid #cfe0dc; border-radius: 9px; }
.dealer-confirm > div { display: grid; gap: 2px; }
.dealer-confirm span { color: var(--muted); font-size: 9px; }
.dealer-confirm strong { font-size: 12px; }
.dealer-confirm small { color: var(--muted); font-size: 9px; }
.dealer-confirm .verified { display: flex; align-items: center; gap: 5px; padding: 5px 9px; color: var(--green); background: #e7f2eb; border-radius: 20px; }
.verified svg { width: 13px; }
.consent { margin-top: 20px; font-size: 11px; }
.standalone { margin: 5px 0 0 23px; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 17px; }
.action-spacer { flex: 1; }
.auto-save { display: flex; align-items: center; gap: 7px; margin-right: 7px; color: var(--muted); font-size: 9px; }
.auto-save i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }

/* Supporting views */
.success-view { max-width: 820px; margin: 30px auto; text-align: center; }
.success-card { padding: 47px 50px 42px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.success-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 21px; color: #fff; background: var(--teal); border: 8px solid var(--teal-pale); border-radius: 50%; }
.success-mark svg { width: 25px; }
.success-card h1 { margin: 12px 0 8px; font-size: 28px; }
.success-card > p { max-width: 570px; margin: 0 auto; color: var(--muted); line-height: 1.8; }
.case-number { display: inline-flex; align-items: center; gap: 15px; margin: 26px auto 30px; padding: 12px 17px; background: #f2f7f6; border-radius: 8px; }
.case-number span { color: var(--muted); font-size: 10px; }
.case-number strong { color: var(--teal); font: 700 15px "Space Grotesk", sans-serif; letter-spacing: .04em; }
.case-number button { font-size: 10px; }
.success-timeline { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 32px; }
.success-timeline div { position: relative; display: grid; justify-items: center; gap: 5px; }
.success-timeline div::after { content: ""; position: absolute; top: 16px; left: 60%; right: -40%; height: 1px; background: #d9e2df; }
.success-timeline div:last-child::after { display: none; }
.success-timeline div > span { position: relative; z-index: 1; display: grid; place-items: center; width: 33px; height: 33px; color: #899793; background: #fff; border: 1px solid #cad6d3; border-radius: 50%; font: 700 10px "Space Grotesk", sans-serif; }
.success-timeline .done > span { color: #fff; background: var(--teal); border-color: var(--teal); }
.success-timeline svg { width: 15px; }
.success-timeline strong { font-size: 11px; }.success-timeline small { color: var(--muted); font-size: 8px; }
.success-actions { display: flex; justify-content: center; gap: 10px; }
.followup-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 10px; }
.followup-note svg { width: 15px; color: var(--teal); }
.full-panel { overflow: hidden; }
.filter-row { margin: 0; padding: 19px 22px; }
.filter-row select { width: 150px; height: 40px; padding: 0 10px; }
.parts-hero { display: flex; align-items: center; justify-content: space-between; padding: 32px; color: #fff; background: linear-gradient(120deg, var(--teal-dark), var(--teal)); }
.parts-hero span { color: #9dd0c9; font-size: 10px; font-weight: 700; }
.parts-hero h2 { margin: 7px 0 5px; font-size: 23px; }.parts-hero p { margin: 0; color: #cbe1de; }
.parts-hero-icon { display: grid; place-items: center; width: 80px; height: 80px; color: #fff !important; background: rgba(255,255,255,.1); border-radius: 18px; transform: rotate(5deg); }
.parts-hero-icon svg { width: 39px; height: 39px; }
.parts-catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 25px; }
.parts-catalog article { display: flex; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 9px; }
.catalog-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--teal); background: var(--teal-pale); border-radius: 9px; }
.parts-catalog article div { display: grid; }.parts-catalog strong { font-size: 12px; }.parts-catalog small { color: var(--muted); font-size: 9px; }.parts-catalog b { margin-left: auto; color: var(--teal); font-size: 11px; }
.vehicle-parts-library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 25px; }
.vehicle-parts-card { display: grid; grid-template-columns: 52px 1fr; gap: 13px; align-items: center; min-height: 180px; padding: 20px; border: 1px solid #d4d4d4; border-radius: 10px; }
.vehicle-parts-card .vehicle-code { display: grid; place-items: center; width: 52px; height: 52px; color: #fff; background: #111; border-radius: 9px; font: 700 23px "Space Grotesk", sans-serif; }
.vehicle-parts-card > div > span { color: #888; font-size: 9px; }
.vehicle-parts-card h2 { margin: 3px 0; font-size: 16px; }
.vehicle-parts-card p { margin: 0; color: #777; font-size: 10px; }
.vehicle-parts-card .primary-button, .parts-pending-label { grid-column: 1 / -1; }
.vehicle-parts-card .primary-button { width: 100%; }
.vehicle-parts-card.pending { background: #f7f7f7; }
.parts-pending-label { padding: 11px; color: #777; background: #e7e7e7; border-radius: 7px; font-size: 10px; font-weight: 700; text-align: center; }
.cloud-library-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 25px 0; padding: 22px; background: #f1f1f1; border: 1px solid #d7d7d7; border-radius: 10px; }
.cloud-library-card h2 { margin: 6px 0; font-size: 18px; }
.cloud-library-card p { max-width: 700px; margin: 0; color: #666; font-size: 12px; line-height: 1.8; }
.cloud-library-card .primary-button { flex: 0 0 auto; }
.build-badge { padding: 8px 13px; color: #fff; background: #171717; border-radius: 999px; font-size: 12px; font-weight: 700; }
.onboarding-panel { padding-bottom: 25px; }
.onboarding-hero p { max-width: 760px; line-height: 1.8; }
.onboarding-section-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 18px 25px 0; }
.onboarding-section-nav a { display: grid; place-items: center; min-height: 42px; padding: 0 12px; color: #222; background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; font-weight: 700; text-align: center; }
.onboarding-section-nav a:hover { border-color: #999; background: #f8f8f8; }
.onboarding-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 25px; }
.onboarding-grid article { position: relative; min-height: 190px; padding: 24px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.onboarding-grid article span { color: #cfcfcf; font: 700 28px "Space Grotesk", sans-serif; }
.onboarding-grid article h2 { margin: 18px 0 9px; font-size: 16px; line-height: 1.45; }
.onboarding-grid article p { margin: 0; color: #666; font-size: 12px; line-height: 1.85; }
.onboarding-note { margin-top: 0; }
.onboarding-action-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 18px 25px 0; }
.onboarding-action-row .primary-button,
.onboarding-action-row .secondary-button { min-height: 58px; justify-content: center; font-size: 14px; }
.repair-resource-row { padding: 14px 0 0; }
.onboarding-section { margin: 22px 25px 0; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.onboarding-section[id] { scroll-margin-top: 20px; }
.onboarding-section-head { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 17px; }
.onboarding-section-head > span { display: grid; place-items: center; flex: 0 0 44px; height: 44px; color: #fff; background: #111; border-radius: 12px; font: 700 16px "Space Grotesk", sans-serif; }
.onboarding-section-head h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.45; }
.onboarding-section-head p { margin: 0; color: #666; font-size: 12px; line-height: 1.75; }
.onboarding-section-head .section-timing { margin-bottom: 6px; color: #333; font-weight: 700; }
.onboarding-grid-three { grid-template-columns: repeat(3, 1fr); padding: 0; }
.onboarding-grid-three article { display: flex; flex-direction: column; min-height: 190px; background: #fafafa; }
.card-bottom-button { width: max-content; margin-top: auto; }
.subsidy-jump { width: max-content; }
.subsidy-lookup { margin-top: 18px; padding: 20px; background: #fafafa; border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 24px; }
.subsidy-lookup-head h3 { margin: 5px 0 6px; font-size: 18px; }
.subsidy-lookup-head p, .subsidy-note { margin: 0; color: #666; font-size: 12px; line-height: 1.75; }
.subsidy-table { display: grid; gap: 8px; margin-top: 16px; }
.subsidy-rows { display: contents; }
.subsidy-row a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.subsidy-row { display: grid; grid-template-columns: 110px minmax(180px, 1fr) minmax(220px, 1.2fr); gap: 12px; align-items: start; padding: 13px 14px; background: #fff; border: 1px solid #e2e2e2; border-radius: 9px; font-size: 12px; line-height: 1.65; }
.subsidy-row-head { color: #fff; background: #111; border-color: #111; font-weight: 700; }
.subsidy-row span:first-child { font-weight: 700; }
.subsidy-note { margin-top: 13px; }
.onboarding-grid-two { grid-template-columns: repeat(2, 1fr); padding: 0; }
.onboarding-grid-two article { min-height: 190px; background: #fafafa; }
.onboarding-grid-two .secondary-button { width: max-content; margin-top: 16px; }
.warranty-table { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.warranty-table div { display: grid; gap: 7px; padding: 17px; border-right: 1px solid var(--line); }
.warranty-table div:last-child { border-right: 0; }
.warranty-table strong { font-size: 14px; }
.warranty-table span { color: #555; font-size: 12px; line-height: 1.65; }
.onboarding-warning { display: flex; align-items: flex-start; gap: 12px; margin-top: 15px; padding: 16px; background: #f1f1f1; border-radius: 10px; }
.onboarding-warning svg { flex: 0 0 auto; width: 22px; height: 22px; color: #111; }
.onboarding-warning p { margin: 0; color: #444; font-size: 12px; line-height: 1.8; }
.onboarding-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.onboarding-flow article { padding: 18px; background: #fafafa; border: 1px solid var(--line); border-radius: 11px; }
.onboarding-flow strong { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: #111; border-radius: 50%; font-family: "Space Grotesk", sans-serif; }
.onboarding-flow h3 { margin: 13px 0 7px; font-size: 14px; }
.onboarding-flow p { margin: 0; color: #666; font-size: 12px; line-height: 1.75; }
.order-portal-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; color: #fff; background: #111; border-radius: 13px; text-decoration: none; }
.order-portal-card span { color: #aaa; font: 700 10px "Space Grotesk", sans-serif; letter-spacing: .1em; }
.order-portal-card h2 { margin: 7px 0; font-size: 21px; }
.order-portal-card p { margin: 0; color: #ddd; font-size: 12px; line-height: 1.75; }
.order-portal-card > svg { flex: 0 0 auto; width: 28px; height: 28px; }
.onboarding-page { min-height: 100vh; background: #f4f4f4; }
.onboarding-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 0 34px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.onboarding-header .brand { color: var(--ink); text-decoration: none; }
.onboarding-main { width: min(1220px, calc(100% - 44px)); margin: 0 auto; padding: 36px 0 54px; }
.onboarding-page .page-heading { align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.onboarding-page .page-heading h1 { margin-top: 8px; font-size: 34px; }
.onboarding-title-lockup { display: flex; align-items: center; justify-content: center; gap: 18px; }
.onboarding-title-lockup img { width: 92px; height: 68px; object-fit: contain; }
.onboarding-title-lockup h1 { margin: 0; }
.video-portal-card { background: #161616; }
.repair-portal-card { margin-top: 14px; background: #202020; }
.uploading-badge { flex: 0 0 auto; padding: 8px 12px; color: #111; background: #fff; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.disabled-link { color: #777; background: #f3f3f3; border-color: #ddd; cursor: default; pointer-events: none; }
.onboarding-order-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 22px 25px 0; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.onboarding-order-cta span { color: #777; font: 700 10px "Space Grotesk", sans-serif; letter-spacing: .12em; }
.onboarding-order-cta h2 { margin: 6px 0; font-size: 20px; }
.onboarding-order-cta p { margin: 0; color: #666; font-size: 12px; line-height: 1.7; }
.onboarding-order-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.guide-card { position: relative; padding: 27px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.guide-card > span { position: absolute; right: 22px; top: 20px; color: #dbe6e3; font: 700 30px "Space Grotesk", sans-serif; }
.guide-card > svg { width: 32px; height: 32px; color: var(--teal); }
.guide-card h2 { margin: 20px 0 8px; font-size: 16px; }.guide-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.contact-panel { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 23px 27px; }
.contact-panel > div { display: flex; align-items: center; gap: 14px; }
.support-icon.large { width: 46px; height: 46px; margin: 0; }
.contact-panel h2 { margin: 0 0 3px; font-size: 15px; }.contact-panel p { margin: 0; color: var(--muted); font-size: 10px; }
.contact-panel > div:last-child { display: grid; justify-items: end; gap: 2px; }
.contact-panel > div:last-child strong { color: var(--teal); font: 700 18px "Space Grotesk", sans-serif; }.contact-panel small { color: var(--muted); font-size: 9px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 25px; padding: 11px 17px; color: #fff; background: #18312f; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(0,0,0,.58); backdrop-filter: blur(3px); }
.case-detail-modal { overflow-y: auto; width: min(760px, 100%); max-height: min(820px, 92vh); background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.notice-detail-modal { overflow: hidden; width: min(620px, 100%); background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.notice-detail-body { display: grid; gap: 14px; padding: 25px 28px 30px; }
.notice-detail-body time { color: var(--muted); font: 10px "Space Grotesk", sans-serif; }
.notice-detail-body p { margin: 0; color: #444; font-size: 13px; line-height: 2; white-space: pre-wrap; }
.join-modal { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.join-form { display: grid; gap: 15px; padding: 24px 28px 0; }
.join-note { margin: 0; padding: 14px; color: #555; background: #f2f2f2; border-radius: 8px; font-size: 11px; line-height: 1.8; }
.join-form .modal-actions { margin: 6px -28px 0; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 28px 20px; border-bottom: 1px solid var(--line); }
.modal-heading h2 { margin: 6px 0 0; font-size: 22px; }
.modal-close { display: grid; place-items: center; width: 36px; height: 36px; color: #555; background: #f1f1f1; border: 0; border-radius: 50%; }
.modal-close:hover { color: #fff; background: #111; }
.modal-close svg { width: 17px; }
.case-detail-content { overflow-y: auto; max-height: calc(92vh - 150px); padding: 24px 28px; }
.case-detail-modal.has-supplement .case-detail-content { max-height: none; overflow: visible; padding-bottom: 16px; }
.case-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding: 17px 19px; background: #f3f3f3; border-radius: 9px; }
.case-detail-summary > div { display: grid; gap: 4px; }
.case-detail-summary span { color: var(--muted); font-size: 10px; }
.case-detail-summary strong { font: 700 16px "Space Grotesk", sans-serif; }
.detail-sections { display: grid; gap: 12px; }
.detail-section { padding: 17px 19px; border: 1px solid var(--line); border-radius: 9px; }
.detail-section h3 { margin: 0 0 14px; font-size: 13px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 24px; }
.detail-item { display: grid; gap: 4px; min-width: 0; }
.detail-item.full { grid-column: 1 / -1; }
.detail-item span { color: var(--muted); font-size: 10px; }
.detail-item strong { font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-attachments { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-file { padding: 7px 10px; color: #444; background: #f2f2f2; border-radius: 6px; font-size: 10px; }
.modal-actions { display: flex; justify-content: flex-end; padding: 16px 28px 22px; border-top: 1px solid var(--line); }
.supplement-panel { display: grid; gap: 14px; margin: 0 28px 22px; padding: 19px; background: #f1f1f1; border: 1px solid #ccc; border-radius: 9px; }
.supplement-panel:not(.hidden) { box-shadow: inset 4px 0 #111; }
.supplement-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.supplement-heading h3 { margin: 5px 0 0; font-size: 15px; }
.supplement-heading > span { max-width: 360px; color: #555; font-size: 10px; line-height: 1.6; text-align: right; }
.supplement-upload { display: flex; align-items: center; gap: 11px; padding: 14px; background: #fff; border: 1px dashed #999; border-radius: 8px; cursor: pointer; }
.supplement-upload > svg { width: 25px; color: #333; }
.supplement-upload > span { display: grid; gap: 2px; }
.supplement-upload strong { font-size: 11px; }
.supplement-upload small { color: var(--muted); font-size: 9px; }
.supplement-file-list { display: flex; flex-wrap: wrap; gap: 7px; }
.supplement-file { display: flex; align-items: center; gap: 6px; max-width: 230px; padding: 7px 9px; background: #fff; border: 1px solid #ddd; border-radius: 6px; font-size: 9px; }
.supplement-file > svg { flex: 0 0 auto; width: 14px; }
.supplement-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplement-file button { display: grid; place-items: center; padding: 0; color: #777; background: none; border: 0; }
.supplement-file button svg { width: 12px; }
.supplement-panel > .primary-button { justify-self: end; }
.case-detail-modal.has-supplement .modal-actions { position: sticky; bottom: 0; background: #fff; }

/* After-sales service workspace */
.service-nav { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 9px; border-radius: 0 0 8px 8px; }
.service-heading { align-items: center; }
.service-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.service-stats article { display: grid; gap: 4px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.service-stats span { color: var(--muted); font-size: 11px; }
.service-stats strong { font: 700 27px "Space Grotesk", sans-serif; }
.service-stats small { color: #929292; font-size: 9px; }
.service-workspace { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 17px; min-height: 720px; }
.service-queue-panel, .service-editor-panel { overflow: hidden; }
.service-queue-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 15px; }
.service-queue-head h2 { margin: 0 0 3px; font-size: 16px; }
.service-queue-head p { margin: 0; color: var(--muted); font-size: 9px; }
.service-queue-head > span { color: var(--muted); font-size: 10px; }
.service-filters { display: grid; grid-template-columns: 1fr 115px; gap: 8px; padding: 0 15px 15px; border-bottom: 1px solid var(--line); }
.service-filters label { position: relative; }
.service-filters svg { position: absolute; left: 11px; top: 10px; width: 16px; color: #777; }
.service-filters input, .service-filters select { width: 100%; height: 37px; padding: 0 10px; color: var(--ink); background: #fff; border: 1px solid #ccc; border-radius: 7px; outline: none; font-size: 10px; }
.service-filters input { padding-left: 34px; }
.service-case-list { overflow-y: auto; max-height: 610px; }
.service-case-card { display: grid; gap: 9px; width: 100%; padding: 16px 18px; color: var(--ink); background: #fff; border: 0; border-bottom: 1px solid #e8e8e8; text-align: left; transition: .18s; }
.service-case-card:hover { background: #f6f6f6; }
.service-case-card.active { background: #ededed; box-shadow: inset 3px 0 #111; }
.service-card-top, .service-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.service-card-indicators, .case-attachment-summary, .case-attachment-summary span { display: flex; align-items: center; }
.service-card-indicators { gap: 7px; }
.case-attachment-summary { gap: 4px; padding: 4px 7px; color: #222; background: #e8e8e8; border-radius: 15px; }
.case-attachment-summary span { gap: 2px; color: #333; font-size: 8px; font-weight: 700; }
.case-attachment-summary svg { width: 12px; height: 12px; }
.service-card-top strong { font: 700 11px "Space Grotesk", sans-serif; }
.priority { padding: 3px 7px; color: #555; background: #eee; border-radius: 15px; font-size: 8px; font-weight: 700; }
.priority.優先 { color: #fff; background: #555; }
.priority.緊急 { color: #fff; background: #111; }
.service-case-card > strong { font-size: 12px; }
.service-case-card > p { overflow: hidden; margin: 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.service-card-bottom span { color: var(--muted); font-size: 9px; }
.service-empty { display: grid; place-items: center; align-content: center; min-height: 650px; padding: 40px; text-align: center; }
.service-empty > span { display: grid; place-items: center; width: 58px; height: 58px; color: #555; background: #eee; border-radius: 50%; }
.service-empty h2 { margin: 18px 0 5px; font-size: 17px; }
.service-empty p { margin: 0; color: var(--muted); font-size: 11px; }
.service-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 25px; border-bottom: 1px solid var(--line); }
.service-editor-head h2 { margin: 6px 0 4px; font-size: 19px; }
.service-editor-head p { margin: 0; color: var(--muted); font-size: 10px; }
.service-editor-body { display: grid; gap: 13px; max-height: 590px; overflow-y: auto; padding: 20px 24px; background: #f7f7f7; }
.service-block { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.service-block h3 { margin: 0 0 15px; font-size: 13px; }
.service-block-title { display: flex; align-items: center; justify-content: space-between; }
.service-block-title .text-button { font-size: 10px; }
.service-report-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 20px; }
.service-summary-item { display: grid; gap: 3px; }
.service-summary-item.full { grid-column: 1 / -1; }
.service-summary-item span { color: var(--muted); font-size: 9px; }
.service-summary-item strong { font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.service-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.service-form-stack { display: grid; gap: 15px; }
.service-form-stack .field span small { color: #999; font-weight: 400; }
.dealer-reply-field { padding: 14px; background: #f4f4f4; border-radius: 8px; }
.service-history { display: grid; gap: 0; }
.history-item { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 11px; padding-bottom: 17px; }
.history-item:last-child { padding-bottom: 0; }
.history-item::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 1px; background: #ddd; }
.history-item:last-child::before { display: none; }
.history-dot { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 2px; background: #222; border: 4px solid #e5e5e5; border-radius: 50%; }
.history-copy { display: grid; gap: 3px; }
.history-copy div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-copy strong { font-size: 10px; }
.history-copy time { color: #999; font-size: 8px; }
.history-copy p { margin: 0; color: #666; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.service-editor-actions { display: flex; align-items: center; gap: 9px; padding: 16px 24px; border-top: 1px solid var(--line); }
.service-editor-actions > span { display: flex; align-items: center; gap: 7px; margin-right: auto; color: var(--muted); font-size: 9px; }
.service-editor-actions > span i { width: 6px; height: 6px; background: #222; border-radius: 50%; }
.service-page { min-height: 100vh; background: #f3f3f3; }
.service-page-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 78px; padding: 0 4vw; color: #fff; background: #111; border-bottom: 1px solid #333; }
.service-page-brand, .service-page-user { display: flex; align-items: center; gap: 13px; }
.service-page-brand img { width: 76px; height: 58px; object-fit: contain; filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.service-page-brand div, .service-page-user div { display: grid; gap: 2px; }
.service-page-brand strong { font-size: 15px; letter-spacing: .05em; }
.service-page-brand small, .service-page-user small { color: #aaa; font: 8px "Space Grotesk", sans-serif; letter-spacing: .12em; }
.service-page-user > span { display: grid; place-items: center; width: 38px; height: 38px; color: #111; background: #fff; border-radius: 50%; font-weight: 700; }
.service-page-user strong { font-size: 12px; }
.service-page-main { max-width: 1500px; margin: 0 auto; padding: 35px 3vw 55px; }
.supplement-summary { padding: 12px; background: #f2f2f2; border-radius: 7px; }
.service-tabs { display: flex; gap: 7px; margin-bottom: 27px; padding: 5px; width: fit-content; background: #e7e7e7; border-radius: 9px; }
.service-tabs button { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; color: #666; background: transparent; border: 0; border-radius: 7px; font-size: 11px; font-weight: 700; }
.service-tabs button.active { color: #fff; background: #181818; }
.service-tabs svg { width: 15px; }
.service-tabs button span { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; color: #181818; background: #fff; border-radius: 10px; font-size: 8px; }
.service-tab-panel { display: none; }
.service-tab-panel.active { display: block; animation: rise .25s ease; }
.notice-admin-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 17px; min-height: 650px; }
.notice-list-panel, .notice-editor-panel { overflow: hidden; }
.notice-admin-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); }
.notice-admin-head h2 { margin: 0 0 3px; font-size: 16px; }
.notice-admin-head p { margin: 0; color: var(--muted); font-size: 9px; }
.notice-admin-head > span { color: var(--muted); font-size: 10px; }
.notice-admin-list { max-height: 610px; overflow-y: auto; }
.notice-admin-item { display: grid; gap: 8px; width: 100%; padding: 17px 19px; color: var(--ink); background: #fff; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.notice-admin-item:hover, .notice-admin-item.active { background: #f0f0f0; }
.notice-admin-item.active { box-shadow: inset 3px 0 #111; }
.notice-admin-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.notice-admin-row strong { font-size: 12px; }
.notice-state { flex: 0 0 auto; padding: 4px 7px; color: #777; background: #e5e5e5; border-radius: 15px; font-size: 8px; font-weight: 700; }
.notice-state.published { color: #fff; background: #222; }
.notice-admin-item p { overflow: hidden; margin: 0; color: #666; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.notice-admin-item small { color: #999; font-size: 8px; }
.notice-editor-empty { display: grid; place-items: center; align-content: center; min-height: 620px; color: var(--muted); text-align: center; }
.notice-editor-empty svg { width: 38px; height: 38px; }
.notice-editor-empty h2 { margin: 16px 0 4px; color: var(--ink); font-size: 17px; }
.notice-editor-empty p { margin: 0; font-size: 10px; }
.notice-form-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 25px; border-bottom: 1px solid var(--line); }
.notice-form-head h2 { margin: 5px 0 0; font-size: 18px; }
.notice-form-head > span { color: var(--muted); font: 10px "Space Grotesk", sans-serif; }
.notice-form-body { display: grid; gap: 18px; padding: 24px; }
.notice-form-actions { display: flex; align-items: center; gap: 9px; padding: 17px 24px; border-top: 1px solid var(--line); }
.notice-form-actions > span { flex: 1; }
.danger-button { min-height: 40px; padding: 0 15px; color: #9b2520; background: #fff; border: 1px solid #d5aaa7; border-radius: 8px; font-weight: 700; }
.danger-button:hover { color: #fff; background: #9b2520; border-color: #9b2520; }
.dealer-guide-card { grid-column: 1 / -1; padding: 17px 19px; background: #f1f1f1; border-left: 4px solid #222; border-radius: 8px; }
.dealer-guide-card { scroll-margin-top: 92px; transition: box-shadow .2s ease, background .2s ease; }
.dealer-guide-card.guide-focus { background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.14), 0 12px 30px rgba(0,0,0,.12); }
.dealer-guide-card h3 { margin: 6px 0 10px; font-size: 14px; }
.dealer-guide-card p { position: relative; margin: 5px 0; padding-left: 18px; color: #555; font-size: 11px; line-height: 1.6; }
.dealer-guide-card p::before { content: "✓"; position: absolute; left: 0; color: #111; font-weight: 700; }
.dealer-guide-card small { display: block; margin-top: 10px; color: #777; }
.file-category { width: 105px; height: 30px; padding: 0 5px; color: #333; background: #fff; border: 1px solid #ccc; border-radius: 6px; font-size: 9px; }
.card-badges { display: flex; align-items: center; gap: 5px; }
.age-badge { padding: 3px 7px; border-radius: 12px; font-size: 8px; font-weight: 700; }
.age-badge.yellow { color: #6b4b00; background: #f6cf62; }
.age-badge.red { color: #fff; background: #b3261e; }
.service-case-card.alert-yellow { box-shadow: inset 4px 0 #e3ad21; }
.service-case-card.alert-red { box-shadow: inset 4px 0 #b3261e; background: #fff8f7; }
.service-case-card.active.alert-yellow { box-shadow: inset 4px 0 #e3ad21; }
.service-case-card.active.alert-red { box-shadow: inset 4px 0 #b3261e; }
.service-attachments { display: grid; gap: 8px; }
.service-attachment-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: center; gap: 9px; padding: 10px; background: #f5f5f5; border-radius: 7px; }
.attachment-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.attachment-name svg { flex: 0 0 auto; width: 16px; }
.attachment-name strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.service-attachment-row select { height: 34px; padding: 0 8px; background: #fff; border: 1px solid #ccc; border-radius: 6px; font-size: 9px; }
.serial-history { display: grid; gap: 7px; }
.serial-history button { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 12px; color: var(--ink); background: #f7f7f7; border: 1px solid #ddd; border-radius: 7px; text-align: left; }
.serial-history button.current { border-color: #222; box-shadow: inset 3px 0 #222; }
.serial-history button > span:first-child { display: grid; gap: 3px; }
.serial-history strong { font-size: 10px; }
.serial-history small { color: var(--muted); font-size: 8px; }
.report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 17px; }
.report-stats article { display: grid; gap: 4px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.report-stats span { color: var(--muted); font-size: 10px; }
.report-stats strong { font: 700 28px "Space Grotesk", sans-serif; }
.report-stats strong em { margin-left: 3px; font: 600 10px "Noto Sans TC", sans-serif; }
.report-stats small { color: #999; font-size: 9px; }
.report-stats .report-alert { border-color: #d7aaa6; box-shadow: inset 4px 0 #b3261e; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.report-panel { overflow: hidden; padding-bottom: 18px; }
.report-panel.full { grid-column: 1 / -1; padding-bottom: 0; }
.report-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); }
.report-head h2 { margin: 0; font-size: 15px; }
.report-head span { color: var(--muted); font-size: 9px; }
.report-bar-row { display: grid; grid-template-columns: 130px minmax(80px, 1fr) 30px; align-items: center; gap: 10px; padding: 9px 20px; font-size: 10px; }
.report-bar-row > div { overflow: hidden; height: 8px; background: #eee; border-radius: 5px; }
.report-bar-row i { display: block; height: 100%; background: #222; border-radius: 5px; }
.report-bar-row strong { text-align: right; }
.report-red td { background: #fff5f4; }
.report-yellow td { background: #fffbef; }

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .action-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px; }
  .action-panel .panel-heading { grid-column: 1 / -1; padding: 0 0 5px; }
  .quick-action { width: 100%; margin: 0; }
  .notice-card { grid-column: 1 / -1; margin: 5px 0 0; }
  .guide-panel { display: block; padding: 0 0 18px; }
  .guide-panel .panel-heading { padding: 18px 18px 8px; }
  .guide-drive-card { width: calc(100% - 36px); margin: 0 18px; }
  .guide-list { max-height: 460px; margin: 0 18px; }
  .guide-panel .notice-card { margin: 16px 18px 0; }
  .guide-panel .action-support-card { margin: 16px 18px 0; }
  .login-brand { padding: 45px 5vw; }
  .service-workspace { grid-template-columns: 320px minmax(0, 1fr); }
  .notice-admin-grid { grid-template-columns: 330px minmax(0, 1fr); }
  .report-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-panel { min-height: 100vh; padding: 35px 25px 65px; }
  .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 50px; font-size: 19px; font-weight: 700; }
  .sidebar { transform: translateX(-100%); transition: .25s; box-shadow: 15px 0 40px rgba(0,0,0,.08); }
  .sidebar.open { transform: translateX(0); }
  .app-shell { display: block; }
  .main { grid-column: 1; }
  .menu-toggle { display: grid; margin-right: 13px; }
  .topbar { padding: 0 20px; }
  .content { padding: 28px 20px 45px; }
  .user-copy, .logout-button, .search kbd { display: none; }
  .search { width: min(380px, 60vw); }
  .form-grid, .parts-list { grid-template-columns: 1fr; }
  .full-span { grid-column: 1; }
  .stepper li > div { display: none; }
  .stepper li::after { left: 42px; right: 8px; }
  .stepper { max-width: 480px; }
  .file-preview { grid-template-columns: 1fr 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .onboarding-action-row,
  .onboarding-grid-three,
  .onboarding-grid-two,
  .warranty-table,
  .onboarding-flow { grid-template-columns: 1fr; }
  .warranty-table div { border-right: 0; border-bottom: 1px solid var(--line); }
  .warranty-table div:last-child { border-bottom: 0; }
  .subsidy-row { grid-template-columns: 1fr; gap: 4px; }
  .subsidy-row-head { display: none; }
  .login-copy h1 { white-space: normal; }
  .role-switch span { display: none; }
  .role-switch { width: 37px; padding: 0; justify-content: center; }
  .service-stats { grid-template-columns: 1fr 1fr; }
  .service-workspace { grid-template-columns: 1fr; }
  .notice-admin-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .report-panel.full { grid-column: 1; }
  .service-case-list { max-height: 420px; }
  .service-editor-body { max-height: none; }
}
@media (max-width: 580px) {
  .content { padding: 23px 14px 40px; }
  .topbar { height: 67px; padding: 0 14px; }
  .top-actions { gap: 9px; }.user { padding-left: 8px; }.notification { display: none; }
  .search { flex: 1; width: auto; }
  .welcome-row, .page-heading { align-items: flex-start; flex-direction: column; }
  .welcome-row .primary-button, .page-heading > .primary-button, .page-heading > a.primary-button { width: 100%; }
  .welcome-row h1, .page-heading h1 { font-size: 25px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .onboarding-grid { grid-template-columns: 1fr 1fr; padding: 16px; }
  .stat-card { min-height: 125px; padding: 15px; }
  .stat-icon { width: 32px; height: 32px; }
  .stat-card strong { font-size: 25px; }
  .mini-chart { display: none; }
  .dashboard-grid { margin-top: 13px; }
  .action-panel { grid-template-columns: 1fr; }
  .action-panel .panel-heading, .notice-card { grid-column: 1; }
  .form-card { padding: 21px 17px 23px; }
  .form-card-heading { gap: 11px; }
  .form-grid { gap: 19px; }
  .parts-toolbar, .filter-row { align-items: stretch; flex-direction: column; }
  .part-search, .filter-row select { width: 100%; }
  .part-option > b { display: none; }
  .file-preview { grid-template-columns: 1fr; }
  .form-actions { flex-wrap: wrap; }
  .auto-save { order: -1; width: 100%; justify-content: flex-end; }
  .form-actions .primary-button, .form-actions .secondary-button { flex: 1; }
  .review-grid { grid-template-columns: 1fr; }
  .dealer-confirm { align-items: flex-start; gap: 12px; flex-direction: column; }
  .success-card { padding: 35px 18px 30px; }
  .success-card h1 { font-size: 23px; }
  .success-timeline strong { font-size: 9px; }
  .success-actions { flex-direction: column; }
  .parts-catalog { grid-template-columns: 1fr; padding: 16px; }
  .vehicle-parts-library { grid-template-columns: 1fr; padding: 16px; }
  .onboarding-grid { grid-template-columns: 1fr; }
  .onboarding-section-nav { grid-template-columns: repeat(2, 1fr); padding: 16px 16px 0; }
  .onboarding-section-nav a { min-height: 44px; }
  .onboarding-action-row,
  .onboarding-grid-three,
  .onboarding-grid-two,
  .warranty-table,
  .onboarding-flow { grid-template-columns: 1fr; }
  .onboarding-action-row { padding: 16px 16px 0; }
  .repair-resource-row { padding: 14px 0 0; }
  .onboarding-section { margin: 16px 16px 0; padding: 17px; }
  .onboarding-section-head { flex-direction: column; }
  .warranty-table div { border-right: 0; border-bottom: 1px solid var(--line); }
  .warranty-table div:last-child { border-bottom: 0; }
  .order-portal-card { align-items: flex-start; flex-direction: column; }
  .onboarding-header { position: static; align-items: flex-start; flex-direction: column; padding: 18px; }
  .onboarding-main { width: calc(100% - 20px); padding-top: 20px; }
  .onboarding-title-lockup { flex-direction: column; gap: 10px; }
  .onboarding-title-lockup img { width: 86px; height: 60px; }
  .onboarding-order-cta { align-items: stretch; flex-direction: column; margin: 16px 16px 0; padding: 18px; }
  .onboarding-order-actions { align-items: stretch; flex-direction: column; }
  .onboarding-order-actions .secondary-button,
  .onboarding-order-cta .primary-button { width: 100%; }
  .cloud-library-card { align-items: stretch; flex-direction: column; margin: 15px 16px 0; }
  .parts-hero { padding: 25px 20px; }.parts-hero-icon { display: none; }
  .contact-panel, .contact-panel > div { align-items: flex-start; flex-direction: column; }
  .contact-panel > div:last-child { justify-items: start; }
  .modal-backdrop { padding: 10px; }
  .modal-heading, .case-detail-content { padding-left: 18px; padding-right: 18px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-item.full { grid-column: 1; }
  .case-detail-summary { align-items: flex-start; flex-direction: column; }
  .supplement-panel { margin-left: 10px; margin-right: 10px; }
  .supplement-heading { flex-direction: column; }
  .supplement-heading > span { text-align: left; }
  .supplement-panel > .primary-button { width: 100%; }
  .service-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .service-stats article { padding: 14px; }
  .service-filters, .service-form-grid, .service-report-summary { grid-template-columns: 1fr; }
  .dealer-guide-card { scroll-margin-top: 82px; }
  .service-summary-item.full { grid-column: 1; }
  .service-editor-head, .service-editor-actions { align-items: flex-start; flex-direction: column; }
  .service-editor-actions > span { margin-right: 0; }
  .service-editor-actions .primary-button, .service-editor-actions .secondary-button { width: 100%; }
  .service-tabs { width: 100%; }
  .service-tabs button { flex: 1; justify-content: center; }
  .notice-form-actions { flex-wrap: wrap; }
  .service-attachment-row { grid-template-columns: 1fr; }
  .report-stats { grid-template-columns: 1fr 1fr; }
  .report-bar-row { grid-template-columns: 90px minmax(60px, 1fr) 24px; padding-left: 14px; padding-right: 14px; }
  .notice-form-actions > span { display: none; }
  .service-page-header { padding: 0 16px; }
  .service-page-user div { display: none; }
  .service-page-main { padding: 24px 14px 40px; }
}

/* TUKU monochrome brand theme */
.secondary-button { border-color: #bdbdbd; }
.input-wrap > svg, .search svg, .search kbd, .quick-arrow, .row-arrow, .part-search svg { color: #777; }
.check-label { color: #555; }
.copyright { color: #999; }
.search input { background: #f4f4f4; }
.search input:focus { border-color: #aaa; }
.search kbd { border-color: #ddd; }
.notification { color: #444; background: #f1f1f1; }
.stat-card, .panel { box-shadow: 0 4px 15px rgba(0,0,0,.025); }
.stat-icon.amber { color: #444; background: #e9e9e9; }
.stat-icon.blue { color: #333; background: #e4e4e4; }
.stat-icon.green { color: #222; background: #dedede; }
.stat-card small { color: #888; }
.chart-a { background: #aaa; }
.chart-b { background: #888; }
.chart-c { background: #666; }
.chart-d { background: #444; }
.waiting { color: #222; background: #e9e9e9; }
.processing { color: #fff; background: #555; }
.need-info { color: #fff; background: #222; }
.parts-waiting { color: #fff; background: #777; }
.repair-done { color: #222; background: #c8c8c8; }
.done { color: #333; background: #d8d8d8; }
.quick-action:hover { border-color: #999; }
.quick-action.featured small { color: #ccc; }
.notice-card { background: #f2f2f2; border-left-color: #333; }
.notice-card > span, .notice-card .text-button { color: #222; }
.notice-card p { color: #777; }
.stepper li.completed > span { background: #555; border-color: #555; }
.stepper li.completed::after { background: #777; }
.info-strip, .warning-strip { color: #555; background: #f1f1f1; }
.warning-strip { background: #e8e8e8; }
.warning-strip svg { color: #222; }
.drop-zone { color: #666; background: #fafafa; border-color: #aaa; }
.file-chip, .review-section, .case-number { background: #f4f4f4; }
.part-search input { border-color: #ccc; }
.part-option:hover { border-color: #999; }
.part-option:has(input:checked) { background: #f1f1f1; }
.part-thumb { color: #555; background: #ededed; }
.dealer-confirm { border-color: #ccc; }
.dealer-confirm .verified { color: #222; background: #e5e5e5; }
.dealer-update-section { border-color: #999; box-shadow: inset 3px 0 #222; }
.service-list-empty { padding: 35px 18px; color: var(--muted); text-align: center; font-size: 11px; }
.parts-hero span { color: #bbb; }
.parts-hero h2 + p { color: #ddd; }
.guide-card > span { color: #ddd; }
.toast { background: #111; }