/* app.css — стили RF Manager */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0d1117;
  --surface: #161b22;
  --surface2:#1f2937;
  --border:  #30363d;
  --border2: #21262d;
  --text:    #c9d1d9;
  --dim:     #8b949e;
  --blue:    #58a6ff;
  --green:   #3fb950;
  --yellow:  #d29922;
  --red:     #f85149;
  --r:       8px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

/* ── LOGIN ─────────────────────────────────────────── */
.login-wrap  { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-card  { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:36px 32px; width:100%; max-width:380px; }
.login-logo  { font-size:42px; text-align:center; margin-bottom:12px; }
.login-title { font-size:20px; font-weight:700; text-align:center; margin-bottom:4px; }
.login-sub   { color:var(--dim); font-size:13px; text-align:center; margin-bottom:24px; }
.step-block  { background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r); padding:16px; margin-bottom:12px; }
.step-label  { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; }
.otp-hint    { font-size:12px; color:var(--dim); text-align:center; margin-top:8px; }
.otp-input   { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:var(--r); padding:10px 14px; font-size:24px; letter-spacing:8px; text-align:center; font-family:monospace; }
.otp-input:focus { outline:none; border-color:var(--blue); }

/* ── BUTTONS ────────────────────────────────────────── */
.btn         { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border:none; border-radius:var(--r); cursor:pointer; font-size:13px; font-weight:500; transition:.15s; text-decoration:none; white-space:nowrap; }
.btn:active  { transform:scale(.97); }
.btn:disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-blue    { background:var(--blue);  color:#000; }
.btn-green   { background:var(--green); color:#000; }
.btn-ghost   { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue); }
.btn-tg      { background:#229ED9; color:#fff; }
.btn-sm      { padding:5px 10px; font-size:11px; border-radius:5px; }
.btn-block   { width:100%; }

/* ── DASHBOARD ──────────────────────────────────────── */
#dashboard   { padding:20px; max-width:1100px; margin:0 auto; }
.topbar      { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.topbar-logo { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.badge       { background:var(--surface2); border:1px solid var(--border); border-radius:4px; font-size:11px; padding:2px 7px; color:var(--dim); }

.stats       { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.stat        { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; }
.stat-lbl    { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.stat-val    { font-size:26px; font-weight:700; color:var(--blue); }
.stat-val.green { color:var(--green); }
.stat-date   { font-size:13px; margin-top:4px; color:var(--green); }

.grid2       { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:680px) { .grid2 { grid-template-columns:1fr; } }

.card        { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; }
.card-title  { font-size:14px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.card-hint   { font-size:12px; color:var(--dim); margin-bottom:14px; }

/* ── LOG BOX ────────────────────────────────────────── */
.log-wrap    { margin-top:10px; }
.log-box     { background:#0d1117; border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; font-family:'Courier New',monospace; font-size:11.5px; height:180px; overflow-y:auto; line-height:1.6; }
.l-ok        { color:var(--green); }
.l-error     { color:var(--red); }
.l-warn      { color:var(--yellow); }
.l-info      { color:var(--dim); }

/* ── PROGRESS BAR ───────────────────────────────────── */
.pbar        { height:3px; background:var(--border2); border-radius:99px; overflow:hidden; margin-top:8px; }
.pbar-fill   { height:100%; background:var(--blue); width:0; transition:width .3s; }
.pbar-fill.run { animation:indeterminate 1.4s linear infinite; }
@keyframes indeterminate { 0%{width:30%;margin-left:-30%} 100%{width:30%;margin-left:110%} }

/* ── UPLOAD / PREVIEW ───────────────────────────────── */
.drop-zone   { border:2px dashed var(--border); border-radius:var(--r); padding:22px; text-align:center; cursor:pointer; transition:.2s; margin-bottom:10px; }
.drop-zone:hover,.drop-zone.over { border-color:var(--blue); background:#0d1e30; }
.drop-ico    { font-size:26px; margin-bottom:6px; }
.drop-txt    { color:var(--dim); font-size:12px; }
.drop-txt b  { color:var(--blue); }

.preview     { background:#0d1f10; border:1px solid #2d5a3f; border-radius:var(--r); padding:12px; font-size:12px; margin-bottom:10px; }
.prow        { display:flex; justify-content:space-between; padding:2px 0; }
.pk          { color:var(--dim); }
.pv          { color:var(--green); font-weight:600; }

/* ── BACKUPS TABLE ──────────────────────────────────── */
table        { width:100%; border-collapse:collapse; font-size:12px; }
th           { padding:7px 10px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); border-bottom:1px solid var(--border); font-weight:500; }
td           { padding:8px 10px; border-bottom:1px solid var(--border2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td  { background:var(--surface2); }
.no-data     { color:var(--dim); text-align:center; padding:20px; font-size:12px; }

/* ── MESSAGES ────────────────────────────────────────── */
.msg         { padding:10px 14px; border-radius:var(--r); font-size:12px; margin-top:10px; }
.msg-ok      { background:#0d2818; color:var(--green); border:1px solid #2d5a3f; }
.msg-err     { background:#2d0d0d; color:var(--red);   border:1px solid #5a2d2d; }

/* ── MISC ────────────────────────────────────────────── */
.hidden      { display:none !important; }
.spin        { display:inline-block; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-window  { background:var(--surface); border:1px solid var(--border); border-radius:12px; width:100%; max-width:1000px; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-header  { display:flex; align-items:flex-start; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-title   { font-size:13px; font-weight:600; font-family:monospace; }
.modal-sub     { font-size:11px; color:var(--dim); margin-top:3px; }
.modal-tabs    { display:flex; gap:3px; padding:10px 14px 0; border-bottom:1px solid var(--border); overflow-x:auto; flex-shrink:0; }
.tab-btn       { background:transparent; border:1px solid transparent; border-radius:6px 6px 0 0; color:var(--dim); padding:6px 12px; font-size:12px; cursor:pointer; white-space:nowrap; transition:.15s; }
.tab-btn:hover { color:var(--text); border-color:var(--border); }
.tab-btn.active{ background:var(--surface2); color:var(--text); border-color:var(--border); border-bottom-color:var(--surface2); }
.tab-count     { background:var(--border); border-radius:10px; padding:1px 6px; font-size:10px; margin-left:4px; }
.modal-body    { flex:1; overflow:auto; min-height:0; }
.tab-panel     { display:none; }
.tab-panel.active { display:block; }
.tbl-scroll    { overflow-x:auto; }
.data-tbl      { width:max-content; min-width:100%; border-collapse:collapse; font-size:11px; }
.data-tbl th   { position:sticky; top:0; background:var(--surface); padding:6px 10px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--dim); border-bottom:1px solid var(--border); white-space:nowrap; z-index:1; }
.data-tbl td   { padding:5px 10px; border-bottom:1px solid var(--border2); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-tbl tr:hover td { background:var(--surface2); }