/* ==========================================================================
   Monkey Assets — design system  ("Slate & Indigo")
   One source of truth for the whole product. Light content canvas, a dark
   sidebar shell, indigo accent, crisp neutrals. No external fonts or CDNs.
   Class vocabulary is stable (.ma-*) so pages don't need to change to restyle.
   ========================================================================== */

:root{
    /* surfaces + ink */
    --bg:#f5f6f8;
    --surface:#ffffff;
    --surface-2:#f8fafc;
    --glass:#ffffff;                 /* legacy name kept: cards read white now  */
    --ink:#0f172a;                   /* headings                                */
    --ink-body:#334155;              /* body text                               */
    --ink-muted:#64748b;             /* secondary                               */
    --ink-faint:#94a3b8;             /* tertiary / placeholders                 */
    --line:#e6e8ec;
    --line-strong:#d7dbe2;

    /* brand / accent (indigo) */
    --brand:#4f46e5;
    --brand-ink:#4338ca;
    --brand-soft:#eef2ff;
    --brand-border:#c7d2fe;
    --accent:#4f46e5;                /* legacy name kept                        */
    --ring:rgba(79,70,229,.32);

    /* semantic */
    --ok:#047857;  --ok-bg:#ecfdf5;  --ok-border:#a7f3d0;
    --warn:#b45309; --warn-bg:#fffbeb; --warn-border:#fde68a;
    --info:#1d4ed8; --info-bg:#eff6ff; --info-border:#bfdbfe;
    --neutral:#475569; --neutral-bg:#f1f5f9; --neutral-border:#e2e8f0;
    --danger:#dc2626; --danger-bg:#fef2f2; --danger-border:#fecaca;

    /* sidebar */
    --side-ink:#cbd5e1;
    --side-ink-dim:#8ea1bd;
    --side-line:rgba(148,163,184,.16);
    --side-active-bg:rgba(99,102,241,.20);
    --side-active-ink:#ffffff;

    /* shape + depth */
    --r-card:16px; --r:10px; --r-sm:8px; --r-pill:999px;
    --shadow-sm:0 1px 2px rgba(16,24,40,.05);
    --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06);
    --shadow-lg:0 18px 48px rgba(16,24,40,.18);

    --side-w:250px;
    --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    font-family:var(--font);
    color:var(--ink-body);
    background:var(--bg);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    font-size:14px; line-height:1.5;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-ink); text-decoration:underline; }
svg.ic{ width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none;
    stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.16em; }

/* ---------------------------------------------------------------- app shell */
.ma-nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.ma-shell{ display:flex; min-height:100vh; }

