/* ═══════════════════════════════════════════════════════════
   Yemcaster v3 — Professional Trading Terminal
   Light/Dark mode via CSS vars. Theme in localStorage = 0ms switch.
   ═══════════════════════════════════════════════════════════ */

/* ── Dark (default) ── */
:root,[data-theme="dark"]{
  --bg:#020617;--bg2:#0f172a;--card:#1e293b;--card-h:#273548;--input:#0f172a;
  --bdr:#334155;--bdr-a:#3b82f6;--txt:#f1f5f9;--txt2:#94a3b8;--muted:#64748b;
  --accent:#38bdf8;--blue:#3b82f6;--green:#22c55e;--red:#ef4444;--yellow:#eab308;--purple:#a78bfa;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}
/* ── Light ── */
[data-theme="light"]{
  --bg:#f8fafc;--bg2:#fff;--card:#fff;--card-h:#f1f5f9;--input:#f1f5f9;
  --bdr:#e2e8f0;--bdr-a:#3b82f6;--txt:#0f172a;--txt2:#475569;--muted:#94a3b8;
  --accent:#0284c7;--blue:#2563eb;--green:#16a34a;--red:#dc2626;--yellow:#ca8a04;--purple:#7c3aed;
  --shadow:0 1px 3px rgba(0,0,0,.06);
}

/* ── Shared tokens ── */
:root{--r:6px;--rl:10px;--font:'SF Mono','Fira Code',Consolas,monospace;--ui:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}

/* ── Reset ── */
#cryptopulse-app *,#cryptopulse-frontend-app *{box-sizing:border-box}
.cp-app-wrapper{margin:-20px -20px 0 -2px;min-height:100vh}

/* ═══════════════ LAYOUT ═══════════════ */
.cp-app{font-family:var(--ui);background:var(--bg);color:var(--txt);min-height:100vh;min-height:100dvh;display:flex;font-size:16px;line-height:1.6}

/* Sidebar (admin) */
.cp-sidebar{width:230px;background:var(--bg2);border-right:1px solid var(--bdr);display:flex;flex-direction:column;position:fixed;top:32px;left:160px;bottom:0;z-index:99999;overflow-y:auto}
.folded .cp-sidebar,.auto-fold .cp-sidebar{left:36px}
.cp-sidebar-brand{padding:16px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px}
.cp-sidebar-brand h1{font-family:var(--font);font-size:16px;font-weight:700;margin:0;color:var(--accent);letter-spacing:.5px}
.cp-version{font-size:11px;color:var(--muted);background:var(--input);padding:2px 6px;border-radius:3px}
.cp-sidebar-nav{padding:6px 0;flex:1}
.cp-nav-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);padding:14px 16px 4px;margin:0}
.cp-nav-item{display:flex;align-items:center;gap:8px;padding:9px 16px;color:var(--txt2);cursor:pointer;transition:all .1s;font-size:15px;border-left:2px solid transparent;text-decoration:none}
.cp-nav-item:hover{background:var(--card);color:var(--txt)}
.cp-nav-item.active{background:color-mix(in srgb,var(--blue) 8%,transparent);color:var(--blue);border-left-color:var(--blue);font-weight:600}

/* Main (admin) */
.cp-main{flex:1;margin-left:260px;padding:24px 28px;min-height:100vh;max-width:calc(100vw - 260px);overflow-x:hidden}
.folded .cp-main,.auto-fold .cp-main{margin-left:100px;max-width:calc(100vw - 100px)}
.cp-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--bdr)}
.cp-page-header h2{font-size:23px;font-weight:700;margin:0}
.cp-subtitle{font-size:14px;color:var(--muted);margin-top:2px}

/* ═══════════════ CARD ═══════════════ */
.cp-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--rl);padding:18px;margin-bottom:16px;box-shadow:var(--shadow);max-width:100%;overflow:hidden}
.cp-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cp-card-title{font-size:16px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:6px}

