@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* ═══════════════════════════
   ПЕРЕМЕННЫЕ — тёмная тема
═══════════════════════════ */
.cex, .cex.cex-dark {
  --bg:       #070b12;
  --sur:      #0d1420;
  --sur2:     #111c2b;
  --sur3:     #162234;
  --bor:      #1a2840;
  --bor2:     #213250;
  --gold:     #f59e0b;
  --gold2:    #fbbf24;
  --gold-dim: rgba(245,158,11,.12);
  --green:    #10b981;
  --red:      #ef4444;
  --blue:     #3b82f6;
  --text:     #e2e8f0;
  --muted:    #4d6a87;
  --muted2:   #7a9ab8;
  --r:        10px; --r2: 16px; --r3: 22px;
}

/* Светлая тема */
.cex.cex-light {
  --bg:       #f0f4f8;
  --sur:      #ffffff;
  --sur2:     #f8fafc;
  --sur3:     #eef2f7;
  --bor:      #dde3eb;
  --bor2:     #c8d3df;
  --gold:     #d97706;
  --gold2:    #b45309;
  --gold-dim: rgba(217,119,6,.1);
  --green:    #059669;
  --red:      #dc2626;
  --blue:     #2563eb;
  --text:     #1e293b;
  --muted:    #94a3b8;
  --muted2:   #64748b;
}

.cex, .cex * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.cex {
  font-family:'Syne',sans-serif; font-size:15px; line-height:1.5;
  color:var(--text); width:100%; max-width:520px; margin:0 auto; min-height:300px;
  background:transparent;
}

/* Техработы */
.cex-maintenance {
  text-align:center; padding:60px 20px;
  background:var(--sur); border:1px solid var(--bor); border-radius:22px;
  max-width:520px; margin:0 auto;
}
.cex-maintenance-icon { font-size:54px; margin-bottom:16px; }
.cex-maintenance h2   { font-size:20px; font-weight:700; color:var(--muted2); }

/* ── Загрузка ── */
.cex-loader-wrap { display:flex; flex-direction:column; align-items:center; gap:22px; padding:60px 20px; }
.cex-logo-icon { font-size:52px; filter:drop-shadow(0 0 20px rgba(245,158,11,.5)); animation:cex-float 2.5s ease-in-out infinite; }
@keyframes cex-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.cex-spinner-lg { width:36px;height:36px; border:3px solid var(--bor2); border-top-color:var(--gold); border-radius:50%; animation:cex-spin .8s linear infinite; }
.cex-spinner-sm { display:inline-block;width:14px;height:14px; border:2px solid var(--bor2); border-top-color:var(--gold); border-radius:50%; animation:cex-spin .7s linear infinite; }
@keyframes cex-spin { to{transform:rotate(360deg)} }

/* ── Авторизация ── */
.cex-auth-wrap {
  background:var(--sur); border:1px solid var(--bor); border-radius:var(--r3);
  padding:24px 18px 28px;
  box-shadow:0 24px 64px rgba(0,0,0,.35);
}
@media(min-width:420px){ .cex-auth-wrap{padding:32px 32px 36px;} }

