:root {
  color-scheme: dark;
  --bg:#080d19; --panel:#111a2b; --panel-2:#0b1323; --panel-3:#17233a;
  --line:#263654; --line-soft:#1d2a42; --text:#e7edf8; --muted:#8493ad;
  --blue:#2f6df6; --blue-2:#4f86ff; --green:#55e3a7; --green-bg:#10251f;
  --red:#ff7185; --red-bg:#2b151d; --yellow:#ffc66d; --shadow:0 18px 50px rgba(0,0,0,.28);
  --radius:16px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--bg); min-height:100%; }
body { margin:0; min-width:320px; min-height:100vh; background:
  radial-gradient(circle at 82% -10%,rgba(47,109,246,.12),transparent 29rem),var(--bg);
  color:var(--text); font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif; font-size:14px; }
button,input,select { font:inherit; }
button { border:1px solid #334664; border-radius:10px; padding:10px 14px; background:#202d45; color:#dce5f4; font-weight:750; cursor:pointer; transition:.16s ease; }
button:hover { border-color:#4a628b; transform:translateY(-1px); }
button:active { transform:translateY(0); }
button:disabled { cursor:not-allowed; opacity:.42; transform:none; }
button.primary { background:var(--blue); border-color:#417cf8; color:#fff; }
button.primary:hover { background:#477fff; }
button.success { color:#061b13; background:var(--green); border-color:#6cebb5; }
button.warning { color:#211603; background:var(--yellow); border-color:#ffd38c; }
button.danger { color:#fff; background:#d94b61; border-color:#ed667b; }
button.danger-soft { color:#ff9cab; background:#281621; border-color:#74303d; }
button.ghost { background:#131e32; border-color:#2b3d5d; }
button.compact { padding:6px 10px; border-radius:8px; font-size:12px; }
button.wide { width:100%; }
button.icon-button { width:36px; height:36px; padding:0; display:grid; place-items:center; font-size:19px; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--blue-2); outline-offset:2px; }

.muted,.hint { color:var(--muted); }
.hint { margin:9px 0 0; font-size:12px; line-height:1.55; }
.eyebrow { margin:0 0 5px; color:#6f9cff; letter-spacing:.14em; font-weight:800; font-size:11px; }
.connection-banner { position:fixed; inset:0 0 auto; z-index:1000; padding:8px 12px; text-align:center; background:#5c2d10; color:#ffd7b2; font-weight:800; }

.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(430px,100%); padding:34px; background:linear-gradient(145deg,rgba(17,26,43,.98),rgba(10,18,34,.98)); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.auth-card h1 { margin:8px 0 4px; font-size:31px; letter-spacing:.03em; }
.auth-card > .muted { margin:0 0 24px; }
.brand-mark { width:68px; height:68px; display:grid; place-items:center; border-radius:20px; background:linear-gradient(145deg,var(--blue),#173a96); color:#fff; font-weight:900; font-size:23px; box-shadow:0 12px 30px rgba(47,109,246,.3); }
.brand-mark.small { width:43px; height:43px; border-radius:13px; font-size:14px; box-shadow:none; }
.segmented { display:flex; gap:3px; padding:3px; border:1px solid var(--line); background:#0a1222; border-radius:11px; }
.segmented button { flex:1; padding:8px 11px; background:transparent; border:0; color:var(--muted); transform:none; }
.segmented button.active { background:#1b2942; color:#fff; box-shadow:0 3px 12px rgba(0,0,0,.2); }
.segmented.three button { padding-inline:5px; font-size:12px; }
.auth-card .segmented { margin-bottom:20px; }
.auth-card form { display:grid; gap:15px; }
.security-note { margin:20px 0 0; padding:12px; border-radius:10px; background:#0b1529; color:#8ea5c9; font-size:12px; line-height:1.55; }
.form-message { min-height:20px; margin:10px 0 0; color:var(--red); font-weight:700; }

label { display:grid; gap:7px; color:#aebbd0; font-size:12px; font-weight:700; }
input,select { width:100%; min-height:42px; border:1px solid #334565; border-radius:9px; padding:9px 11px; background:#0a1222; color:#f4f7fc; }
input::placeholder { color:#586883; }
input:disabled,select:disabled { opacity:.72; color:#9dafc9; }

.app-shell { width:100%; min-height:100vh; padding:0 18px calc(24px + env(safe-area-inset-bottom)); }
.topbar { min-height:78px; display:grid; grid-template-columns:auto minmax(330px,1fr) auto; align-items:center; gap:18px; max-width:1600px; margin:auto; }
.brand-row { display:flex; align-items:center; gap:12px; }
.brand-row h1 { margin:0; font-size:21px; letter-spacing:.04em; }
.brand-row p { margin:2px 0 0; color:var(--muted); font-size:11px; white-space:nowrap; }
.provider-summary { display:flex; align-items:center; justify-content:center; gap:7px; overflow:auto; scrollbar-width:none; }
.provider-summary::-webkit-scrollbar { display:none; }
.provider-chip { flex:0 0 auto; display:flex; gap:9px; align-items:center; padding:8px 11px; background:#0d1627; border-color:#263854; color:#aab7cb; }
.provider-chip b { color:#8da1bf; font-size:10px; text-transform:uppercase; }
.provider-chip.active { border-color:#477fff; box-shadow:inset 0 0 0 1px rgba(79,134,255,.35); color:#fff; }
.provider-chip.running b { color:var(--green); }
.provider-chip.paused b { color:var(--yellow); }
.provider-chip.error b,.provider-chip.required b { color:var(--red); }
.top-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.user-label { color:#9caac0; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.desktop-toolbar { max-width:1600px; margin:0 auto 13px; display:flex; gap:8px; align-items:center; overflow:auto; scrollbar-width:none; }
.desktop-toolbar::-webkit-scrollbar { display:none; }
.desktop-toolbar button { white-space:nowrap; }
.desktop-toolbar .badge { margin-left:auto; }

.badge,.mini-badge { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; border:1px solid #2b4775; border-radius:10px; background:#142442; color:#75a7ff; font-weight:850; }
.badge { padding:8px 11px; min-height:38px; }
.mini-badge { padding:4px 7px; border-radius:7px; font-size:10px; }
.badge.running { color:var(--green); border-color:#22624c; background:var(--green-bg); }
.badge.paused { color:var(--yellow); border-color:#70572c; background:#2b2313; }
.badge.stopped { color:#aac0e0; }
.badge.required,.mini-badge.required,.badge.error { color:var(--red); border-color:#74303d; background:var(--red-bg); }

.workspace { max-width:1600px; min-height:calc(100vh - 150px); margin:auto; display:grid; grid-template-columns:minmax(320px,390px) minmax(0,1fr); gap:14px; align-items:start; }
.settings-column,.content-column { min-width:0; display:grid; gap:12px; }
.settings-column { max-height:calc(100vh - 150px); overflow:auto; padding-right:4px; scrollbar-color:#344865 #0d1525; }
.card { min-width:0; background:rgba(17,26,43,.96); border:1px solid var(--line); border-radius:var(--radius); padding:15px; box-shadow:0 7px 22px rgba(0,0,0,.13); }
.card-title { min-height:27px; margin-bottom:12px; padding-bottom:7px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #1e2b43; }
.card-title h2 { margin:0; font-size:14px; letter-spacing:.01em; }
.card-title > div { display:flex; gap:6px; }
.provider-switch { margin-bottom:13px; }
#credentialForm { display:grid; gap:11px; }
.button-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.field-grid { display:grid; gap:10px; }
.field-grid.two { grid-template-columns:1fr 1fr; }
.toggle-row { grid-template-columns:auto 1fr; align-items:center; gap:10px; margin-top:13px; padding:10px; border:1px solid #273752; border-radius:11px; background:#0b1425; cursor:pointer; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-ui { position:relative; width:42px; height:23px; border-radius:999px; background:#33425b; transition:.2s; }
.toggle-ui::after { content:""; position:absolute; left:3px; top:3px; width:17px; height:17px; border-radius:50%; background:#d7e0ef; transition:.2s; }
.toggle-row input:checked + .toggle-ui { background:var(--blue); }
.toggle-row input:checked + .toggle-ui::after { transform:translateX(19px); background:#fff; }
.toggle-row b,.toggle-row small { display:block; }
.toggle-row small { margin-top:3px; color:var(--muted); font-weight:500; line-height:1.35; }
.live-toggle { border-color:#613342; background:#1c121c; }

.status-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:12px; }
.status-message { margin:0 0 7px; color:#7f9bc7; }
.price-row { display:flex; align-items:baseline; gap:9px; padding:6px 0; }
.price-row strong { font-size:37px; letter-spacing:-.04em; }
.price-row span { color:var(--muted); font-weight:750; }
.position-line,.spread-line,.summary-detail { padding:8px 10px; border-radius:8px; background:#0a1222; color:#b8c6da; }
.spread-line { display:flex; justify-content:space-between; margin-top:6px; }
.spread-line b { color:var(--green); }
.control-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:11px; }
.control-grid button { min-width:0; padding-inline:8px; }
.manual-order-panel { margin-top:9px; padding:10px; border:1px solid #4b3546; border-radius:10px; background:#17121d; }
.manual-order-panel[hidden] { display:none; }
.manual-confirm { display:flex; align-items:center; gap:8px; margin-top:9px; color:#c6b9c7; }
.manual-confirm input { width:17px; min-height:17px; accent-color:var(--blue); }
.warning-text { color:#d7ad65; }
.summary-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.summary-metrics > div { min-width:0; padding:16px 9px; text-align:center; border:1px solid #2a3a56; border-radius:11px; background:#0b1425; }
.summary-metrics span { display:block; min-height:33px; color:#90a1b9; font-size:11px; }
.summary-metrics b { display:block; overflow:hidden; text-overflow:ellipsis; color:#dbe6f8; font-size:16px; }
.summary-metrics b.positive { color:var(--green); }.summary-metrics b.negative { color:var(--red); }
.summary-detail { margin-top:8px; min-height:55px; font-size:12px; line-height:1.55; }
.decision-card { margin-top:12px; }
.decision-lines { display:grid; gap:8px; }
.decision-lines > div { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:8px; }
.decision-lines > div > span { color:#aabbd3; font-weight:850; }
.logic { margin:0; padding:10px 12px; border-radius:8px; border:1px solid #314360; background:#0a1323; overflow:auto; white-space:nowrap; }
.logic.true { color:var(--green); border-color:#22624c; background:var(--green-bg); }
.logic.false { color:#ff8495; border-color:#74303d; background:var(--red-bg); }
.logic.pending { color:#8fa2bf; }

.chart-card { min-height:330px; }
.chart-wrap { position:relative; width:100%; height:270px; overflow:hidden; border-radius:11px; background:linear-gradient(180deg,#0a1222,#0b1425); }
#priceChart { display:block; width:100%; height:100%; }
#chartEmpty { position:absolute; inset:0; display:grid; place-items:center; color:#71819a; pointer-events:none; }
#chartLegend { color:#8294ae; font-size:11px; }
.logs-card { min-height:280px; }
.logs-card.expanded { position:fixed; z-index:900; inset:18px; min-height:0; overflow:auto; box-shadow:0 30px 90px rgba(0,0,0,.65); }
.buy-text { color:var(--red); font-weight:800; }.sell-text { color:#6da8ff; font-weight:800; }
.table-scroll { max-width:100%; overflow:auto; border:1px solid #273752; border-radius:9px; background:#0b1323; }
table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:12px; }
th { position:sticky; top:0; z-index:1; padding:9px 11px; text-align:left; background:#17233a; color:#b9c5d9; border-right:1px solid #24334d; }
td { padding:8px 11px; border-top:1px solid #1f2d45; border-right:1px solid #1d2b42; color:#d3ddec; }
tbody tr:nth-child(even) { background:#0f192c; }
.empty-row td { height:92px; text-align:center; color:#71819a; }
.system-log { margin-top:10px; color:#98a9c0; }
.system-log summary { cursor:pointer; font-weight:750; }
.system-log ol { max-height:160px; overflow:auto; margin:9px 0 0; padding:10px 10px 10px 32px; border-radius:8px; background:#0a1222; }
.system-log li { padding:3px 0; }

.modal { width:min(1180px,calc(100vw - 24px)); max-height:calc(100vh - 24px); margin:auto; padding:0; overflow:hidden; color:var(--text); background:transparent; border:0; }
.modal::backdrop { background:rgba(2,6,13,.78); backdrop-filter:blur(5px); }
.modal-shell { display:flex; flex-direction:column; max-height:calc(100vh - 24px); padding:15px; border:1px solid #314463; border-radius:18px; background:#0d1627; box-shadow:var(--shadow); overflow:auto; }
.modal-shell.small { width:min(480px,100%); margin:auto; }
.modal-shell > header { position:sticky; top:-15px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-15px -15px 12px; padding:15px; border-bottom:1px solid var(--line); background:#0d1627; }
.modal-shell h2,.modal-shell h3 { margin:0; }
.modal-shell > footer { position:sticky; bottom:-15px; z-index:5; display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:12px -15px -15px; padding:12px 15px; border-top:1px solid var(--line); background:#0d1627; }
.modal-shell > footer .form-message { margin-right:auto; }
.strategy-toolbar { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
.editor-section { margin-top:9px; padding:11px; border:1px solid #253650; border-radius:11px; background:#0a1323; }
.editor-section h3 { margin:0 0 9px; font-size:13px; }
.editor-tabs { width:min(330px,100%); margin-top:12px; }
.rule-pane { display:none; }.rule-pane.active { display:block; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.section-head h3 { margin:0; }
.strategy-modal input,.strategy-modal select { min-width:76px; min-height:35px; padding:5px 7px; }
.strategy-modal td,.strategy-modal th { padding:6px; }
.confirm-modal p { color:#c9d5e6; line-height:1.65; white-space:pre-line; }
.toast-region { position:fixed; z-index:1200; right:16px; bottom:18px; display:grid; gap:8px; width:min(360px,calc(100vw - 32px)); }
.toast { padding:12px 14px; border:1px solid #35517c; border-radius:11px; background:#142442; box-shadow:var(--shadow); animation:toast-in .2s ease-out; }
.toast.error { border-color:#74303d; background:#2b151d; }.toast.success { border-color:#22624c; background:#10251f; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } }
.mobile-nav { display:none; }

@media (max-width:1120px) {
  .topbar { grid-template-columns:auto 1fr; padding-block:8px; }
  .top-actions { grid-column:1/-1; justify-content:flex-end; }
  .workspace { grid-template-columns:330px minmax(0,1fr); }
  .status-grid { grid-template-columns:1fr; }
  .control-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:780px) {
  body { padding-top:env(safe-area-inset-top); }
  .app-shell { padding:0 10px calc(82px + env(safe-area-inset-bottom)); }
  .topbar { position:sticky; top:0; z-index:50; min-height:auto; margin:0 -10px 9px; padding:10px; grid-template-columns:1fr auto; background:rgba(8,13,25,.95); border-bottom:1px solid #1b2941; backdrop-filter:blur(12px); }
  .brand-mark.small { width:36px; height:36px; border-radius:10px; }
  .brand-row h1 { font-size:17px; }.brand-row p { display:none; }
  .provider-summary { grid-column:1/-1; grid-row:2; justify-content:flex-start; }
  .provider-chip { flex:1 0 104px; justify-content:center; padding:8px 7px; }
  .provider-chip span { font-size:12px; }.provider-chip b { display:none; }
  .top-actions .user-label,.top-actions #logoutButton { display:none; }
  .top-actions { grid-column:2; grid-row:1; }
  .desktop-toolbar { display:none; }
  .workspace { min-height:0; display:block; }
  .settings-column { max-height:none; overflow:visible; padding:0; }
  .content-column { display:block; }
  .mobile-page { display:none !important; }
  .mobile-page.active { display:grid !important; gap:10px; }
  #chartSection.mobile-page.active,#logsSection.mobile-page.active { display:block !important; }
  .status-grid { gap:10px; }
  .card { padding:13px; border-radius:14px; }
  .price-row strong { font-size:34px; }
  .summary-metrics { grid-template-columns:1fr 1fr; }
  .summary-metrics > div:last-child { grid-column:1/-1; }
  .decision-lines > div { grid-template-columns:1fr; gap:4px; }
  .logic { white-space:normal; line-height:1.6; }
  .chart-card { min-height:calc(100vh - 180px); }
  .chart-wrap { height:calc(100vh - 245px); min-height:360px; }
  .logs-card { min-height:calc(100vh - 170px); }
  .control-grid { grid-template-columns:1fr 1fr; }
  .control-grid button { min-height:48px; }
  .mobile-nav { position:fixed; z-index:60; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); padding:7px max(6px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); border-top:1px solid #273752; background:rgba(10,18,34,.97); backdrop-filter:blur(14px); }
  .mobile-nav button { display:grid; gap:2px; place-items:center; min-width:0; padding:4px 1px; border:0; background:transparent; color:#74869f; font-size:10px; transform:none; }
  .mobile-nav button span { font-size:17px; }.mobile-nav button.active { color:#70a0ff; }
  .modal { width:100%; max-height:100%; height:100%; }
  .modal-shell { min-height:100%; max-height:100%; border:0; border-radius:0; padding:12px; }
  .modal-shell > header { top:-12px; margin:-12px -12px 10px; padding:12px; }
  .modal-shell > footer { bottom:-12px; margin:10px -12px -12px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .strategy-toolbar button { flex:1 1 43%; }
  .toast-region { bottom:calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width:430px) {
  .auth-shell { padding:13px; }.auth-card { padding:24px 19px; }
  .field-grid.two { grid-template-columns:1fr; }
  .button-row { grid-template-columns:1fr; }
  .summary-metrics b { font-size:14px; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }