.login-view {
  position: fixed;
  z-index: var(--z-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 72% 18%, #3b725b, transparent 30rem),
    linear-gradient(145deg, #173f35 10%, #0d2b25 85%);
}

.login-card {
  position: relative;
  overflow: hidden;
  width: min(25.5rem, 100%);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-lg);
  background: var(--cream-50);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .3);
}

.login-card::after {
  content: "乐";
  position: absolute;
  top: -3.5rem;
  right: -1rem;
  color: rgba(32, 82, 66, .055);
  font-family: var(--font-serif);
  font-size: 9rem;
  line-height: 1;
  pointer-events: none;
}

.login-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .625rem;
}

.login-card h1 {
  position: relative;
  z-index: 1;
  margin: 1.5rem 0 .375rem;
  font-family: var(--font-serif);
  font-size: 1.75rem;
}

.login-card > p {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
  color: var(--muted);
  font-size: .75rem;
}

.login-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .875rem;
}

.form-field {
  display: grid;
  gap: .375rem;
}

.form-field label {
  color: var(--ink-soft);
  font-size: .6875rem;
  font-weight: 700;
}

.form-field input {
  width: 100%;
  min-height: 2.75rem;
  padding: .6875rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: .6875rem;
  background: var(--white);
}

.form-field input:focus {
  border-color: var(--forest-700);
}

.login-error {
  min-height: 1.25rem;
  margin: 0;
  color: var(--danger);
  font-size: .6875rem;
}

.login-form .button {
  width: 100%;
  min-height: 2.75rem;
}

.shell-preview {
  display: grid;
  gap: .6875rem;
}

.shell-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6875rem;
  border: 1px solid var(--line);
  border-radius: .875rem;
  background: rgba(255, 253, 247, .82);
}

.preview-filter-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.1fr 1.8fr auto;
  gap: .5rem;
  width: 100%;
}

.preview-filter {
  min-height: 2.625rem;
  border: 1px solid var(--line);
  border-radius: .5625rem;
  background: var(--white);
}

.preview-reset {
  width: 3.5rem;
  background: var(--cream-200);
}

.preview-kpis {
  display: grid;
  grid-template-columns: 1.35fr repeat(5, 1fr);
  gap: .625rem;
}

.preview-kpi {
  min-height: 5rem;
  padding: .75rem;
}

.preview-kpi:first-child {
  border-color: var(--forest-700);
  background: linear-gradient(145deg, var(--forest-700), var(--forest-900));
}

.preview-line {
  height: .375rem;
  border-radius: 999px;
}

.preview-line.short { width: 42%; }
.preview-line.medium { width: 68%; }
.preview-kpi .preview-line + .preview-line { margin-top: .875rem; height: .75rem; }
.preview-kpi:first-child .skeleton { background: rgba(255, 248, 228, .48); }

.preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(14rem, .7fr);
  gap: .6875rem;
}

.preview-panel {
  min-height: 15rem;
  padding: .875rem;
}

.preview-chart {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  height: 10.5rem;
  margin-top: 1.5rem;
  padding-top: .75rem;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0 2.55rem, var(--line) 2.55rem 2.6rem);
}

.preview-chart i {
  flex: 1;
  min-width: .25rem;
  border-radius: .25rem .25rem 0 0;
  background: rgba(201, 99, 72, .68);
}

.preview-ring {
  width: 7rem;
  height: 7rem;
  margin: 2rem auto 0;
  border-radius: 50%;
  background: conic-gradient(var(--forest-700) 0 82%, var(--line) 82%);
  box-shadow: inset 0 0 0 1.1rem var(--cream-50);
}

.placeholder-card {
  min-height: 28rem;
}

.placeholder-copy {
  max-width: 30rem;
}

.placeholder-copy h2 {
  margin-bottom: .5rem;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.placeholder-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .8125rem;
}

.filter-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(24rem, 1.2fr) minmax(20rem, .8fr) auto;
  gap: .625rem;
  align-items: center;
  padding: .625rem;
  overflow: visible;
}

.filter-selects,
.date-filter,
.period-actions {
  display: flex;
  align-items: center;
  gap: .4375rem;
}

.filter-selects {
  min-width: 0;
}