.ma-sidebar{
    width:var(--side-w); flex:none; position:sticky; top:0; height:100vh; overflow-y:auto;
    background:linear-gradient(180deg,#0f172a 0%, #111a30 55%, #0d1526 100%);
    border-right:1px solid rgba(15,23,42,.6);
    display:flex; flex-direction:column; gap:6px; padding:16px 14px; z-index:200;
}
.ma-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 14px; text-decoration:none; }
.ma-brand:hover{ text-decoration:none; }
.ma-brand .mark{
    width:36px; height:36px; border-radius:11px; flex:none;
    background:linear-gradient(135deg,#6366f1,#4f46e5 55%,#7c3aed);
    display:flex; align-items:center; justify-content:center; font-size:19px;
    box-shadow:0 6px 16px rgba(79,70,229,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.ma-brand .name{ color:#fff; font-weight:700; font-size:15.5px; letter-spacing:-.01em; line-height:1.1; }
.ma-brand .name small{ display:block; color:var(--side-ink-dim); font-weight:500; font-size:11px; letter-spacing:.02em; }

.ma-navmain{ display:flex; flex-direction:column; gap:3px; }
.ma-nav-sec{ color:var(--side-ink-dim); font-size:10.5px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; padding:14px 10px 4px; }
.ma-navitem{
    display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px;
    color:var(--side-ink); font-size:13.5px; font-weight:500; text-decoration:none; line-height:1;
}
.ma-navitem:hover{ background:rgba(148,163,184,.12); color:#fff; text-decoration:none; }
.ma-navitem.on{ background:var(--side-active-bg); color:var(--side-active-ink); font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(129,140,248,.35); }
.ma-navitem .ic{ width:18px; height:18px; color:inherit; opacity:.9; }

.ma-side-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--side-line); }
.ma-userchip{ display:flex; align-items:center; gap:10px; padding:8px 8px; }
.ma-avatar{ width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center;
    justify-content:center; font-size:12.5px; font-weight:700; color:#fff;
    background:linear-gradient(135deg,#64748b,#475569); letter-spacing:.02em; }
.ma-userchip .meta{ min-width:0; }
.ma-userchip .meta b{ display:block; color:#f1f5f9; font-size:13px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ma-userchip .meta span{ display:block; color:var(--side-ink-dim); font-size:11.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ma-logout{ margin-top:4px; }
.ma-logout button{
    width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    background:rgba(148,163,184,.10); color:var(--side-ink); border:1px solid var(--side-line);
    padding:9px; border-radius:10px; font-size:13px; font-weight:500; cursor:pointer;
    font-family:inherit;
}
.ma-logout button:hover{ background:rgba(148,163,184,.18); color:#fff; }

.ma-nav-backdrop{ display:none; }

/* ------------------------------------------------------------- main + topbar */
.ma-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ma-topbar{ display:none; }        /* mobile only, see @media */
.ma-content{ flex:1; padding:34px 34px 90px; }
.ma-wrap{ max-width:1160px; margin:0 auto; }
.ma-wrap h1{ color:var(--ink); font-size:23px; font-weight:700; letter-spacing:-.02em; margin:0 0 5px; }
.ma-lead{ margin:0 0 22px; font-size:14px; color:var(--ink-muted); max-width:75ch; }
.ma-lead a{ font-weight:600; }

/* public (logged-out) header + centered column */
.ma-public-top{ display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px; background:var(--surface); border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:50; }
.ma-public-top .ma-brand{ padding:0; }
.ma-public-top .ma-brand .name{ color:var(--ink); }
.ma-public-top .ma-brand .name small{ color:var(--ink-muted); }
.ma-public-links{ display:flex; gap:8px; align-items:center; }

/* --------------------------------------------------------------- flash notes */
.ma-ok,.ma-error{ padding:12px 14px; border-radius:var(--r); margin-bottom:18px; font-size:13.5px;
    display:flex; gap:9px; align-items:flex-start; word-break:break-word; border:1px solid; }
.ma-ok{ background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok); }
.ma-error{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger); }

/* --------------------------------------------------------------- buttons */
.ma-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    background:var(--brand); color:#fff !important; border:1px solid var(--brand);
    padding:9px 16px; font-size:13.5px; font-weight:600; border-radius:var(--r);
    cursor:pointer; text-decoration:none; font-family:inherit; line-height:1.1;
    transition:background .12s, box-shadow .12s, border-color .12s;
}
.ma-btn:hover{ background:var(--brand-ink); border-color:var(--brand-ink); color:#fff !important; text-decoration:none; }
.ma-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }
.ma-btn-sm{ padding:6px 12px; font-size:12.5px; }
.ma-btn-ghost{ background:var(--surface); color:var(--ink-body) !important; border:1px solid var(--line-strong); }
.ma-btn-ghost:hover{ background:var(--surface-2); color:var(--ink) !important; border-color:var(--ink-faint); }
.ma-btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff !important; }
.ma-btn-danger:hover{ background:#b91c1c; border-color:#b91c1c; }
.ma-btn[disabled]{ opacity:.55; cursor:default; }

/* --------------------------------------------------------------- inputs */
.ma-input,.ma-select,.ma-textarea{
    padding:9px 11px; font-size:13.5px; border-radius:var(--r); background:var(--surface);
    color:var(--ink); border:1px solid var(--line-strong); font-family:inherit; line-height:1.3;
    transition:border-color .12s, box-shadow .12s;
}
.ma-input:focus,.ma-select:focus,.ma-textarea:focus{ outline:none; border-color:var(--brand);
    box-shadow:0 0 0 3px var(--ring); }
.ma-input::placeholder,.ma-textarea::placeholder{ color:var(--ink-faint); }
.ma-select{ appearance:none; -webkit-appearance:none; padding-right:32px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; }
.ma-textarea{ width:100%; min-height:74px; resize:vertical; }
input[type=file].ma-input{ padding:7px 10px; }
input[type=checkbox],input[type=radio]{ accent-color:var(--brand); width:15px; height:15px; }

/* --------------------------------------------------------------- cards */
.ma-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
    padding:20px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.ma-card h2{ font-size:14.5px; font-weight:650; color:var(--ink); margin:0 0 14px; letter-spacing:-.01em;
    display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* --------------------------------------------------------------- tables */
.ma-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
.ma-table{ width:100%; border-collapse:separate; border-spacing:0; color:var(--ink-body);
    background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:13px; }
.ma-table th{ background:var(--surface-2); color:var(--ink-muted); padding:10px 13px; text-align:left;
    font-size:11.5px; font-weight:650; letter-spacing:.03em; text-transform:uppercase;
    border-bottom:1px solid var(--line); white-space:nowrap; }
.ma-table td{ padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ma-table tbody tr:last-child td, .ma-table tr:last-child td{ border-bottom:none; }
.ma-table tbody tr:hover td{ background:var(--surface-2); }
.ma-tag{ font-weight:700; color:var(--brand); white-space:nowrap; letter-spacing:.01em; }
a.ma-tag:hover{ color:var(--brand-ink); }
.ma-muted{ color:var(--ink-muted); font-size:12.5px; }
/* action cell: keep row controls aligned + evenly sized */
.ma-cell-actions{ display:flex; gap:6px; align-items:center; }
.ma-iconbtn{ padding:6px 9px; }   /* square-ish icon-only button */

/* --------------------------------------------------------------- pills */
.ma-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-pill);
    font-size:11.5px; font-weight:600; border:1px solid; line-height:1.4; }
.ma-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.ma-pill-g{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-border); }
.ma-pill-a{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-border); }
.ma-pill-b{ background:var(--info-bg); color:var(--info); border-color:var(--info-border); }
.ma-pill-t{ background:var(--neutral-bg); color:var(--neutral); border-color:var(--neutral-border); }

/* --------------------------------------------------------------- layout bits */
.ma-grid2{ display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:start; }
.ma-grid2 > *{ min-width:0; }
.ma-form-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.ma-form-grid label,.ma-label{ display:block; font-size:12px; color:var(--ink-muted); font-weight:600; margin-bottom:5px; }
.ma-form-grid .ma-input,.ma-form-grid .ma-select{ width:100%; }
.ma-form-full{ grid-column:1 / -1; }

/* --------------------------------------------------------------- tabs */
.ma-tabs{ display:flex; gap:2px; flex-wrap:wrap; margin:0 0 22px; border-bottom:1px solid var(--line); }
.ma-tab{ padding:9px 15px; font-size:13.5px; font-weight:550; text-decoration:none; color:var(--ink-muted);
    border-bottom:2px solid transparent; margin-bottom:-1px; }
.ma-tab:hover{ color:var(--ink); text-decoration:none; }
.ma-tab.on{ color:var(--brand); border-bottom-color:var(--brand); font-weight:650; }

/* --------------------------------------------------------------- tip banner */
.ma-tip{ background:var(--brand-soft); border:1px solid var(--brand-border); color:#3730a3;
    padding:11px 14px; border-radius:var(--r); font-size:13px; margin:0 0 16px; display:flex; gap:9px; align-items:flex-start; }
.ma-tip a{ font-weight:650; color:var(--brand-ink); }

/* --------------------------------------------------------------- accordion */
.ma-acc{ border:1px solid var(--line); border-radius:12px; margin:0 0 16px; background:var(--surface);
    box-shadow:var(--shadow-sm); overflow:hidden; }
.ma-acc > summary{ cursor:pointer; padding:13px 16px; font-weight:600; color:var(--ink); font-size:13.5px;
    list-style:none; display:flex; align-items:center; gap:8px; }
.ma-acc > summary::-webkit-details-marker{ display:none; }
.ma-acc > summary::before{ content:"+"; color:var(--brand); font-weight:700; font-size:16px; width:16px; text-align:center; }
.ma-acc[open] > summary::before{ content:"\2212"; }
.ma-acc[open] > summary{ border-bottom:1px solid var(--line); }
.ma-acc-body{ padding:16px; overflow-x:auto; }

/* --------------------------------------------------------------- QR bits */
.ma-qr-box{ text-align:center; }
.ma-qr-box img{ width:200px; height:200px; image-rendering:pixelated; background:#fff; border-radius:12px;
    padding:10px; border:1px solid var(--line); }
.ma-mini-qr{ width:40px; height:40px; image-rendering:pixelated; display:block; background:#fff;
    border-radius:7px; padding:3px; border:1px solid var(--line); }

/* --------------------------------------------------------------- detail head + action bar */
.ma-detail-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:6px; }
.ma-detail-head h1{ font-size:22px; }
.ma-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
.ma-bar form{ display:flex; gap:8px; align-items:center; margin:0; }

/* --------------------------------------------------------------- modal */
.ma-modal{ display:none; position:fixed; inset:0; z-index:400; }
.ma-modal.show{ display:block; }
.ma-modal .backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
.ma-modal .dialog{ position:relative; max-width:520px; margin:8vh auto 0; background:var(--surface);
    color:var(--ink-body); border:1px solid var(--line); border-radius:var(--r-card); padding:22px;
    box-shadow:var(--shadow-lg); z-index:401; }
.ma-modal .dialog h5{ margin:0 0 14px; color:var(--ink); font-size:16px; font-weight:650;
    display:flex; align-items:center; gap:8px; }
.ma-modal .close{ position:absolute; top:14px; right:16px; background:none; border:none;
    color:var(--ink-faint); font-size:22px; cursor:pointer; line-height:1; }
.ma-modal .close:hover{ color:var(--ink); }

/* --------------------------------------------------------------- QR scanner (assets.php) */
#ma-scan-video{ display:block; width:100%; height:52vh; max-height:480px; object-fit:cover;
    border-radius:12px; background:#0f172a; }
.ma-scan-msg{ margin-top:10px; font-size:13px; color:var(--ink-muted); }
.ma-scan-msg.err{ color:var(--danger); }
.ma-scan-msg.ok{ color:var(--ok); }
.ma-spec-k{ width:210px; font-weight:600; color:var(--ink-body); }

/* --------------------------------------------------------------- AI import (add_phone.php) */
.ap-wrap-inner{ max-width:660px; margin:0 auto; }
#ap-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
#ap-thumbs img{ width:76px; height:76px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
#ap-status{ font-size:13px; margin-top:12px; min-height:18px; color:var(--ink-muted); }
#ap-status.err{ color:var(--danger); }
#ap-status.ok{ color:var(--ok); }
.ap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ap-full{ grid-column:1 / -1; }
.ap-grid label,.ap-full label{ display:block; font-size:12px; color:var(--ink-muted); font-weight:600; margin-bottom:5px; }
.ap-grid .ma-input,.ap-grid .ma-select,.ap-full .ma-input,.ap-full .ma-textarea{ width:100%; }
.ap-done{ text-align:center; }
.ap-done .ap-tag{ font-size:32px; font-weight:800; color:var(--brand); margin:10px 0; letter-spacing:-.01em; }
.ap-done img{ width:200px; height:200px; image-rendering:pixelated; background:#fff; border-radius:12px;
    padding:10px; border:1px solid var(--line); }
.ap-done .ap-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.ap-spin{ display:inline-block; width:14px; height:14px; border:2px solid var(--brand-border);
    border-top-color:var(--brand); border-radius:50%; animation:apspin .8s linear infinite;
    vertical-align:-2px; margin-right:6px; }
@keyframes apspin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------- usage bars (billing.php) */
.ma-usage{ margin-bottom:16px; }
.ma-usage-head{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px; }
.ma-usage-track{ height:8px; border-radius:5px; background:var(--neutral-bg); overflow:hidden; }
.ma-usage-fill{ height:100%; border-radius:5px; background:var(--brand); transition:width .3s; }
.ma-usage-fill.warn{ background:#f59e0b; }
.ma-usage-fill.full{ background:var(--danger); }

/* --------------------------------------------------------------- pricing cards */
.ma-plan-featured{ border-color:var(--brand-border) !important; box-shadow:0 0 0 1px var(--brand-border), var(--shadow) !important; }
.ma-price{ font-size:30px; font-weight:750; color:var(--ink); letter-spacing:-.02em; margin:6px 0 2px; }
.ma-price small{ font-size:13px; font-weight:500; color:var(--ink-muted); letter-spacing:0; }

/* =============================================================== responsive */
@media (max-width:860px){ .ma-grid2{ grid-template-columns:1fr; } }

@media (max-width:820px){
    .ma-sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%);
        transition:transform .22s ease; box-shadow:var(--shadow-lg); }
    .ma-nav-toggle:checked ~ .ma-shell .ma-sidebar{ transform:translateX(0); }
    .ma-nav-toggle:checked ~ .ma-shell .ma-nav-backdrop{ display:block; position:fixed; inset:0;
        background:rgba(15,23,42,.5); z-index:150; }
    .ma-topbar{ display:flex; align-items:center; gap:12px; padding:11px 16px; background:var(--surface);
        border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; }
    .ma-topbar .burger{ display:flex; align-items:center; justify-content:center; width:38px; height:38px;
        border-radius:9px; border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; color:var(--ink-body); }
    .ma-topbar .burger .ic{ width:20px; height:20px; }
    .ma-topbar .ma-brand{ padding:0; }
    .ma-topbar .ma-brand .name{ color:var(--ink); font-size:15px; }
    .ma-topbar .ma-brand .name small{ display:none; }
    .ma-content{ padding:20px 16px 80px; }
}

