:root {
  --bg: #f2f5f7;
  --panel: #fffffe;
  --panel-soft: #f7fafb;
  --ink: #101828;
  --muted: #667085;
  --line: #d8e0e7;
  --accent: #0f766e;
  --accent-dark: #115e59;
  --accent-cool: #2563eb;
  --accent-soft: #e9f6f3;
  --warn: #b7791f;
  --danger: #d92d20;
  --good: #067647;
  --profit: #d92d20;
  --loss: #2563eb;
  --surface-raised: #ffffff;
  --surface-tint: #f8fbfc;
  --sidebar: #15181e;
  --sidebar-raised: #222a35;
  --shadow: 0 18px 42px rgba(16, 24, 40, 0.09);
  --shadow-soft: 0 10px 24px rgba(16, 24, 40, 0.065);
}

/* Private access screen */
#loginView.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(520px, 1.18fr) minmax(440px, 0.82fr);
  place-items: stretch;
  padding: 0;
  background: #eef2f5;
}

.login-market-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr minmax(220px, 0.75fr) auto;
  padding: clamp(34px, 5vw, 72px);
  color: #f8fafc;
  background: #0c1420;
  border-right: 1px solid #233246;
}

.login-brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
}

.login-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #2dd4bf;
  border-radius: 6px;
  color: #5eead4;
  font-size: 15px;
  font-weight: 900;
}

.login-brand-lockup > div {
  display: grid;
  gap: 3px;
}

.login-brand-lockup strong {
  font-size: 18px;
  color: #ffffff;
}

.login-brand-lockup small {
  color: #8291a5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.login-market-copy {
  align-self: center;
  margin-top: 50px;
}

.login-market-copy p {
  margin: 0 0 16px;
  color: #5eead4;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.login-market-copy h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1.17;
  letter-spacing: 0;
}

.login-chart {
  position: relative;
  align-self: end;
  width: min(760px, 100%);
  height: 220px;
  border-top: 1px solid #26364a;
  border-bottom: 1px solid #26364a;
}

.login-chart > i {
  position: absolute;
  inset: auto 0;
  height: 1px;
  background: #1d2a3b;
}

.login-chart > i:nth-child(1) { top: 20%; }
.login-chart > i:nth-child(2) { top: 40%; }
.login-chart > i:nth-child(3) { top: 60%; }
.login-chart > i:nth-child(4) { top: 80%; }

.login-chart > span {
  position: absolute;
  top: var(--top);
  bottom: calc(100% - var(--bottom));
  left: var(--x);
  width: 2px;
  background: var(--c);
  transform: translateX(-50%);
}

.login-chart > span:nth-of-type(1) { left: 5%; top: 64%; bottom: 14%; --c: #38bdf8; }
.login-chart > span:nth-of-type(2) { left: 14%; top: 56%; bottom: 22%; --c: #f43f5e; }
.login-chart > span:nth-of-type(3) { left: 23%; top: 60%; bottom: 18%; --c: #38bdf8; }
.login-chart > span:nth-of-type(4) { left: 32%; top: 46%; bottom: 28%; --c: #f43f5e; }
.login-chart > span:nth-of-type(5) { left: 41%; top: 38%; bottom: 36%; --c: #f43f5e; }
.login-chart > span:nth-of-type(6) { left: 50%; top: 43%; bottom: 32%; --c: #38bdf8; }
.login-chart > span:nth-of-type(7) { left: 59%; top: 28%; bottom: 44%; --c: #f43f5e; }
.login-chart > span:nth-of-type(8) { left: 68%; top: 20%; bottom: 53%; --c: #f43f5e; }
.login-chart > span:nth-of-type(9) { left: 77%; top: 30%; bottom: 43%; --c: #38bdf8; }
.login-chart > span:nth-of-type(10) { left: 86%; top: 17%; bottom: 56%; --c: #f43f5e; }
.login-chart > span:nth-of-type(11) { left: 95%; top: 24%; bottom: 49%; --c: #38bdf8; }

.login-chart > span::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  width: clamp(10px, 1.3vw, 16px);
  height: 42%;
  min-height: 18px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--c);
}

.login-market-footer {
  display: flex;
  gap: 28px;
  padding-top: 26px;
  color: #718096;
  font-size: 10px;
  font-weight: 900;
}

.login-auth-column {
  min-width: 0;
  min-height: 100vh;
  overflow-y: auto;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 44px clamp(30px, 5vw, 76px);
  background: #f7f9fb;
}

#loginView .login-panel {
  width: min(430px, 100%);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#loginView .login-panel::before {
  display: none;
}

.login-panel-head {
  margin-bottom: 32px;
}

#loginView .login-panel .eyebrow {
  margin: 0 0 12px;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

#loginView .login-panel h1 {
  margin: 0 0 9px;
  color: #0f172a;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: 0;
}

#loginView .login-panel-head .muted {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

#loginView .stack {
  gap: 18px;
}

#loginView .stack label {
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

#loginView .stack input {
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

#loginView .stack input::placeholder {
  color: #94a3b8;
}

#loginView .stack input:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

#loginView .login-primary-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: 1px solid #0b5f5a;
  border-radius: 6px;
  background: #0f766e;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
}

#loginView .login-primary-btn:hover {
  background: #0b5f5a;
}

#loginView .passkey-login-btn {
  width: 100%;
  min-height: 46px;
  border-color: #b8c6d8;
  background: #f8fafc;
  color: #17324d;
  font-size: 14px;
  font-weight: 850;
}

#loginView .passkey-login-btn:hover {
  border-color: #0f766e;
  background: #f0fdfa;
  color: #0f766e;
}

#loginView .error,
#loginView .auth-status {
  min-height: 20px;
  margin: -7px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: #94a3b8;
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dbe3ea;
}

#loginView .auth-actions {
  margin-top: 0;
}

#loginView .auth-actions button {
  width: 100%;
  min-height: 46px;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

.login-private-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: min(430px, 100%);
  margin: 28px 0 0;
  color: #8491a3;
  font-size: 11px;
}

.login-private-note span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f9f84;
}

@media (max-width: 900px) {
  #loginView.login-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 190px minmax(0, 1fr);
  }

  .login-market-visual {
    grid-template-rows: auto 1fr;
    min-height: 190px;
    padding: 25px clamp(22px, 6vw, 48px);
    border-right: 0;
    border-bottom: 1px solid #233246;
  }

  .login-market-copy {
    align-self: end;
    margin-top: 20px;
  }

  .login-market-copy p {
    display: none;
  }

  .login-market-copy h1 {
    font-size: 25px;
    line-height: 1.25;
  }

  .login-market-copy h1 br {
    display: none;
  }

  .login-chart,
  .login-market-footer {
    display: none;
  }

  .login-auth-column {
    min-height: auto;
    align-content: start;
    padding: 38px 22px 48px;
  }
}

@media (max-width: 520px) {
  #loginView.login-shell {
    grid-template-rows: 150px minmax(0, 1fr);
  }

  .login-market-visual {
    min-height: 150px;
    padding: 20px;
  }

  .login-brand-mark {
    width: 36px;
    height: 36px;
  }

  .login-brand-lockup strong {
    font-size: 16px;
  }

  .login-market-copy h1 {
    font-size: 20px;
  }

  .login-auth-column {
    padding: 30px 20px 42px;
  }

  .login-panel-head {
    margin-bottom: 26px;
  }

  #loginView .login-panel h1 {
    font-size: 29px;
  }
}

.market-calendar-summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2fr);
  gap: 14px;
  margin-bottom: 18px;
}

.market-calendar-now {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-left: 3px solid #64748b;
  background: #f8fafc;
}

