:root {
  --ns-font-sans: "OPPO Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --ns-page-title: 24px;
  --ns-section-title: 18px;
  --ns-card-title: 16px;
  --ns-body: 14px;
  --ns-supporting: 13px;
  --ns-caption: 12px;
  --ns-line-title: 1.3;
  --ns-line-body: 1.6;
  --ns-weight-regular: 400;
  --ns-weight-medium: 500;
  --ns-weight-semibold: 600;
  --ns-control-height: 36px;
  --ns-control-compact: 32px;
  --ns-card-radius: 12px;
  --ns-surface: #fff;
  --ns-surface-subtle: #f7f8fb;
  --ns-surface-hover: #eef1f5;
  --ns-border: #dfe4ec;
  --ns-border-subtle: #e9edf2;
  --ns-text: #293241;
  --ns-text-secondary: #556273;
  --ns-text-muted: #626f82;
  --ns-text-disabled: #9aa4b2;
  --ns-primary: #3565dc;
  --ns-primary-hover: #2853bd;
  --ns-primary-soft: #edf2ff;
  --ns-primary-border: #cbd8f5;
  --ns-focus: #87a6ef;
  --ns-success: #23734f;
  --ns-success-soft: #edf7f1;
  --ns-success-border: #cce5d7;
  --ns-warning: #8a5a18;
  --ns-warning-soft: #fff6e7;
  --ns-warning-border: #efdfbf;
  --ns-danger: #b33e48;
  --ns-danger-soft: #fdf0f1;
  --ns-danger-border: #efcfd3;
  --ns-radius-small: 6px;
  --ns-radius-control: 8px;
  --ns-radius-pill: 999px;
  --ns-tag-height: 24px;
  --ns-space-1: 4px;
  --ns-space-2: 8px;
  --ns-space-3: 12px;
  --ns-space-4: 16px;
  --ns-space-6: 24px;
  --ns-backdrop: rgb(0 0 0 / 36%);
  --ns-shadow-drawer: -16px 0 48px rgb(20 28 44 / 18%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--ns-font-sans); font-size: var(--ns-body); line-height: var(--ns-line-body); color: var(--ns-text); background: var(--ns-surface-subtle); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--ns-focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ns-text-muted); }
.sub { display: block; font-size: var(--ns-caption); color: var(--ns-text-muted); }

.top { display: flex; align-items: center; gap: var(--ns-space-3); min-height: 56px; padding: var(--ns-space-2) var(--ns-space-6); flex-wrap: wrap; background: var(--ns-surface); border-bottom: 1px solid var(--ns-border-subtle); }
.top h1 { white-space: nowrap; margin: 0; font-size: var(--ns-card-title); font-weight: var(--ns-weight-semibold); }
.top .spacer { flex: 1; }
.page { max-width: 1240px; margin: 0 auto; padding: var(--ns-space-6); }

.customer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3); }
.customer-toolbar .search { min-width: 0; }
.form.create-form { margin: 0; padding: 0; border: 0; }
.form.create-form > label:first-child { margin-top: 0; }
.form.create-form .buttons { justify-content: flex-end; }
.form .create-next { margin-top: var(--ns-space-4); }
.form .field-error { color: var(--ns-danger); }

.tag { display: inline-flex; align-items: center; height: var(--ns-tag-height); padding: 0 var(--ns-space-2); border-radius: var(--ns-radius-small); border: 1px solid var(--ns-border); background: var(--ns-surface-subtle); color: var(--ns-text-secondary); font-size: var(--ns-caption); font-weight: var(--ns-weight-medium); white-space: nowrap; }
.tag.primary { background: var(--ns-primary-soft); border-color: var(--ns-primary-border); color: var(--ns-primary); }
.tag.success { background: var(--ns-success-soft); border-color: var(--ns-success-border); color: var(--ns-success); }
.tag.warning { background: var(--ns-warning-soft); border-color: var(--ns-warning-border); color: var(--ns-warning); }

.btn { height: var(--ns-control-height); padding: 0 var(--ns-space-4); border-radius: var(--ns-radius-control); border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-text); font-weight: var(--ns-weight-medium); white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--ns-surface-hover); }
.btn.primary { background: var(--ns-primary); border-color: var(--ns-primary); color: var(--ns-surface); }
.btn.primary:hover:not(:disabled) { background: var(--ns-primary-hover); border-color: var(--ns-primary-hover); }
.btn.danger { background: var(--ns-danger); border-color: var(--ns-danger); color: var(--ns-surface); }
.btn.danger-text { color: var(--ns-danger); }
.btn.compact { height: var(--ns-control-compact); padding: 0 var(--ns-space-3); font-size: var(--ns-supporting); }
.btn:disabled { color: var(--ns-text-disabled); background: var(--ns-surface-subtle); border-color: var(--ns-border-subtle); }
.link { padding: 0; border: 0; background: none; color: var(--ns-primary); font-size: var(--ns-supporting); }
.link:hover { color: var(--ns-primary-hover); }

