:root {
    --h: 200;
    --s: 85%;
    --l: 50%;
    --accent: hsl(200 85% 50%);
    --accent-700: hsl(200 calc(85% - 12%) calc(50% - 14%));
    --accent-600: hsl(200 calc(85% - 10%) calc(50% - 8%));
    --accent-400: hsl(200 calc(85% - 10%) calc(50% + 6%));
    --accent-300: hsl(200 calc(85% - 15%) calc(50% + 12%));
    --ink: #e8eef6;
    --muted: #a2b0c3;
    --neutral-50: rgba(255,255,255,0.06);
    --neutral-80: rgba(255,255,255,0.10);
    --neutral-200: rgba(255,255,255,0.22);
    --neutral-250: rgba(255,255,255,0.25);
    --neutral-350: rgba(255,255,255,0.35);
    --glass-bg: 12,18,27;
    --glass-alpha: 0.18;
    --glass-highlight: rgba(255,255,255,0.60);
    --glass-shadow: 0 10px 30px rgba(0,0,0,0.45);
    --blur: 14px;
    --saturate: 150%;
    --radius: 8px;
    --radius-input: 8px;
    --radius-button: 18px;
    --radius-panel: 10px;
    --radius-switch-track: 20px;
    --radius-range-track: 20px;
    --bg1: #0a0f16;
    --bg2: #0d121a;
    --bg-grad: radial-gradient(1200px 600px at 10% -5%, hsla(200,90%,55%,0.25), transparent 45%),
    radial-gradient(900px 500px at 95% 10%, hsla(calc(200 + 40), 90%, 60%, 0.18), transparent 55%),
    linear-gradient(180deg, #0a0f16, #0d121a);
    --bg-photo-url: url("https://syra.app/assets/img/bg10.png");
    --photo-dim: 0.40;
    --photo-fx-contrast: 1.04;
    --photo-fx-saturate: 1.2;
    --control-fill: var(--neutral-50);
    --control-hover: var(--neutral-80);
    --control-border: var(--neutral-200);
    --control-focus: var(--accent);
    --btn-bg: hsl(200 85% 50%);
    --btn-ink: #061016;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #22c55e;
    --green: #22c55e;
    --red: #ef4444;
}
@font-face {
    font-display: auto;
    font-family: Main;
    src: url('https://3pay.to/assets/fonts/Montserrat-Black.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-display: auto;
    font-family: Main-Light;
    src: url('https://3pay.to/assets/fonts/Montserrat-Light.ttf');
    font-weight: normal;
    font-style: normal;
}

*{padding:0px;margin:0px;}
.noselect{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.clear{clear:both}
.right{float:right}
.left{float:left}

.click{
    cursor: pointer;
}
.ro{
    display:flex;
    flex-wrap:wrap;
}
.co{
    flex:1;
}
.nogrow-left{
    flex-grow:0;
    margin-left:5px;
}
.content{
    padding-bottom:45px;
}
.section{
    background:rgba(0,0,0,.2);
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    padding:16px;
    margin:6px;
}

.syra-msg {
    border:1px solid rgba(216,216,216,.6);
    background:rgba(216,216,216,.2);
    backdrop-filter: blur(10px);
    padding: 10px;
    margin:10px;
    border-radius: 5px;
    backdrop-filter: blur(10px);
    box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.5);
    color:#FFF;
}
.syra-input{
    padding:10px;
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:1000000000000;
    background: #222222;
}

/* This styles the scrollbar track (the part the scrollbar moves along) */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* semi-transparent black */
    border-radius: 8px;
}

/* This styles the scrollbar handle */
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
    border-radius: 8px;
}

/* This styles the scrollbar itself (including the width and height) */
::-webkit-scrollbar {
    width: 5px; /* width of the vertical scrollbar */
    height: 5px; /* height of the horizontal scrollbar */
}