.cex-brand { text-align:center; margin-bottom:24px; }
.cex-brand-icon { font-size:48px; filter:drop-shadow(0 0 18px rgba(245,158,11,.45)); margin-bottom:4px; }
.cex-brand-name { font-size:22px;font-weight:800; background:linear-gradient(135deg,var(--gold),var(--gold2)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.cex-brand-sub  { font-size:13px;color:var(--muted2);margin-top:2px; }

.cex-auth-tabs { display:flex;background:var(--sur2);border-radius:var(--r);padding:4px;margin-bottom:22px;gap:2px; }
.cex-tab { flex:1;background:none;border:none;padding:9px 6px;border-radius:8px;color:var(--muted2);font-family:'Syne',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap; }
.cex-tab.active { background:var(--sur3);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.2); }
.cex-tab-op { color:var(--muted);font-size:12px; }
.cex-tab-op.active { color:var(--gold); }

.cex-op-login-badge { background:var(--gold-dim);border:1px solid rgba(245,158,11,.25);border-radius:var(--r);padding:9px 14px;font-size:14px;color:var(--gold2);margin-bottom:16px;text-align:center; }

/* ── Поля ── */
.cex-field { margin-bottom:14px; }
.cex-field label { display:block;font-size:11px;font-weight:600;color:var(--muted2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px; }
.cex-field-hint-inline { color:var(--muted);font-size:11px;text-transform:none;font-weight:400; }
.cex-field-note { font-size:12px;color:var(--muted2);margin:5px 0 0;line-height:1.4; }
.cex-field input {
  width:100%; background:var(--sur2); border:1.5px solid var(--bor2); border-radius:var(--r);
  padding:13px 14px; color:var(--text); font-family:'Syne',sans-serif; font-size:15px; outline:none;
  transition:border-color .18s,box-shadow .18s; -webkit-appearance:none;
}
.cex-field input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.1); }
.cex-field input::placeholder { color:var(--muted); }

