@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,600;0,700;1,400&family=Fira+Sans:wght@300;400;500;600&display=swap');

:root{
    --bg: #121212;
    --panel: #1a1a1a;
    --panel-border: #2d2d2d;
    --gold: #ffba30;
    --gold-dim: #a87c2c;
    --text: #eeeeee;
    --text-dim: #ccc;
    --text-faint: #888;
    --danger: #ff5a5a;
    --success: #4fd18b;
}

*{ box-sizing: border-box; }

body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Fira Sans', 'Segoe UI', sans-serif;
    line-height: 1.6;
}

a{ color: var(--gold); text-decoration:none; }
a:hover{ text-decoration: underline; }

.wrap{
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.top-link{
    display:inline-block;
    margin-bottom: 28px;
    color: var(--text-dim);
    font-size: 14px;
}
.top-link:hover{ color: var(--gold); }

h1,h2,h3{
    font-family: 'Literata', serif;
    color: var(--gold);
    font-weight: 600;
    margin: 0 0 14px;
}

h1{ font-size: 2.3rem; letter-spacing: .3px; }
h2{ font-size: 1.5rem; }
h3{ font-size: 1.15rem; }

p{ color: var(--text-dim); }

.hero{
    text-align:center;
    padding: 10px 0 40px;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 40px;
}
.hero .eyebrow{
    display:inline-block;
    color: var(--gold);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid var(--gold-dim);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 18px;
}
.hero p.lead{
    max-width: 620px;
    margin: 0 auto;
    color: var(--text-dim);
    font-size: 1.05rem;
}

.grid{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: flex-start;
}
@media (max-width: 860px){
    .grid{ grid-template-columns: 1fr; }
}

.card{
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 28px 26px;
}

.roadmap-item{
    display:flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--panel-border);
}
.roadmap-item:last-child{ border-bottom:none; }
.roadmap-icon{
    flex: 0 0 auto;
    width: 34px; height:34px;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    font-size: 15px;
    border: 1px solid var(--gold-dim);
    color: var(--gold);
}
.roadmap-icon.live{ background: var(--gold); color:#1a1a1a; border-color: var(--gold); }
.roadmap-body h3{ margin:0 0 4px; font-size: 1rem; color: var(--text); font-family:'Fira Sans',sans-serif; font-weight:600;}
.roadmap-body p{ margin:0; font-size:.92rem; }
.badge{
    display:inline-block;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: 2px;
}
.badge.live{ background: rgba(79,209,139,.15); color: var(--success); border:1px solid rgba(79,209,139,.4);}
.badge.soon{ background: rgba(255,186,48,.12); color: var(--gold); border:1px solid var(--gold-dim);}

/* Auth panel */
.tabs{
    display:flex;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 22px;
}
.tab-btn{
    flex:1;
    background:none;
    border:none;
    color: var(--text-faint);
    font-family:'Fira Sans',sans-serif;
    font-size: .95rem;
    padding: 10px 0;
    cursor:pointer;
    border-bottom: 2px solid transparent;
}
.tab-btn.active{ color: var(--gold); border-bottom-color: var(--gold); }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

label{
    display:block;
    font-size: .85rem;
    color: var(--text-dim);
    margin: 14px 0 6px;
}
input[type=text], input[type=email], input[type=password], input[type=tel]{
    width:100%;
    background: #0f0f0f;
    border: 1px solid var(--panel-border);
    color: var(--text);
    padding: 11px 13px;
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
}
input:focus{ outline: none; border-color: var(--gold-dim); }

.btn{
    display:inline-block;
    width:100%;
    text-align:center;
    background: var(--gold);
    color: #1a1200;
    font-weight: 600;
    border:none;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: .98rem;
    cursor:pointer;
    margin-top: 20px;
    font-family: inherit;
}
.btn:hover{ background: #ffc65c; }
.btn.secondary{
    background: transparent;
    border: 1px solid var(--gold-dim);
    color: var(--gold);
}
.btn.secondary:hover{ background: rgba(255,186,48,.08); }

.hint{ font-size: .8rem; color: var(--text-faint); margin-top: 8px; }

.alert{
    padding: 12px 16px;
    border-radius: 8px;
    font-size: .9rem;
    margin-bottom: 18px;
}
.alert.error{ background: rgba(255,90,90,.1); border:1px solid rgba(255,90,90,.4); color: var(--danger); }
.alert.success{ background: rgba(79,209,139,.1); border:1px solid rgba(79,209,139,.4); color: var(--success); }

.checkbox-row{
    display:flex;
    align-items:flex-start;
    gap: 8px;
    margin-top: 16px;
    font-size: .82rem;
    color: var(--text-faint);
}
.checkbox-row input{ margin-top: 3px; }

/* Dashboard */
.dash-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}
.user-pill{
    display:flex;
    align-items:center;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 30px;
    padding: 8px 16px 8px 8px;
    font-size: .88rem;
}
.avatar{
    width: 30px; height:30px;
    border-radius:50%;
    background: var(--gold);
    color:#1a1200;
    font-weight:700;
    display:flex; align-items:center; justify-content:center;
    font-size: .85rem;
}
.progress-track{
    height: 8px;
    background: #0f0f0f;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
}
.progress-fill{
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}
/* Full power reached (e.g. ML model fully warmed up) -- green instead of
   gold, matching the "strong/healthy" color used everywhere else on the
   dashboard once a metric crosses its confidence threshold. */
.progress-fill.full{
    background: var(--success);
}

.feature-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 18px;
    margin-top: 10px;
}
.feature-card{
    background: #0f0f0f;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 18px;
}
.feature-card h3{ display:flex; align-items:center; font-size:.98rem; }
.feature-card p{ font-size: .87rem; margin: 8px 0 0; }