/* Light-mode token set (auto-contrast may toggle this) */
[data-theme="light"] {
    --ink: #0b0f14;
    --muted: #475569;
    --neutral-50:  rgba(0,0,0,0.04);
    --neutral-80:  rgba(0,0,0,0.08);
    --neutral-200: rgba(0,0,0,0.20);
    --neutral-250: rgba(0,0,0,0.25);
    --neutral-350: rgba(0,0,0,0.35);
    --btn-ink: #071016;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    color: var(--ink);
    font: 15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    font-family: Main-Light,'Nunito Sans', sans-serif;
    background: var(--bg-grad);
}

/* Background stack (photo + dim overlay) lives behind all content */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* Photo layer */
body::before {
    background-image: var(--bg-photo-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: contrast(var(--photo-fx-contrast)) saturate(var(--photo-fx-saturate));
    will-change: transform;
}
/* Dim/tint layer */
body::after {
    background: rgba(0,0,0,var(--photo-dim));
}

.wrap { position: relative; z-index: 1; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }

header {
    position: sticky; top: 0; z-index: 3;
    backdrop-filter: blur(calc(var(--blur)*.7)) saturate(var(--saturate));
    -webkit-backdrop-filter: blur(calc(var(--blur)*.7)) saturate(var(--saturate));
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
}
.container {  margin: 0 auto; padding: 18px 0; }

.panel {
    border-radius: var(--radius-panel);
    background: rgba(var(--glass-bg), var(--glass-alpha));
    border: 1px solid var(--neutral-250);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
    backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
    -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
}

.toolbar { display: grid; gap: 12px; padding: 16px; grid-template-columns: repeat(12, 1fr); }
.toolbar .cell { grid-column: span 3; min-width: 220px; }
@media (max-width: 900px) { .toolbar .cell { grid-column: span 6; } }
@media (max-width: 600px) { .toolbar .cell { grid-column: span 12; } }

.glass-field {
    display: grid; gap: 6px; padding: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border-radius: var(--radius-panel);
    border: 1px solid rgba(255,255,255,.15);
    margin:10px;
}
.label { font-size: 12px; letter-spacing: .3px; color: var(--muted); }

/* ===== Form controls ===== */
.control,
select, textarea,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="url"],
input[type="tel"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"],
input[type="color"], input[type="file"], input[type="range"] {
    width: 100%;
    appearance: none;
    background: var(--control-fill);
    color: var(--ink);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-input);
    padding: 10px 12px;
    outline: none;
    transition: 160ms ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-family: Main-Light,'Nunito Sans', sans-serif;
}
input[type="range"]{
    border:0px;
    border-radius: var(--radius-button);
}
.control:hover, select:hover, textarea:hover, input:hover { background: var(--control-hover); }
.control:focus, select:focus, textarea:focus, input:focus {
    border-color: var(--control-focus);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
textarea { min-height: 100px; resize: vertical; }

/* Range track + thumb bind to tokens */
input[type="range"] {
    height: 36px;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track{
    height: 30px;
    border-radius: var(--radius-range-track);
    background: linear-gradient(
            to right,
            color-mix(in oklab, var(--accent) 65%, rgba(255,255,255,.2)) 0%,
            color-mix(in oklab, var(--accent) 65%, rgba(255,255,255,.2)) var(--range-fill, 0%),
            var(--neutral-80) var(--range-fill, 0%),
            var(--neutral-80) 100%
    );
    border: 0px solid var(--neutral-200);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.35),
            inset 0 -8px 20px rgba(0,0,0,.35),
            var(--glass-shadow);
    transition: background .2s ease, border-color .2s ease;
    backdrop-filter: blur(calc(var(--blur) * .6)) saturate(var(--saturate));
    -webkit-backdrop-filter: blur(calc(var(--blur) * .6)) saturate(var(--saturate));
}

input[type="range"]::-moz-range-track {
    height: 30px;
    border-radius: var(--radius-range-track);
    background: var(--neutral-80);
    border: 0px solid var(--neutral-200);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.35),
            inset 0 -8px 20px rgba(0,0,0,.35),
            var(--glass-shadow);
    backdrop-filter: blur(calc(var(--blur) * .6)) saturate(var(--saturate));
}
input[type="range"]::-moz-range-progress {
    height: 100%;
    border-radius: var(--radius-range-track);
    background: color-mix(in oklab, var(--accent) 65%, rgba(255,255,255,.2));
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; margin-top: 3px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #e9eef8);
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 4px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(180deg, #fff, #e9eef8);
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 4px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s ease;
    border: none;
}

/* === Switch hardened & synced to Container radius === */
.switch {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 54px;
    height: 30px;
    cursor: pointer;
    user-select: none;
}
.switch input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.track {
    position: absolute; inset: 0;
    border-radius: var(--radius-switch-track);
    background: var(--neutral-80);
    border: 1px solid var(--neutral-200);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.35),
            inset 0 -8px 20px rgba(0,0,0,.35),
            var(--glass-shadow);
    transition: background .2s ease, border-color .2s ease;
    backdrop-filter: blur(calc(var(--blur) * .6)) saturate(var(--saturate));
    -webkit-backdrop-filter: blur(calc(var(--blur) * .6)) saturate(var(--saturate));
}
.thumb {
    position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #e9eef8);
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 4px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s ease;
    pointer-events: none;
}
.switch input:checked + .track {
    background: color-mix(in oklab, var(--accent) 65%, rgba(255,255,255,.2));
    border-color: color-mix(in oklab, var(--accent) 65%, rgba(255,255,255,.3));
}
.switch input:checked + .track .thumb { transform: translateX(24px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }



/* Choice chips */
.choice { display: grid; grid-auto-flow: column; gap: 10px; align-items: center; width: max-content; user-select: none;
    padding: 8px 10px; border-radius: var(--radius-button); background: var(--control-fill); border: 1px solid var(--control-border); }
.choice input { appearance: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--control-border); background: rgba(255,255,255,.04); display: grid; place-items: center; }
.choice input[type="radio"] { border-radius: 50%; }
.choice input:checked { border-color: var(--accent); background: radial-gradient(circle at 50% 50%, var(--accent) 50%, transparent 51%); }

