/* Madocks dark fintech theme.
   Loaded LAST on every page (Blade layouts, legacy HTML via LegacyPage, v3_B pages),
   so it re-skins the older stylesheets without touching page logic or markup.
   Tokens first, then a global skin, then per-component overrides. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --primary: #070708;
    --black: #000000;
    --white: #ffffff;
    --orange: #ff7a18;
    --mk-bg: #070708;
    --mk-surface: #101012;
    --mk-surface-2: #17171a;
    --mk-line: #242428;
    --mk-line-2: #2e2e33;
    --mk-text: #e9e9ea;
    --mk-muted: #a7a7ad;
    --mk-brand: #ff7a18;
    --mk-brand-2: #ffb06a;
    --mk-good: #44d18d;
    --mk-bad: #ff4d4d;
    --mk-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mk-head: 'Sora', 'IBM Plex Sans', sans-serif;
    --mk-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* ---------- global skin ---------- */
html, body {
    background-color: var(--mk-bg) !important;
    color: var(--mk-text);
    font-family: var(--mk-font) !important;
    -webkit-font-smoothing: antialiased;
}
body { min-height: 100%; }
/* drifting aurora + fading grid behind every page */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background:
        radial-gradient(600px 380px at 82% 0%, rgba(255,122,24,.16), transparent 70%),
        radial-gradient(520px 340px at 6% 10%, rgba(255,150,60,.07), transparent 70%);
    animation: mk-drift 16s ease-in-out infinite alternate;
}
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 75%);
}
@keyframes mk-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-24px,18px,0) scale(1.06); } }
@keyframes mk-shine { to { background-position: -250% 0; } }
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

