:root {
  --navy-950: #050c16;
  --navy-900: #081322;
  --navy-800: #10243c;
  --navy-700: #173451;
  --gold: #d6a84a;
  --gold-light: #f4d88d;
  --green: #07815e;
  --green-soft: #e8f7f1;
  --red: #c13e4a;
  --red-soft: #fff0f1;
  --blue: #2563eb;
  --cyan: #0e7490;
  --purple: #7257b8;
  --ink: #172033;
  --muted: #68758a;
  --line: #dfe5ed;
  --surface: #ffffff;
  --canvas: #f3f6fa;
  --shadow: 0 12px 32px rgba(8, 19, 34, .08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background:#ffffff; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(214, 168, 74, .10), transparent 28%),
    linear-gradient(145deg, #ffffff, #f4f7fb);
}
.login-card {
  width: min(430px, 100%);
  padding: 34px;
  border: 1px solid #e3e8ef;
  border-radius: 22px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 20px 55px rgba(8,19,34,.12);
}
.login-logo { display: block; width: 150px; height: 150px; object-fit: contain; margin: -18px auto -4px; }
.login-card h1 { margin: 4px 0 6px; text-align: center; font-size: 28px; }
.login-card > p { text-align: center; }
.security-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.form-error { min-height: 21px; color: var(--red) !important; font-weight: 700; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 22px;
  color: #fff;
  background: var(--navy-900);
  border-bottom: 2px solid rgba(214,168,74,.7);
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { width: 66px; height: 60px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; }
.brand div { display: grid; line-height: 1.2; }
.brand strong { font-size: 16px; }
.brand span { color: #aebed1; font-size: 12px; margin-top: 4px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.status-badge, .admin-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 11px;
  border-radius: 999px; font-size: 12px; font-weight: 800;
}
.status-badge { color: #9ff3cf; background: rgba(7,129,94,.2); border: 1px solid rgba(93,218,168,.32); }
.status-badge.offline, .status-badge.error { color: #ffd0d5; background: rgba(193,62,74,.2); border-color: rgba(255,166,175,.32); }
.status-badge.syncing, .status-badge.partial { color:#ffe9a8; background:rgba(180,128,13,.22); border-color:rgba(255,213,102,.35); }
.status-badge.connected { color:#9ff3cf; background:rgba(7,129,94,.2); border-color:rgba(93,218,168,.32); }
.admin-chip { color: var(--gold-light); background: rgba(214,168,74,.13); border: 1px solid rgba(214,168,74,.35); }

.workspace { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.sidebar {
  position: sticky; top: 72px; height: calc(100vh - 72px);
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 14px;
  background: #fff;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.sidebar nav { display: grid; gap: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border: 0; border-radius: 10px;
  color: #405068; background: transparent; text-align: left; font-weight: 750;
}
.nav-item span { width: 20px; color: #8190a5; text-align: center; font-size: 17px; }
.nav-item:hover { color: var(--navy-900); background: #f2f5f9; }
.nav-item.active { color: #fff; background: linear-gradient(135deg, var(--navy-800), var(--navy-700)); box-shadow: 0 8px 20px rgba(16,36,60,.18); }
.nav-item.active span { color: var(--gold-light); }
.version { margin: auto 0 0; text-align: center; color: #98a3b2; font-size: 10px; letter-spacing: .08em; }

.content { min-width: 0; padding: 28px; }
.view { display: none; }
.active-view { display: block; animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: .35; transform: translateY(3px); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-heading h1 { margin: 2px 0 3px; font-size: clamp(25px, 3vw, 34px); line-height: 1.1; letter-spacing: -.025em; }
.eyebrow { margin: 0; color: #8a6c2d; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.muted { margin: 0; color: var(--muted); }
.quick-actions { display: flex; gap: 9px; }

.btn {
  min-height: 40px; padding: 9px 15px; border: 1px solid transparent; border-radius: 9px;
  font-weight: 800; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.btn-primary { color: #fff; background: var(--navy-800); box-shadow: 0 7px 16px rgba(16,36,60,.16); }
.btn-primary:hover { background: var(--navy-700); }
.btn-secondary { color: var(--navy-800); background: #fff; border-color: #cbd5e1; }
.btn-ghost { color: inherit; background: transparent; border-color: #cbd5e1; }
.topbar .btn-ghost { color: #fff; border-color: rgba(255,255,255,.25); }
.btn-danger-outline { color: #ffb7bf; background: transparent; border-color: rgba(255,183,191,.36); }
.btn-block { width: 100%; }
.icon-btn { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; color: #fff; background: transparent; }
.text-btn { border: 0; color: var(--blue); background: transparent; font-weight: 800; }
.danger-link { border: 0; color: var(--red); background: transparent; font-weight: 800; font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card {
  position: relative; min-height: 132px; padding: 18px; overflow: hidden;
  border: 1px solid var(--line); border-top: 4px solid #8b98a9; border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 6px 20px rgba(8,19,34,.045);
}
.metric-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -32px; bottom: -44px; border-radius: 50%; background: currentColor; opacity: .05; }
.metric-card span { display: block; color: #667287; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.metric-card strong { display: block; margin: 10px 0 5px; font-size: clamp(21px, 2.2vw, 27px); line-height: 1; }
.metric-card small { color: #8a96a7; }
.tone-blue { border-top-color: var(--blue); color: var(--blue); }
.tone-gold { border-top-color: var(--gold); color: #8a671e; }
.tone-cyan { border-top-color: var(--cyan); color: var(--cyan); }
.tone-purple { border-top-color: var(--purple); color: var(--purple); }
.tone-slate { border-top-color: #607187; color: #607187; }
.metric-card.positive { border-top-color: var(--green); color: var(--green); background: linear-gradient(145deg, #fff, var(--green-soft)); }
.metric-card.negative { border-top-color: var(--red); color: var(--red); background: linear-gradient(145deg, #fff, var(--red-soft)); }

.panel-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, .9fr); gap: 18px; }
.panel {
  min-width: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 18px 19px 13px; }
.panel h2 { margin: 0 0 3px; font-size: 17px; }
.panel-head .muted { font-size: 12px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 11px 14px; color: #6c788a; background: #f7f9fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
td { padding: 13px 14px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfd; }
.wide-table { min-width: 1080px; }
.company-cell { display: grid; }
.company-cell strong { color: var(--navy-800); }
.company-cell small { color: var(--muted); }
.number-positive { color: var(--green); font-weight: 850; }
.number-negative { color: var(--red); font-weight: 850; }
.number-warning { color:#9a6814; font-weight:850; }
.type-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.type-buy, .type-deposit { color: #066b4e; background: #ddf6ec; }
.type-sell, .type-withdrawal { color: #a62935; background: #fee6e9; }
.price-missing { color: #9a6814; background: #fff4d6; }
.empty-state { display: grid; justify-items: center; gap: 4px; padding: 38px 18px; color: var(--muted); text-align: center; }
.empty-state strong { color: #425069; }
.empty-state:not(.show) { display: none; }

.control-list { display: grid; padding: 0 12px 14px; }
.control-list button { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 14px 7px; border: 0; border-bottom: 1px solid #edf0f4; background: transparent; text-align: left; }
.control-list button:last-child { border-bottom: 0; }
.control-list button:hover { background: #fafbfd; }
.control-list button span:nth-child(2) { display: grid; }
.control-list small { color: var(--muted); }
.control-list b { color: #9ba6b5; font-size: 22px; }
.control-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; font-weight: 900; }
.control-icon.amber { color: #906510; background: #fff1c7; }
.control-icon.green { color: #067251; background: #dff6ed; }
.control-icon.blue { color: #1e54bb; background: #e4edff; }
.insight-list { display: grid; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--line); background: #fafbfd; }
.insight-list div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-bottom: 9px; border-bottom: 1px solid #e9edf2; }
.insight-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.insight-list span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.insight-list strong { color: var(--navy-800); font-size: 13px; text-align: right; }
.insight-list small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }

.form-panel { padding: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.stack-form { display: grid; gap: 15px; }
label { display: grid; gap: 6px; color: #3d4a5e; font-size: 12px; font-weight: 800; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink);
  border: 1px solid #cbd4e0; border-radius: 9px; outline: none; background: #fff;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.span-2 { grid-column: span 2; }
.form-summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-radius: 10px; background: #f5f7fa; }
.form-summary strong { color: var(--navy-800); font-size: 20px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.charge-estimator { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid #eadcb7; border-radius: 11px; background: #fffaec; }
.charge-estimator > div:first-child { display: grid; gap: 3px; }
.charge-estimator small { color: #75663f; }
.charge-breakdown { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; }
.charge-breakdown div { padding: 9px 10px; border-radius: 8px; background: #fff; }
.charge-breakdown dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.charge-breakdown dd { margin: 3px 0 0; color: var(--navy-800); font-weight: 850; }
.two-column { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }
.compact-form h2 { margin-bottom: 18px; }

.feed-card { padding: 24px; }
.feed-state-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 15px; color: #986b12; background: #fff1c7; font-size: 23px; font-weight: 900; }
.feed-state-icon.connected { color: #057052; background: #dff6ed; }
.feed-card h2 { margin: 6px 0 7px; font-size: 21px; }
.feed-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0; }
.worker-config { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; margin-top: 18px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafc; }
.worker-config input { min-width: 0; font-size: 12px; }
.feed-details { display: grid; gap: 10px; margin: 0; padding: 15px; border-radius: 11px; background: #f6f8fb; }
.feed-details div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.feed-details dt { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.feed-details dd { margin: 0; color: var(--navy-800); font-weight: 800; text-align: right; }
.feed-note { margin: 16px 0 0; padding: 12px 13px; border: 1px solid #eadcb7; border-radius: 10px; color: #6c5624; background: #fffaec; font-size: 12px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.backup-card { padding: 24px; }
.backup-card p { min-height: 44px; color: var(--muted); }
.backup-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 13px; color: var(--gold-light); background: var(--navy-800); font-weight: 900; }
.warning-box { margin-top: 18px; padding: 16px 18px; border: 1px solid #ebd7a5; border-radius: 12px; color: #6c5624; background: #fffaec; }

.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: min(390px, calc(100vw - 32px)); padding: 13px 17px; border-radius: 10px; color: #fff; background: var(--navy-800); box-shadow: 0 14px 34px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #9f2f3a; }
.loading-overlay { position: fixed; z-index: 110; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #fff; background: rgba(5,12,22,.76); backdrop-filter: blur(3px); }
.spinner { width: 36px; height: 36px; border: 4px solid rgba(255,255,255,.25); border-top-color: var(--gold-light); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mobile-only { display: none; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .panel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .mobile-only { display: inline-grid; place-items: center; }
  .topbar { height: 64px; padding: 0 12px; gap: 9px; }
  .brand { margin-right: auto; }
  .brand img { width: 54px; height: 50px; }
  .brand div { display: none; }
  .admin-chip, .topbar #installButton { display: none !important; }
  .status-badge { height: 31px; padding: 0 8px; font-size: 10px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn { min-height: 34px; padding: 6px 9px; font-size: 11px; }
  .workspace { display: block; min-height: calc(100vh - 64px); }
  .sidebar { position: fixed; z-index: 30; top: 64px; left: 0; width: min(290px, 86vw); height: calc(100vh - 64px); transform: translateX(-103%); transition: transform .2s ease; box-shadow: 12px 0 30px rgba(0,0,0,.18); }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 20px 14px 34px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .quick-actions { width: 100%; }
  .quick-actions .btn { flex: 1; }
  .two-column, .backup-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .login-card { padding: 26px 20px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 120px; padding: 14px 12px; }
  .metric-card span { font-size: 10px; }
  .metric-card strong { font-size: 19px; }
  .metric-card small { font-size: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .form-panel { padding: 17px; }
  .form-actions .btn { flex: 1; }
  .panel-head { padding: 16px 14px 12px; }
  .worker-config { grid-template-columns: 1fr; }
  .charge-estimator { grid-template-columns: 1fr; }
  .charge-breakdown { grid-template-columns: 1fr 1fr; }
  th, td { padding: 11px 12px; }
}

.trade-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 20px; }
.trade-columns h2 { margin: 0 0 16px; }
.trade-card-list { display: grid; gap: 16px; }
.trade-card { border: 1px solid #dce3ec; border-top: 4px solid #16865c; border-radius: 14px; padding: 20px; background: #fff; box-shadow: 0 6px 20px #142b4610; overflow-wrap: anywhere; }
.sell-card { border-top-color: #bb6534; }
.trade-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.trade-card-details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trade-card-details dt { color: #64748b; font-size: 12px; }
.trade-card-details dd { margin: 4px 0 0; font-weight: 700; }
@media (max-width: 820px) { .trade-columns { grid-template-columns: 1fr; padding: 14px; } }

.trade-card-details > div { background: #f5f9fa; border: 1px solid #dfe7ea; border-radius: 16px; padding: 14px; min-width: 0; }
.trade-card-details dt { font-size: 13px; font-weight: 700; text-transform: uppercase; }
.trade-card { border-top: 1px solid #dce3ec; border-left: 5px solid #19868b; border-radius: 20px; }
.sell-card { border-left-color: #bb6534; }
.trade-card-heading > strong { font-size: 21px; }
.holding-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
#view-holdings > .panel { background: transparent; border: 0; box-shadow: none; }
#view-holdings .table-wrap { display: none; }
.bottom-nav { display: none; }
@media (max-width: 820px) {
  .bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; right: 10px; padding: 8px 4px; border: 1px solid #dae4e8; border-radius: 24px; background: #fffffff5; box-shadow: 0 8px 32px #183e5529; z-index: 80; }
  .bottom-nav .nav-item { display: flex; flex-direction: column; gap: 5px; justify-content: center; padding: 10px 2px; margin: 0; min-height: 60px; font-size: 11px; border-radius: 18px; color: #6e818c; }
  .bottom-nav .nav-item span { font-size: 23px; }
  .bottom-nav .nav-item.active { background: #eaf5f7; color: #164960; box-shadow: inset 0 -3px #dfbaa3; }
  .content { padding-bottom: 120px; }
  .sidebar { padding-bottom: 115px; }
  .trade-card-details dd { font-size: 19px; }
  .trade-card .btn { min-height: 46px; }
  .holding-cards { grid-template-columns: minmax(0, 1fr); }
}
/* Adapted from the supplied Forge Bridge V16 interface. */
.topbar { background: linear-gradient(90deg, #102f4b, #0d7f86); }
.btn-primary { background: linear-gradient(145deg, #17496d, #0d7f86); }
.trade-card { border-color: #e0e9ee; border-left-color: #0d7f86; box-shadow: 0 5px 16px rgba(23,55,78,.06); }
.sell-card { border-left-color: #bb6534; }
.trade-card-details > div { background: #f7fafb; border-color: #e4ebef; }
.trade-card-details dt { color: #6d8190; }
.trade-card-heading > strong { color: #183c54; }
@media (max-width: 820px) {
  .bottom-nav { backdrop-filter: blur(16px); box-shadow: 0 15px 38px rgba(19,48,68,.20); }
  .bottom-nav .nav-item.active { background: linear-gradient(145deg,#e8f4f4,#edf4fa); color: #174d6f; }
  .bottom-nav .nav-item.active span { color: #174d6f; }
  .brand { gap: 8px; overflow: hidden; }
  .brand div { display: grid; min-width: 0; }
  .brand strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand span { font-size: 10px; }
  .brand img { flex-shrink: 0; }
  .trade-card .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .trade-card .form-actions button:last-child:nth-child(3) { grid-column: 1 / -1; }
}
.company-dialog { width: min(620px, calc(100% - 24px)); max-height: 85vh; overflow: auto; border: 1px solid #dce5eb; border-radius: 20px; padding: 24px; color: #18344a; }
.company-dialog::backdrop { background: #102f4b88; }
@media print {
  .bottom-nav { display: none !important; }
  .topbar, .sidebar, .quick-actions, button { display: none !important; }
  .workspace { display: block; }
  .content { padding: 0; }
  .panel, .metric-card { box-shadow: none; break-inside: avoid; }
}

/* BOKER professional mobile-first refinement. No external fonts or UI assets. */
:root { --canvas:#f4f6f8; --ink:#162a3c; --muted:#607184; --line:#e2e8ed; --shadow:0 4px 18px #122b4006; }
body { font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color:transparent; }
button, summary { touch-action:manipulation; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline:3px solid #089b97; outline-offset:3px; }
.topbar { background:#102d42; box-shadow:none; border-bottom:1px solid #ffffff18; }
.brand strong { letter-spacing:.12em; font-size:19px; }
.brand span { color:#c0ced8; }
.brand img { width:50px; height:50px; border-radius:13px; }
.workspace { grid-template-columns:220px minmax(0,1fr); }
.sidebar { padding:24px 12px; }
.nav-item { font-weight:650; min-height:46px; font-size:13px; }
.nav-item.active { background:#e9f3f3; color:#126661; box-shadow:none; }
.nav-item.active span { color:#126661; }
.content { padding:32px; max-width:1680px; width:100%; margin-inline:auto; }
.page-heading { margin-bottom:24px; }
.page-heading h1 { font-size:30px; letter-spacing:-.045em; margin-block:6px; }
.eyebrow { color:#637b87; font-size:10px; letter-spacing:.16em; }
.btn { min-height:46px; border-radius:12px; font-size:13px; font-weight:700; }
.btn-primary { background:#126c68; box-shadow:none; }
.btn-primary:hover { background:#0d5754; }
.btn-secondary { border-color:#d7e1e7; }
.metric-grid { gap:12px; }
.metric-card { border:1px solid var(--line); border-radius:16px; box-shadow:none; min-height:128px; padding:20px; }
.metric-card::after { display:none; }
.metric-card span { color:#647589; font-size:10px; letter-spacing:.07em; }
.metric-card strong { font-size:26px; letter-spacing:-.045em; line-height:1.2; overflow-wrap:anywhere; }
.metric-card small { color:#667789; font-size:11px; }
.portfolio-summary { margin-bottom:18px; }
.portfolio-value { background:linear-gradient(120deg,#102e43,#155c65); color:#fff; border-color:transparent; }
.portfolio-value span, .portfolio-value small { color:#d3e7e9; }
.portfolio-value strong { color:#fff; }
.account-details { border:1px solid var(--line); background:#fff; border-radius:16px; margin-bottom:26px; padding:0 18px; }
.account-details summary { cursor:pointer; padding:18px 0; font-weight:750; color:#284355; }
.account-details summary span { font-size:12px; font-weight:400; color:var(--muted); margin-left:12px; }
.account-details .metric-grid { margin-top:4px; }
.account-details .metric-card { background:#f8fafb; min-height:110px; padding:14px; }
.account-details .metric-card strong { font-size:22px; }
.panel { border-radius:18px; box-shadow:var(--shadow); }
.panel-head { padding:22px; }
.panel h2 { font-size:16px; letter-spacing:-.02em; }
.form-panel { max-width:960px; padding:26px; }
label { font-size:13px; font-weight:650; }
input, select, textarea { min-height:48px; font-size:16px; border-radius:12px; border-color:#d6e0e7; }
input[readonly] { background:#f3f6f8; color:#5b6e80; }
.form-grid { gap:20px; }
.form-actions { flex-wrap:wrap; }
.form-summary { gap:16px; flex-wrap:wrap; }
.trade-card { padding:22px; border-left-width:3px; box-shadow:none; border-radius:18px; }
.trade-card-heading { align-items:flex-start; }
.trade-card-heading > strong { font-size:19px; line-height:1.35; }
.type-badge { flex-shrink:0; padding:5px 10px; }
.trade-card-details { gap:10px; }
.trade-card-details > div { border:0; border-radius:11px; padding:12px; background:#f4f7f9; }
.trade-card-details dt { text-transform:none; font-size:12px; font-weight:500; color:#5d7181; }
.trade-card-details dd { font-size:18px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.trade-card .form-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
.trade-card .muted { font-size:12px; margin-top:6px; }
.holding-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:18px; }
.worker-config { grid-template-columns:1fr; }
.worker-config input { font-size:14px; }
.feed-details div { flex-wrap:wrap; gap:4px; }
.feed-details dd { overflow-wrap:anywhere; }
.company-dialog { max-height:85dvh; overscroll-behavior:contain; }
.menu-backdrop { display:none; }
@media (min-width:821px) and (max-width:1100px) {
  .workspace { grid-template-columns:190px minmax(0,1fr); }
  .content { padding:24px; }
  .two-column, .trade-columns { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .workspace { display:block; }
  .topbar { height:72px; padding:0 14px; }
  #menuButton { display:none; }
  .brand img { width:44px; height:44px; }
  .brand strong { font-size:17px; }
  .brand span { font-size:10px; }
  .topbar-actions .btn { min-height:44px; padding:8px 10px; font-size:12px; }
  .content { padding:22px 16px calc(112px + env(safe-area-inset-bottom)); }
  .page-heading { gap:16px; margin-bottom:20px; }
  .page-heading h1 { font-size:28px; }
  .page-heading .muted { font-size:13px; line-height:1.6; }
  .portfolio-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { padding:16px 14px; min-height:125px; }
  .metric-card strong { font-size:clamp(19px,5vw,27px); margin-top:12px; }
  .account-details { padding-inline:14px; }
  .account-details summary span { display:block; margin:4px 0 0 18px; }
  .bottom-nav { left:10px; right:10px; bottom:0; padding:6px 4px calc(8px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; background:#fff; border-bottom:0; box-shadow:0 -4px 28px #152f4210; }
  .bottom-nav .nav-item { font-size:11px; min-height:60px; gap:4px; }
  .bottom-nav .nav-item.active { background:#eaf4f3; box-shadow:none; color:#126c68; }
  .bottom-nav .nav-item.active span { color:#126c68; }
  .sidebar { top:72px; height:calc(100dvh - 72px); z-index:90; padding-bottom:30px; }
  .menu-backdrop:not([hidden]) { display:block; position:fixed; inset:72px 0 0; background:#0b233c66; z-index:85; border:0; }
  .toast { bottom:calc(94px + env(safe-area-inset-bottom)); right:16px; left:16px; max-width:none; }
  .holding-cards { grid-template-columns:minmax(0,1fr); }
  .trade-columns { padding:14px; gap:28px; }
  .trade-card { padding:18px; }
  .trade-card .form-actions button:last-child:nth-child(3) { grid-column:1/-1; }
  .feed-card, .backup-card { padding:20px; }
  .backup-card .btn { width:100%; }
  .table-wrap { overflow:visible; }
  .table-wrap table { display:block; min-width:0; white-space:normal; }
  .table-wrap thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .table-wrap tbody { display:grid; gap:12px; padding:0 14px 14px; }
  .table-wrap tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; padding:12px; gap:12px; background:#fff; }
  .table-wrap td { display:block; min-width:0; padding:0; border:0; overflow-wrap:anywhere; font-size:14px; }
  .table-wrap td::before { content:attr(data-label); display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
  .table-wrap td:first-child { grid-column:1/-1; padding-bottom:10px; border-bottom:1px solid var(--line); font-weight:700; }
  .table-wrap td .danger-link { min-height:44px; padding:8px 12px; border-radius:8px; background:var(--red-soft); }
  .panel-head { padding:18px; }
  .company-dialog { padding:20px; }
}
@media (max-width:360px) {
  .content { padding-inline:10px; }
  .topbar { padding-inline:10px; gap:6px; }
  .status-badge { font-size:9px; padding-inline:6px; }
  .brand { gap:6px; }
  .brand img { width:38px; height:38px; }
  .brand span { font-size:9px; }
  .metric-card { padding:14px 10px; }
  .metric-card strong { font-size:18px; }
  .trade-card-details dd { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
@media print {
  .account-details { border:0; padding:0; }
  .account-details > .metric-grid { display:grid !important; }
  .account-details summary { display:none; }
  .portfolio-value { background:#fff; color:#162a3c; }
  .portfolio-value strong, .portfolio-value span, .portfolio-value small { color:#162a3c; }
  .menu-backdrop { display:none !important; }
}

.entry-toolbar { display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.entry-toolbar .btn { flex:1; min-height:50px; }
.entry-editor { margin-bottom:20px; }
.entry-editor > summary { padding:20px; cursor:pointer; font-size:17px; font-weight:750; }
.entry-editor .form-panel { max-width:none; padding-top:4px; }
.entry-filters { display:grid; grid-template-columns:2fr 1fr; gap:16px; padding:18px; margin-bottom:16px; }
#entryCount { margin-bottom:14px; }
#entryCards .danger-link { min-height:46px; border:1px solid #edc8cb; border-radius:12px; background:#fff5f5; }
@media(max-width:560px) { .entry-filters { grid-template-columns:1fr; } .entry-editor > summary { padding:16px; } }


/* BOKER V5 — Intraday Control */
.intraday-status-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.intraday-status-strip article { background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; min-width:0; }
.intraday-status-strip span, .quote-metrics span { display:block; color:var(--muted); font-size:11px; margin-bottom:6px; }
.intraday-status-strip strong { font-size:20px; letter-spacing:-.03em; overflow-wrap:anywhere; }
.intraday-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:18px; margin-bottom:18px; }
.intraday-analyser-body, .risk-form { padding:0 22px 22px; }
.analyser-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; margin-bottom:14px; }
.bias-card { border:1px solid var(--line); border-radius:18px; padding:20px; margin-bottom:14px; background:#f7f9fa; }
.bias-card strong { display:block; font-size:34px; letter-spacing:-.05em; margin:4px 0 8px; }
.bias-card p { margin:0; color:var(--muted); line-height:1.55; }
.bias-kicker { font-size:10px; font-weight:800; letter-spacing:.14em; color:#607184; }
.bias-card.bias-positive { background:#eff8f4; border-color:#cfe8dc; }
.bias-card.bias-positive strong { color:#087451; }
.bias-card.bias-negative { background:#fff3f3; border-color:#f0d1d1; }
.bias-card.bias-negative strong { color:#b02c3b; }
.bias-card.bias-neutral strong { color:#9a6813; }
.quote-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.quote-metrics div { background:#f5f7f8; border-radius:13px; padding:12px; min-width:0; }
.quote-metrics strong { font-size:16px; overflow-wrap:anywhere; }
.structure-notes { margin-top:14px; padding:13px 15px; border-left:3px solid #8da5b3; background:#f6f8f9; border-radius:10px; color:#536879; font-size:12px; line-height:1.55; }
.structure-notes p { margin:0; }
.risk-form { display:grid; gap:14px; }
.risk-message { margin:0 22px 14px; padding:14px; border-radius:12px; background:#f6f8f9; color:#536879; font-size:13px; font-weight:650; }
.risk-message.locked { background:#fff0f1; color:#a32432; border:1px solid #efc8cd; }
.risk-message.good { background:#eff8f4; color:#0c6b4f; border:1px solid #cfe8dc; }
.intraday-section { margin-bottom:18px; }
.intraday-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px; padding:0 18px 18px; }
.live-position-card { border:1px solid var(--line); border-radius:16px; padding:16px; background:#fff; }
.live-position-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:14px; }
.live-position-head strong { font-size:18px; }
.live-position-head small { display:block; color:var(--muted); margin-top:3px; }
.live-position-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.live-position-grid div { background:#f6f8f9; border-radius:10px; padding:10px; }
.live-position-grid span { display:block; color:var(--muted); font-size:10px; margin-bottom:4px; }
.live-position-grid strong { font-size:14px; overflow-wrap:anywhere; }
.compact-live-list { display:grid; gap:10px; padding:0 18px 18px; }
.compact-live-row { border:1px solid var(--line); border-radius:14px; padding:13px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; gap:12px; align-items:center; }
.compact-live-row small { display:block; color:var(--muted); margin-top:3px; }
.live-status { padding:5px 9px; border-radius:999px; background:#eef3f5; font-size:10px; font-weight:800; text-transform:uppercase; }
.live-status.complete { background:#eaf7f1; color:#087451; }
.live-status.rejected, .live-status.cancelled { background:#fff0f1; color:#a32432; }
@media(max-width:900px){
  .intraday-status-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .intraday-grid { grid-template-columns:1fr; }
  .quote-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px){
  .intraday-heading .btn { width:100%; }
  .intraday-status-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .intraday-status-strip article { padding:13px; }
  .intraday-status-strip strong { font-size:17px; }
  .analyser-controls { grid-template-columns:1fr; }
  .analyser-controls .btn { width:100%; }
  .intraday-analyser-body, .risk-form { padding:0 14px 16px; }
  .risk-message { margin-inline:14px; }
  .bias-card { padding:16px; }
  .bias-card strong { font-size:28px; }
  .quote-metrics { gap:8px; }
  .quote-metrics div { padding:10px; }
  .compact-live-row { grid-template-columns:1fr auto; }
  .compact-live-row > div:nth-child(2) { grid-column:1/-1; grid-row:2; }
  .intraday-cards, .compact-live-list { padding-inline:12px; }
}

/* BOKER V6 — Guided Intraday */
.intraday-status-strip { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
.analyser-controls { grid-template-columns:minmax(0,1fr) auto auto; }
.quote-freshness { display:block; margin-top:4px; color:var(--muted); font-size:11px; font-weight:700; }
#intradayWatchButton.watching { border-color:#aacfc0; background:#eff8f4; color:#087451; }
.trade-plan-card { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.trade-plan-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.trade-plan-head h3 { margin:2px 0 4px; font-size:20px; }
.plan-state { white-space:nowrap; border-radius:999px; padding:7px 10px; background:#eef3f5; color:#536879; font-size:10px; font-weight:850; letter-spacing:.04em; }
.trade-plan-controls { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(160px,.8fr) minmax(220px,1.4fr); gap:10px; align-items:end; }
.quick-stop-wrap > span { display:block; color:var(--muted); font-size:11px; margin-bottom:7px; }
.quick-stop-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.quick-stop-buttons button { min-height:39px; padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:#f7f9fa; font-weight:750; cursor:pointer; }
.quick-stop-buttons button:hover { background:#eef3f5; }
.trade-plan-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; }
.trade-plan-summary div { padding:11px; border-radius:12px; background:#f6f8f9; min-width:0; }
.trade-plan-summary span { display:block; color:var(--muted); font-size:10px; margin-bottom:4px; }
.trade-plan-summary strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.trade-plan-note { margin:12px 0 0; padding:11px 13px; border-radius:11px; background:#f6f8f9; color:#536879; font-size:12px; line-height:1.5; }
.broker-holding-card { border-style:solid; }
@media(max-width:900px){
  .analyser-controls { grid-template-columns:1fr 1fr; }
  .analyser-controls label { grid-column:1/-1; }
  .trade-plan-controls { grid-template-columns:1fr 1fr; }
  .quick-stop-wrap { grid-column:1/-1; }
  .trade-plan-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px){
  .analyser-controls { grid-template-columns:1fr; }
  .analyser-controls label { grid-column:auto; }
  .trade-plan-card { padding:14px; }
  .trade-plan-head { display:block; }
  .plan-state { display:inline-block; margin-top:8px; }
  .trade-plan-controls { grid-template-columns:1fr; }
  .quick-stop-wrap { grid-column:auto; }
  .trade-plan-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
}

/* BOKER V7 — Simple Trading + Zerodha Auto Sync */
.advanced-entry { border:1px solid var(--line); border-radius:14px; padding:0 14px; background:#fafbfc; }
.advanced-entry > summary { cursor:pointer; padding:13px 0; font-weight:750; color:#314d60; }
.advanced-entry > summary span { margin-left:6px; font-size:11px; font-weight:500; color:var(--muted); }
.advanced-entry-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 0 14px; }
.source-chip { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:4px 9px; border-radius:999px; background:#eaf7f1; color:#087451; font-size:10px; font-weight:850; letter-spacing:.06em; }
.broker-holdings-main { margin-bottom:18px; }
.holdings-account-details { padding:0 18px 18px; }
.holdings-account-details > summary { margin-bottom:10px; }
.simple-status-strip { grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); }
.simple-trading-panel { margin-bottom:18px; }
.simple-analyser-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto; }
.bias-topline { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.freshness-badge { display:inline-flex; align-items:center; justify-content:center; min-height:26px; padding:4px 9px; border-radius:999px; font-size:10px; font-weight:850; letter-spacing:.05em; background:#eef3f5; color:#536879; }
.freshness-badge.fresh { background:#eaf7f1; color:#087451; }
.freshness-badge.delayed { background:#fff7e8; color:#976313; }
.freshness-badge.stale { background:#fff0f1; color:#a32432; }
.freshness-badge.closed { background:#eef1f4; color:#5c6872; }
.primary-trade-plan { border-width:2px; box-shadow:0 10px 28px rgba(34,60,80,.06); }
.direction-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.direction-choice { text-align:left; border:1px solid var(--line); border-radius:14px; background:#f7f9fa; padding:12px 14px; cursor:pointer; color:#274356; }
.direction-choice span { display:block; font-size:10px; font-weight:850; letter-spacing:.07em; color:var(--muted); }
.direction-choice strong { display:block; margin:3px 0; font-size:15px; }
.direction-choice small { color:var(--muted); }
.direction-choice.active { background:#eff8f4; border-color:#acd6c5; box-shadow:inset 0 0 0 1px #acd6c5; }
.direction-choice[data-trade-direction="SHORT"].active { background:#fff3f3; border-color:#ebc9cd; box-shadow:inset 0 0 0 1px #ebc9cd; }
.simple-plan-controls { grid-template-columns:minmax(150px,.6fr) minmax(250px,1.4fr); }
.simple-plan-summary .stop-box { background:#fff3f3; }
.simple-plan-summary .target-box { background:#eff8f4; }
.compact-details { border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.compact-details > summary, .live-details > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; color:#284355; }
.compact-details > summary::-webkit-details-marker, .live-details > summary::-webkit-details-marker { display:none; }
.compact-details > summary::after, .live-details > summary::after { content:"＋"; font-weight:800; color:var(--muted); margin-left:auto; }
.compact-details[open] > summary::after, .live-details[open] > summary::after { content:"−"; }
.compact-details > summary span, .live-details > summary span { min-width:0; }
.compact-details > summary span > strong, .live-details > summary span > strong { display:block; font-size:16px; }
.compact-details > summary span > small, .live-details > summary span > small { display:block; color:var(--muted); margin-top:2px; font-weight:450; }
.compact-details > summary > b, .live-details > summary > b { margin-left:auto; padding:5px 8px; border-radius:999px; background:#f2f5f6; font-size:10px; white-space:nowrap; }
.details-body { padding:0 18px 18px; }
.market-details { margin-top:14px; }
.risk-details { margin-bottom:18px; }
.risk-details .risk-form { padding:0; }
.risk-details .risk-message { margin:14px 0 0; }
.risk-details .feed-note { margin-bottom:0; }
.live-details { padding:0; }
.live-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.btn-mini { min-height:34px; padding:6px 9px; font-size:11px; border-radius:9px; }
@media(max-width:700px){
  .advanced-entry-grid { grid-template-columns:1fr; }
  .simple-analyser-controls { grid-template-columns:1fr; }
  .simple-analyser-controls .btn { width:100%; }
  .direction-picker { grid-template-columns:1fr 1fr; }
  .simple-plan-controls { grid-template-columns:1fr; }
  .holdings-account-details { border:1px solid var(--line) !important; padding:0 14px 14px !important; }
  .holdings-account-details > summary { display:block !important; }
  .holdings-account-details:not([open]) > .table-wrap,
  .holdings-account-details:not([open]) > .holding-cards,
  .holdings-account-details:not([open]) > .empty-state { display:none !important; }
}
@media(max-width:430px){
  .direction-picker { grid-template-columns:1fr; }
  .simple-plan-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compact-details > summary, .live-details > summary { padding:14px; }
  .details-body { padding:0 14px 14px; }
  .freshness-badge { font-size:9px; }
}
.type-badge.buy { color:#066b4e; background:#ddf6ec; }
.type-badge.sell { color:#a62935; background:#fee6e9; }

/* BOKER V8 — clear Zerodha sync health */
.zerodha-sync-health{display:flex;align-items:center;gap:10px;margin:-5px 0 18px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(8,19,34,.035)}
.zerodha-sync-health .sync-health-dot{font-size:19px;line-height:1}
.zerodha-sync-health div{display:grid;gap:2px;min-width:0}
.zerodha-sync-health strong{font-size:13px}
.zerodha-sync-health small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.zerodha-sync-health.sync-connected{border-color:#bfe7d8;background:#f2fbf7;color:#087451}
.zerodha-sync-health.sync-connected small{color:#4e7668}
.zerodha-sync-health.sync-checking,.zerodha-sync-health.sync-syncing,.zerodha-sync-health.sync-partial{border-color:#ead9a7;background:#fffaf0;color:#8a6412}
.zerodha-sync-health.sync-error,.zerodha-sync-health.sync-disconnected{border-color:#f0c2c7;background:#fff5f6;color:#a32432}
@media(max-width:520px){.zerodha-sync-health{margin-top:-8px;padding:11px 12px}.zerodha-sync-health strong{font-size:12px}.zerodha-sync-health small{font-size:10px}.topbar #zerodhaHeaderBadge{white-space:nowrap;max-width:145px;overflow:hidden;text-overflow:ellipsis}}


/* BOKER V9 — stable Zerodha session handling */
.zerodha-sync-health .sync-health-copy{display:grid;gap:2px;min-width:0;flex:1}
.btn-danger-soft{border-color:#e8b6bc;background:#fff;color:#a32432}
.btn-danger-soft:hover{background:#fff3f4}
@media(max-width:620px){.zerodha-sync-health{align-items:flex-start;flex-wrap:wrap}.zerodha-sync-health .btn{width:100%;margin-top:4px}}

/* BOKER V11 — holdings-first simplified model */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color: #fff; font-size: 19px; font-weight: 900;
}
.holdings-hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.holdings-hero-row h1 { margin:2px 0 5px; font-size:clamp(28px,4vw,40px); line-height:1; }
.portfolio-strip {
  display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:12px; margin-bottom:14px;
  padding:16px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow);
}
.portfolio-strip > div { min-height:104px; padding:16px; border-radius:17px; background:#f7f9fc; display:flex; flex-direction:column; justify-content:center; }
.portfolio-strip span { color:var(--muted); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.portfolio-strip strong { margin-top:8px; font-size:clamp(24px,3.2vw,34px); line-height:1.05; }
.portfolio-strip small { margin-top:8px; color:var(--muted); }
.portfolio-pnl-positive { background:#e8f7f1 !important; }
.portfolio-pnl-negative { background:#fff0f1 !important; }
.holdings-data-note { margin:0 0 16px; padding:11px 14px; border-radius:13px; color:#6f6241; background:#fff8e7; border:1px solid #eadcb7; font-size:12px; }
.simple-holding-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:15px; }
.simple-holding-card {
  border:1px solid var(--line); border-radius:20px; overflow:hidden; padding:16px; background:var(--surface); box-shadow:0 8px 24px rgba(8,19,34,.06);
}
.simple-holding-card.holding-profit { background:linear-gradient(145deg,#fff 0%,#f1fcf7 100%); border-color:#bfe8d7; }
.simple-holding-card.holding-loss { background:linear-gradient(145deg,#fff 0%,#fff3f4 100%); border-color:#efc6cb; }
.simple-holding-card.holding-flat { background:linear-gradient(145deg,#fff,#f6f8fb); }
.simple-holding-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.simple-holding-head strong { display:block; color:var(--navy-800); font-size:20px; line-height:1.15; }
.simple-holding-head small { display:block; margin-top:5px; color:var(--muted); }
.simple-holding-head .holding-meta { font-size:12px; line-height:1.5; font-weight:650; }
.holding-meta span { padding:0 3px; opacity:.65; }
.holding-pl-pill { flex-shrink:0; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid currentColor; font-size:13px; }
.simple-holding-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.simple-holding-grid > div { padding:13px; border-radius:15px; background:rgba(255,255,255,.70); border:1px solid rgba(132,148,166,.22); }
.simple-holding-grid span, .five-year-band span, .simple-total-pl span { display:block; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.simple-holding-grid strong { display:block; margin-top:5px; font-size:17px; }
.simple-holding-grid > div:last-child { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.simple-total-pl { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:11px; padding:14px 15px; border-radius:15px; background:rgba(10,20,35,.06); }
.simple-total-pl strong { font-size:22px; }
.holding-profit .simple-total-pl strong { color:var(--green); }
.holding-loss .simple-total-pl strong { color:var(--red); }
.five-year-band { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px; }
.five-year-band > div { padding:12px 13px; border-radius:14px; background:rgba(10,20,35,.045); }
.five-year-band strong { display:block; margin-top:4px; color:var(--ink); font-size:15px; }

.target-create-panel { padding:18px; margin-bottom:16px; }
.target-source-picker { display:flex; gap:8px; margin-bottom:16px; }
.target-source { flex:1; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-weight:800; cursor:pointer; }
.target-source.active { border-color:#146582; background:#e9f7fa; color:#07516d; }
.target-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:end; }
.target-form-grid [hidden] { display:none !important; }
.target-form-grid > button { justify-self:start; }
.target-form-grid label { display:grid; gap:6px; font-weight:800; }
.target-form-grid select,.target-form-grid input { min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); }
.target-note { margin:13px 0 0; color:var(--muted); font-size:12px; }
.target-card-list { display:grid; gap:12px; }
.target-card { display:grid; grid-template-columns:1.4fr 1.2fr 1fr auto; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.target-card > div:first-child strong { display:block; font-size:17px; }
.target-card small { display:block; margin-top:4px; color:var(--muted); }
.target-prices { display:flex; gap:14px; flex-wrap:wrap; }
.target-prices span { color:var(--muted); font-size:12px; }
.target-prices b { display:block; color:var(--ink); font-size:16px; }
.target-status { font-weight:850; color:#8a681d; }
.target-hit { border-color:#9edac4; background:#eefaf5; }
.target-hit .target-status { color:var(--green); }

.more-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.more-summary-grid article { min-height:110px; padding:16px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.more-summary-grid span { display:block; color:var(--muted); font-size:11px; font-weight:850; text-transform:uppercase; }
.more-summary-grid strong { display:block; margin-top:10px; font-size:24px; }
.connection-card-v11 { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px; margin-bottom:16px; }
.connection-card-v11 h2 { margin:4px 0 5px; font-size:22px; }
.connection-actions-v11 { display:flex; gap:9px; flex-wrap:wrap; }
.connection-compact-v11 { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.connection-compact-v11 > span:first-child { margin-right:auto; font-size:13px; font-weight:750; }
.connection-compact-v11 .btn { min-height:38px; padding:8px 12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.symbol-entry { display:flex; gap:8px; }
.symbol-entry input { min-width:0; flex:1; }
.symbol-entry .btn { flex:none; }
.sold-v11 { margin-bottom:16px; }
.sold-card-list { display:grid; gap:9px; padding:0 16px 16px; }
.sold-mini-card { display:flex; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--line); border-radius:14px; }
.sold-mini-card.holding-profit { background:#effaf5; border-color:#c3e7d8; }
.sold-mini-card.holding-loss { background:#fff2f3; border-color:#edc9cd; }
.sold-mini-card strong { display:block; }
.sold-mini-card small,.sold-mini-card span { color:var(--muted); }
.sold-mini-card > div:last-child { text-align:right; }
.tool-links-v11 { margin-bottom:16px; }
.tool-link-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0 18px 18px; }

/* Light / dark background switch */
html[data-theme="dark"] {
  --ink:#edf3fb; --muted:#9cacbd; --line:#25364a; --surface:#111d2b; --canvas:#07111c;
  --green-soft:#0c2b22; --red-soft:#34171d; --shadow:0 12px 32px rgba(0,0,0,.28);
}
html[data-theme="dark"] body { background:var(--canvas); color:var(--ink); }
html[data-theme="dark"] .sidebar { background:#0b1724; border-color:var(--line); }
html[data-theme="dark"] .nav-item { color:#aebccc; }
html[data-theme="dark"] .nav-item:hover { background:#132235; color:#fff; }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .portfolio-strip,
html[data-theme="dark"] .more-summary-grid article,
html[data-theme="dark"] .target-card { background:var(--surface); color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] .portfolio-strip > div,
html[data-theme="dark"] .simple-holding-grid > div,
html[data-theme="dark"] .five-year-band > div { background:#172536; border-color:#2b3b50; }
html[data-theme="dark"] .simple-holding-card { background:#111d2b; border-color:#2c3b4e; }
html[data-theme="dark"] .simple-holding-card.holding-profit { background:linear-gradient(145deg,#111d2b,#0c2b22); border-color:#245f4c; }
html[data-theme="dark"] .simple-holding-card.holding-loss { background:linear-gradient(145deg,#111d2b,#34171d); border-color:#66313a; }
html[data-theme="dark"] .target-source.active { background:#103c4a; border-color:#32829c; color:#b7efff; }
html[data-theme="dark"] .simple-holding-head strong,
html[data-theme="dark"] .five-year-band strong,
html[data-theme="dark"] .target-prices b,
html[data-theme="dark"] .company-cell strong { color:var(--ink); }
html[data-theme="dark"] .simple-total-pl { background:#09131e88; }
html[data-theme="dark"] .holding-pl-pill { background:#09131ecc; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:#0d1926; color:var(--ink); border-color:#34465a; }
html[data-theme="dark"] .btn-secondary { background:#142234; color:#e7eef7; border-color:#3b4c5f; }
html[data-theme="dark"] .btn-ghost { border-color:#3b4c5f; }
html[data-theme="dark"] th { background:#111d2b; color:#9fb0c3; border-color:#2c3b4e; }
html[data-theme="dark"] td { border-color:#223246; }
html[data-theme="dark"] tbody tr:hover { background:#111c2a; }
html[data-theme="dark"] .holdings-data-note { background:#2b2414; color:#dac998; border-color:#5a4a20; }
html[data-theme="dark"] .target-hit { background:#0d2b23; border-color:#255c4b; }
html[data-theme="dark"] .sold-mini-card.holding-profit { background:#0d2b23; border-color:#255c4b; }
html[data-theme="dark"] .sold-mini-card.holding-loss { background:#32171c; border-color:#633038; }
html[data-theme="dark"] .bottom-nav { background:#0d1926f5; border-color:#2d4054; }
html[data-theme="dark"] .bottom-nav .nav-item { color:#8294a8; }
html[data-theme="dark"] .bottom-nav .nav-item.active { background:#16283a; color:#78d2ce; box-shadow:inset 0 -3px #b99657; }
html[data-theme="dark"] .login-card { background:#111d2b; color:var(--ink); }

@media (max-width: 820px) {
  .holdings-hero-row { align-items:flex-start; flex-direction:column; }
  .holdings-hero-row .btn { width:100%; }
  .portfolio-strip { grid-template-columns:1fr 1fr; padding:11px; }
  .portfolio-strip-main { grid-column:1 / -1; }
  .simple-holding-list { grid-template-columns:1fr; }
  .target-form-grid { grid-template-columns:1fr; }
  .target-card { grid-template-columns:1fr 1fr; }
  .target-card > div:first-child { grid-column:1 / -1; }
  .more-summary-grid { grid-template-columns:1fr 1fr; }
  .connection-card-v11 { align-items:stretch; flex-direction:column; }
  .connection-compact-v11 > span:first-child { flex-basis:100%; }
  .connection-actions-v11 .btn { flex:1; }
  .tool-link-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px) {
  .target-source-picker { flex-direction:column; }
  .portfolio-strip > div { min-height:92px; padding:13px; }
  .portfolio-strip strong { font-size:23px; }
  .simple-holding-card { padding:15px; border-radius:19px; }
  .simple-holding-grid { gap:8px; }
  .simple-holding-grid > div { padding:11px; }
  .simple-holding-grid strong { font-size:15px; }
  .simple-total-pl strong { font-size:20px; }
  .target-card { grid-template-columns:1fr; }
  .target-card > div:first-child { grid-column:auto; }
  .more-summary-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .more-summary-grid article { min-height:94px; padding:13px; }
  .more-summary-grid strong { font-size:19px; }
  .tool-link-grid { grid-template-columns:1fr; }
  .topbar .brand img { width:46px; height:46px; border-radius:12px; }
  .theme-toggle { width:34px; height:34px; }
}