.market-calendar-now.open { border-left-color: #0f9f84; }
.market-calendar-now.closed { border-left-color: #ef4444; }
.market-calendar-now span,
.market-calendar-now small,
.market-hours-row span { color: #64748b; font-size: 12px; }
.market-calendar-now strong { font-size: 18px; }

.market-hours-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #dbe4ee;
  border-bottom: 1px solid #dbe4ee;
}

.market-hours-row > div {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 82px;
  padding: 12px 16px;
  border-right: 1px solid #dbe4ee;
}

.market-hours-row > div:last-child { border-right: 0; }
.market-calendar-source { grid-column: 1 / -1; color: #0f766e; font-size: 12px; }

.market-calendar-editor-grid,
.market-calendar-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.market-calendar-editor-grid {
  grid-template-columns: 1fr;
}

.market-calendar-form {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 0.65fr) minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px 0;
  border-top: 1px solid #dbe4ee;
  border-bottom: 1px solid #dbe4ee;
}

.market-calendar-form label { display: grid; gap: 5px; color: #64748b; font-size: 12px; }
.market-calendar-form .muted { margin: 4px 0 0; font-size: 12px; }
.market-calendar-form:nth-child(2) { grid-template-columns: minmax(145px, 1.1fr) minmax(125px, 0.7fr) minmax(140px, 1fr) repeat(2, minmax(105px, 0.6fr)) auto; }
.market-calendar-form button {
  width: auto;
  min-width: 112px;
  white-space: nowrap;
  justify-self: end;
}

.market-calendar-list-grid { margin-top: 18px; }
.market-calendar-list-grid h3 { margin: 0 0 8px; font-size: 15px; }
.market-calendar-list { border-top: 1px solid #dbe4ee; }
.market-calendar-list > div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid #e7edf4;
}
.market-calendar-list time,
.market-calendar-list small { color: #64748b; font-size: 12px; }

.user-lock-badge {
  display: inline-block;
  color: #b42318;
  font-weight: 700;
}

.user-device-summary {
  display: block;
  max-width: 210px;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#userList td:nth-child(4) > strong {
  display: block;
  color: #0f766e;
  font-size: 14px;
}

#userList td:last-child {
  min-width: 220px;
}

@media (max-width: 760px) {
  #userList td:last-child {
    min-width: 0;
  }
}

.user-lock-until {
  display: block;
  margin-top: 3px;
  color: #64748b;
  white-space: nowrap;
}

.unlock-user-btn { color: #b42318; border-color: #fecaca; }

@media (max-width: 1500px) {
  .market-calendar-summary,
  .market-calendar-editor-grid,
  .market-calendar-list-grid { grid-template-columns: 1fr; }
  .market-calendar-form,
  .market-calendar-form:nth-child(2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-calendar-form > div { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .market-hours-row { grid-template-columns: 1fr; }
  .market-hours-row > div { min-height: 64px; border-right: 0; border-bottom: 1px solid #dbe4ee; }
  .market-calendar-form,
  .market-calendar-form:nth-child(2) { grid-template-columns: 1fr; }
  .market-calendar-list > div { grid-template-columns: 90px minmax(0, 1fr); padding: 8px 0; }
}

/* Sector intelligence pages */
.sector-page {
  border-top: 3px solid #0b1220;
}

.sector-page-head {
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.sector-page-head h2 {
  margin-bottom: 4px;
  font-size: 25px;
}

.sector-page-head > span {
  max-width: 360px;
  text-align: right;
}

.sector-toolbar {
  min-height: 48px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sector-market-control,
.sector-period-control {
  width: auto;
}

.sector-period-control button:disabled {
  color: #98a2b3;
  background: #f2f4f7;
  cursor: not-allowed;
  opacity: 0.72;
}

.sector-overview-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sector-estimate-note {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.sector-summary-strip,
.sector-ranking-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.sector-summary-strip > div,
.sector-ranking-summary > div {
  min-height: 78px;
  padding: 12px 14px;
  display: grid;
  align-content: center;
  gap: 5px;
}

.sector-summary-strip > div + div,
.sector-ranking-summary > div + div {
  border-left: 1px solid rgba(15, 23, 42, 0.1);
}

.sector-summary-strip span,
.sector-ranking-summary span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.sector-summary-strip strong,
.sector-ranking-summary strong {
  color: #0b1220;
  font-size: 19px;
  font-weight: 900;
}

.sector-change-highlights {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sector-change-highlights > section {
  min-width: 0;
  min-height: 148px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-top: 3px solid #64748b;
  border-radius: 6px;
  background: #ffffff;
}

.sector-change-highlights > section.good {
  border-top-color: #dc2626;
}

.sector-change-highlights > section.danger {
  border-top-color: #2563eb;
}

.sector-change-highlights > section.rank {
  border-top-color: #0f766e;
}

.sector-change-highlights > section > strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #1e293b;
  font-size: 14px;
  font-weight: 900;
}

.sector-change-highlights > section > strong::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}

.sector-change-highlights > section.good > strong::before {
  background: #dc2626;
}

.sector-change-highlights > section.danger > strong::before {
  background: #2563eb;
}

.sector-change-highlights > section.rank > strong::before {
  background: #0f766e;
}

.sector-change-highlights section > div {
  display: grid;
}

.sector-change-highlights section > div > span {
  min-width: 0;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  color: #334155;
  font-size: 14px;
}

.sector-change-highlights section > div > span + span {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.sector-change-highlights b {
  min-width: 0;
  font-size: 14px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sector-change-highlights em {
  flex: 0 0 auto;
  color: #475569;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.sector-change-highlights .good em {
  color: #dc2626;
}

.sector-change-highlights .danger em {
  color: #2563eb;
}

.sector-change-highlights .rank em {
  color: #0f766e;
}

.sector-change-highlights span.empty {
  min-height: 74px;
  justify-content: center;
  color: #98a2b3;
}

.sector-change-highlights span.empty b {
  font-size: 13px;
  font-weight: 700;
}

.sector-overview-list,
.sector-flow-list,
.sector-ranking-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.sector-overview-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 120px 145px minmax(260px, 1.35fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-left: 5px solid #64748b;
  border-radius: 6px;
  background: #ffffff;
}

.sector-overview-row.good {
  border-left-color: #0f766e;
}

.sector-overview-row.danger {
  border-left-color: #dc2626;
}

.sector-overview-name,
.sector-overview-score,
.sector-overview-context {
  min-width: 0;
}

.sector-overview-name {
  display: grid;
  gap: 3px;
}

.sector-overview-rank {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.sector-overview-name .sector-overview-rank strong {
  color: #0b1220;
  font-size: 16px;
  font-weight: 950;
}

.sector-overview-rank span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.sector-overview-rank span.up {
  color: #dc2626;
}

.sector-overview-rank span.down {
  color: #2563eb;
}

.sector-overview-name > span {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eef2f7;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
}

.sector-overview-row.good .sector-overview-name > span {
  background: #ecfdf5;
  color: #047857;
}

.sector-overview-row.danger .sector-overview-name > span {
  background: #fff1f2;
  color: #b91c1c;
}

.sector-overview-name strong {
  color: #0b1220;
  font-size: 17px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.sector-overview-name small,
.sector-overview-move small {
  color: #64748b;
  font-size: 11px;
}

.sector-overview-move {
  display: grid;
  gap: 4px;
  text-align: right;
}

.sector-overview-move strong {
  font-size: 18px;
  font-weight: 900;
}

.sector-overview-score {
  display: grid;
  gap: 4px;
}

.sector-overview-score > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.sector-overview-score > strong {
  color: #0b1220;
  font-size: 18px;
  font-weight: 900;
}

.sector-overview-score > div,
.sector-ranking-score > div {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf3;
}

.sector-overview-score i,
.sector-ranking-score i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0f766e;
}

.score-width-0 { width: 0%; }
.score-width-5 { width: 5%; }
.score-width-10 { width: 10%; }
.score-width-15 { width: 15%; }
.score-width-20 { width: 20%; }
.score-width-25 { width: 25%; }
.score-width-30 { width: 30%; }
.score-width-35 { width: 35%; }
.score-width-40 { width: 40%; }
.score-width-45 { width: 45%; }
.score-width-50 { width: 50%; }
.score-width-55 { width: 55%; }
.score-width-60 { width: 60%; }
.score-width-65 { width: 65%; }
.score-width-70 { width: 70%; }
.score-width-75 { width: 75%; }
.score-width-80 { width: 80%; }
.score-width-85 { width: 85%; }
.score-width-90 { width: 90%; }
.score-width-95 { width: 95%; }
.score-width-100 { width: 100%; }

.sector-overview-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.sector-overview-metrics > span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 5px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
}

.sector-overview-metrics b {
  display: block;
  margin-bottom: 2px;
  color: #0b1220;
  font-size: 13px;
}

.sector-overview-context {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.sector-overview-insight {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
  gap: 8px;
}

.sector-overview-insight p {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: #f8fafc;
}

.sector-overview-insight p > span {
  display: inline-block;
  margin-right: 8px;
}

.sector-overview-insight .sector-confidence > span {
  padding: 2px 6px;
  border-radius: 4px;
}

.sector-overview-insight .sector-confidence > span.high {
  background: #ecfdf5;
  color: #047857;
}

.sector-overview-insight .sector-confidence > span.medium {
  background: #fff7ed;
  color: #b45309;
}

.sector-overview-insight .sector-confidence > span.check {
  background: #fff1f2;
  color: #b91c1c;
}

.sector-stock-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sector-stock-strip > span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 7px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 4px;
  background: #f8fafc;
  font-size: 12px;
}

.sector-stock-strip small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.sector-stock-strip b {
  min-width: 0;
  color: #0b1220;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sector-stock-strip em {
  align-self: start;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.sector-overview-context p {
  margin: 0;
  color: #334155;
  font-size: 11px;
  line-height: 1.45;
}

.sector-overview-context p span {
  margin-right: 6px;
  color: #64748b;
  font-weight: 900;
}

.sector-flow-leaders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sector-flow-leaders > section {
  min-height: 112px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-top: 3px solid #64748b;
  border-radius: 6px;
  background: #ffffff;
}

.sector-flow-leaders > section.good {
  border-top-color: #dc2626;
}

.sector-flow-leaders > section.danger {
  border-top-color: #2563eb;
}

.sector-flow-leaders > section > span {
  display: block;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.sector-flow-highlight > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sector-flow-highlight strong {
  min-width: 0;
  color: #0b1220;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.sector-flow-highlight em {
  flex: 0 0 auto;
  color: #dc2626;
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
}

.sector-flow-highlight.danger em {
  color: #2563eb;
}

.sector-flow-highlight small {
  display: block;
  margin-top: 9px;
  color: #64748b;
  font-size: 11px;
}

.sector-flow-distribution > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sector-flow-distribution i {
  display: grid;
  gap: 3px;
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  text-align: center;
}

.sector-flow-distribution b {
  color: #475569;
  font-size: 22px;
}

.sector-flow-distribution .good b {
  color: #dc2626;
}

.sector-flow-distribution .danger b {
  color: #2563eb;
}

.sector-flow-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sector-flow-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  padding: 17px 18px;
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-top: 3px solid #64748b;
  border-radius: 6px;
  background: #ffffff;
}

.sector-flow-row.good {
  border-top-color: #dc2626;
}

.sector-flow-row.danger {
  border-top-color: #2563eb;
}

.sector-flow-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sector-flow-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sector-flow-name > b {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef2f6;
  color: #475569;
  font-size: 12px;
}

.sector-flow-name > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sector-flow-name strong {
  color: #0b1220;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.sector-flow-name span,
.sector-flow-score small {
  color: #64748b;
  font-size: 11px;
}

.sector-flow-axis {
  display: grid;
  gap: 7px;
  padding: 9px 11px 11px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 6px;
  background: #f7f9fc;
}

.sector-flow-axis-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
}

.sector-flow-axis-labels span:first-child {
  color: #2563eb;
}

.sector-flow-axis-labels span:last-child {
  color: #dc2626;
}

.sector-flow-axis-labels b {
  color: #475569;
  font-size: 11px;
}

.sector-flow-track {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 3px;
  height: 14px;
  overflow: visible;
}

.sector-flow-track > span {
  display: block;
  height: 100%;
}

.sector-flow-track .outflow {
  border-radius: 999px 3px 3px 999px;
  background: #cfe0ff;
}

.sector-flow-track .balance {
  border-radius: 3px;
  background: #dfe5ec;
}

.sector-flow-track .inflow {
  border-radius: 3px 999px 999px 3px;
  background: #ffd6d2;
}

.sector-flow-marker {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #475569;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.32);
  transform: translate(-50%, -50%);
}

.sector-flow-marker.flow-pos-0 { left: 3%; }
.sector-flow-marker.flow-pos-5 { left: 5%; }
.sector-flow-marker.flow-pos-10 { left: 10%; }
.sector-flow-marker.flow-pos-15 { left: 15%; }
.sector-flow-marker.flow-pos-20 { left: 20%; }
.sector-flow-marker.flow-pos-25 { left: 25%; }
.sector-flow-marker.flow-pos-30 { left: 30%; }
.sector-flow-marker.flow-pos-35 { left: 35%; }
.sector-flow-marker.flow-pos-40 { left: 40%; }
.sector-flow-marker.flow-pos-45 { left: 45%; }
.sector-flow-marker.flow-pos-50 { left: 50%; }
.sector-flow-marker.flow-pos-55 { left: 55%; }
.sector-flow-marker.flow-pos-60 { left: 60%; }
.sector-flow-marker.flow-pos-65 { left: 65%; }
.sector-flow-marker.flow-pos-70 { left: 70%; }
.sector-flow-marker.flow-pos-75 { left: 75%; }
.sector-flow-marker.flow-pos-80 { left: 80%; }
.sector-flow-marker.flow-pos-85 { left: 85%; }
.sector-flow-marker.flow-pos-90 { left: 90%; }
.sector-flow-marker.flow-pos-95 { left: 95%; }
.sector-flow-marker.flow-pos-100 { left: 97%; }

.sector-flow-row.good .sector-flow-marker {
  background: #dc2626;
}

.sector-flow-row.danger .sector-flow-marker {
  background: #2563eb;
}

.sector-flow-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 5px;
  background: #f8fafc;
}

.sector-flow-confidence > span {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
}

.sector-flow-confidence > span.high {
  background: #ecfdf5;
  color: #047857;
}

.sector-flow-confidence > span.medium {
  background: #fff7ed;
  color: #b45309;
}

.sector-flow-confidence > span.check {
  background: #fff1f2;
  color: #b91c1c;
}

.sector-flow-confidence small {
  min-width: 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.35;
}

.sector-flow-score {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.sector-flow-score > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.sector-flow-score strong {
  color: #475569;
  font-size: 27px;
  font-weight: 900;
}

.sector-flow-score small {
  color: #98a2b3;
  font-size: 11px;
}

.sector-flow-row.good .sector-flow-score strong {
  color: #dc2626;
}

.sector-flow-row.danger .sector-flow-score strong {
  color: #2563eb;
}

.sector-flow-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.sector-flow-meta > div {
  min-width: 0;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.sector-flow-meta > div + div {
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.sector-flow-meta span {
  color: #64748b;
  font-size: 10px;
}

.sector-flow-meta b {
  color: #0b1220;
  font-size: 14px;
}

.sector-flow-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #64748b;
  font-size: 11px;
}

.sector-flow-card-foot strong {
  color: #344054;
  font-size: 11px;
}

.sector-ranking-summary {
  margin-bottom: 12px;
  border-top: 3px solid #0b1220;
}

.sector-ranking-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(150px, 0.8fr) 135px 120px minmax(300px, 1.7fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-radius: 6px;
  background: #ffffff;
}

.sector-ranking-row.top {
  border-left: 5px solid #0f766e;
}

.sector-ranking-rank {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.sector-ranking-rank strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0b1220;
  color: #ffffff;
  font-size: 15px;
}

.sector-ranking-rank span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.sector-ranking-name,
.sector-ranking-score,
.sector-ranking-move {
  display: grid;
  gap: 4px;
}

.sector-ranking-name strong {
  color: #0b1220;
  font-size: 17px;
  font-weight: 900;
}

.sector-ranking-name span,
.sector-ranking-move span {
  color: #64748b;
  font-size: 10px;
}

.sector-ranking-score strong,
.sector-ranking-move strong {
  font-size: 17px;
  font-weight: 900;
}

.sector-ranking-reasons {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sector-ranking-reasons span {
  padding: 4px 7px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 4px;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  line-height: 1.25;
}

@media (max-width: 1400px) {
  .sector-overview-row {
    grid-template-columns: minmax(140px, 0.8fr) 110px 130px minmax(230px, 1.3fr);
  }

  .sector-overview-context {
    grid-column: 1 / -1;
    padding-top: 9px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }

  .sector-ranking-row {
    grid-template-columns: 52px minmax(150px, 0.8fr) 125px 110px;
  }

  .sector-ranking-reasons {
    grid-column: 2 / -1;
  }
}

@media (max-width: 760px) {
  .sector-page-head,
  .sector-toolbar,
  .sector-ranking-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sector-page-head > span {
    max-width: none;
    text-align: left;
  }

  .sector-market-control,
  .sector-period-control {
    width: 100%;
  }

  .sector-overview-toolbar-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .sector-market-control button,
  .sector-period-control button {
    min-width: 0;
    flex: 1;
  }

  .sector-summary-strip,
  .sector-ranking-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sector-change-highlights {
    grid-template-columns: 1fr;
  }

  .sector-change-highlights > section {
    min-height: 0;
  }

  .sector-summary-strip > div + div,
  .sector-ranking-summary > div + div {
    border-left: 0;
  }

  .sector-summary-strip > div:nth-child(even),
  .sector-ranking-summary > div:nth-child(even) {
    border-left: 1px solid rgba(15, 23, 42, 0.1);
  }

  .sector-summary-strip > div:nth-child(n+3),
  .sector-ranking-summary > div:nth-child(n+3) {
    border-top: 1px solid rgba(15, 23, 42, 0.1);
  }

  .sector-overview-row,
  .sector-flow-row,
  .sector-ranking-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sector-overview-move,
  .sector-flow-score {
    text-align: left;
  }

  .sector-overview-metrics,
  .sector-flow-meta {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sector-overview-context,
  .sector-ranking-reasons {
    grid-column: auto;
  }

  .sector-overview-insight {
    grid-template-columns: 1fr;
  }

  .sector-flow-leaders {
    grid-template-columns: 1fr;
  }

  .sector-flow-list {
    grid-template-columns: 1fr;
  }

  .sector-flow-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sector-flow-card-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .sector-flow-confidence {
    align-items: flex-start;
    flex-direction: column;
  }

  .sector-flow-axis {
    min-height: 22px;
  }

  .sector-ranking-rank {
    justify-items: start;
    grid-template-columns: 34px auto;
    align-items: center;
  }

  .sector-ranking-name,
  .sector-ranking-score,
  .sector-ranking-move {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .sector-ranking-score > div {
    grid-column: 1 / -1;
  }
}


* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Malgun Gothic", "Segoe UI", Arial, sans-serif;
  background:
    linear-gradient(180deg, #fbfcfd 0%, #f2f5f7 42%, #eef3f5 100%);
  color: var(--ink);
  line-height: 1.45;
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 7px;
  background: linear-gradient(180deg, #16877e, var(--accent-dark));
  color: #fff;
  min-height: 40px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
}

button:hover {
  background: linear-gradient(180deg, #137d75, #0d514c);
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.24);
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

button.secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid #cfd8df;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.045);
}

button.secondary:hover {
  background: #f7fafb;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(8, 145, 178, 0.22);
  outline-offset: 2px;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fcfdfd;
  color: var(--ink);
  min-height: 40px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

input:focus,
select:focus {
  border-color: rgba(8, 145, 178, 0.68);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.11);
}

label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(120deg, rgba(8, 145, 178, 0.16), transparent 42%),
    linear-gradient(300deg, rgba(37, 99, 235, 0.12), transparent 45%),
    var(--bg);
}

.login-panel {
  width: min(460px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-cool));
}

.auth-actions {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.auth-actions button {
  width: 100%;
}

.signup-panel {
  align-self: center;
}

.login-panel h1,
.topbar h1,
.sidebar h2,
.panel h2,
.market-band h2 {
  margin: 0;
  letter-spacing: 0;
}

.stack {
  display: grid;
  gap: 16px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.error {
  min-height: 20px;
  margin: 0;
  color: var(--danger);
}

.auth-status {
  min-height: 20px;
  margin: 0;
}

.success-text {
  color: var(--good);
}

.info-text {
  color: var(--muted);
}

.notice {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.notice.success {
  border-left-color: var(--good);
}

.notice.error {
  border-left-color: var(--danger);
}

.notice.info {
  border-left-color: var(--accent);
}

.alert-toast-stack {
  position: fixed;
  z-index: 30;
  top: 18px;
  right: 18px;
  width: min(390px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.alert-toast {
  pointer-events: auto;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  animation: toast-in 0.22s ease-out;
}

.alert-toast.good {
  border-left-color: var(--good);
}

.alert-toast.warn {
  border-left-color: var(--warn);
}

.alert-toast.danger {
  border-left-color: var(--danger);
}

.alert-toast.closing {
  animation: toast-out 0.22s ease-in forwards;
}

.alert-toast span {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}

.alert-toast strong {
  display: block;
  margin-top: 2px;
}

.alert-toast p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.alert-toast button {
  min-height: 32px;
  padding: 0 10px;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}

.sidebar {
  background:
    linear-gradient(180deg, #0f172a 0%, #123247 48%, #0f172a 100%);
  color: #fff;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar .eyebrow {
  color: #7dd3fc;
}

.sidebar h2 {
  font-size: 22px;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav button {
  background: transparent;
  color: #dbeafe;
  text-align: left;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  box-shadow: none;
}

.nav button:hover,
.nav button.active,
.nav button.parent-active {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(125, 211, 252, 0.26);
  color: #fff;
  box-shadow: inset 3px 0 0 #38bdf8;
}

.nav-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.user-box {
  margin-top: auto;
  display: grid;
  gap: 8px;
  color: #e2edf6;
}

.content {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: 30px;
  display: grid;
  gap: 22px;
  align-content: start;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.topbar h1 {
  font-size: 28px;
  line-height: 1.2;
}

.topbar > div:first-child {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.market-session-status {
  width: fit-content;
  max-width: min(560px, 100%);
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid #cbd8e3;
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  background: #f8fbfd;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.market-session-status strong {
  font-size: 14px;
  line-height: 1.25;
}

.market-session-status span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.market-session-status.open {
  border-left-color: var(--good);
  background: #f0fdf8;
}

.market-session-status.extended {
  border-left-color: var(--accent-cool);
  background: #eff6ff;
}

.market-session-status.waiting {
  border-left-color: var(--warn);
  background: #fff7ed;
}

.market-session-status.closed {
  border-left-color: var(--muted);
  background: #f8fafc;
}

.refresh-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

#refreshStatus {
  min-width: 150px;
  text-align: right;
}

#refreshStatus.failed {
  color: var(--danger);
}

.refresh-toggle {
  display: inline-flex;
  grid-template-columns: none;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.refresh-toggle input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

.market-band,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.market-band {
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(460px, 1.4fr);
  gap: 20px;
  align-items: center;
  border-left: 0;
  background:
    linear-gradient(135deg, #ffffff 0%, #f5fbff 100%);
  position: relative;
  overflow: hidden;
}

.market-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-cool), #14b8a6);
}

.market-band p {
  max-width: 520px;
}

.market-mood-summary {
  margin-top: 16px;
  border: 1px solid rgba(16, 24, 40, 0.11);
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  gap: 5px;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.045);
}

.market-mood-summary.good {
  border-left-color: var(--good);
}

.market-mood-summary.warn {
  border-left-color: var(--warn);
}

.market-mood-summary.danger {
  border-left-color: var(--danger);
}

.market-mood-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.market-mood-summary strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.market-mood-summary.good strong {
  color: var(--good);
}

.market-mood-summary.warn strong {
  color: var(--warn);
}

.market-mood-summary.danger strong {
  color: var(--danger);
}

.market-mood-summary small,
.market-mood-summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.market-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(132px, 1fr));
  gap: 10px;
}

.market-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 5px;
}

.market-card span {
  color: var(--muted);
  font-size: 12px;
}

.market-card strong {
  font-size: 20px;
  line-height: 1.2;
}

.market-card small {
  color: var(--muted);
  font-size: 12px;
}

.market-card .market-change {
  font-weight: 800;
}

.market-card .stock-up {
  color: var(--danger);
}

.market-card .stock-down {
  color: var(--accent-cool);
}

.market-card .stock-flat {
  color: var(--muted);
}

.market-card.unavailable {
  opacity: 0.72;
}

.market-card.stale {
  border-color: #fde68a;
  background: #fffbeb;
}

.stale-data-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 1px 6px;
  background: #fffbeb;
  color: #92400e !important;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
}

.muted.stale,
#newsStatus.stale {
  color: #92400e;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-stat-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.stat-grid div,
.summary-pill {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
}

.stat-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.stat-grid strong,
.summary-pill strong {
  font-size: 17px;
}

.stat-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.35;
}

.scan-stat-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.weekly-quality-time-slots {
  margin-top: 14px;
}

.time-slot-performance {
  border: 1px solid #d4dee8;
  border-radius: 6px;
  background: #f8fafc;
  overflow: hidden;
}

.time-slot-performance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border-bottom: 1px solid #dbe3eb;
  background: #ffffff;
}

.time-slot-performance-head > div {
  display: grid;
  gap: 3px;
}

.time-slot-performance-head span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.time-slot-performance-head h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
}

.time-slot-performance-head p,
.time-slot-reference-note {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.time-slot-performance-head > em {
  flex: 0 0 auto;
  border: 1px solid #c9d9d6;
  border-radius: 999px;
  padding: 6px 10px;
  background: #edf8f5;
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.time-slot-performance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.time-slot-performance-grid > article {
  min-width: 0;
  padding: 13px;
  border: 1px solid #d9e1e8;
  border-top: 3px solid #94a3b8;
  border-radius: 5px;
  background: #ffffff;
}

.time-slot-performance-grid > article.positive,
.time-slot-performance-grid > article.good {
  border-top-color: #dc2626;
}

.time-slot-performance-grid > article.warn,
.time-slot-performance-grid > article.danger {
  border-top-color: #2563eb;
}

.time-slot-performance-grid article header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5eaf0;
}

.time-slot-performance-grid article header > div {
  display: grid;
  gap: 2px;
}

.time-slot-performance-grid article header strong {
  color: #0f172a;
  font-size: 19px;
}

.time-slot-performance-grid article header span,
.time-slot-performance-grid article header em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.time-slot-performance-grid article header em {
  border: 1px solid #d8e0e8;
  border-radius: 999px;
  padding: 4px 7px;
  white-space: nowrap;
}

.time-slot-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 0 9px;
}

.time-slot-primary > div {
  display: grid;
  gap: 3px;
}

.time-slot-primary span,
.time-slot-checkpoints span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.time-slot-primary strong {
  color: #111827;
  font-size: 17px;
}

.time-slot-checkpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border-radius: 4px;
  background: #f3f6f9;
}

.time-slot-checkpoints span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.time-slot-checkpoints b {
  color: #334155;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.time-slot-performance-grid article > p,
.time-slot-performance-grid article > small {
  display: block;
  margin: 9px 0 0;
  color: #475569;
  font-size: 11px;
  line-height: 1.45;
}

.time-slot-performance-grid article > small {
  margin-top: 3px;
  color: #718096;
}

.time-slot-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding: 10px;
  border: 1px solid #d9e2ea;
  border-radius: 5px;
  background: #f7fafc;
}

.time-slot-policy.applied {
  border-color: #f1c4bf;
  background: #fff8f6;
}

.time-slot-policy > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.time-slot-policy span,
.time-slot-policy small {
  color: #64748b;
  font-size: 11px;
}

.time-slot-policy strong {
  color: #172033;
  font-size: 13px;
}

.time-slot-policy button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #9db3c8;
  border-radius: 4px;
  background: #ffffff;
  color: #1e3a5f;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.time-slot-policy button:hover {
  border-color: #0f766e;
  color: #0f766e;
}

.time-slot-reference-note {
  padding: 0 14px 13px;
}

@media (max-width: 1180px) {
  .time-slot-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .time-slot-performance-head {
    display: grid;
  }

  .time-slot-performance-head > em {
    justify-self: start;
  }

  .time-slot-performance-grid {
    grid-template-columns: 1fr;
  }

  .time-slot-policy {
    grid-template-columns: 1fr;
  }

  .time-slot-policy button {
    width: 100%;
  }
}

.recommendation-scan-diagnostics {
  margin-bottom: 14px;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #0f766e;
  border-radius: 6px;
  background: #f8fafc;
  overflow: hidden;
}

.recommendation-scan-diagnostics.is-warn {
  border-left-color: #d97706;
  background: #fffbeb;
}

.recommendation-scan-diagnostics.is-fail {
  border-left-color: #dc2626;
  background: #fff7f7;
}

.scan-diagnostic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.32);
}

.scan-diagnostic-head > div {
  display: grid;
  gap: 3px;
}

.scan-diagnostic-head span,
.scan-diagnostic-head time,
.scan-diagnostic-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.scan-diagnostic-head strong {
  color: #065f46;
  font-size: 19px;
}

.is-warn .scan-diagnostic-head strong {
  color: #b45309;
}

.is-fail .scan-diagnostic-head strong {
  color: #b91c1c;
}

.scan-diagnostic-head small {
  color: #475569;
  line-height: 1.45;
}

.scan-diagnostic-head time {
  flex: 0 0 auto;
  padding-top: 3px;
}

.scan-diagnostic-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.72);
}

.scan-diagnostic-metrics > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid rgba(148, 163, 184, 0.25);
}

.scan-diagnostic-metrics > div:last-child {
  border-right: 0;
}

.scan-diagnostic-metrics strong {
  color: #0f172a;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.scan-diagnostic-issues {
  display: grid;
  gap: 8px;
  padding: 10px 14px 13px;
}

.scan-diagnostic-issues article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #f4d29c;
  border-radius: 5px;
  background: #fffdf7;
}

.scan-diagnostic-issues article.danger {
  border-color: #fecaca;
  background: #fffafa;
}

.scan-diagnostic-issues article > span {
  color: #b45309;
  font-size: 12px;
  font-weight: 900;
}

.scan-diagnostic-issues article.danger > span {
  color: #b91c1c;
}

.scan-diagnostic-issues article div {
  display: grid;
  gap: 2px;
}

.scan-diagnostic-issues article strong {
  color: #111827;
  font-size: 14px;
}

.scan-diagnostic-issues article p,
.scan-diagnostic-issues article small,
.scan-diagnostic-clear {
  margin: 0;
  color: #526176;
  font-size: 12px;
  line-height: 1.45;
}

.scan-diagnostic-issues article small {
  color: #334155;
  font-weight: 700;
}

.scan-diagnostic-clear {
  padding: 2px;
  color: #166534;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .scan-diagnostic-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .scan-diagnostic-metrics > div:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 560px) {
  .scan-diagnostic-head {
    display: grid;
    gap: 8px;
  }

  .scan-diagnostic-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scan-diagnostic-metrics > div:nth-child(3n) {
    border-right: 1px solid rgba(148, 163, 184, 0.25);
  }

  .scan-diagnostic-metrics > div:nth-child(2n) {
    border-right: 0;
  }

  .scan-diagnostic-issues article {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-width: 420px) {
  .scan-diagnostic-metrics {
    grid-template-columns: 1fr;
  }

  .scan-diagnostic-metrics > div {
    border-right: 0;
  }
}

.scan-state.ready {
  border-color: rgba(4, 120, 87, 0.24);
  background: #ecfdf3;
}

.scan-state.running {
  border-color: rgba(10, 95, 89, 0.24);
  background: #e6f4f1;
}

.scan-state.stale {
  border-color: rgba(181, 71, 8, 0.24);
  background: #fff7ed;
}

.scan-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.scan-note span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(330px, 0.9fr) minmax(420px, 1.2fr);
  gap: 18px;
  margin-top: 18px;
}

.watch-workspace.analysis-focus {
  grid-template-columns: minmax(0, 1fr);
}

.watch-workspace.analysis-focus .watch-manager-panel {
  display: none;
}

.watch-workspace.analysis-focus .watch-analysis-panel {
  width: 100%;
  min-width: 0;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.dashboard-focus-panel {
  margin-top: 18px;
  border-color: rgba(15, 118, 110, 0.18);
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
}

.dashboard-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.dashboard-focus-head h2 {
  margin: 2px 0 4px;
  font-size: 24px;
}

.dashboard-focus-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-focus-card {
  min-height: 112px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  display: grid;
  align-content: start;
  gap: 7px;
  box-shadow: none;
  transform: none;
}

.dashboard-focus-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-focus-card-top span {
  border-radius: 999px;
  padding: 4px 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.dashboard-focus-card-top em {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-focus-card-top em.good {
  border-color: rgba(220, 38, 38, 0.18);
  background: #fff1f2;
  color: var(--profit);
}

.dashboard-focus-card-top em.danger {
  border-color: rgba(37, 99, 235, 0.18);
  background: #eff6ff;
  color: var(--loss);
}

.dashboard-focus-card-top em.warn {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fffbeb;
  color: var(--warn);
}

button.dashboard-focus-card {
  cursor: pointer;
}

.dashboard-focus-card:hover {
  border-color: rgba(15, 118, 110, 0.26);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.dashboard-focus-card.danger {
  border-left-color: var(--danger);
}

.dashboard-focus-card.warn {
  border-left-color: var(--warn);
}

.dashboard-focus-card.good {
  border-left-color: var(--good);
}

.dashboard-focus-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-focus-card strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.dashboard-focus-card .dashboard-focus-meta {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 7px;
  color: #64748b;
}

.dashboard-news-impact-panel {
  margin-top: 18px;
}

.watch-alert-panel {
  margin-top: 18px;
  border-color: rgba(8, 145, 178, 0.2);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
}

.watch-alert-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.watch-alert-head-actions button {
  min-height: 32px;
  padding: 0 10px;
}

.watch-change-summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(320px, 1.45fr);
  gap: 10px;
  margin-bottom: 12px;
}

.watch-change-overview {
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 4px;
}

.watch-change-overview span,
.watch-change-overview small,
.watch-change-list button small {
  color: var(--muted);
  font-size: 12px;
}

.watch-change-overview strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.watch-change-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.watch-change-counts b {
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 999px;
  padding: 5px 8px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.watch-change-counts b.danger {
  color: var(--danger);
  background: #fff5f5;
  border-color: rgba(220, 38, 38, 0.2);
}

.watch-change-counts b.warn {
  color: var(--warn);
  background: #fffbeb;
  border-color: rgba(217, 119, 6, 0.22);
}

.watch-change-counts b.good {
  color: var(--good);
  background: #ecfdf5;
  border-color: rgba(5, 150, 105, 0.2);
}

.watch-change-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.watch-change-list button {
  min-height: auto;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
  display: grid;
  justify-items: start;
  gap: 4px;
  text-align: left;
  transform: none;
}

.watch-change-list button:hover {
  background: #f8fbfd;
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.watch-change-list button.good {
  border-left-color: var(--good);
}

.watch-change-list button.warn {
  border-left-color: var(--warn);
}

.watch-change-list button.danger {
  border-left-color: var(--danger);
}

.watch-change-list button b {
  font-size: 13px;
}

.watch-change-list button span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.watch-alert-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.watch-alert-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 13px;
  background: #fff;
  display: grid;
  gap: 9px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.watch-alert-card:hover {
  border-color: rgba(8, 145, 178, 0.34);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.watch-alert-card.unread {
  background:
    linear-gradient(180deg, #ffffff 0%, #f2fbff 100%);
  border-color: rgba(8, 145, 178, 0.34);
  box-shadow: 0 8px 20px rgba(8, 145, 178, 0.08);
}

.watch-alert-card.good {
  border-left-color: var(--good);
}

.watch-alert-card.warn {
  border-left-color: var(--warn);
}

.watch-alert-card.danger {
  border-left-color: var(--danger);
}

.watch-alert-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.watch-alert-top div {
  display: grid;
  gap: 3px;
}

.watch-alert-top strong {
  font-size: 16px;
}

.watch-alert-top span:not(.chip),
.watch-alert-card small {
  color: var(--muted);
  font-size: 12px;
}

.watch-alert-shift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.watch-alert-shift span {
  border: 1px solid #dbe7ef;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fbfd;
  font-weight: 800;
}

.watch-alert-shift .good {
  color: var(--good);
  border-color: rgba(5, 150, 105, 0.24);
  background: #ecfdf5;
}

.watch-alert-shift .warn {
  color: var(--warn);
  border-color: rgba(217, 119, 6, 0.28);
  background: #fffbeb;
}

.watch-alert-shift .danger {
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.26);
  background: #fef2f2;
}

.watch-alert-card p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.watch-alert-focus,
.watch-alert-reason-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fbfd;
}

.watch-alert-focus span,
.watch-alert-reason-line span {
  border-radius: 999px;
  padding: 3px 8px;
  background: #e8f4fb;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.watch-alert-focus strong,
.watch-alert-reason-line strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.watch-alert-news {
  display: block;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.watch-alert-reasons {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

.watch-alert-history {
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 8px;
  background: #fbfdff;
  overflow: hidden;
}

.watch-alert-history summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 11px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.watch-alert-history summary::-webkit-details-marker {
  display: none;
}

.watch-alert-history summary::after {
  content: "열기";
  float: right;
  color: var(--muted);
  font-weight: 800;
}

.watch-alert-history[open] summary::after {
  content: "접기";
}

.watch-alert-history > div {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(16, 24, 40, 0.08);
}

.watch-alert-history-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(120px, 0.7fr) minmax(0, 1.3fr);
  gap: 10px;
  padding: 9px 11px;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
  color: var(--muted);
  font-size: 12px;
}

.watch-alert-history-row:first-child {
  border-top: 0;
}

.watch-alert-history-row b,
.watch-alert-history-row em {
  color: var(--ink);
  font-style: normal;
  font-weight: 850;
}

.watch-alert-history-row small {
  overflow-wrap: anywhere;
}

.watch-alert-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.watch-alert-actions button {
  min-height: 32px;
  padding: 0 10px;
}

.dashboard-risk-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-risk-card {
  border: 1px solid rgba(180, 35, 24, 0.22);
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  padding: 12px;
  background: #fff7f7;
  display: grid;
  gap: 7px;
}

.dashboard-risk-card div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.dashboard-risk-card a,
.stock-news-row a,
.watch-news-impact a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.dashboard-risk-card a:hover,
.stock-news-row a:hover,
.watch-news-impact a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.dashboard-risk-card small {
  color: var(--muted);
  line-height: 1.35;
}

.dashboard-news-summary {
  display: grid;
  grid-template-columns: 1.5fr 0.82fr 0.82fr;
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-news-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
  background: #ffffff;
}

.dashboard-news-overview > div {
  border-left: 1px solid rgba(16, 24, 40, 0.08);
  padding: 12px 14px;
  background: #ffffff;
  display: grid;
  gap: 5px;
}

.dashboard-news-overview > div:first-child {
  border-left: 0;
}

.dashboard-news-overview > div.good {
  background: linear-gradient(180deg, #ffffff 0%, #fff7f8 100%);
}

.dashboard-news-overview > div.danger {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.dashboard-news-overview span,
.dashboard-news-overview small {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-news-overview strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
}

.dashboard-news-summary-card {
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 13px;
  background: #fff;
  display: grid;
  gap: 6px;
}

.dashboard-news-summary-card.good {
  border-left-color: var(--good);
}

.dashboard-news-summary-card.impact {
  border-left-color: var(--accent);
}

.dashboard-news-summary-card.danger {
  border-left-color: var(--danger);
}

.dashboard-news-summary-card > span,
.dashboard-news-summary-card small,
.dashboard-news-summary-card p {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-news-summary-card strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.dashboard-news-summary-card p {
  margin: 0;
}

.dashboard-news-summary-links {
  display: grid;
  gap: 6px;
}

.dashboard-news-summary-links a {
  display: grid;
  gap: 2px;
  color: var(--ink);
  text-decoration: none;
}

.dashboard-news-summary-links a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.dashboard-news-summary-links b,
.dashboard-news-summary-links span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-news-summary-links b {
  font-size: 12px;
}

.dashboard-news-summary-links span {
  font-size: 13px;
  font-weight: 800;
}

.signal-list-more {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.stock-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stock-news-filter-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #f8fafc;
}

.stock-news-filter-note strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.stock-news-filter-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.stock-news-board {
  display: grid;
  gap: 8px;
}

.stock-news-board-row {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.stock-news-board-row.good {
  border-left-color: var(--profit);
}

.stock-news-board-row.danger {
  border-left-color: var(--loss);
}

.stock-news-board-badge {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
}

.stock-news-board-badge small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.stock-news-board-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.stock-news-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.stock-news-board-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.stock-news-board-head strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.stock-news-board-head span,
.stock-news-board-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.stock-news-board-head em {
  white-space: nowrap;
}

.stock-news-board-main p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.stock-news-main-link {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.stock-news-main-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.stock-news-board-meta {
  margin-top: 1px;
}

.stock-news-more {
  border-top: 1px solid rgba(16, 24, 40, 0.08);
  padding-top: 7px;
}

.stock-news-more summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.stock-news-more > div {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.stock-news-more a {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}

.stock-news-more a b {
  color: var(--muted);
  font-size: 12px;
}

.stock-news-more a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.stock-news-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 10px;
}

.stock-news-card.good {
  border-left-color: var(--profit);
}

.stock-news-card.danger {
  border-left-color: var(--loss);
}

.stock-news-card.empty {
  border-left-color: #cbd5e1;
}

.stock-news-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.stock-news-card h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.stock-news-card-top span:not(.chip) {
  color: var(--muted);
  font-size: 12px;
}

.news-impact-label {
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 999px;
  padding: 5px 9px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.news-impact-label.good {
  border-color: rgba(220, 38, 38, 0.2);
  background: #fff1f2;
  color: var(--profit);
}

.news-impact-label.danger {
  border-color: rgba(37, 99, 235, 0.2);
  background: #eff6ff;
  color: var(--loss);
}

.news-impact-type {
  border-color: rgba(13, 148, 136, 0.18) !important;
  background: #ecfdf5 !important;
  color: #0f766e !important;
  font-weight: 900 !important;
}

.investment-calendar-panel {
  display: grid;
  gap: 18px;
}

.calendar-watch-list {
  display: grid;
}

.calendar-watch-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(16, 24, 40, 0.09);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.calendar-watch-card > div:first-child {
  display: grid;
  gap: 4px;
}

.calendar-watch-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.calendar-next-event {
  display: grid;
  gap: 3px;
}

.calendar-watch-card .calendar-next-event > span {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
}

.calendar-next-event > strong {
  font-size: 18px;
}

.calendar-next-event > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.calendar-watch-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calendar-view-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: #f5f7f9;
}

.calendar-view-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.calendar-view-tabs button b {
  margin-left: 5px;
  color: inherit;
}

.calendar-view-tabs button.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.calendar-watch-details {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.calendar-watch-details summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.calendar-watch-details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
}

.calendar-watch-details span {
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 850;
}

.calendar-portfolio-impact {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.calendar-portfolio-impact > div:first-child {
  display: grid;
  gap: 3px;
}

.calendar-portfolio-impact > div:first-child span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.calendar-portfolio-impact > div:first-child strong {
  font-size: 14px;
}

.calendar-portfolio-impact > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.calendar-portfolio-stock-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calendar-portfolio-stock-list > span {
  display: grid;
  gap: 1px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 6px;
  padding: 7px 9px;
  background: #f4fbfa;
}

.calendar-portfolio-stock-list b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.calendar-portfolio-stock-list em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.investment-calendar-list {
  display: grid;
  gap: 16px;
}

.calendar-day-section {
  display: grid;
  gap: 10px;
}

.calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.calendar-day-head strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.calendar-day-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.calendar-event-list {
  display: grid;
  gap: 10px;
}

.investment-calendar-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.035);
}

.investment-calendar-item.good {
  border-left-color: var(--profit);
}

.investment-calendar-item.danger {
  border-left-color: var(--loss);
}

.calendar-event-time {
  display: grid;
  align-content: start;
  gap: 5px;
}

.calendar-event-time span,
.calendar-event-time small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.calendar-event-time strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.calendar-event-main {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.calendar-event-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.calendar-event-top > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-event-top strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.calendar-impact-stars {
  display: grid;
  justify-items: end;
  gap: 3px;
  white-space: nowrap;
}

.calendar-impact-stars > span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.impact-stars {
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1;
}

.impact-stars-filled {
  color: #f59e0b;
}

.impact-stars-empty {
  color: #d7dee6;
}

.calendar-event-main p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.calendar-release-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.calendar-release-values > div {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  background: #fff;
}

.calendar-release-values span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.calendar-release-values strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.calendar-surprise {
  grid-column: 1 / -1;
  padding: 8px 11px;
  background: #f8fafc;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 900;
}

.calendar-surprise.good {
  color: var(--profit) !important;
}

.calendar-surprise.danger {
  color: var(--loss) !important;
}

.calendar-reaction-panel {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  padding: 11px;
  background: #f8fcfc;
}

.calendar-reaction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-reaction-head > div {
  display: grid;
  gap: 2px;
}

.calendar-reaction-head span,
.calendar-reaction-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.calendar-reaction-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.calendar-reaction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.calendar-reaction-grid > div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}

.calendar-reaction-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.calendar-reaction-grid b {
  font-size: 12px;
  font-weight: 950;
}

.calendar-accuracy.changed {
  border-color: rgba(245, 158, 11, 0.3) !important;
  background: #fffbeb !important;
  color: #b45309 !important;
}

.calendar-impact-lines {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbfc;
}

.calendar-impact-line {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.calendar-impact-line b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.calendar-impact-line > div {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.calendar-impact-line span,
.calendar-impact-line em {
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.calendar-impact-line.has-user-impact span {
  border-color: rgba(15, 118, 110, 0.2);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.calendar-impact-line.no-user-impact em {
  color: #94a3b8;
}

.calendar-event-meta {
  gap: 6px;
}

.calendar-action-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  background: #f4fbfa;
}

.calendar-action-line b {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
}

.calendar-action-line span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.calendar-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.calendar-source-link {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.calendar-source-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.calendar-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 24px;
  background: #f8fbfc;
  text-align: center;
}

.calendar-empty strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.calendar-empty p {
  margin: 8px auto 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 13px;
}

.calendar-admin-logs {
  display: grid;
  gap: 8px;
}

.calendar-admin-log-list {
  display: grid;
  gap: 8px;
}

.calendar-admin-log-list article {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.calendar-admin-log-list article.good {
  border-left-color: var(--good);
}

.calendar-admin-log-list article.danger {
  border-left-color: var(--danger);
}

.calendar-admin-log-list article > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.calendar-admin-log-list strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.calendar-admin-log-list span,
.calendar-admin-log-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stock-news-decision {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.stock-news-decision strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.stock-news-decision small {
  color: var(--muted);
  font-size: 12px;
}

.stock-news-row {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.stock-news-row p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.stock-news-source {
  border-color: rgba(15, 23, 42, 0.1) !important;
  background: #eef2f7 !important;
  color: #334155 !important;
}

.stock-news-source.good {
  background: #fff1f2 !important;
  color: var(--profit) !important;
}

.stock-news-source.danger {
  background: #eff6ff !important;
  color: var(--loss) !important;
}

.stock-news-empty {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.watch-news-impact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.watch-news-impact small {
  color: var(--muted);
}

.compact-panel {
  padding: 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.compact-panel .panel-head {
  margin-bottom: 10px;
}

.compact-panel h2 {
  font-size: 18px;
}

.watch-response-summary {
  display: grid;
  gap: 8px;
  margin: -2px 0 12px;
}

.watch-response-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(8, 145, 178, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: #f2fbff;
}

.watch-response-overview strong {
  font-size: 15px;
}

.watch-response-overview span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.watch-response-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.watch-response-pills span {
  border: 1px solid #dbe7ef;
  border-radius: 999px;
  padding: 5px 7px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.watch-response-pills span.danger {
  border-color: rgba(220, 38, 38, 0.24);
  background: #fef2f2;
  color: var(--danger);
}

.watch-response-pills span.warn {
  border-color: rgba(217, 119, 6, 0.26);
  background: #fff7ed;
  color: var(--warn);
}

.watch-response-pills span.good {
  border-color: rgba(5, 150, 105, 0.24);
  background: #ecfdf5;
  color: var(--good);
}

.signal-list {
  display: grid;
  gap: 8px;
}

.signal-list .analysis-empty {
  min-height: 120px;
}

.signal-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 7px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.signal-item-rich {
  gap: 10px;
}

.watch-response-card {
  border-left: 4px solid var(--muted);
}

.watch-response-card.good {
  border-left-color: var(--good);
}

.watch-response-card.warn {
  border-left-color: var(--warn);
}

.watch-response-card.danger {
  border-left-color: var(--danger);
}

.signal-collapsible {
  cursor: pointer;
}

.signal-collapsible:focus-visible {
  outline: 3px solid rgba(8, 145, 178, 0.22);
  outline-offset: 2px;
}

.signal-collapsible.expanded {
  border-color: rgba(8, 145, 178, 0.42);
  box-shadow: var(--shadow-soft);
}

.signal-item:hover,
.recommendation-item:hover,
.news-item:hover,
.portfolio-card:hover {
  border-color: rgba(8, 145, 178, 0.34);
  box-shadow: var(--shadow-soft);
}

.signal-item button {
  min-height: 32px;
  padding: 0 10px;
}

.signal-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.signal-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.signal-heading .signal-price-row {
  grid-column: 2;
}

.signal-heading em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.signal-priority {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eef6fb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.signal-priority.good {
  background: #ecfdf5;
  color: var(--good);
}

.signal-priority.warn {
  background: #fff7ed;
  color: var(--warn);
}

.signal-priority.danger {
  background: #fef2f2;
  color: var(--danger);
}

.signal-title strong,
.signal-title a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.signal-title a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.signal-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.signal-price-row .stock-price,
.signal-price-row .stock-change,
.watch-quote-line .stock-up,
.watch-quote-line .stock-down,
.watch-quote-line .stock-flat {
  font-weight: 800;
}

.stock-up {
  color: var(--danger);
}

.stock-down {
  color: var(--accent-cool);
}

.stock-flat {
  color: var(--muted);
}

.signal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.signal-meta span {
  border: 1px solid #dbe7ef;
  border-radius: 999px;
  padding: 3px 7px;
  background: #f8fbfd;
}

.signal-score-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #fbfdff;
}

.signal-response-summary {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #f8fbff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.signal-quick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.signal-quick-meta span,
.signal-quick-meta small {
  border: 1px solid #dbe7ef;
  border-radius: 999px;
  padding: 3px 7px;
  background: #f8fbfd;
}

.signal-quick-meta small {
  margin-left: auto;
  color: var(--accent-dark);
  font-weight: 800;
}

.signal-response-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.signal-response-strip div {
  border: 1px solid #dbe7ef;
  border-radius: 6px;
  padding: 8px;
  background: #fbfdff;
  min-width: 0;
}

.signal-response-strip span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 4px;
}

.signal-response-strip strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signal-detail-block {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.signal-score-strip div {
  padding: 9px 10px;
  min-width: 0;
}

.signal-score-strip div + div {
  border-left: 1px solid var(--line);
}

.signal-score-strip span,
.signal-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px;
}

.signal-score-strip strong {
  display: block;
  font-size: 16px;
}

.signal-score-strip strong.good {
  color: var(--good);
}

.signal-score-strip strong.warn {
  color: var(--warn);
}

.signal-score-strip strong.danger {
  color: var(--danger);
}

.signal-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding-top: 2px;
}

.signal-detail-grid div {
  min-width: 0;
}

.signal-detail-grid strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.signal-reasons {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.signal-reasons li + li {
  margin-top: 4px;
}

.signal-actions {
  display: flex;
  justify-content: flex-end;
}

.today-panel .panel-head {
  align-items: flex-start;
}

.factor-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.factor-status span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
}

.today-schedule-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.today-schedule-summary > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  display: grid;
  gap: 5px;
  min-width: 0;
}

.today-schedule-summary > div.running {
  border-color: rgba(15, 118, 110, 0.28);
  background: linear-gradient(180deg, #ecfdf5, #ffffff);
}

.today-schedule-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.today-schedule-summary strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  word-break: keep-all;
}

.today-schedule-summary small {
  color: var(--muted);
  font-size: 12px;
}

.today-quality-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.today-quality-summary > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.today-quality-summary .today-quality-main {
  border-left: 4px solid var(--accent);
}

.today-quality-summary .today-quality-main.good {
  border-left-color: var(--good);
  background: linear-gradient(180deg, #ecfdf5, #fff);
}

.today-quality-summary .today-quality-main.warn {
  border-left-color: var(--warn);
  background: linear-gradient(180deg, #fffbeb, #fff);
}

.today-quality-summary .today-quality-main.muted-card {
  border-left-color: var(--muted);
  background: #f8fbfd;
}

.today-quality-summary > div.good {
  border-color: rgba(220, 38, 38, 0.14);
  background: #fff7f7;
}

.today-quality-summary > div.warn {
  border-color: rgba(217, 119, 6, 0.18);
  background: #fff7ed;
}

.today-quality-summary > div.danger {
  border-color: rgba(37, 99, 235, 0.16);
  background: #eff6ff;
}

.today-quality-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.today-quality-summary strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.today-quality-summary small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.signal-guide-panel {
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 8px;
  padding: 0;
  margin: 0 0 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.signal-guide-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.signal-guide-panel summary::-webkit-details-marker {
  display: none;
}

.signal-guide-panel summary::after {
  content: "펼치기";
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.signal-guide-panel[open] summary::after {
  content: "접기";
}

.signal-guide-panel summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.signal-guide-panel summary strong {
  color: var(--ink);
  font-size: 15px;
}

.signal-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}

.signal-guide-grid article {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.signal-guide-grid article.buy {
  border-left-color: var(--danger);
}

.signal-guide-grid article.hold {
  border-left-color: var(--good);
}

.signal-guide-grid article.sell {
  border-left-color: var(--accent-cool);
}

.signal-guide-grid article.watch {
  border-left-color: var(--warn);
}

.signal-guide-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.signal-guide-grid strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.signal-guide-grid p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.42;
}

.signal-guide-grid small,
.signal-guide-flow {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.signal-guide-flow {
  margin: 0 14px 14px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 8px;
  padding: 11px 12px;
  background: #f4fbf9;
  display: grid;
  gap: 3px;
}

.signal-guide-flow span {
  font-weight: 900;
}

.signal-guide-flow strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.recommendation-list {
  display: grid;
  gap: 12px;
}

.today-workspace {
  display: grid;
  grid-template-columns: minmax(520px, 1.05fr) minmax(420px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.today-analysis-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.recommendation-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  min-width: 0;
}

.recommendation-item.recommend {
  border-left: 4px solid var(--good);
}

.recommendation-item.watch {
  border-left: 4px solid var(--warn);
}

.recommendation-group {
  display: grid;
  gap: 12px;
}

.recommendation-group + .recommendation-group {
  margin-top: 4px;
}

.recommendation-group-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.recommendation-group.good .recommendation-group-head {
  border-left-color: var(--good);
}

.recommendation-group.warn .recommendation-group-head {
  border-left-color: var(--warn);
}

.recommendation-group-head div {
  display: grid;
  gap: 3px;
}

.recommendation-group-head strong {
  font-size: 16px;
}

.recommendation-group-head small,
.recommendation-group-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.recommendation-rank {
  min-width: 52px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: linear-gradient(180deg, #1f2937, #111827);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.recommendation-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.recommendation-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.recommendation-card-head > div {
  min-width: 0;
}

.recommendation-card-head h3 {
  margin: 0 0 5px;
  font-size: 19px;
  line-height: 1.25;
}

.recommendation-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.recommendation-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.recommendation-price-row strong {
  font-size: 22px;
  line-height: 1.1;
}

.recommendation-price-row span {
  font-weight: 900;
}

.signal-date-banner {
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.signal-date-banner.compact {
  padding: 9px 10px;
  border-left-color: var(--good);
}

.signal-date-banner span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.signal-date-banner strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.signal-date-banner small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.recommendation-reason-focus {
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-left: 5px solid var(--good);
  border-radius: 8px;
  padding: 11px 12px;
  background: linear-gradient(180deg, #f2fbf8 0%, #ffffff 100%);
  display: grid;
  gap: 4px;
  min-width: 0;
}

.recommendation-reason-focus.recommend {
  border-color: rgba(220, 38, 38, 0.18);
  border-left-color: var(--profit);
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}

.recommendation-reason-focus.watch {
  border-color: rgba(217, 119, 6, 0.22);
  border-left-color: #d97706;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.recommendation-reason-focus span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.recommendation-reason-focus strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.recommendation-reason-focus small {
  color: #475467;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.recommendation-state-panel {
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-left: 5px solid var(--good);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #f4fbf9 0%, #ffffff 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.recommendation-state-panel.warn {
  border-color: rgba(217, 119, 6, 0.22);
  border-left-color: var(--warn);
  background: linear-gradient(180deg, #fff8eb 0%, #ffffff 100%);
}

.recommendation-state-panel.danger {
  border-color: rgba(220, 38, 38, 0.18);
  border-left-color: var(--danger);
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}

.recommendation-state-panel > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.recommendation-state-panel span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.recommendation-state-panel strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.3;
}

.recommendation-state-panel small,
.recommendation-state-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.recommendation-state-panel p {
  border-left: 1px solid rgba(16, 24, 40, 0.1);
  padding-left: 12px;
  font-weight: 800;
}

.recommendation-plain-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.recommendation-plain-facts span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fbfdff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recommendation-plain-facts b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.recommendation-plain-facts span.good {
  border-color: rgba(15, 118, 110, 0.18);
  background: var(--accent-soft);
  color: var(--good);
}

.recommendation-plain-facts span.warn {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fff7ed;
  color: var(--warn);
}

.recommendation-plain-facts span.danger {
  border-color: rgba(220, 38, 38, 0.16);
  background: #fff5f5;
  color: var(--danger);
}

.recommendation-confidence-summary {
  display: grid;
  grid-template-columns: minmax(130px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 3px solid #64748b;
  background: #fbfdff;
}

.recommendation-confidence-summary.high {
  border-left-color: #059669;
}

.recommendation-confidence-summary.medium {
  border-left-color: #d97706;
}

.recommendation-confidence-summary.low {
  border-left-color: #2563eb;
}

.recommendation-confidence-summary > div {
  display: grid;
  gap: 2px;
}

.recommendation-confidence-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.recommendation-confidence-summary strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.recommendation-confidence-summary p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.recommendation-confidence-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.recommendation-confidence-details > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.recommendation-confidence-details > div > span,
.recommendation-confidence-details > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.recommendation-confidence-details > div > p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}

.recommendation-confidence-details b {
  padding: 4px 7px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
}

.recommendation-confidence-details .good b {
  border-color: rgba(5, 150, 105, 0.18);
  color: #047857;
}

.recommendation-confidence-details .warn b {
  border-color: rgba(217, 119, 6, 0.2);
  color: #b45309;
}

.recommendation-confidence-details > small {
  grid-column: 1 / -1;
}

.recommendation-trade-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recommendation-trade-strip > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfdff;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recommendation-trade-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.recommendation-trade-strip strong {
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.recommendation-trade-strip small {
  color: var(--muted);
  font-size: 12px;
}

.recommendation-response-card {
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #f4fbf9, #ffffff);
  display: grid;
  gap: 7px;
}

.recommendation-item.watch .recommendation-response-card {
  border-color: rgba(181, 71, 8, 0.18);
  background: linear-gradient(180deg, #fff8eb, #ffffff);
}

.recommendation-response-card.warn {
  border-color: rgba(217, 119, 6, 0.22);
  background: linear-gradient(180deg, #fff8eb, #ffffff);
}

.recommendation-response-card.danger {
  border-color: rgba(220, 38, 38, 0.16);
  background: linear-gradient(180deg, #fff5f5, #ffffff);
}

.recommendation-response-card span,
.recommendation-simple-meta span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.recommendation-response-card strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
}

.recommendation-response-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.recommendation-decision-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.recommendation-decision-guide > div {
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recommendation-item.watch .recommendation-decision-guide > div {
  border-color: rgba(181, 71, 8, 0.14);
}

.recommendation-decision-guide span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.recommendation-decision-guide strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.recommendation-decision-guide small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.recommendation-simple-reasons {
  margin: 0;
  padding-left: 19px;
  color: var(--ink);
  line-height: 1.55;
}

.recommendation-simple-reasons li + li {
  margin-top: 4px;
}

.recommendation-key-reason {
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--surface-tint);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.recommendation-calendar-impact {
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  padding: 11px 12px;
  background: linear-gradient(180deg, #f4fbf9, #ffffff);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.recommendation-calendar-impact.warn {
  border-color: rgba(217, 119, 6, 0.22);
  background: linear-gradient(180deg, #fff8eb, #ffffff);
}

.recommendation-calendar-impact > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.recommendation-calendar-impact span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.recommendation-calendar-impact strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.recommendation-calendar-impact small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.recommendation-calendar-tags {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 240px;
}

.recommendation-calendar-tags em,
.recommendation-calendar-tags b {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.recommendation-calendar-tags em.positive {
  border-color: rgba(15, 118, 110, 0.2);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.recommendation-calendar-tags em.negative {
  border-color: rgba(217, 119, 6, 0.25);
  background: #fff7ed;
  color: #b45309;
}

.recommendation-simple-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recommendation-simple-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #f8fbfd;
}

.compact-news-link {
  font-size: 13px;
}

.recommendation-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.recommendation-top h3 {
  margin: 0 0 4px;
  font-size: 19px;
}

.recommendation-score {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 98px;
}

.recommendation-score strong {
  font-size: 30px;
  line-height: 1;
}

.factor-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 6px;
}

.factor-grid span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #fbfdff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.recommendation-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 6px;
}

.recommendation-quality {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.34fr);
  gap: 8px;
}

.recommendation-quality > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfdff;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.recommendation-quality span,
.recommendation-chip-groups span,
.analysis-context-head span,
.analysis-context-notes span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.recommendation-quality strong {
  font-size: 17px;
  line-height: 1.2;
}

.recommendation-quality strong.good {
  color: var(--good);
}

.recommendation-quality strong.warn {
  color: var(--warn);
}

.recommendation-quality small {
  color: var(--muted);
  line-height: 1.4;
}

.recommendation-chip-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recommendation-chip-groups > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfdff;
  min-width: 0;
}

.recommendation-chip-groups p,
.analysis-context-notes div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.recommendation-chip-groups b,
.analysis-context-notes b {
  border: 1px solid rgba(29, 116, 92, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  background: #ecfdf3;
  color: var(--good);
  font-size: 12px;
  line-height: 1.25;
}

.recommendation-chip-groups b.watch,
.analysis-context-notes b.watch {
  border-color: rgba(181, 71, 8, 0.22);
  background: #fff7ed;
  color: var(--warn);
}

.breakdown-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #fbfdff;
  display: grid;
  gap: 5px;
}

.breakdown-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.breakdown-item strong {
  font-size: 17px;
  line-height: 1;
}

.breakdown-item small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.recommendation-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recommendation-warnings span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.recommendation-warnings span.warn {
  border-color: rgba(181, 71, 8, 0.28);
  color: var(--warn);
  background: #fff7ed;
}

.recommendation-warnings span.danger {
  border-color: rgba(180, 35, 24, 0.28);
  color: var(--danger);
  background: #fef3f2;
}

.score-formula {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fbfdff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.recommendation-reasons {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.5;
}

.recommendation-reasons li + li {
  margin-top: 3px;
}

.news-link {
  color: var(--accent-dark);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.news-link:hover {
  text-decoration: underline;
}

.recommendation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recommendation-actions button.is-active-response,
.recommendation-actions button:disabled {
  border-color: #b7dfcf;
  background: #ecfbf5;
  color: var(--good);
  opacity: 1;
  cursor: default;
}

.signal-history-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.signal-history-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.signal-history-summary span,
.signal-history-item span,
.signal-history-flow span,
.signal-history-check strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.signal-history-summary strong {
  color: var(--ink);
  font-size: 18px;
}

.signal-history-summary small,
.signal-history-flow small,
.signal-history-check small {
  color: var(--muted);
  font-size: 12px;
}

.signal-history-list {
  display: grid;
  gap: 14px;
}

.signal-history-date-group {
  display: grid;
  gap: 8px;
}

.signal-history-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 2px;
  border-bottom: 1px solid var(--line);
}

.signal-history-date-head strong {
  color: var(--ink);
  font-size: 15px;
}

.signal-history-date-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.signal-history-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 10px;
}

.signal-history-item.active {
  border-left-color: var(--good);
}

.signal-history-item.closed.good,
.signal-history-item.closed.positive {
  border-left-color: var(--danger);
}

.signal-history-item.closed.warn,
.signal-history-item.closed.danger {
  border-left-color: var(--accent-cool);
}

.signal-history-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.signal-history-top > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.signal-history-top strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.signal-history-top > strong {
  white-space: nowrap;
}

.signal-history-result {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 102px;
}

.signal-history-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 9px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.signal-history-status.active {
  border-color: #b7dfcf;
  background: #ecfbf5;
  color: var(--good);
}

.signal-history-status.closed {
  border-color: rgba(37, 99, 235, 0.18);
  background: #eff6ff;
  color: var(--accent-cool);
}

.signal-history-status.pending {
  border-color: rgba(220, 38, 38, 0.16);
  background: #fff1f0;
  color: var(--danger);
}

.signal-history-item p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.signal-history-repeat {
  border: 1px solid rgba(181, 71, 8, 0.16);
  border-radius: 8px;
  padding: 10px;
  background: #fffaf2;
  display: grid;
  gap: 3px;
}

.signal-history-repeat strong {
  color: var(--warn);
  font-size: 13px;
}

.signal-history-repeat span,
.signal-history-repeat small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.signal-history-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.signal-history-flow > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfdff;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.signal-history-flow strong {
  color: var(--ink);
  font-size: 16px;
}

.signal-history-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.signal-history-path > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: #f8fafc;
}

.signal-history-path small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.signal-history-path strong {
  font-size: 14px;
  font-weight: 900;
}

.signal-history-path-summary {
  margin: -2px 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 3px solid #0b7a75;
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.signal-history-reasons {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.signal-history-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.signal-history-check {
  display: inline-grid;
  gap: 2px;
  min-width: 92px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
}

.signal-history-check.done {
  border-color: #cde7da;
  background: #f2fbf7;
}

.signal-history-check.pending {
  background: #f8fafc;
}

.signal-history-check.reference {
  border-radius: 7px;
  border-style: dashed;
  background: #fbfdff;
}

.news-panel {
  margin-top: 0;
}

.news-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.segmented-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef6fb;
}

.segmented-control button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.segmented-control button:hover,
.segmented-control button.active {
  background: #fff;
  border-color: rgba(8, 145, 178, 0.24);
  color: var(--accent-dark);
  transform: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

#newsSortSelect {
  width: auto;
  min-width: 150px;
}

.news-coverage-summary {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.news-coverage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.news-coverage-head strong {
  color: var(--ink);
  font-size: 15px;
}

.news-coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.news-coverage-card {
  border: 1px solid var(--line);
  border-left: 4px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 11px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.news-coverage-card.found {
  border-left-color: var(--accent);
}

.news-coverage-card div {
  display: grid;
  gap: 2px;
}

.news-coverage-card strong {
  color: var(--ink);
}

.news-coverage-card span,
.news-coverage-card small,
.news-coverage-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.news-coverage-card a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.news-coverage-card a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.news-list {
  display: grid;
  gap: 10px;
}

.news-item {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.news-main a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.news-main a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.news-main p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.45;
}

.news-reasons {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.45;
}

.news-reasons li + li {
  margin-top: 3px;
}

.news-meta,
.news-stocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.news-stocks {
  margin-top: 8px;
  color: var(--ink);
}

.news-stocks span,
.news-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
}

.news-score {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 8px;
}

.news-score strong {
  font-size: 24px;
}

.panel {
  padding: 22px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.signup-approval-panel {
  border-left: 4px solid var(--accent);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.panel-head h2 {
  font-size: 20px;
}

.inline-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
}

.stock-search-form {
  grid-template-columns: 1fr auto;
}

.search-results {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 8px;
  box-shadow: var(--shadow-soft);
}

.search-results button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  background: #fbfdff;
  color: var(--ink);
  border: 1px solid var(--line);
  text-align: left;
}

.search-results button:hover {
  background: var(--accent-soft);
  border-color: rgba(8, 145, 178, 0.32);
}

.search-results span,
.search-empty {
  color: var(--muted);
  font-size: 13px;
}

.search-empty {
  padding: 10px;
}

.portfolio-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto;
  gap: 10px;
  margin-bottom: 18px;
}

.portfolio-form input[name="memo"] {
  grid-column: span 2;
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.settings-form label {
  color: var(--ink);
}

.settings-form button {
  min-width: 110px;
}

.settings-section {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
  display: grid;
  gap: 12px;
}

.settings-section h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.settings-section p {
  margin: 0;
  font-size: 13px;
}

.settings-toggle-grid,
.settings-inline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
}

.settings-inline-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.settings-form .check-label {
  min-height: 42px;
  border: 1px solid #dbe7ef;
  border-radius: 7px;
  padding: 9px 10px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}

.settings-form .check-label input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.status-grid div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}

.status-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.status-grid strong {
  font-size: 16px;
}

.status-grid small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.status-grid div.good {
  border-top: 3px solid var(--accent);
}

.status-grid div.warn {
  border-top: 3px solid #d97706;
}

.status-grid div.danger {
  border-top: 3px solid #dc2626;
}

.portfolio-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.portfolio-metrics div {
  border: 1px solid var(--line);
  border-left: 4px solid rgba(16, 24, 40, 0.12);
  border-radius: 6px;
  padding: 11px 12px;
  background: #fff;
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 4px;
}

.portfolio-metrics div.profit {
  border-left-color: var(--danger);
  background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
}

.portfolio-metrics div.loss {
  border-left-color: var(--accent-cool);
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.portfolio-metrics div.warn {
  border-left-color: var(--warn);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);
}

.portfolio-metrics div.danger {
  border-left-color: var(--danger);
  background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
}

.portfolio-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.portfolio-metrics strong {
  font-size: 16px;
  line-height: 1.25;
}

.portfolio-metrics small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.warn-text {
  color: var(--warn);
  font-weight: 900;
}

.portfolio-priority-panel {
  margin-bottom: 16px;
}

.portfolio-priority-section,
.portfolio-priority-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.portfolio-priority-empty {
  border-style: dashed;
}

.portfolio-priority-empty h3,
.portfolio-priority-head h3,
.portfolio-priority-card h3 {
  margin: 0;
}

.portfolio-priority-empty p,
.portfolio-priority-head p,
.portfolio-priority-card p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.portfolio-priority-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.portfolio-priority-head span {
  min-width: 42px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 900;
}

.portfolio-priority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portfolio-priority-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 10px;
}

.portfolio-priority-card.danger {
  border-left-color: var(--danger);
}

.portfolio-priority-card.warn {
  border-left-color: var(--warn);
}

.portfolio-priority-card.good {
  border-left-color: var(--good);
}

.portfolio-priority-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.portfolio-priority-top span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.portfolio-priority-top strong {
  font-size: 18px;
  white-space: nowrap;
}

.portfolio-risk-score {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 72px;
}

.portfolio-risk-score strong {
  font-size: 28px;
  line-height: 1;
}

.portfolio-risk-score strong.danger {
  color: var(--danger);
}

.portfolio-risk-score strong.warn {
  color: var(--warn);
}

.portfolio-risk-score small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.portfolio-risk-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portfolio-risk-details span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.portfolio-risk-details span b {
  margin-left: 4px;
  color: var(--ink);
}

.portfolio-risk-details span.danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: #fef3f2;
  color: var(--danger);
}

.portfolio-risk-details span.warn,
.portfolio-risk-details span.watch {
  border-color: rgba(181, 71, 8, 0.28);
  background: #fff7ed;
  color: var(--warn);
}

.portfolio-priority-card button {
  justify-self: end;
  min-height: 34px;
}

.portfolio-analysis-panel {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.portfolio-card-list {
  display: grid;
  gap: 12px;
}

.portfolio-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  display: grid;
  gap: 12px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.portfolio-card.good {
  border-left: 4px solid var(--good);
}

.portfolio-card.warn,
.portfolio-card.watch {
  border-left: 4px solid var(--warn);
}

.portfolio-card.danger {
  border-left: 4px solid var(--danger);
}

.portfolio-card-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.portfolio-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.portfolio-status {
  min-width: 120px;
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.portfolio-status strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.05;
}

.portfolio-status small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.portfolio-response {
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-left: 4px solid rgba(16, 24, 40, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
  display: grid;
  grid-template-columns: minmax(96px, 130px) minmax(116px, 160px) minmax(82px, 110px) 1fr;
  gap: 8px 14px;
  align-items: center;
}

.portfolio-response.good {
  border-left-color: var(--good);
  background: linear-gradient(180deg, #ffffff 0%, #f2fbf6 100%);
}

.portfolio-response.warn,
.portfolio-response.watch {
  border-left-color: var(--warn);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);
}

.portfolio-response.danger {
  border-left-color: var(--danger);
  background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
}

.portfolio-response div {
  display: grid;
  gap: 2px;
}

.portfolio-response-candidate {
  border-left: 1px solid rgba(16, 24, 40, 0.12);
  padding-left: 14px;
}

.portfolio-response-confidence {
  border-left: 1px solid rgba(16, 24, 40, 0.12);
  padding-left: 14px;
}

.portfolio-response span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.portfolio-response strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.portfolio-response.good strong {
  color: var(--good);
}

.portfolio-response.warn strong,
.portfolio-response.watch strong {
  color: var(--warn);
}

.portfolio-response.danger strong {
  color: var(--danger);
}

.portfolio-response-confidence.good strong {
  color: var(--good);
}

.portfolio-response-confidence.warn strong {
  color: var(--warn);
}

.portfolio-response-confidence.low strong {
  color: var(--muted);
}

.portfolio-response-confidence small {
  grid-column: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.portfolio-response p {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.4;
}

.portfolio-response > small {
  grid-column: 4;
  color: var(--muted);
  line-height: 1.35;
}

.portfolio-response-plan {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.portfolio-response-plan div {
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portfolio-response-plan span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.portfolio-response-plan strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.portfolio-response-plan small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.portfolio-response-evidence {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portfolio-response-evidence span {
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.portfolio-response-more {
  grid-column: 1 / -1;
}

.portfolio-response-more-body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.portfolio-numbers {
  display: grid;
  grid-template-columns: repeat(6, minmax(96px, 1fr));
  gap: 6px;
}

.portfolio-numbers div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}

.portfolio-numbers span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 5px;
}

.portfolio-numbers strong {
  font-size: 14px;
}

.portfolio-reasons {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.45;
}

.portfolio-reasons li + li {
  margin-top: 3px;
}

.portfolio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  display: grid;
  gap: 8px;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.item:hover {
  border-color: rgba(8, 145, 178, 0.34);
  box-shadow: var(--shadow-soft);
}

.item-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  background: #eef6fb;
  color: #155e75;
}

.chip.good {
  color: #047857;
  background: #ecfdf5;
}

.chip.warn {
  color: #b45309;
  background: #fff7ed;
}

.chip.danger {
  color: #b91c1c;
  background: #fef2f2;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.analysis-header > div:first-child {
  min-width: 210px;
  padding-top: 5px;
}

.analysis-header h2 {
  margin: 0;
}

.analysis-signal-context {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.analysis-decision {
  width: min(620px, 62%);
  min-width: 440px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.82fr);
  gap: 8px 16px;
}

.analysis-decision-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: end;
}

.analysis-decision-head > span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.analysis-decision-head strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.15;
}

.analysis-decision.danger .analysis-decision-head strong {
  color: var(--danger);
}

.analysis-decision.warn .analysis-decision-head strong {
  color: var(--warn);
}

.analysis-decision.good .analysis-decision-head strong,
.analysis-decision.positive .analysis-decision-head strong {
  color: var(--good);
}

.analysis-decision-head b {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.analysis-score-bar {
  grid-column: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef5;
}

.analysis-score-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #64748b;
}

.analysis-decision-metrics {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.analysis-decision-metrics > div {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.analysis-decision-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.analysis-decision-metrics strong {
  color: var(--good);
  font-size: 15px;
  line-height: 1;
}

.analysis-decision-metrics .risk strong {
  color: var(--danger);
}

.analysis-decision.danger .analysis-score-bar > span {
  background: var(--danger);
}

.analysis-decision.warn .analysis-score-bar > span {
  background: var(--warn);
}

.analysis-decision.good .analysis-score-bar > span,
.analysis-decision.positive .analysis-score-bar > span {
  background: var(--good);
}

.analysis-decision-reasons {
  grid-column: 1;
  display: grid;
  gap: 5px;
}

.analysis-decision-reasons > span,
.analysis-recovery-guide > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.analysis-decision-reasons > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.analysis-decision-reasons em {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 7px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.analysis-decision-reasons em.danger {
  border-color: #fecaca;
  background: #fff7f7;
  color: #b91c1c;
}

.analysis-decision-reasons em.warn {
  border-color: #fed7aa;
  background: #fffaf3;
  color: #b45309;
}

.analysis-decision-reasons em.good,
.analysis-decision-reasons em.positive {
  border-color: #a7f3d0;
  background: #f3fdf8;
  color: #047857;
}

.analysis-recovery-guide {
  grid-column: 2;
  grid-row: 1 / span 4;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  display: grid;
  align-content: center;
  gap: 4px;
}

.analysis-recovery-guide strong {
  color: var(--ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.analysis-recovery-guide small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.analysis-position-context {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
  margin-top: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #64748b;
  border-radius: 7px;
  background: #f8fafc;
}

.analysis-position-context.good,
.analysis-position-context.positive {
  border-left-color: #0f766e;
}

.analysis-position-context.warn {
  border-left-color: #d97706;
}

.analysis-position-context.danger {
  border-left-color: #dc2626;
}

.analysis-position-context > div {
  min-width: 0;
  padding: 13px 14px;
  display: grid;
  align-content: start;
  gap: 5px;
}

.analysis-position-context > div + div {
  border-left: 1px solid var(--line);
}

.analysis-position-context span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.analysis-position-context strong {
  font-size: 17px;
}

.analysis-position-context small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.analysis-data-basis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 14px;
  align-items: start;
  margin-top: 10px;
  padding: 9px 11px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.analysis-data-basis > strong {
  padding-top: 2px;
  color: var(--ink);
  font-size: 12px;
}

.analysis-data-basis > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
}

.analysis-data-basis span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.analysis-data-basis span + span {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.analysis-data-basis span b {
  margin-right: 4px;
  color: var(--ink);
}

.analysis-data-basis span em {
  margin-left: 4px;
  color: #0f766e;
  font-style: normal;
  font-weight: 800;
}

.analysis-data-basis span.stale,
.analysis-data-basis span.stale em {
  color: #b45309;
}

.analysis-core-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.analysis-core-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-top: 3px solid #64748b;
  border-radius: 6px;
  background: #fff;
  display: grid;
  align-content: start;
  gap: 6px;
}

.analysis-core-card.good,
.analysis-core-card.positive {
  border-top-color: #0f766e;
}

.analysis-core-card.warn {
  border-top-color: #d97706;
}

.analysis-core-card.danger {
  border-top-color: #dc2626;
}

.analysis-core-card > span,
.analysis-section-head span,
.selected-analysis-card > span,
.selected-analysis-card-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.analysis-core-card strong {
  min-width: 0;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.analysis-core-card strong.good,
.analysis-core-card strong.positive {
  color: #047857;
}

.analysis-core-card strong.warn {
  color: #b45309;
}

.analysis-core-card strong.danger {
  color: #dc2626;
}

.analysis-core-card small,
.selected-analysis-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.analysis-response-panel,
.analysis-chart-panel {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.analysis-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.analysis-section-head h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.analysis-section-head > small {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.analysis-zone-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.analysis-zone-row {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid #94a3b8;
  border-radius: 6px;
  background: #fff;
  display: grid;
  gap: 5px;
}

.analysis-zone-row.good,
.analysis-zone-row.positive {
  border-left-color: #0f766e;
}

.analysis-zone-row.danger {
  border-left-color: #dc2626;
}

.analysis-zone-row.warn {
  border-left-color: #d97706;
}

.analysis-zone-row.current {
  background: #f0fdfa;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.analysis-zone-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.analysis-zone-row strong {
  font-size: 18px;
}

.analysis-zone-row small {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.analysis-level-confidence,
.analysis-level-sources {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
}

.analysis-level-confidence {
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: #0f766e;
  font-weight: 900;
}

.analysis-level-backtest {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-top: 3px solid #0f766e;
  border-radius: 8px;
  background: #fff;
}

.analysis-level-backtest.empty {
  border-top-color: #94a3b8;
}

.analysis-level-backtest-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.analysis-level-backtest-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.analysis-level-backtest-head h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.analysis-level-backtest-head em {
  padding: 4px 8px;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.analysis-level-backtest.empty .analysis-level-backtest-head em {
  border-color: var(--line);
  background: #f8fafc;
  color: var(--muted);
}

.analysis-level-backtest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.analysis-level-backtest-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid #0f766e;
  border-radius: 6px;
  background: #f8fafc;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
}

.analysis-level-backtest-grid article + article {
  border-left-color: #2563eb;
}

.analysis-level-backtest-grid span,
.analysis-level-backtest-grid small,
.analysis-level-backtest footer {
  color: var(--muted);
  font-size: 11px;
}

.analysis-level-backtest-grid strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: #0f766e;
  font-size: 24px;
}

.analysis-level-backtest-grid article + article strong {
  color: #1d4ed8;
}

.analysis-level-backtest-grid b,
.analysis-level-backtest-grid small {
  grid-column: 1;
}

.analysis-level-backtest > p {
  margin: 12px 0 0;
  padding: 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.analysis-level-backtest footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.analysis-level-backtest footer span {
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.analysis-level-backtest footer small {
  text-align: right;
  line-height: 1.4;
}

.selected-analysis-insights {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(440px, 1.55fr);
  grid-template-areas:
    "market calendar"
    "validation calendar";
  gap: 8px;
  align-items: start;
  margin-top: 14px;
}

.selected-analysis-insights > .market-comparison {
  grid-area: market;
}

.selected-analysis-insights > .analysis-validation-card {
  grid-area: validation;
}

.selected-analysis-insights > .analysis-calendar-card {
  grid-area: calendar;
}

.selected-analysis-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  display: grid;
  align-content: start;
  gap: 7px;
}

.selected-analysis-card > strong {
  font-size: 18px;
  line-height: 1.3;
}

.selected-analysis-card > b {
  font-size: 16px;
}

.selected-analysis-card.market-comparison.good,
.selected-analysis-card.market-comparison.positive {
  border-top: 3px solid #0f766e;
}

.selected-analysis-card.market-comparison.danger {
  border-top: 3px solid #2563eb;
}

.market-comparison-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.market-comparison-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.market-comparison-head > em {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.market-comparison-head > em.good,
.market-comparison-head > em.positive {
  background: #ecfdf5;
  color: #047857;
}

.market-comparison-head > em.danger {
  background: #eff6ff;
  color: #1d4ed8;
}

.market-comparison-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.market-comparison-values > div {
  min-width: 0;
  padding: 8px 5px;
  display: grid;
  gap: 3px;
}

.market-comparison-values > div + div {
  border-left: 1px solid var(--line);
}

.market-comparison-values span {
  color: var(--muted);
  font-size: 10px;
}

.market-comparison-values strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.selected-analysis-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.selected-analysis-card-head em {
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.selected-analysis-card-head em.good {
  background: #ecfdf5;
  color: #047857;
}

.selected-analysis-card-head em.medium {
  background: #eff6ff;
  color: #1d4ed8;
}

.analysis-validation-reliability {
  padding: 7px 8px;
  border-left: 2px solid #0f766e;
  background: #f0fdfa;
  line-height: 1.45;
}

.analysis-validation-reference {
  padding: 0;
  align-content: initial;
}

.analysis-validation-reference > summary {
  min-height: 72px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.analysis-validation-reference > summary::-webkit-details-marker {
  display: none;
}

.analysis-validation-reference > summary::after {
  content: "+";
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
}

.analysis-validation-reference[open] > summary::after {
  content: "−";
}

.analysis-validation-reference > summary > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.analysis-validation-reference > summary span,
.analysis-validation-reference > summary small {
  color: var(--muted);
  font-size: 11px;
}

.analysis-validation-reference > summary strong {
  font-size: 16px;
}

.analysis-validation-body {
  padding: 0 14px 14px;
  display: grid;
  gap: 7px;
}

.analysis-validation-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 3px;
}

.analysis-validation-periods > div {
  min-width: 0;
  padding: 8px;
  border-left: 2px solid var(--line-strong, #cbd5e1);
  background: #f8fafc;
  display: grid;
  gap: 3px;
}

.analysis-validation-periods span,
.analysis-validation-periods small {
  color: var(--muted);
  font-size: 11px;
}

.analysis-validation-periods b {
  font-size: 14px;
}

.analysis-validation-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.analysis-validation-card .analysis-validation-scope {
  padding: 7px 8px;
  border-left: 2px solid #94a3b8;
  background: #f8fafc;
  line-height: 1.45;
}

.analysis-calendar-events {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.analysis-calendar-events > div {
  padding-top: 7px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
}

.analysis-calendar-events b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.analysis-calendar-events .stars {
  color: #d97706;
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
}

.analysis-calendar-events small {
  grid-column: 1 / -1;
}

.analysis-chart-panel .chart {
  margin: 0;
}

.analysis-chart-price-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.analysis-chart-price-strip > div {
  min-width: 0;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}

.analysis-chart-price-strip > div + div {
  border-left: 1px solid var(--line);
}

.analysis-chart-price-strip span,
.analysis-chart-price-strip small {
  color: var(--muted);
  font-size: 11px;
}

.analysis-chart-price-strip strong {
  font-size: 17px;
  overflow-wrap: anywhere;
}

.analysis-chart-price-strip .support strong {
  color: #2563eb;
}

.analysis-chart-price-strip .resistance strong {
  color: #dc2626;
}

.analysis-chart-toolbar {
  min-height: 42px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.analysis-chart-periods {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.analysis-chart-periods button {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.analysis-chart-periods button + button {
  border-left: 1px solid var(--line);
}

.analysis-chart-periods button.active {
  background: #0f766e;
  color: #fff;
}

.analysis-chart-ma-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 12px;
}

.analysis-chart-ma-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.analysis-chart-ma-controls input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.analysis-chart-ma-controls label > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8;
}

.analysis-chart-ma-controls .ma5 {
  background: #0f766e;
}

.analysis-chart-ma-controls .ma20 {
  background: #7c3aed;
}

.analysis-chart-ma-controls .ma60 {
  background: #d97706;
}

.analysis-technical-details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.analysis-technical-details > summary {
  position: relative;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.analysis-technical-details > summary::-webkit-details-marker {
  display: none;
}

.analysis-technical-details > summary::after {
  content: "+";
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}

.analysis-technical-details[open] > summary::after {
  content: "−";
}

.analysis-technical-details > summary span {
  font-weight: 900;
}

.analysis-technical-details > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.analysis-detail-body {
  padding: 0 2px 14px;
}

.analysis-detail-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.analysis-detail-highlights > div {
  min-width: 0;
  padding: 12px 14px;
  display: grid;
  gap: 3px;
}

.analysis-detail-highlights > div + div {
  border-left: 1px solid var(--line);
}

.analysis-detail-highlights span,
.analysis-detail-highlights small {
  color: var(--muted);
  font-size: 11px;
}

.analysis-detail-highlights strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.analysis-detail-tabs {
  margin-top: 14px;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.analysis-detail-tabs button {
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}

.analysis-detail-tabs button:hover {
  background: #f8fafc;
  color: var(--ink);
}

.analysis-detail-tabs button.active {
  border-bottom-color: #0f766e;
  color: #0f766e;
  background: #f0fdfa;
}

.analysis-detail-panel[hidden] {
  display: none;
}

.analysis-detail-list {
  display: grid;
}

.analysis-detail-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 105px minmax(125px, 0.75fr) minmax(0, 1.5fr);
  gap: 12px;
  align-items: center;
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
}

.analysis-detail-row > span,
.analysis-detail-row > small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.analysis-detail-row > span {
  font-weight: 800;
}

.analysis-detail-row > strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.analysis-detail-row > strong.good,
.analysis-detail-row > strong.positive {
  color: #047857;
}

.analysis-detail-row > strong.warn {
  color: #b45309;
}

.analysis-detail-row > strong.danger,
.analysis-detail-row > strong.negative {
  color: #2563eb;
}

.analysis-detail-conclusion {
  margin: 12px 0 0;
  padding: 11px 12px;
  border-left: 3px solid #0f766e;
  background: #f0fdfa;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.analysis-detail-conclusion b {
  margin-right: 10px;
  color: #0f766e;
}

.analysis-technical-details .analysis-health-grid,
.analysis-technical-details .analysis-grid {
  margin-bottom: 10px;
}

.analysis-recommendation-context {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fbff;
  display: grid;
  gap: 10px;
}

.analysis-context-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
}

.analysis-context-head strong {
  font-size: 17px;
}

.analysis-context-head small {
  color: var(--muted);
  font-weight: 800;
}

.analysis-recommendation-context p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

.analysis-context-factors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}

.analysis-context-factors span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.analysis-context-notes {
  display: grid;
  gap: 8px;
}

.analysis-signal {
  min-width: 170px;
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.analysis-signal strong {
  font-size: 22px;
}

.analysis-signal strong.good {
  color: var(--good);
}

.analysis-signal strong.warn {
  color: var(--warn);
}

.analysis-signal strong.danger {
  color: var(--danger);
}

.analysis-signal small {
  color: var(--muted);
  line-height: 1.35;
}

.analysis-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.analysis-health-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 6px;
}

.analysis-health-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.analysis-health-card strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.analysis-health-card small {
  color: var(--muted);
  line-height: 1.35;
}

.analysis-warning-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.analysis-warning-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.analysis-warning-list span.warn {
  border-color: rgba(181, 71, 8, 0.28);
  color: var(--warn);
  background: #fff7ed;
}

.analysis-warning-list span.danger {
  border-color: rgba(180, 35, 24, 0.28);
  color: var(--danger);
  background: #fef3f2;
}

.analysis-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.analysis-toolbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.analysis-toolbar button {
  min-height: 34px;
}

.analysis-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.chart {
  display: block;
  width: 100%;
  height: 240px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.metric {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
}

.metric span {
  color: var(--muted);
  font-size: 12px;
}

.metric strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}

.metric small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}

.analysis-reason-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.analysis-reason-groups section {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fff;
}

.analysis-reason-groups h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.analysis-reason-groups ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.45;
}

.analysis-news-link {
  display: inline-block;
  margin-top: 12px;
}

.reasons {
  margin: 16px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.table-wrap {
  overflow-x: auto;
}

.signup-request-list {
  margin-bottom: 14px;
}

.signup-request-list:last-child {
  margin-bottom: 0;
}

.admin-alert-stats {
  margin-bottom: 14px;
}

.backup-stat-grid {
  margin-bottom: 14px;
}

.deploy-check-stats {
  margin-bottom: 14px;
}

.deploy-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.deploy-check-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 7px;
}

.deploy-check-item.good {
  border-left-color: var(--good);
}

.deploy-check-item.warn {
  border-left-color: var(--warn);
  background: #fffdf7;
}

.deploy-check-item.danger {
  border-left-color: var(--danger);
  background: #fff8f8;
}

.deploy-check-item div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.deploy-check-item p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.deploy-check-item small {
  color: var(--muted);
  line-height: 1.4;
}

.slow-request-card {
  grid-column: 1 / -1;
}

.server-diagnostic-card {
  grid-column: 1 / -1;
}

.server-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.server-diagnostic-grid section {
  border: 1px solid var(--line);
  border-left: 4px solid var(--good);
  border-radius: 7px;
  padding: 10px;
  background: #fff;
  display: grid;
  gap: 5px;
}

.server-diagnostic-grid section.warn {
  border-left-color: var(--warn);
  background: #fffdf7;
}

.server-diagnostic-grid section.danger {
  border-left-color: var(--danger);
  background: #fff8f8;
}

.server-diagnostic-grid strong {
  color: var(--ink);
  font-size: 14px;
}

.server-diagnostic-grid p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.server-diagnostic-grid small {
  color: var(--muted);
  line-height: 1.4;
}

.deploy-check-item .slow-request-log {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.slow-request-log span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #fff;
  min-width: 0;
}

.slow-request-log b {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.slow-request-log em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.backup-list table {
  min-width: 980px;
}

.backup-list td:first-child {
  font-weight: 800;
}

.backup-preview-btn {
  min-width: 92px;
  white-space: nowrap;
}

.backup-restore-panel {
  margin: 0 0 16px;
  border: 1px solid #b9cbd8;
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(15, 35, 55, 0.08);
}

.backup-restore-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.backup-restore-head h3 {
  margin: 4px 0 5px;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.backup-restore-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.backup-restore-head .icon-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.backup-validation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border-left: 4px solid var(--good);
  background: #f2fbf7;
}

.backup-validation.danger {
  border-left-color: var(--danger);
  background: #fff5f5;
}

.backup-validation strong {
  flex: 0 0 auto;
}

.backup-validation span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.backup-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.backup-compare-item {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
}

.backup-compare-item span,
.backup-compare-item small {
  color: var(--muted);
  font-size: 12px;
}

.backup-compare-item strong {
  font-size: 15px;
}

.backup-compare-item small.increase {
  color: var(--danger);
}

.backup-compare-item small.decrease {
  color: #1769d1;
}

.backup-restore-warning {
  margin-top: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.backup-restore-warning p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.backup-restore-confirm {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.backup-restore-confirm label {
  color: var(--ink);
  font-size: 13px;
}

.backup-restore-confirm > div {
  display: flex;
  gap: 8px;
}

.backup-restore-confirm input {
  width: min(260px, 100%);
}

.danger-button {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.danger-button:hover:not(:disabled) {
  border-color: #c82323;
  background: #c82323;
}

.danger-button:disabled {
  border-color: #d8dee5;
  background: #e9edf1;
  color: #8b96a3;
  cursor: not-allowed;
}

.admin-alert-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.admin-alert-insights > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
  min-width: 0;
}

.admin-alert-insights h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.admin-alert-mini-list {
  display: grid;
  gap: 8px;
}

.admin-alert-mini-list div {
  border: 1px solid #dbe7ef;
  border-radius: 7px;
  padding: 9px;
  background: #fff;
  display: grid;
  gap: 3px;
}

.admin-alert-mini-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-alert-mini-list span,
.admin-alert-mini-list small,
.admin-alert-list small {
  color: var(--muted);
  font-size: 12px;
}

.admin-alert-list table {
  min-width: 1120px;
}

.admin-alert-summary-cell {
  max-width: 360px;
  white-space: normal;
  line-height: 1.4;
}

.recommendation-evaluation-stats {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 14px;
}

.recommendation-evaluation-panel .panel-head {
  align-items: flex-start;
  gap: 14px;
}

.recommendation-evaluation-panel .panel-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.recommendation-evaluation-stats > div {
  border-left: 4px solid rgba(16, 24, 40, 0.12);
  min-width: 0;
}

.recommendation-evaluation-stats .evaluation-stat-main {
  border-left-color: var(--accent);
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
}

.recommendation-evaluation-stats strong.stock-up,
.recommendation-evaluation-stats strong.stock-down,
.recommendation-evaluation-list strong.stock-up,
.recommendation-evaluation-list strong.stock-down {
  font-size: 20px;
}

.recommendation-evaluation-category-grid {
  display: block;
  margin-bottom: 14px;
}

.recommendation-evaluation-category-grid > article {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.recommendation-evaluation-category-grid > article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.recommendation-evaluation-category-grid > article span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.recommendation-evaluation-category-grid > article strong {
  color: var(--ink);
  font-size: 20px;
  white-space: nowrap;
}

.recommendation-evaluation-category-grid > article small,
.recommendation-evaluation-list small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.evaluation-insight-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.evaluation-insight-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.evaluation-insight-card {
  border: 1px solid var(--line);
  border-left: 4px solid rgba(102, 112, 133, 0.35);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  display: grid;
  gap: 6px;
  min-width: 0;
}

.evaluation-insight-card.main {
  border-left-color: var(--accent);
}

.evaluation-insight-card.good,
.evaluation-condition-row.good,
.evaluation-condition-row.positive {
  border-left-color: var(--good);
}

.evaluation-insight-card.warn,
.evaluation-condition-row.warn {
  border-left-color: var(--warn);
}

.evaluation-insight-card.danger,
.evaluation-condition-row.danger {
  border-left-color: var(--danger);
}

.evaluation-insight-card > span,
.evaluation-condition-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.evaluation-insight-card > strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.evaluation-insight-card > small,
.evaluation-condition-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.holding-period-performance {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.holding-period-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.holding-period-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.holding-period-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.holding-period-head > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(11, 122, 117, 0.18);
  border-radius: 999px;
  background: #f0fdfa;
  color: #0b7a75;
  font-size: 11px;
  font-weight: 900;
}

.holding-period-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.holding-period-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 7px;
  background: #fff;
}

.holding-period-grid article.best {
  border-color: rgba(5, 150, 105, 0.28);
  background: #f4fbf8;
}

.holding-period-grid article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.holding-period-grid span,
.holding-period-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.holding-period-grid em {
  color: #047857;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.holding-period-grid strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
}

.evaluation-condition-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.evaluation-condition-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 4px solid #64748b;
  border-radius: 8px;
  background: #fff;
}

.evaluation-condition-head::-webkit-details-marker {
  display: none;
}

.evaluation-condition-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.evaluation-condition-head > div > span {
  color: #0f766e;
  font-size: 10px;
  font-weight: 900;
}

.evaluation-condition-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.evaluation-condition-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.evaluation-condition-head > em {
  flex: 0 0 auto;
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.evaluation-condition-head::after {
  content: "펼치기";
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
}

.evaluation-condition-details[open] > .evaluation-condition-head::after {
  content: "접기";
}

.evaluation-condition-details-body {
  padding: 0 14px 14px;
}

.market-regime-detail {
  margin: -2px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.evaluation-condition-table {
  display: grid;
  gap: 8px;
}

.evaluation-condition-row {
  border: 1px solid var(--line);
  border-left: 4px solid rgba(102, 112, 133, 0.35);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) minmax(88px, 0.6fr) minmax(88px, 0.6fr) minmax(92px, 0.7fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.evaluation-condition-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.evaluation-condition-row strong {
  color: var(--ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.evaluation-adjustment-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  display: grid;
  gap: 14px;
}

.evaluation-adjustment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.evaluation-adjustment-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.evaluation-adjustment-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.evaluation-adjustment-head > span {
  border: 1px solid rgba(11, 122, 117, 0.16);
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef7f5;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.evaluation-adjustment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.evaluation-adjustment-list,
.evaluation-adjustment-rule {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}

.evaluation-adjustment-list.good {
  border-top: 3px solid var(--good);
}

.evaluation-adjustment-list.danger {
  border-top: 3px solid var(--danger);
}

.evaluation-adjustment-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.evaluation-adjustment-title strong,
.evaluation-adjustment-rule > strong {
  color: var(--ink);
  font-size: 14px;
}

.evaluation-adjustment-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.evaluation-adjustment-list article {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 7px;
  padding: 9px;
  background: #fbfdff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.evaluation-adjustment-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.evaluation-adjustment-list span,
.evaluation-adjustment-rule span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.evaluation-adjustment-list article strong {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.evaluation-adjustment-list article small,
.evaluation-adjustment-list p,
.evaluation-adjustment-rule small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.evaluation-adjustment-list article b {
  flex: 0 0 auto;
  font-size: 15px;
  white-space: nowrap;
}

.evaluation-adjustment-rule {
  background: #f8fbfd;
}

.evaluation-adjustment-rule span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff;
  justify-self: start;
}

.recommendation-evaluation-list {
  display: grid;
  gap: 14px;
  overflow: visible;
}

.evaluation-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.evaluation-list-head h3 {
  margin: 0;
  font-size: 17px;
}

.evaluation-list-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.evaluation-list-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.evaluation-symbol-list {
  display: grid;
  gap: 12px;
}

.evaluation-performance-brake {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid #667085;
  border-radius: 8px;
  background: #f8fafc;
}

.evaluation-performance-brake.strict {
  border-left-color: #dc2626;
  background: #fff7f6;
}

.evaluation-performance-brake.caution {
  border-left-color: #d97706;
  background: #fffbeb;
}

.evaluation-performance-brake.normal {
  border-left-color: #0f766e;
  background: #f0fdfa;
}

.evaluation-performance-brake > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.evaluation-performance-brake span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.evaluation-performance-brake h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.evaluation-performance-brake p,
.evaluation-performance-brake small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.evaluation-performance-brake-stats {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  min-width: 230px;
  text-align: right;
}

.evaluation-performance-brake-stats strong {
  color: var(--ink);
  font-size: 15px;
}

.evaluation-performance-brake-stats em {
  color: #344054;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.evaluation-policy-comparison {
  display: grid;
  gap: 13px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 5px solid #64748b;
  border-radius: 8px;
  background: #ffffff;
}

.evaluation-policy-comparison.measurable {
  border-left-color: #0f766e;
}

.evaluation-policy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.evaluation-policy-head > div {
  display: grid;
  gap: 4px;
}

.evaluation-policy-head span,
.evaluation-policy-label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.evaluation-policy-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.evaluation-policy-head p,
.evaluation-policy-status small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.evaluation-policy-head > em,
.evaluation-policy-label em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #d7e0e8;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.evaluation-policy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.evaluation-policy-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #dfe6ed;
  border-top: 3px solid #94a3b8;
  border-radius: 6px;
  background: #f8fafc;
}

.evaluation-policy-grid article.current {
  border-top-color: #0f766e;
  background: #f4fbfa;
}

.evaluation-policy-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.evaluation-policy-grid article > strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}

.evaluation-policy-grid article > small {
  color: var(--muted);
  font-size: 11px;
}

.evaluation-policy-arrow {
  align-self: center;
  color: #64748b;
  font-size: 20px;
  font-weight: 900;
}

.evaluation-policy-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.evaluation-policy-metrics span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid #dfe6ed;
  color: var(--muted);
  font-size: 10px;
}

.evaluation-policy-metrics b {
  color: var(--ink);
  font-size: 12px;
}

.evaluation-policy-status {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 3px solid #64748b;
  background: #f8fafc;
}

.evaluation-policy-comparison.measurable .evaluation-policy-status {
  border-left-color: #0f766e;
  background: #f0fdfa;
}

.evaluation-policy-status strong {
  color: var(--ink);
  font-size: 12px;
}

.evaluation-excluded-history {
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 4px solid #667085;
  border-radius: 8px;
  background: #f8fafc;
}

.evaluation-excluded-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.evaluation-excluded-history > summary::-webkit-details-marker {
  display: none;
}

.evaluation-excluded-history > summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.evaluation-excluded-history > summary span {
  color: #667085;
  font-size: 10px;
  font-weight: 900;
}

.evaluation-excluded-history > summary strong {
  color: var(--ink);
  font-size: 16px;
}

.evaluation-excluded-history > summary small,
.evaluation-excluded-empty {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.evaluation-excluded-history > summary em {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.evaluation-excluded-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  padding: 0 14px 14px;
  overflow-y: auto;
}

.evaluation-excluded-list > article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.evaluation-excluded-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.evaluation-excluded-title > div {
  display: grid;
  gap: 3px;
}

.evaluation-excluded-title strong {
  color: var(--ink);
  font-size: 14px;
}

.evaluation-excluded-title small,
.evaluation-excluded-list p,
.evaluation-excluded-observation small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.evaluation-excluded-title > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  color: #475467;
  font-size: 10px;
  font-weight: 900;
}

.evaluation-excluded-list p {
  margin: 0;
}

.evaluation-excluded-observation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 6px;
  background: #f2f4f7;
}

.evaluation-excluded-observation > div {
  display: grid;
  gap: 2px;
}

.evaluation-excluded-observation span {
  color: #667085;
  font-size: 10px;
  font-weight: 900;
}

.evaluation-excluded-observation strong {
  color: #344054;
  font-size: 13px;
}

.evaluation-symbol-card {
  border: 1px solid var(--line);
  border-left: 5px solid rgba(102, 112, 133, 0.35);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.evaluation-symbol-card.good {
  border-left-color: var(--good);
}

.evaluation-symbol-card.warn {
  border-left-color: var(--warn);
}

.evaluation-symbol-card.danger {
  border-left-color: var(--danger);
}

.evaluation-symbol-card.pending,
.evaluation-symbol-card.neutral {
  border-left-color: rgba(102, 112, 133, 0.45);
}

.evaluation-symbol-card summary {
  display: grid;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.evaluation-symbol-card summary::-webkit-details-marker {
  display: none;
}

.evaluation-symbol-card summary::after {
  content: "펼쳐보기";
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.evaluation-symbol-card[open] summary::after {
  content: "접기";
}

.evaluation-symbol-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.evaluation-symbol-top > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.evaluation-symbol-top strong {
  color: var(--ink);
  font-size: 19px;
  overflow-wrap: anywhere;
}

.evaluation-symbol-top small {
  color: var(--muted);
  font-size: 12px;
}

.evaluation-symbol-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.evaluation-symbol-metrics > div {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: #fbfdff;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.evaluation-symbol-metrics span,
.evaluation-history-prices span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.evaluation-symbol-metrics strong {
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.evaluation-symbol-metrics small {
  color: var(--muted);
  font-size: 12px;
}

.evaluation-history-list {
  border-top: 1px solid var(--line);
  background: #f4f7f9;
  display: grid;
  gap: 14px;
  padding: 14px 16px 16px;
}

.evaluation-date-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.evaluation-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #f7fafb, #eef4f6);
}

.evaluation-date-head strong {
  color: var(--ink);
  font-size: 15px;
}

.evaluation-date-head span {
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.evaluation-history-table {
  display: grid;
}

.evaluation-history-header,
.evaluation-history-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.95fr) minmax(190px, 1.2fr) minmax(125px, 0.85fr) minmax(180px, 1fr) 105px 105px 96px;
  gap: 10px;
  align-items: center;
}

.evaluation-history-header {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.evaluation-history-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.evaluation-history-row:last-child {
  border-bottom: 0;
}

.history-time,
.history-decision,
.history-price,
.history-return,
.history-duration,
.history-basis {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.history-time strong,
.history-price strong,
.history-duration strong,
.history-return strong {
  color: var(--ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.history-return strong {
  font-size: 19px;
}

.history-time span,
.history-price span,
.history-duration span,
.history-basis span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.history-decision .evaluation-decision {
  justify-self: start;
}

.history-decision small,
.history-price small,
.history-duration small,
.history-return small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.history-basis span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fbfd;
  justify-self: start;
}

.evaluation-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.evaluation-card {
  border: 1px solid var(--line);
  border-left: 5px solid rgba(102, 112, 133, 0.35);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  display: grid;
  gap: 14px;
  min-width: 0;
  box-shadow: var(--shadow-soft);
}

.evaluation-card.recommend {
  border-left-color: var(--good);
}

.evaluation-card.watch {
  border-left-color: var(--warn);
}

.evaluation-card.danger {
  border-left-color: var(--danger);
}

.evaluation-card.pending {
  border-left-color: rgba(102, 112, 133, 0.45);
}

.evaluation-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.evaluation-card-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.evaluation-card-head strong {
  color: var(--ink);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.evaluation-decision {
  flex: 0 0 auto;
  border: 1px solid rgba(102, 112, 133, 0.18);
  border-radius: 999px;
  padding: 5px 10px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.evaluation-decision.good {
  border-color: rgba(6, 118, 71, 0.18);
  background: rgba(232, 250, 240, 0.95);
  color: var(--good);
}

.evaluation-decision.warn {
  border-color: rgba(183, 121, 31, 0.22);
  background: rgba(255, 249, 235, 0.95);
  color: var(--warn);
}

.evaluation-decision.danger {
  border-color: rgba(217, 45, 32, 0.18);
  background: rgba(254, 243, 242, 0.95);
  color: var(--danger);
}

.evaluation-decision.pending,
.evaluation-decision.neutral {
  border-color: rgba(102, 112, 133, 0.2);
  background: #f8fbfd;
  color: var(--muted);
}

.evaluation-verdict {
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #f7fbfa, #ffffff);
  display: grid;
  gap: 8px;
}

.evaluation-verdict > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.evaluation-verdict span,
.evaluation-price-flow span,
.evaluation-check-point span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.evaluation-verdict strong {
  font-size: 26px;
}

.evaluation-verdict p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.45;
}

.evaluation-late-note {
  border: 1px solid rgba(183, 121, 31, 0.18);
  border-radius: 7px;
  padding: 8px 10px;
  background: rgba(255, 249, 235, 0.8);
  color: #8a5a12;
  font-size: 12px;
  font-weight: 800;
}

.evaluation-price-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.evaluation-price-flow > div:not(.evaluation-flow-arrow) {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: #fbfdff;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.evaluation-flow-arrow {
  align-self: center;
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
}

.evaluation-price-flow strong {
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.evaluation-check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.evaluation-check-point {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: #fff;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.evaluation-check-point.pending {
  background: #f8fbfd;
}

.evaluation-check-point strong {
  color: var(--ink);
  font-size: 15px;
}

.evaluation-check-point .stock-up,
.evaluation-check-point .stock-down,
.evaluation-check-point .stock-flat {
  font-size: 15px;
}

.evaluation-check-point small {
  color: var(--muted);
  line-height: 1.35;
}

.evaluation-capture-time {
  color: #8a5a12;
  font-weight: 800;
}

.evaluation-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.evaluation-card-foot span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.evaluation-pending {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.signup-request-list table {
  border: 1px solid var(--line);
  background: #fff;
  min-width: 720px;
}

.signup-request-list td:last-child {
  white-space: nowrap;
}

.compact-empty {
  min-height: auto;
  margin-bottom: 14px;
  padding: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
  background: #fff;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 13px;
  background: #f8fbfd;
}

.positive {
  color: var(--good);
  font-weight: 800;
}

.negative {
  color: var(--danger);
  font-weight: 800;
}

/* Premium visual polish */
.login-shell {
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 38%),
    linear-gradient(315deg, rgba(30, 64, 175, 0.06), transparent 42%),
    linear-gradient(180deg, #fbfcfd 0%, #eef3f5 100%);
}

.login-panel {
  border-color: rgba(16, 24, 40, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.13);
}

.login-panel::before {
  height: 3px;
  background: linear-gradient(90deg, #0f766e, #1d4ed8, #9a3412);
}

.eyebrow {
  color: var(--accent-dark);
  letter-spacing: 0;
}

.app {
  background:
    linear-gradient(180deg, #f8fafb 0%, #eef3f5 100%);
}

.sidebar {
  background:
    linear-gradient(180deg, #171a21 0%, #202833 52%, #12151b 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 12px 0 34px rgba(16, 24, 40, 0.16);
}

.sidebar .eyebrow {
  color: #a7f3d0;
}

.sidebar h2 {
  color: #f9fafb;
}

.nav button {
  border-radius: 7px;
  color: #d7dde6;
}

.nav button:hover,
.nav button.active {
  background: rgba(255, 255, 255, 0.095);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 3px 0 0 #34d399;
}

.user-box {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 16px;
}

.user-box button.secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.content {
  width: min(1580px, 100%);
}

.topbar {
  border-color: rgba(16, 24, 40, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 253, 0.94));
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.075);
}

.topbar h1 {
  color: #0f172a;
  font-weight: 900;
}

.market-session-status {
  border-color: rgba(16, 24, 40, 0.11);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.045);
}

.refresh-toggle {
  border-color: rgba(16, 24, 40, 0.12);
  background: #fff;
}

.market-band,
.panel {
  border-color: rgba(16, 24, 40, 0.105);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: 0 16px 38px rgba(16, 24, 40, 0.075);
}

.market-band {
  background:
    linear-gradient(135deg, #ffffff 0%, #f5f9f8 58%, #f2f6fb 100%);
}

.market-band::before {
  height: 3px;
  background: linear-gradient(90deg, #0f766e, #1d4ed8, #9a3412);
}

.market-band h2,
.panel-head h2,
.compact-panel h2 {
  color: #0f172a;
  font-weight: 900;
}

.market-card,
.stat-grid div,
.summary-pill,
.status-grid div,
.portfolio-metrics div,
.settings-section,
.search-results,
.today-schedule-summary > div,
.factor-grid span,
.breakdown-item,
.recommendation-quality > div,
.recommendation-chip-groups > div,
.analysis-recommendation-context,
.analysis-health-card,
.metric,
.analysis-reason-groups section,
.server-diagnostic-grid section,
.slow-request-log span,
.admin-alert-insights > div,
.admin-alert-mini-list div {
  border-color: rgba(16, 24, 40, 0.105);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.035);
}

.market-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
}

.market-card strong,
.stat-grid strong,
.summary-pill strong,
.portfolio-metrics strong,
.status-grid strong {
  color: #0f172a;
  font-weight: 900;
}

.watch-alert-panel {
  border-color: rgba(15, 118, 110, 0.18);
  background:
    linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
}

.watch-alert-card,
.signal-item,
.recommendation-item,
.news-item,
.portfolio-card,
.portfolio-priority-card,
.portfolio-priority-section,
.portfolio-priority-empty,
.stock-news-card,
.news-coverage-card,
.deploy-check-item,
.item {
  border-color: rgba(16, 24, 40, 0.105);
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
  box-shadow: 0 7px 18px rgba(16, 24, 40, 0.04);
}

.signal-item:hover,
.recommendation-item:hover,
.news-item:hover,
.portfolio-card:hover,
.item:hover,
.watch-alert-card:hover {
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.08);
}

.watch-alert-card.unread {
  background:
    linear-gradient(180deg, #ffffff 0%, #f2faf7 100%);
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.08);
}

.signal-collapsible.expanded {
  border-color: rgba(15, 118, 110, 0.34);
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.1);
}

.signal-response-summary,
.signal-score-strip,
.signal-meta span,
.signal-quick-meta span,
.signal-quick-meta small,
.watch-alert-shift span,
.watch-response-overview,
.watch-response-pills span,
.score-formula,
.scan-note span,
.portfolio-risk-details span,
.news-stocks span,
.news-meta span,
.analysis-warning-list span {
  border-color: rgba(16, 24, 40, 0.105);
  background: #f8fafb;
}

.watch-response-overview {
  background: linear-gradient(180deg, #f4faf8, #ffffff);
}

.chip {
  border: 1px solid rgba(15, 118, 110, 0.16);
  background: #eef7f4;
  color: var(--accent-dark);
}

.chip.good,
.signal-priority.good,
.watch-response-pills span.good {
  color: var(--good);
  background: #ecfdf3;
}

.chip.warn,
.signal-priority.warn,
.watch-response-pills span.warn {
  color: var(--warn);
  background: #fff8eb;
}

.chip.danger,
.signal-priority.danger,
.watch-response-pills span.danger {
  color: var(--danger);
  background: #fff1f0;
}

.signal-priority,
.recommendation-rank,
.portfolio-priority-head span {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.05);
}

.recommendation-rank {
  background: linear-gradient(180deg, #1f2937, #111827);
}

.recommendation-score strong,
.portfolio-risk-score strong,
.analysis-signal strong,
.news-score strong {
  font-weight: 900;
}

.segmented-control {
  border-color: rgba(16, 24, 40, 0.105);
  background: #eef3f4;
}

.segmented-control button.active,
.segmented-control button:hover {
  border-color: rgba(15, 118, 110, 0.18);
  color: var(--accent-dark);
}

.search-results button {
  border-color: rgba(16, 24, 40, 0.1);
  background: #ffffff;
}

.search-results button:hover {
  background: #f0f8f5;
  border-color: rgba(15, 118, 110, 0.22);
}

.settings-form .check-label {
  border-color: rgba(16, 24, 40, 0.105);
  background: #ffffff;
}

.table-wrap {
  border: 1px solid rgba(16, 24, 40, 0.105);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.045);
}

table {
  background: transparent;
}

th {
  background: #f4f7f8;
  color: #475467;
  font-weight: 900;
}

td {
  background: rgba(255, 255, 255, 0.78);
}

tbody tr:hover td {
  background: #f8fbfa;
}

.chart {
  border-color: rgba(16, 24, 40, 0.105);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.analysis-empty {
  border-color: rgba(16, 24, 40, 0.14);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
}

.positive,
.stock-up,
.market-card .stock-up {
  color: var(--danger);
}

.stock-down,
.market-card .stock-down {
  color: var(--accent-cool);
}

/* Broker terminal refinement */
:root {
  --bg: #e8edf2;
  --panel: #ffffff;
  --panel-soft: #f4f7f9;
  --ink: #0b1220;
  --muted: #5b6675;
  --line: #cfd8e3;
  --accent: #0b7a75;
  --accent-dark: #084f4b;
  --accent-cool: #2563eb;
  --accent-soft: #edf7f5;
  --surface-raised: #ffffff;
  --surface-tint: #f6f8fa;
  --sidebar: #0f141c;
  --sidebar-raised: #192230;
  --shadow: 0 14px 30px rgba(15, 23, 42, 0.075);
  --shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.055);
}

body {
  background:
    linear-gradient(180deg, #f7f9fb 0%, #eef3f6 44%, #e5ebf0 100%);
  font-feature-settings: "tnum";
}

button {
  border-color: rgba(8, 79, 75, 0.24);
  border-radius: 6px;
  background: #0b7a75;
  box-shadow: 0 7px 16px rgba(8, 79, 75, 0.16);
}

button:hover {
  background: #084f4b;
  box-shadow: 0 10px 22px rgba(8, 79, 75, 0.2);
}

button.secondary {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.045);
}

button.secondary:hover {
  background: #f4f7f9;
  border-color: rgba(15, 23, 42, 0.22);
}

input,
select {
  border-radius: 6px;
  background: #ffffff;
}

.login-shell {
  background:
    linear-gradient(135deg, rgba(11, 122, 117, 0.08), transparent 38%),
    linear-gradient(180deg, #f7f9fb 0%, #e7edf2 100%);
}

.login-panel {
  border-radius: 6px;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.13);
}

.app {
  background:
    linear-gradient(180deg, #f6f8fa 0%, #e8edf2 100%);
}

.sidebar {
  background:
    linear-gradient(180deg, #101620 0%, #17202c 52%, #0e131b 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 10px 0 26px rgba(15, 23, 42, 0.18);
}

.sidebar .eyebrow {
  color: #5eead4;
}

.sidebar h2 {
  color: #f8fafc;
  font-size: 21px;
  font-weight: 900;
}

.nav {
  gap: 6px;
}

.nav button {
  min-height: 40px;
  border-radius: 6px;
  color: #cbd5e1;
  font-weight: 800;
}

.nav button:hover,
.nav button.active {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: inset 3px 0 0 #14b8a6;
  color: #ffffff;
}

.nav-subgroup {
  display: grid;
  gap: 5px;
  margin: -2px 0 5px 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.22);
}

.nav button.nav-sub {
  min-height: 32px;
  padding: 0 10px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.035);
}

.nav button.nav-sub:hover,
.nav button.nav-sub.active,
.nav button.nav-sub.parent-active {
  color: #ffffff;
  background: rgba(20, 184, 166, 0.13);
  border-color: rgba(94, 234, 212, 0.22);
  box-shadow: inset 2px 0 0 #5eead4;
}

.nav-badge {
  background: #dc2626;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.user-box {
  color: #cbd5e1;
}

.content {
  gap: 18px;
  padding: 26px;
}

.topbar {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  border-top: 3px solid #111827;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
  backdrop-filter: none;
}

.topbar h1 {
  color: #0b1220;
  font-size: 26px;
  font-weight: 900;
}

.market-session-status,
.refresh-toggle {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
}

.market-band,
.panel {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.065);
}

.market-band {
  padding: 20px;
  background:
    linear-gradient(135deg, #ffffff 0%, #f7faf9 55%, #f3f7fb 100%);
}

.market-band::before {
  height: 3px;
  background: linear-gradient(90deg, #111827, #0b7a75, #2563eb);
}

.panel {
  padding: 20px;
  background: #ffffff;
}

.panel-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.market-band h2,
.panel-head h2,
.compact-panel h2 {
  color: #0b1220;
  font-weight: 900;
}

.market-overview-grid,
.stat-grid,
.status-grid,
.portfolio-metrics {
  gap: 8px;
}

.market-card,
.stat-grid div,
.summary-pill,
.status-grid div,
.portfolio-metrics div,
.settings-section,
.today-schedule-summary > div,
.factor-grid span,
.breakdown-item,
.recommendation-quality > div,
.recommendation-chip-groups > div,
.analysis-recommendation-context,
.analysis-health-card,
.metric,
.analysis-reason-groups section,
.server-diagnostic-grid section,
.slow-request-log span,
.admin-alert-insights > div,
.admin-alert-mini-list div {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  background: #ffffff;
  box-shadow: none;
}

.market-card {
  min-height: 106px;
  padding: 12px;
  border-top: 2px solid rgba(15, 23, 42, 0.72);
}

.market-card span,
.metric label,
.stat-grid span,
.summary-pill span,
.portfolio-metrics span,
.status-grid span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.market-card strong,
.stat-grid strong,
.summary-pill strong,
.portfolio-metrics strong,
.status-grid strong,
.portfolio-status strong,
.recommendation-score strong,
.portfolio-risk-score strong,
.analysis-signal strong,
.news-score strong {
  color: #0b1220;
  font-weight: 900;
}

.watch-alert-card,
.signal-item,
.recommendation-item,
.news-item,
.portfolio-card,
.portfolio-priority-card,
.portfolio-priority-section,
.portfolio-priority-empty,
.stock-news-card,
.news-coverage-card,
.deploy-check-item,
.item,
.today-analysis-panel,
.recommendation-group-head {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  background: #ffffff;
  box-shadow: none;
}

.signal-item:hover,
.recommendation-item:hover,
.news-item:hover,
.portfolio-card:hover,
.item:hover,
.watch-alert-card:hover {
  border-color: rgba(11, 122, 117, 0.32);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.075);
}

.recommendation-item.recommend,
.portfolio-card.good,
.watch-response-card.good {
  border-left-color: #0b7a75;
}

.recommendation-item.watch,
.portfolio-card.warn,
.portfolio-card.watch,
.watch-response-card.warn {
  border-left-color: #d97706;
}

.portfolio-card.danger,
.watch-response-card.danger {
  border-left-color: #dc2626;
}

.recommendation-rank,
.signal-priority,
.portfolio-priority-head span {
  border-radius: 999px;
  background: linear-gradient(180deg, #111827, #0b1220);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.chip,
.signal-response-summary,
.signal-score-strip,
.signal-meta span,
.signal-quick-meta span,
.signal-quick-meta small,
.watch-alert-shift span,
.watch-response-overview,
.watch-response-pills span,
.score-formula,
.scan-note span,
.portfolio-risk-details span,
.news-stocks span,
.news-meta span,
.analysis-warning-list span {
  border-color: rgba(15, 23, 42, 0.11);
  background: #f6f8fa;
}

.chip {
  color: #075e59;
}

.chip.good,
.signal-priority.good,
.watch-response-pills span.good {
  color: #047857;
  background: #ecfdf5;
}

.chip.warn,
.signal-priority.warn,
.watch-response-pills span.warn {
  color: #b45309;
  background: #fff7ed;
}

.chip.danger,
.signal-priority.danger,
.watch-response-pills span.danger {
  color: #dc2626;
  background: #fff1f2;
}

.table-wrap {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

table {
  background: #ffffff;
}

th {
  background: #111827;
  color: #e5e7eb;
  font-weight: 900;
  border-bottom-color: #111827;
}

td {
  background: #ffffff;
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

tbody tr:nth-child(even) td {
  background: #f8fafc;
}

tbody tr:hover td {
  background: #eef7f5;
}

.chart,
.analysis-empty {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  background: #ffffff;
  box-shadow: none;
}

.positive,
.stock-up,
.market-card .stock-up {
  color: var(--profit);
}

.negative,
.stock-down,
.market-card .stock-down {
  color: var(--loss);
}

/* Dashboard terminal layout */
.market-band {
  grid-template-columns: minmax(320px, 0.72fr) minmax(560px, 1.28fr);
  gap: 22px;
  padding: 22px;
  color: #f8fafc;
  border-color: rgba(15, 23, 42, 0.72);
  background:
    linear-gradient(135deg, #0b1220 0%, #111827 54%, #172033 100%);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.market-band::before {
  background: linear-gradient(90deg, #14b8a6, #60a5fa, #ef4444);
}

.market-band .eyebrow {
  color: #5eead4;
}

.market-band h2 {
  color: #ffffff;
  font-size: 28px;
  line-height: 1.15;
}

.market-band p {
  color: #cbd5e1;
}

.market-mood-summary {
  border-color: rgba(255, 255, 255, 0.14);
  border-left-color: #f59e0b;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: none;
}

.market-mood-summary span,
.market-mood-summary small,
.market-mood-summary em {
  color: #cbd5e1;
}

.market-mood-summary strong {
  color: #ffffff;
  font-size: 20px;
}

.market-mood-summary.good strong {
  color: #34d399;
}

.market-mood-summary.warn strong {
  color: #fbbf24;
}

.market-mood-summary.danger strong {
  color: #f87171;
}

.market-band .market-overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.market-band .market-card {
  min-height: 108px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid rgba(20, 184, 166, 0.86);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

.market-band .market-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.market-band .market-card strong {
  font-size: 21px;
  letter-spacing: 0;
}

.market-band .market-card small {
  color: #64748b;
  font-weight: 700;
}

.dashboard-focus-panel {
  border-top: 3px solid #0b7a75;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
}

.dashboard-focus-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.dashboard-focus-head h2 {
  font-size: 25px;
}

.dashboard-focus-card {
  min-height: 104px;
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  border-left-width: 5px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.dashboard-focus-card strong {
  font-size: 17px;
  font-weight: 900;
}

.dashboard-focus-card > span {
  font-weight: 900;
}

.watch-alert-panel,
.dashboard-news-impact-panel,
.compact-panel {
  border-top: 3px solid rgba(15, 23, 42, 0.88);
}

.watch-change-overview,
.watch-change-list button,
.watch-alert-card,
.dashboard-news-summary-card,
.stock-news-card,
.signal-item,
.watch-response-overview {
  border-radius: 6px;
}

.watch-change-overview {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.watch-change-list button {
  background:
    linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%);
}

.watch-change-list button:hover {
  background: #eef7f5;
}

.watch-response-overview {
  border-color: rgba(15, 23, 42, 0.12);
  background: #f6f8fa;
}

.watch-response-overview strong {
  color: #0b1220;
  font-weight: 900;
}

.signal-list {
  gap: 9px;
}

.signal-item {
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
}

.signal-title strong,
.watch-alert-top strong,
.stock-news-card h3 {
  color: #0b1220;
  font-weight: 900;
}

.dashboard-news-summary-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.dashboard-news-summary-card strong {
  font-size: 19px;
}

.dashboard-news-summary-links a {
  padding: 5px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.dashboard-news-summary-links a:last-child {
  border-bottom: 0;
}

/* AI signal terminal layout */
.today-panel {
  border-top: 3px solid #0b1220;
}

.today-panel .panel-head {
  padding-bottom: 16px;
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

.today-panel .panel-head h2 {
  font-size: 25px;
}

.factor-status {
  gap: 7px;
}

.factor-status span {
  border-radius: 999px;
  border-color: rgba(15, 23, 42, 0.14);
  background: #f6f8fa;
  color: #475569;
  font-weight: 900;
}

.today-schedule-summary,
.today-quality-summary {
  gap: 9px;
}

.today-schedule-summary > div,
.today-quality-summary > div {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  background: #ffffff;
  box-shadow: none;
}

.today-schedule-summary > div {
  border-top: 2px solid rgba(15, 23, 42, 0.72);
}

.today-schedule-summary > div.running {
  border-top-color: #0b7a75;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.today-quality-summary .today-quality-main {
  border-left-width: 5px;
}

.today-quality-summary .today-quality-main.good {
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.today-quality-summary .today-quality-main.warn {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.today-quality-summary strong {
  font-size: 17px;
  font-weight: 900;
}

.signal-guide-panel {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: none;
}

.signal-guide-panel summary {
  background: #f8fafc;
}

.signal-guide-panel summary strong {
  color: #0b1220;
  font-weight: 900;
}

.signal-guide-grid article,
.signal-guide-flow {
  border-radius: 6px;
  background: #ffffff;
}

.today-workspace {
  grid-template-columns: minmax(620px, 1.04fr) minmax(390px, 0.96fr);
  gap: 18px;
}

.today-analysis-panel {
  border-radius: 6px;
  border-top: 3px solid #0b1220;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.recommendation-list {
  gap: 14px;
}

.ai-profit-ranking {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, 0.13);
  border-top: 3px solid #0b1220;
  border-radius: 6px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.ai-profit-ranking.empty {
  border-top-color: #94a3b8;
  background: #f8fafc;
}

.ai-profit-ranking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.ai-profit-ranking-head div {
  display: grid;
  gap: 4px;
}

.ai-profit-ranking-head span {
  color: #0b7a75;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-profit-ranking-head strong {
  color: #0b1220;
  font-size: 20px;
  font-weight: 900;
}

.ai-profit-ranking-head small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.ai-profit-ranking-head > b {
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff1f2;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.ai-profit-ranking-list {
  display: grid;
  gap: 8px;
}

.ai-profit-ranking-stats,
.ai-profit-rank-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ai-profit-ranking-stats > div,
.ai-profit-rank-stats span {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 6px;
  padding: 7px 8px;
  background: #f8fafc;
}

.ai-profit-ranking-stats span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.ai-profit-ranking-stats strong {
  display: block;
  margin-top: 3px;
  color: #0b1220;
  font-size: 16px;
  font-weight: 900;
}

.ai-profit-rank-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  padding: 11px;
  background: #f8fafc;
}

.ai-profit-rank-card.top {
  border-left-color: #dc2626;
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.ai-profit-rank-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.ai-profit-rank-no {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #0b1220;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.ai-profit-rank-main strong {
  color: #0b1220;
  font-size: 17px;
  font-weight: 900;
}

.ai-profit-rank-main small,
.ai-profit-rank-meta,
.ai-profit-rank-prices span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ai-profit-rank-main b {
  font-size: 19px;
  font-weight: 900;
  white-space: nowrap;
}

.ai-profit-rank-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ai-profit-rank-prices span {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 999px;
  padding: 5px 8px;
  background: #ffffff;
  text-align: center;
}

.ai-profit-rank-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ai-profit-rank-stats span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.11);
  padding: 9px 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #475569;
  text-align: left;
}

.ai-profit-rank-stats small {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.ai-profit-rank-stats strong {
  color: #0b1220;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.ai-profit-rank-stats strong.stock-up,
.ai-profit-rank-stats strong.positive {
  color: #dc2626;
}

.ai-profit-rank-stats strong.stock-down,
.ai-profit-rank-stats strong.negative {
  color: #2563eb;
}

.ai-performance-page {
  gap: 18px;
}

.ai-performance-page-body {
  display: grid;
  gap: 12px;
}

.ai-profit-rank-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-profit-rank-meta button {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 6px;
}

.ai-condition-performance {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(15, 23, 42, 0.13);
  border-top: 3px solid #0b7a75;
  border-radius: 6px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.ai-condition-performance.empty {
  border-top-color: #94a3b8;
  background: #f8fafc;
}

.ai-condition-performance-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ai-condition-performance-head div {
  display: grid;
  gap: 4px;
}

.ai-condition-performance-head span {
  color: #0b7a75;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-condition-performance-head strong {
  color: #0b1220;
  font-size: 19px;
  font-weight: 900;
}

.ai-condition-performance-head small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ai-condition-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-condition-columns > div {
  display: grid;
  align-content: start;
  gap: 8px;
}

.ai-condition-columns h3 {
  margin: 0;
  color: #0b1220;
  font-size: 15px;
  font-weight: 900;
}

.ai-condition-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
}

.ai-condition-card.good,
.ai-condition-card.positive {
  border-left-color: #dc2626;
  background: #fff7f7;
}

.ai-condition-card.warn {
  border-left-color: #d97706;
  background: #fff7ed;
}

.ai-condition-card.danger {
  border-left-color: #2563eb;
  background: #eff6ff;
}

.ai-condition-card div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ai-condition-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.ai-condition-card strong {
  color: #0b1220;
  font-size: 14px;
  font-weight: 900;
}

.ai-condition-card b {
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

.ai-condition-card small {
  grid-column: 1 / -1;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.recommendation-group {
  gap: 10px;
}

.recommendation-group + .recommendation-group {
  margin-top: 8px;
}

.recommendation-group-head {
  align-items: center;
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.78);
  border-left-width: 0;
  background: linear-gradient(135deg, #111827 0%, #172033 100%);
  color: #ffffff;
}

.recommendation-group.good .recommendation-group-head {
  box-shadow: inset 5px 0 0 #0b7a75;
}

.recommendation-group.warn .recommendation-group-head {
  box-shadow: inset 5px 0 0 #d97706;
}

.recommendation-group-head strong {
  color: #ffffff;
  font-size: 17px;
}

.recommendation-group-head small,
.recommendation-group-head span {
  color: #cbd5e1;
}

.recommendation-item {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  border-left-width: 6px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.recommendation-item.recommend {
  border-left-color: #dc2626;
}

.recommendation-item.hold {
  border-left-color: #0b7a75;
}

.recommendation-item.watch {
  border-left-color: #d97706;
}

.recommendation-item:hover {
  transform: translateY(-1px);
}

.recommendation-card-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.recommendation-card-head h3 {
  color: #0b1220;
  font-size: 20px;
  font-weight: 900;
}

.recommendation-card-badges .chip,
.recommendation-rank {
  height: 30px;
  display: inline-grid;
  place-items: center;
}

.recommendation-rank {
  min-width: 58px;
  background: #0b1220;
}

.recommendation-price-row {
  gap: 7px 10px;
}

.recommendation-price-row strong {
  font-size: 25px;
  font-weight: 900;
}

.recommendation-price-row span {
  font-size: 14px;
}

.signal-date-banner {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.11);
  border-left-color: #0b1220;
  background: #f8fafc;
}

.signal-date-banner strong {
  font-size: 17px;
}

.recommendation-trade-strip {
  gap: 7px;
}

.recommendation-trade-strip > div {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.11);
  background: #f8fafc;
}

.recommendation-trade-strip strong {
  font-size: 17px;
  font-weight: 900;
}

.recommendation-response-card {
  border-radius: 6px;
  border-color: rgba(11, 122, 117, 0.22);
  border-left: 5px solid #0b7a75;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.recommendation-item.recommend .recommendation-response-card {
  border-color: rgba(220, 38, 38, 0.18);
  border-left-color: #dc2626;
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}

.recommendation-item.watch .recommendation-response-card {
  border-color: rgba(217, 119, 6, 0.2);
  border-left-color: #d97706;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.recommendation-response-card strong {
  font-size: 18px;
  font-weight: 900;
}

.recommendation-decision-guide > div,
.recommendation-key-reason,
.recommendation-simple-meta span {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.11);
  background: #ffffff;
}

.recommendation-key-reason {
  color: #334155;
}

.recommendation-actions {
  padding-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.recommendation-actions button {
  min-height: 34px;
  border-radius: 6px;
}

.recommendation-actions button.is-active-response,
.recommendation-actions button:disabled {
  color: #047857;
  border-color: rgba(4, 120, 87, 0.24);
  background: #ecfdf5;
}

/* Investment ledger terminal layout */
#portfolioTab > .panel {
  border-top: 3px solid #0b1220;
}

#portfolioTab .panel-head {
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

#portfolioTab .panel-head h2 {
  font-size: 25px;
}

#portfolioTab .summary-pill {
  min-width: 260px;
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.14);
  border-left: 5px solid #0b1220;
  background: #f8fafc;
  color: #334155;
  font-weight: 900;
}

.portfolio-form {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  padding: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.portfolio-form input {
  border-color: rgba(15, 23, 42, 0.14);
}

.portfolio-metrics {
  gap: 9px;
  margin: 16px 0;
}

.portfolio-metrics div {
  min-height: 96px;
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  border-left-width: 0;
  border-top: 3px solid rgba(15, 23, 42, 0.72);
  background: #ffffff;
  box-shadow: none;
}

.portfolio-metrics div.profit {
  border-top-color: #dc2626;
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.portfolio-metrics div.loss {
  border-top-color: #2563eb;
  background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
}

.portfolio-metrics div.warn {
  border-top-color: #d97706;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.portfolio-metrics div.danger {
  border-top-color: #dc2626;
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
}

.portfolio-metrics span {
  color: #64748b;
  font-weight: 900;
}

.portfolio-metrics strong {
  color: #0b1220;
  font-size: 18px;
  font-weight: 900;
}

.portfolio-priority-section,
.portfolio-priority-empty {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  background: #ffffff;
}

.portfolio-priority-section {
  padding: 0;
  overflow: hidden;
}

.portfolio-priority-head {
  margin: 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, #111827 0%, #172033 100%);
  color: #ffffff;
}

.portfolio-priority-head h3 {
  color: #ffffff;
  font-weight: 900;
}

.portfolio-priority-head p {
  color: #cbd5e1;
}

.portfolio-priority-head span {
  background: #ffffff;
  color: #0b1220;
}

.portfolio-priority-grid {
  padding: 14px;
}

.portfolio-priority-card {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  border-left-width: 6px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: none;
}

.portfolio-priority-card h3,
.portfolio-card h3 {
  color: #0b1220;
  font-weight: 900;
}

.portfolio-risk-score strong {
  font-size: 30px;
  font-weight: 900;
}

.portfolio-analysis-panel {
  border-radius: 6px;
  border-top: 3px solid #0b1220;
}

.portfolio-card-list {
  gap: 14px;
}

.portfolio-card {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  border-left-width: 6px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.portfolio-card.good {
  border-left-color: #0b7a75;
}

.portfolio-card.warn,
.portfolio-card.watch {
  border-left-color: #d97706;
}

.portfolio-card.danger {
  border-left-color: #dc2626;
}

.portfolio-card-top {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.portfolio-card h3 {
  font-size: 20px;
}

.portfolio-status {
  min-width: 150px;
}

.portfolio-status .chip {
  justify-self: end;
  border-radius: 999px;
  font-weight: 900;
}

.portfolio-status strong {
  font-size: 26px;
  font-weight: 900;
}

.portfolio-response {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  border-left-width: 6px;
  background: #f8fafc;
}

.portfolio-response.good {
  border-left-color: #0b7a75;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.portfolio-response.warn,
.portfolio-response.watch {
  border-left-color: #d97706;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.portfolio-response.danger {
  border-left-color: #dc2626;
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
}

.portfolio-response span {
  color: #64748b;
}

.portfolio-response strong {
  font-size: 18px;
}

.portfolio-response p {
  color: #0b1220;
}

.portfolio-response-evidence span,
.portfolio-risk-details span {
  border-radius: 999px;
  background: #ffffff;
}

.portfolio-numbers {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.portfolio-numbers div {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.11);
  background: #f8fafc;
}

.portfolio-numbers span {
  color: #64748b;
  font-weight: 900;
}

.portfolio-numbers strong {
  color: #0b1220;
  font-size: 15px;
  font-weight: 900;
}

.portfolio-reasons {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 10px 10px 10px 28px;
  background: #fbfcfd;
}

.portfolio-actions {
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.portfolio-actions button {
  min-height: 34px;
}

/* News impact terminal layout */
.news-panel {
  border-top: 3px solid #0b1220;
}

.news-panel .panel-head {
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

.news-panel .panel-head h2 {
  font-size: 25px;
}

.news-filter-bar {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  padding: 10px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.segmented-control {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  background: #eef2f6;
}

.segmented-control button {
  border-radius: 5px;
  font-weight: 900;
}

.segmented-control button.active,
.segmented-control button:hover {
  border-color: rgba(15, 23, 42, 0.18);
  color: #0b1220;
  background: #ffffff;
}

#newsSortSelect {
  border-color: rgba(15, 23, 42, 0.14);
  font-weight: 800;
}

.news-coverage-summary {
  gap: 9px;
}

.news-coverage-head {
  border-radius: 6px;
  padding: 12px 14px;
  color: #cbd5e1;
  background: linear-gradient(135deg, #111827 0%, #172033 100%);
}

.news-coverage-head strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.news-coverage-grid {
  gap: 9px;
}

.news-coverage-card {
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.12);
  border-left-width: 5px;
  background: #ffffff;
  box-shadow: none;
}

.news-coverage-card.found {
  border-left-color: #0b7a75;
}

.news-coverage-card.empty {
  border-left-color: #94a3b8;
  background: #f8fafc;
}

.news-coverage-card strong {
  color: #0b1220;
  font-weight: 900;
}

.news-coverage-card a {
  color: #0b1220;
  font-weight: 900;
}

.news-list {
  gap: 12px;
}

.news-item {
  grid-template-columns: minmax(0, 1fr) 96px;
  border-radius: 6px;
  border-color: rgba(15, 23, 42, 0.13);
  border-left: 6px solid #64748b;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.news-item.good {
  border-left-color: var(--profit);
}

.news-item.danger {
  border-left-color: var(--loss);
}

.news-item.user-impact {
  box-shadow: 0 12px 26px rgba(11, 122, 117, 0.09);
}

.news-main a {
  color: #0b1220;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}

.news-main p {
  margin: 10px 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 9px 10px;
  background: #f8fafc;
  color: #475569;
}

.news-meta,
.news-stocks {
  gap: 5px;
}

.news-meta span,
.news-stocks span {
  border-radius: 999px;
  border-color: rgba(15, 23, 42, 0.11);
  background: #f6f8fa;
  color: #475569;
  font-weight: 800;
}

.news-stocks span {
  color: #0b1220;
  background: #eef7f5;
  border-color: rgba(11, 122, 117, 0.16);
}

.news-reasons {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  margin: 10px 0;
  padding: 10px 10px 10px 28px;
  background: #ffffff;
}

.news-score {
  justify-items: stretch;
  align-content: start;
  gap: 7px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
  text-align: center;
}

.news-score::before {
  content: "영향도";
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.news-score .chip {
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
}

.news-score .chip.good {
  color: var(--profit);
  background: #fff1f2;
}

.news-score .chip.danger {
  color: var(--loss);
  background: #eff6ff;
}

.news-score strong {
  color: #0b1220;
  font-size: 30px;
  font-weight: 900;
}

@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    padding: 16px;
    gap: 14px;
  }

  .sidebar > div:first-child {
    display: none;
  }

  .nav {
    grid-template-columns: repeat(5, minmax(88px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-subgroup {
    display: contents;
  }

  .nav button {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  .user-box {
    margin-top: 0;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .user-box span {
    display: none;
  }

  .content {
    padding: 16px;
    gap: 16px;
  }

  .market-band,
  .two-col,
  .recommend-grid,
  .dashboard-focus-list,
  .watch-change-summary,
  .watch-change-list,
  .watch-alert-list,
  .watch-alert-history-row,
  .today-workspace,
  .today-schedule-summary,
  .today-quality-summary,
  .signal-guide-grid,
  .dashboard-risk-strip,
  .dashboard-news-overview,
  .dashboard-news-summary,
  .stock-news-grid,
  .stock-news-board-row,
  .calendar-watch-card,
  .investment-calendar-item,
  .evaluation-adjustment-head,
  .recommendation-item,
  .recommendation-top,
  .recommendation-trade-strip,
  .recommendation-calendar-impact,
  .recommendation-state-panel,
  .recommendation-plain-facts,
  .recommendation-confidence-summary,
  .recommendation-confidence-details,
  .recommendation-decision-guide,
  .recommendation-quality,
  .recommendation-chip-groups,
  .factor-grid,
  .recommendation-breakdown,
  .analysis-health-grid,
  .analysis-grid,
  .analysis-reason-groups,
  .signal-score-strip,
  .signal-detail-grid,
  .portfolio-form,
  .settings-form,
  .settings-toggle-grid,
  .settings-inline-grid,
  .status-grid,
  .portfolio-metrics,
  .portfolio-priority-grid,
  .portfolio-response-plan,
  .recommendation-evaluation-category-grid,
  .recommendation-evaluation-stats,
  .evaluation-insight-cards,
  .holding-period-grid,
  .evaluation-adjustment-grid,
  .evaluation-condition-row,
  .evaluation-symbol-metrics,
  .evaluation-history-row,
  .evaluation-card-list,
  .ai-profit-ranking,
  .ai-profit-rank-card,
  .ai-profit-ranking-stats,
  .ai-profit-rank-stats,
  .ai-condition-performance,
  .ai-condition-columns,
  .ai-condition-card,
  .evaluation-price-flow,
  .evaluation-check-list,
  .evaluation-result-strip,
  .evaluation-timeline,
  .signal-history-summary,
  .signal-history-flow,
  .scan-stat-grid,
  .deploy-check-list,
  .admin-alert-insights,
  .portfolio-numbers {
    grid-template-columns: 1fr;
  }

  .recommendation-score {
    justify-items: start;
  }

  .today-analysis-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .recommendation-top {
    flex-direction: column;
  }

  .recommendation-card-head {
    flex-direction: column;
  }

  .ai-profit-ranking-head,
  .ai-profit-rank-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-profit-rank-main {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .ai-profit-rank-main b {
    grid-column: 2;
    justify-self: start;
  }

  .ai-profit-rank-prices {
    grid-template-columns: 1fr;
  }

  .ai-profit-ranking-stats,
  .ai-profit-rank-stats {
    grid-template-columns: 1fr;
  }

  .ai-condition-performance-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-condition-card {
    grid-template-columns: 1fr;
  }

  .ai-condition-card b {
    justify-self: start;
  }

  .evaluation-card-head,
  .evaluation-symbol-top,
  .evaluation-verdict > div {
    flex-direction: column;
    align-items: flex-start;
  }

  .evaluation-flow-arrow {
    display: none;
  }

  .recommendation-card-badges {
    justify-content: flex-start;
  }

  .signal-guide-panel summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .evaluation-history-header {
    display: none;
  }

  .evaluation-history-list {
    padding: 12px;
  }

  .dashboard-focus-head {
    flex-direction: column;
  }

  .dashboard-focus-card {
    min-height: auto;
  }

  .stock-news-card-top {
    flex-direction: column;
  }

  .stock-news-board-head {
    flex-direction: column;
  }

  .calendar-event-top {
    flex-direction: column;
  }

  .calendar-view-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-view-tabs button {
    width: 100%;
  }

  .calendar-release-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .calendar-release-values > div {
    padding: 8px;
  }

  .calendar-release-values strong {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .calendar-action-line {
    grid-template-columns: 1fr;
  }

  .calendar-portfolio-impact,
  .calendar-reaction-grid {
    grid-template-columns: 1fr;
  }

  .calendar-reaction-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-impact-stars {
    justify-items: start;
  }

  .calendar-impact-line {
    grid-template-columns: 1fr;
  }

  .stock-news-board-head em {
    white-space: normal;
  }

  .stock-news-more a {
    grid-template-columns: 1fr;
  }

  .stock-news-filter-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .stock-news-filter-note span {
    text-align: left;
  }

  .analysis-header {
    flex-direction: column;
  }

  .analysis-header > div:first-child {
    min-width: 0;
  }

  .analysis-decision {
    width: 100%;
    min-width: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .analysis-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-actions {
    justify-content: stretch;
    width: 100%;
  }

  .panel-actions button {
    flex: 1 1 180px;
  }

  .analysis-context-head {
    grid-template-columns: 1fr;
  }

  .analysis-toolbar button {
    width: 100%;
  }

  .portfolio-card-top {
    flex-direction: column;
  }

  .portfolio-status {
    justify-items: start;
    text-align: left;
    min-width: 0;
  }

  .portfolio-response {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .signal-response-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-response > small {
    grid-column: 1 / -1;
  }

  .portfolio-response-candidate,
  .portfolio-response-confidence {
    border-left: 1px solid rgba(16, 24, 40, 0.1);
    border-top: 0;
    padding-left: 8px;
    padding-top: 0;
  }

  .portfolio-response p,
  .portfolio-response-more {
    grid-column: 1 / -1;
  }

  .portfolio-response strong {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .portfolio-response > div > span,
  .portfolio-response-confidence small {
    font-size: 10px;
  }

  .portfolio-risk-score {
    justify-items: start;
  }

  .portfolio-priority-head,
  .portfolio-priority-top {
    flex-direction: column;
  }

  .portfolio-priority-card button {
    justify-self: stretch;
    width: 100%;
  }

  .analysis-signal {
    justify-items: start;
    text-align: left;
  }

  .signal-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .signal-score-strip div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .signal-actions {
    justify-content: stretch;
  }

  .signal-actions button {
    width: 100%;
  }

  .news-item {
    grid-template-columns: 1fr;
  }

  .news-score {
    justify-items: start;
  }

  .news-filter-bar,
  .segmented-control {
    width: 100%;
  }

  #newsSortSelect {
    width: 100%;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .refresh-panel {
    justify-content: flex-start;
    width: 100%;
  }

  #refreshStatus {
    min-width: auto;
    text-align: left;
  }

  .market-overview-grid,
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .analysis-decision {
    grid-template-columns: 1fr;
  }

  .analysis-score-bar,
  .analysis-decision-metrics,
  .analysis-decision-reasons,
  .analysis-recovery-guide {
    grid-column: 1;
  }

  .analysis-recovery-guide {
    grid-row: auto;
  }

  button {
    min-height: 38px;
    padding: 0 12px;
  }

  input,
  select {
    min-height: 38px;
    padding: 9px 10px;
  }

  .login-shell {
    padding: 14px;
    align-items: start;
  }

  .login-panel {
    padding: 26px 20px;
  }

  .login-panel h1 {
    font-size: 25px;
  }

  .sidebar {
    padding: 10px 12px;
    gap: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
  }

  .nav {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .nav button {
    flex: 0 0 auto;
    min-height: 36px;
    min-width: auto;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    justify-content: center;
    scroll-snap-align: start;
  }

  .nav button:hover,
  .nav button.active {
    box-shadow: none;
  }

  .nav-badge {
    min-width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .user-box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }

  .user-box strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-box button {
    min-height: 34px;
    padding: 0 10px;
  }

  .content {
    padding: 12px;
    gap: 12px;
  }

  .topbar {
    gap: 10px;
    padding: 13px;
  }

  .topbar h1 {
    font-size: 23px;
  }

  .market-session-status {
    width: 100%;
    max-width: none;
    padding: 8px 10px;
  }

  .market-session-status strong {
    font-size: 13px;
  }

  .market-session-status span {
    font-size: 11px;
  }

  .refresh-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
  }

  #refreshStatus {
    min-width: 0;
    font-size: 12px;
  }

  .refresh-toggle {
    min-height: 36px;
    padding: 0 9px;
    font-size: 13px;
  }

  .market-band,
  .panel {
    border-radius: 7px;
  }

  .market-band {
    padding: 16px 14px;
    gap: 12px;
  }

  .market-band h2,
  .panel h2 {
    font-size: 19px;
  }

  .market-band p {
    margin: 8px 0 0;
    font-size: 13px;
  }

  .market-overview-grid {
    gap: 8px;
  }

  .market-card {
    padding: 10px;
  }

  .market-card strong {
    font-size: 18px;
  }

  .panel {
    padding: 14px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }

  .panel-head > button,
  .panel-head .panel-actions,
  .panel-head .summary-pill {
    width: 100%;
  }

  .panel-actions button,
  .watch-alert-head-actions button {
    flex: 1 1 120px;
  }

  .watch-alert-head-actions {
    align-items: stretch;
    width: 100%;
  }

  .watch-alert-card,
  .signal-item,
  .recommendation-item,
  .news-item,
  .portfolio-card,
  .portfolio-priority-card {
    padding: 12px;
  }

  .watch-response-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  .watch-response-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .watch-alert-top,
  .item-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .compact-panel {
    padding: 14px;
  }

  .signal-quick-meta small {
    margin-left: 0;
  }

  .signal-title {
    align-items: flex-start;
  }

  .signal-heading {
    width: 100%;
  }

  .factor-grid,
  .recommendation-breakdown,
  .portfolio-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recommendation-rank {
    width: 32px;
    height: 32px;
  }

  .recommendation-score strong {
    font-size: 24px;
  }

  .today-analysis-panel,
  .portfolio-analysis-panel {
    padding: 14px;
  }

  .news-filter-bar {
    gap: 8px;
  }

  .segmented-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .segmented-control button {
    padding: 0 8px;
    font-size: 13px;
  }

  .news-main a {
    overflow-wrap: anywhere;
  }

  .news-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .news-score strong {
    font-size: 22px;
  }

  .portfolio-form {
    gap: 8px;
  }

  .portfolio-form input[name="memo"] {
    grid-column: auto;
  }

  .portfolio-actions,
  .recommendation-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .portfolio-actions button,
  .recommendation-actions button {
    width: 100%;
  }

  .recommendation-card-head h3 {
    font-size: 18px;
  }

  .recommendation-price-row strong {
    font-size: 20px;
  }

  .recommendation-response-card {
    padding: 12px;
  }

  .signal-date-banner {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .signal-date-banner small {
    text-align: left;
  }

  .signal-guide-grid {
    padding: 0 12px 12px;
  }

  .signal-guide-flow {
    margin: 0 12px 12px;
  }

  .recommendation-trade-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recommendation-key-reason,
  .recommendation-decision-guide small,
  .portfolio-response p,
  .portfolio-response > small {
    font-size: 12px;
  }

  .portfolio-status strong {
    font-size: 20px;
  }

  .signal-history-top {
    flex-direction: column;
  }

  .signal-history-top > strong {
    white-space: normal;
  }

  .signal-history-result {
    justify-items: start;
    min-width: 0;
  }

  .table-wrap {
    margin-inline: -2px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    padding: 10px 9px;
  }
}

@media (max-width: 560px) {
  .market-overview-grid,
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scan-stat-grid,
  .deploy-check-stats,
  .backup-stat-grid,
  .status-grid,
  .portfolio-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-grid div,
  .summary-pill,
  .status-grid div,
  .portfolio-metrics div {
    padding: 10px;
  }

  .stat-grid strong,
  .summary-pill strong,
  .status-grid strong,
  .portfolio-metrics strong {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .refresh-panel {
    grid-template-columns: 1fr auto;
  }

  #refreshStatus {
    grid-column: 1 / -1;
  }

  .signal-history-check {
    flex: 1 1 130px;
  }
}

@media (max-width: 420px) {
  .content {
    padding: 10px;
  }

  .scan-stat-grid,
  .deploy-check-stats,
  .backup-stat-grid,
  .status-grid,
  .portfolio-metrics,
  .factor-grid,
  .recommendation-breakdown,
  .portfolio-numbers {
    grid-template-columns: 1fr;
  }

  .segmented-control {
    grid-template-columns: 1fr;
  }

  .recommendation-trade-strip {
    grid-template-columns: 1fr;
  }

  .recommendation-card-badges {
    width: 100%;
  }

  .recommendation-rank,
  .recommendation-card-badges .chip {
    flex: 1 1 auto;
  }

  .recommendation-decision-guide > div,
  .recommendation-trade-strip > div,
  .portfolio-response,
  .portfolio-numbers div {
    padding: 8px;
  }

  .topbar h1 {
    font-size: 21px;
  }

  .panel,
  .market-band {
    padding: 12px;
  }

  .market-card strong {
    font-size: 17px;
  }
}

/* Dashboard role separation */
.dashboard-panel-actions,
.dashboard-panel-link-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.dashboard-panel-link-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.dashboard-panel-actions button,
.dashboard-panel-link-row button {
  min-height: 34px;
  padding: 0 12px;
}

.mobile-bottom-nav,
.mobile-more-menu {
  display: none;
}

body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .app {
    display: block;
  }

  .app > .sidebar {
    display: none;
  }

  .content {
    padding-bottom: 96px;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 80;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.12);
  }

  .mobile-bottom-nav > button {
    position: relative;
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    box-shadow: none;
  }

  .mobile-bottom-nav > button.active {
    background: #e9f6f3;
    color: #0f766e;
  }

  .mobile-bottom-nav > button.active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 3px;
    border-radius: 999px;
    background: #14b8a6;
  }

  .mobile-nav-badge {
    position: absolute;
    top: 3px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    padding: 0 5px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    line-height: 1;
  }

  .mobile-more-menu {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    align-items: end;
  }

  .mobile-more-menu.hidden {
    display: none;
  }

  .mobile-more-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(2, 6, 23, 0.54);
    box-shadow: none;
  }

  .mobile-more-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: min(78vh, 680px);
    overflow-y: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 8px 8px 0 0;
    background: #fff;
    box-shadow: 0 -18px 48px rgba(2, 6, 23, 0.2);
  }

  .mobile-more-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
  }

  .mobile-more-head > div {
    display: grid;
    gap: 4px;
  }

  .mobile-more-head strong {
    font-size: 21px;
    font-weight: 950;
  }

  .mobile-more-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 0;
  }

  .mobile-more-grid button {
    min-height: 50px;
    border: 1px solid #d8e0e7;
    border-radius: 6px;
    background: #f8fafc;
    color: #1e293b;
    font-size: 13px;
    font-weight: 900;
    box-shadow: none;
  }

  .mobile-more-grid button.active {
    border-color: rgba(15, 118, 110, 0.32);
    background: #e9f6f3;
    color: #0f766e;
  }

  .mobile-logout-btn {
    width: 100%;
    min-height: 46px;
  }

  .dashboard-panel-actions {
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
  }
}

/* Dashboard priority workspace */
#dashboardTab {
  --dashboard-section-gap: 16px;
}

#dashboardTab > section + section {
  margin-top: var(--dashboard-section-gap);
}

.market-band .market-overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
  align-content: stretch;
  align-items: stretch;
  gap: 10px;
}

.market-group-card {
  min-width: 0;
  min-height: 220px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid rgba(45, 212, 191, 0.9);
  border-radius: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.97);
  color: #0f172a;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.market-group-head,
.market-group-row {
  display: grid;
  grid-template-columns: minmax(54px, 0.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.market-group-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.market-group-head strong {
  color: #334155;
  font-size: 14px;
  font-weight: 900;
}

.market-group-head span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.market-group-rows {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.market-group-row {
  min-height: 76px;
  padding: 8px 0;
}

.market-group-row + .market-group-row {
  border-top: 1px solid #edf2f7;
}

.market-group-row span {
  grid-row: 1 / 3;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.market-group-row b {
  min-width: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.market-group-row em {
  grid-column: 2;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.market-group-row .stock-up {
  color: var(--profit);
}

.market-group-row .stock-down {
  color: var(--loss);
}

.market-group-row.unavailable {
  opacity: 0.62;
}

.dashboard-focus-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-focus-card {
  min-height: 120px;
}

.dashboard-focus-card-top span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sector-brief-panel {
  padding: 17px 20px;
  border-top: 3px solid #0f766e;
  background: #fff;
}

.dashboard-sector-brief-head {
  margin-bottom: 12px;
}

.dashboard-sector-brief-head h2 {
  margin: 1px 0 3px;
  font-size: 20px;
}

.dashboard-sector-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #dbe4ee;
  border-radius: 6px;
  overflow: hidden;
}

.dashboard-sector-brief-item {
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px 16px;
  border: 0;
  border-left: 4px solid #94a3b8;
  border-radius: 0;
  background: #fff;
  color: #0f172a;
  text-align: left;
  box-shadow: none;
}

.dashboard-sector-brief-item + .dashboard-sector-brief-item {
  border-left-width: 1px;
  border-left-color: #dbe4ee;
}

.dashboard-sector-brief-item.good:first-child {
  border-left-color: #dc2626;
}

.dashboard-sector-brief-item.danger:first-child {
  border-left-color: #2563eb;
}

.dashboard-sector-brief-item:hover {
  background: #f8fafc;
}

.dashboard-sector-brief-item > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.dashboard-sector-brief-item > strong {
  font-size: 18px;
  font-weight: 950;
}

.dashboard-sector-brief-item > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dashboard-sector-brief-item b {
  font-size: 15px;
  font-weight: 950;
}

.dashboard-sector-brief-item em,
.dashboard-sector-brief-item small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-priority-panel {
  border-top-color: #0f766e;
}

.recommend-grid:has(#dashboardPortfolioPanel.hidden) #dashboardAiResponsePanel,
.recommend-grid:has(#dashboardAiResponsePanel.hidden) #dashboardPortfolioPanel {
  grid-column: 1 / -1;
}

.signal-response-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.signal-response-summary > b {
  flex: 0 0 auto;
  border-radius: 4px;
  padding: 2px 6px;
  background: #e8f5f3;
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
}

.dashboard-secondary-panel {
  background: #fff;
}

.dashboard-secondary-panel > .panel-head h2 {
  font-size: 19px;
}

@media (max-width: 1200px) {
  .market-band {
    grid-template-columns: 1fr;
  }

  .dashboard-focus-list,
  .dashboard-sector-brief {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #dashboardTab {
    --dashboard-section-gap: 12px;
    display: flex;
    flex-direction: column;
  }

  #dashboardTab > section {
    width: 100%;
    margin-top: var(--dashboard-section-gap);
  }

  #dashboardTab .dashboard-focus-panel {
    order: 1;
    margin-top: 0;
  }

  #dashboardTab .recommend-grid {
    order: 2;
  }

  #dashboardTab .market-band {
    order: 3;
  }

  #dashboardTab .dashboard-sector-brief-panel {
    order: 4;
  }

  #dashboardTab .dashboard-secondary-panel {
    order: 5;
  }

  .market-band {
    padding: 17px;
  }

  .market-band h2 {
    font-size: 24px;
  }

  .market-band > div > p:not(.eyebrow) {
    display: none;
  }

  .market-band .market-overview-grid,
  .dashboard-focus-list,
  .dashboard-sector-brief {
    grid-template-columns: 1fr;
  }

  .market-group-card {
    min-height: 0;
    padding: 9px 12px;
  }

  .market-group-row {
    min-height: 44px;
    padding: 5px 0;
    grid-template-columns: minmax(68px, 0.7fr) minmax(0, 1fr);
  }

  .market-group-head strong {
    font-size: 12px;
  }

  .market-group-head span {
    font-size: 10px;
  }

  .market-group-row span {
    font-size: 11px;
  }

  .market-group-row b {
    font-size: 15px;
  }

  .market-group-row em {
    font-size: 11px;
  }

  .dashboard-focus-panel,
  .dashboard-sector-brief-panel,
  .dashboard-priority-panel,
  .dashboard-secondary-panel {
    padding: 16px;
  }

  .dashboard-focus-head h2 {
    font-size: 22px;
  }

  .dashboard-focus-card {
    min-height: 0;
  }

  .dashboard-sector-brief-item {
    min-height: 92px;
  }

  .dashboard-sector-brief-item + .dashboard-sector-brief-item {
    border-top: 1px solid #dbe4ee;
    border-left: 4px solid #94a3b8;
  }

  .dashboard-sector-brief-head {
    align-items: flex-start;
  }

  .dashboard-sector-brief-head button {
    width: auto;
  }
}

@media (max-width: 760px) {
  .content {
    padding: 12px;
    gap: 14px;
  }

  .topbar,
  .panel-head,
  .recommendation-group-head,
  .evaluation-date-head {
    align-items: flex-start;
  }

  .topbar,
  .recommendation-group-head,
  .evaluation-date-head {
    flex-direction: column;
  }

  .refresh-panel,
  .panel-actions,
  .recommendation-actions,
  .portfolio-actions {
    width: 100%;
  }

  .recommendation-actions,
  .portfolio-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recommendation-actions button,
  .portfolio-actions button,
  .panel-actions button {
    min-width: 0;
  }

  .recommendation-reason-focus {
    padding: 10px;
  }

  .recommendation-response-card,
  .recommendation-key-reason,
  .evaluation-history-row,
  .evaluation-check-point,
  .portfolio-card,
  .news-item {
    overflow-wrap: anywhere;
  }

  .evaluation-symbol-card summary,
  .evaluation-history-list,
  .evaluation-date-section,
  .evaluation-history-row {
    min-width: 0;
  }

  .evaluation-history-row {
    gap: 8px;
  }

  .history-return,
  .history-duration,
  .history-basis,
  .history-price,
  .history-decision {
    min-width: 0;
  }
}

.recommendation-proof-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recommendation-proof-panel > div {
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-left: 4px solid #64748b;
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.recommendation-proof-panel > div.good {
  border-left-color: #0b7a75;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.recommendation-proof-panel > div.warn {
  border-left-color: #d97706;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.recommendation-proof-panel span,
.recommendation-risk-highlights > span,
.signal-history-feedback b {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.recommendation-proof-panel strong {
  color: #0b1220;
  font-size: 17px;
  font-weight: 900;
}

.recommendation-proof-panel strong.positive,
.recommendation-proof-panel b.positive,
.signal-history-feedback strong.positive {
  color: #dc2626;
}

.recommendation-proof-panel strong.negative,
.recommendation-proof-panel b.negative,
.signal-history-feedback strong.negative {
  color: #2563eb;
}

.recommendation-proof-panel small {
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.recommendation-proof-panel p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 2px 0 0;
}

.recommendation-proof-panel b,
.recommendation-risk-highlights b {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 4px 8px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.recommendation-risk-highlights {
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-left: 4px solid #d97706;
  border-radius: 6px;
  padding: 10px;
  background: #fffaf0;
  display: grid;
  gap: 7px;
}

.recommendation-risk-highlights > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recommendation-risk-highlights b.warn,
.recommendation-risk-highlights b.negative {
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.22);
  background: #fffbeb;
}

.recommendation-risk-highlights b.danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
  background: #fff5f5;
}

.signal-history-feedback {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.signal-history-feedback span {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  padding: 9px;
  background: #f8fafc;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.signal-history-feedback strong {
  color: #0b1220;
  font-size: 16px;
  font-weight: 900;
}

.signal-history-feedback small {
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.today-signal-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 6px;
  background: #ffffff;
}

.today-signal-filter button {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-right: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
}

.today-signal-filter button:last-child {
  border-right: 0;
}

.today-signal-filter button span {
  display: inline-grid;
  min-width: 22px;
  margin-left: 5px;
  color: #64748b;
}

.today-signal-filter button.is-active {
  background: #111827;
  color: #ffffff;
}

.today-signal-filter button.is-active span {
  color: #5eead4;
}

.today-technical-panel {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  background: #f8fafc;
}

.today-technical-panel > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.today-technical-panel > summary::-webkit-details-marker,
.recommendation-more > summary::-webkit-details-marker {
  display: none;
}

.today-technical-panel > summary span {
  color: #0b7a75;
  font-size: 11px;
  font-weight: 900;
}

.today-technical-panel > summary strong {
  color: #334155;
  font-size: 13px;
}

.today-technical-panel > summary::after {
  content: "+";
  margin-left: auto;
  color: #64748b;
  font-size: 18px;
  font-weight: 900;
}

.today-technical-panel[open] > summary::after {
  content: "−";
}

.today-technical-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.today-technical-body > :first-child {
  margin-top: 12px;
}

.recommendation-more {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  background: #f8fafc;
}

.recommendation-more > summary {
  min-height: 38px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.recommendation-more > summary::after {
  content: "+";
  float: right;
  color: #64748b;
  font-size: 16px;
}

.recommendation-more[open] > summary::after {
  content: "−";
}

.recommendation-more-body {
  display: grid;
  gap: 9px;
  padding: 0 10px 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.recommendation-more-body > :first-child {
  margin-top: 10px;
}

.ai-condition-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ai-condition-summary-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-top: 3px solid #64748b;
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.ai-condition-summary-grid > div.positive {
  border-top-color: #dc2626;
}

.ai-condition-summary-grid > div.negative {
  border-top-color: #2563eb;
}

.ai-condition-summary-grid span,
.ai-condition-summary-grid small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.ai-condition-summary-grid strong {
  overflow-wrap: anywhere;
  color: #0b1220;
  font-size: 16px;
  font-weight: 900;
}

.ai-condition-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-bottom: 2px solid #dc2626;
  background: #fff7f7;
}

.negative-column .ai-condition-column-head {
  border-bottom-color: #2563eb;
  background: #eff6ff;
}

.ai-condition-column-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.ai-condition-card {
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 12px;
}

.ai-condition-card-head {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ai-condition-card-head > div {
  min-width: 0;
}

.ai-condition-card-head em {
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 4px 7px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.ai-condition-result {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ai-condition-result > div {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  padding: 8px;
  background: #ffffff;
}

.ai-condition-result b,
.ai-condition-result strong {
  font-size: 17px;
  font-weight: 900;
}

.ai-condition-rate {
  display: block !important;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
}

.ai-condition-rate i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #dc2626;
}

.ai-condition-card p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.ai-condition-card > small {
  grid-column: auto;
  color: #0b7a75;
}

.ai-condition-performance {
  gap: 16px;
  border-top-color: #0b1220;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
}

.ai-condition-performance-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}

.ai-condition-performance-head span {
  color: #64748b;
}

.ai-condition-overview {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 0;
  border-left: 5px solid #14b8a6;
  border-radius: 6px;
  padding: 14px 16px;
  background: #111827;
}

.ai-condition-overview-count {
  display: grid;
  gap: 3px;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.ai-condition-overview-count span,
.ai-condition-overview > small,
.ai-condition-overview-list span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.ai-condition-overview-count strong {
  color: #ffffff;
  font-size: 25px;
  font-weight: 900;
}

.ai-condition-overview-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.ai-condition-overview-list p {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0;
  min-height: 28px;
}

.ai-condition-overview-list p + p {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-condition-overview-list strong {
  overflow-wrap: anywhere;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
}

.ai-condition-overview-list em {
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.ai-condition-overview > small {
  max-width: 180px;
  line-height: 1.4;
  text-align: right;
  color: #cbd5e1;
}

.ai-condition-column {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-radius: 6px;
  background: #ffffff;
}

.ai-condition-column-head,
.negative-column .ai-condition-column-head {
  min-height: 48px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.positive-column .ai-condition-column-head {
  box-shadow: inset 5px 0 0 #dc2626;
  background: #fff7f7;
}

.negative-column .ai-condition-column-head {
  box-shadow: inset 5px 0 0 #2563eb;
  background: #eff6ff;
}

.ai-condition-column-head h3 {
  font-size: 16px;
}

.ai-condition-row {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: #ffffff;
}

.positive-column .ai-condition-row {
  box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.72);
}

.negative-column .ai-condition-row {
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.72);
}

.ai-condition-row:nth-child(odd) {
  background: #fbfdff;
}

.ai-condition-row + .ai-condition-row {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ai-condition-row-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-condition-row-main > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-condition-row-main > div:last-child {
  flex: 0 0 auto;
  justify-items: end;
}

.ai-condition-row-main span {
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.ai-condition-row-main strong {
  overflow-wrap: anywhere;
  color: #0b1220;
  font-size: 15px;
  font-weight: 900;
}

.ai-condition-row-main small {
  max-width: 440px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.ai-condition-row-main b {
  font-size: 21px;
  font-weight: 900;
  white-space: nowrap;
}

.ai-condition-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.ai-condition-row-stats strong {
  color: #334155;
  font-weight: 900;
}

.ai-condition-row-stats em {
  margin-left: auto;
  border: 1px solid rgba(11, 122, 117, 0.18);
  border-radius: 999px;
  padding: 2px 7px;
  background: #f0fdfa;
  color: #0b7a75;
  font-style: normal;
  font-weight: 900;
}

.recommendation-feedback-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  border: 1px solid rgba(11, 122, 117, 0.18);
  border-left: 4px solid #0b7a75;
  border-radius: 6px;
  padding: 10px 12px;
  background: #f0fdfa;
}

.recommendation-feedback-summary.warn {
  border-color: rgba(217, 119, 6, 0.2);
  border-left-color: #d97706;
  background: #fff7ed;
}

.recommendation-feedback-summary > div {
  display: grid;
  gap: 2px;
}

.recommendation-feedback-summary span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.recommendation-feedback-summary > div > strong {
  font-size: 18px;
  font-weight: 900;
}

.recommendation-feedback-summary p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.recommendation-feedback-summary p b {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.78);
  color: #334155;
  font-size: 11px;
  font-weight: 900;
}

.ai-condition-examples {
  margin-top: 2px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ai-condition-examples > summary {
  padding: 9px 0 2px;
  cursor: pointer;
  list-style: none;
  color: #0b7a75;
  font-size: 11px;
  font-weight: 900;
}

.ai-condition-examples > summary::-webkit-details-marker {
  display: none;
}

.ai-condition-examples > summary::after {
  content: "+";
  float: right;
  color: #64748b;
  font-size: 15px;
}

.ai-condition-examples[open] > summary::after {
  content: "−";
}

.ai-condition-examples > div {
  display: grid;
  margin-top: 7px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 5px;
  background: #f8fafc;
}

.ai-condition-examples article {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 9px 10px;
}

.ai-condition-examples article + article {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ai-condition-examples article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-condition-examples article > div:last-child {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.ai-condition-examples article > div:last-child small {
  grid-column: 1 / -1;
}

.ai-condition-examples strong,
.ai-condition-examples b {
  color: #0b1220;
  font-size: 12px;
  font-weight: 900;
}

.ai-condition-examples span,
.ai-condition-examples small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.ai-condition-combinations {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-radius: 6px;
  background: #ffffff;
}

.ai-condition-combinations > .ai-condition-column-head {
  box-shadow: inset 5px 0 0 #0b7a75;
  background: #f0fdfa;
}

.ai-condition-combinations .ai-condition-column-head > div {
  display: grid;
  gap: 2px;
}

.ai-condition-combinations .ai-condition-column-head small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.ai-condition-combinations .ai-condition-row {
  box-shadow: inset 3px 0 0 rgba(11, 122, 117, 0.7);
}

.ai-score-performance {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-top: 3px solid #0b1220;
  border-radius: 6px;
  padding: 14px;
  background: #ffffff;
}

.ai-score-performance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ai-score-performance-head > div {
  display: grid;
  gap: 3px;
}

.ai-score-performance-head span,
.ai-score-performance-head small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.ai-score-performance-head strong {
  color: #0b1220;
  font-size: 18px;
  font-weight: 900;
}

.ai-score-performance-head em {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 5px 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.ai-score-performance-head em.good {
  border-color: rgba(11, 122, 117, 0.2);
  background: #f0fdfa;
  color: #0b7a75;
}

.ai-score-performance-head em.warn {
  border-color: rgba(217, 119, 6, 0.2);
  background: #fff7ed;
  color: #b45309;
}

.ai-score-performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 6px;
  overflow: hidden;
}

.ai-score-performance-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  background: #f8fafc;
}

.ai-score-performance-grid article + article {
  border-left: 1px solid rgba(15, 23, 42, 0.09);
}

.ai-score-performance-grid article > div {
  display: grid;
  gap: 2px;
}

.ai-score-performance-grid span,
.ai-score-performance-grid small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.ai-score-performance-grid strong {
  color: #0b1220;
  font-size: 14px;
  font-weight: 900;
}

.ai-score-performance-grid > article > b {
  font-size: 20px;
  font-weight: 900;
}

.weekly-quality-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.weekly-quality-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.weekly-quality-status > div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-left: 4px solid #0b7a75;
  border-radius: 6px;
  padding: 11px 12px;
  background: #f8fafc;
}

.weekly-quality-status > div.warn {
  border-left-color: #d97706;
}

.weekly-quality-status > div.good {
  border-left-color: #059669;
  background: #f4fbf8;
}

.weekly-quality-status span,
.weekly-quality-status small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.weekly-quality-status strong {
  color: #0b1220;
  font-size: 16px;
  font-weight: 900;
}

.weekly-quality-causes {
  margin-top: 10px;
}

.weekly-quality-causes details {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  background: #ffffff;
}

.weekly-quality-causes summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  background: #f8fafc;
}

.weekly-quality-causes summary::-webkit-details-marker {
  display: none;
}

.weekly-quality-causes summary span,
.weekly-quality-causes summary small,
.weekly-quality-cause-grid p,
.weekly-quality-cause-grid small,
.weekly-quality-cause-note {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.weekly-quality-causes summary strong {
  color: #b45309;
  font-size: 13px;
  font-weight: 900;
}

.weekly-quality-cause-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.weekly-quality-cause-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px 12px;
  border-left: 3px solid #d97706;
  background: #fffaf2;
}

.weekly-quality-cause-grid article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.weekly-quality-cause-grid article span,
.weekly-quality-cause-grid article strong {
  color: #0b1220;
  font-size: 13px;
  font-weight: 900;
}

.weekly-quality-cause-grid p,
.weekly-quality-cause-note {
  margin: 0;
}

.weekly-quality-cause-note {
  padding: 0 12px 12px;
}

.weekly-quality-calibration {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-top: 3px solid #0f766e;
  border-radius: 6px;
  padding: 16px;
  background: #ffffff;
}

.weekly-calibration-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.weekly-calibration-head > div {
  display: grid;
  gap: 4px;
}

.weekly-calibration-head span,
.weekly-calibration-compare span,
.weekly-calibration-compare small,
.weekly-calibration-note {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.weekly-calibration-head h3 {
  margin: 0;
  color: #0b1220;
  font-size: 18px;
}

.weekly-calibration-head p,
.weekly-calibration-note {
  margin: 0;
}

.weekly-calibration-head em {
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 6px 10px;
  color: #475569;
  background: #f8fafc;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.weekly-calibration-head em.good {
  border-color: #99d8c7;
  color: #047857;
  background: #ecfdf5;
}

.weekly-calibration-head em.warn {
  border-color: #f1c27d;
  color: #b45309;
  background: #fffbeb;
}

.weekly-calibration-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(180px, 0.75fr);
  align-items: stretch;
  gap: 8px;
}

.weekly-calibration-compare article {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.weekly-calibration-compare article.proposed {
  border-color: rgba(15, 118, 110, 0.3);
  background: #f3faf8;
}

.weekly-calibration-compare strong {
  font-size: 20px;
  font-weight: 900;
}

.weekly-calibration-arrow {
  align-self: center;
  color: #0f766e;
  font-size: 18px;
}

.weekly-quality-scans {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
}

.weekly-quality-scan-head,
.weekly-quality-scans article {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(80px, auto));
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
}

.weekly-quality-scan-head {
  background: #111827;
  color: #ffffff;
}

.weekly-quality-scan-head span {
  grid-column: 2 / -1;
  color: #cbd5e1;
  font-size: 11px;
  text-align: right;
}

.weekly-quality-scans article {
  background: #ffffff;
}

.weekly-quality-scans article + article {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.weekly-quality-scans article > div {
  display: grid;
  gap: 2px;
}

.weekly-quality-scans article strong {
  color: #0b1220;
  font-size: 12px;
  font-weight: 900;
}

.weekly-quality-scans article small,
.weekly-quality-scans article > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

@media (max-width: 520px) {
  .content {
    padding: 10px;
  }

  .nav {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }

  .market-overview-grid,
  .watch-response-pills,
  .today-quality-summary,
  .today-schedule-summary,
  .ai-profit-ranking-stats,
  .ai-profit-rank-stats,
  .ai-condition-columns,
  .ai-condition-summary-grid,
  .recommendation-actions,
  .portfolio-actions,
  .evaluation-symbol-metrics,
  .evaluation-check-list,
  .evaluation-result-strip,
  .signal-history-summary,
  .signal-history-flow,
  .signal-history-path {
    grid-template-columns: 1fr;
  }

  .today-signal-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-signal-filter button:nth-child(2) {
    border-right: 0;
  }

  .today-signal-filter button:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  }

  .ai-condition-overview {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ai-condition-overview-count {
    padding: 0 0 9px;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  }

  .ai-condition-overview > small {
    max-width: none;
    text-align: left;
  }

  .ai-condition-row-stats em {
    width: 100%;
    margin-left: 0;
  }

  .recommendation-feedback-summary,
  .ai-condition-examples article {
    grid-template-columns: 1fr;
  }

  .ai-condition-examples article > div:last-child {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ai-score-performance-head {
    flex-direction: column;
  }

  .ai-score-performance-grid,
  .weekly-quality-stats,
  .weekly-quality-status,
  .weekly-quality-cause-grid,
  .weekly-calibration-compare {
    grid-template-columns: 1fr;
  }

  .weekly-quality-causes summary {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .weekly-calibration-head {
    flex-direction: column;
  }

  .weekly-calibration-arrow {
    display: none;
  }

  .ai-score-performance-grid article + article {
    border-left: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.09);
  }

  .weekly-quality-scan-head,
  .weekly-quality-scans article {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .weekly-quality-scan-head strong,
  .weekly-quality-scan-head span,
  .weekly-quality-scans article > div {
    grid-column: 1 / -1;
    text-align: left;
  }

  .recommendation-card-head,
  .recommendation-price-row,
  .recommendation-card-badges {
    align-items: flex-start;
  }

  .recommendation-card-badges {
    justify-content: flex-start;
  }

  .recommendation-proof-panel,
  .signal-history-feedback {
    grid-template-columns: 1fr;
  }

  .recommendation-rank {
    min-width: 44px;
  }

  .recommendation-price-row strong {
    font-size: 19px;
  }

  .recommendation-reason-focus strong,
  .recommendation-response-card strong {
    font-size: 16px;
  }

  .history-time,
  .history-return,
  .history-duration,
  .history-basis,
  .history-price {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 7px;
    padding: 8px;
    background: #fbfdff;
  }
}

@media (max-width: 1200px) {
  .analysis-core-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .selected-analysis-insights {
    grid-template-columns: 1fr;
    grid-template-areas:
      "market"
      "validation"
      "calendar";
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .sidebar,
  .content,
  .topbar,
  .tab-page,
  .two-col,
  .panel,
  .panel-head,
  .inline-form,
  .list,
  #analysisBox {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sidebar {
    overflow: hidden;
  }

  .nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .analysis-core-grid,
  .analysis-zone-flow,
  .analysis-level-backtest-grid,
  .analysis-validation-periods {
    grid-template-columns: 1fr;
  }

  .analysis-position-context,
  .analysis-data-basis {
    grid-template-columns: 1fr;
  }

  .analysis-position-context > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .analysis-data-basis > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .analysis-data-basis span,
  .analysis-data-basis span + span {
    padding-left: 0;
    border-left: 0;
    white-space: normal;
  }

  .analysis-section-head,
  .analysis-level-backtest-head,
  .analysis-level-backtest footer,
  .analysis-technical-details > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .analysis-level-backtest footer small {
    text-align: left;
  }

  .analysis-detail-highlights {
    grid-template-columns: 1fr;
  }

  .analysis-detail-highlights > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .analysis-detail-tabs {
    width: 100%;
  }

  .analysis-detail-tabs button {
    min-width: 0;
    flex: 1;
    padding-inline: 8px;
  }

  .analysis-detail-row {
    grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1.3fr);
    gap: 5px 10px;
  }

  .analysis-detail-row > small {
    grid-column: 1 / -1;
  }

  .analysis-detail-conclusion b {
    display: block;
    margin: 0 0 3px;
  }

  .analysis-chart-price-strip {
    grid-template-columns: 1fr;
  }

  .analysis-chart-price-strip > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .analysis-chart-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-chart-periods {
    width: 100%;
  }

  .analysis-chart-periods button {
    flex: 1;
  }

  .analysis-chart-ma-controls {
    justify-content: flex-start;
  }

  .analysis-section-head > small,
  .analysis-technical-details > summary small {
    margin-left: 0;
    text-align: left;
  }

  .analysis-technical-details > summary::after {
    position: absolute;
    right: 18px;
  }
}

@media (max-width: 420px) {
  .sector-market-control,
  .sector-period-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sector-stock-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sector-stock-strip > span,
  .sector-stock-strip b {
    max-width: none;
  }
}
/* Data freshness, AI risk plan, and portfolio transaction history */
.data-freshness {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-left: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.data-freshness.stale {
  color: #b45309;
}

.market-data-basis-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #e5ebf0;
  color: #64748b;
  font-size: 11px;
}

.market-data-basis-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.market-data-basis-row b {
  margin-right: 3px;
  color: #334155;
}

.market-data-basis-row .stale,
.market-data-basis-row .stale b {
  color: #b45309;
}

.ai-risk-plan-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.ai-risk-plan-strip > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dbe4ee;
  background: #f8fafc;
}

.ai-risk-plan-strip span,
.ai-risk-plan-strip small {
  display: block;
  color: #64748b;
  font-size: 11px;
}

.ai-risk-plan-strip strong {
  display: block;
  margin: 3px 0;
  font-size: 15px;
}

.portfolio-card.closed {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.portfolio-transaction-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.portfolio-transaction-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.portfolio-transaction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.portfolio-transaction-head span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.portfolio-transaction-head h2 {
  margin: 4px 0 0;
  font-size: 21px;
}

.portfolio-transaction-head .icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 24px;
}

.portfolio-transaction-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.portfolio-transaction-form label {
  display: grid;
  gap: 6px;
}

.portfolio-transaction-form label > span {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.portfolio-transaction-form .wide {
  grid-column: 1 / -1;
}

.portfolio-transaction-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portfolio-transaction-history {
  padding: 18px 22px 24px;
  overflow: auto;
}

.portfolio-transaction-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.portfolio-transaction-history-head h3 {
  margin: 0;
  font-size: 16px;
}

.portfolio-transaction-row {
  display: grid;
  grid-template-columns: 150px repeat(3, minmax(100px, 1fr)) minmax(150px, 1.4fr);
  gap: 12px;
  align-items: center;
  padding: 12px 10px;
  border-top: 1px solid #e2e8f0;
}

.portfolio-transaction-row:first-child {
  border-top: 0;
}

.portfolio-transaction-row > div span {
  display: block;
  color: #64748b;
  font-size: 11px;
}

.portfolio-transaction-row > div strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.portfolio-transaction-date {
  padding-left: 10px;
  border-left: 3px solid #ef4444;
}

.portfolio-transaction-row.sell .portfolio-transaction-date {
  border-left-color: #2563eb;
}

@media (max-width: 760px) {
  .data-freshness {
    display: flex;
    margin: 5px 0 0;
    white-space: normal;
  }

  .ai-risk-plan-strip {
    grid-template-columns: 1fr;
  }

  .portfolio-transaction-form {
    grid-template-columns: 1fr 1fr;
    padding: 16px;
  }

  .portfolio-transaction-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .portfolio-transaction-actions button {
    width: 100%;
  }

  .portfolio-transaction-history {
    padding: 16px;
  }

  .portfolio-transaction-history-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .portfolio-transaction-row {
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-transaction-date,
  .portfolio-transaction-note {
    grid-column: 1 / -1;
  }

  .backup-restore-panel {
    padding: 14px;
  }

  .backup-validation {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .backup-compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backup-restore-confirm > div {
    align-items: stretch;
    flex-direction: column;
  }

  .backup-restore-confirm input,
  .backup-restore-confirm button {
    width: 100%;
  }
}

/* Unified premium terminal */
.app {
  grid-template-columns: 232px minmax(0, 1fr);
  background: #e9eef3;
}

.sidebar {
  gap: 20px;
  padding: 24px 16px 18px;
  border-right: 1px solid #263244;
  background: #0c1420;
  box-shadow: none;
}

.sidebar > div:first-child {
  padding: 0 8px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.sidebar .eyebrow {
  margin-bottom: 7px;
  color: #5eead4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.sidebar h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 20px;
  letter-spacing: 0;
}

.nav {
  gap: 3px;
}

.nav button {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #9eacbf;
  font-size: 14px;
  font-weight: 800;
  box-shadow: none;
}

.nav button:hover {
  border-left-color: #475569;
  background: #121d2b;
  color: #e2e8f0;
  box-shadow: none;
}

.nav button.active,
.nav button.parent-active {
  border-left-color: #2dd4bf;
  background: #162333;
  color: #ffffff;
  box-shadow: none;
}

.nav-subgroup {
  gap: 2px;
  margin: 1px 0 5px 12px;
  padding-left: 10px;
  border-left: 1px solid #26364a;
}

.nav button.nav-sub {
  min-height: 33px;
  padding-left: 10px;
  border-left: 0;
  background: transparent;
  color: #7f8da1;
  font-size: 12px;
}

.nav button.nav-sub:hover,
.nav button.nav-sub.active,
.nav button.nav-sub.parent-active {
  border: 0;
  background: #131f2e;
  color: #dce5ef;
  box-shadow: none;
}

.nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #dc2626;
  font-size: 10px;
  box-shadow: none;
}

.user-box {
  gap: 5px;
  padding: 16px 8px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}

.user-box strong {
  font-size: 13px;
}

.user-box span {
  color: #718096;
  font-size: 11px;
}

.user-box button.secondary {
  min-height: 36px;
  margin-top: 7px;
  border-color: #334155;
  border-radius: 3px;
  background: #111c29;
  color: #dbe4ee;
  box-shadow: none;
}

.content {
  width: min(1660px, 100%);
  min-width: 0;
  gap: 16px;
  padding: 22px 24px 44px;
}

.content > *,
.tab-page,
.tab-page > *,
.topbar,
.panel,
.panel-head {
  min-width: 0;
  max-width: 100%;
}

.topbar {
  align-items: flex-start;
  min-height: 86px;
  padding: 10px 2px 16px;
  border: 0;
  border-bottom: 1px solid #cbd5df;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.topbar h1 {
  margin: 0 0 8px;
  color: #101827;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0;
}

.market-session-status {
  gap: 3px;
  min-height: auto;
  padding: 7px 11px;
  border: 0;
  border-left: 3px solid #64748b;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
}

.market-session-status strong {
  font-size: 12px;
}

.market-session-status span,
.refresh-panel > span {
  color: #64748b;
  font-size: 11px;
}

.refresh-panel {
  align-self: center;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.refresh-toggle {
  min-height: 36px;
  border-color: #c7d1dc;
  border-radius: 3px;
  background: #f8fafc;
  box-shadow: none;
}

button {
  border-radius: 4px;
  font-weight: 850;
  box-shadow: none;
}

button:hover {
  box-shadow: none;
}

button.secondary {
  border-color: #c8d2dc;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
}

input,
select,
textarea {
  border-color: #cbd5df;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
}

.market-band,
.panel {
  border: 1px solid #cad4df;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045);
}

.panel {
  padding: 20px;
}

.panel-head {
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e0e6ed;
}

.panel-head h2,
.compact-panel h2 {
  margin: 0;
  color: #111827;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0;
}

.panel-head .muted {
  margin-top: 4px;
  color: #6b7788;
  font-size: 12px;
}

.market-band {
  grid-template-columns: minmax(310px, 0.7fr) minmax(620px, 1.3fr);
  gap: 20px;
  padding: 22px;
  overflow: hidden;
  color: #f8fafc;
  border-color: #1f2d3f;
  background: #0e1725;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.13);
}

.market-band::before {
  height: 2px;
  background: #2dd4bf;
}

.market-band .eyebrow {
  color: #5eead4;
  font-size: 10px;
  letter-spacing: 0;
}

.market-band h2 {
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
}

.market-band > div > p:not(.eyebrow) {
  color: #aab6c5;
}

.market-band .market-mood {
  border-color: #334155;
  border-radius: 3px;
  background: #172231;
  box-shadow: none;
}

.market-card {
  min-height: 128px;
  padding: 14px;
  border: 1px solid #d2dbe5;
  border-top: 2px solid #2dd4bf;
  border-radius: 3px;
  background: #f8fafc;
  box-shadow: none;
}

.market-card strong {
  color: #111827;
}

.recommend-grid,
.portfolio-priority-grid,
.portfolio-card-list,
.watch-alert-list,
.sector-overview-list,
.sector-flow-list {
  gap: 12px;
}

.signal-item,
.watch-alert-card,
.portfolio-card,
.portfolio-priority-card,
.recommendation-response-card,
.news-item,
.sector-overview-row,
.sector-flow-row {
  border-color: #d5dde6;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
}

.signal-item:hover,
.watch-alert-card:hover,
.portfolio-card:hover,
.portfolio-priority-card:hover,
.sector-overview-row:hover,
.sector-flow-row:hover {
  border-color: #aebbc9;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.06);
}

.signal-item,
.watch-alert-card,
.portfolio-priority-card,
.sector-overview-row,
.sector-flow-row {
  border-left-width: 3px;
}

.analysis-hero,
.analysis-context-card,
.analysis-summary-card,
.analysis-metric-card,
.analysis-technical-card,
.analysis-chart-card,
.portfolio-summary,
.portfolio-metrics,
.today-technical-panel {
  border-color: #d5dde6;
  border-radius: 4px;
  background: #f9fbfc;
  box-shadow: none;
}

.today-signal-filter,
.segmented-control,
.analysis-detail-tabs {
  overflow: hidden;
  border-color: #cbd5df;
  border-radius: 3px;
  background: #ffffff;
}

.today-workspace {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 14px;
}

.today-workspace > * {
  min-width: 0;
}

.today-analysis-panel {
  padding: 16px;
  border-top: 2px solid #111827;
  border-radius: 4px;
  box-shadow: none;
}

.today-signal-filter button,
.segmented-control button,
.analysis-detail-tabs button {
  border-radius: 0;
  box-shadow: none;
}

.today-signal-filter button.is-active,
.segmented-control button.active,
.analysis-detail-tabs button.active {
  background: #111c2a;
  color: #ffffff;
}

.table-wrap {
  border: 1px solid #d5dde6;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: none;
}

table {
  background: #ffffff;
}

th {
  padding: 11px 12px;
  border-bottom: 1px solid #cbd5df;
  background: #eef2f6;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

td {
  padding: 12px;
  border-bottom-color: #e3e8ee;
  color: #1e293b;
}

tbody tr:hover {
  background: #f8fafc;
}

.status-grid div,
.stat-grid div,
.metric-grid > div,
.summary-grid > div {
  border-color: #d7dfe8;
  border-radius: 3px;
  background: #f8fafc;
  box-shadow: none;
}

.status-grid span,
.stat-grid span,
.metric-grid span,
.summary-grid span {
  color: #64748b;
  font-size: 11px;
}

.status-grid strong,
.stat-grid strong,
.metric-grid strong,
.summary-grid strong {
  color: #111827;
  font-size: 17px;
}

.notice,
.analysis-empty,
.compact-empty {
  border-radius: 3px;
  box-shadow: none;
}

.positive,
.stock-up,
.profit,
.market-card .stock-up {
  color: #dc2626;
}

.negative,
.stock-down,
.loss,
.market-card .stock-down {
  color: #2563eb;
}

.data-freshness {
  color: #7c899a;
  font-size: 10px;
}

details {
  border-radius: 4px;
}

details > summary {
  color: #334155;
  font-weight: 850;
}

@media (max-width: 1100px) {
  .app {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .content {
    padding: 18px;
  }

  .market-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app {
    display: block;
    padding-bottom: 66px;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid #263244;
  }

  .sidebar > div:first-child {
    padding: 0 0 10px;
  }

  .nav {
    gap: 5px;
  }

  .nav button {
    border-left: 0;
    border-bottom: 2px solid transparent;
  }

  .nav button.active,
  .nav button.parent-active {
    border-bottom-color: #2dd4bf;
  }

  .content {
    gap: 12px;
    padding: 12px;
  }

  .topbar {
    min-height: auto;
    padding: 8px 0 12px;
  }

  .topbar h1 {
    font-size: 22px;
  }

  .panel,
  .market-band {
    padding: 15px;
  }

  .panel-head h2,
  .compact-panel h2 {
    font-size: 17px;
  }

  .market-band h2 {
    font-size: 24px;
  }

  .mobile-bottom-nav {
    border-top-color: #c6d0da;
    background: #ffffff;
    box-shadow: 0 -5px 16px rgba(15, 23, 42, 0.08);
  }

  .mobile-bottom-nav > button {
    border-radius: 2px;
  }
}

/* Information hierarchy and responsive data states */
:where(
  .market-card,
  .market-group-row,
  .dashboard-focus-card,
  .recommendation-item,
  .portfolio-card,
  .status-grid,
  .stat-grid,
  .metric-grid,
  .summary-grid,
  .analysis-header,
  .analysis-chart-panel
) strong,
:where(.recommendation-price-row, .portfolio-numbers, .price-position-labels) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.dashboard-focus-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-focus-card {
  min-height: 104px;
  padding: 13px 14px;
  border-radius: 5px;
}

.chip,
.recommendation-rank,
.signal-meta span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.recommendation-item {
  border-radius: 5px;
}

.recommendation-item.hold {
  border-left-width: 5px;
  background: #fbfefd;
}

.recommendation-card-head h3 {
  letter-spacing: 0;
}

.recommendation-price-row strong {
  font-size: 23px;
  line-height: 1;
}

.recommendation-confidence-summary {
  grid-template-columns: minmax(132px, 0.25fr) minmax(100px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
  border-radius: 3px;
}

.confidence-track {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #e2e8f0;
}

.confidence-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0f766e;
}

.confidence-track i.score-0 { width: 0; }
.confidence-track i.score-1 { width: 10%; }
.confidence-track i.score-2 { width: 20%; }
.confidence-track i.score-3 { width: 30%; }
.confidence-track i.score-4 { width: 40%; }
.confidence-track i.score-5 { width: 50%; }
.confidence-track i.score-6 { width: 60%; }
.confidence-track i.score-7 { width: 70%; }
.confidence-track i.score-8 { width: 80%; }
.confidence-track i.score-9 { width: 90%; }
.confidence-track i.score-10 { width: 100%; }

.recommendation-confidence-summary.low .confidence-track i { background: #2563eb; }
.recommendation-confidence-summary.medium .confidence-track i { background: #d97706; }

.compact-price-position {
  display: grid;
  gap: 6px;
  padding: 9px 10px 8px;
  border-top: 1px solid #dbe3ec;
  border-bottom: 1px solid #dbe3ec;
  background: #fbfcfe;
}

.price-position-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.price-position-head > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.price-position-head > strong {
  color: #334155;
  font-size: 11px;
}

.price-position-head b {
  font-size: 12px;
}

.price-position-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 14px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.price-position-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.price-position-legend span > i {
  flex: 0 0 auto;
  display: inline-block;
}

.price-position-legend .basis > i {
  width: 2px;
  height: 13px;
  background: #64748b;
}

.price-position-legend .current > i {
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #0f766e;
  box-shadow: 0 0 0 1px #0f766e;
}

.price-position-legend b {
  color: #334155;
  font-size: 10px;
}

.price-position-track {
  position: relative;
  height: 6px;
  margin: 3px 3px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #dbeafe 0 33%, #e2e8f0 33% 67%, #fee2e2 67% 100%);
}

.position-basis,
.position-current {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.position-basis {
  width: 2px;
  height: 16px;
  background: #64748b;
}

.position-current {
  width: 10px;
  height: 10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #0f766e;
  box-shadow: 0 0 0 1px #0f766e;
}

.pos-0 { left: 0%; }
.pos-1 { left: 10%; }
.pos-2 { left: 20%; }
.pos-3 { left: 30%; }
.pos-4 { left: 40%; }
.pos-5 { left: 50%; }
.pos-6 { left: 60%; }
.pos-7 { left: 70%; }
.pos-8 { left: 80%; }
.pos-9 { left: 90%; }
.pos-10 { left: 100%; }

.price-position-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.price-position-labels span:nth-child(2) { text-align: center; }
.price-position-labels span:last-child { text-align: right; }

.price-position-labels.range-only {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-position-labels.range-only span:nth-child(2) {
  text-align: right;
}

.portfolio-card > .compact-price-position {
  margin-top: -1px;
  border-right: 1px solid #dbe3ec;
  border-left: 1px solid #dbe3ec;
}

.portfolio-input-field,
.portfolio-date-field {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
  padding: 6px 10px 8px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 4px;
  background: #ffffff;
}

.portfolio-input-field > span,
.portfolio-date-field > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.portfolio-input-field input,
.portfolio-date-field input {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-weight: 850;
}

.portfolio-input-field:focus-within,
.portfolio-date-field:focus-within {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.portfolio-memo-field {
  grid-column: span 2;
}

.portfolio-form-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.portfolio-form-actions button {
  min-height: 48px;
}

.portfolio-purchase-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.portfolio-purchase-meta > span + span {
  padding-left: 8px;
  border-left: 1px solid #d5dee8;
}

.portfolio-purchase-meta b {
  color: #334155;
  font-weight: 900;
}

.recommendation-secondary-data {
  display: grid;
  gap: 10px;
}

.recommendation-more > summary,
.portfolio-evidence > summary,
.portfolio-response-more > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #d5dee8;
  border-radius: 4px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.recommendation-more > summary::after,
.portfolio-evidence > summary::after,
.portfolio-response-more > summary::after {
  content: "+";
  color: #0f766e;
  font-size: 18px;
  line-height: 1;
}

.recommendation-more[open] > summary::after,
.portfolio-evidence[open] > summary::after,
.portfolio-response-more[open] > summary::after {
  content: "−";
}

.recommendation-more > summary::-webkit-details-marker,
.portfolio-evidence > summary::-webkit-details-marker,
.portfolio-response-more > summary::-webkit-details-marker {
  display: none;
}

.recommendation-more-body,
.portfolio-evidence-body {
  margin-top: 8px;
}

.portfolio-evidence-body {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid #e2e8f0;
  border-top: 0;
  background: #fbfdff;
}

.portfolio-priority-brief {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portfolio-priority-brief span {
  padding: 5px 8px;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.portfolio-card.is-highlighted {
  animation: portfolio-card-focus 1.8s ease;
}

@keyframes portfolio-card-focus {
  0%, 100% { box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045); }
  25%, 70% { box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.2), 0 12px 28px rgba(15, 23, 42, 0.12); }
}

.analysis-chart-panel {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid #cbd6e2;
  border-top: 3px solid #0f766e;
  border-radius: 5px;
  background: #ffffff;
}

.analysis-chart-panel .chart {
  min-height: 360px;
}

.analysis-section-head h3 {
  font-size: 20px;
}

.ui-state {
  min-height: 118px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid #d5dee8;
  border-left: 4px solid #0f766e;
  border-radius: 5px;
  background: #ffffff;
}

.ui-state.error {
  border-left-color: #2563eb;
  background: #f8fbff;
}

.ui-state strong {
  display: block;
  color: #111827;
  font-size: 15px;
}

.ui-state p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.ui-state-visual {
  height: 36px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
}

.ui-state-visual i {
  width: 6px;
  border-radius: 2px 2px 0 0;
  background: #0f766e;
  animation: ui-state-pulse 1.1s ease-in-out infinite alternate;
}

.ui-state-visual i:nth-child(1) { height: 14px; }
.ui-state-visual i:nth-child(2) { height: 28px; animation-delay: 0.15s; }
.ui-state-visual i:nth-child(3) { height: 20px; animation-delay: 0.3s; }
.ui-state.error .ui-state-visual i { background: #2563eb; animation: none; }

@keyframes ui-state-pulse {
  from { opacity: 0.35; transform: scaleY(0.65); transform-origin: bottom; }
  to { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-state-visual i { animation: none; }
}

@media (max-width: 1000px) {
  .dashboard-focus-list {
    grid-template-columns: 1fr 1fr;
  }

}

/* Event-based news workspace */
.news-coverage-summary {
  padding: 15px;
  border: 1px solid #d7e0e9;
  border-radius: 6px;
  background: #f7f9fc;
}

.news-coverage-empty {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.news-event-section {
  display: grid;
  gap: 10px;
}

.news-event-section + .news-event-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #dce4ec;
}

.news-event-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}

.news-event-section-head h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
}

.news-event-section-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.news-event-section-head > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.news-event-list {
  display: grid;
  gap: 10px;
}

.news-event-card {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #d5dfe9;
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

.news-event-card.good {
  border-left-color: #dc2626;
}

.news-event-card.danger {
  border-left-color: #2563eb;
}

.news-event-card.user-impact {
  border-top-color: #7dd3c7;
}

.news-event-card.featured {
  border-color: #a7b5c5;
  border-left-color: #0f766e;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
}

.news-event-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.news-event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.news-event-tags > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #d8e1ea;
  border-radius: 4px;
  background: #f8fafc;
  color: #536174;
  font-size: 10px;
  font-weight: 900;
}

.news-event-tags .source.official,
.news-event-tags .source.trusted {
  border-color: #a7d8d1;
  background: #effaf8;
  color: #0f766e;
}

.news-event-tags .connection.high {
  border-color: #fecaca;
  background: #fff6f6;
  color: #b42318;
}

.news-event-tags .connection.medium {
  border-color: #f3d8a5;
  background: #fffaf0;
  color: #9a6700;
}

.news-event-tags .cluster {
  border-color: #cbd5e1;
  background: #eef2f6;
  color: #334155;
}

.news-event-score {
  min-width: 132px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: end;
  gap: 3px 8px;
  text-align: right;
}

.news-event-score strong {
  color: #111827;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.news-event-score em {
  grid-column: 1 / -1;
  color: #d97706;
  font-size: 14px;
  font-style: normal;
}

.news-event-title {
  display: block;
  margin-top: 12px;
  color: #101827;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.42;
  text-decoration: none;
}

.news-event-title:hover {
  color: #0f766e;
}

.news-event-summary {
  display: -webkit-box;
  overflow: hidden;
  margin: 7px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-event-card .news-stocks {
  margin-top: 11px;
}

.news-event-card .news-stocks span {
  display: inline-grid;
  gap: 2px;
  padding: 6px 9px;
  border-radius: 4px;
}

.news-event-card .news-stocks b {
  color: #1e293b;
  font-size: 11px;
}

.news-event-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 13px;
  border: 1px solid #dbe3ec;
  border-radius: 5px;
  background: #f8fafc;
}

.news-event-facts > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.news-event-facts > span + span {
  border-left: 1px solid #dbe3ec;
}

.news-event-facts small {
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
}

.news-event-facts b {
  overflow-wrap: anywhere;
  color: #1e293b;
  font-size: 12px;
}

.news-event-facts em {
  overflow-wrap: anywhere;
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  line-height: 1.4;
}

.news-event-facts .verification.good b {
  color: #0f766e;
}

.news-event-facts .verification.danger b {
  color: #2563eb;
}

.news-event-facts .verification.wait b {
  color: #b7791f;
}

.news-event-details {
  margin-top: 10px;
}

.news-event-details > summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid #d8e1ea;
  border-radius: 4px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}

.news-event-details > summary::after {
  content: "+";
  color: #0f766e;
  font-size: 17px;
}

.news-event-details[open] > summary::after {
  content: "−";
}

.news-event-details > summary::-webkit-details-marker {
  display: none;
}

.news-event-details-body {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid #dbe3ec;
  border-top: 0;
  background: #fbfcfd;
}

.news-impact-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.news-impact-breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid #d7e0e9;
  border-radius: 4px;
  background: #ffffff;
  color: #475569;
  font-size: 10px;
}

.news-impact-breakdown em {
  color: #0f766e;
  font-style: normal;
  font-weight: 900;
}

.news-impact-breakdown .minus em {
  color: #2563eb;
}

.news-connection-detail {
  margin: 0;
  color: #475569;
  font-size: 11px;
  line-height: 1.5;
}

.news-related-articles {
  display: grid;
  gap: 5px;
}

.news-related-articles > strong {
  color: #334155;
  font-size: 11px;
}

.news-related-articles a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 9px;
  border-top: 1px solid #e1e7ee;
  color: #334155;
  font-size: 11px;
  text-decoration: none;
}

.news-related-articles a:hover span {
  color: #0f766e;
}

.news-related-articles small {
  flex: 0 0 auto;
  color: #7c899a;
  font-size: 9px;
}

.settings-inline-grid .settings-wide {
  grid-column: span 2;
}

@media (max-width: 760px) {
  .news-event-section + .news-event-section {
    margin-top: 18px;
    padding-top: 17px;
  }

  .news-event-section-head {
    align-items: start;
  }

  .news-event-section-head h3 {
    font-size: 16px;
  }

  .news-event-section-head p {
    font-size: 11px;
  }

  .news-event-card {
    padding: 13px;
  }

  .news-event-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .news-event-score {
    min-width: 0;
    grid-template-columns: auto auto minmax(0, 1fr);
    justify-content: start;
    text-align: left;
  }

  .news-event-score em {
    grid-column: auto;
    justify-self: end;
  }

  .news-event-title {
    margin-top: 10px;
    font-size: 15px;
  }

  .news-event-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-event-facts > span + span {
    border-top: 1px solid #dbe3ec;
    border-left: 0;
  }

  .news-event-facts > span {
    padding: 9px 10px;
  }

  .news-related-articles a {
    align-items: start;
    flex-direction: column;
    gap: 3px;
  }

  .settings-inline-grid .settings-wide {
    grid-column: auto;
  }
}

/* Stored AI signal quote labeling */
.recommendation-price-label {
  flex: 0 0 100%;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.recommendation-item .market-data-basis-row {
  margin-top: -2px;
  padding: 7px 9px;
  border: 1px solid #d9e2eb;
  border-radius: 4px;
  background: #f8fafc;
}

.recommendation-item .market-data-basis-row span {
  font-size: 10px;
}

@media (max-width: 760px) {
  .recommendation-price-label {
    font-size: 11px !important;
  }

  .recommendation-item .market-data-basis-row {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .today-workspace {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .today-workspace > *,
  .recommendation-list,
  .recommendation-group,
  .recommendation-item {
    width: 100%;
    min-width: 0;
  }

  .today-analysis-panel {
    width: 100%;
  }

  .recommendation-item {
    padding: 13px;
  }

  .recommendation-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .recommendation-card-badges {
    justify-content: flex-end;
  }

  .recommendation-price-row {
    gap: 7px;
  }

  .recommendation-price-row strong {
    font-size: 20px;
  }

  .recommendation-item > .compact-price-position {
    display: none;
  }

  .recommendation-trade-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .recommendation-trade-strip > div {
    min-width: 0;
    padding: 9px 7px;
  }

  .recommendation-trade-strip strong {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .recommendation-state-panel,
  .recommendation-plain-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .recommendation-state-panel {
    padding: 11px;
  }

  .recommendation-more > summary,
  .portfolio-evidence > summary,
  .portfolio-response-more > summary {
    min-height: 44px;
    font-size: 13px;
  }

  .recommendation-actions,
  .portfolio-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .recommendation-actions button,
  .portfolio-actions button {
    min-height: 44px;
    padding: 8px 6px;
    font-size: 12px;
  }

  .portfolio-priority-section {
    padding: 12px;
  }

  .portfolio-priority-head {
    align-items: center;
    margin-bottom: 9px;
  }

  .portfolio-priority-head p {
    display: none;
  }

  .portfolio-priority-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .portfolio-priority-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 11px;
  }

  .portfolio-priority-card > p,
  .portfolio-priority-card > .portfolio-priority-brief {
    grid-column: 1 / -1;
  }

  .portfolio-priority-card > button {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-height: 40px;
    padding: 7px 10px;
  }

  .portfolio-priority-top {
    min-width: 0;
  }

  .portfolio-priority-top h3 {
    font-size: 15px;
  }

  .portfolio-risk-score {
    min-width: 44px;
  }

  .portfolio-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .portfolio-input-field,
  .portfolio-date-field {
    min-height: 54px;
    padding: 8px 11px;
  }

  .portfolio-input-field input,
  .portfolio-date-field input {
    min-height: 26px;
    font-size: 15px;
  }

  .portfolio-memo-field {
    grid-column: auto;
  }

  .portfolio-form-actions {
    position: sticky;
    bottom: 68px;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px;
    border: 1px solid #d5dee8;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
  }

  .portfolio-form-actions button {
    min-height: 46px;
  }

  .portfolio-card-top {
    gap: 10px;
  }

  .portfolio-purchase-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 9px;
    margin-top: 3px;
  }

  .portfolio-purchase-meta > span + span {
    padding-left: 9px;
  }

  .portfolio-purchase-meta .portfolio-closed-date {
    grid-column: 1 / -1;
    padding: 5px 0 0;
    border-top: 1px solid #e2e8f0;
    border-left: 0;
  }

  .portfolio-status {
    width: 100%;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    padding-top: 9px;
    border-top: 1px solid #e2e8f0;
    text-align: left;
  }

  .portfolio-status strong {
    font-size: 18px;
  }

  .portfolio-card > .compact-price-position {
    display: none;
  }

  .portfolio-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .portfolio-numbers > div {
    min-height: 64px;
    padding: 9px;
  }

  .portfolio-numbers strong {
    font-size: 14px;
  }

  .dashboard-focus-list {
    grid-template-columns: 1fr;
  }

  .recommendation-confidence-summary {
    grid-template-columns: minmax(112px, 0.4fr) minmax(0, 0.6fr);
  }

  .recommendation-confidence-summary p {
    grid-column: 1 / -1;
  }

  .compact-price-position {
    padding-right: 8px;
    padding-left: 8px;
  }

  .price-position-labels {
    font-size: 9px;
  }

  .analysis-chart-panel {
    padding: 12px;
  }

  .analysis-chart-panel .chart {
    min-height: 250px;
  }

  .ui-state {
    min-height: 106px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }

  .ui-state > button {
    grid-column: 2;
    justify-self: start;
  }

  .mobile-bottom-nav > button {
    min-height: 58px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 5px 2px;
    font-size: 9px;
  }

  .mobile-nav-symbol {
    width: 25px;
    height: 21px;
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
  }

  .mobile-bottom-nav > button.active .mobile-nav-symbol {
    color: #0f766e;
  }
}

/* Premium market workspace refinement */
:root {
  --workspace-bg: #edf1f5;
  --workspace-surface: #ffffff;
  --workspace-soft: #f6f8fb;
  --workspace-ink: #111827;
  --workspace-muted: #64748b;
  --workspace-line: #d7e0e9;
  --workspace-line-strong: #bdc9d6;
  --workspace-navy: #0a1321;
  --workspace-navy-soft: #142136;
  --workspace-teal: #0f766e;
  --workspace-teal-bright: #14b8a6;
  --workspace-red: #dc2626;
  --workspace-blue: #2563eb;
  --workspace-amber: #b7791f;
  --workspace-shadow: 0 10px 28px rgba(15, 23, 42, 0.065);
  --workspace-shadow-soft: 0 3px 12px rgba(15, 23, 42, 0.055);
}

body {
  background: var(--workspace-bg);
  color: var(--workspace-ink);
}

.app {
  grid-template-columns: 244px minmax(0, 1fr);
  background: var(--workspace-bg);
}

.sidebar {
  padding: 26px 18px 18px;
  border-right: 1px solid #203047;
  background: var(--workspace-navy);
}

.sidebar > div:first-child {
  margin: 0 2px;
  padding: 0 8px 20px;
  border-bottom-color: rgba(148, 163, 184, 0.2);
}

.sidebar .eyebrow {
  color: #5eead4;
  font-size: 10px;
}

.sidebar h2 {
  font-size: 21px;
  font-weight: 900;
}

.nav {
  gap: 4px;
}

.nav button {
  min-height: 42px;
  padding: 0 13px;
  border-left-width: 3px;
  border-radius: 4px;
  color: #9ba9bc;
  font-size: 13px;
}

.nav button:hover {
  border-left-color: #64748b;
  background: #111d2d;
  color: #f1f5f9;
}

.nav button.active,
.nav button.parent-active {
  border-left-color: var(--workspace-teal-bright);
  background: #172538;
  color: #ffffff;
}

.nav-subgroup {
  margin-left: 14px;
  padding: 3px 0 4px 12px;
  border-left-color: #2b3a4f;
}

.nav button.nav-sub {
  min-height: 34px;
  color: #7f8da1;
  font-size: 12px;
}

.nav button.nav-sub:hover,
.nav button.nav-sub.active,
.nav button.nav-sub.parent-active {
  background: #121f30;
  color: #e2e8f0;
}

.user-box {
  margin: 0 2px;
  padding: 17px 8px 0;
}

.content {
  width: min(1740px, 100%);
  gap: 18px;
  padding: 24px 28px 52px;
}

.tab-page {
  gap: 18px;
}

.topbar {
  min-height: 82px;
  padding: 8px 3px 17px;
  border-bottom: 1px solid var(--workspace-line-strong);
}

.topbar h1 {
  color: #0f172a;
  font-size: 27px;
  line-height: 1.15;
}

.market-session-status {
  min-width: 280px;
  padding: 8px 12px;
  border-left: 3px solid var(--workspace-teal);
  background: rgba(255, 255, 255, 0.72);
}

.market-session-status strong {
  color: #1e293b;
}

.refresh-panel {
  gap: 8px;
}

button {
  min-height: 40px;
  border: 1px solid #0f766e;
  border-radius: 5px;
  background: #0f766e;
  color: #ffffff;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

button:hover {
  border-color: #115e59;
  background: #115e59;
  transform: translateY(-1px);
}

button.secondary {
  border-color: #c5d0dc;
  background: #ffffff;
  color: #334155;
}

button.secondary:hover {
  border-color: #94a3b8;
  background: #f8fafc;
  color: #0f172a;
}

input,
select,
textarea {
  min-height: 42px;
  border-color: #c8d3df;
  border-radius: 5px;
  color: #111827;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--workspace-teal);
  outline: 3px solid rgba(15, 118, 110, 0.1);
}

/* Recommendation validation: record audit, risk and exit-policy comparison */
.evaluation-quality-section {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.evaluation-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.evaluation-section-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.evaluation-section-head span {
  color: var(--accent-strong, #087f73);
  font-size: 11px;
  font-weight: 900;
}

.evaluation-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.evaluation-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.evaluation-section-head > em {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f9fc;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.evaluation-section-head > em.good {
  border-color: rgba(13, 148, 136, 0.24);
  background: #ecfdf8;
  color: #067467;
}

.evaluation-section-head > em.warn {
  border-color: rgba(217, 119, 6, 0.24);
  background: #fffaeb;
  color: #a15c07;
}

.evaluation-section-head > em.danger {
  border-color: rgba(217, 45, 32, 0.24);
  background: #fff1f0;
  color: #b42318;
}

.evaluation-audit-toggle {
  cursor: pointer;
  list-style: none;
}

.evaluation-audit-toggle::-webkit-details-marker {
  display: none;
}

.evaluation-audit-toggle > div {
  flex: 1 1 auto;
}

.evaluation-audit-toggle::after {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #f8fafc;
  color: #344054;
  content: "+";
  font-size: 18px;
  font-weight: 800;
}

.evaluation-audit-section[open] .evaluation-audit-toggle::after {
  content: "-";
}

.evaluation-audit-section:not([open]) .evaluation-audit-toggle {
  padding-bottom: 0;
  border-bottom: 0;
}

.evaluation-audit-body {
  display: grid;
  gap: 12px;
}

.evaluation-audit-summary,
.evaluation-risk-grid,
.evaluation-exit-grid {
  display: grid;
  gap: 10px;
}

.evaluation-audit-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.evaluation-exit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.evaluation-audit-summary > div,
.evaluation-risk-grid > article,
.evaluation-exit-grid > article {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid #98a2b3;
  border-radius: 7px;
  background: #f9fbfd;
}

.evaluation-audit-summary > div.danger {
  border-left-color: var(--danger);
}

.evaluation-audit-summary > div.warn {
  border-left-color: var(--warn);
}

.evaluation-audit-summary span,
.evaluation-risk-grid span,
.evaluation-exit-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.evaluation-audit-summary strong,
.evaluation-risk-grid strong,
.evaluation-exit-grid strong {
  color: var(--ink);
  font-size: 18px;
}

.evaluation-risk-grid small,
.evaluation-exit-grid small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.evaluation-risk-grid b {
  font-size: inherit;
}

.evaluation-exit-grid > article.best {
  border-color: rgba(13, 148, 136, 0.34);
  border-left-color: var(--good);
  background: #f2fbf8;
}

.evaluation-exit-grid > article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.evaluation-exit-grid > article em {
  color: #067467;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.evaluation-exit-grid > article p {
  margin: 4px 0 0;
  color: #475467;
  font-size: 11px;
  line-height: 1.45;
}

.evaluation-audit-list {
  display: grid;
  gap: 8px;
}

.evaluation-audit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: 7px;
  background: #fffdf8;
}

.evaluation-audit-row.critical {
  border-left-color: var(--danger);
  background: #fffafa;
}

.evaluation-audit-row.excluded {
  border-left-color: #667085;
  background: #f8fafc;
}

.evaluation-audit-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.evaluation-audit-main > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.evaluation-audit-main strong {
  color: var(--ink);
  font-size: 15px;
}

.evaluation-audit-main small,
.evaluation-audit-main p {
  color: var(--muted);
  font-size: 11px;
}

.evaluation-audit-main > span {
  color: #b42318;
  font-size: 12px;
  font-weight: 900;
}

.evaluation-audit-main p {
  margin: 0;
  line-height: 1.45;
}

.evaluation-audit-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 440px;
}

.evaluation-audit-actions button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.evaluation-audit-correction {
  min-width: 92px;
}

.evaluation-audit-correction > summary {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: #344054;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
}

.evaluation-audit-correction > summary::-webkit-details-marker {
  display: none;
}

.evaluation-audit-correction[open] {
  flex-basis: 100%;
}

.evaluation-audit-correction form {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(190px, 1.2fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
}

.evaluation-audit-correction label {
  display: grid;
  gap: 4px;
}

.evaluation-audit-correction label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.evaluation-audit-correction input {
  min-width: 0;
  height: 36px;
}

.evaluation-quality-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 900px) {
  .evaluation-audit-summary,
  .evaluation-risk-grid,
  .evaluation-exit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evaluation-audit-row {
    grid-template-columns: 1fr;
  }

  .evaluation-audit-actions {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .evaluation-quality-section {
    padding: 12px;
  }

  .evaluation-section-head,
  .evaluation-audit-main > div {
    display: grid;
  }

  .evaluation-audit-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .evaluation-audit-toggle > div {
    grid-column: 1 / -1;
  }

  .evaluation-audit-toggle::after {
    grid-column: 2;
    grid-row: 2;
  }

  .evaluation-section-head > em {
    justify-self: start;
  }

  .evaluation-audit-summary,
  .evaluation-risk-grid,
  .evaluation-exit-grid,
  .evaluation-audit-correction form {
    grid-template-columns: 1fr;
  }

  .evaluation-excluded-history > summary,
  .evaluation-excluded-title,
  .evaluation-excluded-observation,
  .evaluation-performance-brake {
    align-items: flex-start;
  }

  .evaluation-excluded-observation,
  .evaluation-performance-brake {
    display: grid;
  }

  .evaluation-performance-brake-stats {
    min-width: 0;
    text-align: left;
  }
}

.panel,
.market-band {
  border-radius: 6px;
}

.panel {
  padding: 22px;
  border: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-shadow-soft);
}

.tab-page > .panel:not(.dashboard-focus-panel):not(.dashboard-sector-brief-panel),
.tab-page > section > .panel {
  border-top: 3px solid #1e293b;
}

.panel-head {
  position: relative;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom-color: #dfe6ed;
}

.panel-head h2,
.compact-panel h2 {
  color: #111827;
  font-size: 20px;
  line-height: 1.25;
}

.panel-head .eyebrow,
.dashboard-focus-head .eyebrow,
.sector-page-head .eyebrow {
  margin-bottom: 6px;
  color: var(--workspace-teal);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.panel-head .muted,
.dashboard-focus-head .muted {
  max-width: 820px;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.55;
}

.market-band {
  grid-template-columns: minmax(300px, 0.62fr) minmax(660px, 1.38fr);
  gap: 24px;
  padding: 26px;
  border: 1px solid #233249;
  background: var(--workspace-navy);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}

.market-band::before {
  height: 3px;
  background: linear-gradient(90deg, #2dd4bf 0 44%, #60a5fa 64%, #f43f5e 100%);
}

.market-band h2 {
  font-size: 30px;
  line-height: 1.15;
}

.market-band > div > p:not(.eyebrow) {
  max-width: 510px;
  color: #9eacc0;
  line-height: 1.55;
}

.market-band .market-mood,
.market-mood-summary {
  border: 1px solid #314057;
  border-left: 4px solid var(--workspace-teal-bright);
  border-radius: 5px;
  background: #172235;
}

.market-card {
  min-height: 136px;
  padding: 16px;
  border-color: #d4dde7;
  border-top: 3px solid #2dd4bf;
  border-radius: 5px;
  background: #f8fafc;
}

.market-card > span,
.market-group-head strong {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

.market-card strong,
.market-group-row b {
  font-variant-numeric: tabular-nums;
}

.dashboard-focus-panel {
  padding: 24px;
  border: 0;
  border-top: 3px solid var(--workspace-teal);
  box-shadow: var(--workspace-shadow);
}

.dashboard-focus-head {
  padding-bottom: 17px;
  border-bottom: 1px solid #e0e7ee;
}

.dashboard-focus-head h2 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 24px;
}

.dashboard-focus-list {
  margin-top: 16px;
  gap: 12px;
}

.dashboard-focus-card {
  min-height: 118px;
  padding: 16px;
  border: 1px solid #d7e0e9;
  border-left: 4px solid #94a3b8;
  border-radius: 5px;
  background: #fbfcfe;
}

.recommend-grid {
  align-items: start;
  gap: 16px;
}

.dashboard-priority-panel {
  min-height: 100%;
  border-top-color: var(--workspace-teal) !important;
}

.dashboard-secondary-panel {
  border-top: 2px solid #64748b !important;
}

.signal-item,
.watch-alert-card,
.portfolio-priority-card,
.recommendation-item,
.portfolio-card,
.news-item,
.sector-overview-row,
.sector-flow-row,
.calendar-event-card {
  border-color: #d6dfe8;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.signal-item:hover,
.watch-alert-card:hover,
.portfolio-priority-card:hover,
.recommendation-item:hover,
.portfolio-card:hover,
.news-item:hover,
.sector-overview-row:hover,
.sector-flow-row:hover,
.calendar-event-card:hover {
  border-color: #aab7c5;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.today-panel,
.news-panel,
.investment-calendar-panel,
.sector-page,
#portfolioTab > .panel {
  border-top-color: var(--workspace-teal) !important;
}

.today-signal-filter,
.segmented-control,
.analysis-detail-tabs {
  padding: 3px;
  border: 1px solid #cbd5df;
  border-radius: 5px;
  background: #f1f5f9;
}

.today-signal-filter button,
.segmented-control button,
.analysis-detail-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #64748b;
}

.today-signal-filter button.is-active,
.segmented-control button.active,
.analysis-detail-tabs button.active {
  background: #111d2d;
  color: #ffffff;
}

.recommendation-item {
  padding: 18px;
  border-left-width: 5px;
}

.recommendation-card-head {
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e7ee;
}

.recommendation-card-head h3 {
  color: #0f172a;
  font-size: 19px;
}

.recommendation-rank {
  min-width: 30px;
  height: 30px;
  justify-content: center;
  border-radius: 50%;
  background: #111d2d;
  color: #ffffff;
}

.recommendation-price-row strong {
  color: #0f172a;
  font-size: 24px;
}

.recommendation-state-panel,
.recommendation-confidence-summary,
.recommendation-trade-strip > div,
.portfolio-response,
.portfolio-numbers > div {
  border-color: #d7e0e9;
  background: var(--workspace-soft);
}

.recommendation-more > summary,
.portfolio-evidence > summary,
.portfolio-response-more > summary,
.today-technical-panel > summary,
.signal-guide-panel > summary {
  border-color: #d3dde7;
  background: #f7f9fc;
}

.portfolio-metrics,
.portfolio-summary,
.status-grid,
.stat-grid,
.metric-grid,
.summary-grid {
  gap: 10px;
}

.portfolio-metrics > div,
.status-grid > div,
.stat-grid > div,
.metric-grid > div,
.summary-grid > div {
  min-height: 84px;
  padding: 14px;
  border: 1px solid #d6dfe8;
  border-top: 2px solid #94a3b8;
  border-radius: 5px;
  background: #f8fafc;
}

.portfolio-metrics strong,
.status-grid strong,
.stat-grid strong,
.metric-grid strong,
.summary-grid strong {
  color: #0f172a;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.portfolio-form {
  gap: 9px;
  padding: 14px;
  border: 1px solid #d6dfe8;
  border-radius: 6px;
  background: #f7f9fc;
}

.portfolio-input-field,
.portfolio-date-field {
  border-color: #cbd6e1;
  border-radius: 5px;
}

.portfolio-priority-panel {
  border-radius: 6px;
}

.portfolio-card {
  overflow: hidden;
  border-left-width: 4px;
}

.portfolio-card-top {
  padding-bottom: 13px;
  border-bottom: 1px solid #e0e7ee;
}

.portfolio-numbers {
  gap: 8px;
}

.news-filter-bar,
.sector-toolbar {
  padding: 10px;
  border: 1px solid #d7e0e9;
  border-radius: 6px;
  background: #f6f8fb;
}

.news-list {
  gap: 10px;
}

.news-item {
  padding: 16px 18px;
  border-left: 4px solid #94a3b8;
}

.news-item.good,
.news-item.positive {
  border-left-color: var(--workspace-red);
}

.news-item.danger,
.news-item.negative {
  border-left-color: var(--workspace-blue);
}

.news-item h3,
.news-item strong {
  color: #172033;
}

.calendar-watch-list {
  padding: 12px;
  border: 1px solid #d6dfe8;
  border-radius: 6px;
  background: #f7f9fc;
}

.investment-calendar-list {
  position: relative;
  gap: 10px;
}

.calendar-event-card,
.calendar-event {
  border-left: 4px solid var(--workspace-teal);
  background: #ffffff;
}

.sector-summary-strip,
.sector-change-highlights,
.sector-flow-leaders {
  gap: 10px;
}

.sector-overview-row,
.sector-flow-row {
  min-height: 96px;
  padding: 15px 17px;
}

.table-wrap {
  overflow: auto;
  border-color: #ccd7e2;
  border-radius: 5px;
}

table {
  font-variant-numeric: tabular-nums;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 13px;
  border-bottom-color: #becbd8;
  background: #eaf0f5;
  color: #475569;
}

td {
  padding: 13px;
}

tbody tr:nth-child(even) {
  background: #fbfcfd;
}

tbody tr:hover {
  background: #f2f6f9;
}

.admin-scan-panel,
.recommendation-quality-panel,
.investment-calendar-admin-panel,
.signup-approval-panel,
.market-calendar-panel,
.admin-backup-panel,
.admin-alert-panel,
.recommendation-evaluation-panel,
.deploy-check-panel {
  border-top-color: #334155 !important;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.deploy-check-item,
.backup-restore-panel,
.admin-alert-insights > div,
.weekly-quality-status,
.scan-note {
  border-color: #d6dfe8;
  border-radius: 5px;
  background: #f8fafc;
}

.positive,
.stock-up,
.profit,
.market-card .stock-up {
  color: var(--workspace-red) !important;
}

.negative,
.stock-down,
.loss,
.market-card .stock-down {
  color: var(--workspace-blue) !important;
}

.chip,
.signal-meta span,
.recommendation-rank,
.portfolio-priority-brief span {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
  .app {
    grid-template-columns: 214px minmax(0, 1fr);
  }

  .content {
    padding: 20px;
  }

  .market-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body {
    background: #eef2f6;
  }

  .app {
    display: block;
    padding-bottom: 70px;
  }

  .sidebar {
    display: none;
  }

  .content {
    gap: 12px;
    padding: 12px 12px 24px;
  }

  .tab-page {
    gap: 12px;
  }

  .topbar {
    min-height: auto;
    gap: 10px;
    padding: 7px 0 12px;
  }

  .topbar h1 {
    font-size: 23px;
  }

  .market-session-status {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
  }

  .refresh-panel {
    width: 100%;
    justify-content: stretch;
  }

  .refresh-panel > span {
    width: 100%;
  }

  .refresh-toggle {
    flex: 1 1 auto;
  }

  .panel,
  .market-band {
    padding: 14px;
    border-radius: 6px;
  }

  .panel {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.055);
  }

  .panel-head {
    align-items: flex-start;
    margin-bottom: 13px;
    padding-bottom: 12px;
  }

  .panel-head h2,
  .compact-panel h2 {
    font-size: 18px;
  }

  .panel-head .muted,
  .dashboard-focus-head .muted {
    font-size: 11px;
  }

  .market-band {
    gap: 16px;
    padding: 18px 15px;
  }

  .market-band h2 {
    font-size: 25px;
  }

  .market-band > div > p:not(.eyebrow) {
    font-size: 12px;
  }

  .market-card {
    min-height: 112px;
    padding: 13px;
  }

  .dashboard-focus-panel {
    padding: 16px;
  }

  .dashboard-focus-head h2 {
    font-size: 21px;
  }

  .dashboard-focus-card {
    min-height: 105px;
    padding: 13px;
  }

  .recommend-grid {
    gap: 12px;
  }

  .recommendation-item,
  .news-item,
  .portfolio-card,
  .signal-item,
  .watch-alert-card {
    padding: 13px;
  }

  .recommendation-card-head h3 {
    font-size: 17px;
  }

  .recommendation-price-row strong {
    font-size: 21px;
  }

  .portfolio-metrics > div,
  .status-grid > div,
  .stat-grid > div,
  .metric-grid > div,
  .summary-grid > div {
    min-height: 74px;
    padding: 11px;
  }

  .portfolio-metrics strong,
  .status-grid strong,
  .stat-grid strong,
  .metric-grid strong,
  .summary-grid strong {
    font-size: 16px;
  }

  .news-filter-bar,
  .sector-toolbar {
    padding: 8px;
  }

  .segmented-control,
  .today-signal-filter {
    width: 100%;
  }

  .segmented-control button,
  .today-signal-filter button {
    min-height: 40px;
  }

  .panel-actions {
    width: 100%;
    justify-content: stretch;
  }

  .panel-actions button {
    flex: 1 1 132px;
    min-height: 44px;
  }

  .table-wrap {
    margin-right: -2px;
    margin-left: -2px;
  }

  th,
  td {
    padding: 10px;
  }

  .mobile-bottom-nav {
    border-top: 1px solid #cbd5df;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.1);
  }

  .mobile-bottom-nav > button {
    min-height: 60px;
    border: 0;
    border-top: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    transform: none;
  }

  .mobile-bottom-nav > button.active {
    border-top-color: var(--workspace-teal);
    background: #f0fdfa;
    color: var(--workspace-teal);
  }
}

@media (max-width: 430px) {
  .content {
    padding-right: 10px;
    padding-left: 10px;
  }

  .panel,
  .market-band {
    padding: 13px;
  }

  .topbar h1 {
    font-size: 22px;
  }

  .market-band h2 {
    font-size: 23px;
  }

  .dashboard-focus-head h2 {
    font-size: 20px;
  }

  .recommendation-card-head,
  .portfolio-card-top {
    gap: 8px;
  }

  .recommendation-price-row strong {
    font-size: 20px;
  }

  button,
  button.secondary,
  input,
  select,
  textarea {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  .signal-item,
  .watch-alert-card,
  .portfolio-priority-card,
  .recommendation-item,
  .portfolio-card,
  .news-item,
  .sector-overview-row,
  .sector-flow-row,
  .calendar-event-card {
    transition: none;
  }
}
/* Operations, data-basis, and source-quality refinements */
.portfolio-data-basis {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.news-source-category {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #d6deea;
  border-radius: 999px;
  background: #f7f9fc;
  color: #526075;
  font-size: 11px;
  font-weight: 750;
}

.news-source-category.official {
  border-color: #a7dfd7;
  background: #ecfbf8;
  color: #08766c;
}

.news-dart-importance {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #b9ddd7;
  border-radius: 4px;
  background: #effaf8;
  color: #08766c;
  font-size: 11px;
  font-weight: 800;
}

.news-dart-importance.critical {
  border-color: #efc7a4;
  background: #fff7ed;
  color: #a34f05;
}

.news-dart-revision,
.news-user-priority {
  border-color: #f0b8b8 !important;
  background: #fff5f5 !important;
  color: #b42318 !important;
}

.news-dart-revision.corrected {
  border-color: #c7d2fe !important;
  background: #eef2ff !important;
  color: #4338ca !important;
}

.news-user-priority {
  border-color: #99d8cf !important;
  background: #effaf8 !important;
  color: #08766c !important;
}

.news-dart-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid #cddbd9;
  border-bottom: 1px solid #cddbd9;
  background: #f4faf9;
}

.news-dart-metrics > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
}

.news-dart-metrics > span + span {
  border-left: 1px solid #cddbd9;
}

.news-dart-metrics small,
.news-dart-metrics em {
  color: #64748b;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.news-dart-metrics strong {
  color: #0f172a;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.news-verification-feedback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid #94a3b8;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  line-height: 1.5;
}

.news-verification-feedback.good { border-left-color: #0f8f88; }
.news-verification-feedback.warn { border-left-color: #2563eb; }
.news-verification-feedback.wait { border-left-color: #d97706; }

.news-outcome-timeline,
.news-revision-history {
  display: grid;
  gap: 7px;
}

.news-outcome-timeline > strong,
.news-revision-history > strong {
  color: #334155;
  font-size: 11px;
}

.news-outcome-timeline > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #dbe3ec;
  background: #fff;
}

.news-outcome-timeline span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
}

.news-outcome-timeline span + span {
  border-left: 1px solid #dbe3ec;
}

.news-outcome-timeline small {
  color: #64748b;
  font-size: 9px;
}

.news-outcome-timeline b {
  color: #334155;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.news-outcome-timeline .matched b { color: #dc2626; }
.news-outcome-timeline .missed b { color: #2563eb; }
.news-outcome-timeline .pending b { color: #b7791f; }

.news-revision-history a {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-top: 1px solid #e1e7ee;
  color: #334155;
  font-size: 10px;
  text-decoration: none;
}

.news-revision-history a > span {
  color: #4338ca;
  font-weight: 900;
}

.news-revision-history a > small {
  color: #7c899a;
}

@media (max-width: 760px) {
  .news-dart-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-dart-metrics > span + span {
    border-top: 1px solid #cddbd9;
    border-left: 0;
  }

  .news-verification-feedback {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .news-outcome-timeline > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-outcome-timeline span:nth-child(odd) {
    border-left: 0;
  }

  .news-outcome-timeline span:nth-child(n + 3) {
    border-top: 1px solid #dbe3ec;
  }

  .news-revision-history a {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

.news-source-detail {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  color: #526075;
  font-size: 12px;
  line-height: 1.55;
}

.admin-operations-panel {
  border-top: 3px solid #0f8f88;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.admin-operations-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-operations-grid > div {
  min-height: 112px;
}

.admin-operations-issues {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #d9e1ec;
  border-radius: 6px;
  background: #f8fafc;
}

.admin-operations-issues > strong {
  font-size: 14px;
}

.admin-operations-issues > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-operations-issues span {
  padding: 7px 10px;
  border: 1px solid #f1c6c3;
  border-radius: 5px;
  background: #fff7f6;
  color: #b42318;
  font-size: 12px;
  font-weight: 700;
}

.admin-operations-issues p {
  margin: 0;
  color: #526075;
  font-size: 13px;
}

.admin-operations-issues .admin-operations-attention-list {
  display: grid;
  gap: 8px;
}

.admin-operations-attention-list article {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid #ecd9b9;
  border-left: 3px solid #d97706;
  border-radius: 5px;
  background: #fffdf8;
}

.admin-operations-attention-list article.danger {
  border-color: #f1c6c3;
  border-left-color: #dc3528;
  background: #fff8f7;
}

.admin-operations-attention-list article > span {
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: #fff2d9;
  color: #9a5a00;
  font-size: 11px;
  text-align: center;
}

.admin-operations-attention-list article.danger > span {
  background: #ffe8e5;
  color: #b42318;
}

.admin-operations-attention-list article > div {
  display: grid;
  gap: 4px;
}

.admin-operations-attention-list strong {
  color: #172033;
  font-size: 14px;
}

.admin-operations-attention-list p,
.admin-operations-attention-list small {
  color: #657187;
  font-size: 12px;
  line-height: 1.45;
}

.admin-operations-jobs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.admin-operations-jobs > div {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #d9e1ec;
  border-radius: 6px;
  background: #fff;
}

.admin-operations-jobs span,
.admin-operations-jobs small {
  color: #6b778c;
  font-size: 11px;
}

.admin-operations-jobs strong {
  color: #111827;
  font-size: 14px;
}

.admin-operations-incidents {
  margin-top: 14px;
  border: 1px solid #d9e1ec;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.admin-operations-incidents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5ebf3;
  background: #f8fafc;
}

.admin-operations-incidents-head div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-operations-incidents-head span,
.admin-operations-incidents-head small {
  color: #64748b;
  font-size: 12px;
}

.admin-operations-incidents-head strong {
  font-size: 14px;
}

.admin-operations-incident-list {
  display: grid;
}

.admin-operations-incident-list article {
  display: grid;
  grid-template-columns: 74px minmax(220px, 1fr) minmax(200px, auto);
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f6;
}

.admin-operations-incident-list article:last-child {
  border-bottom: 0;
}

.admin-operations-incident-list article > span {
  width: fit-content;
  padding: 4px 7px;
  border: 1px solid #c8eadf;
  border-radius: 4px;
  background: #effbf6;
  color: #08795f;
  font-size: 11px;
  font-weight: 800;
}

.admin-operations-incident-list article.active > span {
  border-color: #f3c5bd;
  background: #fff4f2;
  color: #c43223;
}

.admin-operations-incident-list article > div {
  display: grid;
  gap: 3px;
}

.admin-operations-incident-list article > div:last-child {
  text-align: right;
}

.admin-operations-incident-list strong,
.admin-operations-incident-list b {
  color: #172033;
  font-size: 13px;
}

.admin-operations-incident-list small {
  color: #68758a;
  font-size: 11px;
}

.admin-operations-incidents-empty {
  margin: 0;
  padding: 18px 16px;
  color: #68758a;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .admin-operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-operations-grid,
  .admin-operations-jobs {
    grid-template-columns: 1fr;
  }

  .admin-operations-issues {
    grid-template-columns: 1fr;
  }

  .admin-operations-attention-list article {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .admin-operations-incidents-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-operations-incident-list article {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .admin-operations-incident-list article > div:last-child {
    grid-column: 2;
    text-align: left;
  }

.news-source-category {
  min-height: 22px;
  padding: 2px 7px;
}
}

/* Keep the sidebar account controls visible on short desktop viewports. */
@media (min-width: 761px) {
  .sidebar {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .sidebar > div:first-child,
  .sidebar .user-box {
    flex: 0 0 auto;
  }

  .sidebar .nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-color: #34455c transparent;
    scrollbar-width: thin;
  }

  .sidebar .nav::-webkit-scrollbar {
    width: 5px;
  }

  .sidebar .nav::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #34455c;
  }

  .sidebar .user-box {
    margin-top: 0;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }
}

.data-freshness-banner {
  max-width: 760px;
  margin-top: 9px;
}

.data-freshness-banner details {
  border: 1px solid #d8e3ed;
  border-left: 3px solid #0f8f88;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.78);
}

/* Compact collapsible navigation groups. */
.nav-group {
  display: grid;
  min-width: 0;
}

.nav-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 2px;
}

.nav-group-row > button[data-tab] {
  width: 100%;
}

.nav button.nav-group-toggle {
  min-width: 30px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #718198;
}

.nav button.nav-group-toggle:hover {
  border: 0;
  background: #121f30;
  color: #e2e8f0;
  transform: none;
}

.nav-group-toggle span {
  display: block;
  font-size: 17px;
  line-height: 1;
  transition: transform 150ms ease;
}

.nav-group.collapsed .nav-group-toggle span {
  transform: rotate(-90deg);
}

.nav-group.collapsed .nav-subgroup {
  display: none;
}

.data-freshness-banner.review details {
  border-left-color: #b7791f;
}

.data-freshness-banner summary .data-trust-label {
  min-width: 82px;
  color: #0f766e;
}

.data-freshness-banner.warn summary .data-trust-label,
.data-freshness-banner.review summary .data-trust-label {
  color: #b45309;
}

.data-freshness-banner.waiting summary .data-trust-label {
  color: #64748b;
}

.data-freshness-items,
.data-quality-issues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.data-quality-issues {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

.data-quality-issues > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid #d97706;
  background: #fffaf0;
}

.data-quality-issues > span.danger {
  border-left-color: #dc2626;
  background: #fff5f5;
}

.data-quality-issues b,
.data-quality-issues em {
  overflow-wrap: anywhere;
  font-style: normal;
}

.data-quality-issues b {
  color: #334155;
  font-size: 12px;
}

.data-quality-issues em {
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.dashboard-news-priority-list {
  display: grid;
  margin-top: 10px;
  border-top: 1px solid #dce5ed;
}

.dashboard-news-priority-list a {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 3px;
  border-bottom: 1px solid #e5ebf1;
  color: #172033;
  text-decoration: none;
}

.dashboard-news-priority-list a:hover strong {
  color: #0f766e;
}

.dashboard-news-priority-list span {
  color: #526176;
  font-size: 11px;
  font-weight: 850;
}

.dashboard-news-priority-list a.filing span {
  color: #0f766e;
}

.dashboard-news-priority-list a.good span {
  color: #dc2626;
}

.dashboard-news-priority-list a.danger span {
  color: #2563eb;
}

.dashboard-news-priority-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.dashboard-news-priority-list small,
.dashboard-news-empty-note {
  color: #68758a;
  font-size: 11px;
}

.dashboard-news-empty-note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 920px) {
  .data-freshness-items,
  .data-quality-issues {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-news-priority-list a {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .dashboard-news-priority-list small {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .data-freshness-items,
  .data-quality-issues {
    grid-template-columns: 1fr;
  }

  .dashboard-news-priority-list a {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .dashboard-news-priority-list strong {
    white-space: normal;
  }

  .dashboard-news-priority-list small {
    grid-column: auto;
  }
}

.data-freshness-banner.warn details {
  border-left-color: #d97706;
  background: #fffbf3;
}

/* Keep the inline AI analysis readable inside its narrow split pane. */
.today-analysis-panel {
  container-type: inline-size;
  overflow-x: hidden;
}

@container (max-width: 760px) {
  .today-analysis-panel .analysis-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .today-analysis-panel .analysis-header > div:first-child {
    min-width: 0;
    padding-top: 0;
  }

  .today-analysis-panel .analysis-decision {
    width: 100%;
    min-width: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .today-analysis-panel .analysis-recovery-guide {
    grid-column: 1;
    grid-row: auto;
  }

  .today-analysis-panel .analysis-data-basis {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-analysis-panel .analysis-data-basis > div {
    display: grid;
    gap: 6px;
  }

  .today-analysis-panel .analysis-data-basis span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .today-analysis-panel .analysis-data-basis span + span {
    padding-top: 6px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .today-analysis-panel .analysis-position-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-analysis-panel .selected-analysis-insights {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "market"
      "validation"
      "calendar";
  }

  .today-analysis-panel .analysis-position-context > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .today-analysis-panel .analysis-chart-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .today-analysis-panel .analysis-chart-ma-controls {
    justify-content: flex-start;
  }
}

@container (max-width: 430px) {
  .today-analysis-panel .analysis-decision-head,
  .today-analysis-panel .analysis-decision-metrics,
  .today-analysis-panel .analysis-core-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-analysis-panel .analysis-decision-head b {
    white-space: normal;
  }
}

.data-freshness-banner summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  cursor: pointer;
  color: #526075;
  font-size: 12px;
  list-style: none;
}

.data-freshness-banner summary::-webkit-details-marker {
  display: none;
}

.data-freshness-banner summary b {
  color: #172033;
}

.data-freshness-banner details > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #e5ebf3;
  background: #e5ebf3;
}

.data-freshness-banner details > div > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 11px;
  background: #fff;
}

.data-freshness-banner details > div > span.stale {
  background: #fff9ef;
}

.data-freshness-banner details > div b {
  color: #223047;
  font-size: 12px;
}

.data-freshness-banner details > div em {
  overflow: hidden;
  color: #68758a;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-regime-performance {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #d9e1ec;
  border-top: 3px solid #172033;
  border-radius: 6px;
  background: #fff;
}

.market-regime-performance-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.market-regime-performance-head > div {
  display: grid;
  gap: 4px;
}

.market-regime-performance-head span,
.market-regime-performance-head small {
  color: #68758a;
  font-size: 11px;
}

.market-regime-performance-head strong {
  color: #111827;
  font-size: 18px;
}

.market-regime-performance-head em {
  padding: 5px 8px;
  border: 1px solid #cfe3df;
  border-radius: 4px;
  background: #f0faf8;
  color: #08766c;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.market-regime-performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.market-regime-performance-grid article {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #dce4ed;
  border-left: 3px solid #94a3b8;
  border-radius: 5px;
  background: #fbfcfe;
}

.market-regime-performance-grid article.good,
.market-regime-performance-grid article.positive {
  border-left-color: #0f8f88;
}

.market-regime-performance-grid article.warn,
.market-regime-performance-grid article.danger {
  border-left-color: #e24b3b;
}

.market-regime-performance-grid article > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.market-regime-performance-grid article span {
  color: #526075;
  font-size: 12px;
  font-weight: 750;
}

.market-regime-performance-grid article strong {
  color: #111827;
  font-size: 20px;
}

.market-regime-performance-grid dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.market-regime-performance-grid dl > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.market-regime-performance-grid dt,
.market-regime-performance-grid dd {
  margin: 0;
  color: #68758a;
  font-size: 11px;
}

.market-regime-performance-grid dd {
  color: #26354c;
  font-weight: 700;
  text-align: right;
}

.regime-reliability {
  width: fit-content;
  padding: 4px 7px;
  border: 1px solid #d9e1ec;
  border-radius: 4px;
  color: #68758a;
  font-size: 11px;
}

.regime-reliability.eligible {
  border-color: #bce1d8;
  background: #f0faf8;
  color: #08766c;
  font-weight: 800;
}

@media (max-width: 900px) {
  .data-freshness-banner details > div,
  .market-regime-performance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .data-freshness-banner {
    max-width: none;
  }

  .data-freshness-banner summary,
  .market-regime-performance-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .market-regime-performance {
    padding: 14px;
  }
}

.data-freshness-banner details > .data-freshness-items {
  gap: 1px;
}

.data-freshness-banner details > .data-quality-issues {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
  background: transparent;
}

.data-freshness-banner details > .data-quality-issues > span {
  padding: 8px 10px;
  border-left: 3px solid #d97706;
  background: #fffaf0;
}

.data-freshness-banner details > .data-quality-issues > span.danger {
  border-left-color: #dc2626;
  background: #fff5f5;
}

.data-freshness-banner details > .data-quality-issues em {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 900px) {
  .data-freshness-banner details > .data-quality-issues {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .evaluation-policy-comparison {
    padding: 14px;
  }

  .evaluation-policy-head {
    display: grid;
  }

  .evaluation-policy-head > em {
    justify-self: start;
  }

  .evaluation-policy-grid {
    grid-template-columns: 1fr;
  }

  .evaluation-policy-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .evaluation-policy-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .evaluation-policy-metrics {
    grid-template-columns: 1fr;
  }
}

/* Admin console: clearer navigation and a consistent operations workspace. */
#adminNavWrapper {
  position: relative;
  margin-top: 12px;
  padding-top: 29px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

#adminNavWrapper::before {
  content: "ADMIN CONTROL";
  position: absolute;
  top: 10px;
  left: 14px;
  color: #5eead4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}

#adminNavWrapper .nav-group-row {
  padding: 3px;
  border: 1px solid #2a3b52;
  border-radius: 5px;
  background: #111d2d;
}

#adminNavWrapper .nav-group-row > button[data-tab] {
  min-height: 39px;
  border-left-color: transparent;
  color: #dbe5f1;
  font-weight: 800;
}

#adminNavWrapper .nav-group-row > button[data-tab].active,
#adminNavWrapper .nav-group-row > button[data-tab].parent-active {
  border-left-color: #2dd4bf;
  background: #1b2b40;
}

.nav #adminNavGroup {
  gap: 3px;
  margin: 7px 0 0;
  padding: 5px 0 1px;
  border-left: 0;
}

.nav #adminNavGroup button.nav-sub {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 39px;
  padding: 0 10px 0 29px;
  border: 1px solid transparent;
  border-left: 2px solid #314158;
  border-radius: 3px;
  color: #a9b6c8;
  text-align: left;
}

.nav #adminNavGroup button.nav-sub::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #53647a;
  transform: translateY(-50%);
}

.nav #adminNavGroup button.nav-sub span {
  grid-column: 1;
  grid-row: 1;
}

.nav #adminNavGroup button.nav-sub small {
  grid-column: 2;
  grid-row: 1;
  padding: 3px 5px;
  border: 1px solid #35465c;
  border-radius: 3px;
  color: #75869b;
  font-size: 9px;
  font-weight: 800;
}

.nav #adminNavGroup button.nav-sub:hover,
.nav #adminNavGroup button.nav-sub.active {
  border-color: #30445d;
  border-left-color: #2dd4bf;
  background: #142338;
  color: #f8fafc;
}

.nav #adminNavGroup button.nav-sub.active::before {
  background: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

.nav #adminNavGroup button.nav-sub.active small {
  border-color: #276d68;
  background: #173c3b;
  color: #99f6e4;
}

body.admin-context .topbar {
  border-top: 3px solid #0f8f88;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

body.admin-context .topbar h1 {
  color: #101827;
}

.admin-console-page {
  gap: 14px;
}

.admin-page-intro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 116px;
  padding: 24px 28px;
  overflow: hidden;
  border: 1px solid #26374e;
  border-top: 3px solid #2dd4bf;
  border-radius: 6px;
  background: #111c2d;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  color: #f8fafc;
}

.admin-page-intro::after {
  content: "";
  position: absolute;
  right: 86px;
  bottom: -58px;
  width: 190px;
  height: 120px;
  border: 1px solid rgba(94, 234, 212, 0.16);
  transform: skewX(-22deg);
}

.admin-page-intro > div {
  position: relative;
  z-index: 1;
}

.admin-page-intro span {
  display: block;
  margin-bottom: 7px;
  color: #5eead4;
  font-size: 10px;
  font-weight: 900;
}

.admin-page-intro h2 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.2;
}

.admin-page-intro p {
  margin: 8px 0 0;
  color: #aab8ca;
  font-size: 13px;
  line-height: 1.5;
}

.admin-page-intro > strong {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid #385069;
  border-radius: 4px;
  background: #17263b;
  color: #dce7f4;
  font-size: 11px;
}

.admin-console-page > .panel {
  margin: 0;
  padding: 22px 24px 24px;
  border: 1px solid #d4dde7;
  border-top: 1px solid #d4dde7 !important;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
}

.admin-console-page > .panel > .panel-head {
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid #dbe3ec;
}

.admin-console-page > .panel > .panel-head h2 {
  font-size: 19px;
}

.admin-console-page > .panel > .panel-head h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 17px;
  margin-right: 9px;
  border-radius: 1px;
  background: #0f8f88;
  vertical-align: -2px;
}

.admin-console-page .panel-actions button,
.admin-console-page .panel-head > button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 4px;
  font-size: 12px;
}

.admin-console-page .stat-grid {
  gap: 8px;
}

.admin-console-page .stat-grid > div {
  min-width: 0;
  padding: 14px;
  border-color: #d7e0e9;
  border-radius: 4px;
  background: #f8fafc;
  box-shadow: none;
}

.admin-console-page .stat-grid strong {
  font-size: 18px;
}

.admin-console-page .table-wrap {
  border-color: #d4dde7;
  border-radius: 4px;
  box-shadow: none;
}

.admin-console-page th {
  padding: 11px 12px;
  background: #eef3f7;
  color: #536276;
  font-size: 11px;
}

.admin-console-page td {
  padding: 12px;
  font-size: 12px;
}

.admin-user-panel,
.signup-approval-panel,
.admin-api-panel {
  border-left: 3px solid #0f8f88 !important;
}

.admin-user-panel .portfolio-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto auto;
  gap: 8px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #d8e1ea;
  border-radius: 5px;
  background: #f7f9fc;
}

.admin-user-panel .portfolio-form input,
.admin-user-panel .portfolio-form select {
  min-width: 0;
  height: 38px;
  background: #ffffff;
}

.admin-api-panel .status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-api-panel .status-grid > div {
  min-height: 94px;
  border-radius: 4px;
  background: #f8fafc;
}

.admin-operations-panel {
  border-left: 3px solid #334155 !important;
  background: #ffffff;
}

.market-calendar-panel {
  border-left: 3px solid #64748b !important;
}

.admin-settings-panel {
  border-left: 3px solid #d97706 !important;
}

.admin-settings-panel .settings-form {
  gap: 10px;
}

.admin-settings-panel .settings-section {
  border-color: #d8e1ea;
  border-radius: 5px;
  background: #f8fafc;
}

.admin-alert-insights {
  gap: 8px;
}

.admin-alert-insights > div {
  padding: 14px;
  border-radius: 4px;
  background: #f8fafc;
}

.deploy-check-list,
.weekly-quality-scans,
.calendar-admin-logs {
  gap: 8px;
}

@media (max-width: 1280px) {
  .admin-user-panel .portfolio-form {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }

  .admin-user-panel .portfolio-form button {
    min-height: 38px;
  }
}

@media (max-width: 900px) {
  .admin-page-intro {
    min-height: 104px;
    padding: 20px;
  }

  .admin-api-panel .status-grid,
  .admin-user-panel .portfolio-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-console-page {
    gap: 10px;
  }

  .admin-page-intro {
    align-items: flex-start;
    min-height: 0;
    padding: 18px;
  }

  .admin-page-intro::after {
    display: none;
  }

  .admin-page-intro h2 {
    font-size: 21px;
  }

  .admin-page-intro p {
    font-size: 12px;
  }

  .admin-page-intro > strong {
    padding: 6px 8px;
    font-size: 10px;
  }

  .admin-console-page > .panel {
    padding: 16px;
  }

  .admin-console-page > .panel > .panel-head {
    gap: 12px;
  }

  .admin-console-page .panel-actions {
    justify-content: flex-start;
  }

  .admin-user-panel .portfolio-form,
  .admin-api-panel .status-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-panel .portfolio-form button {
    width: 100%;
  }
}

/* Workspace visual hierarchy: dashboard, signals, watchlist, news, portfolio */
.workspace-kicker {
  margin: 0 0 5px;
  color: #0f8f88;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.today-panel > .panel-head,
.news-panel > .panel-head,
.portfolio-workspace-panel > .panel-head,
.watch-manager-panel > .panel-head {
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid #dbe3ec;
}

.today-panel > .panel-head h2,
.news-panel > .panel-head h2,
.portfolio-workspace-panel > .panel-head h2,
.watch-manager-panel > .panel-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.25;
}

/* Dashboard */
#dashboardTab {
  gap: 16px;
}

#dashboardTab .market-band {
  min-width: 0;
  border-top: 3px solid #0f8f88;
  background: #111c2d;
  color: #ffffff;
}

#dashboardTab .market-band::before {
  display: none;
}

#dashboardTab .market-band h2 {
  color: #ffffff;
}

#dashboardTab .market-band > div > p:not(.eyebrow) {
  color: #aab8ca;
}

#dashboardTab .market-mood-summary {
  border-color: #33455a;
  background: #1a283a;
  box-shadow: none;
}

#dashboardTab .market-mood-summary span,
#dashboardTab .market-mood-summary small,
#dashboardTab .market-mood-summary em {
  color: #aab8ca;
}

#dashboardTab .market-mood-summary strong {
  color: #ffffff;
}

#dashboardTab .market-overview-grid {
  min-width: 0;
}

#dashboardTab .market-card {
  min-width: 0;
  min-height: 126px;
  padding: 15px;
  border-color: #d4dde7;
  border-top: 3px solid #26c6b8;
  background: #ffffff;
}

#dashboardTab .market-card strong {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.dashboard-focus-panel,
.dashboard-sector-brief-panel,
.dashboard-priority-panel,
.dashboard-secondary-panel {
  border-radius: 6px;
}

.dashboard-focus-panel {
  border-top: 3px solid #0f8f88 !important;
  background: #ffffff;
}

.dashboard-focus-list {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
}

.dashboard-focus-card {
  min-width: 0;
  min-height: 126px;
  border-radius: 5px;
}

.recommend-grid {
  align-items: stretch;
}

.dashboard-priority-panel > .panel-head h2,
.dashboard-secondary-panel > .panel-head h2 {
  font-size: 18px;
}

/* AI signals: keep the list wide until an analysis is requested */
.today-signal-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
}

.today-signal-filter button {
  min-width: 0;
}

.today-technical-panel,
.signal-guide-panel {
  margin-bottom: 10px;
}

.today-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px;
}

.today-workspace .today-analysis-panel.is-empty {
  display: none;
}

.today-workspace.analysis-open {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
}

.today-workspace.analysis-open .today-analysis-panel {
  display: block;
}

.recommendation-group-head {
  padding: 12px 14px;
  border-radius: 5px;
  background: #111c2d;
  color: #ffffff;
}

.recommendation-group-head strong,
.recommendation-group-head span,
.recommendation-group-head small {
  color: inherit;
}

.recommendation-item {
  border-radius: 5px;
  padding: 17px;
}

.today-analysis-panel {
  top: 12px;
  border-radius: 5px;
  border-top: 3px solid #0f8f88;
}

.today-analysis-panel .analysis-toolbar {
  position: sticky;
  top: -18px;
  z-index: 4;
  margin: -18px -18px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #d7e0e9;
  background: rgba(255, 255, 255, 0.97);
}

/* Watchlist: management first, selected analysis second */
.watch-workspace.manager-only {
  grid-template-columns: minmax(0, 1fr);
}

.watch-workspace.manager-only .watch-analysis-panel {
  display: none;
}

.watch-workspace.manager-only #watchlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.watch-workspace.manager-only #watchlist > .item {
  min-width: 0;
  margin: 0;
  padding: 15px;
  border: 1px solid #d6dfe8;
  border-left: 4px solid #0f8f88;
  border-radius: 5px;
  background: #ffffff;
}

.watch-manager-panel .stock-search-form {
  max-width: 720px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #d7e0e9;
  border-radius: 5px;
  background: #f6f8fb;
}

.watch-analysis-panel {
  min-width: 0;
  border-top: 3px solid #0f8f88;
}

.watch-workspace.analysis-focus .watch-analysis-panel {
  max-width: 1180px;
  margin: 0 auto;
}

/* Portfolio */
.portfolio-workspace-panel {
  border-top: 3px solid #0f8f88 !important;
}

.portfolio-workspace-panel > .panel-head {
  gap: 18px;
}

.portfolio-workspace-panel .summary-pill {
  max-width: 520px;
  padding: 11px 14px;
  border-left: 4px solid #0f8f88;
  border-radius: 5px;
  background: #f7fafc;
  line-height: 1.4;
}

.portfolio-workspace-panel .portfolio-form {
  margin-bottom: 14px;
  padding: 13px;
  border-radius: 5px;
  background: #f4f7fa;
}

.portfolio-workspace-panel .portfolio-metrics {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}

.portfolio-workspace-panel .portfolio-metrics > .metric-primary {
  grid-column: span 4;
  min-height: 92px;
  border-top-color: #0f8f88;
  background: #ffffff;
}

.portfolio-workspace-panel .portfolio-metrics > .metric-secondary {
  grid-column: span 3;
  min-height: 78px;
  background: #f7f9fc;
}

.portfolio-workspace-panel .portfolio-metrics > .metric-primary strong {
  font-size: 20px;
}

.portfolio-card-list {
  gap: 10px;
}

.portfolio-card {
  border-radius: 5px;
  padding: 17px;
}

.portfolio-card-top h3 {
  font-size: 19px;
}

/* News */
.news-panel {
  border-top: 3px solid #0f8f88 !important;
}

.news-filter-bar {
  display: grid;
  grid-template-columns: auto auto minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-radius: 5px;
  background: #f3f6f9;
}

#newsSortSelect {
  justify-self: end;
  min-width: 175px;
  background: #ffffff;
}

.news-coverage-summary {
  padding: 12px;
  border: 1px solid #d7e0e9;
  border-radius: 5px;
  background: #f8fafc;
}

.news-coverage-card {
  border-radius: 5px;
  background: #ffffff;
}

.news-item {
  grid-template-columns: minmax(0, 1fr) 92px;
  padding: 17px 18px;
  border-radius: 5px;
}

.news-main > a {
  display: inline-block;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.4;
}

.news-score {
  padding-left: 12px;
  border-left: 1px solid #e0e7ee;
}

/* Prevent dense workspaces from clipping at common desktop widths */
@media (max-width: 1420px) {
  #dashboardTab .market-band {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  #dashboardTab .market-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-workspace-panel .portfolio-metrics > .metric-primary,
  .portfolio-workspace-panel .portfolio-metrics > .metric-secondary {
    grid-column: span 6;
  }
}

@media (max-width: 1180px) {
  .recommend-grid,
  .today-workspace.analysis-open {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .today-analysis-panel {
    position: static;
    max-height: none;
  }

  .watch-workspace.manager-only #watchlist {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  #newsSortSelect {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .workspace-kicker {
    font-size: 9px;
  }

  .today-panel > .panel-head h2,
  .news-panel > .panel-head h2,
  .portfolio-workspace-panel > .panel-head h2,
  .watch-manager-panel > .panel-head h2 {
    font-size: 19px;
  }

  #dashboardTab .market-overview-grid,
  .news-filter-bar,
  .watch-workspace.manager-only #watchlist {
    grid-template-columns: minmax(0, 1fr);
  }

  #dashboardTab .market-card {
    min-height: 104px;
  }

  .dashboard-focus-list,
  .recommend-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-signal-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-workspace.analysis-open {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .today-analysis-panel .analysis-toolbar {
    top: -14px;
    margin: -14px -14px 12px;
  }

  .portfolio-workspace-panel > .panel-head {
    display: grid;
  }

  .portfolio-workspace-panel .summary-pill {
    width: 100%;
    max-width: none;
  }

  .portfolio-workspace-panel .portfolio-metrics > .metric-primary,
  .portfolio-workspace-panel .portfolio-metrics > .metric-secondary {
    grid-column: span 6;
    min-height: 76px;
  }

  .portfolio-workspace-panel .portfolio-metrics > .metric-primary strong {
    font-size: 17px;
  }

  .news-filter-bar .segmented-control,
  #newsSortSelect {
    grid-column: 1;
  }

  .news-item {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .news-score {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    justify-items: start;
    padding: 10px 0 0;
    border-top: 1px solid #e0e7ee;
    border-left: 0;
  }
}

@media (max-width: 430px) {
  .portfolio-workspace-panel .portfolio-metrics > .metric-primary,
  .portfolio-workspace-panel .portfolio-metrics > .metric-secondary {
    grid-column: 1 / -1;
  }

  .today-signal-filter button {
    min-height: 42px;
  }
}

/* Sidebar navigation: clearer product, section and active-state hierarchy */
@media (min-width: 761px) {
  .sidebar {
    padding: 20px 14px 14px;
    background: #0b1524;
  }

  .sidebar > .sidebar-brand {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin: 0 4px 13px;
    padding: 0 5px 17px;
    border-bottom: 1px solid #243349;
  }

  .sidebar-brand-token {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #2a6e69;
    border-radius: 5px;
    background: #123635;
    color: #5eead4;
    font-size: 14px;
    font-weight: 900;
  }

  .sidebar-brand > div {
    min-width: 0;
  }

  .sidebar .sidebar-brand .eyebrow {
    margin: 0 0 3px;
    color: #5eead4;
    font-size: 8px;
    line-height: 1.2;
  }

  .sidebar .sidebar-brand h2 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.15;
  }

  .sidebar-brand small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #718198;
    font-size: 8px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar .nav {
    display: block;
    padding: 0 3px 14px 0;
  }

  .nav-section-label {
    display: block;
    margin: 14px 10px 6px;
    color: #62738a;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
  }

  .nav-section-label:first-child {
    margin-top: 2px;
  }

  .nav > button[data-tab],
  .nav-group-row > button[data-tab] {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-left: 0;
    border-radius: 4px;
    background: transparent;
    color: #a8b5c6;
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    box-shadow: inset 0 0 0 transparent;
  }

  .nav > button[data-tab]:hover,
  .nav-group-row > button[data-tab]:hover {
    border-color: #26384f;
    background: #111f31;
    color: #f1f5f9;
    transform: none;
  }

  .nav > button[data-tab].active,
  .nav > button[data-tab].parent-active,
  .nav-group-row > button[data-tab].active,
  .nav-group-row > button[data-tab].parent-active {
    border-color: #2d4158;
    background: #18283b;
    color: #ffffff;
    box-shadow: inset 3px 0 0 #2dd4bf;
  }

  .nav-group {
    margin-bottom: 3px;
  }

  .nav-group-row {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 2px;
  }

  .nav button.nav-group-toggle {
    min-width: 34px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .nav button.nav-group-toggle:hover {
    border-color: #26384f;
    background: #111f31;
  }

  .nav-group-toggle span {
    color: #718198;
    font-size: 15px;
  }

  .nav-subgroup {
    gap: 2px;
    margin: 4px 0 8px 18px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid #304158;
  }

  .nav button.nav-sub {
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #7f8da1;
    font-size: 11px;
    text-align: left;
  }

  .nav button.nav-sub:hover,
  .nav button.nav-sub.active,
  .nav button.nav-sub.parent-active {
    border: 0;
    background: #111f31;
    color: #dce7f4;
    transform: none;
  }

  .nav button.nav-sub.active {
    color: #5eead4;
    box-shadow: inset 2px 0 0 #2dd4bf;
  }

  #adminNavWrapper {
    margin-top: 15px;
    padding-top: 30px;
  }

  #adminNavWrapper .nav-group-row {
    padding: 2px;
  }

  .nav #adminNavGroup button.nav-sub::before {
    top: 9px;
    bottom: 9px;
    left: 12px;
    width: 2px;
    height: auto;
    border-radius: 1px;
    background: #41536a;
    transform: none;
  }

  .nav #adminNavGroup button.nav-sub.active::before {
    background: #2dd4bf;
    box-shadow: none;
  }

  .sidebar .user-box {
    margin: 0 4px;
    padding: 12px 5px 0;
    border-top: 1px solid #243349;
  }

  .sidebar .user-box strong {
    color: #e5edf6;
    font-size: 12px;
  }

  .sidebar .user-box span {
    color: #718198;
    font-size: 10px;
  }

  .sidebar .user-box button.secondary {
    min-height: 36px;
    border-color: #304158;
    background: #111f31;
    color: #d8e2ee;
  }
}

/* Sidebar v2: quiet, larger and closer to a professional market terminal. */
@media (min-width: 761px) {
  .app {
    grid-template-columns: 252px minmax(0, 1fr);
  }

  .sidebar {
    padding: 24px 16px 15px;
    border-right-color: #25364b;
    background: #0a1422;
  }

  .sidebar > .sidebar-brand {
    display: block;
    margin: 0 5px 18px;
    padding: 1px 5px 20px 14px;
    border-bottom: 1px solid #26364b;
    border-left: 3px solid #2dd4bf;
  }

  .sidebar .sidebar-brand .eyebrow {
    margin: 0 0 7px;
    color: #5eead4;
    font-size: 10px;
    font-weight: 900;
  }

  .sidebar .sidebar-brand h2 {
    color: #f8fafc;
    font-size: 19px;
    line-height: 1.25;
  }

  .sidebar-brand small {
    margin-top: 7px;
    color: #667890;
    font-size: 9px;
  }

  .sidebar-brand-token,
  .nav-section-label {
    display: none;
  }

  .sidebar .nav {
    padding-top: 0;
  }

  .nav > button[data-tab],
  .nav-group-row > button[data-tab],
  .nav-standalone > button[data-tab] {
    width: 100%;
    min-height: 45px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #aab7c8;
    font-size: 13px;
    font-weight: 800;
    box-shadow: none;
  }

  .nav > button[data-tab]:hover,
  .nav-group-row > button[data-tab]:hover,
  .nav-standalone > button[data-tab]:hover {
    border-color: #2b3d54;
    background: #111f31;
    color: #f8fafc;
  }

  .nav > button[data-tab].active,
  .nav > button[data-tab].parent-active,
  .nav-group-row > button[data-tab].active,
  .nav-group-row > button[data-tab].parent-active,
  .nav-standalone > button[data-tab].active,
  .nav-standalone > button[data-tab].parent-active {
    border-color: #344961;
    background: #17283d;
    color: #ffffff;
    box-shadow: inset 3px 0 0 #2dd4bf;
  }

  .nav > button[data-tab] + .nav-group,
  .nav-group + .nav-group {
    margin-top: 5px;
  }

  .nav-group-row {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 3px;
  }

  .nav button.nav-group-toggle {
    min-width: 38px;
    min-height: 45px;
  }

  .nav-subgroup {
    gap: 2px;
    margin: 4px 2px 8px 12px;
    padding: 5px 5px 5px 10px;
    border: 0;
    border-left: 1px solid #354860;
    border-radius: 0 4px 4px 0;
    background: #0d1929;
  }

  .nav button.nav-sub {
    min-height: 37px;
    padding: 0 12px;
    color: #8291a5;
    font-size: 12px;
    font-weight: 750;
  }

  .nav button.nav-sub:hover,
  .nav button.nav-sub.active,
  .nav button.nav-sub.parent-active {
    background: #142338;
    color: #e7eef7;
  }

  .nav button.nav-sub.active {
    color: #5eead4;
    box-shadow: inset 2px 0 0 #2dd4bf;
  }

  .nav-standalone {
    display: grid;
    gap: 3px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #26364b;
  }

  #adminNavWrapper {
    margin-top: 14px;
    padding-top: 30px;
  }

  #adminNavWrapper::before {
    left: 12px;
    color: #718198;
    font-size: 9px;
  }

  #adminNavWrapper .nav-group-row {
    padding: 0;
    border-color: #2a3d54;
    background: #0e1b2b;
  }

  .sidebar .user-box {
    padding-top: 13px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .app {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .sidebar {
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* Sidebar v3: a restrained workspace rail with one clear navigation rhythm. */
@media (min-width: 761px) {
  .app {
    grid-template-columns: 258px minmax(0, 1fr);
  }

  .sidebar {
    padding: 26px 18px 16px;
    border-right: 1px solid #24354a;
    background: #0b1523;
  }

  .sidebar > .sidebar-brand {
    position: relative;
    margin: 0 4px 21px;
    padding: 0 4px 20px 17px;
    border: 0;
    border-bottom: 1px solid #24354a;
  }

  .sidebar > .sidebar-brand::before {
    position: absolute;
    top: 2px;
    bottom: 21px;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: #2dd4bf;
    content: "";
  }

  .sidebar .sidebar-brand .eyebrow {
    margin: 0 0 6px;
    color: #5eead4;
    font-size: 10px;
    font-weight: 900;
  }

  .sidebar .sidebar-brand h2 {
    color: #f8fafc;
    font-size: 22px;
    line-height: 1.2;
  }

  .sidebar-brand small {
    margin-top: 6px;
    color: #73849a;
    font-size: 9px;
    font-weight: 800;
  }

  .sidebar .nav {
    padding: 0 2px 18px 0;
  }

  .nav > button[data-tab],
  .nav-group-row > button[data-tab],
  .nav-standalone > button[data-tab] {
    min-height: 46px;
    padding: 0 15px;
    border: 0;
    border-radius: 5px;
    color: #aebacc;
    font-size: 14px;
    font-weight: 800;
  }

  .nav > button[data-tab]:hover,
  .nav-group-row > button[data-tab]:hover,
  .nav-standalone > button[data-tab]:hover {
    border: 0;
    background: #132238;
    color: #f8fafc;
  }

  .nav > button[data-tab].active,
  .nav > button[data-tab].parent-active,
  .nav-group-row > button[data-tab].active,
  .nav-group-row > button[data-tab].parent-active,
  .nav-standalone > button[data-tab].active,
  .nav-standalone > button[data-tab].parent-active {
    border: 0;
    background: #192a40;
    color: #ffffff;
    box-shadow: inset 3px 0 0 #2dd4bf;
  }

  .nav-group {
    margin-bottom: 4px;
  }

  .nav-group-row {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 0;
  }

  .nav button.nav-group-toggle {
    min-width: 36px;
    min-height: 46px;
    border: 0;
    background: transparent;
  }

  .nav button.nav-group-toggle:hover {
    border: 0;
    background: #132238;
  }

  .nav-group-toggle span {
    color: #71839a;
    font-size: 16px;
  }

  .nav-subgroup {
    gap: 0;
    margin: 1px 0 8px 17px;
    padding: 3px 0 3px 12px;
    border: 0;
    border-left: 1px solid #33465e;
    border-radius: 0;
    background: transparent;
  }

  .nav button.nav-sub {
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #8292a8;
    font-size: 12px;
    font-weight: 750;
  }

  .nav button.nav-sub:hover,
  .nav button.nav-sub.active,
  .nav button.nav-sub.parent-active {
    border: 0;
    background: #111f32;
    color: #e7eef7;
  }

  .nav button.nav-sub.active {
    color: #5eead4;
    box-shadow: none;
  }

  .nav-standalone {
    gap: 2px;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #24354a;
  }

  #adminNavWrapper {
    margin-top: 15px;
    padding-top: 29px;
    border-top-color: #24354a;
  }

  #adminNavWrapper::before {
    top: 10px;
    left: 14px;
    color: #72839a;
    font-size: 10px;
    font-weight: 900;
  }

  #adminNavWrapper .nav-group-row {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .nav #adminNavGroup button.nav-sub {
    padding-left: 12px;
  }

  .nav #adminNavGroup button.nav-sub::before {
    display: none;
  }

  .nav #adminNavGroup button.nav-sub small {
    margin-left: auto;
    color: #657991;
    font-size: 9px;
  }

  .sidebar .user-box {
    margin: 0 4px;
    padding: 15px 5px 0;
    border-top-color: #24354a;
  }

  .sidebar .user-box button.secondary {
    min-height: 38px;
    border-color: #30435a;
    background: #101e31;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .app {
    grid-template-columns: 226px minmax(0, 1fr);
  }

  .sidebar {
    padding-right: 13px;
    padding-left: 13px;
  }

  .nav > button[data-tab],
  .nav-group-row > button[data-tab],
  .nav-standalone > button[data-tab] {
    font-size: 13px;
  }
}
.user-capability-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
}

.user-box .capability-button {
  width: 100%;
  min-height: 34px;
  border-color: rgba(94, 234, 212, 0.22);
  color: #b8c7da;
  background: rgba(17, 31, 50, 0.78);
}

.user-box .capability-button.is-enabled {
  border-color: rgba(45, 212, 191, 0.46);
  color: #5eead4;
  background: rgba(13, 148, 136, 0.12);
}

.mobile-more-grid [data-notification-toggle].is-enabled {
  border-color: rgba(13, 148, 136, 0.42);
  color: #0f766e;
  background: #ecfdf5;
}

.app-update-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1400;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(520px, calc(100vw - 48px));
  padding: 16px 18px;
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 8px;
  background: #0f1c2e;
  color: #f8fafc;
  box-shadow: 0 18px 44px rgba(2, 8, 23, 0.3);
}

.app-update-banner > div {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

.app-update-banner strong {
  font-size: 15px;
}

.app-update-banner span {
  color: #a9b8ca;
  font-size: 12px;
  line-height: 1.5;
}

.app-update-banner button {
  flex: 0 0 auto;
  border-color: #2dd4bf;
  background: #2dd4bf;
  color: #082f35;
  font-weight: 800;
}

.diagnostics-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 23, 0.58);
  backdrop-filter: blur(5px);
}

.diagnostics-dialog {
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 24px;
  border: 1px solid #cbd7e5;
  border-top: 3px solid #0f766e;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
}

.diagnostics-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d8e1ec;
}

.diagnostics-dialog > header h2 {
  margin: 5px 0 4px;
  font-size: 23px;
}

.diagnostics-dialog > header p {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}

.notification-diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 12px;
}

.notification-diagnostics-grid > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid #d8e1ec;
  border-top: 3px solid #94a3b8;
  border-radius: 6px;
  background: #f8fafc;
}

.notification-diagnostics-grid > div.good { border-top-color: #0f9f8f; }
.notification-diagnostics-grid > div.warn { border-top-color: #d97706; }
.notification-diagnostics-grid > div.danger { border-top-color: #dc2626; }

.notification-diagnostics-grid span,
.notification-diagnostics-grid small {
  color: #64748b;
  font-size: 12px;
}

.notification-diagnostics-grid strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.notification-diagnostics-hint {
  padding: 13px 14px;
  border-left: 3px solid #d97706;
  border-radius: 4px;
  background: #fff7ed;
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.55;
}

.notification-diagnostics-hint.good {
  border-color: #0f9f8f;
  background: #ecfdf5;
  color: #065f46;
}

.notification-diagnostics-hint.danger {
  border-color: #dc2626;
  background: #fef2f2;
  color: #991b1b;
}

.diagnostics-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.backup-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 190px;
}

.backup-download-btn {
  border-color: #99f6e4;
  color: #0f766e;
  background: #f0fdfa;
}

@media (max-width: 720px) {
  .app-update-banner {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .app-update-banner button {
    width: 100%;
  }

  .diagnostics-modal {
    align-items: end;
    padding: 0;
  }

  .diagnostics-dialog {
    width: 100%;
    max-height: 88vh;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .notification-diagnostics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sidebar .user-capability-actions {
    display: none;
  }
}

@media (min-width: 901px) {
  .sidebar .user-box {
    gap: 3px;
    padding-top: 10px;
  }

  .sidebar .user-capability-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 4px;
  }

  .sidebar .user-capability-actions .notification-toggle-button {
    grid-column: 1 / -1;
  }

  .sidebar .user-box .capability-button,
  .sidebar .user-box button.secondary.capability-button {
    min-height: 31px;
    margin-top: 0;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.2;
  }

  .sidebar .user-box #logoutBtn {
    min-height: 31px;
    margin-top: 3px;
    padding: 0 10px;
    font-size: 11px;
  }
}

.login-remember-option {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d8e2ee;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
}

.login-remember-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0f766e;
}

.login-remember-option span {
  display: grid;
  gap: 2px;
}

.login-remember-option strong {
  color: #172033;
  font-size: 13px;
}

.login-remember-option small {
  color: #64748b;
  font-size: 11px;
}

.session-expiry-status {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.5;
}

.session-expiry-status.warn {
  color: #fbbf24;
}

.user-session-link {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #75e6d5;
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.user-session-link:hover {
  color: #ccfbf1;
  background: transparent;
}

.offline-data-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 780px;
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid #f2c879;
  border-left: 4px solid #d97706;
  border-radius: 6px;
  background: #fff9ed;
  color: #7c3f08;
}

.offline-data-banner > div {
  display: grid;
  gap: 2px;
}

.offline-data-banner strong {
  color: #9a4d07;
  font-size: 13px;
}

.offline-data-banner span {
  font-size: 12px;
  line-height: 1.45;
}

.offline-data-banner button {
  flex: 0 0 auto;
  min-height: 32px;
  white-space: nowrap;
}

.offline-mode .refresh-panel {
  opacity: 0.55;
}

.push-preferences-form {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #d8e1ec;
  border-radius: 6px;
  background: #f8fafc;
}

.push-preferences-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.push-preferences-heading > div,
.push-preference-toggle span {
  display: grid;
  gap: 2px;
}

.push-preferences-heading small,
.push-preference-toggle small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
}

.push-preferences-heading button {
  min-height: 34px;
}

.push-preferences-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.push-preference-toggle,
.push-quiet-hours {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d9e2ec;
  border-radius: 5px;
  background: #fff;
}

.push-preference-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.push-preference-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0f766e;
}

.push-time-range input {
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 6px 9px;
}

.push-quiet-hours {
  display: grid;
  gap: 9px;
}

.push-quiet-hours .push-preference-toggle {
  padding: 0;
  border: 0;
}

.push-time-range {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 11px;
}

.session-management-dialog {
  width: min(700px, 100%);
}

.passkey-management-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #cfe0e5;
  border-left: 3px solid #0f9f8f;
  border-radius: 6px;
  background: #f6fffd;
}

.passkey-management-head,
.passkey-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.passkey-management-head > div,
.passkey-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.passkey-management-head strong,
.passkey-card strong {
  color: #0f172a;
  font-size: 14px;
}

.passkey-management-head small,
.passkey-card small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.passkey-list {
  display: grid;
  gap: 7px;
}

.passkey-card {
  padding: 10px 11px;
  border-top: 1px solid #dbe7ea;
}

.passkey-empty {
  padding: 9px 0 2px;
  color: #64748b;
  font-size: 12px;
}

.session-device-list {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.session-device-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #d8e1ec;
  border-left: 3px solid #94a3b8;
  border-radius: 6px;
  background: #fff;
}

.session-device-card.current {
  border-left-color: #0f9f8f;
  background: #f5fffc;
}

.session-device-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: #e8eef5;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.session-device-card.current .session-device-icon {
  background: #ccfbf1;
  color: #0f766e;
}

.session-device-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.session-device-copy strong {
  color: #0f172a;
  font-size: 14px;
}

.session-device-copy span,
.session-device-copy small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.session-current-badge {
  padding: 5px 8px;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
}

.session-security-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #526075;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .offline-data-banner,
  .push-preferences-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .offline-data-banner button,
  .push-preferences-heading button {
    width: 100%;
  }

  .push-preferences-grid {
    grid-template-columns: 1fr;
  }

  .push-time-range {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  }

  .session-device-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .session-device-icon {
    width: 38px;
    height: 38px;
  }

  .session-device-card > button,
  .session-current-badge {
    grid-column: 2;
    width: fit-content;
  }

  .passkey-management-head,
  .passkey-card {
    align-items: stretch;
    flex-direction: column;
  }

  .passkey-management-head button,
  .passkey-card button {
    width: 100%;
  }
}

.install-guide-dialog {
  max-width: 760px;
}

.install-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 22px;
  align-items: stretch;
}

.install-guide-copy {
  display: grid;
  align-content: start;
  gap: 16px;
}

.install-platform-badge {
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
}

.install-guide-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
}

.install-guide-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
  counter-increment: install-step;
}

.install-guide-steps li::before {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0b1728;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  content: counter(install-step);
}

.install-url-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d8e2ee;
  border-radius: 6px;
  background: #f8fafc;
}

.install-url-box span {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 11px;
}

.install-url-box strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 13px;
}

.install-qr-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid #d8e2ee;
  border-radius: 6px;
  background: #fff;
  text-align: center;
}

.install-qr-card img {
  width: 176px;
  height: 176px;
  image-rendering: crisp-edges;
}

.install-qr-card strong {
  color: #172033;
  font-size: 13px;
}

.install-qr-card small {
  color: #64748b;
  font-size: 11px;
}

@media (max-width: 720px) {
  .install-guide-layout {
    grid-template-columns: 1fr;
  }

  .install-qr-card {
    grid-template-columns: 116px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .install-qr-card img {
    grid-row: 1 / 3;
    width: 108px;
    height: 108px;
  }

  .install-url-box {
    grid-template-columns: 1fr;
  }

  .install-url-box button {
    width: 100%;
  }
}