/* Buttons */
.btn {
    padding: 10px 14px; border-radius: var(--radius-button);
    border: 1px solid color-mix(in oklab, var(--btn-bg) 55%, white 10%);
    background:
            linear-gradient(180deg,
            color-mix(in oklab, var(--btn-bg) 92%, white 4%),
            color-mix(in oklab, var(--btn-bg) 88%, black 7%));
    color: var(--btn-ink);
    font-weight: 650; letter-spacing: .2px; cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
    transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
    font-family: Main-Light,'Nunito Sans', sans-serif;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.btn.ghost { --btn-bg: rgba(255,255,255,.08); --btn-ink: var(--ink); background: var(--btn-bg); border: 1px solid var(--control-border); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.15); }
.btn.warn  { --btn-bg: var(--warning);  --btn-ink: #1a1200; }
.btn.danger{ --btn-bg: var(--danger);   --btn-ink: #fff; }
.btn.ok    { --btn-bg: var(--success);  --btn-ink: #06140c; }

main { padding: 24px 0 36px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr); }
.card { grid-column: span 6; padding: 16px; border-radius: var(--radius-panel); }
.card h3 { margin: 0 0 10px; font-size: 15px; letter-spacing: .25px; color: var(--accent-300); font-weight: 700; }
.card .sub { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
@media (max-width: 1000px) { .card { grid-column: span 12; } }

.field { display: grid; gap: 8px; margin-bottom: 14px; }
.seg { display: grid; grid-auto-flow: column; gap: 6px; background: var(--control-fill); border: 1px solid var(--control-border); padding: 6px; border-radius: var(--radius-panel); width: max-content; }
.seg button { background: transparent; border: none; color: var(--ink); padding: 8px 12px; border-radius: var(--radius-button); cursor: pointer; }
.seg button[aria-pressed="true"] { background: color-mix(in oklab, var(--accent) 25%, rgba(255,255,255,.1)); border: 1px solid var(--accent-400); }

progress, meter {
    width: 100%; height: 14px; border-radius: var(--radius-panel); overflow: hidden;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
}
progress::-webkit-progress-bar { background: rgba(255,255,255,.12); }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent-700), var(--accent)); }
meter::-webkit-meter-bar { background: rgba(255,255,255,.12); }
meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--accent-700), var(--accent)); }

