/* Local, dependency-free design tokens. No external fonts or UI runtime. */
:root {
  color-scheme: light;
  --background: #f6f8f7;
  --foreground: #1b2923;
  --card: #ffffff;
  --muted: #63736a;
  --muted-background: #f3f6f4;
  --border: #dfe7e2;
  --primary: #16704b;
  --primary-hover: #115c3d;
  --primary-soft: #edf7f1;
  --destructive: #b83236;
  --destructive-soft: #fff3f3;
  --ring: #26865b;
  --radius: 12px;
  --control-radius: 7px;
  --shadow: 0 1px 3px rgb(20 40 29 / 4%);
  --card-shadow: 0 10px 26px rgb(24 77 52 / 10%), 0 2px 6px rgb(24 77 52 / 5%), inset 0 1px 0 rgb(255 255 255 / 95%);
  --card-shadow-raised: 0 20px 38px rgb(24 77 52 / 16%), 0 5px 12px rgb(24 77 52 / 8%), inset 0 1px 0 #fff;
  --bg: var(--background);
  --panel: var(--card);
  --ink: var(--foreground);
  --ok: var(--primary);
  --bad: var(--destructive);
  --line: var(--border);
  --accent: var(--primary);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-gutter: stable; }
.dashboard-root { scroll-padding-top: calc(var(--dashboard-header-height, 86px) + 16px); }
body {
  margin: 0;
  color: var(--foreground);
  background: radial-gradient(ellipse at 4% 45%, rgb(158 229 191 / 33%), transparent 55%),
    radial-gradient(ellipse at 95% 8%, rgb(168 213 245 / 33%), transparent 48%),
    linear-gradient(150deg, #eef8f2, #f3f8f6 65%, #edf6f7);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.bg-blur { display: none; }
button, input, select { font: inherit; }
button, .logout-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
button:hover:not(:disabled), .logout-link:hover { background: var(--muted-background); border-color: #bfcfc5; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; color: #87948d; background: #f5f7f6; border-color: #e5ebe7; }
:where(button, a, input, select, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
input, select { min-width: 0; min-height: 36px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--card); color: var(--foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
input::placeholder { color: #839188; }
input:focus, select:focus { border-color: var(--primary); }
input[type="datetime-local"] { max-width: 100%; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.container { width: min(1440px, calc(100% - 64px)); margin: 0 auto; padding: 28px 0 24px; }
/* A full-width sticky header, independent of the normal-flow footer controls. */
.dashboard-header { position: sticky; top: 0; z-index: 30; color: #f4fff8; background: linear-gradient(110deg, #103d31, #14553f 58%, #17664e); border-bottom: 1px solid #2d7359; box-shadow: 0 4px 20px rgb(15 55 39 / 16%); }
.hero-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; width: min(1440px, calc(100% - 64px)); min-height: 84px; margin: 0 auto; padding: 14px 0; }
.hero-top, .hero-subtitle { display: flex; align-items: center; }
.hero-top { gap: 12px; min-width: 0; }
.hero-copy { min-width: 0; }
.hero-logo { width: 44px; height: 44px; flex-shrink: 0; object-fit: cover; border: 1px solid #8fb8a1; border-radius: 10px; background: #fff; }
.hero h1 { margin: 0 0 5px; color: #f4fff8; font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.4px; }
.hero-subtitle { gap: 8px; flex-wrap: wrap; }
.hero p { margin: 0; color: #c0decd; font-size: 11px; white-space: nowrap; }
.hero-tools { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; }
#meta { max-width: 228px; margin: 0; color: #d3e8dd; font-size: 11px; line-height: 1.7; text-align: right; text-wrap: balance; }
.header-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.header-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px; color: #d4eadf; font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.header-nav a:hover { color: #fff; background: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 12%); }
.hero :where(a, button):focus-visible { outline-color: #b7f6d2; }
.hero .logout-link { min-height: 38px; color: #edf9f2; background: rgb(255 255 255 / 7%); border-color: rgb(217 243 228 / 28%); }
.hero .logout-link:hover { color: #fff; background: rgb(255 255 255 / 14%); border-color: rgb(217 243 228 / 50%); }
.live-status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px; border: 1px solid #cde7d6; border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 500; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live-pulse 2s ease-in-out infinite; }
.live-status.is-alert { color: var(--destructive); border-color: #f0cdd0; background: var(--destructive-soft); }
.hero .live-status { padding: 2px 6px; color: #bff8d5; border-color: rgb(167 233 192 / 24%); background: rgb(122 219 163 / 10%); }
.hero .live-status.is-alert { color: #ffe1e1; border-color: #b76b70; background: #783b43; }
@keyframes live-pulse { 50% { opacity: .45; } }
.container > section:first-child { margin-top: 0; }
section { margin-top: 28px; }
h2 { margin: 0 0 14px; font-size: 20px; font-weight: 650; letter-spacing: -.25px; line-height: 1.4; }
.section-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.section-heading-row h2 { margin: 0; }
.execution-actions { display: flex; align-items: center; gap: 8px; }
.disclosure-btn { color: var(--muted); min-width: 76px; }
.disclosure-icon { flex-shrink: 0; transition: transform 160ms ease; }
.disclosure-btn[aria-expanded="false"] .disclosure-icon { transform: rotate(180deg); }

/* Low-frequency controls belong to the page footer, never a floating overlay. */
.account-controls { display: flex; align-items: center; gap: 12px; }
.account-controls-label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.account-controls button { min-height: 40px; }
.risk-control-btn.is-halt, .danger-btn { color: var(--destructive); border-color: #efced0; background: var(--destructive-soft); }
.risk-control-btn.is-halt:hover:not(:disabled), .danger-btn:hover:not(:disabled) { border-color: #dea4a7; background: #ffe7e8; }
.risk-control-btn.is-resume, .primary-btn { color: var(--primary); border-color: #cde2d5; background: var(--primary-soft); }
.risk-control-btn.is-resume:hover:not(:disabled), .primary-btn:hover:not(:disabled) { border-color: #a2c9b0; background: #dfefe5; }
.risk-control-icon { font-size: 14px; line-height: 1; font-weight: 700; }

.execution-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.execution-item { min-width: 0; padding: 17px 20px; border-right: 1px solid var(--border); }
.execution-item:nth-child(4n), .execution-item:last-child { border-right: 0; }
.execution-item:nth-child(n + 5) { border-top: 1px solid var(--border); }
.execution-item > span { display: block; color: var(--muted); font-size: 12px; }
.execution-item b { display: block; margin-top: 7px; font-size: 17px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.execution-item:nth-child(6) b, .execution-item:last-child b { font-size: 14px; }
.execution-item:last-child > span:last-child { margin-top: 4px; font-size: 11px; }

#accounting-note { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #dce8e0; border-left: 3px solid #93b7a1; border-radius: 6px; background: #f0f5f2; color: #52675a; font-size: 12px; line-height: 1.7; }
.portfolio-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.summary-item { min-width: 0; padding: 16px 18px; border: 1px solid #c8e0d3; border-radius: var(--radius); background: linear-gradient(145deg, #ffffffed, #e5f4ec); box-shadow: 0 5px 15px rgb(24 77 52 / 7%), inset 0 1px 0 #fff; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.summary-item > span { display: block; font-size: 12px; color: var(--muted); }
.summary-item > b { display: block; margin-top: 10px; font-size: 24px; font-weight: 600; letter-spacing: -.5px; line-height: 1.35; overflow-wrap: anywhere; }
.summary-item:first-child > b { font-size: 18px; letter-spacing: 0; line-height: 1.8; }
.summary-item:nth-child(3) { background: linear-gradient(145deg, #ffffffed, #e0eff4); border-color: #c8dee3; }
.summary-item:nth-child(4) { background: linear-gradient(145deg, #f5fcf7, #d8efe2); border-color: #add0bc; }
.summary-pct { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid #bddbcc;
  border-radius: 16px;
  background: radial-gradient(ellipse at 100% 0, rgb(130 204 236 / 29%), transparent 56%),
    linear-gradient(140deg, #fafffc 4%, #e3f5eb 58%, #daedf2);
  box-shadow: var(--card-shadow);
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease, border-color 220ms ease;
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 65%); pointer-events: none; }
.card:focus-within { border-color: #6eac8c; box-shadow: 0 0 0 2px rgb(38 134 91 / 15%), var(--card-shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.card-title-wrap { min-width: 0; }
.card h3 { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.strategy-sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.strategy-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.status-chip { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.status-ok { color: #11613d; background: linear-gradient(145deg, #e5f9ed, #c3ead5); border-color: #9ac9af; }
.status-bad { color: var(--destructive); background: var(--destructive-soft); border-color: #f0d5d7; }
.status-paused { color: #8a5b0e; background: #fff8e9; border-color: #ecdfbb; }
.strategy-toggle-btn, .close-position-btn { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.metric-grid { display: grid; gap: 10px; margin-bottom: 16px; padding: 12px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 11px; background: rgb(255 255 255 / 55%); box-shadow: inset 0 1px 0 #fff; }
.metric-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; }
.metric-row > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.metric-row > b { text-align: right; font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.metric-row:first-child { padding: 12px 14px; border: 1px solid #c9e3d4; border-radius: 8px; background: linear-gradient(125deg, #edf9f2, #d8efe3); margin-bottom: 3px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%); }
.metric-row:first-child > b { font-size: 23px; letter-spacing: -.35px; }
.metric-row-allocation { min-height: 32px; }
.allocation-control { display: grid; grid-template-columns: minmax(64px, 100px) 48px; gap: 6px; justify-content: end; min-width: 0; }
.allocation-input { width: 100%; min-height: 32px; height: 32px; padding: 5px 8px; font-size: 12px; text-align: right; }
.allocation-save-btn { min-height: 32px; padding: 5px 8px; font-size: 12px; }
.pnl-percent { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.metric-row-full { grid-template-columns: 1fr; gap: 8px; margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--border); }
.weight-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.weight-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; padding: 4px 7px; border-radius: 5px; background: #eaf3ee; box-shadow: inset 0 0 0 1px rgb(175 203 185 / 28%); font-size: 11px; transition: background-color 160ms ease, box-shadow 160ms ease; }
.weight-item > span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.weight-item > b { font-size: 11px; font-weight: 600; text-align: right; }
.weight-empty { font-size: 12px; color: var(--muted); }
.card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #c6ded2; }
.message { margin: 0; padding: 7px 9px; border: 1px solid rgb(255 255 255 / 80%); border-radius: 7px; background: rgb(255 255 255 / 57%); color: #466454; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.time { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }

.table-shell { width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; background: var(--card); }
#positions-table { min-width: 1020px; }
#orders-table { min-width: 1180px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #edf1ee; font-size: 12px; line-height: 1.5; white-space: nowrap; }
th { padding-top: 11px; padding-bottom: 11px; background: #f4f7f5; color: #52655a; font-size: 11px; font-weight: 600; }
td { height: 45px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8faf9; }
#positions-table :is(th, td):nth-child(n + 3):nth-child(-n + 7),
#orders-table :is(th, td):nth-child(n + 6):nth-child(-n + 9) { text-align: right; }
#positions-table :is(th, td):last-child { text-align: center; }
#positions-table td:nth-child(2), #orders-table td:nth-child(5) { font-weight: 500; }
#positions-table td:nth-child(8), #orders-table td:nth-child(2), #orders-table td:last-child { color: var(--muted); font-size: 11px; }
.orders-toolbar { display: grid; gap: 14px; margin-bottom: 14px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.orders-toolbar-row { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(130px, 1.3fr) 1fr 1fr minmax(140px, 1.2fr); gap: 12px; align-items: end; }
.orders-toolbar-row + .orders-toolbar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; max-width: 830px; }
.field-inline { display: grid; min-width: 0; gap: 6px; }
.field-inline > span { font-size: 12px; color: var(--muted); }
.field-inline input, .field-inline select { width: 100%; }
.toolbar-actions { display: flex; gap: 8px; }
#orders-filter-apply-btn, .auth-submit { color: #fff; background: var(--primary); border-color: var(--primary); }
#orders-filter-apply-btn:hover:not(:disabled), .auth-submit:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.pager { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.pager button { min-height: 32px; padding: 6px 11px; font-size: 12px; }
.pager > span { margin: 0 4px; }
.pager-jump { display: inline-flex; align-items: center; gap: 6px; }
.pager-jump input { width: 52px; min-height: 32px; padding: 5px 7px; text-align: center; font-size: 12px; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 30px; padding-top: 17px; border-top: 1px solid var(--border); }
.site-footer p { margin: 0; color: var(--muted); font-size: 11px; text-align: right; }

/* Both control dialogs share the same geometry and safety-state styling. */
.action-dialog {
  position: fixed;
  inset: 0;
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  background: var(--card);
  box-shadow: 0 24px 64px rgb(17 35 25 / 18%);
  overflow: auto;
}
.action-dialog::backdrop { background: rgb(17 29 23 / 38%); backdrop-filter: blur(2px); }
.action-dialog-card { margin: 0; background: var(--card); }
.action-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 0; }
.action-dialog-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.action-dialog-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid transparent; border-radius: 9px; font-size: 17px; font-weight: 600; }
.action-dialog-icon.is-danger { color: var(--destructive); background: var(--destructive-soft); border-color: #f0d5d7; }
.action-dialog-icon.is-success { color: var(--primary); background: var(--primary-soft); border-color: #cde2d5; }
.action-dialog-kicker { margin: 0 0 4px; color: var(--muted); font-size: 11px; }
.action-dialog-heading h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.dialog-close-btn { width: 28px; min-height: 28px; flex-shrink: 0; padding: 0; margin: -5px -5px 0 0; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.action-dialog-body { display: grid; gap: 16px; padding: 22px 24px; }
.action-dialog-copy { margin: 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.action-dialog-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted-background); color: #55685e; font-size: 12px; line-height: 1.7; }
.action-dialog-note-icon { display: grid; place-items: center; flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; border: 1px solid #92a398; border-radius: 50%; font-family: Georgia, serif; font-size: 10px; font-weight: 600; }
.dialog-password-field { display: grid; gap: 7px; }
.dialog-password-field > span { font-size: 12px; font-weight: 500; }
.dialog-password-field input { width: 100%; min-height: 40px; }
.dialog-password-field input:disabled { color: transparent; }
.dialog-error, .auth-error { margin: 0; padding: 10px 12px; border: 1px solid #f0d5d7; border-radius: 7px; background: var(--destructive-soft); color: var(--destructive); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.action-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 24px 24px; }
.dialog-secondary-btn, .dialog-confirm-btn { min-width: 80px; min-height: 36px; }
.dialog-confirm-btn.is-danger { background: var(--destructive); border-color: var(--destructive); color: #fff; }
.dialog-confirm-btn.is-danger:hover:not(:disabled) { background: #9c252a; border-color: #9c252a; }
.dialog-confirm-btn.is-success { background: var(--primary); border-color: var(--primary); color: #fff; }
.dialog-confirm-btn.is-success:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.dialog-confirm-btn:disabled { opacity: .55; cursor: wait; }

/* The login page uses the same controls without changing authentication. */
.auth-shell { min-height: 100dvh; width: min(440px, calc(100% - 32px)); margin: 0 auto; display: grid; align-items: center; padding: 32px 0; }
.auth-card { margin: 0; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: 0 8px 28px rgb(20 40 29 / 6%); }
.auth-brand { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.auth-brand .hero-logo { width: 48px; height: 48px; border-radius: 10px; }
.auth-kicker { margin: 0 0 5px; color: var(--primary); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.auth-brand h1 { margin: 0; font-size: 22px; line-height: 1.4; }
.auth-copy { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 7px; }
.auth-field span { font-size: 13px; font-weight: 500; }
.auth-field input { width: 100%; min-height: 42px; font-size: 16px; }
.auth-submit { min-height: 40px; }
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-hint { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

/* Visual feedback only: a card is still not a trading action or a link. */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  .card:hover { transform: translateY(-4px); border-color: #86bda0; box-shadow: var(--card-shadow-raised); }
  .summary-item:hover { transform: translateY(-2px); border-color: #91bfa5; box-shadow: 0 10px 22px rgb(24 77 52 / 12%), inset 0 1px 0 #fff; }
  .weight-item:hover { background: #d9ece1; box-shadow: inset 0 0 0 1px #bddbc9; }
  button:hover:not(:disabled), .logout-link:hover { box-shadow: 0 3px 8px rgb(24 77 52 / 10%); }
}
button:active:not(:disabled), .logout-link:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgb(20 40 29 / 12%); }

@media (max-width: 1180px) {
  .container, .hero-bar { width: calc(100% - 40px); }
  .card { padding: 16px; }
  .cards { gap: 12px; }
  .execution-item { padding: 16px; }
  .summary-item { padding: 14px; }
  .summary-item > b { font-size: 21px; }
  .summary-item:first-child > b { font-size: 16px; }
  .metric-row { gap: 8px; }
  .allocation-control { grid-template-columns: minmax(64px, 84px) 44px; }
}
@media (max-width: 1100px) {
  .dashboard-root { --dashboard-header-height: 132px; }
  .hero-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; padding: 12px 0; }
  .hero-tools { grid-column: 2; grid-row: 1; }
  .header-nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .execution-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .execution-item:nth-child(2n) { border-right: 0; }
  .execution-item:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .orders-toolbar-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .orders-toolbar-row + .orders-toolbar-row { max-width: none; }
}
@media (max-width: 640px) {
  body { background-attachment: scroll; }
  .card { box-shadow: 0 6px 18px rgb(24 77 52 / 10%), inset 0 1px 0 #fff; }
  .dashboard-root { --dashboard-header-height: 150px; }
  .container, .hero-bar { width: calc(100% - 32px); }
  .container { padding-top: 20px; }
  .hero-bar { gap: 8px 12px; }
  .hero-top { grid-column: 1; grid-row: 1; gap: 9px; }
  .hero-logo { width: 38px; height: 38px; border-radius: 9px; }
  .hero h1 { margin-bottom: 4px; font-size: 20px; }
  .hero-subtitle { gap: 0; }
  .hero p { display: none; }
  .hero .live-status { font-size: 10px; }
  .hero-tools { display: contents; }
  #meta { grid-column: 1 / -1; grid-row: 3; max-width: none; text-align: left; font-size: 10px; }
  .hero .logout-link { grid-column: 2; grid-row: 1; min-height: 40px; padding: 7px 9px; font-size: 11px; }
  .header-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .header-nav a { min-height: 40px; padding: 8px 3px; font-size: 12px; }
  section { margin-top: 24px; }
  h2 { font-size: 18px; }
  .section-heading-row { align-items: center; gap: 12px; }
  .account-controls { width: 100%; }
  .account-controls-label { display: none; }
  .execution-actions { width: 100%; }
  .execution-actions button { flex: 1; min-width: 0; min-height: 44px; }
  .execution-item { padding: 14px 12px; }
  .execution-item > span { font-size: 11px; }
  .execution-item b { font-size: 15px; }
  .execution-item:nth-child(6) b, .execution-item:last-child b { font-size: 12px; }
  .portfolio-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .summary-item:first-child { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .summary-item:first-child > b { margin-top: 0; font-size: 15px; }
  .summary-item > b { font-size: 22px; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 18px; }
  .card h3 { font-size: 18px; }
  .strategy-toggle-btn, .close-position-btn { min-height: 36px; }
  .allocation-control { grid-template-columns: minmax(72px, 100px) 48px; }
  .allocation-input, .allocation-save-btn { min-height: 36px; height: 36px; }
  .orders-toolbar { padding: 14px; }
  .orders-toolbar-row, .orders-toolbar-row + .orders-toolbar-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .orders-toolbar-row:first-child .field-inline:last-child, .orders-toolbar-row + .orders-toolbar-row .field-inline, .toolbar-actions { grid-column: 1 / -1; }
  .toolbar-actions button { flex: 1; }
  .field-inline input, .field-inline select { min-height: 40px; font-size: 16px; }
  .pager { justify-content: flex-start; gap: 6px; }
  .pager button { min-height: 36px; padding: 6px 10px; }
  .pager-orders > span { order: -1; width: 100%; margin: 0 0 4px; }
  .site-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .site-footer p { text-align: left; }
  .action-dialog-head { padding: 20px 20px 0; }
  .action-dialog-body { padding: 20px; }
  .action-dialog-actions { padding: 0 20px 20px; }
  .dialog-secondary-btn, .dialog-confirm-btn { flex: 1; min-height: 40px; }
  .dialog-password-field input { font-size: 16px; }
  .auth-card { padding: 24px; }
}
@media (max-width: 360px) {
  .container, .hero-bar { width: calc(100% - 24px); }
  .execution-summary { grid-template-columns: 1fr; }
  .execution-item:nth-child(n) { border-right: 0; border-top: 1px solid var(--border); }
  .execution-item:first-child { border-top: 0; }
  .card { padding: 14px; }
  .metric-row { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .summary-item:hover, button:active:not(:disabled), .logout-link:active { transform: none; }
}