/* 2026-06-29 AI operating blueprint skin.
   Visual layer only: keep existing DOM, data binding, routing and interactions. */

:root {
  --blueprint-bg: #111b1f;
  --blueprint-panel: rgba(31, 43, 49, 0.86);
  --blueprint-panel-deep: rgba(20, 31, 36, 0.92);
  --blueprint-line: rgba(159, 190, 197, 0.24);
  --blueprint-line-hot: rgba(50, 211, 212, 0.55);
  --blueprint-cyan: #32d3d4;
  --blueprint-green: #35d487;
  --blueprint-gold: #d6a83e;
  --blueprint-red: #e75b4f;
  --blueprint-text: #f4f0e6;
  --blueprint-muted: #9aaab0;
  --blueprint-radius: 4px;
  --blueprint-shadow: 0 22px 80px rgba(0, 0, 0, 0.38);
}

html,
body {
  background:
    radial-gradient(circle at 7% 12%, rgba(50, 211, 212, 0.13), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(214, 168, 62, 0.09), transparent 26%),
    linear-gradient(135deg, #111a1e 0%, #162228 52%, #11181c 100%) !important;
  color: var(--blueprint-text) !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif !important;
}

body::before {
  opacity: 0.42 !important;
  background-image:
    linear-gradient(rgba(70, 104, 112, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 104, 112, 0.24) 1px, transparent 1px),
    linear-gradient(rgba(70, 104, 112, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 104, 112, 0.10) 1px, transparent 1px) !important;
  background-size: 54px 54px, 54px 54px, 18px 18px, 18px 18px !important;
}

.app-shell {
  background: transparent !important;
}

.app-shell::after {
  content: "";
  position: fixed;
  inset: 18px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(159, 190, 197, 0.18);
  box-shadow: inset 0 0 0 1px rgba(50, 211, 212, 0.05);
}

.global-command-header,
.side,
.main {
  position: relative;
  z-index: 1;
}

.global-command-header {
  background: linear-gradient(180deg, rgba(17, 27, 31, 0.98), rgba(17, 27, 31, 0.86)) !important;
  border-bottom: 1px solid var(--blueprint-line) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(14px);
}

.brand {
  background: rgba(17, 27, 31, 0.54) !important;
  border-right: 1px solid var(--blueprint-line) !important;
}

.brand h1,
.title-block h2,
.cockpit-hero h3,
.operator-home-hero h3,
.role-action-hero h3,
.store-ue-hero h3,
.international-hero h3,
.replenishment-hero h3 {
  color: var(--blueprint-text) !important;
  text-shadow: 0 0 18px rgba(244, 240, 230, 0.10);
}

.brand p,
.title-block p,
.topline,
.side-brief p,
.cockpit-hero p,
.operator-home-hero p,
.role-action-hero p,
.store-ue-hero p,
.international-hero p,
.replenishment-hero p {
  color: var(--blueprint-muted) !important;
}

.liumi-mark,
.liumi-mark.mark,
.liumi-mark.large {
  border-radius: var(--blueprint-radius) !important;
  border: 1px solid rgba(50, 211, 212, 0.45) !important;
  box-shadow: 0 0 22px rgba(50, 211, 212, 0.16) !important;
}

.topbar {
  min-width: 0 !important;
}

.title-block .eyebrow,
.eyebrow {
  color: var(--blueprint-cyan) !important;
  letter-spacing: 0.06em !important;
}

.top-actions {
  align-items: stretch !important;
}

.sync-status-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 760px !important;
}

.sync-status-strip > span,
.sync-time-pill,
.session-strip,
.action-buttons > button,
.action-buttons > a,
.ghost,
.primary,
.secondary {
  border-radius: var(--blueprint-radius) !important;
  border: 1px solid var(--blueprint-line) !important;
  background: rgba(23, 34, 40, 0.78) !important;
  color: var(--blueprint-text) !important;
  box-shadow: none !important;
}

.sync-time-pill {
  min-width: 118px !important;
  padding: 7px 11px !important;
}

.sync-time-pill small {
  color: var(--blueprint-cyan) !important;
}

.sync-time-pill strong,
.sync-store-count,
.session-strip strong {
  color: var(--blueprint-text) !important;
}

