@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#090d18;--panel:#111827;--panel2:#151e30;--line:#263247;--text:#f2f5fc;--muted:#91a0b8;--accent:#a78bfa;--cyan:#67e8f9;--radius:20px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% -10%,#1c2141 0,transparent 42%),var(--bg);color:var(--text);font:15px/1.65 'DM Sans',system-ui,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}a:hover{color:var(--cyan)}h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.2;margin:0 0 14px;letter-spacing:-.03em}h1{font-size:clamp(2rem,5vw,3.6rem)}h2{font-size:1.65rem}h3{font-size:1.08rem}p{margin:0 0 12px}.container{width:min(1160px,calc(100% - 36px));margin:0 auto 70px}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;width:min(1240px,calc(100% - 36px));margin:auto;border-bottom:1px solid #ffffff0c}.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.1rem}.brand small{display:block;font:600 .62rem 'DM Sans';letter-spacing:.16em;color:var(--muted)}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#a78bfa,#67e8f9);color:#0b1020;font:700 1.4rem 'Space Grotesk';box-shadow:0 8px 30px #a78bfa33}nav{display:flex;align-items:center;gap:22px;font-size:.9rem;color:#c3cde0}.nav-join{padding:9px 17px;background:#a78bfa;color:#101020;border-radius:10px;font-weight:700}.nav-button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}.logout-form{margin:0}.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;min-height:390px;padding:55px 0 65px;border-bottom:1px solid #ffffff0c}.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.17em;color:var(--cyan);margin-bottom:16px}.hero h1{font-size:clamp(2.7rem,6vw,4.6rem)}.hero h1 span{background:linear-gradient(90deg,#c4b5fd,#67e8f9);color:transparent;background-clip:text}.hero-copy{max-width:450px;color:var(--muted);font-size:1.05rem}.hero-actions{display:flex;gap:12px;margin-top:25px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:11px;padding:12px 18px;background:linear-gradient(110deg,#a78bfa,#67e8f9);color:#0b1020;font:700 .9rem 'DM Sans';cursor:pointer}.btn:hover{color:#0b1020;filter:brightness(1.07)}.btn-soft{background:#202a3e;color:#e8edfa;border:1px solid #35415a}.btn-small{padding:8px 12px}.hero-orbit{height:270px;position:relative;display:grid;place-items:center}.hero-orbit:before,.hero-orbit:after{content:'';position:absolute;width:230px;height:230px;border:1px solid #a78bfa38;border-radius:50%}.hero-orbit:after{width:170px;height:170px;border-color:#67e8f936}.orbit-core{display:grid;place-items:center;width:100px;height:100px;border-radius:32px;background:linear-gradient(135deg,#a78bfa,#67e8f9);color:#0a1020;font:700 3rem 'Space Grotesk';box-shadow:0 0 70px #a78bfa3b}.orbit-chip{position:absolute;padding:9px 14px;border:1px solid #ffffff1b;background:#151e30;border-radius:30px;font-size:.8rem;box-shadow:0 12px 35px #0004}.chip-one{top:25px;left:12%}.chip-two{right:0;top:48%}.chip-three{bottom:22px;left:20%}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:38px 0 20px}.section-heading h2{margin:0}.muted,.small{color:var(--muted)}.small{font-size:.85rem}.layout-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.topic-list{display:grid;gap:12px;align-content:start}.topic-card{display:flex;gap:15px;padding:22px;background:linear-gradient(135deg,#121a2a,#101725);border:1px solid var(--line);border-radius:16px;transition:transform .18s,border-color .18s}.topic-card:hover{border-color:#655a91;transform:translateY(-1px)}.avatar{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#262441;color:#c4b5fd;font-weight:700}.topic-card-main{flex:1;min-width:0}.topic-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}.category-pill{display:inline-block;padding:3px 9px;border-radius:7px;background:#a78bfa15;color:#c4b5fd;font-size:.72rem}.pinned{color:#fcd34d}.topic-card h3{margin:9px 0}.topic-excerpt{color:#a6b2c8;font-size:.9rem;overflow-wrap:anywhere}.topic-byline{font-size:.78rem;color:var(--muted)}.topic-count{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:55px;color:var(--muted);font-size:.72rem}.topic-count strong{font-size:1.1rem;color:var(--text)}.sidebar{display:grid;gap:15px;align-content:start}.side-card,.form-card,.auth-card,.profile-card,.admin-panel,.topic-detail,.replies{background:linear-gradient(145deg,#121a2a,#0f1624);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px}.side-title{display:flex;justify-content:space-between;align-items:center}.side-title h3{margin:0 0 13px}.side-title>a{font-size:.8rem;color:var(--cyan)}.trend-item,.team-mini{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #ffffff0c}.trend-number{font:600 .85rem 'Space Grotesk';color:#8b82b6}.trend-item strong,.team-mini strong{display:block;font-size:.85rem;line-height:1.4}.trend-item small,.team-mini small{display:block;color:var(--muted);font-size:.73rem;margin-top:4px}.team-icon{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:12px;background:#67e8f91a;color:var(--cyan)}.points-card{background:linear-gradient(135deg,#241d42,#132c3b);border-color:#51457a}.points-icon{font-size:1.6rem;color:var(--cyan)}.points-card h3{margin-top:10px}.points-card p{color:#b9c5d8;font-size:.87rem}.site-footer{border-top:1px solid #ffffff0c;padding:25px max(18px,calc((100% - 1160px)/2));display:flex;justify-content:space-between;color:#718098;font-size:.8rem}.auth-card,.form-card{max-width:600px;margin:55px auto;padding:clamp(22px,5vw,40px)}.auth-card{max-width:480px}.auth-card h1,.form-card h1{font-size:2.3rem}.auth-card form,.form-card form,.install-card form{display:grid;gap:16px;margin:25px 0}label{display:grid;gap:7px;color:#c4cde0;font-size:.85rem}input,textarea,select{width:100%;background:#0b1220;color:var(--text);border:1px solid #34415a;border-radius:10px;padding:12px 13px;font:inherit;outline:none}input:focus,textarea:focus,select:focus{border-color:#a78bfa;box-shadow:0 0 0 3px #a78bfa20}textarea{resize:vertical}.notice{padding:14px 16px;border:1px solid #35415a;background:#182338;border-radius:11px;color:#cbd5e1;margin:15px 0}.error{border-color:#7f343d;background:#351b25;color:#fecaca}.topic-detail{padding:clamp(22px,5vw,42px);margin-top:36px}.topic-detail h1{font-size:clamp(2rem,5vw,3rem);margin:20px 0}.topic-body{font-size:1.04rem;line-height:1.9;overflow-wrap:anywhere}.topic-stats{border-top:1px solid var(--line);margin-top:25px;padding-top:15px;color:var(--muted);font-size:.85rem}.inline-form{display:flex;gap:10px;margin-top:18px}.replies{margin-top:20px}.reply{padding:18px 0;border-bottom:1px solid #ffffff12;overflow-wrap:anywhere}.reply-head{display:flex;gap:12px;align-items:center;margin-bottom:9px}.reply-head span{font-size:.78rem;color:var(--muted)}.reply-form{margin-top:24px}.profile-card{text-align:center;padding:40px 20px}.profile-avatar{width:76px;height:76px;display:grid;place-items:center;border-radius:25px;margin:0 auto 20px;background:linear-gradient(135deg,#a78bfa,#67e8f9);color:#0a1020;font:700 2rem 'Space Grotesk'}.profile-card h1{font-size:2.4rem}.profile-stats{display:flex;justify-content:center;gap:55px;margin-top:25px}.profile-stats div{display:grid}.profile-stats strong{font-size:1.35rem}.profile-stats span{color:var(--muted);font-size:.8rem}.admin-badge{font:700 .65rem 'DM Sans';background:#a78bfa;color:#101020;border-radius:5px;padding:4px 7px;vertical-align:middle}.admin-panel h2{font-size:1.3rem}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-top:1px solid #ffffff10}.admin-row small{display:block;color:var(--muted);font-size:.78rem}.admin-row form{display:flex;gap:8px;align-items:center}.admin-row select{width:auto;padding:8px}.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.team-card{padding:23px;border:1px solid var(--line);background:var(--panel);border-radius:16px}.team-card p{color:var(--muted);font-size:.9rem}.team-card small{color:var(--muted)}.empty-state{text-align:center;padding:50px 20px;border:1px dashed var(--line);border-radius:16px}.install-body{display:grid;place-items:center;padding:24px}.install-card{width:min(620px,100%);padding:clamp(22px,5vw,42px);background:var(--panel);border:1px solid var(--line);border-radius:20px}.install-card h1{font-size:2.4rem}.install-card h3{margin:25px 0 0}.install-card .brand-mark{margin-bottom:18px}.install-card .btn{width:100%}button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}@media(max-width:900px){.layout-grid{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.points-card{grid-column:1/-1}.hero{grid-template-columns:1fr .7fr}.team-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.site-header{height:auto;min-height:75px;align-items:flex-start;padding:15px 0;gap:14px;flex-direction:column}nav{gap:15px;flex-wrap:wrap}.hero{grid-template-columns:1fr;padding:45px 0}.hero-orbit{height:220px;order:-1}.hero-orbit:before{width:190px;height:190px}.hero-orbit:after{width:140px;height:140px}.orbit-core{width:75px;height:75px;border-radius:24px}.hero h1{font-size:2.8rem}.sidebar{grid-template-columns:1fr}.topic-card{padding:16px;gap:10px}.topic-count{min-width:42px}.section-heading{align-items:start;gap:10px;flex-direction:column}.team-grid{grid-template-columns:1fr}.admin-row{align-items:flex-start;flex-direction:column}.admin-row form{flex-wrap:wrap}.site-footer{gap:8px;flex-direction:column}.profile-stats{gap:25px}.reply-head{align-items:flex-start;flex-direction:column}.container{width:calc(100% - 24px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Sixtens Phase 5: responsive shell, theme tokens, navigation and composer */
:root{color-scheme:dark;--bg:#090d18;--panel:#111827;--panel2:#151e30;--line:#263247;--text:#f2f5fc;--muted:#91a0b8;--accent:#a78bfa;--cyan:#67e8f9;--field:#0b1220;--soft:#202a3e;--shadow:0 18px 55px #0002}
html[data-theme="light"]{color-scheme:light;--bg:#f4f6fb;--panel:#fff;--panel2:#f8f9fd;--line:#e1e6f0;--text:#172033;--muted:#667085;--field:#fff;--soft:#eef1f8;--shadow:0 18px 50px #26324a0d}
body{background:radial-gradient(ellipse at 15% -10%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 42%),var(--bg);color:var(--text);transition:background .2s,color .2s}
.site-header{position:relative;z-index:20;height:auto;min-height:82px;padding:14px 0;gap:16px}.site-nav{display:flex;align-items:center;gap:clamp(10px,1.8vw,22px)}.site-nav>a{white-space:nowrap}.nav-create{padding:9px 14px;border-radius:11px;background:linear-gradient(110deg,#a78bfa,#67e8f9);color:#111326;font-weight:700}.nav-dropdown{position:relative}.nav-dropdown-trigger{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:30px;padding:5px 10px 5px 5px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer}.nav-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#a78bfa;color:#171329;font-weight:800}.nav-avatar img{width:100%;height:100%;object-fit:cover}.nav-dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);width:210px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.nav-dropdown-menu.is-open{display:grid}.nav-dropdown-menu>a,.dropdown-logout{padding:11px 12px;border-radius:9px;color:var(--text);text-align:left;font:inherit}.nav-dropdown-menu>a:hover,.dropdown-logout:hover{background:var(--soft)}.logout-form{margin:0}.dropdown-logout{width:100%;background:transparent;border:0;cursor:pointer}.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);padding:9px 12px;font:600 .8rem 'DM Sans';cursor:pointer}.mobile-menu-toggle{display:none;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:1.2rem}.topic-card,.side-card,.form-card,.auth-card,.profile-card,.admin-panel,.topic-detail,.replies,.team-card,.install-card{background:var(--panel);box-shadow:var(--shadow)}.topic-card{background:linear-gradient(135deg,var(--panel),var(--panel2))}.avatar,.team-icon{border-radius:50%}.profile-avatar{border-radius:50%}.topic-composer{max-width:920px;margin:34px auto 60px;padding:clamp(20px,4vw,38px);background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.composer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:25px}.composer-head h1{font-size:clamp(2rem,5vw,3rem)}.composer-tip{color:var(--muted);font-size:.84rem}.composer-field{margin-bottom:19px}.composer-field label{margin-bottom:8px}.title-input{font:600 1.25rem 'DM Sans';padding:16px}.editor-shell{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--field)}.editor-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-bottom:1px solid var(--line);background:var(--panel2)}.editor-tool{min-width:38px;padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);font-weight:700;cursor:pointer}.editor-tool:hover{border-color:var(--line);background:var(--soft)}.editor-help{padding:8px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}.editor-textarea{display:block;min-height:260px;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:18px;line-height:1.8;resize:vertical}.editor-textarea:focus{box-shadow:none!important}.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.char-count{font-size:.8rem;color:var(--muted)}.category-select{max-width:100%}.site-footer{background:var(--panel);border-top:1px solid var(--line);padding-top:28px;padding-bottom:28px;gap:22px}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand strong,.footer-brand small{display:block}.footer-brand small{font-size:.62rem;letter-spacing:.13em;color:var(--muted)}.footer-copy{display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end;color:var(--muted)}input,textarea,select{background:var(--field);color:var(--text);border-color:var(--line)}.notice{background:var(--panel2);color:var(--text);border-color:var(--line)}.btn-soft{background:var(--soft);color:var(--text);border-color:var(--line)}
@media(max-width:760px){.site-header{display:grid;grid-template-columns:1fr auto;align-items:center}.mobile-menu-toggle{display:block}.site-nav{display:none;grid-column:1/-1;align-items:stretch;flex-direction:column;gap:8px;padding:12px 0 5px}.site-nav.is-open{display:flex}.site-nav>a,.theme-toggle,.nav-dropdown-trigger{width:100%;justify-content:flex-start;padding:11px 13px}.nav-dropdown{width:100%}.nav-dropdown-menu{position:static;width:100%;margin-top:6px;box-shadow:none}.nav-user-name{flex:1}.composer-head{display:block}.composer-head .composer-tip{margin-top:8px}.editor-textarea{min-height:220px}.footer-copy{justify-content:flex-start;flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:reduce){body{transition:none}}

/* Sixtens Phase 7 topic composer and discussion refinements */
.topic-composer{width:min(900px,100%);margin:clamp(22px,5vw,54px) auto;padding:clamp(18px,4vw,38px);background:linear-gradient(145deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:24px;box-shadow:0 22px 65px #0002;min-width:0}
.composer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}.composer-head h1{font-size:clamp(2rem,5vw,3rem)}.composer-tip{color:var(--muted);font-size:.82rem}.topic-form{display:grid;gap:24px}.composer-field{min-width:0}.composer-field>label{display:block;margin-bottom:9px;font-weight:700;color:var(--text)}.category-select,.title-input,.editor-textarea{width:100%;min-width:0}.category-description{font-size:.82rem;min-height:0;margin:7px 0 0}.char-count{margin-top:7px;text-align:right;color:var(--muted);font-size:.76rem}.editor-shell{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--bg)}.editor-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px;border-bottom:1px solid var(--line);background:var(--panel2)}.editor-tool{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:600 .82rem 'DM Sans',sans-serif;cursor:pointer}.editor-tool:hover,.editor-tool:focus-visible{border-color:var(--accent);background:#a78bfa18}.editor-textarea{display:block;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:240px;resize:vertical;background:transparent;padding:17px;line-height:1.75}.editor-help{padding:0 17px 14px;color:var(--muted);font-size:.76rem}.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid var(--line)}.topic-body p{margin:0 0 1em}.topic-body ul,.topic-body ol{padding-left:1.5rem;margin:.5em 0 1em}.topic-body blockquote{margin:1em 0;padding:12px 16px;border-left:3px solid var(--accent);background:#a78bfa12;border-radius:0 10px 10px 0;color:var(--muted)}.topic-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);padding:.12em .35em;border-radius:5px}.topic-body hr{border:0;border-top:1px solid var(--line);margin:1.5em 0}.topic-detail,.replies{min-width:0}.inline-form{flex-wrap:wrap}.reply-form label{color:var(--text)}
@media(max-width:650px){.topic-composer{margin:18px auto;padding:18px;border-radius:16px}.composer-head{flex-direction:column;gap:8px}.composer-bottom{align-items:stretch;flex-direction:column}.composer-bottom .btn{width:100%}.editor-toolbar{gap:5px;padding:8px}.editor-tool{flex:1 0 auto;padding:7px 9px}.editor-textarea{min-height:210px;padding:13px}.topic-detail{padding:20px}.inline-form .btn{flex:1}}

/* =========================================================
   SIXTENS — GLASS UI & UNIFIED LIGHT / DARK THEME
   Append after the existing app.css rules.
========================================================= */

:root {
    color-scheme: dark;

    --bg: #090d18;
    --panel: #111827;
    --panel2: #151e30;
    --line: #263247;
    --text: #f2f5fc;
    --muted: #91a0b8;
    --field: #0b1220;
    --soft: #202a3e;

    --accent: #a78bfa;
    --cyan: #67e8f9;

    --glass: rgba(17, 24, 39, .72);
    --glass-strong: rgba(17, 24, 39, .92);
    --glass-border: rgba(255, 255, 255, .09);

    --shadow-sm: 0 6px 20px rgba(0, 0, 0, .12);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .24);

    --focus-ring: 0 0 0 3px rgba(167, 139, 250, .22);
    --surface-radius: 20px;
    --control-radius: 13px;

    --transition-ui:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

html[data-theme="light"] {
    color-scheme: light;

    --bg: #f3f5fb;
    --panel: #ffffff;
    --panel2: #f7f8fc;
    --line: #e2e6f0;
    --text: #182033;
    --muted: #69748a;
    --field: #ffffff;
    --soft: #eef0f8;

    --glass: rgba(255, 255, 255, .76);
    --glass-strong: rgba(255, 255, 255, .94);
    --glass-border: rgba(31, 41, 65, .10);

    --shadow-sm: 0 6px 22px rgba(31, 41, 65, .055);
    --shadow-lg: 0 22px 60px rgba(31, 41, 65, .10);

    --focus-ring: 0 0 0 3px rgba(109, 91, 220, .15);
}

/* Base */

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    color: var(--text);
    background:
        radial-gradient(
            ellipse at 12% 0%,
            color-mix(in srgb, var(--accent) 10%, transparent),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 90% 35%,
            color-mix(in srgb, var(--cyan) 5%, transparent),
            transparent 38%
        ),
        var(--bg);

    transition: background-color .2s ease, color .2s ease;
}

::selection {
    color: #111326;
    background: #c4b5fd;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
}

/* Shared glass surfaces */

.topic-card,
.side-card,
.form-card,
.auth-card,
.profile-card,
.admin-panel,
.topic-detail,
.replies,
.team-card,
.install-card,
.topic-composer {
    color: var(--text);
    background: linear-gradient(
        145deg,
        var(--glass-strong),
        var(--glass)
    );
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);

    transition: var(--transition-ui);
}

.topic-card {
    border-radius: var(--surface-radius);
}

.side-card,
.form-card,
.auth-card,
.profile-card,
.admin-panel,
.topic-detail,
.replies,
.team-card,
.install-card,
.topic-composer {
    border-radius: var(--surface-radius);
}

.topic-card:hover,
.team-card:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Typography and secondary text */

body,
label,
input,
textarea,
select,
button {
    font-family: 'DM Sans', system-ui, sans-serif;
}

h1, h2, h3 {
    color: var(--text);
}

p,
.topic-excerpt,
.team-card p {
    overflow-wrap: anywhere;
}

.muted,
.small,
.topic-meta,
.topic-byline,
.topic-count,
.team-card small,
.admin-row small {
    color: var(--muted);
}

.topic-card h3 a:hover,
.trend-item a:hover,
.team-mini a:hover {
    color: var(--accent);
}

/* Buttons — compact, tactile, and theme-aware */

.btn,
.nav-create,
.nav-join {
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    box-shadow: 0 7px 20px rgba(123, 104, 238, .15);
    transition: var(--transition-ui);
}

.btn:hover,
.nav-create:hover,
.nav-join:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(123, 104, 238, .22);
}

.btn:active,
.nav-create:active,
.nav-join:active {
    transform: translateY(0);
}

.btn-soft {
    color: var(--text);
    background: var(--soft);
    border: 1px solid var(--line);
    box-shadow: none;
}

.btn-soft:hover {
    color: var(--text);
    background: var(--panel2);
    border-color: var(--accent);
}

button,
input,
textarea,
select {
    accent-color: var(--accent);
}

button:disabled,
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Form controls */

input,
textarea,
select {
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    transition: var(--transition-ui);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: .8;
}

input:focus,
textarea:focus,
select:focus {
    color: var(--text);
    background: var(--field);
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    outline: none;
}

option {
    color: var(--text);
    background: var(--panel);
}

label {
    color: var(--text);
}

.notice {
    color: var(--text);
    background: var(--panel2);
    border-color: var(--line);
}

.notice.error {
    color: #fecaca;
    background: #351b25;
    border-color: #7f343d;
}

html[data-theme="light"] .notice.error {
    color: #9f1239;
    background: #fff1f2;
    border-color: #fecdd3;
}

/* Topic cards and discussion */

.topic-card {
    background: linear-gradient(135deg, var(--panel), var(--panel2));
}

.avatar {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}

.category-pill {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.topic-excerpt {
    color: var(--muted);
}

.topic-count strong {
    color: var(--text);
}

.topic-stats,
.reply {
    border-color: var(--line);
}

.topic-body blockquote {
    color: var(--muted);
    background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}

.topic-body code {
    color: var(--text);
    background: var(--panel2);
}

/* Sidebar, teams, and points */

.trend-item,
.team-mini {
    border-color: var(--line);
}

.team-card {
    background: linear-gradient(145deg, var(--panel), var(--panel2));
}

.points-card {
    background:
        radial-gradient(
            circle at top right,
            rgba(103, 232, 249, .13),
            transparent 55%
        ),
        linear-gradient(135deg, var(--panel), var(--panel2));
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.points-card p {
    color: var(--muted);
}

/* Composer */

.topic-composer {
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border-color: var(--glass-border);
    box-shadow: var(--shadow-lg);
}

.editor-shell {
    background: var(--field);
    border-color: var(--line);
}

.editor-toolbar {
    background: var(--panel2);
    border-color: var(--line);
}

.editor-tool {
    color: var(--text);
    background: var(--panel);
    border-color: var(--line);
}

.editor-tool:hover,
.editor-tool:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
    border-color: var(--accent);
}

.editor-help {
    color: var(--muted);
    border-color: var(--line);
}

/* Profile and admin */

.profile-avatar {
    box-shadow: 0 10px 35px rgba(123, 104, 238, .18);
}

.admin-row {
    border-color: var(--line);
}

.admin-badge {
    color: #fff;
}

/* Footer */

.site-footer {
    color: var(--muted);
    background: var(--glass);
    border-color: var(--line);
}

/* Theme-aware header surfaces.
   These also support the inline header styles. */

.site-header {
    background: var(--glass-strong);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-sm);

    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.site-header .nav-dropdown-trigger,
.site-header .theme-toggle,
.site-header .mobile-menu-toggle {
    color: var(--text);
    background: var(--glass);
    border-color: var(--glass-border);
}

.site-header .nav-user-name {
    color: var(--text);
}

.site-header .nav-dropdown-menu {
    color: var(--text);
    background: var(--glass-strong);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-lg);
}

.site-header .nav-dropdown-menu > a {
    color: var(--text);
}

.site-header .nav-dropdown-menu > a:hover {
    color: var(--accent);
    background: var(--soft);
}

.site-header .site-nav > a {
    color: var(--muted);
}

.site-header .site-nav > a:hover {
    color: var(--text);
    background: var(--soft);
}

/* Responsive polish */

@media (max-width: 760px) {
    .site-header .site-nav {
        background: var(--glass-strong);
        border-color: var(--glass-border);
        box-shadow: var(--shadow-lg);

        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);
    }

    .site-header .nav-dropdown-menu {
        background: var(--panel2);
        box-shadow: none;
    }
}

@media (max-width: 650px) {
    .topic-card,
    .side-card,
    .team-card {
        border-radius: 16px;
    }

    .btn {
        min-height: 42px;
    }

    .container {
        width: calc(100% - 24px);
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   SIXTENS — PREMIUM COMMUNITY HOMEPAGE
   Single-file styling | Glassmorphism | Responsive
========================================================= */

.sx-home {
    --sx-bg: rgba(15, 23, 42, .68);
    --sx-card: rgba(20, 29, 46, .70);
    --sx-card-hover: rgba(29, 40, 62, .84);
    --sx-border: rgba(148, 163, 184, .16);
    --sx-border-hover: rgba(167, 139, 250, .42);
    --sx-muted: #94a3b8;
    --sx-text: #e2e8f0;
    --sx-purple: #a78bfa;
    --sx-cyan: #67e8f9;
    --sx-shadow: 0 14px 38px rgba(0, 0, 0, .18);
    --sx-shadow-hover: 0 20px 48px rgba(0, 0, 0, .27);

    color: var(--sx-text);
    min-width: 0;
}

.sx-home *,
.sx-home *::before,
.sx-home *::after {
    box-sizing: border-box;
}

.sx-home a {
    text-decoration: none;
}

.sx-home a:focus-visible {
    outline: 2px solid var(--sx-cyan);
    outline-offset: 4px;
}

/* GLASS SURFACE */
.sx-glass {
    background: var(--sx-card);
    border: 1px solid var(--sx-border);
    box-shadow: var(--sx-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* HERO */
.sx-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr);
    align-items: center;
    gap: 28px;
    padding: clamp(25px, 4vw, 52px);
    margin: 24px 0 25px;
    overflow: hidden;
    border: 1px solid rgba(167, 139, 250, .22);
    border-radius: 25px;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(103, 232, 249, .15),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(167, 139, 250, .19),
            transparent 43%
        ),
        linear-gradient(
            135deg,
            rgba(21, 27, 45, .96),
            rgba(12, 19, 34, .94)
        );
    box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
}

.sx-hero::before,
.sx-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(167, 139, 250, .15);
    border-radius: 50%;
    pointer-events: none;
}

.sx-hero::before {
    width: 340px;
    height: 340px;
    right: -150px;
    top: -220px;
}

.sx-hero::after {
    width: 260px;
    height: 260px;
    right: -130px;
    bottom: -160px;
}

.sx-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.sx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
    color: var(--sx-cyan);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.sx-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--sx-cyan);
    box-shadow: 0 0 12px rgba(103, 232, 249, .65);
}

