html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL DARK MODE — element overrides
   Token variables stay in _Layout.cshtml (must load last).
   These rules cover every view that uses these class names.
   ═══════════════════════════════════════════════════════ */

/* Cards / panels */
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .cv-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .credit-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .preview-panel,
html[data-theme="dark"] .result-box { background: var(--card); border-color: var(--border); }

html[data-theme="dark"] .preview-title { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .img-card { background: var(--card); }

/* Drag zones */
html[data-theme="dark"] .drag-area,
html[data-theme="dark"] .dz { background: #2A2424; border: 2px dashed rgba(255,107,26,.45); }
html[data-theme="dark"] .drag-area:hover,
html[data-theme="dark"] .dz:hover { background: #332828; }
html[data-theme="dark"] .drag-area p,
html[data-theme="dark"] .dz-label { color: var(--ink); }

/* Inputs / selects */
html[data-theme="dark"] .cv-select,
html[data-theme="dark"] .cv-input,
html[data-theme="dark"] .inp { background: var(--field-bg); border-color: var(--field-border); color: var(--ink); }
html[data-theme="dark"] .inp:focus { background: var(--card); }
html[data-theme="dark"] input[type=range] { accent-color: var(--orange); }
html[data-theme="dark"] .range-track { background: var(--border); }

/* File lists */
html[data-theme="dark"] #fileList,
html[data-theme="dark"] .file-list { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] #fileList .list-group-item,
html[data-theme="dark"] .list-group-item { background: transparent; border-color: var(--border-light); color: var(--ink); }

/* Progress */
html[data-theme="dark"] .prog-bar-track { background: var(--border); }

/* Dividers */
html[data-theme="dark"] .cv-divider { background: var(--border); }

/* Subscription alert banners */
html[data-theme="dark"] .alert-renew.danger  { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: #f87171; }
html[data-theme="dark"] .alert-renew.danger a { color: #fca5a5; }
html[data-theme="dark"] .alert-renew.warning { background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.35); color: #fcd34d; }
html[data-theme="dark"] .alert-renew.warning a { color: #fde68a; }

/* Status / info boxes */
html[data-theme="dark"] #processingIndicator { background: rgba(217,142,4,.1); border-color: rgba(217,142,4,.25); color: #fbbf24; }
html[data-theme="dark"] .compress-stats { background: rgba(13,148,136,.12); border-color: rgba(13,148,136,.25); color: var(--ink); }
html[data-theme="dark"] .limit-chip { background: rgba(255,80,0,.12); border-color: rgba(255,80,0,.25); }

/* Buttons */
html[data-theme="dark"] .btn-ghost { background: var(--field-bg); border-color: var(--field-border); color: var(--sub); }
html[data-theme="dark"] .btn-ghost:hover { background: var(--hover-bg); color: var(--text); }
html[data-theme="dark"] .eye-btn { background: var(--field-bg); border-color: var(--field-border); }
html[data-theme="dark"] .eye-btn:hover { background: var(--hover-bg); }

/* Row / table styles */
html[data-theme="dark"] .spec-row { border-color: var(--border); }
html[data-theme="dark"] .spec-row:hover { background: var(--hover-bg); }
html[data-theme="dark"] .faq-item { border-color: var(--border); }

/* Billing */
html[data-theme="dark"] .billing-toggle { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .billing-btn { color: var(--sub); }

/* Home page — page-specific */
html[data-theme="dark"] .digit-dash { background: var(--border); }
html[data-theme="dark"] .tl-line { background: var(--border); }
html[data-theme="dark"] .f-thumb { border-color: var(--border); }
html[data-theme="dark"] .f-ico { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); }
html[data-theme="dark"] #fileSummary { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] #clearAllBtn { border-color: var(--border); color: var(--sub); }
html[data-theme="dark"] #clearAllBtn:hover { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.4); }
html[data-theme="dark"] .code-box { background: #121418; border: 1px solid #374151; color: var(--text); transition: border-color .2s, box-shadow .2s, transform .2s; }
html[data-theme="dark"] .code-box:focus { border-color: #FF6B1A; box-shadow: 0 0 15px rgba(255,107,26,.3); transform: translateY(-1px); outline: none; }
html[data-theme="dark"] .code-box.filled { background: rgba(20,108,90,.15); border-color: rgba(20,108,90,.4); color: #1a9c83; }
html[data-theme="dark"] .digit-inp { background: #121418; border: 1px solid #374151; transition: border-color .2s, box-shadow .2s, transform .2s; }
html[data-theme="dark"] .digit-inp.has-val { background: var(--recv-d); color: #1a9c83; }
html[data-theme="dark"] .digit-inp:focus { background: #121418; border-color: #FF6B1A; box-shadow: 0 0 15px rgba(255,107,26,.3); transform: translateY(-1px); }
/* Security table alternating rows */
html[data-theme="dark"] .spec-row:nth-child(odd)  { background: #1E232B; }
html[data-theme="dark"] .spec-row:nth-child(even) { background: #222831; }
/* Hero title spacing */
html[data-theme="dark"] .hero-title { margin-bottom: 60px; }