@media (max-width:767px){
    .ma-wrap h1,.ma-detail-head h1{ font-size:20px; }
    .ma-input,.ma-select,.ma-textarea{ font-size:16px; }   /* stop iOS zoom on focus */
    .ma-card{ padding:16px; }
    .ma-table th,.ma-table td{ padding:9px 10px; }
    .ap-grid{ grid-template-columns:1fr; }
    .ma-modal .dialog{ margin:4vh 10px 0; max-width:none; }
    .ma-bar > .flex1{ display:none; }
    .ma-bar form{ flex:1 1 100%; flex-wrap:wrap; }
    .ma-bar form .ma-input{ flex:1 1 100%; }
    .ma-bar form .ma-select,.ma-bar form .ma-btn{ flex:1 1 auto; }
    .ma-bar > .ma-btn{ flex:1 1 calc(50% - 5px); }
    /* asset list: keep QR / Tag / Name / Status on small screens */
    .ma-list-table th:nth-child(4),.ma-list-table td:not([colspan]):nth-child(4),
    .ma-list-table th:nth-child(5),.ma-list-table td:not([colspan]):nth-child(5),
    .ma-list-table th:nth-child(6),.ma-list-table td:not([colspan]):nth-child(6),
    .ma-list-table th:nth-child(7),.ma-list-table td:not([colspan]):nth-child(7),
    .ma-list-table th:nth-child(8),.ma-list-table td:not([colspan]):nth-child(8),
    .ma-list-table th:nth-child(10),.ma-list-table td:not([colspan]):nth-child(10){ display:none; }
    .ma-spec-k{ width:120px; }
    .ma-spec-table{ table-layout:fixed; width:100%; }
    .ma-spec-table td{ word-break:break-word; overflow-wrap:anywhere; }
}