/* ═══════════════ STATS ═══════════════ */
.cp-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.cp-stat-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--rl);padding:16px;box-shadow:var(--shadow);transition:border-color .15s}
.cp-stat-card:hover{border-color:var(--bdr-a)}
.cp-stat-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:6px}
.cp-stat-value{font-family:var(--font);font-size:clamp(15px,2.2vw,18px);font-weight:700;color:var(--txt);line-height:1.3;overflow-wrap:anywhere}
.cp-stat-value.green{color:var(--green)}.cp-stat-value.red{color:var(--red)}.cp-stat-value.blue{color:var(--blue)}.cp-stat-value.yellow{color:var(--yellow)}

/* ═══════════════ TABLE ═══════════════ */
.cp-table-wrap{overflow-x:auto;max-width:100%}
.cp-table{width:100%;border-collapse:collapse;font-size:14px}
.cp-table th{text-align:left;padding:10px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border-bottom:1px solid var(--bdr);white-space:nowrap}
.cp-table td{padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--bdr) 50%,transparent);color:var(--txt2);vertical-align:middle}
.cp-table tr:hover td{background:var(--card-h)}
.cp-mono{font-family:var(--font);font-size:13px}

/* ═══════════════ BADGE ═══════════════ */
.cp-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.2px;text-transform:uppercase}
.cp-badge-green{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.cp-badge-red{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.cp-badge-blue{background:color-mix(in srgb,var(--blue) 15%,transparent);color:var(--blue)}
.cp-badge-yellow{background:color-mix(in srgb,var(--yellow) 15%,transparent);color:var(--yellow)}
.cp-badge-purple{background:color-mix(in srgb,var(--purple) 15%,transparent);color:var(--purple)}
.cp-badge-gray{background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted)}

/* ═══════════════ FORMS ═══════════════ */
.cp-form-group{margin-bottom:14px}
.cp-label{display:block;font-size:13px;font-weight:600;color:var(--txt2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.cp-input,.cp-select{width:100%;padding:10px 12px;background:var(--input);border:1px solid var(--bdr);border-radius:var(--r);color:var(--txt);font-family:var(--font);font-size:14px;outline:none;transition:border-color .15s}
.cp-input:focus,.cp-select:focus{border-color:var(--bdr-a);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 15%,transparent)}
.cp-input[readonly]{background:var(--card);color:var(--txt);cursor:text}
.cp-input::placeholder{color:var(--muted)}
.cp-input-hint{font-size:12px;color:var(--muted);margin-top:4px}

/* ═══════════════ BUTTONS ═══════════════ */
.cp-btn{display:inline-flex;align-items:center;gap:5px;padding:9px 16px;border:1px solid var(--bdr);border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;transition:all .12s;font-family:var(--ui);text-decoration:none;white-space:nowrap;background:transparent;color:var(--txt2)}
.cp-btn:hover{background:var(--card);color:var(--txt)}
.cp-btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.cp-btn-primary:hover{opacity:.9}
.cp-btn-success{background:var(--green);border-color:var(--green);color:#fff}
.cp-btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.cp-btn-ghost{background:transparent;color:var(--txt2)}
.cp-btn-ghost:hover{background:var(--card);color:var(--txt)}
.cp-btn:disabled{opacity:.4;cursor:not-allowed}
.cp-btn-sm{padding:6px 12px;font-size:13px}

/* ═══════════════ TOGGLE ═══════════════ */
.cp-toggle{position:relative;width:40px;height:22px;display:inline-block}
.cp-toggle input{opacity:0;width:0;height:0}
.cp-toggle-slider{position:absolute;inset:0;background:var(--bdr);border-radius:22px;cursor:pointer;transition:.2s}
.cp-toggle-slider::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.cp-toggle input:checked+.cp-toggle-slider{background:var(--green)}
.cp-toggle input:checked+.cp-toggle-slider::before{transform:translateX(18px)}

/* ═══════════════ THEME TOGGLE ═══════════════ */
.cp-theme-toggle{width:32px;height:32px;border-radius:50%;border:1px solid var(--bdr);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;transition:all .15s}
.cp-theme-toggle:hover{border-color:var(--bdr-a)}

/* ═══════════════ LOADING ═══════════════ */
.cp-loading{display:flex;align-items:center;justify-content:center;padding:32px;color:var(--muted);gap:8px}
.cp-spinner{width:20px;height:20px;border:2px solid var(--bdr);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Skeleton loader */
.cp-skeleton{background:linear-gradient(90deg,var(--card) 25%,var(--card-h) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r);height:16px;margin-bottom:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══════════════ TOAST ═══════════════ */
.cp-toast{position:fixed;top:12px;right:16px;padding:10px 18px;border-radius:var(--r);font-size:14px;font-weight:500;z-index:100000;animation:slide-in .2s;max-width:380px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.cp-toast-success{background:var(--green);color:#fff}
.cp-toast-error{background:var(--red);color:#fff}
.cp-toast-info{background:var(--blue);color:#fff}
@keyframes slide-in{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}

/* ═══════════════ GRIDS ═══════════════ */
.cp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cp-grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}

/* ═══════════════ CRON BOX ═══════════════ */
.cp-cron-box{background:var(--input);border:1px solid var(--bdr);border-radius:var(--r);padding:10px;font-family:var(--font);font-size:12px;color:var(--accent);word-break:break-all;user-select:all}

/* ═══════════════ GUIDE ═══════════════ */
.cp-guide{background:color-mix(in srgb,var(--blue) 5%,transparent);border:1px solid color-mix(in srgb,var(--blue) 20%,transparent);border-radius:var(--rl);padding:16px;margin-bottom:16px}
.cp-guide h3{font-size:14px;font-weight:700;color:var(--blue);margin:0 0 10px}
.cp-guide ol{margin:0;padding-left:18px;color:var(--txt2);font-size:13px;line-height:1.7}
.cp-guide code{font-family:var(--font);background:var(--input);padding:1px 5px;border-radius:3px;font-size:12px;color:var(--accent)}

/* ═══════════════ PULSE ═══════════════ */
.cp-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 40%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ═══════════════ STATUS ═══════════════ */
.cp-status-row{display:flex;align-items:center;gap:6px;font-size:13px}
.cp-status-dot{width:6px;height:6px;border-radius:50%}
.cp-status-dot.active{background:var(--green)}.cp-status-dot.inactive{background:var(--red)}.cp-status-dot.warning{background:var(--yellow)}

/* ═══════════════ EXCHANGE CARDS ═══════════════ */
.cp-exchange-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--rl);padding:14px;transition:.15s}
.cp-exchange-card.connected{border-color:var(--green)}
.cp-exchange-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cp-exchange-name{font-size:16px;font-weight:700;text-transform:capitalize}
.cp-exchange-status{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.cp-exchange-status.connected{background:var(--green);box-shadow:0 0 5px var(--green)}

/* ═══════════════ CATEGORIES ═══════════════ */
.cp-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.cp-cat-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--input);border:1px solid var(--bdr);border-radius:var(--r);cursor:pointer;transition:.1s;font-size:14px}
.cp-cat-item:hover{border-color:var(--bdr-a)}
.cp-cat-item.selected{border-color:var(--green);background:color-mix(in srgb,var(--green) 5%,transparent)}
.cp-cat-item input[type="checkbox"]{accent-color:var(--green);width:16px;height:16px}

/* ═══════════════ BOT ═══════════════ */
.cp-bot-status-bar{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:12px 16px;flex-wrap:wrap;gap:8px}
.cp-bot-tabs{display:flex;gap:8px}

/* ═══════════════ SIGNALS ═══════════════ */
.cp-signals-list{display:flex;flex-direction:column;gap:10px}
.cp-signal-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.cp-signal-card.hot{border-color:var(--yellow)}
/* 4.21 — deep-link focus: a slow, gentle flash that draws the eye for a moment
   without being jarring. ~2.4s total (3 soft pulses), then settles. */
.cp-focus-flash{animation:cpFocusFlash 0.8s ease-in-out 3;border-color:var(--accent) !important}
@keyframes cpFocusFlash{
  0%,100%{box-shadow:var(--shadow)}
  50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
}
.cp-signal-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-signal-score{font-family:var(--font);font-size:14px;font-weight:700;padding:3px 8px;border-radius:3px;background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted)}
.cp-signal-score.hot{background:color-mix(in srgb,var(--yellow) 20%,transparent);color:var(--yellow)}
.cp-signal-score.cold{background:color-mix(in srgb,var(--red) 20%,transparent);color:var(--red)}
.cp-section-title{font-size:21px;font-weight:700;margin:0 0 16px}

/* ═══════════════ AUTH ═══════════════ */
.cp-auth-screen{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--bg);padding:20px}
.cp-auth-card{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:32px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.cp-auth-brand{font-family:var(--font);font-size:23px;color:var(--accent);text-align:center;margin:0 0 6px}
.cp-auth-sub{font-size:15px;color:var(--muted);text-align:center;margin:0 0 22px}
.cp-auth-tabs{display:flex;margin-bottom:16px;border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden}
.cp-auth-tab{flex:1;padding:10px;background:var(--input);border:none;color:var(--txt2);cursor:pointer;font-size:15px;font-weight:600}
.cp-auth-tab.active{background:var(--blue);color:#fff}
.cp-auth-card .cp-input{margin-bottom:10px}
.cp-auth-divider{text-align:center;margin:16px 0;position:relative}
.cp-auth-divider span{background:var(--card);padding:0 12px;color:var(--muted);font-size:13px;position:relative;z-index:1}
.cp-auth-divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bdr)}

/* ═══════════════ SCROLLBAR ═══════════════ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1100px){.cp-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .cp-sidebar{display:none}
  .cp-main{margin-left:0!important}
  .cp-grid-2,.cp-grid-3{grid-template-columns:1fr}
  .cp-stats-grid{grid-template-columns:repeat(2,1fr)}
}

/* 4.6 — News/Signals cards: cleaner wrapping on phones so the score, sentiment,
   ticker, freshness and timestamp don't cram onto one line. */
@media(max-width:560px){
  .cp-signal-top{gap:6px 8px}
  .cp-signal-card{padding:12px}
  /* Let the timestamp sit on its own line instead of being squeezed at the end. */
  .cp-signal-top > .cp-sig-time{margin-left:0!important;flex-basis:100%;order:99}
}

/* v42.1.1 — expired membership renew banner pulse */
@keyframes cpPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ═══════════════════════════════════════════════════════════════════
   V71.0 — TOGGLE SWITCHES
   Replaces plain checkboxes for binary settings where the consequence
   matters (real vs paper money, stop-loss on/off). A switch reads as a
   state you are ON or OFF, which is harder to misread at a glance than
   a tick box — and for "will this bot spend real money?" that clarity
   is worth the extra markup.
   ═══════════════════════════════════════════════════════════════════ */

.cp-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.cp-switch {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .28);
    border: 1px solid rgba(148, 163, 184, .35);
    transition: background .18s ease, border-color .18s ease;
    margin-top: 1px;
}

.cp-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}

.cp-switch.is-on::after { transform: translateX(20px); }

/* Green = a normal enabled setting. */
.cp-switch.is-on { background: rgba(34, 197, 94, .55); border-color: rgba(34, 197, 94, .75); }

/* Red = real money. Deliberately alarming: this switch spends funds. */
.cp-switch.is-danger.is-on { background: rgba(239, 68, 68, .60); border-color: rgba(239, 68, 68, .85); }

/* Blue = paper/simulation. */
.cp-switch.is-paper { background: rgba(59, 130, 246, .55); border-color: rgba(59, 130, 246, .8); }

.cp-switch-row:hover .cp-switch { filter: brightness(1.12); }

.cp-switch-label { font-weight: 700; line-height: 1.35; }
.cp-switch-help  { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }