/*
 * Codesverify user-portal theme layer (rewritten 2026-09-22).
 * LIGHT mode = the site's native look, untouched (default).
 * DARK mode = a complete mirror, scoped to html[data-theme="dark"] so it can
 * never affect the light site or the ordering flow. Every rule below was
 * matched against the live user/css/style.css so no section is left half-lit.
 *
 * Palette (dark):
 *   page   #0e1726   surface #172032 / #1e293b   input #0f1a2b
 *   text   #e6edf5   muted   #93a2b8             border #2b3a52
 *   accent #34c6e6   link    #6cc4ff             thead-grad kept
 */

/* smooth switch */
html, body { transition: background-color .2s ease, color .2s ease; }

/* ---- the toggle control (works in both themes) ------------------------- */
.cv-theme-toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid rgba(0,0,0,.15); background:#fff; color:#222;
  border-radius:999px; padding:6px 12px; font-size:14px; font-weight:600;
  line-height:1; user-select:none;
}
.cv-theme-toggle .cv-tt-ic{ width:18px; height:18px; }
.cv-theme-toggle:hover{ border-color:#0da4d4; }
html[data-theme="dark"] .cv-theme-toggle{ background:#1e293b; color:#e6edf5; border-color:#334155; }
.cv-tt-dark{ display:inline; } .cv-tt-light{ display:none; }
html[data-theme="dark"] .cv-tt-dark{ display:none; } html[data-theme="dark"] .cv-tt-light{ display:inline; }
.cv-tt-ic-moon{ display:inline; } .cv-tt-ic-sun{ display:none; }
html[data-theme="dark"] .cv-tt-ic-moon{ display:none; } html[data-theme="dark"] .cv-tt-ic-sun{ display:inline; }
/* dropdown-item variant (Account menu) */
.dropdown-item.cv-theme-toggle{ width:100%; justify-content:flex-start; border:0; border-radius:0; background:transparent; padding:8px 20px; }
html[data-theme="dark"] .dropdown-item.cv-theme-toggle{ background:transparent; color:#e6edf5; }

/* top-of-menu theme toggle button (moon/sun icon + short label) */
.cv-nav-theme .fa{ font-size:16px; }
.cv-nav-theme .cv-nav-theme-lbl{ margin-left:4px; }
@media (min-width:992px){ .cv-nav-theme .cv-nav-theme-lbl{ display:none !important; } } /* icon-only on desktop */

/* ======================================================================= */
/* ============= FLAT MENU (both themes — no gradients) ================== */
/* The live style.css paints the active tab, link hover and the balance     */
/* pill with blue/teal gradients; flatten them to clean solid colours.      */
/* ======================================================================= */
.header nav ul .active,
.header nav ul .active a,
.header nav ul li a:hover,
.header nav ul li a:focus{
  background-image:none !important;
  background:#0056a3 !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.header nav ul li .color{
  background-image:none !important;
  -webkit-box-shadow:none !important; box-shadow:none !important;
  background:#eef4f7 !important; border:1px solid #cadde4 !important; color:#0056a3 !important;
}
/* dark: flat variants */
html[data-theme="dark"] .header nav ul .active,
html[data-theme="dark"] .header nav ul .active a{ background:#0e6ea5 !important; color:#fff !important; box-shadow:none !important; }
html[data-theme="dark"] .header nav ul li a:hover,
html[data-theme="dark"] .header nav ul li a:focus{ background:#1c2942 !important; color:#fff !important; box-shadow:none !important; }

/* keep the header (and its Account dropdown) above page content — the
 * dropdown was rendering BEHIND the Notice box + orders table. */
.header{ position:relative; z-index:1030; }
.header nav .dropdown-menu{ z-index:1051; }

/* nav labels never wrap to two lines (e.g. "Add Balance", "My Orders") */
@media (min-width:992px){
  .header nav ul li a, .header nav ul li .btn{ white-space:nowrap; }
  .header nav ul li{ padding:0 8px; }
}

/* ---- sticky footer: push the footer to the bottom on short pages ------ */
html, body{ min-height:100%; }
body{ display:flex; flex-direction:column; min-height:100vh; }
body > section, body > .section, body > .privacy-sec, body > .register-sec,
body > .container, body > .main-content{ flex:1 0 auto; }
.footer, .cv-footer{ flex-shrink:0; margin-top:auto !important; }

/* ---- consistent page width across ALL pages (max 1200px) -------------- */
/* Some pages used .container (1140/1368px inline) and others .container-fluid
 * (full width), so the grid jumped between pages. Pin everything to 1200. */
@media (min-width:992px){
  .navbar > .container,
  .section > .container, .section > .container-fluid,
  .privacy-sec > .container, .privacy-sec > .container-fluid,
  .register-sec > .container, .refund-sec > .container,
  .cv-footer > .container,
  .container, .container-fluid{
    max-width:1200px !important; width:100%;
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* ======================================================================= */
/* ============ CLEAN ACCOUNT DROPDOWN (both themes) ===================== */
/* The live css centered items + UPPERCASED them at 18px, so the menu       */
/* looked ragged. Force a tidy left-aligned list with an icon column.       */
/* ======================================================================= */
.header nav ul li .dropdown-menu{
  min-width:240px; padding:8px !important; margin-top:10px !important;
  text-align:left !important; border-radius:14px !important;
  border:1px solid rgba(0,0,0,.08) !important; background:#ffffff !important;
  box-shadow:0 18px 42px rgba(15,30,60,.20) !important;
}
.header nav ul li .dropdown-menu a,
.header nav ul li .dropdown-menu a.dropdown-item{
  display:flex !important; align-items:center; gap:12px; width:100%;
  text-align:left !important; text-transform:none !important;
  font-size:15px !important; font-weight:600 !important; line-height:1.25;
  color:#1b2b47 !important; padding:11px 14px !important;
  border-radius:9px !important; white-space:nowrap; border:0 !important;
}
.header nav ul li .dropdown-menu a .fa{ width:18px; text-align:center; font-size:15px; color:#0056a3; }
.header nav ul li .dropdown-menu a:hover,
.header nav ul li .dropdown-menu a:focus{ background:#eef4f7 !important; color:#0056a3 !important; }
.header nav ul li .dropdown-menu .dropdown-divider{ margin:6px 6px !important; border-top:1px solid rgba(0,0,0,.09) !important; }
.header nav ul li .dropdown-menu a.cv-di-logout{ color:#c0392b !important; }
.header nav ul li .dropdown-menu a.cv-di-logout .fa{ color:#c0392b; }
.header nav ul li .dropdown-menu a.cv-di-logout:hover{ background:#fdecea !important; color:#a5281c !important; }
/* dark dropdown */
html[data-theme="dark"] .header nav ul li .dropdown-menu{
  background:#0f1a2b !important; border-color:#26344d !important;
  box-shadow:0 22px 48px rgba(0,0,0,.62) !important;
}
html[data-theme="dark"] .header nav ul li .dropdown-menu a,
html[data-theme="dark"] .header nav ul li .dropdown-menu a.dropdown-item{ color:#dbe7f2 !important; }
html[data-theme="dark"] .header nav ul li .dropdown-menu a .fa{ color:#3fd0ec !important; }
html[data-theme="dark"] .header nav ul li .dropdown-menu a:hover,
html[data-theme="dark"] .header nav ul li .dropdown-menu a:focus{ background:#1c2942 !important; color:#fff !important; }
html[data-theme="dark"] .header nav ul li .dropdown-menu .dropdown-divider{ border-top-color:#26344d !important; }
html[data-theme="dark"] .header nav ul li .dropdown-menu a.cv-di-logout{ color:#ff8a8a !important; }
html[data-theme="dark"] .header nav ul li .dropdown-menu a.cv-di-logout .fa{ color:#ff8a8a; }
html[data-theme="dark"] .header nav ul li .dropdown-menu a.cv-di-logout:hover{ background:#3b1418 !important; color:#ffb4b4 !important; }

/* ======================================================================= */
/* ============ REMOVE LOUD GRADIENTS in dark (flat + clean) ============= */
/* ======================================================================= */
/* the "Search for an App" card header */
html[data-theme="dark"] .section .card .card-body{
  background-image:none !important; background:#132139 !important;
  border-bottom:1px solid #26344d;
}
/* the table header (was a blue->teal gradient) */
html[data-theme="dark"] .section table thead,
html[data-theme="dark"] .table thead{ background-image:none !important; background:#0e6ea5 !important; }
html[data-theme="dark"] .section table thead tr th,
html[data-theme="dark"] .table thead th{ background:#0e6ea5 !important; background-image:none !important; color:#fff !important; }

/* ======================================================================= */
/* ============================== FOOTER ================================= */
/* ======================================================================= */
.cv-footer{ margin-top:36px !important; padding:0 !important;
  background:#eef4f7 !important; border-top:3px solid #0056a3; }
.cv-footer .container{ padding-top:26px; padding-bottom:18px; }
.cv-foot-top{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start; }
.cv-foot-brand{ max-width:420px; }
.cv-foot-name{ font-size:22px; font-weight:800; color:#0056a3; letter-spacing:.3px; }
.cv-foot-tag{ margin:8px 0 6px; font-size:14px; color:#5b6675; line-height:1.5; }
.cv-foot-pay{ margin:0; font-size:13px; color:#0056a3; font-weight:600; }
.cv-foot-pay .fa{ color:#0056a3; margin-right:5px; }
.cv-foot-links{ display:flex; flex-wrap:wrap; gap:8px 22px; align-content:flex-start; }
.cv-foot-links a{ font-size:14px; font-weight:600; color:#44515f; text-decoration:none; white-space:nowrap; }
.cv-foot-links a:hover{ color:#0056a3; }
.cv-foot-bottom{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(0,0,0,.08);
  font-size:13px; color:#6b7480; text-align:center; }
/* footer — dark */
html[data-theme="dark"] .cv-footer{ background:#0b1220 !important; border-top-color:#3fd0ec; }
html[data-theme="dark"] .cv-foot-name{ color:#3fd0ec; }
html[data-theme="dark"] .cv-foot-tag{ color:#93a2b8; }
html[data-theme="dark"] .cv-foot-pay, html[data-theme="dark"] .cv-foot-pay .fa{ color:#3fd0ec; }
html[data-theme="dark"] .cv-foot-links a{ color:#a8b6c6; }
html[data-theme="dark"] .cv-foot-links a:hover{ color:#fff; }
html[data-theme="dark"] .cv-foot-bottom{ color:#8593a5; border-top-color:#26344d; }
@media (max-width:767px){
  .cv-foot-top{ flex-direction:column; gap:16px; text-align:center; }
  .cv-foot-brand{ max-width:100%; }
  .cv-foot-links{ justify-content:center; gap:8px 16px; }
}

/* ======================================================================= */
/* ============================== DARK MODE ============================== */
/* ======================================================================= */

/* ---- page shell ---- */
html[data-theme="dark"] body{
  background-color:#0b1220 !important;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(39,224,219,.10) 0%, rgba(39,224,219,0) 60%),
    radial-gradient(1000px 520px at 100% 0%, rgba(33,6,140,.28) 0%, rgba(33,6,140,0) 55%),
    linear-gradient(180deg, #0e1a2e 0%, #0b1220 100%) !important;
  background-attachment:fixed !important;
  color:#e6edf5;
}
/* icons pick up the accent so the menu + pages feel alive */
html[data-theme="dark"] .fa{ color:#3fd0ec; }
html[data-theme="dark"] .btn .fa, html[data-theme="dark"] .table thead th .fa,
html[data-theme="dark"] .alert .fa, html[data-theme="dark"] .btn-success .fa{ color:inherit; }
html[data-theme="dark"] .container,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .section,
html[data-theme="dark"] section.section{ background-color:transparent !important; color:#e6edf5; }

/* generic text */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] p,  html[data-theme="dark"] span, html[data-theme="dark"] li,
html[data-theme="dark"] label, html[data-theme="dark"] strong, html[data-theme="dark"] b,
html[data-theme="dark"] .text-dark{ color:#e6edf5; }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] small{ color:#93a2b8 !important; }
html[data-theme="dark"] a{ color:#6cc4ff; }
html[data-theme="dark"] hr{ border-color:#2b3a52; }

/* =======================================================================
 * HEADER / NAV  — live: .header nav{background:#edf5f8!important}; links #000
 * ===================================================================== */
html[data-theme="dark"] .header nav{
  background-color:rgba(14,23,40,.82) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(63,208,236,.22), 0 8px 26px rgba(0,0,0,.45);
}
html[data-theme="dark"] .header nav ul{ background-color:transparent; }
html[data-theme="dark"] .header nav ul li a{ color:#dbe7f2; transition:color .15s ease, background .15s ease; }
html[data-theme="dark"] .header nav ul li .btn{ color:#dbe7f2; }
html[data-theme="dark"] .header nav ul li a:hover{ color:#ffffff !important; }
/* balance pill: flat dark (gradient removed) */
html[data-theme="dark"] .header nav ul li .color{
  background-color:#0f1a2b !important; border:1px solid #26344d !important;
  color:#3fd0ec !important; font-weight:700;
}
html[data-theme="dark"] .header nav ul li .color .fa{ color:#3fd0ec !important; }
/* nav dropdown menu (live #c8d2d6) */
html[data-theme="dark"] .header nav ul li .dropdown-menu,
html[data-theme="dark"] .dropdown-menu{ background-color:#1e293b !important; border-color:#334155 !important; }
html[data-theme="dark"] .dropdown-item{ color:#e6edf5 !important; }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus{ background-color:#243449 !important; color:#fff !important; }

/* =======================================================================
 * CARDS  — live: .section .card{background:#edf5f8}; card-body is a colored
 * gradient (kept, it looks good in dark too).
 * ===================================================================== */
html[data-theme="dark"] .card,
html[data-theme="dark"] .section .card,
html[data-theme="dark"] .panel, html[data-theme="dark"] .box,
html[data-theme="dark"] .well, html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-content{
  background-image:linear-gradient(180deg, #18233a 0%, #131c2e 100%) !important;
  background-color:#141d2e !important;
  border:1px solid #26344d !important;
  box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03) !important;
  color:#e6edf5 !important;
}
html[data-theme="dark"] .card-body, html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .panel-body{ background-color:transparent !important; color:#e6edf5 !important; }
/* .section .card h6 was #000 */
html[data-theme="dark"] .section .card h6{ color:#e6edf5 !important; }

/* app-search result list  — live: li{color:#000;background:#fff}; hover uses
 * box-shadow #fff inset (that is what forced them white on hover). */
html[data-theme="dark"] .section .card ul li,
html[data-theme="dark"] li[id^="aid_"]{
  background-image:linear-gradient(180deg,#132139 0%,#0f1a2b 100%) !important;
  color:#e6edf5 !important; border:1px solid #26344d !important;
  transition:box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
html[data-theme="dark"] .section .card ul li a,
html[data-theme="dark"] li[id^="aid_"] a{ color:#e6edf5 !important; }
html[data-theme="dark"] .section .card ul li .right,
html[data-theme="dark"] li[id^="aid_"] .right{ color:#3fd0ec !important; font-weight:600; }
html[data-theme="dark"] .section .card ul li:hover,
html[data-theme="dark"] .section .card ul #first:hover{
  -webkit-box-shadow:2px 1000px 1px #1a2b46 inset, 0 0 0 1px rgba(63,208,236,.5), 0 6px 16px rgba(39,224,219,.15) !important;
  box-shadow:2px 1000px 1px #1a2b46 inset, 0 0 0 1px rgba(63,208,236,.5), 0 6px 16px rgba(39,224,219,.15) !important;
  border-color:transparent !important; transform:translateY(-1px);
}
html[data-theme="dark"] #apps{ scrollbar-color:#2779e0 transparent; }

/* =======================================================================
 * TABLES (orders / codes / credit / deduction history)
 * live: .section table{background:#fff}; td{background:#edf5f8;color:#757373}
 * and tables carry inline style="background-color:#fff"
 * ===================================================================== */
html[data-theme="dark"] .section table,
html[data-theme="dark"] table.table,
html[data-theme="dark"] .table[style]{
  background-color:#172032 !important; color:#e6edf5 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .section table tr td,
html[data-theme="dark"] .table td{ background-color:#141d2c !important; color:#cbd5e1 !important; border-color:#2b3a52 !important; }
html[data-theme="dark"] .table th{ border-color:#2b3a52 !important; }
/* thead keeps the blue/teal gradient from the live css (looks right on dark),
 * just make sure the text is white */
html[data-theme="dark"] .section table tr th,
html[data-theme="dark"] .table thead th{ color:#ffffff !important; }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td{ background-color:#182234 !important; }
html[data-theme="dark"] .table-hover tbody tr:hover td{ background-color:#223148 !important; }
/* the white gap the live css draws between thead and tbody */
html[data-theme="dark"] .section table tbody:before{ background-color:#172032 !important; }

/* =======================================================================
 * FORMS
 * ===================================================================== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] select, html[data-theme="dark"] textarea{
  background-color:#0f1a2b !important; color:#e6edf5 !important; border-color:#2b3a52 !important;
}
html[data-theme="dark"] .form-control::placeholder{ color:#64748b !important; }
html[data-theme="dark"] .form-control:focus{ background-color:#0f1a2b !important; color:#e6edf5 !important; border-color:#34c6e6 !important; box-shadow:0 0 0 .15rem rgba(52,198,230,.22) !important; }
/* the search box inside the gradient card-body keeps white text on gradient */
html[data-theme="dark"] .section .card .card-body .form-control{ background:transparent !important; color:#ffffff !important; }
html[data-theme="dark"] .input-group-addon,
html[data-theme="dark"] .input-group-text{ background:#223148 !important; color:#e6edf5 !important; border-color:#2b3a52 !important; }

/* buttons */
html[data-theme="dark"] .btn-default{ background-color:#1c2942; color:#e6edf5; border-color:#2b3a52; }
html[data-theme="dark"] .btn-default:hover{ background-color:#26374f; color:#fff; border-color:#3fd0ec; }
html[data-theme="dark"] .btn-success{ background:#17a34a !important; background-image:none !important; border:1px solid #17a34a !important; color:#fff !important; font-weight:700; box-shadow:0 4px 14px rgba(23,163,74,.25); }
html[data-theme="dark"] .btn-success:hover{ background:#149243 !important; }
html[data-theme="dark"] .btn-primary{ background:#0e6ea5 !important; background-image:none !important; border:1px solid #0e6ea5 !important; color:#fff !important; }
html[data-theme="dark"] .btn-primary:hover{ background:#0b5c8a !important; }
html[data-theme="dark"] .panel-primary > .panel-heading{ background:#0e6ea5 !important; background-image:none !important; border:none !important; color:#fff !important; }

/* buttons should never touch each other */
.btn + .btn{ margin-left:10px; }
@media (max-width:576px){ .btn + .btn{ margin-left:0; } }

/* alerts */
html[data-theme="dark"] .alert-success{ background-color:#052e2b !important; color:#6ee7b7 !important; border-color:#065f46 !important; }
html[data-theme="dark"] .alert-danger{ background-color:#3b0d17 !important; color:#fca5a5 !important; border-color:#7f1d1d !important; }
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-warning{ background-color:#1e293b !important; color:#e6edf5 !important; border-color:#334155 !important; }

/* =======================================================================
 * PAGE TITLE BAR + STATIC PAGES
 * live: .privacy-sec h1{background:#cadde4}; #contact-form inputs #9799a05c;
 * .register-sec .signup-form uses #fff inset box-shadow.
 * ===================================================================== */
html[data-theme="dark"] .privacy-sec h1{ background-color:#172032 !important; color:#e6edf5 !important; }
html[data-theme="dark"] .privacy-sec p.ans{ color:#cbd5e1 !important; }
html[data-theme="dark"] #contact-form input.form-control,
html[data-theme="dark"] #contact-form textarea.form-control{ background-color:#0f1a2b !important; color:#e6edf5 !important; }
html[data-theme="dark"] .register-sec .signup-form{
  -webkit-box-shadow:2px 1000px 1px #172032 inset !important;
  box-shadow:2px 1000px 1px #172032 inset !important;
  color:#cbd5e1 !important;
}
html[data-theme="dark"] .register-sec .signup-form .form-control{ background-color:#0f1a2b !important; }

/* news ticker (sidebar marquee, inline background:#efefef) */
html[data-theme="dark"] marquee{ background:#172032 !important; border-color:#2b3a52 !important; color:#e6edf5 !important; }
html[data-theme="dark"] marquee p, html[data-theme="dark"] marquee b, html[data-theme="dark"] marquee span{ color:#e6edf5 !important; }

/* any remaining inline light-coloured boxes */
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="#efefef"],
html[data-theme="dark"] [style*="#f0f0f0"],
html[data-theme="dark"] [style*="#eee"],
html[data-theme="dark"] [style*="background-color: rgb(255"]{ background-color:#172032 !important; color:#e6edf5 !important; }

/* =======================================================================
 * FOOTER  — live: .footer{background:#9799a05c}; .copy h6 #000; .link a #575656
 * ===================================================================== */
html[data-theme="dark"] .footer{ background-color:#0b1220 !important; margin-top:3%; }
html[data-theme="dark"] .footer .copy h6{ color:#cbd5e1 !important; }
html[data-theme="dark"] .footer .link a{ color:#93a2b8 !important; }
html[data-theme="dark"] .footer .link a:hover{ color:#ffffff !important; }

/* date/time pickers render dark */
html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=datetime-local]{ color-scheme:dark; }

/* ======================================================================= */
/* ====================== MOBILE RESPONSIVE (both themes) ================ */
/* Applies to light AND dark. Fixes: sideways scroll, invisible hamburger,  */
/* the collapsed menu, wide tables, edge-to-edge cards, oversized text.     */
/* Additive — desktop (>=992px) untouched.                                  */
/* ======================================================================= */

/* media never breaks its column */
img, svg, video, iframe, .img-fluid, table img{ max-width:100%; }

/* --- phones & tablets (<=991px) ---------------------------------------- */
@media (max-width:991px){
  html, body{ max-width:100%; overflow-x:hidden; }

  /* keep the brand + controls + hamburger on one tidy row */
  .header .navbar{ padding:8px 6px; flex-wrap:nowrap; }
  .navbar-brand img{ width:140px !important; height:auto !important; }

  /* out-of-menu compact controls (theme + balance) live beside the hamburger */
  .cv-only-desktop{ display:none !important; }
  .cv-mobile-controls{ display:flex; align-items:center; gap:8px; margin-left:auto; }
  .cv-mc-theme{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:11px; border:1px solid rgba(0,0,0,.15);
    background:#fff; color:#0056a3; font-size:18px; text-decoration:none; flex:0 0 auto;
  }
  .cv-mc-theme:hover{ border-color:#0056a3; }
  .cv-mc-bal{
    display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 13px;
    border-radius:11px; background:#0056a3; color:#fff !important; font-weight:700;
    font-size:15px; text-decoration:none; white-space:nowrap; flex:0 0 auto;
  }
  .cv-mc-bal .fa{ color:#fff; }
  .cv-mobile-controls .navbar-toggler{ padding:0; width:46px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.2); border-radius:11px; }

  /* the collapsed menu: a clean, COMPACT rounded panel */
  .header nav .navbar-collapse{
    margin-top:10px; background:#fff; border-radius:14px;
    padding:6px; box-shadow:0 14px 30px rgba(15,30,60,.16); border:1px solid rgba(0,0,0,.06);
  }
  .header nav ul{ width:100%; padding:0; border-radius:14px; }
  .header nav ul li{ padding:0; margin:0; border-radius:9px; }
  .header nav ul li + li{ border-top:1px solid rgba(0,0,0,.06); }
  /* left-aligned, compact rows with the icons */
  .header nav ul li a, .header nav ul li .btn{
    display:flex !important; align-items:center; gap:12px;
    width:100%; text-align:left !important; justify-content:flex-start !important;
    padding:11px 14px !important; font-size:15px !important; font-weight:600 !important;
    text-transform:none !important; border-radius:9px;
  }
  .header nav ul li a .fa, .header nav ul li .btn .fa{ width:18px; text-align:center; font-size:15px; color:#0056a3; }
  .header nav ul li a.active, .header nav ul li .active a{ background:#eef4f7 !important; color:#0056a3 !important; }
  /* Account dropdown opens inline (not floating) */
  .header nav ul li.dropdown{ border-top:1px solid rgba(0,0,0,.06); }
  .header nav ul li.dropdown > .dropdown-toggle{ font-weight:700 !important; }
  .header nav ul li.dropdown .dropdown-menu{
    position:static !important; float:none; width:100%;
    box-shadow:none !important; margin:0 !important; padding:0 !important;
    border:0 !important; background:transparent !important;
  }
  html[data-theme="dark"] .header nav ul li.dropdown .dropdown-menu{ background:transparent !important; }
  .header nav ul li.dropdown .dropdown-menu a.dropdown-item{
    padding:11px 14px 11px 26px !important; font-size:14.5px !important;
  }
  .header nav ul li.dropdown .dropdown-menu .dropdown-divider{ display:none; }

  /* dark: compact panel surfaces */
  html[data-theme="dark"] .header nav .navbar-collapse{ background:#111c2e; border-color:#26344d; }
  html[data-theme="dark"] .header nav ul li + li,
  html[data-theme="dark"] .header nav ul li.dropdown{ border-top-color:#26344d; }
  html[data-theme="dark"] .header nav ul li a .fa, html[data-theme="dark"] .header nav ul li .btn .fa{ color:#3fd0ec; }
  html[data-theme="dark"] .cv-mc-theme{ background:#0f1a2b; border-color:#3fd0ec; color:#3fd0ec; }
  html[data-theme="dark"] .cv-mc-bal{ background:#0f1a2b; color:#3fd0ec !important; border:1px solid #26344d; }
  html[data-theme="dark"] .cv-mc-bal .fa{ color:#3fd0ec; }
  html[data-theme="dark"] .cv-mobile-controls .navbar-toggler{ border-color:#3fd0ec; background:#0f1a2b; }

  /* any wide table scrolls inside its own box, not the whole page */
  .section table, table.table, .table-responsive > table{
    display:block; width:100%; max-width:100%;
    table-layout:auto !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .table-responsive{ -webkit-overflow-scrolling:touch; border:0; }
  .section table tr td, .section table tr th{ white-space:nowrap; }
}

/* --- dark-mode header controls on mobile ------------------------------- */
@media (max-width:991px){
  html[data-theme="dark"] .navbar-toggler{ border-color:#3fd0ec; }
  /* Bootstrap's navbar-light hamburger is dark bars -> invisible on a dark
     header. Swap in a light-stroke icon. */
  html[data-theme="dark"] .navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(63,208,236,0.95)' stroke-width='2.2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  html[data-theme="dark"] .header nav .navbar-collapse{
    background:#111c2e; box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 0 1px #26344d;
  }
  html[data-theme="dark"] .header nav ul li a{ color:#dbe7f2 !important; }
  html[data-theme="dark"] .header nav ul li a:hover,
  html[data-theme="dark"] .header nav ul li a:active{ background:#1c2942 !important; color:#fff !important; }
}

/* --- phones (<=576px): gutters, sizing, readable static text ----------- */
@media (max-width:576px){
  /* the live css sets .section{padding:0!important}; restore a side gutter */
  .section > .container,
  .privacy-sec .container,
  .register-sec .container,
  .refund-sec .container{ padding-left:14px !important; padding-right:14px !important; }
  .section{ padding:10px 0 !important; }
  .section .card{ margin-bottom:16px; }

  /* stacked columns get breathing room */
  .section .row > [class*="col-"]{ margin-bottom:14px; }
  .row.text-center > [class*="col-"]{ margin-bottom:22px; }

  /* hero + headings shrink so nothing overflows */
  .left{ text-align:center; }
  .left h1{ font-size:23px !important; }
  .left h2{ font-size:17px !important; }
  .left p{ font-size:15px !important; }
  .left a.btn, .left .btn{ display:inline-block; margin:6px 4px !important; }
  .privacy-sec h1{ font-size:21px; padding:16px 10px; }
  .privacy-sec p.ans{ font-size:1.05rem !important; }
  h1{ font-size:23px; } h2{ font-size:19px; } h3{ font-size:17px; }

  /* forms + buttons: full width, easy tap targets */
  .form-control{ font-size:15px; min-height:42px; }
  .btn{ font-size:14px; }
  .btn-success, .btn-primary{ width:100%; margin:6px 0 !important; }
  .register-sec .signup-form{ padding:22px 14px; }
  .register-sec .signup-form .btn{ width:100%; margin:6px 0 !important; }

  /* the search card header + input stay comfortable */
  .section .card .card-body .form-inline{ flex-wrap:nowrap; }

  /* footer stacks + centers */
  .footer{ text-align:center; }
  .footer .copy h6, .footer .link{ text-align:center !important; }
  .footer .link a{ padding:2px 8px; display:inline-block; }

  /* shorter sidebar news ticker */
  marquee{ height:170px !important; margin:20px 0 !important; }

  /* dropdowns never wider than the screen */
  .dropdown-menu{ max-width:calc(100vw - 24px); }

  /* tighter table cells so more fits before scrolling */
  .section table tr td, .section table tr th{ padding:10px 8px !important; font-size:12px; }
}

/* ======================================================================= */
/* ============ LOGGED-OUT (GUEST) HOME — mobile layout ================== */
/* After logout the visitor lands on index.php: left column = app-search    */
/* card + long app list + news ticker, right column = the Welcome hero.     */
/* On phones the search column stacked ABOVE the hero, burying the          */
/* marketing + Login/Sign Up. For guests only, show the hero FIRST.         */
/* ======================================================================= */
@media (max-width:991px){
  body.cv-guest .section > .container > .row{ display:flex; flex-direction:column; }
  body.cv-guest .section > .container > .row > .col-lg-8{ order:0; }  /* hero */
  body.cv-guest .section > .container > .row > .col-lg-4{ order:1; }  /* search */
}

/* hero + feature boxes polish (guest home, both themes) */
@media (max-width:767px){
  .left{ padding:6px 0 0 !important; }
  .image{ margin:8px auto 18px !important; }
  .image img{ max-width:220px; display:block; margin:0 auto; }
  /* the 3 "Get Number / Send Code / Get Code" steps */
  .row.text-center .head img{ width:52px; height:52px; }
  .row.text-center .para h3{ font-size:18px; margin-top:10px; }
  .row.text-center .para p{ font-size:14px; color:inherit; }
  /* the guest app-search card is secondary: cap its list height on phones */
  body.cv-guest #apps{ max-height:280px; }
}

/* --- logged-out (guest) mobile: prominent stacked CTAs + tidy hero ------ */
@media (max-width:576px){
  body.cv-guest .left{ text-align:center; padding:4px 4px 0 !important; }
  body.cv-guest .left h1{ font-size:24px !important; }
  body.cv-guest .left a.btn{
    display:block !important; width:100%; margin:8px 0 !important;
    padding:12px 0 !important; font-size:16px !important; border-radius:12px;
  }
  /* first CTA (Login) is the primary; make it filled brand blue */
  body.cv-guest .left a.btn:first-of-type{ background:#0056a3 !important; background-image:none !important; color:#fff !important; }
  body.cv-guest .left a.btn:last-of-type{ background:#eef4f7 !important; background-image:none !important; color:#0056a3 !important; border:1px solid #b9d3e6 !important; }
  html[data-theme="dark"] body.cv-guest .left a.btn:first-of-type{ background:#0e6ea5 !important; color:#fff !important; }
  html[data-theme="dark"] body.cv-guest .left a.btn:last-of-type{ background:#132139 !important; color:#3fd0ec !important; border-color:#26344d !important; }
  /* the "About" block text stays readable */
  body.cv-guest .left h2, body.cv-guest .left + * h2{ font-size:17px !important; }
}

/* dark: keep the guest hero text readable */
html[data-theme="dark"] .left h1 span{ color:#3fd0ec; }
html[data-theme="dark"] .row.text-center .para h3{ color:#e6edf5; }

/* ======================================================================= */
/* ============ PHASE 0 — SHARED PORTAL COMPONENTS ====================== */
/* Opt-in classes used by the modernised pages (page_header.php + cards).   */
/* Both themes. Nothing here changes a page until the page adopts them.     */
/* ======================================================================= */

/* --- standard page header (includes/page_header.php) --- */
.cv-page-head{ background:#eef4f7; border-bottom:1px solid #d7e3ea; padding:22px 0; margin-bottom:24px; }
.cv-ph-inner{ display:flex; align-items:center; gap:16px; }
.cv-ph-ic{ width:54px; height:54px; border-radius:15px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0056a3; color:#fff !important; font-size:24px; line-height:1;
  box-shadow:0 8px 20px rgba(0,86,163,.22); }
.cv-ph-ic .fa{ color:#fff !important; }
.cv-ph-text{ min-width:0; flex:1 1 auto; }
.cv-ph-title{ margin:0; font-size:27px; font-weight:800; color:#12263f; line-height:1.15; letter-spacing:.2px; }
.cv-ph-sub{ margin:4px 0 0; font-size:14px; color:#5b6675; line-height:1.4; }
.cv-ph-actions{ flex:0 0 auto; display:flex; gap:10px; flex-wrap:wrap; }
html[data-theme="dark"] .cv-page-head{ background:#131f34; border-bottom-color:#26344d; }
html[data-theme="dark"] .cv-ph-ic{ background:#0e6ea5; color:#fff !important; box-shadow:0 8px 22px rgba(14,110,165,.3); }
html[data-theme="dark"] .cv-ph-title{ color:#e6edf5; }
html[data-theme="dark"] .cv-ph-sub{ color:#93a2b8; }
@media (max-width:576px){
  .cv-page-head{ padding:16px 0; margin-bottom:18px; }
  .cv-ph-inner{ gap:12px; }
  .cv-ph-title{ font-size:21px; }
  .cv-ph-ic{ width:44px; height:44px; font-size:18px; border-radius:12px; }
  .cv-ph-actions{ width:100%; }
}

/* --- standard content card --- */
.cv-card{ background:#fff; border:1px solid #e3ebf0; border-radius:16px; padding:22px;
  box-shadow:0 10px 26px rgba(15,30,60,.06); margin-bottom:20px; }
.cv-card-head{ display:flex; align-items:center; gap:10px; margin:0 0 16px; padding-bottom:14px;
  border-bottom:1px solid #eef2f5; font-size:17px; font-weight:700; color:#12263f; }
.cv-card-head .fa{ color:#0056a3; }
.cv-card-head .cv-card-sub{ font-size:13px; font-weight:500; color:#7a8594; margin-left:auto; }
html[data-theme="dark"] .cv-card{ background:#141d2e; border-color:#26344d; box-shadow:0 14px 32px rgba(0,0,0,.42); }
html[data-theme="dark"] .cv-card-head{ color:#e6edf5; border-bottom-color:#26344d; }
html[data-theme="dark"] .cv-card-head .fa{ color:#3fd0ec; }
html[data-theme="dark"] .cv-card-head .cv-card-sub{ color:#8593a5; }
@media (max-width:576px){ .cv-card{ padding:16px; border-radius:14px; } }

/* --- toolbar (search + filters row on list pages) --- */
.cv-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.cv-toolbar .cv-search{ position:relative; flex:1 1 300px; max-width:420px; }
.cv-toolbar .cv-search .fa{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#9aa7b4; pointer-events:none; }
.cv-toolbar .cv-search input{ padding-left:36px; }
.cv-toolbar .form-control, .cv-toolbar select{ max-width:420px; }
html[data-theme="dark"] .cv-toolbar .cv-search .fa{ color:#64748b; }
/* code/message cell */
.cv-code{ font-family:monospace; font-weight:700; color:#0056a3; }
html[data-theme="dark"] .cv-code{ color:#3fd0ec; }

/* --- empty state --- */
.cv-empty{ text-align:center; padding:44px 20px; color:#7a8594; }
.cv-empty .fa{ font-size:42px; color:#c3ced8; margin-bottom:14px; display:block; }
.cv-empty h4{ margin:0 0 6px; font-size:18px; font-weight:700; color:#44515f; }
.cv-empty p{ margin:0; font-size:14px; }
html[data-theme="dark"] .cv-empty{ color:#8593a5; }
html[data-theme="dark"] .cv-empty .fa{ color:#33475f; }
html[data-theme="dark"] .cv-empty h4{ color:#c3ced8; }

/* --- code / pre blocks (API docs) --- */
html[data-theme="dark"] code{ background:#0f1a2b; color:#7fd7f0; border:1px solid #26344d; padding:1px 5px; border-radius:5px; }
html[data-theme="dark"] pre{ background:#0f1a2b !important; color:#c7d3df !important; border:1px solid #26344d; border-radius:10px; }
html[data-theme="dark"] pre code{ border:0; background:transparent; }

/* --- long-form content (FAQ / privacy / terms) --- */
.cv-prose{ line-height:1.7; font-size:15px; color:#33414f; }
.cv-prose h1, .cv-prose h2, .cv-prose h3, .cv-prose h4{ color:#12263f; margin:20px 0 10px; font-weight:700; }
.cv-prose h1{ font-size:22px; } .cv-prose h2{ font-size:19px; } .cv-prose h3{ font-size:17px; }
.cv-prose p{ margin:0 0 12px; }
.cv-prose ul, .cv-prose ol{ margin:0 0 14px; padding-left:22px; }
.cv-prose li{ margin-bottom:6px; }
.cv-prose a{ color:#0056a3; }
.cv-prose img{ max-width:100%; height:auto; }
html[data-theme="dark"] .cv-prose{ color:#c7d3df; }
html[data-theme="dark"] .cv-prose h1, html[data-theme="dark"] .cv-prose h2, html[data-theme="dark"] .cv-prose h3, html[data-theme="dark"] .cv-prose h4{ color:#e6edf5; }
html[data-theme="dark"] .cv-prose a{ color:#3fd0ec; }

/* --- info notice (Home page) --- */
.cv-notice{ display:flex; align-items:flex-start; gap:11px; margin-bottom:16px;
  padding:13px 16px; border-radius:12px; font-size:14px; line-height:1.5;
  background:#fff8e6; border:1px solid #ffd98a; color:#6b5a2a; }
.cv-notice .fa{ color:#e0a92e; font-size:17px; margin-top:1px; flex:0 0 auto; }
html[data-theme="dark"] .cv-notice{ background:#241d0f; border-color:#4d3d1a; color:#e0c98a; }
html[data-theme="dark"] .cv-notice .fa{ color:#e0b45a; }

/* --- section title (used above tables/blocks) --- */
/* NOTE: live style.css sets .section h5{position:absolute;top:-28px} which was
 * clipping this title — force it back into normal flow. */
.cv-sec-title{ position:static !important; top:auto !important;
  display:flex; align-items:center; gap:9px; font-size:17px; font-weight:700;
  color:#12263f; margin:4px 0 14px; }
.cv-sec-title .fa{ color:#0056a3; }
html[data-theme="dark"] .cv-sec-title{ color:#e6edf5; }
html[data-theme="dark"] .cv-sec-title .fa{ color:#3fd0ec; }

/* --- sidebar country header (search-for-app card) --- */
.cv-side-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:12px 16px; font-size:14px; color:#12263f; font-weight:600;
  background:#dfeaf0; border-bottom:1px solid #cddbe4; border-radius:0; }
.cv-side-head .fa{ color:#0056a3; }
.cv-side-head strong{ color:#0056a3; }
.cv-side-head .cv-side-hint{ width:100%; font-weight:500; font-size:12px; color:#5b6675; }
html[data-theme="dark"] .cv-side-head{ background:#0f1a2b; border-bottom-color:#26344d; color:#e6edf5; }
html[data-theme="dark"] .cv-side-head .fa, html[data-theme="dark"] .cv-side-head strong{ color:#3fd0ec; }
html[data-theme="dark"] .cv-side-head .cv-side-hint{ color:#93a2b8; }

/* --- action icon-buttons in the Active Numbers table --- */
#numbers-table tbody td:last-child a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; margin:2px 3px;
  background:#eef4f7; color:#0056a3 !important; border:1px solid #dbe7ef;
  text-decoration:none; vertical-align:middle; transition:all .12s ease;
}
#numbers-table tbody td:last-child a:hover{ background:#0056a3; color:#fff !important; border-color:#0056a3; transform:translateY(-1px); }
#numbers-table tbody td:last-child a .fa{ color:inherit !important; margin:0; }
#numbers-table tbody td:last-child a[onclick*="get_reject"]{ background:#fdecea; color:#c0392b !important; border-color:#f1c4c9; }
#numbers-table tbody td:last-child a[onclick*="get_reject"]:hover{ background:#c0392b; color:#fff !important; border-color:#c0392b; }
html[data-theme="dark"] #numbers-table tbody td:last-child a{ background:#16283f; color:#3fd0ec !important; border-color:#26344d; }
html[data-theme="dark"] #numbers-table tbody td:last-child a:hover{ background:#0e6ea5; color:#fff !important; border-color:#0e6ea5; }
html[data-theme="dark"] #numbers-table tbody td:last-child a[onclick*="get_reject"]{ background:#3b1418; color:#ff8a8a !important; border-color:#5a2a2a; }
html[data-theme="dark"] #numbers-table tbody td:last-child a[onclick*="get_reject"]:hover{ background:#c0392b; color:#fff !important; border-color:#c0392b; }

/* --- Active Numbers as CARDS (replaces the table) --- */
.cv-num-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:14px; }
.cv-num-card{ background:#fff; border:1px solid #e3ebf0; border-radius:14px; padding:16px;
  box-shadow:0 6px 18px rgba(15,30,60,.06); }
.cv-num-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.cv-num-number{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:#f2f6f9; border:1px solid #e1e9ef; border-radius:9px; padding:7px 11px; }
.cv-num-number input{ border:0; background:transparent; font-family:monospace; font-weight:700;
  font-size:15px; color:#12263f; width:132px; max-width:150px; padding:0; cursor:pointer; }
.cv-num-number .fa{ color:#7a8a99; font-size:13px; }
.cv-num-number:hover{ border-color:#0056a3; }
.cv-num-number:hover .fa{ color:#0056a3; }
.cv-num-status{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:999px; font-size:12px; font-weight:700; background:#eef4f7; color:#0056a3; }
.cv-num-status.ok{ background:#e7f7ee; color:#1a8a4f; font-family:monospace; letter-spacing:.5px; }
.cv-num-status.bad{ background:#fdecea; color:#c0392b; }
.cv-num-status.wait{ background:#fdf0dd; color:#b7791f; }
.cv-num-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:13px 0 0; font-size:13px; color:#5b6675; }
.cv-num-meta .fa{ color:#9aa7b4; margin-right:4px; }
.cv-num-timer{ margin-top:9px; font-size:13px; color:#b7791f; font-weight:700; }
.cv-num-timer:empty{ display:none; }
.cv-num-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid #eef2f5; }
.cv-num-actions a{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9px;
  font-size:13px; font-weight:600; text-decoration:none; background:#eef4f7; color:#0056a3; border:1px solid #dbe7ef; transition:all .12s ease; }
.cv-num-actions a:hover{ background:#0056a3; color:#fff; border-color:#0056a3; }
.cv-num-actions a .fa{ color:inherit; }
.cv-num-actions a.cv-rej{ margin-left:auto; background:#fdecea; color:#c0392b; border-color:#f1c4c9; }
.cv-num-actions a.cv-rej:hover{ background:#c0392b; color:#fff; border-color:#c0392b; }
html[data-theme="dark"] .cv-num-card{ background:#141d2e; border-color:#26344d; box-shadow:0 10px 26px rgba(0,0,0,.4); }
html[data-theme="dark"] .cv-num-number{ background:#0f1a2b; border-color:#26344d; }
html[data-theme="dark"] .cv-num-number input{ color:#e6edf5; }
html[data-theme="dark"] .cv-num-number:hover{ border-color:#3fd0ec; }
html[data-theme="dark"] .cv-num-number:hover .fa{ color:#3fd0ec; }
html[data-theme="dark"] .cv-num-meta{ color:#93a2b8; }
html[data-theme="dark"] .cv-num-status.ok{ background:#0d2a1e; color:#5fd39a; }
html[data-theme="dark"] .cv-num-status.bad{ background:#3b1418; color:#ff8a8a; }
html[data-theme="dark"] .cv-num-status.wait{ background:#2e2410; color:#e0b45a; }
html[data-theme="dark"] .cv-num-actions{ border-top-color:#26344d; }
html[data-theme="dark"] .cv-num-actions a{ background:#16283f; color:#3fd0ec; border-color:#26344d; }
html[data-theme="dark"] .cv-num-actions a:hover{ background:#0e6ea5; color:#fff; border-color:#0e6ea5; }
html[data-theme="dark"] .cv-num-actions a.cv-rej{ background:#3b1418; color:#ff8a8a; border-color:#5a2a2a; }
html[data-theme="dark"] .cv-num-actions a.cv-rej:hover{ background:#c0392b; color:#fff; border-color:#c0392b; }
@media (max-width:576px){ .cv-num-grid{ grid-template-columns:1fr; } }

/* --- bottom news ticker (moved out of the sidebar) --- */
.cv-news-ticker{ display:flex; align-items:center; gap:0; margin:22px 0 0;
  background:#eef4f7; border:1px solid #d7e3ea; border-radius:12px; overflow:hidden; }
.cv-news-label{ display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  padding:10px 16px; font-weight:700; font-size:14px; color:#fff; background:#0056a3; white-space:nowrap; }
.cv-news-label .fa{ color:#fff; }
.cv-news-ticker marquee{ flex:1 1 auto; padding:10px 14px; font-size:14px; color:#33414f;
  background:transparent !important; border:0 !important; margin:0 !important; height:auto !important; }
.cv-news-item{ margin-right:48px; }
.cv-news-item b{ color:#0056a3; }
.cv-news-item .cv-news-date{ color:#8a96a3; font-size:12px; margin-left:6px; }
html[data-theme="dark"] .cv-news-ticker{ background:#0f1a2b; border-color:#26344d; }
html[data-theme="dark"] .cv-news-label{ background:#0e6ea5; }
html[data-theme="dark"] .cv-news-ticker marquee{ color:#c7d3df; }
html[data-theme="dark"] .cv-news-item b{ color:#3fd0ec; }
@media (max-width:576px){ .cv-news-label span{ display:none; } .cv-news-label{ padding:10px 12px; } }

/* --- auth pages (login / register / reset) centered card --- */
.cv-auth-wrap{ max-width:460px; margin:34px auto; padding:0 4px; }
.cv-auth-card{ background:#fff; border:1px solid #e3ebf0; border-radius:18px; padding:34px 30px; box-shadow:0 18px 44px rgba(15,30,60,.10); }
.cv-auth-logo{ text-align:center; margin-bottom:4px; }
.cv-auth-logo img{ height:44px; width:auto; }
.cv-auth-title{ text-align:center; font-size:23px; font-weight:800; color:#12263f; margin:14px 0 4px; }
.cv-auth-sub{ text-align:center; font-size:14px; color:#5b6675; margin:0 0 22px; }
.cv-auth-field{ position:relative; margin-bottom:15px; }
.cv-auth-field > .fa{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#9aa7b4; }
.cv-auth-field input, .cv-auth-field select{ width:100%; height:46px; padding:0 14px 0 40px; border:1px solid #d8e1e8; border-radius:11px; font-size:15px; background:#fff; color:#12263f; }
.cv-auth-field input:focus, .cv-auth-field select:focus{ outline:none; border-color:#0056a3; box-shadow:0 0 0 .18rem rgba(0,86,163,.14); }
.cv-auth-forgot{ text-align:right; margin:-4px 0 15px; }
.cv-auth-forgot a{ font-size:13px; color:#0056a3; text-decoration:none; }
.cv-auth-btn{ width:100%; height:48px; border:0; border-radius:11px; background:#0056a3; color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:background .12s ease; }
.cv-auth-btn:hover{ background:#004886; }
.cv-auth-alt{ text-align:center; margin-top:18px; padding-top:18px; border-top:1px solid #eef2f5; font-size:14px; color:#5b6675; }
.cv-auth-alt a{ color:#0056a3; font-weight:700; text-decoration:none; }
.cv-auth-check{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#5b6675; margin-bottom:15px; }
html[data-theme="dark"] .cv-auth-card{ background:#141d2e; border-color:#26344d; box-shadow:0 22px 50px rgba(0,0,0,.5); }
html[data-theme="dark"] .cv-auth-title{ color:#e6edf5; }
html[data-theme="dark"] .cv-auth-sub, html[data-theme="dark"] .cv-auth-alt, html[data-theme="dark"] .cv-auth-check{ color:#93a2b8; }
html[data-theme="dark"] .cv-auth-field input, html[data-theme="dark"] .cv-auth-field select{ background:#0f1a2b; border-color:#26344d; color:#e6edf5; }
html[data-theme="dark"] .cv-auth-field input:focus, html[data-theme="dark"] .cv-auth-field select:focus{ border-color:#3fd0ec; box-shadow:0 0 0 .18rem rgba(63,208,236,.18); }
html[data-theme="dark"] .cv-auth-field > .fa{ color:#64748b; }
html[data-theme="dark"] .cv-auth-btn{ background:#0e6ea5; }
html[data-theme="dark"] .cv-auth-btn:hover{ background:#0b5c8a; }
html[data-theme="dark"] .cv-auth-alt{ border-top-color:#26344d; }
html[data-theme="dark"] .cv-auth-forgot a, html[data-theme="dark"] .cv-auth-alt a{ color:#3fd0ec; }

/* --- small helpers shared by modern pages --- */
.cv-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:700; background:#eef4f7; color:#0056a3; }
.cv-badge.ok{ background:#e7f7ee; color:#1a8a4f; }
.cv-badge.warn{ background:#fdf0dd; color:#b7791f; }
.cv-badge.bad{ background:#fdecea; color:#c0392b; }
html[data-theme="dark"] .cv-badge{ background:#132139; color:#3fd0ec; }
html[data-theme="dark"] .cv-badge.ok{ background:#0d2a1e; color:#5fd39a; }
html[data-theme="dark"] .cv-badge.warn{ background:#2e2410; color:#e0b45a; }
html[data-theme="dark"] .cv-badge.bad{ background:#3b1418; color:#ff8a8a; }