:root {
      color-scheme: dark;
      --bg: #0a0d12; --panel: #11151c; --card: #151a22; --line: #222934; --line2: #2c3542;
      --text: #e9edf2; --muted: #8a94a6; --dim: #5d6779; --acc: #f0b90b; --up: #0ecb81; --down: #f6465d;
      --r: 12px;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0; font: 13px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      background: radial-gradient(1200px 600px at 80% -10%, #1a1f2a 0%, var(--bg) 60%); background-attachment: fixed;
      color: var(--text); min-height: 100vh;
    }
    b, td, .num, input { font-variant-numeric: tabular-nums; }
    header {
      position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
      padding: 12px 24px; background: rgba(10,13,18,.82); backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #f0b90b, #f8d33a);
      display: grid; place-items: center; color: #0a0d12; font-weight: 800; font-size: 13px; }
    h1 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: .01em; }
    .spacer { flex: 1; }
    .badge { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--acc);
      background: rgba(240,185,11,.1); border: 1px solid rgba(240,185,11,.3); padding: 3px 8px; border-radius: 999px; }
    .status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
      padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); }
    .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
    .status.on { color: var(--up); border-color: rgba(14,203,129,.35); background: rgba(14,203,129,.08); }
    .status.on::before { background: var(--up); box-shadow: 0 0 0 3px rgba(14,203,129,.2); animation: pulse 1.6s infinite; }
    @keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(14,203,129,0); } }
    .layout { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 20px;
      max-width: 1320px; margin: 0 auto; padding: 20px 24px 40px; align-items: start; }
    .side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
    @media (max-width: 900px) { .layout { grid-template-columns: 1fr; padding: 14px; } header { padding: 10px 14px; } }
    .card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px;
      box-shadow: 0 8px 24px rgba(0,0,0,.25); }
    .card h2, .panel h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0 0 12px; font-weight: 650; }
    .card h2 .badge { margin-left: auto; }
    label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 500;
      color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .05em; }
    .row { display: flex; gap: 8px; }
    .row > * { flex: 1; min-width: 0; }
    input, select, button {
      width: 100%; background: #0d1117; color: var(--text); border: 1px solid var(--line2);
      border-radius: 9px; padding: 10px 11px; font: inherit; font-size: 13px; transition: border-color .15s, background .15s;
    }
    input:hover, select:hover { border-color: #3a4554; }
    input:focus, select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(240,185,11,.15); }
    .pill { display: flex; align-items: center; justify-content: space-between; background: #0d1117;
      border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 12px; color: var(--muted); }
    .pill b { color: var(--text); font-weight: 600; }
    .link { color: var(--acc); background: none; border: 0; padding: 0; width: auto; cursor: pointer; font-size: 11px;
      text-transform: none; letter-spacing: 0; font-weight: 600; }
    .link:hover { text-decoration: underline; }
    .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; font-size: 11px; color: var(--muted); }
    .meta > div { background: #0d1117; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
    .meta b { display: block; color: var(--text); margin-top: 3px; font-size: 13px; font-weight: 600; }
    #results .meta { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    #results .meta b { font-size: 15px; }
    .lev { width: 80px; flex: 0 0 80px !important; }
    input[type=range] { padding: 0; margin-top: 10px; accent-color: var(--acc); border: 0; background: none; box-shadow: none; }
    .ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); margin-top: 2px; }
    .start { margin-top: 18px; background: linear-gradient(180deg, #f8c51c, #f0b90b); color: #0a0d12; font-weight: 750;
      border: 0; padding: 12px; cursor: pointer; font-size: 14px; }
    .start:hover:not(:disabled) { filter: brightness(1.06); }
    .start:disabled { background: #232a35; color: var(--dim); cursor: not-allowed; }
    .stop { margin-top: 8px; background: var(--down); color: #fff; border: 0; font-weight: 700; padding: 11px; cursor: pointer; }
    .stop:hover { filter: brightness(1.08); }
    .err { color: var(--down); font-size: 12px; margin-top: 10px; min-height: 16px; }
    .ok { color: var(--up); font-size: 12px; margin-top: 4px; }
    .tablewrap { overflow: auto; max-height: 420px; }
    table { width: 100%; border-collapse: collapse; font-size: 12px; }
    th { position: sticky; top: 0; background: var(--card); text-align: left; padding: 8px 6px; color: var(--dim);
      font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
    td { padding: 7px 6px; color: #c5ccd6; border-bottom: 1px solid rgba(34,41,52,.6); white-space: nowrap; }
    td.BUY { color: var(--up); font-weight: 600; } td.SELL { color: var(--down); font-weight: 600; }
    .pos { color: var(--up) !important; } .neg { color: var(--down) !important; }
    #hist tbody tr { cursor: pointer; transition: background .1s; }
    #hist tbody tr:hover td { background: rgba(240,185,11,.05); color: var(--text); }
    #book { margin-top: 14px; }
    #fills .tablewrap { max-height: 300px; }

    /* ---- v2 graphics ---- */
    body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
      background: radial-gradient(600px 400px at 10% 0%, rgba(240,185,11,.07), transparent 70%),
                  radial-gradient(700px 500px at 100% 30%, rgba(14,203,129,.05), transparent 70%),
                  radial-gradient(600px 500px at 50% 110%, rgba(99,102,241,.06), transparent 70%); }
    .card, .panel { background: linear-gradient(180deg, rgba(25,31,41,.78), rgba(17,21,28,.78));
      backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.06);
      box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px rgba(0,0,0,.35); position: relative; overflow: hidden; }
    .card::after, .panel::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(240,185,11,.35), transparent); }
    .ic { width: 16px; height: 16px; color: var(--acc); flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(240,185,11,.35)); }
    .logo { box-shadow: 0 0 18px rgba(240,185,11,.45); }
    .meta > div { background: linear-gradient(180deg, rgba(13,17,23,.9), rgba(13,17,23,.6)); transition: border-color .2s, transform .2s; }
    .meta > div:hover { border-color: var(--line2); transform: translateY(-1px); }
    .start { box-shadow: 0 6px 20px rgba(240,185,11,.25); transition: transform .15s, box-shadow .15s, filter .15s; }
    .start:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(240,185,11,.35); }
    .start:disabled { box-shadow: none; }
    .stop { box-shadow: 0 6px 20px rgba(246,70,93,.25); }
    .status { transition: all .3s; }
    .status.on { box-shadow: 0 0 16px rgba(14,203,129,.25); }
    .chartbox { position: relative; height: 280px; margin: 0 -4px; }
    .chartbox canvas, .spark canvas { width: 100%; height: 100%; display: block; }
    .legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
    .legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
    .rangebar { margin-top: 14px; }
    .rb-track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(14,203,129,.35), rgba(240,185,11,.25), rgba(246,70,93,.35));
      border: 1px solid var(--line2); }
    .rb-mark { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--acc);
      border: 3px solid #0a0d12; box-shadow: 0 0 0 1px var(--acc), 0 0 14px rgba(240,185,11,.7); transition: left .6s cubic-bezier(.2,.8,.2,1); }
    .rb-mark.out { background: var(--down); box-shadow: 0 0 0 1px var(--down), 0 0 14px rgba(246,70,93,.7); }
    .rb-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
    .rb-labels b { color: var(--text); }
    .spark { height: 90px; margin: 12px -4px 2px; }
    .hero { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
    .hero b { font-size: 26px; font-weight: 750; letter-spacing: -.01em; }
    .hero span { font-size: 11px; color: var(--muted); }
    #book td { position: relative; }
    #book tr.lv td:first-child::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: var(--w, 0%);
      max-width: calc(300% + 12px); border-radius: 4px; pointer-events: none; transition: width .4s; }
    #book tr.lv.BUY td:first-child::before { background: linear-gradient(90deg, rgba(14,203,129,.28), rgba(14,203,129,.04)); }
    #book tr.lv.SELL td:first-child::before { background: linear-gradient(90deg, rgba(246,70,93,.28), rgba(246,70,93,.04)); }
    #book tr.midrow td { text-align: center; color: var(--acc); font-weight: 700; font-size: 12px; padding: 8px 0;
      background: linear-gradient(90deg, transparent, rgba(240,185,11,.08), transparent); }
    #book tbody tr:hover td { background-color: rgba(255,255,255,.02); }
    @media (max-width: 900px) { .chartbox { height: 220px; } }
    /* ---- gridbots additions ---- */
    .tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 24px; max-width: 1320px; margin: 0 auto; scrollbar-width: thin; }
    .tab { display: inline-flex; align-items: center; gap: 8px; width: auto; flex: 0 0 auto; cursor: pointer; padding: 8px 12px;
      border-radius: 999px; background: rgba(13,17,23,.8); border: 1px solid var(--line2); color: var(--muted); font-weight: 600; font-size: 12px; }
    .tab img { width: 18px; height: 18px; border-radius: 50%; background: #fff; object-fit: contain; padding: 1px; }
    .tab.on { color: #0a0d12; background: linear-gradient(180deg, #f8c51c, #f0b90b); border-color: transparent; }
    .tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 6px var(--up); }
    .vhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .vhead img { width: 30px; height: 30px; border-radius: 8px; background: #fff; object-fit: contain; padding: 1px; }
    .vhead h2 { margin: 0 !important; }
    .notes { font-size: 11px; color: var(--muted); background: #0d1117; border: 1px dashed var(--line2); border-radius: 9px; padding: 8px 10px; margin: 10px 0 0; }
    .modebox { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--muted); }
    .modebox input { width: auto; }
    .btn2 { width: auto; cursor: pointer; padding: 6px 12px; font-size: 12px; font-weight: 600; }
    .modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 50; }
    .modal[hidden] { display: none; }
    .modal .card { width: min(520px, 94vw); max-height: 90vh; overflow: auto; }
    .kv { font-size: 11px; color: var(--muted); white-space: pre-wrap; word-break: break-all; background: #0d1117; border-radius: 9px; padding: 8px; max-height: 180px; overflow: auto; }
    .login { max-width: 380px; margin: 12vh auto; }

.brandlogo{width:32px;height:32px;padding:0;background:none;border:0;border-radius:8px}
    .modeseg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 16px; border: 1px solid var(--line, #232a35); border-radius: 10px; overflow: hidden; }
    .modeseg label { margin: 0; cursor: pointer; }
    .modeseg input { display: none; }
    .modeseg span { display: block; text-align: center; padding: 9px 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
    .modeseg input:checked + span { background: #1b2230; color: #f0b90b; }
    .modeseg input:disabled + span { opacity: .4; cursor: not-allowed; }
    .start.danger { background: linear-gradient(180deg, #f8c51c, #f0b90b); }
    .events { margin-top: 12px; font-size: 12px; color: var(--muted); }
    .events summary { cursor: pointer; }
    .events ul { list-style: none; padding: 0; margin: 6px 0 0; max-height: 180px; overflow: auto; font-family: ui-monospace, monospace; }
    .events li { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
    .events li.everr { color: #f6465d; }
    a.btn2 { text-decoration: none; display: inline-flex; align-items: center; }
    .admin { max-width: 980px; margin: 24px auto; padding: 0 16px; }
    .admin table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .admin td, .admin th { text-align: left; padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .admin .code { font-family: ui-monospace, monospace; word-break: break-all; background: #0f141c; padding: 10px; border-radius: 8px; user-select: all; }
    .switch { font-size: 12px; margin-top: 12px; color: var(--muted); }
.homelink{display:flex;align-items:center;gap:inherit;color:inherit;text-decoration:none;cursor:pointer}.homelink h1{margin:0}.homelink:hover h1{opacity:.85}