footer.note{
    text-align:center;
    color: var(--text-faint);
    font-size: .82rem;
    margin-top: 50px;
}

/* Single-column layout (forgot/reset password) */
.grid-single{
    display:block;
    max-width: 480px;
    margin: 0 auto;
}

/* Wider container for admin panel */
.wrap-wide{ max-width: 1300px; }

/* Admin stats */
.stat-row{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 18px;
    margin-bottom: 28px;
}
.stat-card{ text-align:center; padding: 22px; }
.stat-num{ font-family:'Literata',serif; font-size: 2.2rem; color: var(--gold); font-weight:700; overflow-wrap:break-word; }
/* Auto-shrink for long values (see stat_num_size_class() in bybit.php) --
   keeps a big compounded backtest number or a long verdict word from
   spilling out of the card into its neighbor. */
.stat-num.stat-num-sm{ font-size: 1.5rem; }
.stat-num.stat-num-xs{ font-size: 1.1rem; }
.stat-label{ font-size: .82rem; color: var(--text-faint); margin-top:4px; }
/* Small secondary line inside a stat-card (e.g. "1 из 5 переобучений" under
   the "Состояние модели" verdict pill) -- visible progress without having
   to click through to the explanation popup. */
.stat-num-sub{ font-family:inherit; font-size:.7rem; font-weight:400; color:var(--text-faint); margin-top:6px; }

/* NEW (2026-09): green/red tone on metric boxes so risk/reward is visible
   at a glance without reading every number -- see metric_tone() in
   bybit.php. Applied as an extra class alongside .stat-card.card, so only
   the border/background tint and the number's color change; layout is
   untouched. Deliberately conservative thresholds (see metric_tone()) --
   a card only tones when the number is clearly good or clearly bad, not
   for anything in a reasonable middle ground. */
.stat-card.tone-good{ border-color: rgba(79,209,139,.45); background: rgba(79,209,139,.07); }
.stat-card.tone-good .stat-num{ color: var(--success); }
.stat-card.tone-bad{ border-color: rgba(255,90,90,.45); background: rgba(255,90,90,.07); }
.stat-card.tone-bad .stat-num{ color: var(--danger); }

