:root{--bg:#0a121d;--surface:#121f2d;--raised:#162535;--line:#294152;--muted:#98aab8;--fg:#eaf4fb;--green:#4bd0a1;--blue:#6ba9f6;--orange:#ffaf60;--red:#f47d83}*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--fg);line-height:1.55;min-height:100vh}header{max-width:980px;margin:auto;min-height:82px;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);gap:10px}.brand{display:flex;align-items:center;gap:12px}.logo{border-radius:13px;background:linear-gradient(125deg,#0e6f73,#21c4aa);color:white;width:46px;height:46px;display:grid;place-items:center;font-size:26px;font-weight:900;letter-spacing:-3px;direction:ltr}.logo span{font-size:13px;margin-left:-13px;margin-top:-16px}.brand h1{font-size:15px;margin:0;letter-spacing:.7px;direction:ltr}.brand h1 b{color:#86dccc}.brand small{color:var(--muted);font-size:11px}.topright{display:flex;align-items:center;gap:10px}.state{border:1px solid #37544b;background:#12372f;padding:5px 10px;border-radius:50px;color:#76dab7;font-size:12px}.state.offline{color:#ffadb1;background:#3d1e28;border-color:#693745}.state.pending{color:#f6d9a2;background:#3b3020;border-color:#55462d}.exit{background:transparent;border:0;color:var(--muted);font-size:12px;cursor:pointer}main{max-width:960px;margin:0 auto;padding:24px 16px 40px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:22px}.eyebrow{color:var(--green);font-size:10px;font-weight:800;letter-spacing:2px;margin:0 0 7px;direction:ltr;text-align:right}.hero h2{font-size:clamp(23px,5vw,35px);line-height:1.3;letter-spacing:-1px;margin:0 0 8px}.hero em{font-style:normal;color:var(--green)}.intro{color:var(--muted);font-size:13px;margin:0}.update{color:var(--muted);white-space:nowrap;font-size:11px}.toolbar{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 16px;margin-bottom:15px}.toolbar label{font-size:12px;color:var(--muted)}select{background:var(--raised);color:var(--fg);border-radius:8px;border:1px solid var(--line);padding:9px 14px;font-size:14px;min-width:145px}.toolbar button{margin-right:auto;border:1px solid var(--line);background:var(--raised);color:var(--fg);padding:9px 13px;border-radius:8px;cursor:pointer}.toolbar button span{font-size:20px;vertical-align:-2px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:26px}.summary>div{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px}.summary strong{display:block;font-size:23px;font-variant-numeric:tabular-nums}.summary span{color:var(--muted);font-size:11px}.section{margin-bottom:25px}.sectiontitle{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}.sectiontitle h3{font-size:16px;margin:0}.sectiontitle span{color:var(--muted);font-size:11px}.ladder{position:relative;min-height:240px;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 53px,#ffffff0b 54px),var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px;padding:10px 8px 10px 85px}.axis{position:absolute;left:0;top:0;bottom:0;width:82px;border-right:1px solid var(--line);color:var(--muted);font-size:11px;direction:ltr}.axis b{position:absolute;right:12px;font-weight:400;transform:translateY(-50%)}.plot{position:absolute;right:12px;left:94px;display:flex;align-items:center;min-height:2px;pointer-events:none}.plot.line{border-top:2px solid var(--blue)}.plot.zone{border:1px solid var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent);border-radius:4px;min-height:8px}.plot span{max-width:90%;color:var(--fg);background:#111b28eb;border-radius:4px;font-size:11px;padding:2px 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.plot.line span{transform:translateY(-65%)}.levels{display:grid;gap:9px}.lev{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;border-right:3px solid var(--blue)}.lev .name{font-weight:650;font-size:14px}.lev .type{font-size:11px;color:var(--muted);margin-top:2px}.lev .price{direction:ltr;font-weight:750;font-variant-numeric:tabular-nums;font-size:14px;text-align:left}.lev .price small{display:block;color:var(--muted);font-weight:400;font-size:10px}.empty{padding:45px 12px;text-align:center;font-size:13px;color:var(--muted)}.footnote{border:1px solid #4e4435;background:#33281977;border-radius:12px;padding:13px;margin-top:22px}.footnote strong{font-size:12px;color:#f4d599}.footnote p{font-size:11px;color:#c5bda9;margin:3px 0 0}footer{max-width:960px;margin:0 auto;padding:14px 16px 25px;border-top:1px solid var(--line);color:#6e8798;display:flex;justify-content:space-between;font-size:10px;direction:ltr}.loginbody{display:grid;place-items:center;min-height:100vh;padding:20px}.login{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px;max-width:420px;width:100%;box-shadow:0 18px 60px #0007}.lg{margin:0 auto 26px;width:62px;height:62px;font-size:32px}.login .eyebrow{text-align:center}.login h1{font-size:24px;text-align:center;margin:4px 0 10px}.login p{text-align:center;color:var(--muted);font-size:13px}.login form{display:grid;gap:9px;margin:25px 0}.login label{font-size:12px}.login input{background:var(--raised);border:1px solid var(--line);padding:14px;border-radius:10px;color:white;width:100%}.login button{background:#1a9882;color:white;padding:13px;border-radius:10px;border:0;font-weight:700;cursor:pointer}.login .muted{font-size:11px}.login .err{color:var(--red)}@media (max-width:540px){header{min-height:70px;padding:9px 14px}.brand h1{font-size:12px}.brand small{font-size:10px}.logo{width:38px;height:38px}.hero{display:block}.update{margin-top:10px}.sectiontitle{align-items:center}.sectiontitle span{font-size:10px}.summary strong{font-size:20px}.summary>div{padding:12px 9px}.toolbar{padding:10px}.lev .name{font-size:13px}}

.candle-toolbar{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px 12px 0 0;padding:9px}.candle-toolbar label{font-size:12px;color:var(--muted)}.candle-toolbar select{min-width:auto;padding:5px 7px}.candle-toolbar button{border:1px solid var(--line);background:var(--raised);border-radius:7px;color:var(--fg);min-height:34px;padding:6px 12px;cursor:pointer}.candle-toolbar button:last-child{margin-right:auto;font-size:11px}.chartframe{position:relative;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;overflow:hidden;background:#0f1b28;direction:ltr;height:clamp(310px,65vw,500px)}#candleChart{width:100%;height:100%;display:block;touch-action:pan-y}.chartmessage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:34px;text-align:center;color:#b9c7d5;background:#0f1b28eb;font-size:13px;line-height:1.8;direction:rtl}.charttip{color:var(--muted);font-size:11px;margin:9px 0 0}.stale{color:#f4c978!important}@media(max-width:540px){.candle-toolbar{gap:4px}.candle-toolbar button{padding:5px 9px}.chartframe{height:390px}}

/* TAKEOFF_MOBILE_UI_V0_3_START */
/* Responsive-only UI patch for Cluster Levels Mobile Candles Pilot 0.2.
   Does not alter server logic, chart data, credentials, or MT5. */
html, body { max-width:100%; overflow-x:clip; }
header, main, footer { width:100%; min-width:0; }
main > *, header > *, .section, .hero, .toolbar, .summary, .chartframe, .levels { min-width:0; max-width:100%; }
.lev > div { min-width:0; }
.lev .name, .lev .type { overflow-wrap:anywhere; }
@media (max-width:600px) {
  header { min-height:60px; padding:10px 12px; gap:6px; }
  .brand { gap:8px; min-width:0; }
  .brand h1 { font-size:12px; white-space:nowrap; }
  .brand small { font-size:10px; }
  .logo { width:36px; height:36px; flex-shrink:0; }
  .topright { gap:5px; flex-shrink:0; }
  .state { padding:4px 8px; font-size:10px; }
  .exit { font-size:11px; padding:7px 2px; }
  main { padding:15px 10px 32px; }
  .hero { display:block; margin-bottom:14px; }
  .hero h2 { font-size:clamp(21px,5.6vw,27px); letter-spacing:-.5px; margin-bottom:6px; overflow-wrap:break-word; }
  .hero .intro { font-size:11px; line-height:1.65; }
  .update { margin-top:7px; white-space:normal; font-size:10px; }
  .toolbar { padding:10px; gap:8px; flex-wrap:wrap; }
  .toolbar label { font-size:11px; }
  .toolbar select { min-width:0; flex:1; max-width:150px; padding:9px; font-size:13px; }
  .toolbar button { margin-right:auto; padding:9px 11px; font-size:12px; min-height:40px; }
  .summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:17px; }
  .summary > div { min-width:0; padding:11px 6px; text-align:center; }
  .summary strong { font-size:clamp(17px,5vw,22px); line-height:1.15; }
  .summary span { display:block; font-size:10px; line-height:1.4; margin-top:5px; overflow-wrap:break-word; }
  .section { margin-bottom:19px; }
  .sectiontitle { flex-wrap:wrap; align-items:flex-start; gap:5px 10px; margin-bottom:8px; }
  .sectiontitle h3 { font-size:15px; }
  .sectiontitle span { font-size:10px; white-space:normal; }
  .candle-toolbar { display:flex; flex-wrap:wrap; gap:6px; padding:8px; align-items:center; }
  .candle-toolbar label { font-size:11px; }
  .candle-toolbar select { min-width:70px; max-width:105px; padding:8px 5px; min-height:40px; }
  .candle-toolbar button { min-height:40px; min-width:40px; padding:6px 9px; font-size:15px; }
  .candle-toolbar button:last-child { margin-right:auto; font-size:11px; flex:1 1 120px; }
  .chartframe { width:100%; min-height:390px; height:clamp(390px,65svh,560px); border-radius:0 0 10px 10px; }
  #candleChart { touch-action:pan-y; }
  .charttip { font-size:10px; line-height:1.65; margin-top:8px; }
  .lev { padding:11px 9px; gap:7px; }
  .lev .name { font-size:12px; }
  .lev .price { font-size:12px; }
  .lev .price small { font-size:9px; }
  .footnote { padding:10px; margin-top:16px; }
  footer { padding:12px 10px 22px; font-size:9px; }
}
@media (max-width:350px) {
  header { padding-inline:8px; }
  main { padding-inline:7px; }
  .brand h1 { font-size:11px; }
  .brand small { font-size:9px; }
  .summary > div { padding-inline:3px; }
  .summary span { font-size:9px; }
  .candle-toolbar button:last-child { flex-basis:100%; }
}
@media (max-height:540px) and (orientation:landscape) {
  .chartframe { height:75svh; min-height:285px; }
}
/* TAKEOFF_MOBILE_UI_V0_3_END */

/* CLUSTER MOBILE CUSTOMER LOGIN + INSTALL GUIDE v0.4 */
.remember-note {font-size:11px!important;color:var(--green)!important;margin-top:-11px!important}
.install-guide {margin-top:26px;margin-bottom:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.install-guide summary {cursor:pointer;list-style:none;padding:16px 18px;color:var(--fg);font-weight:700;font-size:14px}
.install-guide summary::-webkit-details-marker {display:none}
.install-guide summary span {float:left;color:var(--green)}
.install-guide-content {border-top:1px solid var(--line);padding:4px 17px 13px;color:var(--muted);font-size:12px;line-height:1.8}
.install-guide-content strong {color:var(--fg)}
@media(max-width:600px){.install-guide{margin:18px 0}.install-guide summary{padding:13px 12px;font-size:12px}.install-guide-content{padding-inline:12px}}