.multi-select {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.multi-select summary {
  overflow: hidden;
  min-height: 2.375rem;
  padding: .625rem 1.75rem .625rem .6875rem;
  border: 1px solid var(--line);
  border-radius: .5625rem;
  color: var(--ink-soft);
  background: var(--white);
  font-size: .6875rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.multi-select summary::-webkit-details-marker {
  display: none;
}

.multi-select summary::after {
  content: "⌄";
  position: absolute;
  top: .5rem;
  right: .625rem;
  color: var(--muted);
}

.multi-select[open] summary {
  border-color: var(--forest-700);
  box-shadow: 0 0 0 .1875rem rgba(44, 106, 84, .08);
}

.multi-select-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + .375rem);
  left: 0;
  width: max(100%, 13rem);
  max-height: 17rem;
  overflow: auto;
  padding: .375rem;
  border: 1px solid var(--line-strong);
  border-radius: .6875rem;
  background: var(--cream-50);
  box-shadow: var(--shadow-raised);
}

.multi-select-menu label {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.125rem;
  padding: .4375rem .5rem;
  border-radius: .4375rem;
  color: var(--ink-soft);
  font-size: .6875rem;
  cursor: pointer;
}

.multi-select-menu label:hover {
  background: var(--forest-50);
}

.multi-select-menu input {
  accent-color: var(--forest-700);
}

.filter-empty {
  margin: 0;
  padding: .625rem;
  color: var(--muted);
  font-size: .6875rem;
}

.date-filter {
  justify-content: center;
}

.date-filter label {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.375rem;
  padding: .25rem .4375rem;
  border: 1px solid var(--line);
  border-radius: .5625rem;
  background: var(--white);
  color: var(--muted);
  font-size: .625rem;
}

.date-filter input {
  min-width: 7.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: .6875rem;
  font-weight: 700;
}

.date-separator {
  color: var(--muted);
  font-size: .625rem;
}

.period-actions {
  justify-content: flex-end;
}

.period-actions .button {
  min-height: 2.375rem;
  padding-inline: .5625rem;
  white-space: nowrap;
}

.period-actions .icon-button {
  width: 2.375rem;
  height: 2.375rem;
}

.overview-data {
  display: grid;
  gap: .6875rem;
  margin-top: .6875rem;
}

.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 28rem;
  color: var(--ink-soft);
  font-size: .75rem;
}

.loading-mark {
  width: 1.25rem;
  height: 1.25rem;
  border: .1875rem solid var(--line-strong);
  border-top-color: var(--forest-700);
  border-radius: 50%;
  animation: loading-spin .8s linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.kpi-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr));
  gap: .625rem;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 6rem;
  padding: .75rem .8125rem;
  text-align: left;
}

.kpi-card strong {
  overflow: hidden;
  max-width: 100%;
  margin-top: .3125rem;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-card small,
.metric-delta {
  margin-top: .375rem;
  color: var(--muted);
  font-size: .5625rem;
}

.kpi-label {
  color: var(--muted);
  font-size: .625rem;
  font-weight: 750;
}

.kpi-primary {
  border-color: var(--forest-700);
  color: var(--white);
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 201, 143, .2), transparent 7rem),
    linear-gradient(145deg, var(--forest-700), var(--forest-900));
}

.kpi-primary strong,
.kpi-primary .kpi-label,
.kpi-primary .metric-delta {
  color: var(--white);
}

.metric-delta.negative {
  color: var(--coral);
}

.kpi-primary .metric-delta.negative {
  color: #ffd0c1;
}

.alert-kpi {
  border-color: #e7cfc4;
  background: linear-gradient(145deg, var(--cream-50), var(--coral-soft));
  cursor: pointer;
}

.alert-kpi:hover {
  border-color: var(--coral);
}

.overview-main-grid,
.overview-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(16rem, .65fr);
  gap: .6875rem;
}

.overview-detail-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr);
}

.panel {
  min-width: 0;
  padding: .9375rem;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.panel-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1rem;
}

.panel-heading p {
  margin: .125rem 0 0;
  color: var(--muted);
  font-size: .625rem;
}

.chart-legend {
  display: flex;
  gap: .75rem;
  color: var(--muted);
  font-size: .5625rem;
  white-space: nowrap;
}

.chart-legend span::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border-radius: .1875rem;
}

.legend-revenue::before { background: var(--forest-700); }
.legend-orders::before { background: var(--coral); }

.trend-chart {
  width: 100%;
  height: 18rem;
  overflow: hidden;
}

.health-panel {
  display: flex;
  flex-direction: column;
}

