/* ── Manual prose ─────────────────────────── */
.manual-prose { color: #374151; line-height: 1.7; font-size: .95rem; }
.manual-prose h2 {
    font-size: 1.35rem; font-weight: 700; color: #1e1b4b;
    margin: 2rem 0 .6rem; padding-bottom: .35rem;
    border-bottom: 2px solid #ede9fe;
}
.manual-prose h3 {
    font-size: 1.05rem; font-weight: 600; color: #4c1d95;
    margin: 1.4rem 0 .4rem;
}
.manual-prose p  { margin: .55rem 0; }
.manual-prose ul { margin: .5rem 0 .5rem 1.4rem; list-style: disc; }
.manual-prose ol { margin: .5rem 0 .5rem 1.4rem; list-style: decimal; }
.manual-prose li { margin: .25rem 0; }
.manual-prose strong { font-weight: 700; color: #1f2937; }
.manual-prose em    { font-style: italic; color: #374151; }
.manual-prose code {
    background: #f3f4f6; border: 1px solid #e5e7eb;
    border-radius: 4px; padding: 1px 6px;
    font-family: 'Courier New', monospace; font-size: .88em; color: #7c3aed;
}
.manual-prose pre {
    background: #1e1b4b; color: #e9d5ff; border-radius: 10px;
    padding: 1rem 1.2rem; overflow-x: auto; margin: .8rem 0;
    font-size: .85rem; line-height: 1.6;
}
.manual-prose pre code { background: none; border: none; color: inherit; padding: 0; }
.manual-prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }
.manual-prose table {
    width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .9rem;
}
.manual-prose th {
    background: #ede9fe; color: #4c1d95; font-weight: 700;
    padding: .45rem .75rem; text-align: left;
    border: 1px solid #ddd6fe;
}
.manual-prose td { padding: .4rem .75rem; border: 1px solid #e5e7eb; }
.manual-prose tr:nth-child(even) td { background: #faf5ff; }
.man-note {
    background: var(--man-note-bg,#ede9fe); border-left: 4px solid var(--man-note-bdr,#a78bfa);
    border-radius: 0 8px 8px 0; padding: .7rem 1rem; margin: .8rem 0;
    font-size: .9rem; color: var(--man-note-clr,#3b0764);
}
.man-tip {
    background: var(--man-tip-bg,#dcfce7); border-left: 4px solid var(--man-tip-bdr,#4ade80);
    border-radius: 0 8px 8px 0; padding: .7rem 1rem; margin: .8rem 0;
    font-size: .9rem; color: var(--man-tip-clr,#14532d);
}
.man-warn {
    background: var(--man-warn-bg,#fef3c7); border-left: 4px solid var(--man-warn-bdr,#fbbf24);
    border-radius: 0 8px 8px 0; padding: .7rem 1rem; margin: .8rem 0;
    font-size: .9rem; color: var(--man-warn-clr,#78350f);
}
.man-quicklinks { display:flex; gap:10px; flex-wrap:wrap; margin:.9rem 0; }
.man-qlink {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 18px; border-radius:8px;
    background:#f0f9ff; border:1px solid #bae6fd;
    color:#0369a1; font-weight:600; font-size:.9rem;
    text-decoration:none; transition:background .15s;
}
.man-qlink:hover { background:#e0f2fe; }
.man-qlink-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%;
    background:#0369a1; color:#fff; font-size:.7rem; font-weight:800; flex-shrink:0;
}

.man-figure {
    margin:1rem 0; border-radius:12px; overflow:hidden;
    border:1px solid #e5e7eb; box-shadow:0 2px 14px rgba(0,0,0,.08);
}
.man-figure img {
    width:100%; display:block;
    max-height:420px; object-fit:contain; background:#f9fafb;
}
.man-figure figcaption {
    font-size:.78rem; color:#6b7280; text-align:center;
    padding:7px 12px; background:#f9fafb; border-top:1px solid #e5e7eb;
    font-style:italic;
}

.man-gallery {
    overflow-x:auto; margin:1rem 0; padding-bottom:6px;
    scrollbar-width:thin; scrollbar-color:#d1d5db transparent;
}
.man-gallery::-webkit-scrollbar { height:6px; }
.man-gallery::-webkit-scrollbar-track { background:transparent; }
.man-gallery::-webkit-scrollbar-thumb { background:#c4b5fd; border-radius:3px; }
.man-gallery-track { display:flex; gap:14px; scroll-snap-type:x mandatory; width:max-content; }
.man-gallery-item {
    flex:0 0 auto; width:300px; scroll-snap-align:start;
    border-radius:10px; overflow:hidden;
    border:1px solid #e5e7eb; box-shadow:0 2px 10px rgba(0,0,0,.07);
    background:#f9fafb; cursor:zoom-in; transition:box-shadow .15s;
}
.man-gallery-item:hover { box-shadow:0 4px 20px rgba(109,40,217,.15); }
.man-gallery-item img {
    width:100%; height:185px;
    object-fit:cover; object-position:top; display:block;
}
.man-gallery-item figcaption {
    font-size:.73rem; color:#6b7280; text-align:center;
    padding:6px 10px; font-style:italic;
}

/* ============================================================
   Manual Page — Sidebar Layout
   ============================================================ */
body.man-page {
    margin:0; padding:0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background:#f5f3ff; color:#374151;
    height:100vh; overflow:hidden;
}
.man-layout { display:flex; height:100vh; overflow:hidden; }

/* ── Sidebar ─────────────────────────────────── */
.man-sidebar {
    width:262px; flex-shrink:0;
    background: var(--man-sb-bg);
    display:flex; flex-direction:column;
    overflow:hidden;
    box-shadow:4px 0 24px var(--man-sb-shadow);
    position:relative; z-index:10;
    transition:transform .28s ease, background .2s;
}

.man-sidebar-header {
    display:flex; align-items:center; gap:11px;
    padding:18px 16px 16px;
    background:rgba(0,0,0,.15);
    border-bottom:1px solid var(--man-sb-header-bdr);
    flex-shrink:0;
}
.man-sidebar-logo {
    width:36px; height:36px; border-radius:9px;
    background:var(--man-sb-logo-bg);
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:.9rem; color:#fff;
    flex-shrink:0; letter-spacing:-.5px;
    box-shadow:0 2px 10px var(--man-sb-logo-shadow);
    transition:background .2s, box-shadow .2s;
}
.man-sidebar-title { font-weight:700; font-size:.9rem; color:#ede9fe; line-height:1.2; }
.man-sidebar-sub   { font-size:.67rem; color:var(--man-sb-sub-clr); margin-top:2px; text-transform:uppercase; letter-spacing:.08em; }

.man-sidebar-footer {
    flex-shrink:0;
    padding:12px 16px;
    border-top:1px solid var(--man-sb-footer-bdr);
    background:rgba(0,0,0,.12);
}
.man-sidebar-author {
    display:flex; flex-direction:column; gap:1px;
    text-decoration:none;
}
.man-sidebar-author:hover .man-sidebar-author-name { color:var(--man-sb-author-hover); }
.man-sidebar-author-label {
    font-size:.6rem; font-weight:600;
    color:var(--man-sb-author-label);
    text-transform:uppercase; letter-spacing:.1em;
}
.man-sidebar-author-name {
    font-size:.78rem; font-weight:600;
    color:var(--man-sb-author-name);
    transition:color .15s;
}

.man-nav {
    padding:8px 0 24px; flex:1;
    overflow-y:auto; overflow-x:hidden;
    scrollbar-width:thin; scrollbar-color:var(--man-sb-scroll) transparent;
}
.man-nav::-webkit-scrollbar { width:4px; }
.man-nav::-webkit-scrollbar-thumb { background:var(--man-sb-scroll); border-radius:2px; }
.man-nav-section-label {
    font-size:.62rem; font-weight:700;
    color:var(--man-sb-section-clr); text-transform:uppercase; letter-spacing:.12em;
    padding:16px 16px 5px;
}
.man-nav ul { list-style:none; margin:0; padding:0; }

.man-nav-link {
    display:flex; align-items:center; gap:9px;
    padding:6px 14px 6px 16px;
    color:var(--man-sb-link-clr); text-decoration:none; font-size:.83rem;
    border-left:2px solid transparent;
    transition:color .14s, background .14s, border-color .14s;
    line-height:1.4; cursor:pointer;
}
.man-nav-link:hover  { color:var(--man-sb-link-act-clr); background:var(--man-sb-link-hover-bg); border-left-color:var(--man-sb-link-hover-bdr); }
.man-nav-link.active { color:var(--man-sb-link-act-clr); background:var(--man-sb-link-act-bg);   border-left-color:var(--man-sb-link-act-bdr); font-weight:600; }

.man-nav-dot {
    display:inline-flex; width:6px; height:6px; border-radius:50%;
    background:var(--man-sb-dot-clr); flex-shrink:0;
    transition:background .14s, box-shadow .14s;
}
.man-nav-link:hover .man-nav-dot  { background:var(--man-sb-dot-hover); }
.man-nav-link.active .man-nav-dot { background:var(--man-sb-dot-hover); box-shadow:0 0 6px var(--man-sb-dot-glow); }

.man-nav-sub {
    list-style:none; margin:0 0 4px 22px; padding:0;
    border-left:1px solid var(--man-sb-sub-list-bdr);
}
.man-nav-sub-link {
    padding:4px 10px 4px 12px; font-size:.78rem;
    color:var(--man-sb-sub-link-clr); border-left:2px solid transparent; gap:0;
}
.man-nav-sub-link:hover  { color:var(--man-sb-sub-act-clr); background:var(--man-sb-sub-hover-bg); border-left-color:var(--man-sb-sub-hover-bdr); }
.man-nav-sub-link.active { color:var(--man-sb-sub-act-clr); background:var(--man-sb-sub-act-bg);   border-left-color:var(--man-sb-link-act-bdr); font-weight:600; }

/* ── Progress bar ────────────────────────────── */
.man-progress-bar {
    position:sticky; top:0; left:0; right:0; height:3px;
    background:var(--man-progress);
    width:0%; z-index:50; border-radius:0 2px 2px 0;
    transition:background .2s;
}

/* ── Content area ────────────────────────────── */
.man-content {
    flex:1; overflow-y:auto; background:#fafafa;
    scrollbar-width:thin; scrollbar-color:#c4b5fd transparent;
}
.man-content::-webkit-scrollbar { width:6px; }
.man-content::-webkit-scrollbar-thumb { background:#c4b5fd; border-radius:3px; }

.man-content-inner { max-width:840px; margin:0 auto; padding:36px 48px 72px; }

/* ── Hero title ──────────────────────────────── */
.man-hero-title {
    font-size:2.1rem; font-weight:800; color:#1e1b4b;
    margin:0 0 1rem; line-height:1.15; letter-spacing:-.02em;
}
.man-hero-title span { color:#7c3aed; }

/* ── Prose ───────────────────────────────────── */
.man-content-inner h2 {
    font-size:1.35rem; font-weight:700; color:#1e1b4b;
    margin:2.8rem 0 .8rem; padding:.45rem 0 .45rem 1rem;
    border-left:4px solid #7c3aed; border-bottom:1px solid #ede9fe;
    scroll-margin-top:20px;
}
.man-content-inner h3 {
    font-size:1.02rem; font-weight:600; color:#4c1d95;
    margin:1.6rem 0 .45rem; scroll-margin-top:20px;
}
.man-content-inner p  { margin:.55rem 0; color:#374151; line-height:1.72; font-size:.94rem; }
.man-content-inner ul,
.man-content-inner ol { margin:.5rem 0 .5rem 1.35rem; }
.man-content-inner li { margin:.28rem 0; color:#374151; line-height:1.65; font-size:.93rem; }
.man-content-inner strong { font-weight:700; color:#1f2937; }
.man-content-inner em     { font-style:italic; color:#374151; }
.man-content-inner code {
    background:#f3f4f6; border:1px solid #e5e7eb; border-radius:4px;
    padding:1px 6px; font-family:'Courier New',monospace; font-size:.87em; color:#7c3aed;
}
.man-content-inner hr { border:none; border-top:1px solid #e9e3ff; margin:2.2rem 0; }
.man-content-inner table { width:100%; border-collapse:collapse; margin:.8rem 0; font-size:.88rem; }
.man-content-inner th {
    background:#ede9fe; color:#4c1d95; font-weight:700;
    padding:.5rem .8rem; text-align:left; border:1px solid #ddd6fe;
}
.man-content-inner td { padding:.42rem .8rem; border:1px solid #e5e7eb; color:#374151; vertical-align:top; }
.man-content-inner tr:nth-child(even) td { background:#faf5ff; }

/* ── Mobile overlay & hamburger ──────────────── */
.man-overlay { display:none; position:fixed; inset:0; z-index:9; background:rgba(0,0,0,.45); }
.man-overlay.open { display:block; }
.man-hamburger {
    display:none; position:fixed; top:12px; right:12px; z-index:200;
    width:40px; height:40px; border-radius:10px;
    background:#1e1b4b; color:#e9d5ff; border:none;
    font-size:1.1rem; cursor:pointer;
    box-shadow:0 2px 12px rgba(30,27,75,.4);
    align-items:center; justify-content:center;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width:900px) { .man-content-inner { padding:28px 28px 60px; } }
@media (max-width:680px) {
    body.man-page { height:auto; overflow:auto; }
    .man-layout    { flex-direction:column; height:auto; overflow:visible; }
    .man-sidebar   { position:fixed; top:0; left:0; bottom:0; width:260px; transform:translateX(-100%); z-index:100; }
    .man-sidebar.open { transform:translateX(0); }
    .man-content   { overflow:visible; height:auto; }
    .man-content-inner { padding:56px 18px 48px; }
    .man-hamburger { display:flex; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.man-lightbox {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.85);
    align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
    cursor:zoom-out;
}
.man-lightbox.open { display:flex; }
.man-lightbox-img {
    max-width:92vw; max-height:90vh;
    border-radius:10px;
    box-shadow:0 8px 48px rgba(0,0,0,.6);
    object-fit:contain;
    cursor:default;
    animation:lbIn .18s ease;
}
.man-lightbox-caption {
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,.6); color:#fff;
    font-size:.82rem; padding:5px 16px; border-radius:20px;
    white-space:nowrap; max-width:80vw; overflow:hidden; text-overflow:ellipsis;
    pointer-events:none;
}
.man-lightbox-close {
    position:absolute; top:16px; right:20px;
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.15); border:none; color:#fff;
    font-size:1.2rem; cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.man-lightbox-close:hover { background:rgba(255,255,255,.3); }
@keyframes lbIn {
    from { opacity:0; transform:scale(.93); }
    to   { opacity:1; transform:scale(1); }
}

/* ============================================================
   THEME SYSTEM — same variables as main site
   ============================================================ */
:root {
    /* Sidebar */
    --man-sb-bg:            linear-gradient(175deg, #1e1b4b 0%, #2e1065 55%, #1e1b4b 100%);
    --man-sb-shadow:        rgba(30,27,75,.3);
    --man-sb-header-bdr:    rgba(167,139,250,.18);
    --man-sb-logo-bg:       linear-gradient(135deg,#7c3aed 0%,#a78bfa 100%);
    --man-sb-logo-shadow:   rgba(124,58,237,.55);
    --man-sb-sub-clr:       #a78bfa;
    --man-sb-footer-bdr:    rgba(167,139,250,.15);
    --man-sb-author-label:  rgba(167,139,250,.5);
    --man-sb-author-name:   #a78bfa;
    --man-sb-author-hover:  #c4b5fd;
    --man-sb-scroll:        rgba(167,139,250,.4);
    --man-sb-section-clr:   rgba(167,139,250,.6);
    --man-sb-link-clr:      #c4b5fd;
    --man-sb-link-hover-bg: rgba(124,58,237,.18);
    --man-sb-link-hover-bdr:rgba(167,139,250,.45);
    --man-sb-link-act-bg:   rgba(124,58,237,.28);
    --man-sb-link-act-bdr:  #a78bfa;
    --man-sb-link-act-clr:  #ede9fe;
    --man-sb-dot-clr:       #7c3aed;
    --man-sb-dot-hover:     #a78bfa;
    --man-sb-dot-glow:      rgba(167,139,250,.6);
    --man-sb-sub-list-bdr:  rgba(124,58,237,.3);
    --man-sb-sub-link-clr:  rgba(167,139,250,.75);
    --man-sb-sub-hover-bg:  rgba(124,58,237,.14);
    --man-sb-sub-hover-bdr: rgba(167,139,250,.4);
    --man-sb-sub-act-bg:    rgba(124,58,237,.2);
    --man-sb-sub-act-clr:   #ddd6fe;

    --man-accent:   #7c3aed;
    --man-accent2:  #a78bfa;
    --man-bg:       #fafafa;
    --man-card-bg:  #f9fafb;
    --man-text:     #374151;
    --man-heading:  #1e1b4b;
    --man-heading2: #4c1d95;
    --man-border:   #e5e7eb;
    --man-th-bg:    #ede9fe;
    --man-th-text:  #4c1d95;
    --man-th-bdr:   #ddd6fe;
    --man-td-even:  #faf5ff;
    --man-code-bg:  #f3f4f6;
    --man-code-bdr: #e5e7eb;
    --man-code-clr: #7c3aed;
    --man-note-bg:  #ede9fe; --man-note-bdr: #a78bfa; --man-note-clr: #3b0764;
    --man-tip-bg:   #dcfce7; --man-tip-bdr:  #4ade80; --man-tip-clr:  #14532d;
    --man-warn-bg:  #fef3c7; --man-warn-bdr: #fbbf24; --man-warn-clr: #78350f;
    --man-hr-clr:   #e9e3ff;
    --man-hero-span:#7c3aed;
    --man-progress: linear-gradient(to right,#7c3aed,#a78bfa);
    --man-scroll-thumb: #c4b5fd;
}
[data-theme="red"] {
    /* Sidebar */
    --man-sb-bg:            linear-gradient(175deg, #450a0a 0%, #7f1d1d 55%, #450a0a 100%);
    --man-sb-shadow:        rgba(127,29,29,.4);
    --man-sb-header-bdr:    rgba(251,113,133,.18);
    --man-sb-logo-bg:       linear-gradient(135deg,#e11d48 0%,#fb7185 100%);
    --man-sb-logo-shadow:   rgba(225,29,72,.55);
    --man-sb-sub-clr:       #fb7185;
    --man-sb-footer-bdr:    rgba(251,113,133,.15);
    --man-sb-author-label:  rgba(251,113,133,.5);
    --man-sb-author-name:   #fb7185;
    --man-sb-author-hover:  #fda4af;
    --man-sb-scroll:        rgba(251,113,133,.4);
    --man-sb-section-clr:   rgba(251,113,133,.6);
    --man-sb-link-clr:      #fda4af;
    --man-sb-link-hover-bg: rgba(225,29,72,.18);
    --man-sb-link-hover-bdr:rgba(251,113,133,.45);
    --man-sb-link-act-bg:   rgba(225,29,72,.3);
    --man-sb-link-act-bdr:  #fb7185;
    --man-sb-link-act-clr:  #ffe4e6;
    --man-sb-dot-clr:       #e11d48;
    --man-sb-dot-hover:     #fb7185;
    --man-sb-dot-glow:      rgba(251,113,133,.6);
    --man-sb-sub-list-bdr:  rgba(225,29,72,.3);
    --man-sb-sub-link-clr:  rgba(251,113,133,.75);
    --man-sb-sub-hover-bg:  rgba(225,29,72,.14);
    --man-sb-sub-hover-bdr: rgba(251,113,133,.4);
    --man-sb-sub-act-bg:    rgba(225,29,72,.22);
    --man-sb-sub-act-clr:   #fecdd3;

    --man-accent:   #e11d48;
    --man-accent2:  #fb7185;
    --man-th-bg:    #fee2e2; --man-th-text: #9f1239; --man-th-bdr: #fecdd3;
    --man-td-even:  #fff5f5;
    --man-code-clr: #e11d48;
    --man-note-bg:  #fee2e2; --man-note-bdr: #fb7185; --man-note-clr: #881337;
    --man-hr-clr:   #fee2e2;
    --man-hero-span:#e11d48;
    --man-progress: linear-gradient(to right,#e11d48,#fb7185);
    --man-scroll-thumb: #fda4af;
}
[data-mode="dark"] {
    --man-bg:       #0d1117;
    --man-card-bg:  #161b27;
    --man-text:     #cbd5e1;
    --man-heading:  #c4b5fd;
    --man-heading2: #a78bfa;
    --man-border:   #1e293b;
    --man-th-bg:    rgba(99,102,241,.18); --man-th-text:#c4b5fd; --man-th-bdr:rgba(99,102,241,.3);
    --man-td-even:  rgba(99,102,241,.07);
    --man-code-bg:  #1e1b4b; --man-code-bdr:#312e81; --man-code-clr:#a78bfa;
    --man-note-bg:  rgba(99,102,241,.18); --man-note-bdr:#6366f1; --man-note-clr:#c4b5fd;
    --man-tip-bg:   rgba(74,222,128,.1);  --man-tip-bdr: #4ade80; --man-tip-clr: #bbf7d0;
    --man-warn-bg:  rgba(251,191,36,.1);  --man-warn-bdr:#fbbf24; --man-warn-clr:#fde68a;
    --man-hr-clr:   #1e293b;
}
[data-mode="dark"][data-theme="red"] {
    --man-bg:       #0d0808;
    --man-card-bg:  #1a0d0d;
    --man-border:   #2d1515;
    --man-th-bg:    rgba(225,29,72,.18); --man-th-text:#fda4af; --man-th-bdr:rgba(225,29,72,.3);
    --man-td-even:  rgba(225,29,72,.06);
    --man-code-clr: #fb7185;
    --man-note-bg:  rgba(225,29,72,.18); --man-note-bdr:#e11d48; --man-note-clr:#fecdd3;
    --man-hr-clr:   #2d1515;
    --man-heading:  #fda4af; --man-heading2:#fb7185;
    --man-scroll-thumb: #fb7185;
}

/* Apply variables to content */
body.man-page { background:var(--man-bg); color:var(--man-text); transition:background .2s, color .2s; }
.man-content  { background:var(--man-bg); scrollbar-color:var(--man-scroll-thumb) transparent; }
.man-content::-webkit-scrollbar-thumb { background:var(--man-scroll-thumb); }
.man-content-inner h2  { color:var(--man-heading); border-left-color:var(--man-accent); border-bottom-color:var(--man-hr-clr); }
.man-content-inner h3  { color:var(--man-heading2); }
.man-hero-title        { color:var(--man-heading); }
.man-hero-title span   { color:var(--man-hero-span); }
.man-content-inner p,
.man-content-inner li  { color:var(--man-text); }
.man-content-inner strong { color:var(--man-heading); }
.man-content-inner hr  { border-top-color:var(--man-hr-clr); }
.man-content-inner code { background:var(--man-code-bg); border-color:var(--man-code-bdr); color:var(--man-code-clr); }
.man-content-inner th  { background:var(--man-th-bg); color:var(--man-th-text); border-color:var(--man-th-bdr); }
.man-content-inner td  { border-color:var(--man-border); color:var(--man-text); }
.man-content-inner tr:nth-child(even) td { background:var(--man-td-even); }

.man-gallery-item { border-color:var(--man-border); background:var(--man-card-bg); }
.man-gallery-item figcaption { color:var(--man-text); opacity:.7; }
.man-progress-bar { background:var(--man-progress); }
.man-content::-webkit-scrollbar-thumb { background:var(--man-scroll-thumb); }
.man-nav::-webkit-scrollbar-thumb     { background:var(--man-scroll-thumb); }

/* ── Theme switcher (same as main site) ─────── */
.man-theme-switcher {
    position:fixed; bottom:22px; right:22px; z-index:9998;
}
.man-theme-btn {
    width:42px; height:42px; border-radius:50%;
    background:var(--man-accent); color:#fff; border:none;
    font-size:.95rem; cursor:pointer;
    box-shadow:0 4px 18px rgba(0,0,0,.35);
    display:flex; align-items:center; justify-content:center;
    transition:transform .2s, background .2s;
}
.man-theme-btn:hover { transform:scale(1.1) rotate(15deg); }
.man-theme-panel {
    position:absolute; bottom:52px; right:0; width:190px;
    background:#fff; border:1px solid #e2e8f0;
    border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.18);
    padding:12px; opacity:0; transform:translateY(8px) scale(.97);
    pointer-events:none; transition:opacity .18s, transform .18s;
}
[data-mode="dark"] .man-theme-panel {
    background:#1e293b; border-color:#334155;
}
.man-theme-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.man-theme-section-label {
    font-size:.65rem; font-weight:700; color:#94a3b8;
    text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px;
}
.man-mode-row { display:flex; gap:6px; margin-bottom:12px; }
.man-mode-btn {
    flex:1; padding:5px 4px; border-radius:7px;
    border:1.5px solid #e2e8f0; background:#f8fafc; color:#64748b;
    font-size:.72rem; font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:4px;
    transition:all .15s;
}
[data-mode="dark"] .man-mode-btn { background:#0f172a; border-color:#334155; color:#94a3b8; }
.man-mode-btn.active { border-color:var(--man-accent); background:var(--man-accent); color:#fff; }
.man-mode-btn:hover:not(.active) { border-color:var(--man-accent); }
.man-swatch-row { display:flex; gap:10px; }
.man-swatch {
    width:28px; height:28px; border-radius:50%; border:3px solid transparent;
    cursor:pointer; transition:transform .15s, box-shadow .15s; outline:none;
}
.man-swatch:hover { transform:scale(1.15); }
.man-swatch.active { box-shadow:0 0 0 2px #fff, 0 0 0 4px #374151; }
[data-mode="dark"] .man-swatch.active { box-shadow:0 0 0 2px #1e293b, 0 0 0 4px #e2e8f0; }
.man-swatch-violet { background:linear-gradient(135deg,#6366f1,#818cf8); }
.man-swatch-red    { background:linear-gradient(135deg,#e11d48,#fb7185); }