.sx-hero h1 {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.055em;
    overflow-wrap: anywhere;
}

.sx-hero h1 span {
    color: transparent;
    background: linear-gradient(90deg, #c4b5fd, #67e8f9);
    background-clip: text;
    -webkit-background-clip: text;
}

.sx-hero-description {
    max-width: 490px;
    margin: 17px 0 0;
    color: #aab6ca;
    font-size: .96rem;
    line-height: 1.8;
}

.sx-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 23px;
}

.sx-home .sx-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 35px;
    padding: 7px 13px;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.sx-home .sx-hero-actions .btn:hover {
    transform: translateY(-2px);
}

.sx-home .sx-hero-actions .btn-soft {
    border: 1px solid var(--sx-border);
    background: rgba(148, 163, 184, .08);
    color: #e2e8f0;
}

.sx-hero-visual {
    position: relative;
    min-width: 0;
    min-height: 235px;
    display: grid;
    place-items: center;
}

.sx-hero-orbit {
    position: absolute;
    width: min(230px, 75%);
    aspect-ratio: 1;
    border: 1px solid rgba(167, 139, 250, .27);
    border-radius: 50%;
    box-shadow: 0 0 45px rgba(167, 139, 250, .06);
}

.sx-hero-orbit::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px dashed rgba(103, 232, 249, .28);
    border-radius: 50%;
}