.health-ring {
  display: grid;
  place-items: center;
  width: 8.25rem;
  height: 8.25rem;
  margin: .5rem auto 1rem;
  border-radius: 50%;
  background: conic-gradient(var(--forest-700) 0 var(--health-degrees), var(--line) var(--health-degrees));
}

.health-ring > div {
  display: grid;
  place-items: center;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  background: var(--cream-50);
  box-shadow: 0 .25rem .875rem rgba(36, 60, 51, .08);
}

.health-ring strong {
  align-self: end;
  font-family: var(--font-serif);
  font-size: 1.375rem;
}

.health-ring span {
  align-self: start;
  color: var(--muted);
  font-size: .5625rem;
}

.health-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .375rem;
  margin: auto 0 0;
}

.health-breakdown div {
  padding: .5rem .375rem;
  border-radius: .5rem;
  background: var(--forest-50);
  text-align: center;
}

.health-breakdown dt {
  color: var(--muted);
  font-size: .5625rem;
}

.health-breakdown dd {
  margin: .125rem 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: .9375rem;
  font-weight: 800;
}

.table-scroll {
  overflow: auto;
}

.ranking-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: .6875rem;
}

.ranking-panel th {
  padding: .5rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: .5625rem;
  text-align: left;
}

.ranking-panel td {
  padding: .625rem .5rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.ranking-panel td strong,
.ranking-panel td small {
  display: block;
}

.ranking-panel td small {
  margin-top: .125rem;
  color: var(--muted);
  font-size: .5625rem;
}

.rank-number {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: .4375rem;
  color: var(--forest-700);
  background: var(--forest-100);
  font-weight: 800;
}

.structure-list {
  display: grid;
  gap: .8125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.structure-list li > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .6875rem;
}

.structure-list li > div:first-child span,
.structure-list small {
  color: var(--muted);
  font-size: .5625rem;
}

.structure-track {
  height: .4375rem;
  margin: .375rem 0 .25rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.structure-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--forest-700), #77a286);
}

.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}

.recommendation {
  position: relative;
  padding: .8125rem .875rem .8125rem 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .56);
}

.recommendation::before {
  content: "";
  position: absolute;
  inset: .75rem auto .75rem 0;
  width: .1875rem;
  border-radius: 999px;
  background: var(--coral);
}

.recommendation-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .5625rem;
}

.recommendation h3 {
  margin: .5rem 0 .25rem;
  font-family: var(--font-serif);
  font-size: .875rem;
}

.recommendation p,
.recommendation > strong {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.65;
}

.recommendation > strong {
  margin-top: .375rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.empty-inline {
  padding: 1.5rem;
  color: var(--muted);
  font-size: .6875rem;
  text-align: center;
}

.ai-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .55fr);
  gap: .6875rem;
}

.ai-chat-card {
  display: flex;
  min-height: 38rem;
  flex-direction: column;
}

.ai-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8125rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(240, 245, 241, .72);
}

.ai-card-heading > div {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
}

.ai-status-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--muted);
}

.ai-status-dot.active {
  background: var(--success);
  box-shadow: 0 0 0 .25rem rgba(61, 128, 94, .1);
}

.ai-status-dot.rules {
  background: var(--gold);
}

.ai-conversation {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  min-height: 25rem;
  max-height: 40rem;
  overflow: auto;
  padding: 1rem;
  background:
    linear-gradient(rgba(255, 253, 247, .89), rgba(255, 253, 247, .89)),
    radial-gradient(circle at 15% 20%, var(--forest-100), transparent 18rem);
}

.chat-turn {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  max-width: 88%;
}

.user-turn {
  align-self: flex-end;
  justify-content: flex-end;
}

.chat-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: .625rem;
  color: var(--white);
  background: var(--forest-700);
  font-family: var(--font-serif);
  font-size: .6875rem;
  font-weight: 800;
}

.user-turn .chat-avatar {
  color: var(--forest-900);
  background: var(--gold-soft);
}

.chat-bubble {
  padding: .75rem .875rem;
  border: 1px solid var(--line);
  border-radius: .25rem .875rem .875rem;
  background: var(--white);
  box-shadow: 0 .375rem 1rem rgba(36, 60, 51, .045);
}

.user-turn .chat-bubble {
  border-color: var(--forest-700);
  border-radius: .875rem .25rem .875rem .875rem;
  color: var(--white);
  background: var(--forest-700);
}