/* NEW (2026-09): "Пульс движка" heartbeat card inside Метрики эффективности --
   a purely dynamic reassurance signal, not a computed statistic. Reuses the
   same green/gold/red language as tone-good/tone-bad above, but the pulsing
   dot itself is the point: a stopped pulse reads as "something's wrong"
   before the label is even read, same as an actual heart-rate monitor. See
   the PHP comment next to its markup in bybit.php for why this exists. */
.heartbeat-card{ text-align:left; }
.heartbeat-row{ display:flex; align-items:center; gap:10px; }
.heartbeat-dot{
    width: 12px; height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(79,209,139,.6);
    animation: heartbeat-pulse 1.6s ease-out infinite;
}
@keyframes heartbeat-pulse{
    0%   { box-shadow: 0 0 0 0 rgba(79,209,139,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(79,209,139,0); }
    100% { box-shadow: 0 0 0 0 rgba(79,209,139,0); }
}
/* NEW (2026-09): heartbeat card now tones its border+background the same
   way the tone-good/tone-bad stat cards already do, not just the dot and
   number -- so the whole card reads as green/gold/red at a glance instead
   of only the small dot changing color. */
.heartbeat-card.hb-live{ border-color: rgba(79,209,139,.45); background: rgba(79,209,139,.07); }
.heartbeat-card.hb-live .stat-num{ color: var(--success); }
.heartbeat-card.hb-calibrating{ border-color: rgba(255,186,48,.45); background: rgba(255,186,48,.07); }
.heartbeat-card.hb-calibrating .heartbeat-dot{ background: var(--gold); animation-name: heartbeat-pulse-gold; }
@keyframes heartbeat-pulse-gold{
    0%   { box-shadow: 0 0 0 0 rgba(255,186,48,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(255,186,48,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,186,48,0); }
}
.heartbeat-card.hb-calibrating .stat-num{ color: var(--gold); }
/* Stale/dead: the pulse simply STOPS rather than turning into a slower red
   pulse -- a flatline is the honest and instantly legible signal here,
   deliberately not styled to look like just another color variant. */
.heartbeat-card.hb-stale,
.heartbeat-card.hb-dead{ border-color: rgba(255,90,90,.45); background: rgba(255,90,90,.07); }
.heartbeat-card.hb-stale .heartbeat-dot,
.heartbeat-card.hb-dead .heartbeat-dot{ background: var(--danger); animation: none; box-shadow: none; }
.heartbeat-card.hb-stale .stat-num,
.heartbeat-card.hb-dead .stat-num{ color: var(--danger); }
@media (prefers-reduced-motion: reduce){
    .heartbeat-dot{ animation: none; }
}

/* NEW (2026-09): staged/background-calibration progress checklist (see the
   "Дообучение в фоне" card in bybit.php, driven by bot_core.py's
   calibration_stage). Reuses the SAME pulsing-dot language as the
   heartbeat card above -- an active step's icon literally shares the gold
   pulse keyframe -- so the two visual signals ("engine is alive" /
   "this specific analysis step is running now") read as one consistent
   idiom instead of two unrelated widgets. */
/* NEW (2026-09): a bold, unmissable "data is actively flowing" strip shown
   above the stage checklist whenever ANY background calibration work is in
   progress -- a small gold block train scrolling continuously left-to-right.
   Deliberately louder/coarser than the per-step shimmer/scanner below (which
   reads fine up close but can look inert at a glance) so there's always at
   least one obviously-moving element on screen while the engine works. Track
   holds two identical copies of the same block set back-to-back; animating
   translateX 0 -> -50% (exactly one copy's width) loops seamlessly with no
   visible jump or restart. */
.calib-flow{
    position:relative; height:14px; overflow:hidden; border-radius:6px;
    background:rgba(255,255,255,.03); margin:12px 0 4px;
}
.calib-flow-track{
    position:absolute; top:0; left:0; height:100%; width:max-content;
    display:flex; align-items:center; gap:16px; padding:0 8px;
    animation:calib-flow-move 3.6s linear infinite;
}
.calib-flow-track span{
    flex:0 0 auto; width:14px; height:8px; border-radius:2px;
    background:var(--gold); box-shadow:0 0 6px rgba(255,186,48,.55);
}
@keyframes calib-flow-move{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
    .calib-flow-track{ animation:none; }
    .calib-flow{ background:rgba(255,186,48,.12); }
}
.calib-steps{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.calib-step{
    display:flex; align-items:center; gap:11px; font-size:.9rem;
    padding:7px 10px; border-radius:8px; position:relative; overflow:hidden;
}
.calib-step-icon{
    width:18px; height:18px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:700; line-height:1;
    border:1px solid var(--panel-border); color:#0d1f16;
    position:relative; z-index:1;
}
.calib-step-label{ position:relative; z-index:1; }
.calib-step.done .calib-step-icon{ background:var(--success); border-color:var(--success); }
.calib-step.done .calib-step-label{ color:var(--text-dim); }
.calib-step.active{ background:rgba(255,186,48,.05); }
.calib-step.active .calib-step-icon{
    background:var(--gold); border-color:var(--gold);
    animation:heartbeat-pulse-gold 1.6s ease-out infinite;
}
.calib-step.active .calib-step-label{ color:var(--gold); font-weight:600; }
.calib-step.pending .calib-step-icon{ background:transparent; }
.calib-step.pending .calib-step-label{ color:var(--text-faint); }
/* NEW (2026-09): visual "data is flowing through this step right now" cues
   for the active calibration stage -- a diagonal gold shimmer sweeping
   across the row's background, plus a small row of blocks lighting up in
   sequence next to the label (like a scanner/equalizer). Purely decorative
   (no data behind the motion itself, the STAGE it's attached to is the
   real signal) but deliberately in the same gold used everywhere else for
   "in progress", meant to read as reassuring technological activity rather
   than an empty spinner while the real background calibration runs. */
.calib-step.active::before{
    content:''; position:absolute; inset:0; z-index:0;
    background:linear-gradient(100deg, transparent 30%, rgba(255,186,48,.16) 50%, transparent 70%);
    background-size:220% 100%;
    animation:calib-shimmer 2.2s linear infinite;
}
@keyframes calib-shimmer{
    0%{ background-position:140% 0; }
    100%{ background-position:-140% 0; }
}
.calib-scanner{ display:inline-flex; gap:3px; margin-left:auto; position:relative; z-index:1; flex:0 0 auto; }
.calib-scanner span{
    width:4px; height:13px; border-radius:2px; background:var(--gold); opacity:.18;
    animation:calib-scanner-pulse 1.1s ease-in-out infinite;
}
.calib-scanner span:nth-child(1){ animation-delay:0s; }
.calib-scanner span:nth-child(2){ animation-delay:.11s; }
.calib-scanner span:nth-child(3){ animation-delay:.22s; }
.calib-scanner span:nth-child(4){ animation-delay:.33s; }
.calib-scanner span:nth-child(5){ animation-delay:.44s; }
@keyframes calib-scanner-pulse{
    0%, 100% { opacity:.18; transform:scaleY(.55); }
    50% { opacity:1; transform:scaleY(1); box-shadow:0 0 5px rgba(255,186,48,.7); }
}
@media (prefers-reduced-motion: reduce){
    .calib-step.active .calib-step-icon{ animation:none; }
    .calib-step.active::before{ animation:none; display:none; }
    .calib-scanner span{ animation:none; opacity:.7; transform:none; }
}

/* Admin users table */
.table-scroll{ overflow-x:auto; }
.admin-table{
    width:100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.admin-table th, .admin-table td{
    text-align:left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--panel-border);
    white-space: nowrap;
}
.admin-table th{
    color: var(--text-faint);
    font-weight:500;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.admin-table tbody tr:hover{ background: rgba(255,255,255,.02); }

.btn-small{
    display:inline-block;
    width:auto;
    background: var(--gold);
    color:#1a1200;
    font-weight:600;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: .85rem;
    margin-top:0;
    border:none;
    cursor:pointer;
    font-family:inherit;
}
.btn-small:hover{ background:#ffc65c; text-decoration:none; }