.sx-hero-logo {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 27px;
    color: #0b1020;
    background: linear-gradient(135deg, #c4b5fd, #67e8f9);
    box-shadow:
        0 0 55px rgba(167, 139, 250, .24),
        0 15px 35px rgba(0, 0, 0, .25);
    font: 800 2.8rem 'Space Grotesk', sans-serif;
}

.sx-float {
    position: absolute;
    z-index: 2;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 30px;
    background: rgba(21, 30, 48, .78);
    color: #e2e8f0;
    font-size: .74rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sx-float-one {
    top: 17px;
    left: 0;
}

.sx-float-two {
    top: 48%;
    right: 0;
}

.sx-float-three {
    bottom: 15px;
    left: 8%;
}

/* COMMUNITY STATS */
.sx-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 34px;
}

.sx-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid var(--sx-border);
    border-radius: 15px;
    background: var(--sx-card);
    box-shadow: var(--sx-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sx-stat-icon {
    display: grid;
    place-items: center;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(167, 139, 250, .13);
    border-radius: 12px;
    background: rgba(167, 139, 250, .12);
    color: #c4b5fd;
    font-size: 1.05rem;
}

.sx-stat strong {
    display: block;
    font: 700 1.25rem 'Space Grotesk', sans-serif;
    line-height: 1.3;
}

.sx-stat span {
    display: block;
    color: var(--sx-muted);
    font-size: .76rem;
}

/* SECTION HEADINGS */
.sx-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 16px;
}

.sx-section-heading h2 {
    margin: 0;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 750;
    letter-spacing: -.025em;
}

.sx-section-heading p {
    margin: 0 0 6px;
    color: var(--sx-cyan);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.sx-section-note {
    color: var(--sx-muted);
    font-size: .77rem;
    white-space: nowrap;
}

/* LATEST DISCUSSIONS — TOP BOARD */
.sx-discussions {
    margin-bottom: 36px;
}

.sx-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 20px;
}

.sx-feed {
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* RESPONSIVE TOPIC CARD */
.sx-topic {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--sx-border);
    border-radius: 17px;
    background: var(--sx-card);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.sx-topic:hover {
    border-color: var(--sx-border-hover);
    background: var(--sx-card-hover);
    box-shadow: var(--sx-shadow-hover);
    transform: translateY(-2px);
}

.sx-topic-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(196, 181, 253, .16);
    border-radius: 13px;
    background: linear-gradient(145deg, #30294c, #1b3040);
    color: #d8ccff;
    font-weight: 800;
}

.sx-topic-main {
    flex: 1 1 auto;
    min-width: 0;
}

.sx-topic-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sx-home .category-pill,
.sx-home .pinned,
.sx-home .muted {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.sx-topic h3 {
    margin: 9px 0 7px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sx-topic h3 a {
    color: #f1f5f9;
    transition: color .2s ease;
}

.sx-topic h3 a:hover {
    color: var(--sx-cyan);
}

.sx-topic-excerpt {
    margin: 0 0 12px;
    color: #a6b2c8;
    font-size: .84rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.sx-topic-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    color: var(--sx-muted);
    font-size: .73rem;
}

.sx-topic-byline a {
    color: #c4b5fd;
}

.sx-topic-replies {
    display: flex;
    flex: 0 0 53px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 9px 5px;
    border: 1px solid rgba(148, 163, 184, .08);
    border-radius: 11px;
    background: rgba(148, 163, 184, .055);
    text-align: center;
}

.sx-topic-replies strong {
    font: 700 1rem 'Space Grotesk', sans-serif;
}

.sx-topic-replies span {
    color: var(--sx-muted);
    font-size: .63rem;
}

/* EMPTY STATE */
.sx-empty {
    padding: 35px 20px;
    border: 1px dashed var(--sx-border);
    border-radius: 17px;
    background: rgba(17, 24, 39, .42);
    text-align: center;
}

.sx-empty h3 {
    margin: 0 0 8px;
}

.sx-empty p {
    margin: 0 0 15px;
    color: var(--sx-muted);
    font-size: .88rem;
    line-height: 1.6;
}

/* COMPACT GENERAL ACTION BUTTONS */
.sx-home .sx-compact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid var(--sx-border);
    border-radius: 9px;
    background: rgba(148, 163, 184, .08);
    color: #e2e8f0;
    font-size: .77rem;
    font-weight: 700;
    line-height: 1.4;
    transition: background .18s ease, border-color .18s ease;
}

.sx-home .sx-compact-btn:hover {
    border-color: var(--sx-border-hover);
    background: rgba(167, 139, 250, .13);
}

/* CATEGORIES */
.sx-category-section {
    margin-bottom: 36px;
}

.sx-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sx-category {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--sx-border);
    border-radius: 16px;
    background: var(--sx-card);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color .2s ease, transform .2s ease;
}

.sx-category:hover {
    border-color: var(--sx-border-hover);
    transform: translateY(-2px);
}

.sx-category-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    margin-bottom: 13px;
    border: 1px solid rgba(103, 232, 249, .12);
    border-radius: 11px;
    background: rgba(103, 232, 249, .08);
    color: var(--sx-cyan);
    font-size: 1.05rem;
}

.sx-category h3 {
    margin: 0 0 7px;
    font-size: .96rem;
    overflow-wrap: anywhere;
}

.sx-category p {
    margin: 0;
    color: var(--sx-muted);
    font-size: .8rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.sx-category-count {
    display: inline-block;
    margin-top: 12px;
    color: #c4b5fd;
    font-size: .73rem;
    font-weight: 700;
}

/* SIDEBAR */
.sx-sidebar {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.sx-side-card {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--sx-border);
    border-radius: 17px;
    background: var(--sx-card);
    box-shadow: var(--sx-shadow);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.sx-side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

.sx-side-title h3 {
    margin: 0;
    font-size: .98rem;
}

.sx-side-title a,
.sx-side-title > span {
    color: var(--sx-cyan);
    font-size: .75rem;
}

.sx-trend {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid rgba(148, 163, 184, .10);
}

.sx-trend-number {
    flex: 0 0 24px;
    color: #a99bdc;
    font: 700 .78rem 'Space Grotesk', sans-serif;
}

.sx-trend-content {
    min-width: 0;
}

.sx-trend strong {
    display: block;
    color: #e2e8f0;
    font-size: .82rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sx-trend:hover strong {
    color: var(--sx-cyan);
}

.sx-trend small {
    display: block;
    margin-top: 4px;
    color: var(--sx-muted);
    font-size: .69rem;
    line-height: 1.5;
}

.sx-team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid rgba(148, 163, 184, .10);
}

.sx-team-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(103, 232, 249, .09);
    color: var(--sx-cyan);
}

.sx-team-info {
    min-width: 0;
}

.sx-team strong {
    display: block;
    color: #e2e8f0;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.sx-team small {
    color: var(--sx-muted);
    font-size: .7rem;
}

.sx-points-card {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(103, 232, 249, .13),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            rgba(37, 30, 64, .82),
            rgba(20, 37, 51, .82)
        );
}

.sx-points-symbol {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    margin-bottom: 13px;
    border: 1px solid rgba(196, 181, 253, .12);
    border-radius: 12px;
    background: rgba(196, 181, 253, .12);
    color: #c4b5fd;
    font-size: 1.25rem;
}

.sx-points-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.sx-points-card p {
    margin: 0;
    color: #b5c2d5;
    font-size: .81rem;
    line-height: 1.7;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    .sx-content-grid {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 15px;
    }

    .sx-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .sx-hero {
        grid-template-columns: minmax(0, 1fr) minmax(190px, .65fr);
        gap: 15px;
    }

    .sx-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sx-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sx-points-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .sx-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        padding: 23px 19px;
        margin-top: 16px;
        border-radius: 20px;
    }

    .sx-hero-visual {
        min-height: 165px;
        order: -1;
    }

    .sx-hero-orbit {
        width: 160px;
    }

    .sx-hero-logo {
        width: 68px;
        height: 68px;
        border-radius: 21px;
        font-size: 2.1rem;
    }

    .sx-float {
        padding: 7px 10px;
        font-size: .69rem;
    }

    .sx-float-one {
        left: 3%;
        top: 7px;
    }

    .sx-float-two {
        right: 1%;
    }

    .sx-float-three {
        bottom: 4px;
        left: 8%;
    }

    .sx-hero h1 {
        font-size: clamp(2.15rem, 10vw, 3rem);
    }

    .sx-hero-description {
        margin-top: 13px;
        font-size: .88rem;
        line-height: 1.7;
    }

    .sx-hero-actions {
        margin-top: 18px;
        gap: 8px;
    }

    .sx-home .sx-hero-actions .btn {
        min-height: 33px;
        padding: 7px 11px;
        font-size: .76rem;
    }

    .sx-stats {
        gap: 8px;
        margin-bottom: 28px;
    }

    .sx-stat {
        display: block;
        padding: 11px;
        border-radius: 13px;
    }

    .sx-stat-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
        font-size: .9rem;
    }

    .sx-stat strong {
        font-size: 1.05rem;
    }

    .sx-stat span {
        font-size: .66rem;
        line-height: 1.4;
    }

    .sx-section-heading {
        align-items: flex-start;
    }

    .sx-section-heading h2 {
        font-size: 1.35rem;
    }

    .sx-section-note {
        padding-top: 17px;
        font-size: .68rem;
    }

    .sx-discussions,
    .sx-category-section {
        margin-bottom: 29px;
    }

    .sx-topic {
        gap: 10px;
        padding: 13px;
        border-radius: 14px;
    }

    .sx-topic-avatar {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: .83rem;
    }

    .sx-topic h3 {
        margin-top: 8px;
        font-size: .91rem;
    }

    .sx-topic-excerpt {
        font-size: .79rem;
        line-height: 1.6;
    }

    .sx-topic-replies {
        flex-basis: 43px;
        padding: 7px 3px;
    }

    .sx-topic-replies strong {
        font-size: .88rem;
    }

    .sx-topic-replies span {
        font-size: .59rem;
    }

    .sx-categories {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .sx-category {
        padding: 15px;
    }

    .sx-category-icon {
        float: left;
        margin: 0 12px 8px 0;
    }

    .sx-category h3 {
        padding-top: 2px;
    }

    .sx-category-count {
        display: block;
        clear: both;
        padding-top: 5px;
    }

    .sx-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .sx-points-card {
        grid-column: auto;
    }

    .sx-side-card {
        padding: 16px;
    }
}