.chat-bubble strong {
  font-family: var(--font-serif);
  font-size: .8125rem;
}

.chat-bubble p {
  margin: .25rem 0 0;
  color: var(--ink-soft);
  font-size: .75rem;
  line-height: 1.75;
}

.user-turn .chat-bubble p {
  margin: 0;
  color: var(--white);
}

.assistant-answer {
  white-space: pre-wrap;
}

.answer-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
  margin-top: .625rem;
}

.answer-evidence span {
  padding: .1875rem .375rem;
  border-radius: 999px;
  color: var(--muted);
  background: var(--forest-50);
  font-size: .5rem;
}

.chat-thinking {
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: 2.75rem;
}

.chat-thinking span {
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: var(--forest-700);
  animation: thinking-pulse 1.1s infinite alternate;
}

.chat-thinking span:nth-child(2) { animation-delay: .2s; }
.chat-thinking span:nth-child(3) { animation-delay: .4s; }

.chat-thinking em {
  margin-left: .375rem;
  color: var(--muted);
  font-size: .625rem;
  font-style: normal;
}

@keyframes thinking-pulse {
  to { opacity: .2; transform: translateY(-.1875rem); }
}

.ai-composer {
  padding: .75rem;
  border-top: 1px solid var(--line);
  background: var(--cream-50);
}

.ai-composer textarea {
  width: 100%;
  min-height: 5rem;
  padding: .6875rem .75rem;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: .6875rem;
  background: var(--white);
  font-size: .75rem;
}

.ai-composer textarea:focus {
  border-color: var(--forest-700);
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .5rem;
}

.composer-footer span {
  color: var(--muted);
  font-size: .5625rem;
}

.ai-side-stack {
  display: grid;
  align-content: start;
  gap: .6875rem;
}

.ai-capabilities ul {
  display: grid;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-capabilities li {
  display: flex;
  gap: .625rem;
  padding: .625rem;
  border-radius: .625rem;
  background: var(--forest-50);
}

.ai-capabilities li > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .5rem;
  color: var(--forest-800);
  background: var(--gold-soft);
  font-family: var(--font-serif);
  font-size: .625rem;
  font-weight: 800;
}

.ai-capabilities li strong {
  display: block;
  font-size: .6875rem;
}

.ai-capabilities li p {
  margin: .125rem 0 0;
  color: var(--muted);
  font-size: .5625rem;
}

.ai-privacy h2 {
  margin: .75rem 0 .375rem;
  font-family: var(--font-serif);
  font-size: 1rem;
}

.ai-privacy p {
  margin: 0;
  color: var(--muted);
  font-size: .6875rem;
  line-height: 1.7;
}

.ai-history-panel {
  margin-top: .6875rem;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.history-item {
  position: relative;
  min-width: 0;
  min-height: 6.5rem;
  padding: .6875rem;
  border: 1px solid var(--line);
  border-radius: .6875rem;
  background: var(--white);
  text-align: left;
}

.history-item:hover {
  border-color: var(--forest-700);
}

.history-mode {
  display: inline-flex;
  padding: .1875rem .375rem;
  border-radius: 999px;
  color: var(--forest-800);
  background: var(--forest-100);
  font-size: .5rem;
  font-weight: 800;
}

.history-item strong,
.history-item small {
  display: block;
}

.history-item strong {
  overflow: hidden;
  margin-top: .4375rem;
  font-size: .6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item small {
  position: absolute;
  right: .6875rem;
  bottom: .6875rem;
  left: .6875rem;
  color: var(--muted);
  font-size: .5rem;
}

.operations-filter {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem;
  overflow: visible;
}

.operations-filter .filter-selects {
  width: min(42rem, 100%);
}

.compact-select {
  max-width: 15rem;
}

.native-filter {
  display: flex;
  align-items: center;
  gap: .4375rem;
  min-height: 2.375rem;
  padding: .25rem .4375rem .25rem .625rem;
  border: 1px solid var(--line);
  border-radius: .5625rem;
  color: var(--muted);
  background: var(--white);
  font-size: .625rem;
}

.native-filter select {
  min-width: 5.75rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: .6875rem;
  font-weight: 700;
}

.alerts-data,
.reports-data {
  display: grid;
  gap: .6875rem;
  margin-top: .6875rem;
}

.alert-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .625rem;
}

.alert-stat {
  min-height: 6.5rem;
  padding: .8125rem;
}

.alert-stat span,
.alert-stat small {
  display: block;
  color: var(--muted);
  font-size: .625rem;
}

.alert-stat strong {
  display: block;
  margin: .25rem 0 .1875rem;
  font-family: var(--font-serif);
  font-size: 1.625rem;
}

.alert-stat.critical {
  border-color: #e4c1b7;
  background: linear-gradient(145deg, var(--cream-50), var(--coral-soft));
}

.alert-stat.critical strong {
  color: var(--danger);
}

.alert-list-card {
  min-height: 28rem;
  padding: .9375rem;
}

.alert-list-heading,
.report-list-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.alert-list-heading h2,
.report-list-title h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
}