/* =============================================================== auth screens */
.ma-auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }
.ma-auth-brand{
    position:relative; overflow:hidden; color:#fff; padding:48px 52px;
    display:flex; flex-direction:column; justify-content:space-between;
    background:linear-gradient(150deg,#4f46e5 0%, #6d28d9 55%, #1e1b4b 100%);
}
.ma-auth-brand::before{ content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle 22rem at 88% 12%, rgba(255,255,255,.16), transparent 60%),
      radial-gradient(circle 26rem at 6% 96%, rgba(129,140,248,.35), transparent 60%);
    pointer-events:none; }
.ma-auth-brand > *{ position:relative; }
.ma-auth-brand .ma-brand .mark{ width:44px; height:44px; font-size:24px; }
.ma-auth-brand .ma-brand .name{ font-size:19px; }
.ma-auth-brand .ma-brand .name small{ color:rgba(255,255,255,.7); }
.ma-auth-pitch h2{ font-size:30px; font-weight:750; letter-spacing:-.02em; line-height:1.15; margin:0 0 16px; max-width:15ch; }
.ma-auth-pitch p{ font-size:15px; color:rgba(255,255,255,.82); margin:0 0 26px; max-width:42ch; }
.ma-auth-more{ display:inline-flex; align-items:center; gap:7px; margin:-14px 0 26px; font-size:13.5px;
    font-weight:650; color:#fff; text-decoration:none; opacity:.9;
    border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:1px; }