@media (max-width: 380px) {
    .sx-hero-actions {
        align-items: flex-start;
    }

    .sx-home .sx-hero-actions .btn {
        max-width: 100%;
    }

    .sx-topic-avatar {
        display: none;
    }

    .sx-topic {
        gap: 8px;
    }

    .sx-topic-replies {
        flex-basis: 39px;
    }

    .sx-stat {
        padding: 9px 7px;
    }

    .sx-stat span {
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sx-home *,
    .sx-home *::before,
    .sx-home *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   SIXTENS HEADER FIX — final override
   Keep this block at the very end of app.css.
   Fixes conflicting legacy mobile header/nav rules.
========================================================= */
.site-header {
    position: relative;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(1240px, calc(100% - 36px));
    min-height: 76px;
    height: auto;
    margin: 0 auto;
    padding: 12px 0;
}

.site-header .brand {
    flex: 0 0 auto;
    min-width: 0;
    line-height: 1.25;
}

.site-header .brand > span,
.site-header .brand > div {
    min-width: 0;
}

.site-header .site-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.6vw, 22px);
    min-width: 0;
    margin: 0;
    padding: 0;
}

.site-header .site-nav > a,
.site-header .site-nav > button,
.site-header .site-nav .nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    white-space: nowrap;
}

.site-header .site-nav .nav-dropdown {
    position: relative;
    min-width: 0;
}