.field { width: 100%; height: var(--ns-control-height); padding: 0 var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-control); background: var(--ns-surface); }
.field:hover { border-color: var(--ns-primary-border); }
.field:focus { outline: none; border-color: var(--ns-focus); box-shadow: 0 0 0 3px var(--ns-primary-soft); }
.field::placeholder { color: var(--ns-text-disabled); }
.search { max-width: 520px; }

.tabs { display: flex; gap: var(--ns-space-2); margin: var(--ns-space-4) 0; flex-wrap: wrap; }
.tab { height: var(--ns-control-compact); padding: 0 var(--ns-space-3); border-radius: var(--ns-radius-pill); border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-text-secondary); font-size: var(--ns-supporting); }
.tab:hover { background: var(--ns-surface-hover); }
.tab[aria-selected="true"] { background: var(--ns-primary-soft); border-color: var(--ns-primary-border); color: var(--ns-primary); font-weight: var(--ns-weight-medium); }
.tab .num { margin-left: var(--ns-space-1); }

.card { background: var(--ns-surface); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-card-radius); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th { height: 48px; padding: 0 var(--ns-space-4); text-align: left; font-size: var(--ns-supporting); font-weight: var(--ns-weight-medium); color: var(--ns-text-secondary); background: var(--ns-surface-subtle); white-space: nowrap; }
td { padding: var(--ns-space-3) var(--ns-space-4); border-top: 1px solid var(--ns-border-subtle); color: var(--ns-text-secondary); vertical-align: top; }
td.name { color: var(--ns-text); font-weight: var(--ns-weight-medium); }
tbody tr { cursor: pointer; }
tbody tr:hover td.name .open { color: var(--ns-primary); }
.open { padding: 0; border: 0; background: none; font-weight: inherit; text-align: left; color: inherit; }
.warn { color: var(--ns-warning); }
.empty { padding: 56px var(--ns-space-6); text-align: center; color: var(--ns-text-muted); }
.empty strong { display: block; margin-bottom: var(--ns-space-1); color: var(--ns-text); font-weight: var(--ns-weight-medium); }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--ns-space-3); padding: var(--ns-space-3) var(--ns-space-4); border-top: 1px solid var(--ns-border-subtle); font-size: var(--ns-supporting); color: var(--ns-text-muted); }

.backdrop { position: fixed; inset: 0; background: var(--ns-backdrop); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--ns-surface); box-shadow: var(--ns-shadow-drawer); }
.drawer-head { display: flex; align-items: flex-start; gap: var(--ns-space-3); padding: var(--ns-space-4) var(--ns-space-6); border-bottom: 1px solid var(--ns-border-subtle); }
.drawer-head h2 { margin: 0; font-size: var(--ns-section-title); line-height: var(--ns-line-title); font-weight: var(--ns-weight-semibold); overflow-wrap: anywhere; }
.drawer-head .spacer { flex: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--ns-space-4) var(--ns-space-6) var(--ns-space-6); }
.section { margin-top: var(--ns-space-6); }
.section:first-child { margin-top: 0; }
.section h3 { margin: 0 0 var(--ns-space-2); font-size: var(--ns-supporting); font-weight: var(--ns-weight-medium); color: var(--ns-text-muted); }
.plan { display: flex; align-items: center; gap: var(--ns-space-3); padding: var(--ns-space-4); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-card-radius); background: var(--ns-surface-subtle); }
.plan .title { font-size: var(--ns-card-title); font-weight: var(--ns-weight-semibold); color: var(--ns-text); }
.plan .spacer { flex: 1; }
.rows { margin: 0; }
.rows div { display: flex; justify-content: space-between; gap: var(--ns-space-4); padding: var(--ns-space-2) 0; border-top: 1px solid var(--ns-border-subtle); }
.rows div:first-child { border-top: 0; }
.rows dt { color: var(--ns-text-secondary); overflow-wrap: anywhere; }
.rows dd { margin: 0; color: var(--ns-text); text-align: right; white-space: nowrap; }
.contact { display: block; }
.compare:focus { outline: none; }
.actions { display: flex; gap: var(--ns-space-2); flex-wrap: wrap; margin-top: var(--ns-space-3); }

