/* SLLCORE unified page theme. Loaded LAST (after sll-admin-theme.css and any
   page-specific CSS) so its normalization wins. Owns the --sll-unified-* scale;
   the --sll-admin-* tokens are owned by sll-admin-theme.css. */

:root {
  --sll-unified-bg: #f6f8ff;
  --sll-unified-bg-2: #eef6ff;
  --sll-unified-surface: rgba(255, 255, 255, 0.94);
  --sll-unified-surface-strong: #ffffff;
  --sll-unified-surface-soft: #f7f9ff;
  --sll-unified-line: #dfe6f6;
  --sll-unified-line-strong: #cad5ed;
  --sll-unified-text: #293047;
  --sll-unified-muted: #6d7691;
  --sll-unified-primary: #8168f6;
  --sll-unified-primary-strong: #6751d8;
  --sll-unified-accent: #e65aa3;
  --sll-unified-blue: #287fd1;
  --sll-unified-green: #11845f;
  --sll-unified-amber: #b87509;
  --sll-unified-red: #c93652;
  --sll-unified-shadow: 0 18px 42px rgba(69, 83, 130, 0.14);
  --sll-unified-shadow-soft: 0 10px 24px rgba(69, 83, 130, 0.1);
  --sll-unified-radius: 18px;
  --sll-unified-radius-sm: 12px;
  --sll-unified-radius-lg: 24px;
  --sll-unified-font: "Inter", "IBM Plex Sans JP", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* The --sll-admin-* tokens are intentionally NOT redefined here.
   They are the single source of truth in sll-admin-theme.css and already carry this
   exact palette, so the old alias block that lived here was a redundant second
   definition (the root cause of the "two theme files disagree" confusion). */

html {
  min-height: 100%;
  background: var(--sll-unified-bg);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  letter-spacing: 0 !important;
  background:
    radial-gradient(circle at 12% -10%, rgba(129, 104, 246, 0.16), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(40, 127, 209, 0.14), transparent 28%),
    linear-gradient(180deg, #fbfcff 0%, var(--sll-unified-bg) 54%, var(--sll-unified-bg-2) 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(103, 81, 216, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 81, 216, 0.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 72%);
}

a {
  color: var(--sll-unified-primary-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body > main,
.page,
.shell,
.main,
.content,
.container,
.admin-shell,
.dashboard-shell,
.page-shell,
.os-page,
.aiapi-shell,
.assistant-shell,
.budget-shell,
.cap-shell,
.work-shell,
.profile-shell {
  width: min(100%, 1280px) !important;
  margin-inline: auto !important;
  padding: 22px clamp(14px, 2.2vw, 28px) 34px !important;
}

body > main,
.page,
.page-shell,
.os-page,
.aiapi-shell,
.assistant-shell,
.budget-shell,
.cap-shell,
.work-shell,
.profile-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top-bar,
.topbar,
.header,
.page-header,
.admin-header,
.os-header,
.aiapi-header,
.assistant-header,
.budget-header,
.cap-header,
.work-header,
.profile-header,
.page > header,
.shell > header,
.content > header,
.container > header,
main > header {
  min-height: 92px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: var(--sll-unified-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.88)) !important;
  box-shadow: var(--sll-unified-shadow) !important;
  backdrop-filter: blur(18px);
}

.top-bar,
.topbar,
.header,
.page-header,
.admin-header,
.os-header,
.aiapi-header,
.assistant-header,
.budget-header,
.cap-header,
.work-header,
.profile-header,
main > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.brand,
.brand-block,
.logo-block,
.os-brand,
.aiapi-brand,
.assistant-brand,
.budget-brand,
.cap-brand,
.work-brand,
.profile-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0;
}

.brand-logo,
.os-mark,
.aiapi-logo,
.assistant-logo,
.budget-logo,
.cap-logo,
.work-logo,
.profile-logo {
  display: grid !important;
  place-items: center !important;
  width: 118px !important;
  min-width: 118px !important;
  height: 68px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-logo img,
.brand img,
.logo img,
.os-mark img,
.aiapi-logo img,
.assistant-logo img,
.budget-logo img,
.cap-logo img,
.work-logo img,
.profile-logo img {
  display: block !important;
  width: 100% !important;
  max-width: 118px !important;
  height: 100% !important;
  max-height: 68px !important;
  object-fit: contain !important;
}

h1,
.page-title,
.welcome,
.os-title,
.aiapi-header h1,
.assistant-header h1,
.budget-header h1,
.cap-header h1,
.work-header h1,
.profile-header h1,
.brand-block h1 {
  margin: 3px 0 0 !important;
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  font-size: clamp(21px, 2vw, 30px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

h2,
.section-title,
.panel h2,
.os-panel-title,
.aiapi-panel h2,
.assistant-panel h2,
.budget-panel h2,
.cap-panel h2 {
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.tag,
.eyebrow,
.page-label,
.label-chip,
.os-eyebrow,
.aiapi-kicker,
.aiapi-label,
.assistant-kicker,
.assistant-label,
.budget-kicker,
.budget-label,
.cap-kicker,
.cap-label {
  color: var(--sll-unified-primary-strong) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

p,
small,
.brand-text-sub,
.brand-meta p,
.page-subtitle,
.subtitle,
.description,
.card-desc,
.status,
.menu-desc,
.kpi-sub,
.loading-text,
.info-banner,
.muted,
.os-subtitle,
.os-stat-note,
.aiapi-subtitle,
.aiapi-status-card small,
.assistant-subtitle,
.budget-subtitle,
.cap-subtitle,
.work-subtitle,
.profile-subtitle {
  color: var(--sll-unified-muted) !important;
}

.user-block,
.os-user,
.aiapi-user,
.assistant-user,
.budget-user,
.cap-user,
.work-user,
.profile-user {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  color: var(--sll-unified-muted) !important;
}

.user-pill,
.pill,
.badge-pill,
.menu-tag,
.kpi-pill,
.chip,
.os-chip,
.aiapi-chip,
.assistant-chip,
.budget-chip,
.cap-chip {
  min-height: 28px;
  border: 1px solid rgba(129, 104, 246, 0.18) !important;
  border-radius: 999px !important;
  background: #f6f4ff !important;
  color: var(--sll-unified-primary-strong) !important;
  font-weight: 800 !important;
}

button,
.btn,
.side-btn,
.action-btn,
.link-button,
.os-btn,
.aiapi-btn,
.assistant-btn,
.budget-btn,
.cap-btn {
  min-height: 36px;
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: 999px !important;
  background: var(--sll-unified-surface-strong) !important;
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: var(--sll-unified-shadow-soft) !important;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

button:hover:not(:disabled),
.btn:hover,
.side-btn:hover,
.action-btn:hover,
.link-button:hover,
.os-btn:hover,
.aiapi-btn:hover,
.assistant-btn:hover,
.budget-btn:hover,
.cap-btn:hover {
  border-color: rgba(129, 104, 246, 0.42) !important;
  box-shadow: 0 14px 28px rgba(69, 83, 130, 0.14) !important;
  transform: translateY(-1px);
}

.btn-primary,
.side-btn.primary,
.primary,
button.primary,
.os-btn.primary,
.aiapi-btn-primary,
.assistant-btn-primary,
.budget-btn-primary,
.cap-btn-primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--sll-unified-primary), var(--sll-unified-accent)) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(129, 104, 246, 0.24) !important;
}

button.secondary,
button.ghost,
.btn.secondary,
.btn.ghost,
.secondary,
.ghost {
  color: var(--sll-unified-primary-strong) !important;
  background: #f7f6ff !important;
  box-shadow: none !important;
}

button:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none !important;
  box-shadow: none !important;
}

.grid,
.kpi-row,
.stats,
.cards,
.menu-grid,
.dashboard-grid,
.os-stat-grid,
.aiapi-summary,
.aiapi-grid,
.assistant-grid,
.budget-grid,
.cap-grid {
  gap: 14px !important;
}

.menu-card,
.card,
.kpi-card,
.panel,
.list-panel,
.editor-panel,
.tools-panel,
.stat,
.stat-card,
.table-panel,
.form-panel,
.section-card,
.dashboard-card,
.summary-card,
.section,
.quick-panel,
.os-panel,
.os-stat,
.os-quick-nav,
.aiapi-panel,
.aiapi-status-card,
.assistant-panel,
.assistant-card,
.budget-panel,
.budget-card,
.cap-panel,
.cap-card,
.work-card,
.profile-card {
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: var(--sll-unified-radius) !important;
  background: var(--sll-unified-surface) !important;
  box-shadow: var(--sll-unified-shadow) !important;
}

.menu-card,
.card,
.kpi-card,
.stat,
.stat-card,
.os-stat,
.aiapi-status-card {
  min-height: 112px;
}

.menu-title,
.card h3,
.panel h2,
.section-title,
.stat-value,
.kpi-value,
.os-stat-value,
.aiapi-status-card strong {
  color: var(--sll-unified-text) !important;
  font-weight: 900 !important;
}

input,
select,
textarea {
  min-height: 38px;
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: var(--sll-unified-radius-sm) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  font-size: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(129, 104, 246, 0.6) !important;
  outline: 3px solid rgba(129, 104, 246, 0.14) !important;
}

label,
.form-label {
  color: var(--sll-unified-muted) !important;
  font-weight: 800 !important;
}

table {
  width: 100%;
  border: 1px solid var(--sll-unified-line) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--sll-unified-radius) !important;
  background: var(--sll-unified-surface-strong) !important;
  overflow: hidden;
  box-shadow: var(--sll-unified-shadow-soft) !important;
}

th {
  background: #f2f5ff !important;
  color: #56617c !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

td,
th {
  border-bottom: 1px solid #edf1fa !important;
}

tr:last-child td {
  border-bottom: 0 !important;
}

.tabs,
.tab-list,
.toolbar,
.filters,
.filter-row,
.top-right,
.aiapi-toolbar,
.assistant-toolbar,
.budget-toolbar,
.cap-toolbar,
.os-toolbar {
  gap: 8px !important;
}

.tabs,
.tab-list,
.toolbar,
.filters,
.filter-row {
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: var(--sll-unified-radius) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: var(--sll-unified-shadow-soft) !important;
}

.nav-item,
.tab,
.tab-button,
.filter-chip {
  border-radius: 999px !important;
}

.is-active,
.active,
[aria-current="page"] {
  color: var(--sll-unified-primary-strong) !important;
}

.error-banner,
.danger,
.message-error,
.aiapi-message.error,
.assistant-message.error {
  border-color: #ffc7d0 !important;
  background: #fff1f4 !important;
  color: var(--sll-unified-red) !important;
}

.success,
.message-success {
  border-color: #bcebd8 !important;
  background: #effbf6 !important;
  color: var(--sll-unified-green) !important;
}

.warning,
.message-warning {
  border-color: #f6d79c !important;
  background: #fff8ea !important;
  color: var(--sll-unified-amber) !important;
}

.sll-core-global-menu {
  width: min(100%, 1280px) !important;
  margin: 12px auto 18px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: var(--sll-unified-radius-lg) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--sll-unified-shadow) !important;
  overflow: hidden;
}

.sll-core-menu-scroll {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-bottom: 0 !important;
}

.sll-core-menu-link {
  min-width: 0 !important;
  max-width: 100% !important;
  border-color: var(--sll-unified-line) !important;
  color: #404a66 !important;
  background: #fff !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.sll-core-menu-link > span:last-child {
  min-width: 0;
}

.sll-core-menu-link.is-current {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--sll-unified-primary), var(--sll-unified-accent)) !important;
}

.sll-core-menu-icon {
  color: var(--sll-unified-primary-strong) !important;
  background: rgba(129, 104, 246, 0.12) !important;
}

@media (max-width: 900px) {
  .top-bar,
  .topbar,
  .header,
  .page-header,
  .admin-header,
  .os-header,
  .aiapi-header,
  .assistant-header,
  .budget-header,
  .cap-header,
  .work-header,
  .profile-header,
  main > header {
    align-items: flex-start !important;
    flex-direction: column !important;
    border-radius: 20px !important;
  }

  .user-block,
  .os-user,
  .aiapi-user,
  .assistant-user,
  .budget-user,
  .cap-user,
  .work-user,
  .profile-user {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .brand-logo,
  .os-mark,
  .aiapi-logo,
  .assistant-logo,
  .budget-logo,
  .cap-logo,
  .work-logo,
  .profile-logo {
    width: 92px !important;
    min-width: 92px !important;
    height: 56px !important;
  }

  .brand-logo img,
  .brand img,
  .os-mark img,
  .aiapi-logo img,
  .assistant-logo img,
  .budget-logo img,
  .cap-logo img,
  .work-logo img,
  .profile-logo img {
    max-width: 92px !important;
    max-height: 56px !important;
  }
}

@media (max-width: 640px) {
  body > main,
  .page,
  .shell,
  .main,
  .content,
  .container,
  .admin-shell,
  .dashboard-shell,
  .page-shell,
  .os-page,
  .aiapi-shell,
  .assistant-shell,
  .budget-shell,
  .cap-shell,
  .work-shell,
  .profile-shell {
    padding: 12px 10px 24px !important;
  }

  h1,
  .page-title,
  .welcome,
  .os-title,
  .aiapi-header h1,
  .assistant-header h1,
  .budget-header h1,
  .cap-header h1,
  .work-header h1,
  .profile-header h1,
  .brand-block h1 {
    font-size: clamp(19px, 7vw, 24px) !important;
    overflow-wrap: anywhere;
  }

  .top-bar,
  .topbar,
  .header,
  .page-header,
  .admin-header,
  .os-header,
  .aiapi-header,
  .assistant-header,
  .budget-header,
  .cap-header,
  .work-header,
  .profile-header,
  main > header,
  .menu-card,
  .card,
  .panel,
  .section,
  .os-panel,
  .aiapi-panel,
  .assistant-panel,
  .budget-panel,
  .cap-panel {
    border-radius: 16px !important;
  }

  .sll-core-global-menu {
    width: calc(100% - 20px) !important;
    margin: 10px auto 14px !important;
    border-radius: 16px !important;
  }

  .sll-core-menu-scroll {
    gap: 7px !important;
  }

  .sll-core-menu-link {
    flex: 1 1 min(100%, 168px) !important;
    justify-content: flex-start !important;
  }
}