/* SuXiang v2.0.6 — graphite and violet skin. Additive only: no XBoard routes,
 * node data, forms or business logic are replaced. */
:root {
  --sx-page: #f7f7fa;
  --sx-surface: #ffffff;
  --sx-surface-raised: #ffffff;
  --sx-surface-muted: #f0f0f5;
  --sx-ink: #23212d;
  --sx-muted: #716f7e;
  --sx-border: #e2e1e9;
  --sx-border-strong: #ccc9d8;
  --sx-accent: #6f5ce8;
  --sx-accent-strong: #5c46d5;
  --sx-accent-soft: rgba(111, 92, 232, .11);
  --sx-focus: rgba(111, 92, 232, .22);
  --sx-shadow: 0 9px 26px rgba(31, 28, 46, .07);
  --sx-shadow-raised: 0 17px 38px rgba(31, 28, 46, .12);
}

html, body, #app { min-height: 100%; }
body {
  color: var(--sx-ink);
  background: var(--sx-page);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* Core surfaces. Keep the native component geometry intact. */
.n-card, .n-dialog, .n-modal, .n-drawer, .n-popover, .n-dropdown-menu, .n-list, .n-data-table, .n-alert {
  border-color: var(--sx-border) !important;
}
.n-card {
  background: var(--sx-surface) !important;
  border-radius: 14px !important;
  box-shadow: var(--sx-shadow);
}
.n-card .n-card-header, .n-card .n-card-header__main { color: var(--sx-ink) !important; font-weight: 700; }
.n-data-table-th, .n-data-table-th--selection, .n-data-table-td { background: transparent !important; border-color: var(--sx-border) !important; }
.n-data-table-tr:hover .n-data-table-td, .n-list-item:hover, .n-menu-item-content:hover { background: var(--sx-accent-soft) !important; }

/* Accent is deliberately limited to state, focus and primary actions. */
.n-button--primary-type, .n-button--primary-type:hover, .n-button--primary-type:focus {
  color: #fff !important;
  border-color: var(--sx-accent) !important;
  background: var(--sx-accent) !important;
  box-shadow: 0 6px 16px rgba(111, 92, 232, .24);
}
.n-button:not(.n-button--primary-type) { border-color: var(--sx-border-strong) !important; }
.n-button:not(.n-button--disabled):hover { border-color: var(--sx-accent) !important; color: var(--sx-accent) !important; }
.n-input-wrapper, .n-base-selection { background: var(--sx-surface-muted) !important; border-color: var(--sx-border) !important; box-shadow: none !important; }
.n-input-wrapper:focus-within, .n-base-selection.n-base-selection--active { border-color: var(--sx-accent) !important; box-shadow: 0 0 0 3px var(--sx-focus) !important; }
.n-tabs-tab--active, .n-tabs-tab:hover, a:hover { color: var(--sx-accent) !important; }
.n-tabs-bar { background: var(--sx-accent) !important; }
.n-menu-item-content--selected, .n-menu-item-content--selected::before, .n-menu-item--selected .n-menu-item-content {
  background: var(--sx-accent-soft) !important;
}
.n-menu-item-content--selected, .n-menu-item-content--selected *, .n-menu-item--selected .n-menu-item-content, .n-menu-item--selected .n-menu-item-content * {
  color: var(--sx-accent-strong) !important;
  opacity: 1 !important;
}

/* Dashboard hierarchy. */
.sx-notice-card { border-top: 3px solid var(--sx-accent) !important; background: var(--sx-surface-raised) !important; box-shadow: var(--sx-shadow-raised) !important; }
.sx-notice-card .n-card-header, .sx-notice-card .n-card-header__main, .sx-notice-card .n-card__content { color: var(--sx-ink) !important; }
.sx-notice-card .n-tag { color: var(--sx-accent) !important; border-color: rgba(111, 92, 232, .28) !important; background: var(--sx-accent-soft) !important; }
.sx-traffic-card { border-color: rgba(111, 92, 232, .24) !important; background: var(--sx-surface-raised) !important; }
.n-progress-graph-line-fill { background: linear-gradient(90deg, var(--sx-accent), #9c8cff) !important; box-shadow: 0 0 12px rgba(111, 92, 232, .26) !important; }
.n-progress-graph-line-rail { background: var(--sx-surface-muted) !important; }

/* The reset row is a cloned native quick-link: keep its original typography and icon layout. */
[data-sx-shortcut="reset"] { cursor: pointer; }

/* The dashboard shortcut list can become a two-column flex/grid layout.
   Reset subscription must always remain a complete row directly below
   one-click subscription, never a second cell sharing that row. */
body.sx-dashboard [data-sx-shortcut="reset"] {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  clear: both !important;
}
body.sx-dashboard [data-sx-shortcut="reset"] > * { min-width: 0 !important; }

/* Direct dashboard reset confirmation. It follows the stock copy and behaves without route changes. */
.sx-reset-modal {
  position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center;
  padding: 20px; box-sizing: border-box; background: rgba(12, 11, 18, .58); backdrop-filter: blur(4px);
}
.sx-reset-modal__panel {
  position: relative; width: min(430px, 100%); box-sizing: border-box; padding: 25px 25px 22px;
  color: var(--sx-ink); background: var(--sx-surface); border: 1px solid var(--sx-border);
  border-radius: 14px; box-shadow: var(--sx-shadow-raised);
}
.sx-reset-modal__panel h2 { margin: 0 36px 12px 0; color: var(--sx-ink); font-size: 18px; line-height: 1.4; }
.sx-reset-modal__panel p { margin: 0; color: var(--sx-muted); line-height: 1.7; }
.sx-reset-modal__close {
  position: absolute; top: 12px; right: 13px; width: 30px; height: 30px; padding: 0; border: 0;
  color: var(--sx-muted); background: transparent; font: 28px/1 sans-serif; cursor: pointer;
}
.sx-reset-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.sx-reset-modal__actions button { min-width: 76px; min-height: 34px; padding: 0 14px; border: 1px solid var(--sx-border-strong); border-radius: 7px; color: var(--sx-ink); background: transparent; cursor: pointer; font: inherit; }
.sx-reset-modal__actions .sx-reset-modal__confirm { color: #fff; border-color: var(--sx-accent); background: var(--sx-accent); }
.sx-reset-modal__actions button:disabled { opacity: .62; cursor: wait; }

/* Login: a focused reading width, with adequate contrast. */
body.sx-login-page { background: radial-gradient(circle at 50% 0, rgba(111, 92, 232, .11), transparent 38%), var(--sx-page); }
body.sx-login-page .n-card { max-width: 430px; margin-left: auto !important; margin-right: auto !important; }
body.sx-login-page .n-card .n-card-header, body.sx-login-page .n-card h1, body.sx-login-page .n-card h2, body.sx-login-page .n-card h3 { color: var(--sx-ink) !important; }
body.sx-login-page .n-card p, body.sx-login-page .n-card label, body.sx-login-page .n-card .n-form-item-label { color: var(--sx-muted) !important; opacity: 1 !important; }
body.sx-login-page .n-input__input-el, body.sx-login-page .n-input__placeholder { color: var(--sx-ink) !important; opacity: 1 !important; }
body.sx-login-page .n-input__placeholder { color: var(--sx-muted) !important; }
.sx-auth-surface { border-top: 3px solid var(--sx-accent) !important; box-shadow: var(--sx-shadow-raised) !important; }

/* Dialogs have their own compact surface; announcements remain scrollable. */
.n-modal-container .n-dialog, .n-modal-container .n-card { background: var(--sx-surface) !important; color: var(--sx-ink) !important; }
.n-modal-container .n-dialog__title, .n-modal-container .n-card-header, .n-modal-container .n-card-header__main { color: var(--sx-ink) !important; }
.n-modal-container .n-dialog__content, .n-modal-container .n-card__content { color: var(--sx-muted) !important; }

/* Theme script mirrors the stock light/dark switch into this attribute. */
html[data-sx-mode="dark"] {
  --sx-page: #111116;
  --sx-surface: #1a1a21;
  --sx-surface-raised: #202027;
  --sx-surface-muted: #292933;
  --sx-ink: #f4f2fa;
  --sx-muted: #b8b4c5;
  --sx-border: #35343f;
  --sx-border-strong: #4a4857;
  --sx-accent: #a393ff;
  --sx-accent-strong: #c3bbff;
  --sx-accent-soft: rgba(163, 147, 255, .18);
  --sx-focus: rgba(163, 147, 255, .28);
  --sx-shadow: 0 9px 26px rgba(0, 0, 0, .24);
  --sx-shadow-raised: 0 18px 42px rgba(0, 0, 0, .35);
}
html[data-sx-mode="dark"] body, html[data-sx-mode="dark"] .n-layout, html[data-sx-mode="dark"] .n-layout-content { background: var(--sx-page) !important; }
html[data-sx-mode="dark"] .n-layout-header, html[data-sx-mode="dark"] .n-layout-sider { background: #16161c !important; border-color: var(--sx-border) !important; }
html[data-sx-mode="dark"] .n-card, html[data-sx-mode="dark"] .n-list, html[data-sx-mode="dark"] .n-data-table, html[data-sx-mode="dark"] .n-dialog, html[data-sx-mode="dark"] .n-modal { background: var(--sx-surface) !important; }
html[data-sx-mode="dark"] .n-input-wrapper, html[data-sx-mode="dark"] .n-base-selection { color: var(--sx-ink) !important; }
html[data-sx-mode="dark"] .n-input__input-el, html[data-sx-mode="dark"] .n-input__placeholder { color: var(--sx-ink) !important; opacity: 1 !important; }
html[data-sx-mode="dark"] .n-input__placeholder { color: var(--sx-muted) !important; }
html[data-sx-mode="dark"] .n-menu-item-content--selected, html[data-sx-mode="dark"] .n-menu-item-content--selected *, html[data-sx-mode="dark"] .n-menu-item--selected .n-menu-item-content, html[data-sx-mode="dark"] .n-menu-item--selected .n-menu-item-content * { color: #e8e3ff !important; }

@media (max-width: 767px) {
  .n-card { border-radius: 12px !important; }
  body.sx-login-page #app { box-sizing: border-box; padding: 24px 18px; }
  body.sx-login-page .n-card { width: min(390px, calc(100vw - 36px)) !important; margin-top: 16px !important; }
  body.sx-login-page .n-card .n-card__content { padding: 22px 20px !important; }
  body.sx-dashboard .n-card { margin-bottom: 14px !important; }
  body.sx-dashboard .n-card .n-card-header { padding: 16px 16px 8px !important; }
  body.sx-dashboard .n-card .n-card__content { padding: 14px 16px !important; }
  body.sx-dashboard .sx-notice-card .n-card__content { min-height: 170px; padding: 17px 18px !important; }
  body.sx-dashboard .sx-notice-card .n-card__content * { overflow-wrap: anywhere; }
  body.sx-dashboard .n-list-item { padding-left: 16px !important; padding-right: 16px !important; }
  body.sx-dashboard .n-list-item__main { min-width: 0; }
  .n-modal-container { padding: 0 18px !important; box-sizing: border-box; }
  .n-modal-container .n-dialog, .n-modal-container .n-card { width: min(560px, calc(100vw - 36px)) !important; max-width: calc(100vw - 36px) !important; margin-left: auto !important; margin-right: auto !important; }
  .n-modal-container .n-dialog__content, .n-modal-container .n-card__content { max-height: 58vh; overflow: auto; }
  .n-modal-container .n-dialog__action { margin-top: 18px !important; }
  .sx-reset-modal { padding: 16px; }
  .sx-reset-modal__panel { padding: 20px 18px 18px; border-radius: 12px; }
  .sx-reset-modal__panel h2 { font-size: 17px; }
}