.alert-list-heading p {
  margin: .125rem 0 0;
  color: var(--muted);
  font-size: .625rem;
}

.alert-list {
  display: grid;
}

.alert-row {
  position: relative;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) 7rem;
  gap: .75rem;
  align-items: center;
  min-height: 7rem;
  padding: .8125rem .75rem .8125rem 1rem;
  border-top: 1px solid var(--line);
}

.alert-row::before {
  content: "";
  position: absolute;
  inset: .875rem auto .875rem 0;
  width: .1875rem;
  border-radius: 999px;
  background: var(--gold);
}

.alert-row.severity-critical::before { background: var(--danger); }
.alert-row.severity-info::before { background: var(--forest-700); }

.alert-severity span,
.status-pill {
  display: inline-flex;
  padding: .25rem .4375rem;
  border-radius: 999px;
  color: var(--warning);
  background: var(--gold-soft);
  font-size: .5625rem;
  font-weight: 800;
}

.severity-critical .alert-severity span {
  color: var(--danger);
  background: var(--coral-soft);
}

.severity-info .alert-severity span {
  color: var(--forest-800);
  background: var(--forest-100);
}

.alert-severity small {
  display: block;
  margin-top: .375rem;
  color: var(--muted);
  font-size: .5625rem;
}

.alert-content > div:first-child {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.alert-content h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: .8125rem;
}

.alert-content > div:first-child span {
  color: var(--muted);
  font-size: .5625rem;
}

.alert-content p {
  margin: .25rem 0 .4375rem;
  color: var(--ink-soft);
  font-size: .6875rem;
}

.alert-values {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
}

.alert-values span {
  padding: .1875rem .375rem;
  border-radius: .375rem;
  color: var(--muted);
  background: var(--forest-50);
  font-size: .5rem;
}

.alert-action {
  display: grid;
  justify-items: end;
  gap: .5rem;
}

.status-pill.status-open {
  color: var(--danger);
  background: var(--coral-soft);
}

.status-pill.status-acknowledged {
  color: var(--forest-800);
  background: var(--forest-100);
}

.report-generator {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, .4fr) minmax(0, 1.6fr);
  gap: 1rem;
  padding: .9375rem;
  overflow: hidden;
}

.report-generator-heading {
  position: relative;
  padding: .5rem .75rem;
}

.report-generator-heading h2 {
  margin: .75rem 0 .25rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

.report-generator-heading p {
  margin: 0;
  color: var(--muted);
  font-size: .625rem;
  line-height: 1.6;
}

.report-seal {
  position: absolute;
  right: 0;
  bottom: -2rem;
  color: rgba(195, 146, 62, .1);
  font-family: var(--font-serif);
  font-size: 7rem;
  line-height: 1;
}

.report-generator form {
  display: grid;
  grid-template-columns: .65fr .7fr 1.65fr;
  gap: .75rem;
  min-width: 0;
}

.report-generator fieldset {
  min-width: 0;
  margin: 0;
  padding: .625rem;
  border: 1px solid var(--line);
  border-radius: .6875rem;
}

.report-generator legend {
  padding: 0 .25rem;
  color: var(--muted);
  font-size: .5625rem;
  font-weight: 800;
}

.segmented-control,
.choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
}

.segmented-control input,
.choice-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control span,
.choice-chip span {
  display: inline-flex;
  min-height: 1.875rem;
  align-items: center;
  padding: .375rem .5rem;
  border: 1px solid var(--line);
  border-radius: .4375rem;
  color: var(--ink-soft);
  background: var(--white);
  font-size: .625rem;
  font-weight: 700;
  cursor: pointer;
}

.segmented-control input:checked + span,
.choice-chip input:checked + span {
  border-color: var(--forest-700);
  color: var(--forest-800);
  background: var(--forest-100);
}

