/* Shared product UI system: calm operational surfaces, clear hierarchy, and restrained motion. */
:root {
  --ui-canvas: #0b1119;
  --ui-surface: #111b28;
  --ui-surface-raised: #162334;
  --ui-surface-hover: #1a2b3f;
  --ui-border: #263a50;
  --ui-border-strong: #3d5872;
  --ui-text: #f2f7fb;
  --ui-text-soft: #b3c2d1;
  --ui-text-muted: #8296aa;
  --ui-blue: #42a5ff;
  --ui-blue-strong: #147bd1;
  --ui-teal: #32d1bf;
  --ui-amber: #f3b65b;
  --ui-red: #ef6d7b;
  --ui-radius: 8px;
  --ui-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  --ui-transition: 180ms ease;
}

html { scroll-padding-top: 24px; }

body {
  color: var(--ui-text);
  background: var(--ui-canvas);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

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

button, a, input, select, textarea, label.dropzone { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, label.dropzone:focus-within {
  outline: 3px solid rgba(66, 165, 255, 0.9) !important;
  outline-offset: 3px;
}

button, a { transition: color var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition); }

/* Control centre home */
body:has(.topbar) { background: var(--ui-canvas); }
body:has(.topbar)::before { opacity: 0.12; mask-image: none; background-size: 96px 96px; }
body:has(.topbar) #starfield { opacity: 0.28; }
body:has(.topbar) .scanline { display: none; }

.topbar {
  height: 72px;
  grid-template-columns: minmax(242px, 320px) 1fr minmax(410px, 500px);
  gap: 22px;
  padding: 0 28px;
  border-bottom-color: var(--ui-border);
  background: rgba(11, 17, 25, 0.96);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.topbar::after { background: var(--ui-blue); opacity: 0.38; }
.brand { gap: 12px; }
.brand strong { font-size: clamp(20px, 1.7vw, 26px); text-shadow: none; }
.brand-mark { width: 42px; border-radius: 12px; border-color: rgba(66, 165, 255, 0.66); background: #123049; box-shadow: inset 0 0 0 1px rgba(50, 209, 191, 0.18); }
.brand-mark::before { border-color: rgba(50, 209, 191, 0.55); }
.brand-mark::after { display: none; }
.brand-mark span { font-size: 15px; text-shadow: none; }
.nav { gap: clamp(14px, 1.65vw, 30px); }
.nav a { font-size: 14px; color: var(--ui-text-soft); }
.nav a.active, .nav a:hover { color: var(--ui-text); text-shadow: none; }
.nav a.active::after, .nav a:hover::after { height: 2px; width: 36px; border-radius: 0; background: var(--ui-teal); box-shadow: none; }
.header-actions { gap: 8px; }
.search-box { height: 38px; border-color: var(--ui-border-strong); border-radius: 7px; background: #0d1722; box-shadow: none; }
.icon-btn, .ai-btn, .admin-btn { min-height: 40px; }
.icon-btn, .ai-btn { width: 40px; border-radius: 7px; }
.icon-btn:hover, .admin-btn:hover, .ai-btn:hover { background: var(--ui-surface-hover); box-shadow: none; }
.ai-btn { border-color: var(--ui-border-strong); box-shadow: none; background: #101b28; }

.shell {
  width: min(1600px, 100%);
  min-height: calc(100vh - 72px);
  grid-template-columns: minmax(310px, 340px) minmax(520px, 1fr) minmax(310px, 340px);
  gap: 20px;
  padding: 20px 24px 32px;
}
.panel { gap: 16px; }
.glass-panel {
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.glass-panel::before { display: none; }
.panel-title { min-width: 0; color: var(--ui-text); font-size: 15px; }
.panel-title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-title button { width: 32px; height: 32px; border-radius: 6px; }
.panel-title button:hover { background: var(--ui-surface-hover); }
.panel-left .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-grid div {
  min-width: 0;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px 11px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: #101b28;
  box-shadow: none;
}
.quick-grid div:hover { border-color: var(--ui-blue); background: var(--ui-surface-hover); transform: translateY(-2px); }
.quick-grid span,
.metric-grid span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-grid span { font-size: 13px; }
.panel-left .metric-grid,
.panel-right .state-grid,
.panel-right .trend-stats,
.panel-left .rings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.metric-grid { gap: 8px; }
.metric-grid div, .state-grid div { border-color: var(--ui-border); border-radius: 6px; background: #101b28; }
.metric-grid div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px 11px;
  text-align: center;
}
.metric-grid span, .state-grid span, .trend-stats span { font-size: 12px; }
.metric-grid strong, .state-grid b { font-size: 22px; }
.metric-grid span,
.metric-grid strong {
  flex: 0 0 auto;
  line-height: 1.2;
}
.metric-grid strong, .health-main strong { color: var(--ui-text); }
.state-grid div,
.trend-stats div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 4px 7px;
  text-align: center;
}
.state-grid span,
.state-grid b,
.trend-stats span,
.trend-stats b {
  flex: 0 0 auto;
  line-height: 1.2;
}
.donut { position: relative; top: -6px; box-shadow: none; }
.rings div { background: #142133; }
.constellation {
  min-height: 650px;
  border: 1px solid rgba(38, 58, 80, 0.75);
  border-radius: var(--ui-radius);
  background: radial-gradient(circle at 50% 47%, rgba(20, 123, 209, 0.12), transparent 34%), #0d1722;
  overflow: hidden;
}
.constellation::before { opacity: 0.28; }
.core { width: 260px; background: radial-gradient(circle at 38% 30%, #225b91, #0e2338 67%); box-shadow: inset 0 0 0 1px rgba(66, 165, 255, 0.6), 0 0 38px rgba(20, 123, 209, 0.22); }
.core::before, .core::after, .core-ring { border-color: rgba(66, 165, 255, 0.32); box-shadow: none; }
.core h1 { font-size: clamp(28px, 3vw, 40px); text-shadow: none; }
.core p { color: var(--ui-text-soft); font-size: 14px; }
.system-node { --node-size: 118px; }
.system-node::before { border-color: color-mix(in srgb, var(--tone) 55%, var(--ui-border)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); }
.system-node::after { border-color: color-mix(in srgb, var(--tone) 30%, transparent); box-shadow: none; }
.system-node .orb-base { background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.25), transparent 16%), linear-gradient(145deg, color-mix(in srgb, var(--tone) 35%, #152638), #0f1c2a 68%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 44%, transparent), 0 12px 24px rgba(0,0,0,.28); }
.system-node .glyph { color: var(--tone); text-shadow: none; }
.system-node .node-label { color: #fff; font-size: 15px; text-shadow: 0 1px 3px #080d14; }
.system-node .energy { display: none; }
.system-node:hover, .system-node:focus-visible { z-index: 6; }
.system-node:hover::before, .system-node:focus-visible::before { opacity: 1; }
.system-node:hover::after, .system-node:focus-visible::after { opacity: 0.8; }
.health-main { border-color: var(--ui-border); background: #101b28; }
.heartbeat { box-shadow: none; }
.trend { min-width: 0; }
.trend svg { height: 174px; border-color: var(--ui-border); background: #101b28; }
.activity li { border-bottom-color: var(--ui-border); }
.bottom-strip { position: relative; left: auto; bottom: auto; transform: none; width: min(980px, calc(100% - 48px)); margin: -22px auto 24px; border-color: var(--ui-border); border-radius: var(--ui-radius); background: #101b28; box-shadow: var(--ui-shadow); }

/* Report tools and automatic monthly reports */
body:has(.container) { background: var(--ui-canvas) !important; align-items: stretch; justify-content: flex-start; padding: 32px 24px 48px !important; }
body:has(.container)::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.3; background: linear-gradient(rgba(91, 126, 157, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 126, 157, .055) 1px, transparent 1px); background-size: 96px 96px; }
.container { position: relative; max-width: 1200px !important; margin: 0 auto; }
.header { text-align: left !important; margin: 0 0 28px !important; padding: 4px 0 22px; border-bottom: 1px solid var(--ui-border); }
.header .chip { border-radius: 999px; border-color: rgba(66, 165, 255, .5) !important; background: rgba(66, 165, 255, .1) !important; color: #b9dcff !important; font-family: Inter, "Microsoft YaHei", sans-serif !important; letter-spacing: .04em !important; }
.header .chip::before { background: var(--ui-teal) !important; box-shadow: none !important; }
.header h1 { margin-top: 0; color: var(--ui-text) !important; font-size: clamp(26px, 4vw, 36px) !important; letter-spacing: 0 !important; }
.header p { max-width: 680px; color: var(--ui-text-soft) !important; font-size: 15px !important; line-height: 1.7 !important; }
.tool-grid { gap: 18px !important; }
.card, .card.featured { border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius) !important; background: var(--ui-surface) !important; box-shadow: var(--ui-shadow) !important; }
.card.featured { border-color: rgba(66, 165, 255, .68) !important; }
.card:hover { border-color: var(--ui-border-strong) !important; transform: translateY(-2px); }
.card-head { border-bottom-color: var(--ui-border) !important; }
.card-title { color: var(--ui-text) !important; font-size: 18px !important; }
.card-desc { color: var(--ui-text-soft) !important; line-height: 1.65 !important; }
.section-label { color: #d7e8f9 !important; font-size: 13px !important; }
.file-slots { gap: 12px !important; }
.file-slot { background: transparent !important; }
.dropzone { min-height: 112px; border: 1px dashed #42617b !important; border-radius: 7px !important; background: #0e1824 !important; box-shadow: none !important; }
.dropzone::before { display: none !important; }
.dropzone:hover, .dropzone.drag { border-color: var(--ui-blue) !important; background: #12263a !important; transform: none !important; }
.dropzone.ready { border-style: solid !important; border-color: var(--ui-teal) !important; background: rgba(50, 209, 191, .08) !important; }
.slot-icon { background: #173754 !important; box-shadow: none !important; }
.file-glyph { color: #d9edff; font-family: Inter, "Segoe UI", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.slot-tag { background: var(--ui-blue-strong) !important; }
.slot-tag.b { background: #277f74 !important; }
.slot-content { min-width: 0; }
.slot-title { color: var(--ui-text) !important; font-size: 15px !important; }
.slot-desc { color: var(--ui-text-muted) !important; font-size: 13px !important; }
.divider { border-color: var(--ui-border) !important; }
.btn-submit { min-height: 46px; border-radius: 7px !important; background: var(--ui-blue-strong) !important; box-shadow: none !important; }
.btn-submit:hover:not(:disabled) { background: #2495eb !important; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20, 123, 209, .22) !important; }
.btn-submit:disabled { opacity: .45 !important; }
.btn-reset { min-height: 40px; border-radius: 7px !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text-soft) !important; }
.btn-reset:hover { border-color: var(--ui-blue) !important; background: var(--ui-surface-hover) !important; }
.progress-bar-bg { background: #0b121c !important; }
.progress-bar { background: var(--ui-teal) !important; }
.progress-text { color: var(--ui-text-soft) !important; }
.result { border-radius: 7px !important; }
.result.success { background: rgba(50, 209, 191, .08) !important; border-color: rgba(50, 209, 191, .35) !important; }
.result.error { background: rgba(239, 109, 123, .08) !important; border-color: rgba(239, 109, 123, .35) !important; }
.download-btn { min-height: 42px; border-radius: 7px !important; background: var(--ui-blue-strong) !important; }
.footer { color: var(--ui-text-muted) !important; }

/* Backend settings portal */
body:has(.page) { background: var(--ui-canvas) !important; }
.page { width: min(1320px, calc(100% - 48px)) !important; padding: 28px 0 52px !important; }
body:has(.page) .topbar { height: auto; display: flex; padding: 0 0 22px; background: transparent; border-bottom: 1px solid var(--ui-border); box-shadow: none; backdrop-filter: none; }
body:has(.page) .topbar::after { display: none; }
body:has(.page) .topbar .brand { gap: 12px; }
body:has(.page) .topbar .mark { background: #143754 !important; border-color: rgba(66, 165, 255, .7) !important; box-shadow: inset 0 0 0 1px rgba(50, 209, 191, .25) !important; }
body:has(.page) .topbar h1 { font-size: 22px !important; letter-spacing: 0 !important; }
body:has(.page) .topbar .subtitle { color: var(--ui-text-muted) !important; }
.actions { gap: 8px !important; }
.action, .btn { min-height: 40px; border-radius: 7px !important; border-color: var(--ui-border-strong) !important; background: var(--ui-surface) !important; color: var(--ui-text-soft) !important; }
.action:hover, .btn:hover { border-color: var(--ui-blue) !important; background: var(--ui-surface-hover) !important; color: var(--ui-text) !important; }
.hero, .section, .panel { border-color: var(--ui-border) !important; border-radius: var(--ui-radius) !important; background: var(--ui-surface) !important; box-shadow: var(--ui-shadow) !important; }
.hero { padding: 24px !important; }
.hero h2, .section h2 { font-size: 21px !important; letter-spacing: 0 !important; }
.hero p, .section-note, .desc { color: var(--ui-text-soft) !important; line-height: 1.65 !important; }
.toolbar { padding-top: 18px; border-top: 1px solid var(--ui-border); }
.save-note { color: var(--ui-text-soft) !important; }
.btn.primary { border-color: var(--ui-blue-strong) !important; background: var(--ui-blue-strong) !important; color: #fff !important; }
.btn.primary:hover { background: #2495eb !important; }
.btn.warn { color: #ffd18c !important; }
.section { padding: 22px !important; }
.quick-grid { gap: 12px !important; }
.quick-link { min-height: 108px; padding: 16px !important; border-color: var(--ui-border) !important; border-radius: 7px !important; background: #101b28 !important; }
.quick-link:hover { border-color: var(--ui-blue) !important; background: var(--ui-surface-hover) !important; transform: translateY(-2px); }
.quick-link strong { color: var(--ui-text) !important; }
.quick-link span { color: var(--ui-text-muted) !important; }
.status-table { border-color: var(--ui-border) !important; border-radius: 7px !important; overflow: hidden; }
.status-table th { background: #101b28 !important; color: var(--ui-text-muted) !important; }
.status-table td { border-top-color: var(--ui-border) !important; }
.form-grid { gap: 18px !important; }
.panel { padding: 22px !important; }
.panel h3 { font-size: 18px !important; }
.fields { gap: 16px !important; }
.field label { color: #d3e0eb !important; }
.field input, .field select, .field textarea { min-height: 42px; border-color: var(--ui-border-strong) !important; border-radius: 6px !important; background: #0d1722 !important; color: var(--ui-text) !important; }
.field textarea { min-height: 106px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #557792 !important; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ui-blue) !important; box-shadow: 0 0 0 3px rgba(66, 165, 255, .16) !important; }
.switch-row { border-color: var(--ui-border) !important; border-radius: 7px !important; background: #101b28 !important; }
.switch-row input { accent-color: var(--ui-teal); }
.status.ok { color: var(--ui-teal) !important; }
.status.warn { color: var(--ui-amber) !important; }
.status.off { color: var(--ui-red) !important; }

@media (max-width: 1480px) {
  .shell { grid-template-columns: minmax(260px, 330px) 1fr; }
  .constellation { grid-column: 1 / -1; order: -1; }
  .panel-right { grid-column: auto; }
}

@media (max-width: 1360px) {
  .topbar { grid-template-columns: 240px minmax(0, 1fr) 350px; gap: 12px; padding-inline: 20px; }
  .nav { gap: 10px; }
  .nav a { font-size: 13px; }
  .search-box { width: 142px; padding-inline: 10px; }
  .admin-btn strong, .admin-btn i { display: none; }
  .admin-btn { width: 40px; justify-content: center; }
}

@media (max-width: 1080px) {
  .topbar { grid-template-columns: 1fr auto; }
  .shell { grid-template-columns: 1fr; padding-inline: 16px; }
  .panel-left, .panel-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .constellation { grid-column: auto; order: -1; min-height: 610px; }
}

@media (max-width: 720px) {
  body:has(.container) { padding: 20px 14px 32px !important; }
  .topbar { padding: 14px 16px; }
  .header-actions { width: 100%; }
  .search-box { flex: 1; }
  .shell { padding: 14px 12px 26px; }
  .panel-left, .panel-right, .tool-grid, .file-slots, .form-grid, .field-grid-2 { grid-template-columns: 1fr !important; }
  .panel-right { grid-column: auto; }
  .glass-panel, .section, .panel, .hero { padding: 16px !important; }
  .constellation { min-height: 570px; }
  .system-node { --node-size: 66px; --radius: 132px !important; }
  .system-node .node-label { font-size: 11px; }
  .core { width: 168px; }
  .core h1 { font-size: 24px; }
  .bottom-strip { width: calc(100% - 24px); margin-top: -10px; }
  .page { width: min(100% - 28px, 1320px) !important; padding-top: 20px !important; }
  body:has(.page) .topbar { align-items: flex-start; }
  body:has(.page) .topbar .actions { flex-wrap: wrap; justify-content: flex-end; }
  .toolbar { align-items: stretch !important; }
  .toolbar-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar-actions .btn.primary { grid-column: 1 / -1; }
}

/* Wide desktop: a complete operational view within one viewport. */
@media (min-width: 1481px) {
  html:has(body .shell), body:has(.shell) { height: 100dvh; overflow: hidden; }

  body:has(.shell) .shell {
    height: calc(100dvh - 72px);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    padding: 20px 24px 86px;
  }

  body:has(.shell) .panel {
    min-height: 0;
    display: grid;
    gap: 14px;
  }

  body:has(.shell) .panel-left { grid-template-rows: 202px 320px calc(100% - 550px); }
  body:has(.shell) .panel-right { grid-template-rows: 270px 220px calc(100% - 518px); }

  body:has(.shell) .glass-panel {
    min-height: 0;
    padding: 14px;
  }

  body:has(.shell) .panel-title { margin-bottom: 10px; line-height: 1.2; }
  body:has(.shell) .panel-left .quick-grid { height: 138px; grid-auto-rows: 1fr; }
  body:has(.shell) .quick-grid div { min-height: 0; padding: 5px 7px 10px; }
  body:has(.shell) .quick-grid span { font-size: 12px; }

  body:has(.shell) .panel-left .metric-grid { grid-auto-rows: 58px; gap: 8px; margin-bottom: 10px; }
  body:has(.shell) .metric-grid span { font-size: 12px; }
  body:has(.shell) .metric-grid div { padding: 6px 8px 8px; }
  body:has(.shell) .state-grid div { padding: 8px; }
  body:has(.shell) .metric-grid strong, body:has(.shell) .state-grid b { margin-top: 1px; font-size: 20px; }
  body:has(.shell) .donut-row { grid-template-columns: 136px minmax(0, 1fr); gap: 8px; }
  body:has(.shell) .donut { width: 128px; }
  body:has(.shell) .donut span { font-size: 27px; }
  body:has(.shell) .legend { gap: 5px; font-size: 12px; }
  body:has(.shell) .legend li { gap: 5px; }
  body:has(.shell) .panel-left .rings { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  body:has(.shell) .rings { align-self: center; }
  body:has(.shell) .rings span { font-size: 16px; }
  body:has(.shell) .rings small { font-size: 11px; }

  body:has(.shell) .constellation { min-height: 0; height: 100%; --cluster-y: -20px; }
  body:has(.shell) .core { width: 238px; }
  body:has(.shell) .system-node { --node-size: 100px; }
  body:has(.shell) .system-node .node-label { font-size: 14px; }

  body:has(.shell) .health-main { grid-template-columns: 1fr 82px; gap: 8px; padding: 9px; }
  body:has(.shell) .health-main strong { font-size: 38px; }
  body:has(.shell) .heartbeat { width: 72px; }
  body:has(.shell) .heartbeat i { width: 40px; }
  body:has(.shell) .panel-right .state-grid,
  body:has(.shell) .panel-right .trend-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  body:has(.shell) .state-grid { grid-auto-rows: 70px; margin-top: 8px; }
  body:has(.shell) .state-grid div { padding: 6px 4px 8px; }
  body:has(.shell) .state-grid span, body:has(.shell) .trend-stats span { font-size: 11px; }
  body:has(.shell) .state-grid b { font-size: 20px; }
  body:has(.shell) .trend-stats { grid-auto-rows: 56px; margin-bottom: 6px; }
  body:has(.shell) .trend-stats div { padding: 5px 3px 7px; }
  body:has(.shell) .trend-stats b { margin-top: 2px; font-size: 17px; }
  body:has(.shell) .trend svg { height: 96px; }
  body:has(.shell) .activity { grid-auto-rows: 25px; gap: 4px; }
  body:has(.shell) .activity li { grid-template-columns: 18px minmax(0, 1fr) auto; min-height: 25px; height: 25px; gap: 6px; padding: 0 6px; font-size: 12px; }
  body:has(.shell) .activity i { width: 18px; }
  body:has(.shell) .activity time { font-size: 11px; }

  body:has(.shell) .bottom-strip {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 5;
    width: min(900px, calc(100% - 720px));
    min-height: 64px;
    margin: 0;
    padding: 9px 20px;
    transform: translateX(-50%);
  }

  body:has(.shell) .bottom-strip span { font-size: 12px; }
  body:has(.shell) .bottom-strip b { font-size: 17px; }
}

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