#productSyncPill {
  border-color: rgba(214, 168, 62, 0.56) !important;
  background: rgba(60, 47, 22, 0.72) !important;
}

.primary,
#topReloadBtn,
#reloadBtn,
.login-submit {
  border-color: rgba(50, 211, 212, 0.90) !important;
  background: var(--blueprint-cyan) !important;
  color: #092126 !important;
  font-weight: 900 !important;
}

.side {
  background: rgba(13, 23, 27, 0.86) !important;
  border-right: 1px solid var(--blueprint-line) !important;
  box-shadow: 16px 0 50px rgba(0, 0, 0, 0.18) !important;
}

.side-brief,
.panel,
.identity,
.side-function-map,
.side-missions,
.side-playbook,
.cockpit-hero,
.operator-home-hero,
.operator-board,
.page-panel,
.hub-mode-tabs,
.international-admin-panel,
.store-ue-panel,
.replenishment-panel,
.role-action-center,
.sync-drawer-card,
.password-modal-card,
.login-card {
  border-radius: var(--blueprint-radius) !important;
  border: 1px solid var(--blueprint-line) !important;
  background: linear-gradient(155deg, rgba(31, 43, 49, 0.86), rgba(20, 31, 36, 0.82)) !important;
  box-shadow: var(--blueprint-shadow) !important;
}

.side-brief::before,
.cockpit-hero::before,
.operator-home-hero::before,
.store-ue-hero::before,
.international-hero::before,
.replenishment-hero::before,
.role-action-hero::before {
  opacity: 0.18 !important;
}

.system-rail button,
.side-function-map button,
.hub-mode-tabs button,
.filters .chip,
.chip,
.intl-issue-card,
.daily-export-actions button,
.copy-actions button,
.role-action-filters button,
.ue-store-row,
.replenishment-store-row,
.operator-store-card {
  border-radius: var(--blueprint-radius) !important;
  border: 1px solid var(--blueprint-line) !important;
  background: rgba(21, 31, 36, 0.78) !important;
  color: var(--blueprint-muted) !important;
  box-shadow: none !important;
}

.system-rail button.active,
.system-rail button:hover,
.side-function-map button:hover,
.hub-mode-tabs button.active,
.filters .chip.active,
.role-action-filters button.active,
.ue-store-row.active,
.replenishment-store-row.active,
.operator-store-card.active {
  border-color: var(--blueprint-line-hot) !important;
  background: rgba(29, 96, 98, 0.30) !important;
  color: var(--blueprint-text) !important;
  box-shadow: 0 0 28px rgba(50, 211, 212, 0.10) !important;
}

.system-rail b,
.side-playbook-grid b,
.nav-index,
.queue-index,
.task-index {
  border-radius: var(--blueprint-radius) !important;
  background: rgba(50, 211, 212, 0.18) !important;
  color: var(--blueprint-cyan) !important;
  border: 1px solid rgba(50, 211, 212, 0.36) !important;
}

.side-kpis > div,
.cockpit-kpis article,
.operator-kpis article,
.store-ue-kpis article,
.international-kpis article,
.replenishment-kpis article,
.daily-board-card,
.operator-action-card,
.role-action-stat,
.action-recovery-summary-card,
.ue-detail-summary > *,
.replenishment-summary-card {
  border-radius: var(--blueprint-radius) !important;
  border: 1px solid var(--blueprint-line) !important;
  background: rgba(31, 43, 49, 0.76) !important;
}

.side-kpis strong,
.cockpit-kpis strong,
.operator-kpis strong,
.store-ue-kpis strong,
.international-kpis strong,
.replenishment-kpis strong,
.daily-board-card strong,
.role-action-stat strong,
.metric-value,
.kpi-value {
  color: var(--blueprint-text) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
}

.cockpit-kpis span,
.operator-kpis span,
.store-ue-kpis span,
.international-kpis span,
.replenishment-kpis span,
.daily-board-card span,
.role-action-stat span,
.panel label {
  color: var(--blueprint-muted) !important;
}

.cockpit-cycle,
.operator-tabs,
.store-detail-tabs,
.intl-issue-grid,
.ue-month-tabs {
  border-radius: var(--blueprint-radius) !important;
  border-color: var(--blueprint-line) !important;
  background: rgba(17, 27, 31, 0.62) !important;
}