.site-header .site-nav .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    z-index: 1100;
    min-width: 190px;
    max-width: min(280px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid var(--glass-border, var(--line));
    border-radius: 14px;
    background: var(--glass-strong, var(--panel));
    box-shadow: var(--shadow-lg, 0 16px 40px #0005);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.site-header .site-nav .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 9px;
    white-space: normal;
}

.site-header .mobile-menu-toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel2);
    color: var(--text);
    cursor: pointer;
}

.site-header .mobile-menu-toggle:focus-visible,
.site-header .site-nav a:focus-visible,
.site-header .site-nav button:focus-visible {
    outline: 3px solid var(--cyan, #67e8f9);
    outline-offset: 3px;
}

@media (max-width: 900px) and (min-width: 681px) {
    .site-header {
        gap: 12px;
        width: calc(100% - 28px);
    }

    .site-header .site-nav {
        gap: 10px;
        font-size: .82rem;
    }

    .site-header .site-nav > a,
    .site-header .site-nav > button,
    .site-header .site-nav .nav-dropdown-trigger {
        padding-left: 9px;
        padding-right: 9px;
    }
}

@media (max-width: 680px) {
    .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        width: calc(100% - 28px);
        min-height: 68px;
        padding: 12px 0;
    }

    .site-header .brand {
        grid-column: 1;
        grid-row: 1;
        max-width: 100%;
    }

    .site-header .mobile-menu-toggle {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
    }

    .site-header .site-nav {
        display: none;
        grid-column: 1 / -1;
        grid-row: 2;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        gap: 5px;
        width: 100%;
        min-width: 0;
        margin-top: 12px;
        padding: 12px;
        border: 1px solid var(--glass-border, var(--line));
        border-radius: 16px;
        background: var(--glass-strong, var(--panel));
        box-shadow: var(--shadow-lg, 0 16px 40px #0004);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    .site-header .site-nav.is-open {
        display: flex;
    }

    .site-header .site-nav > a,
    .site-header .site-nav > button,
    .site-header .site-nav .nav-dropdown-trigger {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        text-align: left;
        white-space: normal;
    }

    .site-header .site-nav .nav-dropdown {
        width: 100%;
    }

    .site-header .site-nav .nav-dropdown-menu {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 5px 0 0;
        box-shadow: none;
    }

    .site-header .site-nav .nav-dropdown-menu a {
        width: 100%;
    }

    .site-header .site-nav .nav-user-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .site-header {
        width: calc(100% - 22px);
    }

    .site-header .brand {
        gap: 9px;
        font-size: 1rem;
    }

    .site-header .brand-mark {
        width: 37px;
        height: 37px;
        border-radius: 12px;
        font-size: 1.2rem;
    }
}


/* Shared branding image */
.brand-logo{width:42px;height:42px;object-fit:contain;display:block;border-radius:10px}


/* =========================================================
   Sixtens UI refinement — unified header, drawer and themes
   Appended intentionally to override legacy cascade conflicts.
========================================================= */
:root {
    --header-height: 76px;
    --glass: rgba(17, 24, 39, .78);
    --glass-strong: rgba(17, 24, 39, .96);
    --glass-border: rgba(255, 255, 255, .10);
    --shadow-sm: 0 8px 28px rgba(0, 0, 0, .14);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, .28);
}
html[data-theme="light"] {
    --glass: rgba(255, 255, 255, .82);
    --glass-strong: rgba(255, 255, 255, .98);
    --glass-border: rgba(31, 41, 65, .11);
    --shadow-sm: 0 8px 28px rgba(31, 41, 65, .06);
    --shadow-lg: 0 22px 60px rgba(31,  41, 65, .14);
}
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body { background-color: var(--bg); color: var(--text); }
.site-header {
    position: sticky; top: 0; z-index: 1200;
    display: flex; flex-direction: row; align-items: center;
    justify-content: space-between; gap: 18px;
    width: min(1240px, calc(100% - 36px)); min-height: var(--header-height);
    margin: 0 auto; padding: 12px 0;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass); box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.site-header .brand { flex: 0 0 auto; min-width: 0; }