.cex-captcha-img-wrap { position:relative;margin-bottom:8px; }
.cex-captcha-img-wrap img { width:100%;max-height:160px;object-fit:cover;border-radius:var(--r);border:1px solid var(--bor2);display:block; }
.cex-captcha-reload { position:absolute;top:8px;right:8px;background:rgba(0,0,0,.65);border:none;color:#fff;border-radius:8px;padding:5px 10px;cursor:pointer;font-size:16px;line-height:1; }

/* ── Кнопки ── */
.cex-btn {
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 20px; background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#08111e; font-family:'Syne',sans-serif;font-size:15px;font-weight:700;
  border:none;border-radius:var(--r);cursor:pointer;transition:opacity .15s,transform .1s,box-shadow .15s;
  -webkit-appearance:none; margin-top:6px;
}
.cex-btn:hover:not(:disabled)  { opacity:.9;transform:translateY(-1px);box-shadow:0 6px 22px rgba(245,158,11,.35); }
.cex-btn:active:not(:disabled) { transform:translateY(0); }
.cex-btn:disabled { opacity:.35;cursor:not-allowed; }
.cex-btn-green { background:linear-gradient(135deg,#10b981,#059669);color:#fff; }
.cex-btn-green:hover:not(:disabled) { box-shadow:0 6px 22px rgba(16,185,129,.3); }
.cex-btn-red   { background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff; }
.cex-btn-red:hover:not(:disabled)   { box-shadow:0 6px 22px rgba(239,68,68,.3); }
.cex-btn-op    { background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff; }
.cex-btn-op:hover:not(:disabled)    { box-shadow:0 6px 22px rgba(59,130,246,.3); }
.cex-btn-sm    { width:auto;padding:10px 18px;margin-top:0;font-size:13px;border-radius:8px; }

.cex-logout-btn { background:transparent;border:1.5px solid var(--bor2);border-radius:var(--r);color:var(--muted2);font-family:'Syne',sans-serif;font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer;transition:border-color .15s,color .15s;white-space:nowrap; }
.cex-logout-btn:hover { border-color:var(--red);color:#f87171; }

.cex-support-btn { position:relative;background:var(--sur2);border:1.5px solid var(--bor2);border-radius:var(--r);color:var(--muted2);font-family:'Syne',sans-serif;font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer;transition:all .15s;white-space:nowrap; }
.cex-support-btn:hover { border-color:var(--blue);color:var(--blue); }
.cex-unread-badge { display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:11px;font-weight:800;width:16px;height:16px;border-radius:50%;margin-left:4px;line-height:1; }

.cex-back { display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--muted2);font-family:'Syne',sans-serif;font-size:13px;cursor:pointer;padding:0;margin-bottom:16px;transition:color .15s; }
.cex-back:hover { color:var(--text); }

/* ── Сообщения ── */
.cex-msg { padding:10px 14px;border-radius:var(--r);margin-bottom:12px;font-size:14px;font-weight:500;display:none; }
.cex-msg-ok  { background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#34d399; }
.cex-msg-err { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#f87171; }

/* ── Кабинет клиента ── */
.cex-cab-header { display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--sur);border:1px solid var(--bor);border-radius:var(--r2);padding:14px 16px;margin-bottom:14px;flex-wrap:wrap; }
.cex-cab-user   { display:flex;align-items:center;gap:10px; }
.cex-cab-avatar { font-size:28px; }
.cex-cab-login  { font-size:16px;font-weight:700; }
.cex-cab-tg     { font-size:12px;color:var(--muted2); }
.cex-cab-actions{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; }

/* ── Внутренние вкладки ── */
.cex-inner-tabs { display:flex;gap:6px;margin-bottom:16px; }
.cex-itab { flex:1;background:var(--sur);border:1.5px solid var(--bor);border-radius:var(--r);padding:11px 8px;color:var(--muted2);font-family:'Syne',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .18s;-webkit-appearance:none; }
.cex-itab.active { border-color:var(--gold);color:var(--gold);background:var(--gold-dim); }

/* ── Шаги обмена ── */
.cex-step { background:var(--sur);border:1px solid var(--bor);border-radius:var(--r2);padding:18px 16px; }
@media(min-width:420px){ .cex-step{padding:22px;} }
.cex-step-title { font-size:17px;font-weight:700;margin:0 0 16px; }

.cex-status-bar { display:flex;align-items:center;gap:7px;margin-bottom:14px;font-size:12px;color:var(--muted2); }
.cex-dot { width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0; }
.cex-dot.on { background:var(--green);box-shadow:0 0 6px var(--green);animation:cex-pulse 2s infinite; }
@keyframes cex-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.cex-api-src { margin-left:auto;font-size:11px;background:var(--sur2);border:1px solid var(--bor);border-radius:6px;padding:2px 7px;color:var(--muted2); }

.cex-coin-btns { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px; }
.cex-coin { background:var(--sur2);border:2px solid var(--bor2);border-radius:var(--r);padding:12px 8px;color:var(--text);font-family:'Syne',sans-serif;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .18s;-webkit-appearance:none; }
.cex-coin span { font-size:18px; }
.cex-coin.active,.cex-coin:hover { border-color:var(--gold);background:var(--gold-dim);color:var(--gold); }

.cex-rate-row { display:flex;justify-content:space-between;align-items:center;background:var(--sur2);border:1px solid var(--bor);border-radius:var(--r);padding:11px 14px;margin-bottom:12px; }
.cex-rate-label { font-size:13px;color:var(--muted2); }
.cex-rate-val   { font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:600;color:var(--gold); }

.cex-amount-input { width:100%;background:var(--sur2);border:2px solid var(--bor2);border-radius:var(--r);padding:14px 16px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;outline:none;transition:border-color .18s;-webkit-appearance:none; }
.cex-amount-input:focus { border-color:var(--gold); }
.cex-amount-input::placeholder { font-size:16px;font-weight:400;color:var(--muted); }

.cex-min-notice { font-size:12px;color:var(--muted2);margin:5px 0 0; }
.cex-min-warn   { color:var(--red) !important;font-weight:600; }

.cex-calc { background:var(--sur2);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;margin:10px 0 14px; }
.cex-calc-row { display:flex;justify-content:space-between;align-items:center;padding:9px 14px;font-size:14px;color:var(--muted2);border-bottom:1px solid var(--bor); }
.cex-calc-row:last-child { border-bottom:none; }
.cex-calc-total { color:var(--text);font-size:16px;font-weight:700;padding:12px 14px; }
.cex-calc-total span:last-child { color:var(--green);font-family:'JetBrains Mono',monospace; }

.cex-summary-pill { display:inline-flex;align-items:center;gap:8px;background:var(--sur2);border:1px solid var(--bor);border-radius:30px;padding:8px 16px;font-size:14px;font-weight:600;margin-bottom:18px;color:var(--gold2); }

.cex-banks { display:flex;flex-direction:column;gap:8px; }
.cex-bank-btn { background:var(--sur2);border:2px solid var(--bor2);border-radius:var(--r);padding:14px 16px;color:var(--text);font-family:'Syne',sans-serif;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;width:100%;transition:all .18s;-webkit-appearance:none; }
.cex-bank-btn:hover:not(:disabled) { border-color:var(--blue);background:rgba(59,130,246,.08);color:var(--blue); }
.cex-bank-btn:disabled { opacity:.5;cursor:not-allowed; }
.cex-bank-logo { width:28px;height:28px;object-fit:contain;border-radius:5px; }

.cex-pay-card { background:linear-gradient(135deg,#12213a 0%,#091727 100%);border:1px solid var(--gold);border-radius:var(--r2);padding:18px 16px;margin-bottom:16px;box-shadow:0 0 32px rgba(245,158,11,.1),inset 0 1px 0 rgba(245,158,11,.08); }
.cex-light .cex-pay-card { background:linear-gradient(135deg,#fffbeb,#fef3c7); }
.cex-pay-bank         { font-size:16px;font-weight:700;color:var(--gold2);margin-bottom:14px; }
.cex-pay-section-label{ font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted2);margin-bottom:6px; }
.cex-pay-card-row     { display:flex;align-items:center;gap:10px;margin-bottom:4px; }
.cex-pay-cardnum      { font-family:'JetBrains Mono',monospace;font-size:clamp(16px,5vw,24px);font-weight:600;color:var(--text);letter-spacing:1px;flex:1;word-break:break-all; }
.cex-copy-btn         { background:rgba(255,255,255,.1);border:none;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:14px;transition:background .15s; }
.cex-copy-btn:hover   { background:rgba(255,255,255,.2); }
.cex-pay-holder       { font-size:13px;color:var(--muted2);min-height:16px; }
.cex-pay-amount       { font-family:'JetBrains Mono',monospace;font-size:clamp(24px,7vw,32px);font-weight:700;color:var(--green); }

.cex-timer-block { text-align:center;margin-bottom:16px; }
.cex-timer-lbl   { font-size:12px;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px; }
.cex-timer       { font-family:'JetBrains Mono',monospace;font-size:clamp(30px,9vw,42px);font-weight:700;color:var(--gold);letter-spacing:2px;margin-bottom:8px; }
.cex-progress    { height:4px;background:var(--sur2);border-radius:2px;overflow:hidden;max-width:260px;margin:0 auto; }
.cex-progress-inner { height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:2px;transition:width 1s linear; }
.cex-warn        { background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);border-radius:var(--r);padding:10px 13px;font-size:13px;color:#fcd34d;margin-bottom:14px;line-height:1.5; }

.cex-result-icon  { font-size:54px;text-align:center;margin:16px 0 12px; }
.cex-result-title { font-size:20px;font-weight:800;text-align:center;margin:0 0 10px; }
.cex-result-text  { text-align:center;color:var(--muted2);font-size:14px;line-height:1.6; }
.cex-checking     { display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted2);font-size:14px;background:var(--sur2);border-radius:var(--r);padding:12px 16px;margin-top:18px; }

.cex-reload-info { display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);border-radius:var(--r);padding:12px 16px;font-size:14px;color:#34d399; }
.cex-reload-info strong { font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--green); }

/* ── История клиента ── */
.cex-hist-empty { text-align:center;padding:36px 20px;color:var(--muted2);font-size:14px;background:var(--sur);border:1px solid var(--bor);border-radius:var(--r2); }
.cex-hist-item  { background:var(--sur);border:1px solid var(--bor);border-radius:var(--r2);margin-bottom:10px;overflow:hidden; }
.cex-hist-head  { display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--bor);background:var(--sur2); }
.cex-hist-id    { font-size:14px;font-weight:700; }
.cex-hist-body  { display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:12px 14px; }
@media(max-width:360px){ .cex-hist-body{grid-template-columns:1fr;} }
.cex-hist-cell         { display:flex;flex-direction:column;gap:2px; }
.cex-hist-cell span    { font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px; }
.cex-hist-cell b       { font-size:14px;font-weight:600; }
.cex-hist-note         { padding:8px 14px;font-size:13px;border-top:1px solid var(--bor); }
.cex-note-ok  { background:rgba(16,185,129,.09);color:#34d399; }
.cex-note-err { background:rgba(239,68,68,.09); color:#f87171; }

.cex-badge       { display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap; }
.badge-waiting   { background:rgba(245,158,11,.15);color:var(--gold); }
.badge-paid      { background:rgba(59,130,246,.15); color:#93c5fd; }
.badge-confirmed { background:rgba(16,185,129,.15); color:#34d399; }
.badge-cancelled,.badge-expired { background:rgba(239,68,68,.15);color:#f87171; }

/* ── Поддержка (модалка) ── */
.cex-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:0; }
@media(min-width:520px){ .cex-modal-overlay{align-items:center;padding:20px;} }
.cex-modal { background:var(--sur);border:1px solid var(--bor);border-radius:var(--r2) var(--r2) 0 0;width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden; }
@media(min-width:520px){ .cex-modal{border-radius:var(--r2);max-height:70vh;} }
.cex-modal-head { display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--bor);font-size:15px;font-weight:700;background:var(--sur2); }
.cex-modal-close { background:none;border:none;color:var(--muted2);font-size:20px;cursor:pointer;line-height:1;padding:0 4px;transition:color .15s; }
.cex-modal-close:hover { color:var(--red); }
.cex-chat-msgs   { flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px; }
.cex-chat-empty  { text-align:center;color:var(--muted2);font-size:14px;margin:auto; }
.cex-chat-bubble { display:flex;flex-direction:column;max-width:80%; }
.cex-bubble-me   { align-self:flex-end; }
.cex-bubble-them { align-self:flex-start; }
.cex-bubble-body { padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;word-break:break-word; }
.cex-bubble-me   .cex-bubble-body { background:var(--gold);color:#08111e;border-bottom-right-radius:4px; }
.cex-bubble-them .cex-bubble-body { background:var(--sur2);border:1px solid var(--bor);color:var(--text);border-bottom-left-radius:4px; }
.cex-bubble-time { font-size:11px;color:var(--muted2);margin-top:3px;align-self:flex-end; }
.cex-bubble-them .cex-bubble-time { align-self:flex-start; }
.cex-chat-input  { padding:12px 14px;border-top:1px solid var(--bor);display:flex;gap:8px;background:var(--sur2); }
.cex-chat-input textarea { flex:1;background:var(--sur3);border:1.5px solid var(--bor2);border-radius:var(--r);padding:10px 12px;color:var(--text);font-family:'Syne',sans-serif;font-size:14px;outline:none;resize:none;transition:border-color .18s; }
.cex-chat-input textarea:focus { border-color:var(--gold); }

/* ── Панель оператора ── */
.cex-op-header { background:var(--sur);border:1px solid var(--bor);border-radius:var(--r2);padding:14px 16px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; }
.cex-op-title  { display:flex;align-items:center;gap:10px; }
.cex-op-icon   { font-size:26px; }
.cex-op-name   { font-size:16px;font-weight:700; }
.cex-op-role   { font-size:12px;color:var(--muted2); }
.cex-op-meta   { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.cex-op-badge  { background:var(--gold-dim);border:1px solid rgba(245,158,11,.25);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;color:var(--gold2); }
.cex-op-live   { font-size:12px;font-weight:600;color:var(--green); }
.cex-op-empty  { background:var(--sur);border:1px solid var(--bor);border-radius:var(--r2);text-align:center;padding:48px 20px;color:var(--muted2); }
.cex-op-empty-icon { font-size:44px;margin-bottom:10px; }

.cex-op-card { background:var(--sur);border:1px solid var(--bor);border-left:4px solid var(--gold);border-radius:var(--r2);margin-bottom:14px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.2); }
.cex-op-card-head { display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bor);background:var(--sur2); }
.cex-op-card-id   { font-size:15px;font-weight:700; }
.cex-op-card-time { font-size:12px;color:var(--muted2); }
.cex-op-card-body { display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:14px 16px; }
@media(max-width:440px){ .cex-op-card-body{grid-template-columns:1fr;} }
.cex-op-row > span:first-child { font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px; }
.cex-op-row { display:flex;flex-direction:column;gap:3px;padding:3px 0; }
.cex-op-row > span:last-child { font-size:14px;font-weight:500; }
.cex-op-amount { color:var(--green);font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700; }
.cex-op-mono   { font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold);word-break:break-all; }
.cex-op-wallet { font-size:11px !important;color:var(--muted2) !important;word-break:break-all; }
.cex-op-card-foot { padding:12px 16px;border-top:1px solid var(--bor);display:flex;flex-direction:column;gap:10px; }
.cex-op-note-input { width:100%;background:var(--sur2);border:1.5px solid var(--bor2);border-radius:var(--r);padding:10px 12px;color:var(--text);font-family:'Syne',sans-serif;font-size:14px;outline:none;box-sizing:border-box;transition:border-color .18s; }
.cex-op-note-input::placeholder { color:var(--muted); }
.cex-op-note-input:focus { border-color:var(--gold); }
.cex-op-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
@media(max-width:360px){ .cex-op-actions{grid-template-columns:1fr;} }
.cex-op-actions .cex-btn { margin-top:0;padding:12px 10px;font-size:14px; }

/* ── Загрузка контента ── */
.cex-loading { display:flex;align-items:center;justify-content:center;gap:9px;padding:28px 20px;color:var(--muted2);font-size:14px; }
.cex-err-box { text-align:center;padding:20px;color:#f87171;font-size:14px;background:rgba(239,68,68,.07);border-radius:var(--r);border:1px solid rgba(239,68,68,.2); }

/* ═══════════════════════════
   ИСТОРИЯ — активная заявка
═══════════════════════════ */
.cex-hist-active {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px rgba(245,158,11,.25), 0 4px 16px rgba(245,158,11,.1);
}

.cex-hist-timer {
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:15px; font-weight:700;
  color: var(--green);
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 8px;
  padding: 2px 9px;
  letter-spacing: 1px;
}
.cex-hist-timer.cex-timer-urgent  { color:var(--gold);background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3); }
.cex-hist-timer.cex-timer-expired { color:var(--red); background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.25); }

/* Реквизиты в истории */
.cex-hist-reqs {
  padding: 12px 14px;
  border-top: 1px solid var(--bor);
  background: var(--sur2);
}
.cex-hist-req-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--muted2); margin-bottom:8px;
}
.cex-hist-req-row {
  display:flex; align-items:center; gap:8px;
  font-size:13px; margin-bottom:4px;
}
.cex-hist-req-row span { color:var(--muted2); min-width:70px; }
.cex-hist-req-row b    { color:var(--text); font-family:'JetBrains Mono',monospace; }
.cex-hist-cardnum { color:var(--gold) !important; font-size:15px !important; letter-spacing:1px; }
.cex-hist-copy {
  background:none; border:1px solid var(--bor2); border-radius:6px;
  padding:2px 7px; cursor:pointer; font-size:13px; margin-left:auto;
  transition:background .15s;
}
.cex-hist-copy:hover { background:var(--sur3); }

/* Кнопка оплаты в истории */
.cex-hist-actions {
  padding: 12px 14px;
  border-top: 1px solid var(--bor);
}
.cex-hist-actions .cex-btn { margin-top:0 !important; }

/* ── Примечание оператора со счётчиком ── */
.cex-op-note-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}
.cex-op-note-wrap .cex-op-note-input {
  flex: 1;
  padding-right: 58px; /* место под счётчик */
}
.cex-op-note-count {
  position: absolute;
  right: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
  pointer-events: none;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}