.cockpit-cycle span,
.operator-tabs button,
.store-detail-tabs button,
.ue-month-tabs button {
  border-radius: var(--blueprint-radius) !important;
}

.cockpit-cycle span.active,
.operator-tabs button.active,
.store-detail-tabs button.active,
.ue-month-tabs button.active {
  background: var(--blueprint-cyan) !important;
  color: #092126 !important;
}

.status-badge,
.risk-badge,
.priority-badge,
.action-status,
.intl-status,
.ue-bucket,
.replenishment-risk {
  border-radius: var(--blueprint-radius) !important;
  border: 1px solid currentColor !important;
  background: rgba(21, 31, 36, 0.62) !important;
  font-weight: 900 !important;
}

.status-badge.ok,
.risk-badge.ok,
.action-status.ok,
.intl-status.ok {
  color: var(--blueprint-green) !important;
}

.status-badge.warn,
.risk-badge.warn,
.action-status.warn,
.intl-status.warn {
  color: var(--blueprint-gold) !important;
}

.status-badge.danger,
.risk-badge.danger,
.priority-badge.p0,
.action-status.danger,
.intl-status.danger {
  color: var(--blueprint-red) !important;
}

input,
select,
textarea {
  border-radius: var(--blueprint-radius) !important;
  border: 1px solid var(--blueprint-line) !important;
  background: rgba(12, 20, 24, 0.86) !important;
  color: var(--blueprint-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(154, 170, 176, 0.80) !important;
}

.store-list,
.store-detail,
.action-board,
.role-action-list,
.international-table,
.ue-store-rows,
.replenishment-store-rows {
  scrollbar-color: rgba(50, 211, 212, 0.48) rgba(21, 31, 36, 0.85);
}

.role-action-row,
.role-action-item,
.action-card,
.task-card,
.store-card,
.international-store-row,
.ue-month-card,
.replenishment-detail-card {
  border-radius: var(--blueprint-radius) !important;
  border: 1px solid var(--blueprint-line) !important;
  background: rgba(24, 35, 41, 0.72) !important;
}

.role-action-row.is-risk,
.action-card.is-risk,
.international-store-row.is-risk,
.store-card.is-risk {
  border-color: rgba(231, 91, 79, 0.50) !important;
  background: rgba(52, 31, 29, 0.62) !important;
}

.role-action-row.is-warning,
.action-card.is-warning,
.store-card.is-warning {
  border-color: rgba(214, 168, 62, 0.45) !important;
  background: rgba(52, 43, 24, 0.54) !important;
}

.role-action-table-head,
.table-head,
.ue-detail-head,
.replenishment-detail-head,
.international-tools,
.store-ue-source {
  border-radius: var(--blueprint-radius) !important;
  border-color: var(--blueprint-line) !important;
  background: rgba(21, 31, 36, 0.76) !important;
}

.toggle,
.switch,
.role-action-toggle {
  border-radius: 999px !important;
  border-color: rgba(50, 211, 212, 0.35) !important;
  background: rgba(12, 20, 24, 0.86) !important;
}

.login-screen {
  background:
    linear-gradient(90deg, rgba(17, 27, 31, 0.88), rgba(17, 27, 31, 0.42)),
    var(--blueprint-bg) !important;
}

.login-bg {
  opacity: 0.42 !important;
  filter: saturate(0.82) contrast(0.95) !important;
}

.login-copy h1 {
  color: var(--blueprint-text) !important;
  text-shadow: 0 0 24px rgba(50, 211, 212, 0.16) !important;
}

.login-copy p,
.login-copy span {
  color: var(--blueprint-muted) !important;
}

@media (max-width: 1180px) {
  .sync-status-strip {
    justify-content: flex-start !important;
    max-width: none !important;
  }

  .sync-time-pill {
    min-width: 104px !important;
  }
}

@media (max-width: 820px) {
  body[data-hub-mode="command"] .command-cockpit {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
  }

  body[data-hub-mode="command"] .cockpit-hero {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-hub-mode="command"] .cockpit-hero > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-hub-mode="command"] .cockpit-hero h3 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  body[data-hub-mode="command"] .cockpit-cycle,
  body[data-hub-mode="command"] .cockpit-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-hub-mode="command"] .cockpit-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}