.segmented-control input:focus-visible + span,
.choice-chip input:focus-visible + span {
  outline: .1875rem solid color-mix(in srgb, var(--focus) 65%, transparent);
  outline-offset: .125rem;
}

.scenic-choice-grid {
  max-height: 7.25rem;
  overflow: auto;
}

.report-form-footer {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

.report-date,
.push-choice {
  display: flex;
  align-items: center;
  gap: .4375rem;
  color: var(--muted);
  font-size: .625rem;
}

.report-date input {
  min-height: 2.125rem;
  padding: .375rem .5rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--white);
  font-size: .6875rem;
}

.push-choice input {
  accent-color: var(--forest-700);
}

.report-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem;
}

.report-stat-grid article {
  min-height: 5.75rem;
  padding: .75rem;
}

.report-stat-grid span,
.report-stat-grid small {
  display: block;
  color: var(--muted);
  font-size: .5625rem;
}

.report-stat-grid strong {
  display: block;
  margin: .25rem 0 .125rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.report-workbench {
  display: grid;
  grid-template-columns: minmax(15rem, .55fr) minmax(0, 1.45fr);
  gap: .6875rem;
  min-height: 34rem;
}

.report-list-panel,
.report-detail {
  padding: .875rem;
}

.report-list-title span {
  color: var(--muted);
  font-size: .625rem;
}

.report-list {
  display: grid;
  gap: .375rem;
  max-height: 30rem;
  overflow: auto;
}

.report-list-item {
  padding: .625rem;
  border: 1px solid var(--line);
  border-radius: .625rem;
  background: var(--white);
  text-align: left;
}

.report-list-item:hover,
.report-list-item[aria-current="true"] {
  border-color: var(--forest-700);
  background: var(--forest-50);
}

.report-list-item span {
  display: inline-flex;
  padding: .1875rem .375rem;
  border-radius: 999px;
  color: var(--forest-800);
  background: var(--forest-100);
  font-size: .5rem;
  font-weight: 800;
}

.report-list-item strong,
.report-list-item small {
  display: block;
}

.report-list-item strong {
  overflow: hidden;
  margin: .375rem 0 .1875rem;
  font-family: var(--font-serif);
  font-size: .6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-list-item small {
  color: var(--muted);
  font-size: .5rem;
}

.report-detail-empty {
  display: grid;
  min-height: 28rem;
  place-items: center;
  align-content: center;
  color: var(--muted);
  text-align: center;
}

.report-detail-empty span {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: .75rem;
  border-radius: 1.25rem;
  color: var(--forest-800);
  background: var(--gold-soft);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.report-detail-empty p {
  margin: .25rem 0 0;
  font-size: .625rem;
}

.report-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.report-detail-heading h2 {
  margin: .5rem 0 .1875rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

.report-detail-heading p {
  margin: 0;
  color: var(--muted);
  font-size: .5625rem;
}

.report-summary {
  margin: 1rem 0;
  padding: .75rem;
  border-left: .1875rem solid var(--gold);
  border-radius: 0 .5rem .5rem 0;
  color: var(--ink-soft);
  background: var(--gold-soft);
  font-size: .6875rem;
  line-height: 1.7;
}

.report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.report-kpis div {
  padding: .625rem;
  border-radius: .625rem;
  background: var(--forest-50);
}

.report-kpis span,
.report-kpis strong {
  display: block;
}

.report-kpis span {
  color: var(--muted);
  font-size: .5625rem;
}

.report-kpis strong {
  margin-top: .25rem;
  font-family: var(--font-serif);
  font-size: .9375rem;
}

.report-advice {
  margin-top: 1rem;
}

.report-advice h3 {
  font-family: var(--font-serif);
  font-size: .875rem;
}

.report-advice article {
  padding: .625rem 0;
  border-top: 1px solid var(--line);
}

.report-advice article span {
  display: inline-flex;
  margin-right: .5rem;
  color: var(--coral);
  font-size: .5625rem;
  font-weight: 800;
}

.report-advice article strong {
  font-size: .6875rem;
}

.report-advice article p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .625rem;
  line-height: 1.65;
}

.settings-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .625rem;
}

.settings-stat-grid article {
  min-height: 6rem;
  padding: .75rem;
}

.settings-stat-grid span,
.settings-stat-grid small {
  display: block;
  color: var(--muted);
  font-size: .5625rem;
}

.settings-stat-grid strong {
  display: block;
  margin: .25rem 0 .125rem;
  font-family: var(--font-serif);
  font-size: 1.375rem;
}

.settings-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .6875rem;
  padding: .625rem;
}

.search-field {
  flex: 1 1 auto;
}

.search-field input {
  width: 100%;
  min-height: 2.375rem;
  padding: .5625rem .6875rem;
  border: 1px solid var(--line);
  border-radius: .5625rem;
  background: var(--white);
  font-size: .6875rem;
}

.settings-table-card {
  min-height: 30rem;
  margin-top: .6875rem;
  padding: .9375rem;
}

.settings-table-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.settings-table-heading h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
}

