:root {
      --bg: #070d1c;
      --side: #0b1328;
      --card: #10192f;
      --card-2: #0d162b;
      --line: rgba(148, 176, 230, 0.16);
      --text: #e8eefc;
      --muted: #8e9bbd;
      --gold: #e4c27a;
      --gold-2: #f3dfb0;
      --blue: #3d5bff;
      --blue-2: #6d86ff;
      --ok: #3ddc97;
      --danger: #ff6b7a;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    body {
      color: var(--text);
      background:
        radial-gradient(900px 420px at 15% -10%, rgba(61, 91, 255, 0.18), transparent 60%),
        radial-gradient(800px 380px at 90% 0%, rgba(228, 194, 122, 0.08), transparent 55%),
        var(--bg);
      font: 14px/1.5 "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
    }
    button, input, select { font: inherit; color: inherit; }
    button { cursor: pointer; }
    .login {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }
    .login-card {
      width: min(420px, 100%);
      background: rgba(16, 25, 47, 0.92);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px 26px 24px;
    }
    body.gate {
      color: #1f2430;
      background: radial-gradient(900px 420px at 50% -8%, #ffffff, transparent 62%), #eef3fb;
    }
    body.gate .login { padding: 56px 16px 72px; }
    body.gate .gate-wrap { width: min(560px, 100%); }
    body.gate .gate-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 22px; }
    body.gate .gate-logo { display: flex; align-items: center; gap: 10px; color: #2f5bff; font-weight: 750; letter-spacing: 0.16em; line-height: 1.15; }
    body.gate .gate-logo small { display: block; margin-top: 3px; letter-spacing: 0.28em; font-size: 10px; font-weight: 550; }
    body.gate .gate-mark {
      width: 48px; height: 48px; border-radius: 14px;
      display: grid; place-items: center; color: #fff; letter-spacing: 0;
      background: linear-gradient(180deg, #6d93ff, #2f5bff);
      box-shadow: 0 8px 18px rgba(47, 91, 255, 0.28);
    }
    body.gate .gate-title { margin: 0; font-size: 28px; font-weight: 750; color: #1a1f2b; }
    body.gate .gate-title span { color: #c5cad6; font-weight: 400; padding: 0 12px; }
    body.gate .login-card {
      width: 100%; background: #fff; border: 0; border-radius: 18px;
      padding: 6px 28px 18px; box-shadow: 0 16px 48px rgba(47, 91, 255, 0.08);
    }
    body.gate .gate-row {
      display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px;
      align-items: center; min-height: 58px; border-bottom: 1px solid #eef1f6;
    }
    body.gate .gate-row label { margin: 0; color: #1f2430; font-size: 15px; }
    body.gate .login-card input {
      width: 100%; background: transparent; border: 0; border-radius: 0;
      padding: 16px 0; color: #1f2430;
    }
    body.gate .login-card input:focus { outline: none; }
    body.gate .login-card input::placeholder { color: #b7becb; }
    body.gate .eye {
      border: 0; background: transparent; color: #9aa3b5; padding: 6px; line-height: 0;
    }
    body.gate .remember {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 0 4px; color: #1f2430; font-size: 15px;
    }
    body.gate .remember .switch {
      width: 44px; height: 26px; border: 0; border-radius: 99px; padding: 0;
      background: #d7deea; position: relative;
    }
    body.gate .remember .switch.on { background: #2f6bff; }
    body.gate .remember .switch i {
      position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
      border-radius: 50%; background: #fff;
    }
    body.gate .remember .switch.on i { left: 21px; }
    body.gate .login-card .primary.full {
      margin-top: 14px; height: 48px; border-radius: 8px; font-size: 16px;
      background: #2f6bff;
    }
    body.gate .manage {
      display: block; width: 100%; margin-top: 14px; border: 0; background: transparent;
      color: #2f6bff; text-align: center; padding: 8px;
    }
    .brand-lockup { display: flex; gap: 12px; align-items: center; }
    .crown {
      width: 42px; height: 42px; border-radius: 12px;
      display: grid; place-items: center;
      background: linear-gradient(180deg, #f6e2b0, #c79645);
      color: #2a1c08;
    }
    .brand-name { margin: 0; font-size: 20px; letter-spacing: 0.04em; }
    .brand-sub { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
    .login h2 { margin: 22px 0 6px; font-size: 22px; }
    label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 12px; }
    input, select {
      width: 100%;
      background: #0b1326;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 11px 12px;
    }
    input:focus, select:focus { outline: 2px solid rgba(61, 91, 255, 0.45); border-color: var(--blue-2); }
    .primary {
      border: 0; border-radius: 10px; padding: 11px 16px;
      background: linear-gradient(180deg, #6a86ff, #3d5bff);
      color: white;
    }
    .gold {
      border: 0; border-radius: 10px; padding: 11px 16px;
      background: linear-gradient(180deg, #f0d7a0, #c79645);
      color: #2a1c08; font-weight: 650;
    }
    .ghost {
      background: transparent; color: var(--text);
      border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
    }
    .full { width: 100%; margin-top: 16px; }
    .msg { min-height: 1.2em; margin: 8px 0 0; color: var(--danger); }
    .msg.ok { color: var(--ok); }
    .app { min-height: 100vh; display: grid; grid-template-columns: 228px 1fr; }
    .app > aside {
      background: linear-gradient(180deg, #101936, #0a1122 40%, #0b1426);
      border-right: 1px solid var(--line);
      padding: 18px 12px 14px;
      display: flex; flex-direction: column; gap: 14px;
      height: 100vh; position: sticky; top: 0; overflow: hidden;
    }
    nav { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: auto; }
    .nav-label {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; border: 0; background: transparent; color: #d7e0f6;
      font-size: 14px; padding: 11px 12px; border-radius: 10px; text-align: left;
    }
    .nav-label i {
      width: 7px; height: 7px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
      transform: rotate(-45deg);
    }
    .nav-label.open { color: white; }
    .nav-label.open i { transform: rotate(45deg); margin-top: -2px; }
    .nav-drop { display: flex; flex-direction: column; gap: 2px; padding: 0 0 8px 8px; }
    .nav-drop .nav-btn { padding: 8px 12px; font-size: 13px; }
    .frame-wrap { height: calc(100vh - 110px); background: #fff; border-radius: 16px; overflow: hidden; }
    .frame-wrap iframe { width: 100%; height: 100%; border: 0; background: #fff; }
    .nav-btn {
      text-align: left; border: 0; background: transparent; color: #c9d3ea;
      border-radius: 10px; padding: 11px 12px;
    }
    .nav-btn.active { background: linear-gradient(90deg, #3d5bff, #5a4bff); color: white; }
    .side-foot { margin-top: auto; padding: 8px 10px; color: var(--gold); letter-spacing: 0.16em; font-size: 12px; }
    .main { min-width: 0; display: grid; grid-template-rows: 64px minmax(0, 1fr); overflow: auto; }
    header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 22px; border-bottom: 1px solid var(--line);
    }
    .slogan { color: var(--gold); letter-spacing: 0.18em; font-size: 12px; }
    .who { display: flex; align-items: center; gap: 10px; color: var(--muted); }
    .purse { display: flex; gap: 16px; margin-right: 8px; color: var(--muted); font-size: 13px; }
    .purse b { color: var(--gold-2); font-size: 16px; margin-left: 4px; }
    .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #243056; color: var(--gold-2); }
    .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 18px 20px 28px; align-items: start; }
    .workspace.single { grid-template-columns: 1fr; }
    .title { margin: 0; font-size: 22px; }
    .hint { margin: 4px 0 14px; color: var(--muted); }
    .page-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
    .back {
      width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text);
    }
    .steps { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: 0 0 14px; flex-wrap: wrap; }
    .steps .n {
      width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
      background: #243056; color: var(--text); margin-right: 6px; font-size: 12px;
    }
    .steps .on { color: var(--gold-2); }
    .steps .on .n { background: linear-gradient(180deg, #f0d7a0, #c79645); color: #2a1c08; }
    .steps .line { flex: 1; min-width: 18px; height: 1px; background: rgba(228, 194, 122, 0.35); }
    .template {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #0c152b;
    }
    .template b { display: block; }
    .template small { color: var(--muted); }
    .tpl-picks { display: flex; flex-wrap: wrap; gap: 6px; }
    .agent-card {
      display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
      border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #0c152b;
    }
    .agent-card span { color: var(--muted); font-size: 12px; }
    .amount { display: flex; align-items: center; gap: 8px; }
    .amount input { text-align: center; }
    .warn {
      margin: 12px 0; padding: 10px 12px; border-radius: 10px;
      background: rgba(228, 194, 122, 0.1); color: var(--gold-2); font-size: 12px;
    }
    .card { background: rgba(16, 25, 47, 0.88); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
    .card h3 { margin: 0 0 12px; font-size: 16px; }
    .card h3 span { color: var(--gold); margin-right: 6px; }
    .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
    .span-2 { grid-column: span 2; }
    .switches { display: flex; flex-wrap: wrap; gap: 8px; }
    .switch {
      display: flex; align-items: center; gap: 8px;
      background: #0c152b; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px 7px 8px;
    }
    .switch i {
      width: 28px; height: 16px; border-radius: 999px; background: #2a3554; position: relative;
    }
    .switch i::after {
      content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #9aa6c4;
    }
    .switch.on { border-color: rgba(109, 134, 255, 0.7); }
    .switch.on i { background: var(--blue); }
    .switch.on i::after { left: 14px; background: white; }
    .summary { position: sticky; top: 16px; }
    .lsw-table td { vertical-align: middle; }
    .lsw-table .switch { cursor: pointer; display: inline-flex; }
    .lsw-table button.switch { color: var(--text); font: inherit; white-space: nowrap; }
    .lsw-table th { white-space: nowrap; }
    .lsw-rooms { display: flex; flex-wrap: wrap; gap: 6px 12px; }
    .lsw-rooms label { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-size: 13px; white-space: nowrap; }
    .lsw-rooms label.dim { opacity: .45; }
    .lsw-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #1b2747; color: var(--muted); }
    .lsw-tag.on { background: rgba(46, 204, 113, .15); color: #4cd68a; }
    .lsw-tag.off { background: rgba(255, 92, 92, .15); color: #ff7a7a; }
    .lsw-tag.warn { background: rgba(255, 184, 0, .15); color: #ffc24a; }
    .lot-sw-note { padding: 12px 16px; font-size: 14px; }
    .lot-sw-note.on { border-left: 4px solid #3ddc97; }
    .lot-sw-note.off { border-left: 4px solid #ff6b7a; color: #c7364b; }
    @media (max-width: 760px) { .lsw-scroll { overflow-x: auto; } .lsw-table { min-width: 720px; } }
    .summary li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(148, 176, 230, 0.08); color: var(--muted); }
    .summary li b { color: var(--text); font-weight: 550; text-align: right; }
    .actions { display: flex; justify-content: flex-end; gap: 8px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(148, 176, 230, 0.1); }
    th { color: var(--muted); font-weight: 550; font-size: 12px; }
    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .stat { background: rgba(16, 25, 47, 0.88); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
    .stat span { color: var(--muted); font-size: 12px; }
    .stat strong { display: block; margin-top: 6px; font-size: 26px; }
    .qx-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
    .qx-bar select { background: #0c152b; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 180px; }
    .qx-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .qx-card {
      flex: 1 1 300px; max-width: 420px; min-width: 260px;
      display: flex; align-items: center; gap: 8px;
      border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #0c152b;
    }
    .qx-card b { flex: 1; min-width: 0; font-weight: 550; }
    .qx-card label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; white-space: nowrap; }
    .qx-card input { width: 16px; height: 16px; }
    .sheet-back { position: fixed; inset: 0; background: rgba(4, 8, 18, 0.72); display: grid; place-items: center; z-index: 30; padding: 20px; }
    .sheet { width: min(640px, 100%); background: #10192f; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
    .sheet h3 { margin: 0 0 6px; }
    .sheet textarea { width: 100%; min-height: 280px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; }
    @media (max-width: 1100px) {
      .app { grid-template-columns: 1fr; }
      .workspace, .fields, .stats { grid-template-columns: 1fr; }
      .app > aside { position: static; height: auto; }
    }
  body.gate .sy-login-brand { width:180px;height:180px;object-fit:contain;border-radius:18px;box-shadow:0 8px 32px #92734318;}