.form { margin-top: var(--ns-space-3); padding: var(--ns-space-4); border: 1px solid var(--ns-primary-border); border-radius: var(--ns-card-radius); }
.form.danger { border-color: var(--ns-danger-border); }
.form h4 { margin: 0 0 var(--ns-space-3); font-size: var(--ns-body); font-weight: var(--ns-weight-semibold); }
.form label, .form .label { display: block; margin: var(--ns-space-3) 0 var(--ns-space-1); font-size: var(--ns-supporting); color: var(--ns-text-secondary); }
.form .hint { margin: var(--ns-space-1) 0 0; font-size: var(--ns-caption); color: var(--ns-text-muted); }
.choices { display: flex; gap: var(--ns-space-2); flex-wrap: wrap; }
.choice { height: var(--ns-control-compact); padding: 0 var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-control); background: var(--ns-surface); color: var(--ns-text-secondary); font-size: var(--ns-supporting); }
.choice:hover { background: var(--ns-surface-hover); }
.choice[aria-pressed="true"] { background: var(--ns-primary-soft); border-color: var(--ns-primary); color: var(--ns-primary); font-weight: var(--ns-weight-medium); }
.form .field.short { width: 168px; }
.form .buttons { display: flex; gap: var(--ns-space-2); margin-top: var(--ns-space-4); }
.compare { margin: 0; }
.compare div { display: grid; grid-template-columns: 72px 1fr; gap: var(--ns-space-3); padding: var(--ns-space-2) 0; }
.compare dt { color: var(--ns-text-muted); font-size: var(--ns-supporting); }
.compare dd { margin: 0; color: var(--ns-text); overflow-wrap: anywhere; }
.compare .after dd { font-weight: var(--ns-weight-semibold); }

.note { margin: 0 0 var(--ns-space-4); padding: var(--ns-space-3) var(--ns-space-4); border-radius: var(--ns-radius-control); border: 1px solid var(--ns-border); font-size: var(--ns-supporting); }
.note.success { background: var(--ns-success-soft); border-color: var(--ns-success-border); color: var(--ns-success); }
.note.error { background: var(--ns-danger-soft); border-color: var(--ns-danger-border); color: var(--ns-danger); }
.form .note { margin: var(--ns-space-3) 0 0; }
.history { margin: 0; padding: 0; list-style: none; }
.history li { padding: var(--ns-space-2) 0; border-top: 1px solid var(--ns-border-subtle); }
.history li:first-child { border-top: 0; }
.history .what { color: var(--ns-text); }
.gate { max-width: 420px; margin: 18vh auto 0; padding: var(--ns-space-6); text-align: center; }
.gate h2 { margin: 0 0 var(--ns-space-2); font-size: var(--ns-section-title); font-weight: var(--ns-weight-semibold); }
.gate p { margin: 0; color: var(--ns-text-secondary); }
.gate.login { text-align: left; margin-top: 12vh; background: var(--ns-surface); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-card-radius); }
.gate.login h2 { margin-bottom: var(--ns-space-4); }
.gate.login label { display: block; margin: var(--ns-space-3) 0 var(--ns-space-1); font-size: var(--ns-supporting); color: var(--ns-text-secondary); }
.gate.login .hint { margin: 0; font-size: var(--ns-supporting); color: var(--ns-text-secondary); }
.gate.login .note { margin: var(--ns-space-3) 0 0; }
.gate.login .link { display: block; margin: var(--ns-space-3) auto 0; }
.btn.wide { width: 100%; margin-top: var(--ns-space-4); }
[hidden] { display: none !important; }
@media (max-width: 900px) { .hide-narrow { display: none; } .page { padding: var(--ns-space-4); } }
@media (max-width: 560px) {
  .top { padding: var(--ns-space-2) var(--ns-space-4); }
  .top .tag { display: none; }
  .page { padding: var(--ns-space-3); }
  th, td { padding-left: var(--ns-space-3); padding-right: var(--ns-space-3); }
  .hide-small { display: none; }
  .drawer-head, .drawer-body { padding-left: var(--ns-space-4); padding-right: var(--ns-space-4); }
  .gate { margin-top: 8vh; margin-left: var(--ns-space-3); margin-right: var(--ns-space-3); }
  /* Phones zoom the page when a focused field's text is smaller than this. */
  .field { font-size: var(--ns-card-title); }
  .rows div { flex-wrap: wrap; }
  .rows dd { white-space: normal; }
}
  .plugin-page > .card { margin-bottom: var(--ns-space-4); }
  .plugin-version + .plugin-version { border-top: 1px solid var(--ns-border-subtle); }
  .plugin-version h3 { margin-bottom: var(--ns-space-2); }
  .plugin-form .field { margin-bottom: var(--ns-space-3); }
  .plugin-form .buttons { display: flex; gap: var(--ns-space-2); }
  .plugin-table-scroll { overflow-x: auto; }
  .plugin-table-scroll table { min-width: 800px; }
  .plugin-table-scroll td { white-space: nowrap; }
  .plugin-table-scroll tbody tr { cursor: default; }
  .plugin-table-scroll tbody tr:hover { background: transparent; }