/* =========================================================
   Mia Bazo brand — shared by every Mia Tools page.
   Palette, top bar and logo lockup match Mia Invest, Mia Accounting,
   Mia Documents and Mia Analytics:
     #c46412  primary deep (burnt orange)
     #dd7904  primary (mid orange) ← anchor
     #f7931e  primary bright
     #333333  ink (charcoal)
     #f5bb3b  amber (supporting)
   ========================================================= */

:root {
    --mb-primary: #dd7904;
    --mb-primary-deep: #c46412;
    --mb-primary-bright: #f7931e;
    --mb-amber: #f5bb3b;
    --mb-ink: #333333;
    --mb-ink-soft: #4a4a4a;
    --mb-page: #faf8f5;
    --mb-surface: #ffffff;
    --mb-muted: #6b6b6b;
    --mb-line: #ececec;
    --mb-line-strong: #d8d8d8;
    --mb-link: #c46412;
    --mb-link-hover: #dd7904;
    --mb-nav: #333333;
    --mb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark: same approach as Mia Invest — only the tokens change, and the brand orange
   moves to its bright variant because the deep one dies on a dark ground. */
:root[data-theme="dark"] {
    --mb-ink: #e6e8ea;
    --mb-ink-soft: #c9cdd1;
    --mb-page: #15181c;
    --mb-surface: #1d2126;
    --mb-muted: #9aa2ab;
    --mb-line: #2b3036;
    --mb-line-strong: #3a4149;
    --mb-link: #f7a53a;
    --mb-link-hover: #ffbe63;
    --mb-nav: #24282d;
    color-scheme: dark;
}

/* ---- Top nav (charcoal background, white mark) ---- */
.mia-nav {
    background: var(--mb-nav);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mia-nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.mia-brand,
.mia-brand:hover {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
}
.mia-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
}
.mia-nav-links a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}
.mia-nav-links a:hover { color: #fff; }
.mia-nav-links a.active { color: var(--mb-primary-bright); }

@media (max-width: 768px) {
    .mia-nav-links { gap: 16px; }
    .mia-nav-links .hide-on-mobile { display: none; }
}

/* ---- Logo lockup: Mia Bazo mark + bold "mia" + light product name ---- */
.mia-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.mia-logo-mark { height: 32px; width: auto; display: block; }
.mia-logo-mark--orange { display: block; }
.mia-logo-mark--white { display: none; }
.mia-nav .mia-logo-mark--orange { display: none; }
.mia-nav .mia-logo-mark--white { display: block; }
.mia-logo-word {
    font-size: 20px;
    color: var(--mb-ink);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.mia-nav .mia-logo-word { color: #fff; }
.mia-logo-bold { font-weight: 700; }
.mia-logo-light { font-weight: 400; opacity: 0.75; }

/* ---- Icon button on the charcoal bar (theme toggle etc.) ---- */
.mia-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.mia-icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}
.mia-icon-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:root[data-theme="dark"] .ico-moon,
:root:not([data-theme="dark"]) .ico-sun { display: none; }