:root {
      --bg: #f5f7fb;
      --surface: #ffffff;
      --surface-soft: #fafbfc;
      --ink: #172033;
      --muted: #697386;
      --line: #e4e8ef;
      --blue: #2563eb;
      --blue-soft: #eff6ff;
      --green: #0f9f6e;
      --green-soft: #ecfdf5;
      --red: #e5484d;
      --red-soft: #fff1f2;
      --amber-soft: #fffbeb;
      --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .04);
      --radius: 14px;
    }
    * { box-sizing: border-box; }
    html { color-scheme: light; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, input, textarea { font: inherit; }
    button { cursor: pointer; }
    button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 3px solid rgba(37, 99, 235, .18);
      outline-offset: 1px;
    }
    .app { max-width: 1540px; margin: 0 auto; padding: 24px; }
    .topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
    .brand { display: flex; align-items: center; gap: 12px; }
    .logo {
      width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
      color: white; background: linear-gradient(145deg, #2563eb, #1d4ed8); box-shadow: 0 8px 20px rgba(37, 99, 235, .22);
    }
    .logo svg { width: 22px; height: 22px; }
    h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
    .subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
    .local-pill { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.75); color: var(--muted); font-size: 12px; }
    .local-pill i { width: 7px; height: 7px; border-radius: 99px; background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
    .tabs { display: flex; gap: 8px; margin-bottom: 18px; }
    .tab { border: 1px solid transparent; background: #e9edf4; color: #586174; border-radius: 10px; padding: 9px 14px; font-weight: 650; font-size: 13px; display: flex; align-items: center; gap: 7px; transition: .18s ease; }
    .tab.active { background: white; color: var(--ink); border-color: var(--line); box-shadow: 0 2px 8px rgba(15,23,42,.05); }
    .icon { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; }
    .panel { display: none; }
    .panel.active { display: block; animation: reveal .2s ease; }
    @keyframes reveal { from { opacity: 0; transform: translateY(3px); } }
    .entry-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
    .stack { display: grid; gap: 16px; }
    .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
    .card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
    .title-left { display: flex; align-items: center; gap: 9px; font-weight: 750; font-size: 14px; }
    .title-left .dot { width: 8px; height: 8px; border-radius: 50%; }
    .hint { color: #8a94a6; font-size: 12px; margin: 0 0 10px; }
    .field { display: grid; gap: 7px; }
    .field label { font-size: 13px; font-weight: 650; color: #39445a; }
    .required::after { content: " *"; color: var(--red); }
    .input-wrap { position: relative; }
    input, textarea {
      width: 100%; border: 1px solid #dce1e9; background: white; color: var(--ink); border-radius: 9px; padding: 10px 12px; min-height: 41px; transition: .16s ease;
    }
    textarea { resize: vertical; min-height: 82px; line-height: 1.5; }
    input:hover, textarea:hover { border-color: #c7cfdb; }
    input:focus, textarea:focus { border-color: #7aa2f7; outline: 3px solid rgba(37,99,235,.11); }
    .with-icon { padding-left: 39px; }
    .leading-icon { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: #94a3b8; pointer-events: none; }
    .dropdown {
      position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow: auto;
      background: white; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 16px 36px rgba(15,23,42,.13); padding: 5px;
    }
    .dropdown[hidden] { display: none; }
    .option { width: 100%; border: 0; background: transparent; border-radius: 8px; padding: 9px 10px; text-align: left; display: flex; align-items: center; gap: 10px; }
    .option:hover, .option.active { background: var(--blue-soft); }
    .zip-code { color: var(--blue); font-weight: 800; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; min-width: 50px; }
    .option-primary { font-size: 13px; color: #334155; }
    .option-secondary { font-size: 11px; color: #8490a3; margin-top: 2px; }
    .area-card { background: var(--red-soft); border-color: #fecdd3; box-shadow: none; }
    .area-card .title-left { color: #d33c48; }
    .area-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px 24px; }
    .datum { min-width: 0; }
    .datum span { display: block; color: #d57a82; font-size: 11px; margin-bottom: 3px; }
    .datum strong { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .empty-area { min-height: 158px; display: grid; place-items: center; text-align: center; color: #e89aa2; font-size: 13px; }
    .empty-area svg { width: 30px; height: 30px; margin-bottom: 7px; }
    .clear-link { border: 0; background: transparent; color: #a46d73; font-size: 12px; padding: 4px; }
    .form-card { background: var(--green-soft); border-color: #b7efd8; box-shadow: none; }
    .form-card .title-left { color: #07865c; }
    .form-grid { display: grid; gap: 14px; }
    .customer-menu .option { justify-content: space-between; }
    .tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 700; background: #eff6ff; color: #2563eb; }
    .actions { display: flex; gap: 9px; margin-top: 4px; }
    .btn { border: 1px solid transparent; border-radius: 9px; min-height: 38px; padding: 8px 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: 13px; transition: .16s ease; }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .btn-primary { background: #0e9f6e; color: white; box-shadow: 0 6px 14px rgba(15,159,110,.18); }
    .btn-primary:hover { background: #0a8c61; }
    .btn-primary:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }
    .btn-outline { background: white; color: #445067; border-color: #d9dee7; }
    .btn-danger { background: #ef4444; color: white; }
    .btn-ghost-danger { color: #dc3545; background: #fff; border-color: #fed7da; }
    .btn-small { min-height: 32px; padding: 6px 10px; font-size: 12px; }
    .toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 13px; }
    .search-list { flex: 1 1 330px; max-width: 520px; }
    .toolbar-spacer { flex: 1; }
    .count-badge { min-width: 112px; padding: 10px 12px; background: white; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }
    .count-badge strong { color: var(--ink); font-size: 14px; }
    .table-shell { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
    .table-scroll { overflow: auto; max-height: 68vh; }
    table { border-collapse: separate; border-spacing: 0; min-width: 1750px; width: 100%; font-size: 12px; }
    th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #edf0f4; white-space: nowrap; max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
    thead { position: sticky; top: 0; z-index: 4; }
    th { background: #f8fafc; color: #5b6578; font-weight: 750; }
    .group-head th { padding-top: 9px; padding-bottom: 9px; text-align: center; border-bottom-color: #dde3ec; }
    .area-head { color: #1d5fd1; background: #eff6ff; }
    .customer-head { color: #07865c; background: #ecfdf5; }
    tbody tr:hover td { background: #f8fbff; }
    td .cell-actions { display: flex; gap: 5px; }
    .action-link { border: 0; background: transparent; padding: 5px 7px; border-radius: 6px; color: var(--blue); font-weight: 700; font-size: 12px; }
    .action-link:hover { background: var(--blue-soft); }
    .action-link.danger { color: var(--red); }
    .action-link.danger:hover { background: var(--red-soft); }
    .no-data { padding: 60px 20px; text-align: center; color: #98a2b3; }
    .mobile-list { display: none; gap: 10px; }
    .record-card { background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
    .record-head { padding: 10px 12px; background: #f8fafc; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f4; }
    .record-body { padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px; }
    .record-body .wide { grid-column: 1 / -1; }
    .record-body span { display: block; color: #8a94a6; font-size: 10px; margin-bottom: 2px; }
    .record-body strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
    .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: var(--muted); font-size: 12px; }
    .page-controls { display: flex; align-items: center; gap: 9px; }
    .modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(15,23,42,.48); backdrop-filter: blur(3px); }
    .modal-backdrop[hidden] { display: none; }
    .modal { width: min(560px, 100%); max-height: min(760px, 92vh); overflow: auto; background: white; border-radius: 16px; box-shadow: 0 30px 70px rgba(15,23,42,.25); }
    .modal-head { padding: 18px 20px 12px; display: flex; align-items: center; justify-content: space-between; }
    .modal-title { font-size: 16px; font-weight: 800; }
    .modal-body { padding: 8px 20px 20px; }
    .modal-footer { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }
    .close-x { border: 0; background: #f1f5f9; border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; color: #64748b; }
    .drop-zone { border: 1.5px dashed #b8c2d1; border-radius: 12px; padding: 28px 18px; text-align: center; background: #f8fafc; }
    .drop-zone.drag { background: #eff6ff; border-color: #4f83ef; }
    .drop-zone p { margin: 7px 0 2px; font-weight: 750; font-size: 13px; }
    .drop-zone small { color: var(--muted); }
    .file-note { margin-top: 12px; padding: 10px; border-radius: 8px; background: #f8fafc; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    .edit-grid .wide { grid-column: 1 / -1; }
    .confirm-text { margin: 0; color: #536075; font-size: 14px; line-height: 1.7; }
    .toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; }
    .toast { background: #172033; color: white; border-radius: 10px; padding: 11px 14px; min-width: 220px; max-width: 360px; box-shadow: 0 12px 30px rgba(15,23,42,.22); font-size: 13px; animation: toast-in .2s ease; }
    .toast.success { background: #087f5b; }
    .toast.error { background: #c92a2a; }
    @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
    .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; }
    @media (max-width: 900px) {
      .app { padding: 16px; }
      .entry-grid { grid-template-columns: 1fr; }
      .topbar { align-items: flex-start; }
      .local-pill { display: none; }
      .table-shell { display: none; }
      .mobile-list { display: grid; }
      .toolbar-spacer { display: none; }
    }
    @media (max-width: 560px) {
      .app { padding: 12px; }
      .topbar { margin-bottom: 15px; }
      h1 { font-size: 17px; }
      .subtitle { display: none; }
      .tabs { margin-bottom: 13px; }
      .tab { flex: 1; }
      .card { padding: 15px; }
      .area-grid { gap: 11px 15px; }
      .toolbar > .btn { flex: 1; }
      .toolbar .search-list { flex-basis: 100%; max-width: none; }
      .count-badge { order: -1; flex: 1 1 100%; }
      .edit-grid { grid-template-columns: 1fr; }
      .edit-grid .wide { grid-column: auto; }
      .modal-footer { flex-wrap: wrap; }
    }

.system-alert { margin: 0 0 18px; padding: 13px 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; border: 1px solid #fecdd3; border-radius: 11px; background: #fff1f2; color: #9f1239; font-size: 13px; }
.system-alert[hidden] { display: none; }
.system-alert a { color: #be123c; font-weight: 750; margin-left: auto; }
.local-pill.offline i { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
.loading-row { padding: 60px 20px; text-align: center; color: #98a2b3; }
@media (max-width: 560px) { .system-alert { align-items: flex-start; } .system-alert a { flex-basis: 100%; margin-left: 0; } }