.settings-table-heading p {
  margin: .125rem 0 0;
  color: var(--muted);
  font-size: .625rem;
}

.settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .6875rem;
}

.settings-table th {
  padding: .5625rem .5rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: .5625rem;
  text-align: left;
  white-space: nowrap;
}

.settings-table td {
  padding: .6875rem .5rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}

.settings-table td strong,
.settings-table td small {
  display: block;
}

.settings-table td strong {
  color: var(--ink);
  font-family: var(--font-serif);
}

.settings-table td small {
  color: var(--muted);
  font-size: .5rem;
}

.business-pill,
.config-state {
  display: inline-flex;
  padding: .25rem .4375rem;
  border-radius: 999px;
  color: var(--forest-800);
  background: var(--forest-100);
  font-size: .5625rem;
  font-weight: 800;
}

.business-pill.business-electric {
  color: var(--warning);
  background: var(--gold-soft);
}

.config-state {
  color: var(--muted);
  background: var(--cream-200);
}

.row-actions,
.model-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
}

.row-actions .button,
.model-actions .button {
  min-height: 1.875rem;
  padding: .375rem .5rem;
  font-size: .5625rem;
}

.settings-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  color: var(--ink);
  background: var(--cream-50);
  box-shadow: 0 2rem 5rem rgba(20, 45, 36, .26);
}

.settings-dialog::backdrop {
  background: rgba(12, 35, 29, .56);
  backdrop-filter: blur(.1875rem);
}

.settings-dialog form {
  display: grid;
  gap: .75rem;
  padding: 1rem;
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

.dialog-heading h2 {
  margin: .5rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

.dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}

.dialog-grid.three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dialog-field {
  display: grid;
  gap: .3125rem;
  min-width: 0;
}

.dialog-field > span {
  color: var(--ink-soft);
  font-size: .625rem;
  font-weight: 800;
}

.dialog-field input,
.dialog-field select,
.dialog-field textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: .5625rem .625rem;
  border: 1px solid var(--line-strong);
  border-radius: .5625rem;
  background: var(--white);
  font-size: .6875rem;
}

.dialog-field textarea {
  resize: vertical;
}

.dialog-field input[readonly] {
  color: var(--muted);
  background: var(--cream-200);
}

.dialog-field small {
  color: var(--muted);
  font-size: .5rem;
}

.switch-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.25rem;
  padding: .5rem .625rem;
  border-radius: .5625rem;
  background: var(--forest-50);
  font-size: .6875rem;
  font-weight: 700;
}

.switch-field input {
  accent-color: var(--forest-700);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}

.model-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 8.5rem;
  padding: 1.125rem;
  border-color: var(--forest-700);
  color: var(--white);
  background:
    radial-gradient(circle at 80% 0, rgba(229, 201, 143, .21), transparent 15rem),
    linear-gradient(145deg, var(--forest-700), var(--forest-950));
}

.model-hero h2 {
  margin: .75rem 0 .1875rem;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.375rem;
}

.model-hero p {
  margin: 0;
  color: #c7d9d0;
  font-size: .6875rem;
}

.model-hero-status {
  display: grid;
  min-width: 10rem;
  justify-items: end;
}

.model-hero-status .ai-status-dot {
  margin-bottom: .5rem;
}

.model-hero-status strong {
  font-family: var(--font-serif);
  font-size: 1rem;
}

.model-hero-status small {
  color: #adc3b8;
  font-size: .5625rem;
}

.model-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: .6875rem;
}

.model-list-panel {
  min-height: 24rem;
  margin-top: .6875rem;
  padding: .9375rem;
}

.model-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}

.model-card {
  padding: .8125rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--white);
}

