:root {
      --bg: #dce3df;
      --panel: #f8faf8;
      --panel-soft: #edf1ee;
      --ink: #17231f;
      --text: #24312d;
      --muted: #65716d;
      --border: #cad3ce;
      --primary: #d45b32;
      --primary-dark: #a84425;
      --danger: #b23d36;
      --ok: #367259;
      --warn: #a66e22;
      --route-blue: #2678a6;
      --shadow: 0 10px 26px rgba(27, 43, 37, .14);
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      --sans: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
    }

    * { box-sizing: border-box; letter-spacing: 0; }
    body {
      margin: 0;
      font-family: var(--sans);
      font-size: 12px;
      color: var(--text);
      background: var(--bg);
      overflow: hidden;
    }

    .app {
      display: grid;
      grid-template-columns: 404px 1fr;
      height: 100vh;
      width: 100vw;
      padding: 10px;
      gap: 10px;
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity .5s ease, transform .75s cubic-bezier(.2,.75,.2,1);
    }
    body.app-ready .app { opacity: 1; transform: scale(1); pointer-events: auto; }
    body:not(.app-ready) .app { display: none; }

    .sidebar {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      background: rgba(248, 250, 248, .98);
      border: 1px solid rgba(64, 82, 74, .25);
      border-radius: 8px;
      box-shadow: var(--shadow);
      z-index: 3;
      overflow: hidden;
    }

    .header {
      position: relative;
      padding: 14px 16px 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: #26352f;
      color: #fff8e9;
      overflow: hidden;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .header::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(120deg, transparent 0 56%, rgba(255,255,255,.08) 56% 57%, transparent 57%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px);
      opacity: .18;
    }

    .header h1 {
      margin: 0;
      position: relative;
      font-size: 19px;
      line-height: 1.2;
      letter-spacing: 0;
      font-weight: 650;
      white-space: nowrap;
    }

    .header-meta, .pill { display: none; }
    .header p { position: relative; display: block; margin: 4px 0 0; opacity: .72; font-size: 11px; }
    .account {
      position: relative;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      font-size: 10px;
      color: rgba(255, 248, 233, .78);
    }
    .account-email {
      display: block;
      max-width: 168px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-menu-button {
      position: relative;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      padding: 0;
      border-radius: 50%;
      border-color: rgba(255,255,255,.22);
      background: rgba(255, 255, 255, .08);
    }
    .user-menu-button:hover {
      border-color: rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .16);
    }
    .user-menu-icon::before,
    .user-menu-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background: #fff8e9;
    }
    .user-menu-icon::before {
      top: 7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .user-menu-icon::after {
      bottom: 6px;
      width: 16px;
      height: 9px;
      border-radius: 9px 9px 4px 4px;
    }
    body.cloud-mode .account-email { display: none; }
    body.cloud-mode .top-toolbar { grid-template-columns: repeat(4, 1fr); }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 9px 12px;
      border-bottom: 1px solid rgba(111, 89, 58, .15);
      background: rgba(248,250,248,.92);
    }
    .top-toolbar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 5px;
      padding: 6px 8px;
      background: #f2f5f2;
    }
    .top-toolbar button, .top-toolbar select { min-width: 0; height: 28px; padding: 3px 5px; border-radius: 8px; font-size: 11px; font-weight: 600; text-align: center; }
    .route-strip {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 5px;
      padding: 6px 8px;
      border-bottom: 1px solid rgba(111, 89, 58, .16);
      background: #f8faf8;
    }
    .route-combo {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 118px;
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: #fff;
      overflow: hidden;
    }
    .route-strip select { height: 30px; text-align: center; font-weight: 650; color: var(--ink); }
    .route-combo select {
      height: 30px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .route-combo select:focus { box-shadow: inset 0 0 0 2px rgba(198, 106, 45, .18); }
    #routeViewSelect {
      border-left: 1px solid var(--border);
      background: rgba(245,237,223,.72);
      font-size: 11px;
    }
    .route-edit-panel {
      display: none;
      padding: 8px;
      border-bottom: 1px solid var(--border);
      background: #edf1ee;
      max-height: min(46vh, 390px);
      overflow-y: auto;
      overscroll-behavior: contain;
      flex-shrink: 0;
    }
    .route-edit-panel.open { display: block; }
    .route-edit-grid { display: grid; grid-template-columns: minmax(128px, 1fr) auto auto auto; gap: 6px; align-items: center; }
    .route-edit-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

    button, select, input, textarea {
      font: inherit;
    }

    button {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      padding: 5px 7px;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
      white-space: nowrap;
    }
    button.hero-action {
      padding: 9px 10px;
      border-radius: 9px;
      font-weight: 650;
    }
    button:hover { border-color: #c18452; box-shadow: 0 3px 9px rgba(91, 66, 38, .09); }
    button.primary { background: var(--primary); color: #fff; border-color: var(--primary-dark); box-shadow: inset 0 1px rgba(255,255,255,.18); }
    button.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
    button.danger { color: var(--danger); }
    button.small { padding: 5px 8px; border-radius: 7px; font-size: 12px; }

    .content {
      flex: 1;
      min-height: 0;
      overflow: auto;
      padding: 10px 10px 10px;
      font-size: 12px;
    }

    .card {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
      margin-bottom: 10px;
      overflow: visible;
      box-shadow: 0 4px 12px rgba(74, 59, 37, .06);
    }
    .card.featured {
      border-color: #d6a26e;
      box-shadow: 0 6px 16px rgba(198,106,45,.10);
    }
    .card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      background: #eef2ef;
      border-bottom: 1px solid var(--border);
      font-weight: 650;
    }
    .card-title small {
      color: var(--muted);
      font-weight: 500;
    }
    .card-body { padding: 10px; }

    .search-row, .form-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 7px;
      margin-bottom: 8px;
    }
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    input, select, textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 11px;
      padding: 5px 7px;
      outline: none;
      background: #fff;
      color: var(--text);
    }
    input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(198, 106, 45, .14); }
    label { color: var(--muted); font-size: 12px; display: block; margin-bottom: 4px; }

    .tabs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      padding: 4px 8px 8px;
      background: rgba(255,250,240,.95);
      border-bottom: 1px solid var(--border);
    }
    .tab-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px 10px 0 0;
      background: #efe4d0;
      color: var(--muted);
      border-bottom-color: transparent;
      font-weight: 600;
      height: 30px;
      padding: 3px 8px;
      line-height: 1;
    }
    .tab-btn.active {
      color: var(--primary);
      background: #fffaf0;
      border-bottom-color: #fffaf0;
      transform: none;
    }
    .tab-panel { display: none; min-height: 0; }
    .tab-panel.active { display: block; }

    .search-wrap {
      position: relative;
      z-index: 20;
    }
    .suggestions {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 4px);
      display: none;
      max-height: 260px;
      overflow: auto;
      z-index: 100000;
      background: #fff;
      border: 1px solid #cfd8e3;
      border-radius: 10px;
      box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
    }
    .suggestions.open { display: block; }
    .suggestion {
      padding: 8px 10px;
      cursor: pointer;
      border-bottom: 1px solid #eadfcd;
    }
    .suggestion:last-child { border-bottom: 0; }
    .suggestion:hover, .suggestion.active { background: #fff1df; }
    .suggestion strong { display: block; font-size: 12px; }
    .suggestion span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .amap-sug-result { z-index: 100000 !important; font-size: 12px !important; }

    .modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(31, 39, 38, .42);
      backdrop-filter: blur(3px);
      z-index: 10000;
    }
    .modal.open { display: flex; }
    .modal-card {
      width: min(520px, 94vw);
      background: #fffaf0;
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      overflow: visible;
    }
    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, #f7ead6, #efe0c8);
    }
    .modal-body { padding: 12px; }

    .account-center {
      position: fixed;
      inset: 0;
      z-index: 30000;
      display: none;
      grid-template-rows: 68px minmax(0, 1fr);
      color: #202925;
      background: #eef0ed;
      animation: account-page-enter .42s cubic-bezier(.2, .76, .2, 1);
    }
    .account-center.open { display: grid; }
    .account-page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 28px;
      border-bottom: 1px solid #d6dbd7;
      background: #fff;
    }
    .account-page-brand {
      display: flex;
      align-items: center;
      gap: 11px;
    }
    .account-page-mark {
      display: grid;
      width: 31px;
      height: 31px;
      place-items: center;
      border: 1px solid var(--primary);
      color: var(--primary-dark);
      font-family: Georgia, serif;
      font-size: 17px;
      font-weight: 700;
    }
    .account-page-brand div {
      display: grid;
      gap: 2px;
    }
    .account-page-brand strong {
      color: #17231f;
      font-size: 14px;
    }
    .account-page-brand div span {
      color: #77817d;
      font-size: 10px;
    }
    .account-map-return {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 34px;
      padding: 0 12px;
      border-color: #bbc5c0;
      background: #f7f9f7;
      font-weight: 650;
    }
    .account-map-return span {
      color: var(--primary-dark);
      font-size: 18px;
      line-height: 1;
    }
    .account-page-layout {
      min-height: 0;
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
    }
    .account-navigation {
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 30px 18px;
      color: #e8ece9;
      background: #202925;
    }
    .account-identity {
      display: grid;
      justify-items: start;
      gap: 5px;
      padding: 0 10px 30px;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .account-avatar {
      display: grid;
      width: 46px;
      height: 46px;
      margin-bottom: 9px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .26);
      border-radius: 50%;
      color: #fff;
      background: #d45b32;
      font-size: 18px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .account-identity strong {
      width: 100%;
      overflow: hidden;
      color: #fff;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-identity > span:last-child {
      color: rgba(232, 236, 233, .58);
      font-size: 10px;
    }
    .account-navigation nav {
      display: grid;
      gap: 4px;
      margin-top: 24px;
    }
    .account-navigation nav button {
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr) auto;
      align-items: center;
      gap: 7px;
      min-height: 42px;
      padding: 7px 10px;
      border: 0;
      border-radius: 6px;
      color: rgba(232, 236, 233, .7);
      background: transparent;
      box-shadow: none;
      text-align: left;
    }
    .account-navigation nav button:hover {
      color: #fff;
      background: rgba(255, 255, 255, .06);
    }
    .account-navigation nav button.active {
      color: #fff;
      background: rgba(255, 255, 255, .11);
    }
    .account-nav-index {
      color: #d47a58;
      font-family: var(--mono);
      font-size: 9px;
    }
    .account-navigation nav button small {
      min-width: 22px;
      color: rgba(232, 236, 233, .56);
      text-align: right;
    }
    .account-workspace {
      min-height: 0;
      overflow-y: auto;
      padding: 48px clamp(28px, 5vw, 76px) 70px;
    }
    .account-workspace-head {
      max-width: 1080px;
      margin: 0 auto 34px;
      padding-bottom: 22px;
      border-bottom: 1px solid #cfd5d1;
    }
    .account-workspace-head p {
      margin: 0 0 8px;
      color: var(--primary-dark);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
    }
    .account-workspace-head h2 {
      margin: 0;
      color: #17231f;
      font-size: 30px;
      line-height: 1.2;
      font-weight: 650;
    }
    .account-workspace-head span {
      display: block;
      margin-top: 8px;
      color: #68736e;
      font-size: 12px;
    }
    .account-list {
      max-width: 1080px;
      margin: 0 auto;
      border-top: 1px solid #c7ceca;
    }
    .account-list-head {
      max-width: 1080px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 180px 82px;
      gap: 18px;
      margin: 0 auto 8px;
      padding: 0 14px;
      color: #78827e;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .account-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 180px 82px;
      align-items: center;
      gap: 18px;
      min-height: 68px;
      padding: 12px 14px;
      border-bottom: 1px solid #d2d8d4;
      background: rgba(255, 255, 255, .46);
      transition: background .16s ease;
    }
    .account-item:hover {
      background: #fff;
    }
    .account-item-main {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .account-item-main strong {
      overflow: hidden;
      color: var(--ink);
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-item-main span,
    .account-item-time,
    .account-item-message {
      color: var(--muted);
      font-size: 11px;
    }
    .export-account-item {
      grid-template-columns: minmax(0, 1fr) 110px minmax(180px, .7fr);
      align-items: start;
      padding-top: 16px;
      padding-bottom: 16px;
    }
    .export-state {
      justify-self: start;
      padding: 3px 6px;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--muted);
      background: #f4f6f4;
      font-size: 10px;
      font-weight: 700;
    }
    .state-running,
    .state-queued,
    .state-cancel_requested {
      color: #815719;
      border-color: #dec89e;
      background: #fff7e7;
    }
    .state-completed {
      color: var(--ok);
      border-color: #b8d4c7;
      background: #edf8f2;
    }
    .state-failed,
    .state-cancelled {
      color: var(--danger);
      border-color: #dfbbb7;
      background: #fff1ef;
    }
    .account-progress { grid-column: 1 / -1; }
    .account-item-message,
    .account-item-error { grid-column: 1 / 3; }
    .account-progress {
      height: 5px;
      overflow: hidden;
      border-radius: 3px;
      background: #e2e7e4;
    }
    .account-progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--primary);
      transition: width .35s ease;
    }
    .account-item-message,
    .account-item-error {
      margin: -4px 0 0;
      line-height: 1.5;
    }
    .account-item-error {
      color: var(--danger);
      font-size: 11px;
      white-space: pre-wrap;
    }
    .account-item-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-start;
    }
    .account-no-files {
      color: #89928e;
      font-size: 11px;
    }
    .account-empty {
      padding: 72px 20px;
      border-bottom: 1px solid #c7ceca;
      color: var(--muted);
      background: rgba(255, 255, 255, .34);
      text-align: center;
      line-height: 1.7;
    }
    .account-settings {
      max-width: 1080px;
      margin: 0 auto;
    }
    .settings-section {
      padding: 24px 0;
      border-top: 1px solid #c7ceca;
    }
    .settings-section h3 {
      margin: 0 0 16px;
      color: #17231f;
      font-size: 14px;
    }
    .settings-section dl {
      margin: 0;
    }
    .settings-section dl div {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 24px;
      padding: 13px 0;
      border-top: 1px solid #d8ddda;
    }
    .settings-section dt {
      color: #737e79;
      font-size: 11px;
    }
    .settings-section dd {
      margin: 0;
      color: #26312d;
      font-size: 12px;
    }
    .settings-danger-zone {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-top: 30px;
      padding-top: 24px;
      border-top: 1px solid #d1b7b4;
    }
    .settings-danger-zone div {
      display: grid;
      gap: 5px;
    }
    .settings-danger-zone strong {
      color: #632b27;
      font-size: 13px;
    }
    .settings-danger-zone span {
      color: #7d6a68;
      font-size: 11px;
    }

    .spot-panel {
      position: absolute;
      right: 28px;
      top: 28px;
      z-index: 8;
      display: none;
      width: min(360px, calc(100vw - 430px));
      max-height: calc(100vh - 36px);
      overflow: auto;
      background: rgba(255,250,240,.96);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
    }
    .spot-panel.open { display: block; }
    .spot-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, #f6ead7, #eadcc5);
      font-weight: 650;
    }
    .spot-body { padding: 10px 12px 12px; }
    .spot-images {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 8px;
    }
    .spot-images img {
      width: 100%;
      height: 92px;
      object-fit: cover;
      border-radius: 10px;
      cursor: zoom-in;
      border: 1px solid var(--border);
    }
    .spot-text { color: #3b403c; line-height: 1.7; white-space: pre-wrap; }
    .scenic-editor {
      display: grid;
      gap: 6px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .scenic-editor textarea {
      width: 100%;
      min-height: 86px;
      resize: vertical;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px;
      font: inherit;
      line-height: 1.55;
    }
    .scenic-image-list {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
      word-break: break-all;
    }
    .image-lightbox {
      position: fixed;
      inset: 0;
      z-index: 20000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(0,0,0,.78);
    }
    .image-lightbox.open { display: flex; }
    .image-lightbox img {
      max-width: 96vw;
      max-height: 92vh;
      border-radius: 10px;
      box-shadow: 0 18px 60px rgba(0,0,0,.5);
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      margin-top: 8px;
    }

    #map { height: 100%; width: 100%; z-index: 1; background: #cfd8c6; border-radius: 16px; overflow: hidden; }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .metric {
      background: #f7efe0;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 9px;
    }
    .metric .value { font-size: 17px; font-weight: 650; margin-bottom: 2px; }
    .metric .label { color: var(--muted); font-size: 12px; }
    .workflow {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin-top: 10px;
    }
    .workflow-step {
      border-radius: 11px;
      padding: 8px;
      background: #f8fafc;
      border: 1px solid var(--border);
    }
    .workflow-step b {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
    }
    .workflow-step span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .day {
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 7px;
      overflow: hidden;
      background: rgba(255,253,247,.88);
      box-shadow: 0 4px 12px rgba(75, 57, 35, .06);
    }
    .day-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 6px;
      align-items: center;
      padding: 8px 9px;
      background: linear-gradient(180deg, #fbf3e4, #f2e6d1);
      border-bottom: 1px solid var(--border);
    }
    .day-title {
      font-weight: 650;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .day-name-row { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
    .day-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 28px;
      border-radius: 8px;
      background: #26352f;
      color: #fff8e9;
      font-weight: 700;
    }
    .day-total { color: var(--primary); font-size: 12px; font-weight: 650; }
    .day-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .archive-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .archive-item {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 11px;
      background:
        linear-gradient(135deg, rgba(198,106,45,.10), transparent 42%),
        #fffaf0;
    }
    .archive-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-weight: 650;
      margin-bottom: 4px;
    }
    .archive-item-sub {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
      word-break: break-all;
    }
    .asset-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 7px;
    }
    .asset-tag {
      padding: 3px 7px;
      border-radius: 999px;
      background: #f8e4cd;
      color: #9d4f1e;
      font-size: 11px;
      font-weight: 650;
    }
    .asset-tag.ok { background: #e7f1e5; color: #2f6d4a; }
    .asset-tag.wait { background: #fff1d2; color: #966519; }
    .archive-item-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    .points { padding: 4px 7px 6px; }
    .point {
      display: grid;
      grid-template-columns: 22px 1fr auto;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
      border-bottom: 1px dashed #e5d6c0;
    }
    .point:last-child { border-bottom: 0; }
    .badge {
      width: 22px; height: 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      font-weight: 650;
    }
    .badge.start { background: var(--ok); }
    .badge.end { background: var(--danger); }
    .badge.waypoint { background: var(--primary); }
    .point-name { font-weight: 650; font-size: 12px; }
    .point-sub { color: var(--muted); font-size: 11px; font-family: var(--mono); margin-top: 2px; letter-spacing: -.1px; }
    .point-actions { display: flex; gap: 3px; flex-wrap: nowrap; justify-content: flex-end; }
    .point-actions button { padding: 3px 5px; font-size: 11px; }

    .segment {
      margin: 0 8px 4px 36px;
      color: var(--muted);
      font-size: 11px;
    }
    .segment.ok { color: #596259; }
    .segment.error { color: var(--danger); }

    .editor-wrap { display: none; }
    .editor-wrap.open { display: block; }
    #jsonEditor {
      height: calc(100vh - 145px);
      min-height: 220px;
      resize: vertical;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.45;
      white-space: pre;
    }

    .status {
      position: absolute;
      left: 424px;
      bottom: 28px;
      right: 28px;
      z-index: 4;
      pointer-events: none;
      display: flex;
      justify-content: center;
    }
    .toast {
      display: none;
      max-width: 600px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(31, 39, 38, .90);
      color: #fff8e9;
      font-size: 13px;
      box-shadow: var(--shadow);
    }
    .toast.show { display: block; }

    .setup-overlay {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background:
        radial-gradient(circle at top, rgba(198,106,45,.20), transparent 42%),
        rgba(31, 39, 38, .72);
      backdrop-filter: blur(6px);
    }
    .setup-overlay.open { display: flex; }
    .setup-card {
      width: min(520px, 100%);
      border-radius: 14px;
      background: #fffaf0;
      box-shadow: 0 24px 60px rgba(0,0,0,.28);
      border: 1px solid rgba(255,255,255,.4);
      overflow: hidden;
    }
    .setup-card header {
      padding: 18px 20px 12px;
      background: linear-gradient(135deg, #1f2726, #475d4b);
      color: #fff8e9;
    }
    .setup-card header h2 { margin: 0 0 6px; font-size: 20px; }
    .setup-card header p { margin: 0; opacity: .88; line-height: 1.5; font-size: 12px; }
    .setup-card .setup-body { padding: 16px 20px 18px; display: grid; gap: 12px; }
    .setup-card .setup-steps {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.55;
    }
    .setup-overlay.cloud-managed .setup-steps,
    .setup-overlay.cloud-managed .setup-body .form-grid,
    .setup-overlay.cloud-managed .setup-body .toolbar {
      display: none !important;
    }
    .setup-card .setup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .map-placeholder {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      background:
        radial-gradient(circle at 50% 28%, rgba(198,106,45,.16), transparent 24%),
        linear-gradient(180deg, rgba(248,241,226,.92), rgba(225,218,203,.96)),
        repeating-linear-gradient(90deg, rgba(65,86,65,.06) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(65,86,65,.06) 0 1px, transparent 1px 48px);
      color: #495247;
      z-index: 2;
      text-align: center;
      padding: 24px;
    }
    .map-placeholder.show { display: flex; }
    .map-placeholder strong { font-size: 20px; color: var(--ink); }
    .map-placeholder p { margin: 0; max-width: 420px; line-height: 1.6; color: var(--muted); }
    .app-shell { position: relative; min-width: 0; min-height: 0; height: 100%; width: 100%; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow); border: 1px solid rgba(83,65,42,.22); }
    .app-shell #map { position: absolute; inset: 0; height: 100%; width: 100%; }

    .loading {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(255,250,240,.48);
      z-index: 5;
      backdrop-filter: blur(1px);
    }
    .loading.show { display: flex; }
    .loading-box {
      min-width: min(360px, calc(100vw - 48px));
      padding: 14px 16px;
      border-radius: 14px;
      background: #fffaf0;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      display: grid;
      gap: 8px;
    }
    .loading-text {
      font-weight: 650;
      color: var(--ink);
    }
    .loading-progress {
      display: none;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #e7d9c4;
      border: 1px solid rgba(111,89,58,.18);
    }
    .loading-progress.show { display: block; }
    .loading-progress span {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: var(--primary);
      transition: width .35s ease;
    }
    .loading-detail {
      display: none;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }
    .loading-detail.show { display: block; }

    .marker-label {
      background: rgba(255,250,240,.96);
      border: 1px solid rgba(83, 65, 42, .22);
      border-radius: 10px;
      padding: 3px 7px;
      box-shadow: 0 6px 16px rgba(52, 43, 31, .18);
      font-size: 12px;
      white-space: nowrap;
    }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: rgba(232, 219, 198, .45); }
    ::-webkit-scrollbar-thumb { background: #c7ae8c; border: 2px solid #f6ecd9; border-radius: 999px; }

    [hidden] { display: none !important; }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 100;
      overflow: hidden;
      color: #fff;
      background: #17211d;
      transition: opacity .7s ease, clip-path .9s cubic-bezier(.7,0,.2,1);
      clip-path: inset(0 0 0 0);
    }
    .auth-gate.is-leaving {
      opacity: 0;
      clip-path: inset(0 0 100% 0);
      pointer-events: none;
    }
    .auth-photo {
      position: absolute;
      inset: 0;
      background-image: url("../assets/cover-road.jpeg");
      background-size: cover;
      background-position: center 48%;
      transform: scale(1.02);
      animation: auth-camera 12s ease-out both;
    }
    .auth-shade {
      position: absolute;
      inset: 0;
      background: rgba(8, 17, 14, .48);
      box-shadow: inset 0 -310px 180px -120px rgba(4, 11, 9, .88);
    }
    .auth-route {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .auth-route path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .auth-route-shadow {
      stroke: rgba(0, 0, 0, .5);
      stroke-width: 9;
    }
    .auth-route-line {
      stroke: #f06a3a;
      stroke-width: 4;
      stroke-dasharray: 2300;
      stroke-dashoffset: 2300;
      animation: route-draw 2.6s .35s cubic-bezier(.4,0,.2,1) forwards;
    }
    .auth-nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 82px;
      padding: 0 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.22);
      background: rgba(10, 20, 17, .28);
    }
    .auth-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 700;
    }
    .auth-brand-mark {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      border: 2px solid #f06a3a;
      color: #fff;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 19px;
      line-height: 1;
    }
    .auth-edition {
      font-size: 11px;
      color: rgba(255,255,255,.74);
    }
    .auth-copy {
      position: absolute;
      left: 7vw;
      bottom: 208px;
      max-width: 720px;
      text-shadow: 0 2px 18px rgba(0,0,0,.35);
    }
    .auth-eyebrow {
      margin: 0 0 15px;
      color: #ffb08e;
      font-size: 12px;
      font-weight: 700;
    }
    .auth-copy h1 {
      margin: 0;
      font-family: Georgia, "Songti SC", "STSong", serif;
      font-size: 64px;
      line-height: 1.16;
      font-weight: 600;
    }
    .auth-lead {
      margin: 18px 0 0;
      max-width: 520px;
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255,255,255,.85);
    }
    .auth-login-rail {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 42px;
      min-height: 126px;
      padding: 24px 7vw;
      display: grid;
      grid-template-columns: 170px minmax(360px, 620px) minmax(180px, 1fr);
      align-items: center;
      gap: 28px;
      border-top: 1px solid rgba(255,255,255,.25);
      background: rgba(9, 19, 16, .84);
    }
    .auth-login-heading {
      display: grid;
      gap: 6px;
      font-size: 21px;
      font-weight: 700;
    }
    .auth-login-heading small {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,.62);
    }
    .auth-form {
      min-width: 0;
    }
    .auth-form label {
      margin-bottom: 7px;
      color: rgba(255,255,255,.72);
      font-size: 11px;
    }
    .auth-form label strong { color: #fff; }
    .auth-input-row {
      height: 48px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 126px;
      border-bottom: 1px solid rgba(255,255,255,.72);
    }
    .auth-input-row.password-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 112px;
      column-gap: 16px;
    }
    .auth-input-row.reset-row {
      grid-template-columns: minmax(0, 1fr) 112px;
    }
    .auth-input-row.casdoor-row {
      grid-template-columns: minmax(180px, 260px);
      border-bottom: 0;
    }
    .auth-input-row.casdoor-row .auth-submit {
      width: 100%;
    }
    .auth-input-row input {
      height: 48px;
      padding: 0 12px 0 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #fff;
      font-size: 17px;
      box-shadow: none;
    }
    .auth-input-row input::placeholder { color: rgba(255,255,255,.42); }
    .auth-input-row input:focus { box-shadow: none; border: 0; }
    .auth-submit {
      height: 40px;
      align-self: center;
      border: 0;
      border-radius: 4px;
      background: #f06434;
      color: #fff;
      font-weight: 700;
    }
    .auth-submit:hover { background: #d95025; border: 0; }
    .auth-back,
    .auth-preview {
      margin-top: 9px;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,.7);
      text-decoration: underline;
      box-shadow: none;
    }
    .auth-preview {
      justify-self: start;
      margin: 0;
      color: #fff;
    }
    .auth-message {
      margin: 0;
      max-width: 360px;
      color: rgba(255,255,255,.72);
      font-size: 12px;
      line-height: 1.55;
    }
    .auth-message[data-type="error"] { color: #ff9f92; }
    .auth-message[data-type="success"] { color: #9fe1bd; }
    .auth-message[data-type="notice"] { color: #cbd9d2; }
    .auth-footer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 42px;
      padding: 0 7vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #101915;
      color: rgba(255,255,255,.52);
      font-size: 10px;
    }
    .cloud-save-state {
      color: var(--route-blue);
      font-size: 10px;
      font-weight: 700;
    }

    @keyframes route-draw {
      to { stroke-dashoffset: 0; }
    }
    @keyframes auth-camera {
      from { transform: scale(1.08); }
      to { transform: scale(1.02); }
    }
    @keyframes account-page-enter {
      from { transform: translateY(14px); opacity: .72; }
      to { transform: translateY(0); opacity: 1; }
    }

    @media (max-width: 920px) {
      body { overflow: auto; }
      .app { grid-template-columns: 1fr; grid-template-rows: 55vh auto; height: auto; min-height: 100vh; padding: 8px; }
      .sidebar { grid-row: 2; min-height: 45vh; }
      .app-shell { grid-row: 1; min-height: 55vh; }
      #map { min-height: 55vh; }
      .spot-panel { width: calc(100vw - 32px); right: 16px; top: 16px; }
      .status { left: 12px; right: 12px; bottom: 16px; }
      .auth-nav { height: 68px; padding: 0 22px; }
      .auth-edition { display: none; }
      .auth-copy { left: 24px; right: 24px; bottom: 300px; }
      .auth-copy h1 { font-size: 42px; }
      .auth-lead { font-size: 14px; }
      .auth-login-rail {
        bottom: 38px;
        padding: 20px 24px;
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 18px;
      }
      .auth-message { grid-column: 2; }
      .auth-footer { height: 38px; padding: 0 24px; }
    }

    @media (max-width: 640px) {
      .auth-photo { background-position: 58% center; }
      .auth-copy { bottom: 360px; }
      .auth-copy h1 { font-size: 34px; line-height: 1.22; }
      .auth-lead { max-width: 320px; font-size: 13px; }
      .auth-login-rail {
        min-height: 238px;
        grid-template-columns: 1fr;
        align-content: center;
        gap: 14px;
      }
      .auth-login-heading { font-size: 18px; }
      .auth-message { grid-column: 1; }
      .auth-input-row,
      .auth-input-row.reset-row { grid-template-columns: minmax(0, 1fr) 112px; }
      .auth-input-row.password-row {
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }
      .auth-input-row.password-row .auth-submit { width: 112px; justify-self: end; }
      .auth-footer span:last-child { display: none; }
      .header { padding: 12px; }
      .header h1 { font-size: 17px; }
      .account-email { max-width: 112px; }
      .account-center { grid-template-rows: 60px minmax(0, 1fr); }
      .account-page-header { padding: 0 14px; }
      .account-page-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
      }
      .account-navigation {
        padding: 12px 14px;
      }
      .account-identity { display: none; }
      .account-navigation nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        margin: 0;
      }
      .account-navigation nav button {
        grid-template-columns: 1fr auto;
        min-height: 38px;
        padding: 6px 8px;
        text-align: center;
      }
      .account-nav-index { display: none; }
      .account-workspace { padding: 26px 14px 46px; }
      .account-workspace-head { margin-bottom: 24px; }
      .account-workspace-head h2 { font-size: 25px; }
      .account-list-head { display: none; }
      .account-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 12px 10px;
      }
      .account-item-time {
        grid-column: 1;
        grid-row: 2;
      }
      .route-account-item > button {
        grid-column: 2;
        grid-row: 1 / 3;
      }
      .export-account-item {
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .export-account-item .account-item-actions,
      .export-account-item .account-progress,
      .export-account-item .account-item-message,
      .export-account-item .account-item-error {
        grid-column: 1 / -1;
      }
      .settings-section dl div { grid-template-columns: 1fr; gap: 6px; }
      .settings-danger-zone { align-items: flex-start; flex-direction: column; }
    }

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