.site-header .site-nav {
    display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end;
    gap: clamp(8px, 1.35vw, 18px); min-width: 0; margin: 0; padding: 0;
}
.site-header .site-nav > a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 9px 11px; border-radius: 10px;
    color: var(--muted); white-space: nowrap; transition: var(--transition-ui);
}
.site-header .site-nav > a:hover { color: var(--text); background: var(--soft); }
.site-header .nav-create, .site-header .nav-join { color: #111326 !important; }
.site-header .nav-dropdown { position: relative; min-width: 0; }
.site-header .nav-dropdown-trigger {
    display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
    max-width: 250px; padding: 5px 11px 5px 5px; border: 1px solid var(--glass-border);
    border-radius: 999px; background: var(--glass-strong); color: var(--text); cursor: pointer;
}
.site-header .nav-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; }
.site-header .nav-user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.site-header .nav-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 10px); right: 0; left: auto;
    z-index: 1300; width: 230px; max-width: calc(100vw - 28px); padding: 8px;
    border: 1px solid var(--glass-border); border-radius: 16px;
    background: var(--glass-strong); color: var(--text); box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    transform-origin: top right; animation: sixtens-pop .16s ease-out;
}
.site-header .nav-dropdown-menu.is-open { display: grid; }
.site-header .nav-dropdown-menu > a, .site-header .dropdown-logout {
    display: flex; align-items: center; min-height: 42px; padding: 10px 12px;
    border-radius: 10px; color: var(--text); text-align: left; white-space: normal;
}
.site-header .nav-dropdown-menu > a:hover, .site-header .dropdown-logout:hover { color: var(--text); background: var(--soft); }
.site-header .theme-toggle {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 9px 13px; border: 1px solid var(--glass-border);
    border-radius: 999px; background: var(--glass-strong); color: var(--text);
    font: 600 .82rem 'DM Sans', sans-serif; cursor: pointer; white-space: nowrap;
    transition: var(--transition-ui);
}
.site-header .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.site-header .theme-icon { font-size: 1.05rem; line-height: 1; }
.site-header .mobile-menu-toggle { display: none; }
.mobile-nav-backdrop { display: none; }
.site-footer { background: var(--panel); border-color: var(--line); color: var(--muted); padding: 28px max(18px, calc((100% - 1160px)/2)); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.footer-brand:hover { color: var(--text); }
.footer-brand-copy { display: grid; gap: 2px; }
.footer-brand-copy strong { font-size: .98rem; }
.footer-brand-copy small { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .13em; }
.footer-copy { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; color: var(--muted); }
@keyframes sixtens-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 900px) and (min-width: 681px) {
    .site-header { width: calc(100% - 28px); gap: 10px; }
    .site-header .brand { gap: 8px; font-size: 1rem; }
    .site-header .brand small { font-size: .55rem; }
    .site-header .site-nav { gap: 4px; font-size: .8rem; }
    .site-header .site-nav > a { padding: 8px; }
    .site-header .nav-user-name { max-width: 80px; }
    .site-header .theme-toggle { padding: 9px 10px; }
}
@media (max-width: 680px) {
    .site-header {
        -webkit-backdrop-filter: none; backdrop-filter: none;
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center; column-gap: 8px; row-gap: 0;
        width: calc(100% - 24px); min-height: 68px; padding: 10px 0;
    }
    .site-header .brand { grid-column: 1; grid-row: 1; gap: 9px; font-size: 1rem; }
    .site-header .brand-mark, .site-header .brand-logo { width: 36px; height: 36px; }
    .site-header .brand small { font-size: .53rem; letter-spacing: .1em; }
    .site-header .theme-toggle { grid-column: 2; grid-row: 1; width: 42px; min-width: 42px; height: 42px; padding: 0; }
    .site-header .theme-toggle #themeLabel { display: none; }
    .site-header .theme-icon { font-size: 1.2rem; }
    .site-header .mobile-menu-toggle {
        display: inline-flex; grid-column: 3; grid-row: 1; align-items: center; justify-content: center;
        width: 42px; min-width: 42px; height: 42px; padding: 0;
        border: 1px solid var(--glass-border); border-radius: 12px;
        background: var(--glass-strong); color: var(--text); font-size: 1.15rem; cursor: pointer;
    }
    .site-header .site-nav {
        display: flex; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1400;
        width: min(360px, 88vw); height: 100dvh; max-height: 100dvh;
        overflow-y: auto; overscroll-behavior: contain;
        align-items: stretch; justify-content: flex-start; flex-direction: column; gap: 7px;
        margin: 0; padding: 88px 18px 24px; border: 1px solid var(--glass-border);
        border-radius: 22px 0 0 22px; background: var(--glass-strong); box-shadow: var(--shadow-lg);
        -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
        visibility: hidden; pointer-events: none; transform: translateX(105%);
        transition: transform .24s ease, visibility .24s ease;
    }
    .site-header .site-nav.is-open { visibility: visible; pointer-events: auto; transform: translateX(0); }
    .site-header .site-nav > a { width: 100%; min-height: 46px; justify-content: flex-start; padding: 12px 14px; white-space: normal; }
    .site-header .site-nav .nav-dropdown { width: 100%; }
    .site-header .nav-dropdown-trigger { width: 100%; max-width: none; min-height: 50px; justify-content: flex-start; padding: 7px 12px 7px 7px; }
    .site-header .nav-user-name { flex: 1; max-width: none; }
    .site-header .nav-dropdown-menu { position: static; width: 100%; max-width: none; margin-top: 7px; box-shadow: none; animation: none; }
    .site-header .site-nav .theme-toggle { display: none; }
    .mobile-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1350; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(5, 9, 18, .48); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease, visibility .24s ease; }
    .mobile-nav-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
    body.mobile-nav-open { overflow: hidden; }
    .footer-inner { align-items: flex-start; flex-direction: column; }
    .footer-copy { justify-content: flex-start; flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header *, .mobile-nav-backdrop { animation: none !important; transition: none !important; }
}