h1, h2, h3, h4, h5, h6 { font-family: var(--mk-head) !important; letter-spacing: -0.02em; color: var(--mk-text); }
a { transition: color .2s; }
::selection { background: rgba(255,122,24,.35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #2e2e33 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2e2e33; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--mk-brand); outline-offset: 2px; }

/* ---------- top navigation (Blade + legacy header) ---------- */
.header_section { padding-top: 18px; }
.home_section::after { opacity: .18; filter: saturate(.6); }
.header {
    padding: 10px 18px; margin-bottom: 8px;
    background: rgba(16,16,18,.62);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
}
.header_menu a { font-family: var(--mk-font); font-size: 15px; font-weight: 500; color: var(--mk-muted); margin: 0 14px; position: relative; }
.header_menu a:hover { color: #fff; }
.header_menu > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--mk-brand); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.header_menu > a:hover::after { transform: scaleX(1); }
.dropdown-content, .nested-content {
    background: rgba(16,16,18,.96) !important;
    border: 1px solid var(--mk-line-2); border-radius: 16px !important;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.8) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.dropdown-content a { color: var(--mk-muted) !important; border-radius: 10px; font-size: 14px !important; margin: 0 !important; }
.dropdown-content a:hover { background: rgba(255,122,24,.1) !important; color: #fff !important; }

/* ---------- buttons ---------- */
.get_started_btn a, .get_started_btn_white, .btn-primary,
.graph_button, .subscribe_btn, .info-btn, input[type=submit], button[type=submit] {
    font-family: var(--mk-font); font-weight: 600; border-radius: 12px;
    transition: transform .2s, box-shadow .2s, border-color .2s, filter .2s;
}
.get_started_btn a, .btn-primary, .subscribe_btn {
    background-color: var(--mk-brand); color: #140a02 !important; border: 1px solid var(--mk-brand);
    background-image: linear-gradient(110deg, #ff7a18 38%, #ffb06a 50%, #ff7a18 62%); background-size: 250% 100%;
    animation: mk-shine 5s linear infinite; box-shadow: 0 8px 28px -10px rgba(255,122,24,.7);
}
.get_started_btn a:hover, .btn-primary:hover, .subscribe_btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -8px rgba(255,122,24,.9); }
.graph_button:hover, .info-btn:hover { transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- surfaces ---------- */
.card, .section-box, .graph_section, .service_list_box, .ratings_section, .rating_form, .module-tag,
.feature-value, .card-top, .modal-content {
    background-image: linear-gradient(180deg, rgba(24,24,27,.92), rgba(16,16,18,.92)) !important;
    border-color: var(--mk-line) !important; border-radius: 18px;
}
.card, .section-box, .service_list_box { transition: transform .3s, border-color .3s, box-shadow .3s; }
.card:hover, .service_list_box:hover { border-color: #4a2c14 !important; }
.chip, .tag, .badge { font-family: var(--mk-font); border-radius: 999px; }

/* ---------- forms ----------
   No !important here on purpose: page-level rules for specific panels (terminals,
   toolbars) are more specific than these element selectors and keep winning, so only
   plain fields pick up the new look. Checkboxes, radios, ranges and colour pickers
   are left alone entirely. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]), select, textarea, .form-control {
    font-family: var(--mk-font);
    background-color: rgba(7,7,8,.8); color: var(--mk-text);
    border: 1px solid var(--mk-line-2); border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #6e6e76; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]):focus, select:focus, textarea:focus, .form-control:focus {
    outline: none; border-color: var(--mk-brand); box-shadow: 0 0 0 4px rgba(255,122,24,.16);
}
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--mk-brand); }
label { color: var(--mk-muted); }
option { background: #101012; color: var(--mk-text); }

/* ---------- tables ---------- */
table { border-collapse: collapse; }
th { color: var(--mk-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--mk-line) !important; }
td { border-bottom: 1px solid #1c1c20 !important; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(255,122,24,.05); }

/* ---------- footer ---------- */
.footer_section { border-top: 1px solid var(--mk-line); background: rgba(10,10,12,.8) !important; }
.footer_links h3 { font-size: 15px; color: var(--mk-text); }
.footer_links a { color: var(--mk-muted) !important; transition: color .2s; }
.footer_links a:hover { color: var(--mk-brand) !important; }
.footer_box p, .sub_footer, .sub_footer p { color: var(--mk-muted); }
.subscribe_div input { border-radius: 12px; }

/* ---------- Tailwind pages (auth, billing, dashboard shells) ---------- */
.bg-slate-950 { background-color: var(--mk-bg) !important; }
.bg-slate-900 { background-color: rgba(16,16,18,.9) !important; }
.bg-slate-800 { background-color: var(--mk-surface-2) !important; }
.border-slate-800, .border-slate-700 { border-color: var(--mk-line) !important; }
.text-slate-300, .text-slate-400 { color: var(--mk-muted) !important; }
.bg-indigo-600, .bg-blue-600, .bg-sky-600, .bg-emerald-600 { background-color: var(--mk-brand) !important; color: #140a02 !important; }
.bg-indigo-600:hover, .bg-blue-600:hover, .bg-sky-600:hover, .bg-emerald-600:hover { background-color: var(--mk-brand-2) !important; }
.text-indigo-400, .text-sky-400, .text-blue-400 { color: var(--mk-brand) !important; }
.rounded-2xl { border-radius: 20px; }

/* ---------- modals and toasts ---------- */
.modal-content { color: var(--mk-text); border: 1px solid var(--mk-line-2); }
.modal-backdrop.show { opacity: .7; }

@media (max-width: 768px) {
    .header { border-radius: 14px; padding: 8px 12px; }
    body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- mobile safety net (applies site-wide: Blade, legacy HTML, v3_B) ----------
   This is a global catch-all, not a per-page redesign: older ported pages were built
   at a fixed desktop width and never audited for phones. These rules fix the common,
   repeatable breakage (stray horizontal scroll, oversized media, data tables wider
   than the screen) without touching any page's own layout classes. Canvas/svg are left
   alone on purpose -- trading-chart libraries size those from JS/inline attributes, and
   a CSS max-width here would clip or distort the chart instead of helping it. */
/* overflow-x on html only, never body -- body overflow breaks position:sticky (the site header). */
html { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; } /* no height:auto -- TradingView's widget sizes its iframe inline via JS */
@media (max-width: 680px) {
    table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
    .container, .wrap { padding-left: 16px !important; padding-right: 16px !important; }
}