.model-card.active {
  border-color: var(--forest-700);
  background: linear-gradient(145deg, var(--white), var(--forest-50));
}

.model-card-top,
.model-card-top > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .625rem;
}

.provider-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .625rem;
  color: var(--forest-900);
  background: var(--gold-soft);
  font-size: .5625rem;
  font-weight: 900;
}

.model-card h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: .8125rem;
}

.model-card-top p {
  margin: .125rem 0 0;
  color: var(--muted);
  font-size: .5625rem;
}

.model-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4375rem;
  margin: .75rem 0;
}

.model-card dl div {
  min-width: 0;
  padding: .5rem;
  border-radius: .5rem;
  background: var(--forest-50);
}

.model-card dt {
  color: var(--muted);
  font-size: .5rem;
}

.model-card dd {
  overflow: hidden;
  margin: .1875rem 0 0;
  font-size: .625rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-remark {
  margin: 0 0 .75rem;
  color: var(--muted);
  font-size: .5625rem;
}

.danger-button {
  border-color: #e3c0b6;
  color: var(--danger);
  background: var(--coral-soft);
}

.model-dialog {
  width: min(42rem, calc(100vw - 2rem));
}

.model-test-state {
  min-height: 2.25rem;
  padding: .5625rem .625rem;
  border-radius: .5625rem;
  color: var(--warning);
  background: var(--gold-soft);
  font-size: .625rem;
  font-weight: 700;
}

.model-test-state.success {
  color: var(--success);
  background: var(--forest-100);
}

@media (max-width: 74rem) {
  .preview-kpis { grid-template-columns: repeat(3, 1fr); }
  .preview-filter-row { grid-template-columns: repeat(2, 1fr); }
  .preview-reset { width: auto; }
  .filter-bar { grid-template-columns: 1fr; }
  .filter-selects { width: 100%; }
  .date-filter { justify-content: flex-start; }
  .period-actions { justify-content: flex-start; flex-wrap: wrap; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alert-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-generator { grid-template-columns: 1fr; }
  .report-generator form { grid-template-columns: repeat(2, 1fr); }
  .report-generator fieldset:last-of-type { grid-column: span 2; }
  .settings-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.9375rem) {
  .login-card { padding: 1.5rem; }
  .preview-kpis { grid-template-columns: repeat(2, 1fr); }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-filter-row { grid-template-columns: 1fr; }
  .shell-preview-header { align-items: stretch; }
  .filter-selects,
  .date-filter { align-items: stretch; flex-direction: column; }
  .date-filter label { justify-content: space-between; }
  .date-separator { display: none; }
  .period-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .period-actions .icon-button,
  .period-actions .button { width: 100%; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-primary { grid-column: span 2; }
  .overview-main-grid,
  .overview-detail-grid { grid-template-columns: 1fr; }
  .trend-chart { height: 14rem; }
  .recommendation-grid { grid-template-columns: 1fr; }
  .chart-legend { display: none; }
  .ai-layout { grid-template-columns: 1fr; }
  .ai-chat-card { min-height: 34rem; }
  .chat-turn { max-width: 96%; }
  .composer-footer { align-items: stretch; flex-direction: column; }
  .history-grid { grid-template-columns: 1fr; }
  .operations-filter { align-items: stretch; flex-direction: column; }
  .operations-filter .button { width: 100%; }
  .compact-select { max-width: none; }
  .alert-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alert-row { grid-template-columns: 1fr; }
  .alert-action { justify-items: start; }
  .report-generator form { grid-template-columns: 1fr; }
  .report-generator fieldset:last-of-type { grid-column: auto; }
  .report-form-footer { align-items: stretch; flex-direction: column; }
  .report-form-footer .button { width: 100%; }
  .report-stat-grid { grid-template-columns: 1fr; }
  .report-workbench { grid-template-columns: 1fr; }
  .report-list { max-height: 20rem; }
  .report-detail-heading { flex-direction: column; }
  .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-toolbar { align-items: stretch; flex-direction: column; }
  .settings-toolbar .button { width: 100%; }
  .settings-stat-grid,
  .model-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog-grid,
  .dialog-grid.three-columns { grid-template-columns: 1fr; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .dialog-actions .button { width: 100%; }
  .model-hero { align-items: flex-start; flex-direction: column; }
  .model-hero-status { justify-items: start; }
  .model-card-grid { grid-template-columns: 1fr; }
}