/* Mobile account dropdown visibility fix (Sixtens) */
@media (max-width: 680px) {
    .site-header .site-nav .nav-dropdown {
        display: block;
        flex: 0 0 auto;
        overflow: visible;
    }

    .site-header .site-nav .nav-dropdown-menu {
        display: none;
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        max-height: none;
        overflow: visible;
        margin: 7px 0 0;
        padding: 8px;
        border-radius: 12px;
        background: var(--panel2, var(--glass-strong));
        box-shadow: none;
        animation: none;
    }

    .site-header .site-nav .nav-dropdown-menu.is-open {
        display: grid !important;
    }

    .site-header .site-nav .nav-dropdown-menu > a,
    .site-header .site-nav .nav-dropdown-menu .dropdown-logout {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
    }
}


/* =========================================================
   SIXTENS — TOPIC, CONVERSATION & THEME POLISH
   Append at the VERY END of assets/css/app.css
========================================================= */


/* ---------------------------------------------------------
   1. SOFTER LIGHT MODE
   Less white, softer surfaces, better visual depth
--------------------------------------------------------- */

html[data-theme="light"] {
    color-scheme: light;

    --bg: #edf0f6;
    --panel: #f8f9fc;
    --panel2: #f0f2f8;
    --line: #dce1eb;

    --text: #20283a;
    --muted: #737d91;

    --field: #f8f9fc;
    --soft: #e9edf5;

    --glass: rgba(248, 249, 252, .88);
    --glass-strong: rgba(248, 249, 252, .97);
    --glass-border: rgba(48, 59, 82, .10);

    --shadow-sm: 0 5px 18px rgba(37, 48, 70, .045);
    --shadow-lg: 0 16px 42px rgba(37, 48, 70, .09);

    --focus-ring: 0 0 0 3px rgba(109, 91, 220, .14);
}

/* Keep the page background soft rather than pure white. */
html[data-theme="light"],
html[data-theme="light"] body {
    background-color: var(--bg);
}

html[data-theme="light"] body {
    background:
        radial-gradient(
            ellipse at 12% 0%,
            rgba(167, 139, 250, .055),
            transparent 43%
        ),
        radial-gradient(
            ellipse at 90% 30%,
            rgba(103, 180, 220, .045),
            transparent 40%
        ),
        var(--bg);
}


/* ---------------------------------------------------------
   2. MAKE HOMEPAGE CARDS WORK IN BOTH THEMES
--------------------------------------------------------- */

.sx-home {
    --sx-bg: var(--bg);
    --sx-card: var(--panel);
    --sx-card-hover: var(--panel2);
    --sx-border: var(--line);
    --sx-border-hover: color-mix(
        in srgb,
        var(--accent) 45%,
        var(--line)
    );
    --sx-muted: var(--muted);
    --sx-text: var(--text);
    --sx-purple: var(--accent);
    --sx-cyan: var(--cyan);
    --sx-shadow: var(--shadow-sm);
    --sx-shadow-hover: var(--shadow-lg);
}

html[data-theme="light"] .sx-topic,
html[data-theme="light"] .sx-category,
html[data-theme="light"] .sx-side-card,
html[data-theme="light"] .sx-stat,
html[data-theme="light"] .sx-empty {
    color: var(--text);
    background: var(--panel);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .sx-topic:hover,
html[data-theme="light"] .sx-category:hover {
    background: var(--panel2);
    border-color: color-mix(
        in srgb,
        var(--accent) 40%,
        var(--line)
    );
    box-shadow: var(--shadow-lg);
}

html[data-theme="light"] .sx-topic h3 a,
html[data-theme="light"] .sx-trend strong,
html[data-theme="light"] .sx-team strong {
    color: var(--text);
}

html[data-theme="light"] .sx-topic-excerpt,
html[data-theme="light"] .sx-topic-byline,
html[data-theme="light"] .sx-category p,
html[data-theme="light"] .sx-trend small,
html[data-theme="light"] .sx-team small,
html[data-theme="light"] .sx-points-card p {
    color: var(--muted);
}

html[data-theme="light"] .sx-topic-byline a,
html[data-theme="light"] .sx-category-count {
    color: #6d55c7;
}

html[data-theme="light"] .sx-topic-avatar {
    color: #6550b5;
    background: #eeebfb;
    border-color: #e0daf8;
}

html[data-theme="light"] .sx-topic-replies {
    color: var(--text);
    background: var(--panel2);
    border-color: var(--line);
}

html[data-theme="light"] .sx-category-icon,
html[data-theme="light"] .sx-team-icon,
html[data-theme="light"] .sx-points-symbol {
    color: #6550b5;
    background: #eeebfb;
    border-color: #e0daf8;
}

html[data-theme="light"] .sx-trend,
html[data-theme="light"] .sx-team {
    border-color: var(--line);
}

html[data-theme="light"] .sx-compact-btn,
html[data-theme="light"] .sx-home .sx-hero-actions .btn-soft {
    color: var(--text);
    background: var(--soft);
    border-color: var(--line);
}

html[data-theme="light"] .sx-points-card {
    background:
        radial-gradient(
            circle at top right,
            rgba(103, 180, 220, .10),
            transparent 55%
        ),
        linear-gradient(135deg, #f2effc, #edf4f7);
    border-color: #ded9f2;
}

html[data-theme="light"] .sx-points-card h3 {
    color: #29243d;
}

html[data-theme="light"] .sx-points-card p {
    color: #6e6b7d;
}


/* ---------------------------------------------------------
   3. TOPIC BODY — RESPONSIVE MEDIA
--------------------------------------------------------- */

.topic-body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.topic-body img,
.topic-body video {
    display: block;
    max-width: 100%;
    max-height: 420px;
    height: auto;
    margin: 16px auto;
    border-radius: 12px;
}

.topic-body img {
    width: auto;
    object-fit: contain;
    object-position: center;
}

.topic-body video {
    width: 100%;
    object-fit: contain;
    background: #080b12;
}

.topic-body iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 16px auto;
    border: 0;
    border-radius: 12px;
}

.topic-body figure {
    max-width: 100%;
    margin: 16px 0;
}

.topic-body figure img {
    margin: 0 auto;
}

.topic-body figcaption {
    margin-top: 7px;
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}

@media (max-width: 680px) {
    .topic-body img,
    .topic-body video {
        max-height: 320px;
        margin: 13px auto;
        border-radius: 10px;
    }

    .topic-body iframe {
        margin: 13px auto;
        border-radius: 10px;
    }
}


/* ---------------------------------------------------------
   4. TOPIC AUTHOR TOOLBAR
   Compact profile row + tidy action buttons
--------------------------------------------------------- */

.topic-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    margin: 0 0 22px;
    padding: 0 0 17px;
    border-bottom: 1px solid var(--line);
}

.topic-label-author {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
}

.topic-label-author:hover {
    color: var(--text);
}

.topic-author-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--soft);
    color: var(--accent);
    font-size: .95rem;
    font-weight: 700;
}

.topic-author-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topic-author-identity {
    display: grid;
    gap: 1px;
    min-width: 0;
    line-height: 1.35;
}

.topic-author-name {
    overflow: hidden;
    color: var(--text);
    font-size: .88rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-author-username {
    overflow: hidden;
    color: var(--muted);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-label-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 7px;
}

.topic-label-actions .inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
}

.topic-label-actions .btn {
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 9px;
    font-size: .76rem;
    line-height: 1.3;
    box-shadow: none;
}