.ma-auth-more:hover{ opacity:1; color:#fff; text-decoration:none; border-bottom-color:#fff; }
/* ---- Toggle switches (settings cards) ---------------------------------------
   A row = switch + title + muted description, uniform geometry. The switch is a
   real submit button (each toggle is its own POST form), styled as a pill+knob. */
.ma-toggles{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.ma-toggle-row{ display:flex; gap:12px; align-items:flex-start; }
.ma-toggle-row form{ margin:1px 0 0; flex:none; }
.ma-toggle-row .meta{ display:flex; flex-direction:column; gap:2px; font-size:13px; }
.ma-toggle-row .meta b{ color:var(--ink); font-size:13.5px; font-weight:650; }
.ma-toggle-row .meta span{ color:var(--ink-muted); line-height:1.55; }
.ma-switch{
    position:relative; width:40px; height:22px; border-radius:999px; padding:0; cursor:pointer;
    background:var(--line-strong); border:1px solid var(--line-strong);
    transition:background .15s ease, border-color .15s ease;
}
.ma-switch::after{
    content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.25);
    transition:left .15s ease;
}
.ma-switch:hover{ background:var(--ink-faint); border-color:var(--ink-faint); }
.ma-switch.on{ background:var(--brand); border-color:var(--brand); }
.ma-switch.on:hover{ background:var(--brand-ink); border-color:var(--brand-ink); }
.ma-switch.on::after{ left:20px; }
.ma-switch:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }

