:root{color-scheme:light;--bg:#f0f5f4;--card:#fff;--ink:#162721;--muted:#53665e;--border:#dce8e2;--green:#00794c;--mint:#daf8e9;--side:#fbfdfc;--shadow:0 8px 26px #143c2910}html[data-theme=dark]{color-scheme:dark;--bg:#080e19;--card:#101a29;--ink:#eef5ff;--muted:#a9b7c7;--border:#25354c;--green:#37f19d;--mint:#073e2d;--side:#0d1625;--shadow:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px system-ui,sans-serif;display:grid;grid-template-columns:220px 1fr;min-height:100vh}aside{position:sticky;top:0;height:100vh;padding:24px 14px;background:var(--side);border-right:1px solid var(--border);display:flex;flex-direction:column}a{color:inherit;text-decoration:none}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;padding:0 8px}.brand b{font-size:32px;color:var(--green)}small{display:block;font-size:11px;color:var(--muted)}nav{display:grid;gap:5px;margin-top:28px}nav a,.foot{padding:12px;border-radius:10px}nav a[aria-current],nav a:hover,.foot,.badge{background:var(--mint);color:var(--green)}.foot{margin-top:auto}main{padding:24px;min-width:0}header,.panelhead,.tools,.actions{display:flex;align-items:center;justify-content:space-between;gap:10px}h1,h2,p{margin:0}h1{font-size:30px}h2{font-size:16px;margin-bottom:8px}p{color:var(--muted);font-size:13px;line-height:1.5}.badge{padding:7px 10px;border-radius:20px;font-size:12px;white-space:nowrap}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.metrics article,.panel{border:1px solid var(--border);border-radius:15px;background:var(--card);box-shadow:var(--shadow);padding:15px}.metrics article{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.metrics i{font-style:normal;background:var(--mint);color:var(--green);font-size:23px;padding:7px 10px;border-radius:10px}.metrics strong{display:block;color:var(--ink);font-size:17px;margin-top:4px}.grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(275px,1fr);gap:12px;align-items:start}.panel{scroll-margin-top:14px}canvas{width:100%;height:215px;display:block}#status{color:var(--green);display:block;background:var(--mint);padding:11px;border-radius:9px}dl{display:grid;grid-template-columns:1fr auto;gap:7px;margin:12px 0;font-size:13px}dt{color:var(--muted)}dd{margin:0;text-align:right}button,input,select{font:inherit;border:1px solid var(--border);border-radius:8px;padding:8px;color:var(--ink);background:var(--card)}button{cursor:pointer;font-weight:650}button:disabled{opacity:.45;cursor:default}.actions{margin-bottom:8px}.actions button{flex:1}.actions button:first-child,form button{background:#08764d;color:white}.actions button:last-child{color:#db4a58}.table{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}td,th{padding:9px 4px;border-bottom:1px solid var(--border)}th{color:var(--muted)}form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}label{font-size:12px;color:var(--muted)}input,select{width:100%;display:block;margin-top:4px}form button{align-self:end;font-size:12px}ul{margin:0;padding:0;list-style:none}li{padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}time{color:var(--muted);margin-right:9px}#notice{position:sticky;bottom:8px;margin-top:8px;background:var(--card);border-radius:8px;padding:8px}#notice:empty{display:none}@media(max-width:960px){body{grid-template-columns:165px 1fr}main{padding:15px}.metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){body{display:block}aside{position:static;height:auto;padding:9px 14px;border-right:0;border-bottom:1px solid var(--border)}nav{display:flex;overflow:auto;margin-top:8px;white-space:nowrap;font-size:12px}nav a{padding:8px}.foot,.tools .badge{display:none}.grid{grid-template-columns:1fr}#controls{grid-row:1}h1{font-size:24px}}

#settings { max-width: 960px; margin-top: 22px; }
#settings form { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; }
.settings-basic .panelhead h2 { margin: 0; }
.settings-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 16px 0 10px; }
#settings label, .entry-columns { font-weight: 650; }
#settings input, #settings select { min-height: 42px; font-size: 15px; }
#settings :is(input, select, button):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
#entry-levels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
#entry-levels fieldset { min-width: 0; margin: 0; }
.entry-group legend { padding: 5px 10px; border-radius: 7px; color: var(--green); background: var(--mint); font-weight: 750; }
.entry-group[data-side="SHORT"] legend { color: #a32948; background: #ffe6ed; }
html[data-theme="dark"] .entry-group[data-side="SHORT"] legend { color: #ffabc0; background: #492436; }
.entry-row { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: center; margin-top: 8px; }
.entry-row input { margin: 0; font-variant-numeric: tabular-nums; }
.entry-columns { margin-top: 13px; color: var(--muted); font-size: 12px; }
.entry-number { justify-self: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-actions button { min-height: 44px; padding-inline: 18px; font-size: 14px; }
@media (max-width: 850px) { .settings-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 540px) {
  #entry-levels { grid-template-columns: minmax(0,1fr); }
  .settings-actions { flex-direction: column; align-items: stretch; }
  .settings-actions p:empty { display: none; }
}
nav a { display: flex; align-items: center; gap: 9px; }
.nav-icon { flex-shrink: 0; font-size: 17px; line-height: 1; }

@media (max-width: 720px) {
  aside nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 6px max(5px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
    overflow: visible;
    background: var(--side);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px #0001;
  }
  aside nav a {
    min-height: 50px;
    padding: 4px 1px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    font-size: clamp(9px, 2.75vw, 12px);
  }
  aside nav a[aria-current] { font-weight: 700; }
  main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  #notice { bottom: calc(70px + env(safe-area-inset-bottom)); }
}

#trade-history { margin-top: 12px; }
#trade-history .table { margin-top: 8px; }
#trade-history th, #trade-history td { white-space: nowrap; padding-inline: 10px; }

.history-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 12px; }
.history-filters select, .history-filters input { min-height: 40px; }



/* Glass surfaces and shared interaction states */
:root {
  --surface: #ffffffbe;
  --glass-line: #ffffff90;
  --glass-shadow: 0 6px 24px #163d3214;
  --glow: #a8ead39c;
  --cool-glow: #c4d5ff9c;
}
html[data-theme="dark"] {
  --surface: #142134c9;
  --glass-line: #a2b9d637;
  --glass-shadow: 0 6px 24px #0003;
  --glow: #09504383;
  --cool-glow: #233e8566;
}
body {
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(ellipse at 15% 0%, var(--glow), transparent 49%),
              radial-gradient(ellipse at 96% 19%, var(--cool-glow), transparent 55%), var(--bg);
  background-attachment: fixed;
}
main { width: 100%; max-width: 1500px; margin-inline: auto; }
main > header { padding: 4px 0 10px; }
main > header h1 { letter-spacing: -.045em; }
.panel, .metrics article, aside {
  background: var(--surface);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(145%);
}
.panel, .metrics article { border-radius: 19px; }
.metrics article { min-width: 0; min-height: 90px; }
.metrics article > div { min-width: 0; }
.metrics strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metrics small { margin-top: 4px; }
.metrics small a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
nav a, button, input, select {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
nav a[aria-current] { box-shadow: inset 0 0 0 1px var(--glass-line); }
button:not(:disabled):active { transform: scale(.97); }
:where(button, a, input, select):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (hover: hover) {
  button:not(:disabled):hover { box-shadow: 0 4px 14px #00895935; }
}
@keyframes page-enter {
  from { opacity: .55; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: page-enter .24s ease-out both; }
@media (max-width: 720px) {
  aside nav { background: var(--surface); backdrop-filter: blur(22px) saturate(150%); }
  /* Keep fixed navigation relative to the viewport on mobile. */
  aside { backdrop-filter: none; box-shadow: none; }
  .metrics, .grid { gap: 10px; }
  .metrics article { padding: 10px; gap: 7px; }
  .metrics i { padding: 5px 7px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none; }
  nav a, button, input, select { transition: none; }
}

.telegram-toggle { display: flex; align-items: center; gap: 8px; }
#settings .telegram-toggle input { width: auto; min-height: 0; margin: 0; accent-color: var(--green); }

#positions { grid-column: 1 / -1; }

.tools { align-items: flex-start; }
.exchange-tools { display: grid; justify-items: stretch; gap: 6px; min-width: 0; }
#pnl-filters { width: 100%; }
#pnl-filters select, #pnl-filters input { width: 100%; margin-top: 0; font-size: 12px; }
#pnl-date-label:not([hidden]) { display: block; margin-top: 6px; }
@media (max-width: 720px) {
  .tools .exchange-tools .badge { display: block; font-size: 10px; padding: 5px 7px; }
}

#settings .settings-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  align-items: end;
}
#settings .settings-fields label { display: grid; gap: 4px; }
#settings .settings-fields :is(input, select) { margin-top: 0; }
#entry-levels { align-items: start; }
#entry-levels .entry-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: 8px;
}
#entry-levels .entry-columns span { overflow-wrap: anywhere; }
#entry-levels .remove-entry { min-height: 42px; padding: 0; font-size: 18px; }
#entry-levels .add-entry { margin-top: 12px; background: var(--mint); color: var(--green); }

html, .table { scrollbar-width: none; }
html::-webkit-scrollbar, .table::-webkit-scrollbar { display: none; }
#api { max-width: 960px; margin-top: 22px; }
#api > form { display: block; }
#api > form .settings-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (prefers-reduced-motion: no-preference) {
  .page-enter .panel, .page-enter .metrics article {
    animation: glass-reveal .36s ease-out backwards;
  }
  .page-enter .metrics article:nth-child(2) { animation-delay: 35ms; }
  .page-enter .metrics article:nth-child(3) { animation-delay: 70ms; }
  .page-enter .metrics article:nth-child(4) { animation-delay: 105ms; }
}
@keyframes glass-reveal {
  from { opacity: .55; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
#credentials-form [data-credential-service][hidden] { display: none; }

.credential-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.credential-actions button { min-height: 44px; }
#credentials-status { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 540px) {
  .credential-actions button { flex: 1 1 125px; }
  main > header { flex-wrap: wrap; }
  .grid > *, .panel { min-width: 0; }
}
@media (max-width: 350px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
}

#settings .entry-margin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
}

#entry-levels .entry-row {
  grid-template-columns: 30px repeat(2, minmax(0, 1fr)) 34px;
  gap: 6px;
}
#entry-levels input { padding-inline: 5px; min-width: 0; }

#telegram-form { margin-top: 16px; }

#api [role="status"] { min-width: 0; overflow-wrap: anywhere; }

#settings .panel { padding: clamp(14px, 2.4vw, 24px); }
#settings h2 { font-size: 17px; line-height: 1.3; letter-spacing: -.015em; }
#settings p { max-width: 68ch; line-height: 1.55; }
#settings p + p { margin-top: 6px; }
#settings .settings-fields label, #settings .entry-margin label { line-height: 1.4; }
#settings .settings-fields { gap: 12px 16px; }
#settings .entry-group legend { font-size: 14px; }
#settings .entry-columns { font-size: 11px; line-height: 1.25; }
#settings .entry-columns span { overflow-wrap: normal; }

#api > form .settings-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
#api > form [role="status"] { flex: 1 1 180px; }
#api > form [role="status"]:empty { display: none; }
#api > form .credential-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
}
#api > form .credential-actions button { padding-inline: 14px; font-size: 13px; }
#api > form [data-test-connection] { background: var(--card); color: var(--green); }
@media (max-width: 540px) {
  #api > form .settings-actions { flex-direction: column; }
  #api > form [role="status"] { flex: auto; }
}
@media (max-width: 360px) {
  #api > form .credential-actions { grid-template-columns: 1fr; }
}