.topic-label-actions .btn-soft {
    color: var(--text);
    background: var(--soft);
    border: 1px solid var(--line);
}

.topic-label-actions .btn-soft:hover {
    background: var(--panel2);
    border-color: var(--accent);
}

@media (max-width: 520px) {
    .topic-label {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 17px;
        padding-bottom: 14px;
    }

    .topic-label-author {
        flex-basis: 100%;
    }

    .topic-label-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .topic-author-avatar {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }
}


/* ---------------------------------------------------------
   5. TIKTOK-INSPIRED CONVERSATION / REPLIES
   Compact, social, readable — without bulky comment cards
--------------------------------------------------------- */

.replies {
    min-width: 0;
    padding: clamp(17px, 3vw, 28px);
}

.replies > h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-size: 1.12rem;
    letter-spacing: -.02em;
}

.replies > h2 .muted {
    font: 500 .78rem 'DM Sans', sans-serif;
    color: var(--muted);
}

.reply {
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
}

.reply:last-of-type {
    border-bottom: 0;
}

.reply-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    margin: 0 0 5px;
}

.reply-author {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
}

.reply-author:hover {
    color: var(--text);
}

.reply-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--soft);
    color: var(--accent);
    font-size: .76rem;
    font-weight: 700;
}

.reply-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reply-author > span:last-child {
    display: block;
    min-width: 0;
    line-height: 1.35;
}

.reply-author strong {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-size: .81rem;
    font-weight: 700;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.reply-author .muted {
    display: inline-block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .7rem;
}

.reply-head > time {
    flex: 0 0 auto;
    padding-top: 2px;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.4;
}

.reply-body {
    margin: 0 0 0 43px;
    color: var(--text);
    font-size: .88rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
    white-space: normal;
}

.reply-form {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid var(--line);
}

.reply-form label {
    gap: 8px;
    color: var(--text);
    font-size: .8rem;
    font-weight: 600;
}

.reply-form textarea {
    min-height: 88px;
    padding: 12px 14px;
    border-radius: 13px;
    background: var(--field);
    font-size: .88rem;
    line-height: 1.6;
}

.reply-form .btn {
    justify-self: start;
    min-height: 37px;
    padding: 9px 15px;
    font-size: .8rem;
}

@media (max-width: 520px) {
    .replies {
        padding: 16px;
        border-radius: 16px;
    }

    .reply {
        padding: 12px 0;
    }

    .reply-head {
        gap: 6px;
    }

    .reply-avatar {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
    }

    .reply-author {
        gap: 8px;
    }

    .reply-head > time {
        max-width: 88px;
        font-size: .63rem;
        text-align: right;
    }

    .reply-body {
        margin-left: 39px;
        font-size: .84rem;
        line-height: 1.6;
    }

    .reply-form .btn {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   6. TOPIC EDIT FORM + STATS SPACING
--------------------------------------------------------- */

.topic-edit-form {
    display: grid;
    gap: 15px;
    margin-top: 8px;
}

.topic-edit-form label {
    gap: 7px;
    color: var(--text);
    font-size: .84rem;
    font-weight: 600;
}

.topic-edit-form input,
.topic-edit-form textarea {
    font-weight: 400;
}

.topic-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
    padding-top: 13px;
    color: var(--muted);
    font-size: .76rem;
}

.topic-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.topic-reactions .btn {
    min-height: 35px;
    padding: 8px 12px;
    font-size: .78rem;
}

@media (max-width: 520px) {
    .topic-detail {
        padding: 17px;
        border-radius: 16px;
    }

    .topic-detail h1 {
        font-size: clamp(1.65rem, 7vw, 2.25rem);
        line-height: 1.2;
    }

    .topic-body {
        font-size: .94rem;
        line-height: 1.75;
    }

    .topic-stats {
        font-size: .72rem;
    }

    .topic-reactions .btn {
        flex: 1 1 auto;
    }
}


/* ---------------------------------------------------------
   7. THEME-AWARE SHARED CARDS
--------------------------------------------------------- */

.side-card,
.form-card,
.auth-card,
.profile-card,
.admin-panel,
.topic-detail,
.replies,
.team-card,
.install-card,
.topic-composer {
    color: var(--text);
    border-color: var(--glass-border);
    background: linear-gradient(
        145deg,
        var(--glass-strong),
        var(--glass)
    );
    box-shadow: var(--shadow-sm);
}

/* Keep form controls and dropdowns legible in either theme. */
input,
textarea,
select {
    color: var(--text);
    background: var(--field);
    border-color: var(--line);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
}

.btn-soft {
    color: var(--text);
    background: var(--soft);
    border-color: var(--line);
}

.notice {
    color: var(--text);
    background: var(--panel2);
    border-color: var(--line);
}

@media (prefers-reduced-motion: reduce) {
    .topic-card,
    .team-card,
    .topic-label-actions .btn,
    .reply,
    .reply-form .btn {
        transition: none;
    }
}


/* =========================================================
   SIXTENS — REPLY MENTION AUTOCOMPLETE
========================================================= */

.mention-input-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
}

.mention-input-wrapper > textarea {
    display: block;
    width: 100%;
}

.mention-autocomplete {
    position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);

    max-height: 280px;
    overflow-y: auto;

    padding: 6px;
    border: 1px solid var(--border-color, rgba(255,255,255,.12));
    border-radius: 14px;

    background: var(--card-bg, #111827);
    color: var(--text-color, #f3f4f6);

    box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mention-autocomplete[hidden] {
    display: none !important;
}

.mention-option {
    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 10px;

    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.mention-option:hover,
.mention-option.is-active {
    background: rgba(124, 92, 255, .15);
}

.mention-avatar {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 50%;

    background: linear-gradient(135deg, #7957ff, #328bff);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.mention-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mention-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.mention-name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-username {
    overflow: hidden;
    color: var(--muted-color, #9ca3af);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-empty {
    padding: 14px 12px;
    color: var(--muted-color, #9ca3af);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 680px) {
    .mention-autocomplete {
        max-height: 240px;
        border-radius: 12px;
    }

    .mention-option {
        padding: 9px;
    }
}


/* Comment threading + compact AJAX composer patch */
.reply-main { padding-bottom: 12px; }
.reply-children { margin: 10px 0 0 43px; padding-left: 14px; border-left: 2px solid #a78bfa55; }
.reply-child { padding: 9px 0; border-bottom: 0; }
.reply-child .reply-avatar { width: 29px; height: 29px; flex-basis: 29px; }
.reply-child .reply-body { margin-left: 38px; }
.reply-action, .reply-cancel { border: 0; padding: 4px 0; background: transparent; color: var(--cyan); font: 600 .78rem 'DM Sans',sans-serif; cursor: pointer; }
.reply-action { margin: 6px 0 0 43px; }
.reply-inline-form { margin: 8px 0 10px 43px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #0b1220aa; }
.reply-inline-form[hidden] { display: none !important; }
.reply-inline-form textarea { min-height: 62px; }
.reply-form-actions { display: flex; align-items: center; gap: 12px; }
.reply-form-message { margin: 0; color: var(--muted); font-size: .78rem; }
.reply-form-message.is-error { color: #fca5a5; }
.reply-new { animation: reply-enter .28s ease-out; }
@keyframes reply-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width:520px) { .reply-children { margin-left: 14px; padding-left: 9px; } .reply-inline-form { margin-left: 0; } .reply-action { margin-left: 38px; } }
@media(prefers-reduced-motion:reduce) { .reply-new { animation: none; } }


/* Patch: final mobile navigation and compact threaded comment overrides. */
@media (max-width:760px) {
  .site-header .mobile-menu-toggle { display:inline-flex !important; align-items:center; justify-content:center; cursor:pointer; position:relative; z-index:1002; }
  .site-header .site-nav { display:none; }
  .site-header .site-nav.is-open { display:flex !important; visibility:visible; opacity:1; pointer-events:auto; transform:none; position:relative; z-index:1001; }
}
.reply-child { margin-left:clamp(16px,5vw,48px); padding-left:14px; border-left:2px solid var(--line); }
.reply-mention { color:var(--accent,#67e8f9); font-weight:700; text-decoration:none; }
.reply-mention:hover { text-decoration:underline; }