/* ---- About page icon badges ------------------------------------------------ */
.ma-about-ic{ width:36px; height:36px; border-radius:10px; flex:none; display:inline-flex;
    align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); }
.ma-about-ic svg.ic{ width:18px; height:18px; }
.ma-about-ic-light{ background:rgba(255,255,255,.16); color:#fff; }
.ma-auth-feats{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; }
.ma-auth-feats li{ display:flex; align-items:flex-start; gap:11px; font-size:14px; color:rgba(255,255,255,.92); }
.ma-auth-feats .tick{ width:22px; height:22px; border-radius:7px; flex:none; display:flex; align-items:center;
    justify-content:center; background:rgba(255,255,255,.16); }
.ma-auth-feats .tick .ic{ width:14px; height:14px; }
.ma-auth-foot{ font-size:12.5px; color:rgba(255,255,255,.6); }

.ma-auth-form{ display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--bg); }
.ma-auth-card{ width:100%; max-width:400px; }
.ma-auth-card h1{ font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-.02em; margin:0 0 4px; }
.ma-auth-card .sub{ font-size:14px; color:var(--ink-muted); margin:0 0 24px; }
.ma-auth-card label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-body); margin:16px 0 6px; }
.ma-auth-card input{ width:100%; padding:11px 12px; font-size:15px; border-radius:var(--r);
    background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); font-family:inherit; }
.ma-auth-card input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }
.ma-auth-card .hint{ font-size:12px; color:var(--ink-faint); margin-top:6px; }
.ma-auth-card .ma-btn{ width:100%; margin-top:22px; padding:12px; font-size:15px; }
.ma-auth-card .err{ background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger);
    padding:11px 13px; border-radius:var(--r); font-size:13px; margin-bottom:6px; }
.ma-auth-card .foot{ margin-top:20px; font-size:13.5px; color:var(--ink-muted); text-align:center; }
@media (max-width:840px){
    .ma-auth{ grid-template-columns:1fr; }
    .ma-auth-brand{ display:none; }
}

/* ---- SSO (Sign in with Microsoft) ------------------------------------------ */
.ma-or{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-faint);
    font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.ma-or::before, .ma-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.ma-sso-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    padding:11px 14px; border:1px solid var(--line-strong); border-radius:var(--r);
    background:var(--surface); color:var(--ink); font-size:14.5px; font-weight:600;
    text-decoration:none; transition:background .12s, border-color .12s, box-shadow .12s; }
.ma-sso-btn:hover{ background:var(--surface-2); border-color:var(--ink-faint); box-shadow:var(--shadow-sm); }
.ma-sso-btn svg{ flex:none; }