:root {
  --m3-bg: #06111a;
  --m3-bg-deep: #030b12;
  --m3-sidebar: #07151f;
  --m3-panel: #0b1c29;
  --m3-panel-2: #0d2232;
  --m3-panel-hover: #102a3d;
  --m3-line: #1b3a4c;
  --m3-line-soft: rgba(95, 143, 170, .18);
  --m3-text: #e8f4fb;
  --m3-muted: #8ca9ba;
  --m3-cyan: #2bd9c9;
  --m3-blue: #4ca8ff;
  --m3-green: #55e6ad;
  --m3-amber: #f6c86b;
  --m3-red: #ff7b89;
  --m3-radius: 14px;
  --m3-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--m3-bg-deep);
}

body {
  color: var(--m3-text) !important;
  background:
    radial-gradient(circle at 82% 0%, rgba(30, 111, 145, .13), transparent 33%),
    linear-gradient(145deg, var(--m3-bg-deep), var(--m3-bg) 42%, #07141e) !important;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--m3-cyan), var(--m3-blue), transparent);
  opacity: .7;
}

::selection { color: #031016; background: var(--m3-cyan); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(1, 8, 13, .45); }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 9px; background: #27485b; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #39708a; background-clip: padding-box; }

h1, h2, h3, h4, strong { color: var(--m3-text); }
p, small, .muted { color: var(--m3-muted); }
a { color: #7fd7ff; }

/* Unified shell */
body > aside,
.app > .sidebar,
.app-shell > .sidebar,
aside.sidebar {
  border-color: var(--m3-line) !important;
  color: var(--m3-text) !important;
  background: linear-gradient(180deg, #071722, #06121b 58%, #051019) !important;
  box-shadow: 14px 0 36px rgba(0, 0, 0, .14);
}

.brand {
  color: var(--m3-text) !important;
  letter-spacing: -.02em;
}

.brand::before {
  content: "沐";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  border: 1px solid rgba(43, 217, 201, .5);
  border-radius: 12px;
  color: var(--m3-cyan);
  background: linear-gradient(145deg, rgba(43, 217, 201, .17), rgba(76, 168, 255, .08));
  box-shadow: inset 0 0 18px rgba(43, 217, 201, .08), 0 8px 24px rgba(0, 0, 0, .2);
  font-size: 15px;
  font-weight: 800;
}

.brand,
.sidebar .brand { display: flex !important; align-items: center; }

.sidebar nav,
body > aside nav { gap: 7px; }

.sidebar nav a,
.sidebar .nav,
body > aside .nav,
.nav-item,
.main-nav .nav-btn {
  position: relative;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #a9c1cf !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease !important;
}

.sidebar nav a:hover,
.sidebar .nav:hover,
body > aside .nav:hover,
.nav-item:hover,
.main-nav .nav-btn:hover {
  color: var(--m3-text) !important;
  border-color: rgba(76, 168, 255, .28) !important;
  background: rgba(76, 168, 255, .08) !important;
  transform: translateX(2px);
}

.sidebar nav a.active,
.sidebar .nav.active,
body > aside .nav.active,
.nav-item.active,
.main-nav .nav-btn.active {
  color: #efffff !important;
  border-color: rgba(43, 217, 201, .48) !important;
  background: linear-gradient(90deg, rgba(43, 217, 201, .15), rgba(76, 168, 255, .08)) !important;
  box-shadow: inset 3px 0 0 var(--m3-cyan), 0 10px 26px rgba(0, 0, 0, .12) !important;
}

.foot,
.side-foot,
.sidebar-foot {
  border-color: var(--m3-line) !important;
  color: var(--m3-muted) !important;
  background: rgba(13, 34, 50, .72) !important;
}

main,
.main { color: var(--m3-text); background: transparent !important; }

main > header,
.topbar,
.app-shell > .topbar {
  border-color: var(--m3-line) !important;
  color: var(--m3-text) !important;
  background: rgba(7, 21, 31, .86) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
  backdrop-filter: blur(16px);
}

.topbar h1,
main > header h1 {
  margin-bottom: 4px;
  letter-spacing: -.035em;
}

.topbar p,
main > header p { color: var(--m3-muted) !important; }

/* Buttons and controls */
button,
.button,
[role="button"],
.platform-back-link,
.template-link {
  min-height: 38px;
  border: 1px solid #24485c !important;
  border-radius: 10px !important;
  color: #dceef8 !important;
  background: linear-gradient(180deg, rgba(16, 45, 64, .96), rgba(10, 31, 45, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 7px 18px rgba(0, 0, 0, .12) !important;
  font-weight: 650;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

button:hover,
.button:hover,
[role="button"]:hover,
.platform-back-link:hover,
.template-link:hover {
  border-color: rgba(43, 217, 201, .68) !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(19, 58, 77, .98), rgba(11, 39, 54, .98)) !important;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .2), 0 0 0 1px rgba(43, 217, 201, .08) !important;
  transform: translateY(-1px);
}

button:active,
.button:active,
[role="button"]:active { transform: translateY(1px) scale(.985) !important; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--m3-cyan) !important;
  outline-offset: 2px;
}

button.primary,
.primary,
#loginBtn,
#newTicketBtn,
#newOrder,
#newOrder2,
#newService,
#createProductBtn,
.brand-card button[data-brand] {
  border-color: rgba(43, 217, 201, .76) !important;
  color: #031416 !important;
  background: linear-gradient(135deg, #32e0ce, #39b9f2) !important;
  box-shadow: 0 10px 26px rgba(43, 217, 201, .17), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

button.primary:hover,
.primary:hover,
#loginBtn:hover,
#newTicketBtn:hover,
#newOrder:hover,
#newOrder2:hover,
#newService:hover,
#createProductBtn:hover,
.brand-card button[data-brand]:hover {
  border-color: #8dfff4 !important;
  color: #020e12 !important;
  background: linear-gradient(135deg, #53f0df, #60c7ff) !important;
  box-shadow: 0 13px 30px rgba(43, 217, 201, .23) !important;
}

.danger-btn,
button.danger,
.delete-order,
[data-delete] {
  border-color: rgba(255, 123, 137, .42) !important;
  color: #ffadb6 !important;
  background: rgba(93, 31, 42, .27) !important;
}

button[disabled],
input[disabled],
select[disabled] { cursor: not-allowed; opacity: .48; }

input,
select,
textarea {
  min-height: 40px;
  border: 1px solid #244458 !important;
  border-radius: 10px !important;
  color: var(--m3-text) !important;
  background: #091a27 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16) !important;
}

input::placeholder,
textarea::placeholder { color: #668596 !important; }

input:hover,
select:hover,
textarea:hover { border-color: #35647b !important; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--m3-cyan) !important;
  box-shadow: 0 0 0 3px rgba(43, 217, 201, .1) !important;
}

input[type="checkbox"],
input[type="radio"] { min-height: auto; accent-color: var(--m3-cyan); }

/* Content surfaces */
.panel,
.card,
.settings-card,
.module-card,
.brand-card,
.stat,
.stat-card,
.metric-card,
.todo-card,
.upload-card,
.receipt-metric,
.account-card,
.approval-card {
  border-color: var(--m3-line) !important;
  color: var(--m3-text) !important;
  background: linear-gradient(155deg, rgba(13, 34, 50, .94), rgba(9, 27, 40, .94)) !important;
  box-shadow: var(--m3-shadow) !important;
}

.panel,
.card,
.settings-card,
.module-card,
.brand-card,
.stat,
.stat-card,
.metric-card,
.todo-card,
.upload-card,
.receipt-metric { border-radius: var(--m3-radius) !important; }

.module-card:hover,
.brand-card:hover,
.todo-card:hover,
.upload-card:hover {
  border-color: rgba(43, 217, 201, .42) !important;
  background: linear-gradient(155deg, rgba(16, 43, 61, .98), rgba(10, 31, 45, .98)) !important;
  transform: translateY(-2px);
}

.panel-head,
.dialog-head {
  border-color: var(--m3-line-soft) !important;
}

.hero,
.scan-strip,
.query,
.toolbar,
.filters,
.stats-filter-bar,
.product-create-panel,
.product-list-toolbar,
.brand-page-head,
.purchase-progress {
  border-color: var(--m3-line) !important;
  color: var(--m3-text) !important;
  background: rgba(10, 29, 42, .74) !important;
  box-shadow: none !important;
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 15%, rgba(43, 217, 201, .13), transparent 29%),
    linear-gradient(135deg, rgba(13, 41, 58, .95), rgba(8, 27, 40, .94)) !important;
}

.hero::after {
  content: "Muchen Digital Operations";
  position: absolute;
  right: 22px;
  bottom: 12px;
  color: rgba(123, 192, 216, .18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.badge,
.role-chip,
.status,
.account-chip,
.server-sync-status,
.nav-badge {
  border-color: rgba(76, 168, 255, .28) !important;
  color: #a8dffc !important;
  background: rgba(76, 168, 255, .09) !important;
}

.online-dot,
.server-sync-status::before { background: var(--m3-green) !important; box-shadow: 0 0 12px rgba(85, 230, 173, .8); }

.tabs,
.quick-tabs,
.range-tabs,
.order-date-tabs,
.date-filter,
.brand-tabs,
.shop-filter-bar {
  border-color: var(--m3-line) !important;
  background: rgba(8, 24, 35, .72) !important;
}

.tabs button.active,
.quick-tabs button.active,
.range-tabs button.active,
.order-date-tabs button.active,
.date-filter button.active,
.brand-tabs button.active,
.shop-filter-bar button.active {
  border-color: rgba(43, 217, 201, .5) !important;
  color: #dffffb !important;
  background: rgba(43, 217, 201, .13) !important;
  box-shadow: inset 0 -2px 0 var(--m3-cyan) !important;
}

table { color: var(--m3-text) !important; background: transparent !important; }
thead,
thead tr { background: #0c2231 !important; }
th {
  border-color: var(--m3-line) !important;
  color: #91b8cc !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
td { border-color: var(--m3-line-soft) !important; color: #d7e7ef !important; }
tbody tr { background: rgba(8, 25, 37, .3) !important; }
tbody tr:hover { background: rgba(43, 217, 201, .055) !important; }
.table-wrap,
.table-panel { border-color: var(--m3-line) !important; border-radius: 13px !important; background: rgba(5, 18, 27, .44) !important; }

dialog,
.modal,
.modal-backdrop { color: var(--m3-text) !important; }
.modal,
.modal-backdrop { background: rgba(1, 7, 11, .82) !important; backdrop-filter: blur(10px); }
.dialog,
.modal-panel,
.audit-dialog {
  border: 1px solid rgba(76, 168, 255, .34) !important;
  border-radius: 18px !important;
  color: var(--m3-text) !important;
  background: #091925 !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .56) !important;
}

#toast,
.toast {
  border: 1px solid rgba(43, 217, 201, .38) !important;
  border-radius: 12px !important;
  color: #eafffd !important;
  background: rgba(8, 38, 48, .96) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4) !important;
}

/* Main platform login */
.login-view {
  background:
    radial-gradient(circle at 70% 20%, rgba(43, 217, 201, .13), transparent 32%),
    linear-gradient(145deg, #030b12, #071824) !important;
}
.login-panel {
  border: 1px solid rgba(76, 168, 255, .3) !important;
  border-radius: 22px !important;
  color: var(--m3-text) !important;
  background: rgba(8, 25, 37, .94) !important;
  box-shadow: 0 38px 100px rgba(0, 0, 0, .5) !important;
}
.login-panel h1::before {
  content: "Muchen Digital OS";
  display: block;
  margin-bottom: 9px;
  color: var(--m3-cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

/* Module-specific polish */
.module-card.enabled::before,
.brand-card::before,
.stat::before,
.stat-card::before,
.metric-card::before {
  background: linear-gradient(180deg, var(--m3-cyan), var(--m3-blue)) !important;
}
.stats b,
.stat strong,
.stat-card strong,
.metric-card strong,
.receipt-metric strong { color: #72e8da !important; }
.receipt-metric.shortage strong,
.bad,
.negative { color: var(--m3-red) !important; }
.ok,
.positive { color: var(--m3-green) !important; }
.price { color: #d8e8ef !important; }

@media (max-width: 1100px) {
  main > header,
  .topbar { gap: 14px; }
  .top-actions,
  .user-actions,
  .account-actions { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  body::before { position: absolute; }
  body > aside,
  .app > .sidebar,
  .app-shell > .sidebar,
  aside.sidebar { box-shadow: none; }
  .brand::before { width: 34px; height: 34px; border-radius: 10px; }
  main > header,
  .topbar,
  .app-shell > .topbar { background: rgba(7, 21, 31, .96) !important; }
  button,
  .button,
  [role="button"],
  input,
  select { min-height: 42px; }
  .panel,
  .card,
  .settings-card,
  .module-card,
  .brand-card { border-radius: 12px !important; }
  .hero::after { display: none; }
}