:root { --field-border: #55776a32; }
html[data-theme="dark"] { --field-border: #a2b9d64a; }

:where(input, select, textarea):not([type="checkbox"], [type="radio"]) {
  border-color: var(--field-border);
  border-radius: 11px;
}

.bot-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 4px;
  scroll-margin-top: 12px;
}
.bot-toolbar .actions { flex-wrap: wrap; justify-content: flex-start; margin: 0; gap: 6px; }
.bot-toolbar .actions button { flex: none; min-height: 38px; }
.bot-toolbar [data-action="close-all"] { border-color: #db4a5860; }
.bot-toolbar-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.bot-toolbar #status { padding: 6px 9px; white-space: nowrap; }
@media (max-width: 540px) {
  .bot-toolbar { flex-direction: column; align-items: stretch; }
  .bot-toolbar .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bot-toolbar [data-action="close-all"] { grid-column: 1 / -1; }
}

.bot-toolbar-meta {
  display: flex;
  flex: 1 1 270px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bot-toolbar-meta #pnl-filters { width: min(42%, 155px); margin-inline-start: auto; }
@media (max-width: 540px) {
  .bot-toolbar-meta { flex-basis: auto; }
}
#pnl-period { border-color: transparent; }
#pnl-period:focus:not(:focus-visible) { outline: none; box-shadow: none; }

#chart-view { margin-top: 14px; }
#chart-view canvas { height: clamp(280px, 60vh, 680px); }

#margin-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:10px 16px; margin:12px 0; padding:12px; border:1px solid color-mix(in srgb,currentColor 12%,transparent); border-radius:12px; }
#margin-summary dt { font-size:.78rem; opacity:.75; }
#margin-summary dd { margin:4px 0 0; font-weight:700; font-variant-numeric:tabular-nums; }
#margin-summary [data-sign="positive"] { color:#078358; }
#margin-summary [data-sign="negative"] { color:#d13b55; }
#margin-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0;padding:0;border:0} #margin-summary > div {min-width:0;padding:10px 12px;border:1px solid color-mix(in srgb,currentColor 10%,transparent);border-radius:12px} #margin-summary dt {line-height:1.3} #margin-summary dd {font-size:clamp(.85rem,2vw,1.1rem);overflow-wrap:anywhere} #positions .table {overflow-x:auto} #positions th,#positions td {white-space:nowrap} #positions th:not(:first-child),#positions td:not(:first-child) {text-align:right;font-variant-numeric:tabular-nums} @media(max-width:620px){#margin-summary {grid-template-columns:repeat(2,minmax(0,1fr))} #positions th,#positions td {padding-inline:6px;font-size:.78rem}}

#dashboard-view > .grid { grid-template-columns: minmax(0, 1fr); }
#chart-panel { min-width: 0; width: 100%; }

#positions-view #positions > .table { display: none; }

#positions [data-sign="negative"], #trade-history [data-sign="negative"], #pnl[data-sign="negative"] { color: #d62042; }
#positions [data-sign="positive"], #trade-history [data-sign="positive"], #pnl[data-sign="positive"] { color: #175bd3; }
html[data-theme="dark"] #positions [data-sign="negative"], html[data-theme="dark"] #trade-history [data-sign="negative"], html[data-theme="dark"] #pnl[data-sign="negative"] { color: #ff7588; }
html[data-theme="dark"] #positions [data-sign="positive"], html[data-theme="dark"] #trade-history [data-sign="positive"], html[data-theme="dark"] #pnl[data-sign="positive"] { color: #79acff; }

#trade-history th:last-child,
#trade-history td:last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: -6px 0 10px -9px var(--muted);
  text-align: right;
}
#settings { width: 100%; margin-inline: auto; }
#settings #form { gap: 16px; }
#settings .settings-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  align-items: end;
}
#settings label { min-width: 0; }
#settings :is(input, select):not([type="checkbox"]) { width: 100%; box-sizing: border-box; }
#settings .panelhead { flex-wrap: wrap; gap: 8px; }
#settings .telegram-toggle { margin-block: 10px; }
#settings .entry-margin { margin-block: 14px; }
#settings .entry-row { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 36px; }
@media (max-width: 700px) {
  #settings #entry-levels { grid-template-columns: minmax(0, 1fr); }
  #settings .settings-actions button { width: 100%; }
}
#settings #entry-levels { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
#settings #entry-levels .entry-group { width: 100%; box-sizing: border-box; }
#settings #entry-levels .entry-row { grid-template-columns: 34px repeat(2, minmax(0, 1fr)) 40px; gap: 6px; }
#settings #entry-levels .entry-columns span { overflow-wrap: anywhere; }
#settings #entry-levels .remove-entry { width: 100%; min-width: 0; margin: 0; }
#settings .settings-actions { flex-wrap: wrap; }
#settings .settings-actions p { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 440px) {
  #settings #entry-levels .entry-row { grid-template-columns: 27px repeat(2, minmax(0, 1fr)) 36px; gap: 5px; }
}
#settings #bot-summary { margin-block: 0 16px; min-width: 0; }
#bot-summary dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
#bot-summary :is(dt, dd) { min-width: 0; margin: 0; overflow-wrap: anywhere; }
#bot-summary dd { text-align: end; }
#bot-summary p { margin-bottom: 0; }