footer { opacity: .8; font-size: 12px; padding-bottom: 24px; }

#exportCSS { grid-column: span 12; justify-self: end; }
#cssOutput {
    width: 100%; background: rgba(0,0,0,0.55); color: #fff; border: none; padding: 10px;
    border-radius: var(--radius-input); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px; resize: vertical; min-height: 200px; display:none;
}
#exportNote { font-size: 12px; color: var(--muted); margin-top: 6px; display:none;}

.legend_tag{
    border-radius: var(--radius-panel);
    background:#ccc;
    padding:6px;
    margin-right:5px;
    font-weight:bold;
    box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
.ssm{
    background:#0077FF;
}
.vdm{
    background:#FF9933;
}
.dfm{
    background:#009E93;
}
.aleft{}
.aright{
    text-align:right;
}


.charts {
    width: 100%;
    background:rgba(0,0,0,.65);
}
.pane {
    position: relative;
    flex: 1;
    width: 100%;
    height:216px;
}
.charts > .pane:first-child {
    flex: 3;
}
#candle-wrap{
    --bg:#0b0f14;
    --ink:#d9e2ef;
    --up:#37d67a;
    --down:#ff5a5f;
    --grid:#1a2230;
    position:relative;
    width:100%;
    height:420px;
    padding:10px 12px 6px;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
#tf-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
#tf-bar button{
    appearance:none;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
    color:var(--ink);padding:6px 10px;border-radius:999px;font:12px/1.2 system-ui;cursor:pointer;
}
#tf-bar button.active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}
#candle-canvas{width:100%;height:calc(100% - 40px);display:block;border-radius:10px;background:var(--bg)}

/* replace the whole #candle block with this */
#candle{
    width: 100%;              /* will be updated via JS */
    height: 600px;                /* will be updated via JS */
    background: transparent;
    z-index: 999999;          /* above charts, below overlays you want */
    pointer-events: none;     /* click-through so UI remains usable */
}

.choices {
    display: flex;
    flex-wrap: nowrap;       /* all on one line */
    justify-content: space-between; /* even spacing */
    align-items: center;
    gap: 12px;               /* space between items */
    overflow-x: auto;        /* if it overflows, scrolls horizontally */
    white-space: nowrap;
}

.choice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--ink, #fff);
}

.choice input[type="checkbox"] {
    accent-color: var(--accent, #4ade80);
    transform: scale(1.1);
}

#main-symbol{ margin-top:10px; font-size:14px; }
#main-value{ font-family:"Montserrat", serif; font-optical-sizing:auto; font-weight:600; font-style:normal; font-size:42px; }
.glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 9px;

    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: transform .15s ease, box-shadow .2s ease, background .3s ease;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    height:40px;
}


.glass-btn:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.35);
    transform: translateY(-2px);
}


.glass-btn:active {
    transform: translateY(1px) scale(0.98);
}
.btn-long {
    background:
            linear-gradient(145deg, rgba(34,197,94,0.35), transparent)
            ,var(--glass-bg);
    border-color: rgba(34,197,94,0.55);
    color:#FFF;
}


.btn-short {
    background:
            linear-gradient(145deg, rgba(239,68,68,0.35), transparent)
            ,var(--glass-bg);
    border-color: rgba(239,68,68,0.55);
    color:#FFF;
}
.btn-close {
    background:
            linear-gradient(145deg, rgba(59,130,246,0.35), transparent)
            ,var(--glass-bg);
    border-color: rgba(59,130,246,0.55);
}
@media(min-width:920px){
    .content{
        width:100%;
        padding-top:20px;
    }
    .row{
        display:flex;
        flex-wrap: wrap;
        margin:0px;
    }
    .col{
        flex:1;
    }
}
@media all and (display-mode: standalone) {
    body {
        background-color: #000;
    }
}