/* PABC Nexus classic community interface. Responsive, keyboard-conscious, and intentionally CSS-only. */
:root{
color-scheme:light;
--blue:#2875d7;
--blue-dark:#195cb3;
--blue-soft:#eaf3ff;
--navy:#132b4d;
--ink:#1d2a3b;
--muted:#6b788b;
--line:#e3e9f1;
--surface:#fff;
--canvas:#f3f6fb;
--green:#1b9b69;
--red:#c94040;
--gold:#d79b27;
--violet:#7663d9;
--shadow:0 8px 28px rgba(30,58,95,.08);
--radius:15px;
--sidebar-width:252px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
background:var(--canvas);
color:var(--ink);
font-size:14px;
line-height:1.5}
button,input,textarea,select{
font:inherit}
button,a{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer}
button:disabled{
cursor:not-allowed;
opacity:.55}
a{
color:inherit;
text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:3px solid rgba(40,117,215,.35);
outline-offset:2px}
.hidden,[hidden]{
display:none!important}
.skip-link{
position:absolute;
z-index:1000;
left:12px;
top:-60px;
padding:10px 14px;
background:#fff;
border-radius:8px}
.skip-link:focus{
top:12px}

.app-shell{
min-height:100vh}
.sidebar{
position:fixed;
z-index:50;
inset:0 auto 0 0;
width:var(--sidebar-width);
display:flex;
flex-direction:column;
background:#fff;
border-right:1px solid var(--line);
padding:19px 13px 12px;
overflow-y:auto;
scrollbar-width:thin}
.brand{
display:flex;
align-items:center;
gap:11px;
padding:4px 9px 22px}
.brand-mark{
width:42px;
height:42px;
display:grid;
place-items:center;
flex:none;
border-radius:13px;
background:linear-gradient(145deg,#3588ef,#1754a8);
box-shadow:0 5px 12px rgba(40,117,215,.25);
color:white;
font-size:24px;
font-weight:850;
letter-spacing:-2px}
.brand-copy{
display:flex;
flex-direction:column;
min-width:0}
.brand-copy b{
font-size:16px;
letter-spacing:-.35px;
color:#182a40}
.brand-copy small{
font-size:10px;
color:var(--muted);
white-space:nowrap}
.side-label{
margin:16px 9px 7px;
color:#8996a8;
font-size:10px;
font-weight:800;
letter-spacing:1.15px}
.side-label-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:22px}
.side-mini{
font-size:8px;
letter-spacing:.6px;
color:#a4afbd}
.nav-item{
width:100%;
display:flex;
align-items:center;
gap:10px;
border:0;
border-radius:9px;
background:transparent;
color:#536277;
text-align:left;
padding:10px 11px;
margin:2px 0;
font-size:12.5px;
font-weight:650;
transition:background .16s,color .16s}
.nav-item:hover{
background:#f3f7fc;
color:var(--blue)}
.nav-item.active{
background:var(--blue-soft);
color:#1b65be}
.nav-icon{
width:18px;
display:inline-grid;
place-items:center;
font-size:17px;
line-height:1;
color:#7f8da1}
.nav-item.active .nav-icon{
color:var(--blue)}
.nav-count{
margin-left:auto;
color:#8b9aaf;
font-size:9px;
font-weight:750}
.live-dot,.status-dot{
width:7px;
height:7px;
border-radius:50%;
background:#20b779;
box-shadow:0 0 0 3px rgba(32,183,121,.12);
margin-left:auto}
.channel-list{
display:grid;
gap:2px}
.channel-item{
width:100%;
display:flex;
align-items:center;
gap:8px;
border:0;
background:transparent;
color:#69788d;
border-radius:8px;
padding:7px 12px 7px 18px;
text-align:left;
font-size:12px;
transition:background .15s,color .15s}
.channel-item>span:first-child{
font-size:16px;
color:#9aa6b7}
.channel-item:hover{
background:#f4f7fb;
color:#1c5eac}
.channel-item.active{
background:#edf4ff;
color:#1e67ba;
font-weight:750}
.channel-item.active>span:first-child{
color:var(--blue)}
.channel-lock{
margin-left:auto;
font-size:13px!important;
color:#a0adbd!important}
.external-nav{
font-size:11.5px}
.sidebar-bottom{
margin-top:auto;
padding:16px 10px 5px;
border-top:1px solid #edf0f5;
display:flex;
align-items:center;
gap:9px;
color:#758397;
font-size:11px}
.sidebar-bottom .status-dot{
margin-left:0}
.sidebar-bottom.offline .status-dot{
background:#d5a12f;
box-shadow:0 0 0 3px rgba(213,161,47,.13)}
.mobile-close{
display:none}
.mobile-scrim{
display:none}

.main{
min-height:100vh;
margin-left:var(--sidebar-width)}
.topbar{
position:sticky;
top:0;
z-index:30;
height:68px;
display:flex;
align-items:center;
gap:19px;
padding:0 29px;
background:rgba(255,255,255,.95);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--line)}
.topbar-wordmark{
font-size:19px;
font-weight:900;
letter-spacing:-1px;
color:#1a3150}
.topbar-wordmark span{
font-size:9px;
letter-spacing:1.2px;
color:#6c7d91;
margin-left:3px}
.topbar-breadcrumb{
display:flex;
align-items:center;
gap:11px;
color:#a2adbb;
font-size:13px}
.topbar-breadcrumb b{
color:#43546b;
font-weight:700}
.top-actions{
margin-left:auto;
display:flex;
align-items:center;
gap:15px}
.top-link{
font-size:11px;
font-weight:650;
color:#6a7a8f;
white-space:nowrap}
.top-link:hover{
color:var(--blue)}
.quiet-btn{
border:1px solid #dce8f8;
background:#f4f8ff;
color:#2269bd;
border-radius:9px;
padding:9px 12px;
font-size:11px;
font-weight:750;
white-space:nowrap}
.quiet-btn:hover{
background:#e8f2ff}
.account-button{
width:35px;
height:35px;
border:0;
border-radius:50%;
display:grid;
place-items:center;
background:#e5efff;
color:#1d67bb;
font-weight:850;
font-size:13px;
overflow:hidden}
.account-button img{
width:100%;
height:100%;
object-fit:cover}
.account-initial{
display:grid;
place-items:center;
width:100%;
height:100%}
.icon-btn{
width:35px;
height:35px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:9px;
background:#fff;
color:#66768a;
font-size:21px;
line-height:1}
.menu-toggle{
display:none}
.page-wrap{
max-width:1480px;
margin:0 auto;
padding:28px 30px 16px}
.welcome-banner{
position:relative;
min-height:244px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
overflow:hidden;
padding:32px 38px;
border-radius:18px;
background:linear-gradient(118deg,#123c73 0%,#1c5da9 54%,#2b82e3 100%);
color:#fff;
box-shadow:0 10px 25px rgba(23,79,144,.16)}
.welcome-banner:before{
content:"";
position:absolute;
width:460px;
height:460px;
right:7%;
top:-250px;
border:1px solid rgba(255,255,255,.12);
border-radius:50%}
.welcome-banner:after{
content:"";
position:absolute;
width:350px;
height:350px;
right:11%;
top:-185px;
border:1px solid rgba(255,255,255,.12);
border-radius:50%}
.welcome-copy{
position:relative;
z-index:2;
max-width:650px}
.eyebrow{
display:flex;
align-items:center;
gap:7px;
color:#8396ad;
font-size:9px;
font-weight:850;
letter-spacing:1.25px}
.welcome-banner .eyebrow{
color:#c0dcff}
.eyebrow-dot{
width:6px;
height:6px;
border-radius:50%;
background:#70b4ff}
.welcome-banner h1{
font-size:32px;
line-height:1.12;
letter-spacing:-1.4px;
margin:12px 0 12px;
font-weight:850}
.welcome-banner h1 span{
color:#b6d7ff}
.welcome-banner p{
max-width:570px;
margin:0;
color:#d4e6fa;
font-size:12.5px;
line-height:1.75}
.welcome-actions{
display:flex;
align-items:center;
gap:10px;
margin-top:22px}
.primary-btn,.secondary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:39px;
border-radius:9px;
padding:10px 14px;
font-size:11px;
font-weight:800;
border:1px solid transparent;
transition:transform .15s,background .15s}
.primary-btn{
background:#fff;
color:#1859a5;
box-shadow:0 4px 10px rgba(0,0,0,.08)}
.primary-btn:hover{
background:#eaf4ff;
transform:translateY(-1px)}
.secondary-btn{
border-color:rgba(255,255,255,.28);
background:rgba(255,255,255,.08);
color:#fff}
.secondary-btn:hover{
background:rgba(255,255,255,.16)}
.hero-art{
position:relative;
z-index:1;
flex:0 0 290px;
height:205px;
margin-right:5%;
display:grid;
place-items:center;
opacity:.92}
.orbit{
position:absolute;
border:1px solid rgba(191,221,255,.45);
border-radius:50%;
transform:rotate(-22deg)}
.orbit-one{
width:240px;
height:105px}
.orbit-two{
width:200px;
height:155px;
transform:rotate(48deg)}
.orbit-three{
width:180px;
height:180px;
border-color:rgba(191,221,255,.23)}
.orbit-core{
width:75px;
height:75px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.5);
border-radius:50%;
background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),rgba(255,255,255,.04));
box-shadow:0 0 55px rgba(147,198,255,.22);
font-family:Georgia,serif;
font-size:39px;
color:white}
.orbit-label{
position:absolute;
padding:4px 7px;
border:1px solid rgba(255,255,255,.22);
border-radius:5px;
background:rgba(12,50,96,.35);
font-size:8px;
font-weight:800;
letter-spacing:1px;
color:#d7eaff}
.label-one{
top:18px;
left:48px}
.label-two{
right:-12px;
top:91px}
.label-three{
bottom:15px;
left:74px}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:13px;
margin:18px 0 27px}
.stat-card{
position:relative;
min-height:112px;
padding:15px 17px 12px;
background:#fff;
border:1px solid var(--line);
border-radius:13px;
box-shadow:0 2px 7px rgba(31,60,99,.02)}
.stat-icon{
position:absolute;
right:15px;
top:14px;
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:9px;
font-size:16px}
.blue-icon{
background:#e8f2ff;
color:#2875d7}
.violet-icon{
background:#f0edff;
color:#7866d6}
.green-icon{
background:#e5f8ef;
color:#239d6a}
.gold-icon{
background:#fff4dc;
color:#bf8a21}
.stat-card>span{
display:block;
color:#7a899c;
font-size:10.5px;
font-weight:700}
.stat-card>b{
display:block;
margin-top:6px;
font-size:25px;
line-height:1.2;
letter-spacing:-.6px;
color:#203550}
.stat-card small{
display:block;
margin-top:6px;
color:#9aa5b3;
font-size:9px}
.stat-card .status-value{
font-size:19px;
color:#21875d}

.content-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 292px;
align-items:start;
gap:24px}
.content-grid.single-view{
grid-template-columns:minmax(0,1fr)}
.content-grid.single-view .right-column{
display:none}
.primary-column{
min-width:0}
.section-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin:0 0 16px}
.section-heading h2{
margin:4px 0 0;
font-size:21px;
letter-spacing:-.65px;
color:#1b304b}
.text-btn{
border:0;
background:transparent;
color:#2670c6;
font-size:10.5px;
font-weight:750;
padding:7px 0}
.text-btn:hover{
color:#154b8b;
text-decoration:underline}
.text-btn span{
font-size:16px;
vertical-align:-1px}
.right-column{
display:grid;
gap:14px;
min-width:0}
.panel{
padding:17px 17px 15px;
border:1px solid var(--line);
border-radius:13px;
background:#fff;
box-shadow:0 2px 7px rgba(31,60,99,.025)}
.panel-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px}
.panel-heading b{
font-size:12.5px;
color:#263a55}
.panel-symbol{
font-size:17px;
color:#7f94ad}
.panel p{
margin:0 0 13px;
color:#77869a;
font-size:10.5px;
line-height:1.75}
.wide-primary,.wide-secondary{
width:100%;
min-height:35px;
border-radius:8px;
font-size:10.5px;
font-weight:800;
margin-top:7px}
.wide-primary{
border:1px solid var(--blue);
background:var(--blue);
color:white}
.wide-primary:hover{
background:var(--blue-dark)}
.wide-secondary{
border:1px solid #dfe7f1;
background:#fff;
color:#58708d}
.wide-secondary:hover{
background:#f5f8fc}
.small-status{
font-size:8px;
font-weight:850;
letter-spacing:.7px;
color:#2473c9;
background:#eaf3ff;
padding:4px 6px;
border-radius:4px}
.reference-link,.network-link{
width:100%;
display:flex;
align-items:center;
gap:10px;
text-align:left;
border:0;
background:transparent;
padding:10px 0;
border-bottom:1px solid #edf1f6}
.reference-link:last-of-type,.network-link:last-child{
border-bottom:0}
.reference-link:hover b,.network-link:hover b{
color:var(--blue)}
.reference-icon,.network-icon{
width:32px;
height:32px;
display:grid;
place-items:center;
flex:none;
border-radius:9px;
background:#e9f2ff;
color:#2875d7;
font-size:16px}
.reference-link>span:nth-child(2),.network-link>span:nth-child(2){
display:flex;
flex-direction:column;
min-width:0}
.reference-link b,.network-link b{
font-size:10.5px;
color:#31445d}
.reference-link small,.network-link small{
margin-top:2px;
color:#8a98a9;
font-size:9px}
.reference-link .arrow,.network-link .arrow{
margin-left:auto;
color:#9eabba;
font-size:20px}
.panel-footnote{
border-top:1px solid #edf1f6;
padding-top:9px;
margin-top:5px!important;
font-size:9px!important}
.panel-footnote b{
color:#55708e}
.network-icon.phi{
background:#f0ecff;
color:#7863d5}
.network-icon.logic{
background:#e7f8ef;
color:#1e9a68}
.ai-spark{
font-size:19px;
color:#8168d9}
.ai-suggestions{
display:flex;
flex-wrap:wrap;
gap:6px;
margin:8px 0 10px}
.suggestion{
border:1px solid #e3e8f3;
border-radius:6px;
background:#fafbfe;
color:#61718a;
font-size:9px;
padding:6px 8px}
.suggestion:hover{
border-color:#c2d7f4;
color:#2368b6}
.ai-input-wrap{
display:flex;
align-items:flex-end;
gap:6px;
padding:6px;
border:1px solid #dfe6f0;
border-radius:9px;
background:#fafcff}
.ai-input-wrap textarea{
resize:vertical;
min-height:40px;
max-height:130px;
flex:1;
min-width:0;
border:0;
outline:none;
background:transparent;
color:#263950;
font-size:11px;
padding:6px}
.ai-input-wrap textarea:focus-visible{
outline:none}
.send-btn{
width:31px;
height:31px;
display:grid;
place-items:center;
flex:none;
border:0;
border-radius:7px;
background:var(--blue);
color:white}
.send-btn:hover{
background:var(--blue-dark)}
.ai-response{
margin-top:11px;
padding:10px;
border-radius:8px;
background:#f5f8fd;
border:1px solid #e5edf7;
color:#53647b;
font-size:10.5px;
line-height:1.7;
white-space:pre-wrap;
overflow-wrap:anywhere;
max-height:330px;
overflow:auto}
.ai-open-full{
margin-top:5px}
.loading-card,.empty-state{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:130px;
border:1px dashed #d5dfeb;
border-radius:13px;
background:rgba(255,255,255,.65);
color:#8391a4;
font-size:12px}
.empty-state{
flex-direction:column;
text-align:center;
padding:25px}
.empty-state strong{
color:#3b4f68;
font-size:14px}
.empty-state p{
max-width:440px;
margin:0;
color:#7f8da0;
font-size:11px}
.empty-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:13px;
background:#e9f2ff;
color:#2b76d0;
font-size:22px}
.spinner{
width:16px;
height:16px;
border:2px solid #d9e7f7;
border-top-color:var(--blue);
border-radius:50%;
animation:spin .7s linear infinite}
@keyframes spin{
to{
transform:rotate(360deg)}
}

.thread-list{
display:grid;
gap:11px}
.thread-card{
position:relative;
padding:17px 18px 14px;
border:1px solid var(--line);
border-radius:13px;
background:#fff;
transition:box-shadow .16s,border-color .16s}
.thread-card:hover{
border-color:#d1e0f2;
box-shadow:0 5px 15px rgba(34,77,130,.05)}
.thread-card.is-pinned{
border-left:3px solid #e2ad41;
padding-left:16px}
.thread-card h3{
margin:0 0 7px;
font-size:14px;
line-height:1.4;
letter-spacing:-.18px;
color:#243b57}
.thread-card h3 button{
padding:0;
border:0;
background:transparent;
color:inherit;
text-align:left;
font-weight:800}
.thread-card h3 button:hover{
color:var(--blue)}
.thread-card>p{
margin:0 0 12px;
color:#728197;
font-size:11px;
line-height:1.75;
white-space:pre-wrap;
overflow-wrap:anywhere}
.thread-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:11px;
color:#91a0b1;
font-size:9px}
.thread-meta .author{
display:inline-flex;
align-items:center;
gap:5px;
color:#61758e;
font-weight:700}
.mini-avatar{
width:22px;
height:22px;
display:inline-grid;
place-items:center;
flex:none;
border-radius:50%;
background:#e5efff;
color:#2b70c6;
font-size:9px;
font-weight:850;
overflow:hidden}
.mini-avatar img{
width:100%;
height:100%;
object-fit:cover}
.thread-meta .thread-open{
margin-left:auto;
color:#2a70c6;
font-weight:800;
border:0;
background:transparent;
font-size:9.5px}
.thread-meta .thread-open:hover{
text-decoration:underline}
.pin-badge{
color:#a57a22;
background:#fff5df}
.view-toolbar{
display:flex;
align-items:center;
gap:9px;
margin-bottom:14px}
.view-toolbar .form-control{
flex:1;
min-width:0}
.primary-small,.secondary-small,.danger-small{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:34px;
border-radius:8px;
padding:8px 12px;
font-size:10.5px;
font-weight:800;
border:1px solid transparent}
.primary-small{
background:var(--blue);
color:#fff}
.primary-small:hover{
background:var(--blue-dark)}
.secondary-small{
background:#fff;
border-color:#dce5f0;
color:#58708b}
.secondary-small:hover{
background:#f5f8fc}
.danger-small{
background:#fff1f1;
border-color:#f5d6d6;
color:#b83434}
.danger-small:hover{
background:#ffe6e6}
.muted{
color:#8a97a9;
font-size:10px;
line-height:1.7}
.form-control{
width:100%;
min-height:38px;
border:1px solid #dce4ee;
border-radius:8px;
background:#fff;
color:#263950;
padding:9px 11px;
font-size:11px}
.form-control::placeholder{
color:#a1adbb}
.form-control:focus{
border-color:#9ec4f3;
box-shadow:0 0 0 3px rgba(40,117,215,.09);
outline:none}
.form-label{
display:block;
margin:12px 0 6px;
color:#4f6077;
font-size:10.5px;
font-weight:800}
.form-actions{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:8px;
margin-top:15px}
.form-note{
margin:8px 0;
color:#8996a7;
font-size:9.5px;
line-height:1.65}
.prose{
font-size:12px;
line-height:1.8;
color:#53647b;
white-space:pre-wrap;
overflow-wrap:anywhere}
.prose h3{
font-size:14px;
color:#293f5b}
.toolbar-group{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap}
.content-note{
padding:11px 13px;
border-radius:8px;
background:#f2f7ff;
border:1px solid #dfebfa;
color:#61748d;
font-size:10px;
line-height:1.7;
margin-bottom:13px}
.rule-list{
display:grid;
gap:9px}
.rule-item{
padding:13px 14px;
background:#fff;
border:1px solid var(--line);
border-radius:10px}
.rule-item h3{
margin:0 0 5px;
font-size:12px;
color:#2b405a}
.rule-item p{
margin:0;
color:#6e7d92;
font-size:10.5px;
line-height:1.75}
.rule-number{
display:inline-grid;
place-items:center;
width:22px;
height:22px;
margin-right:6px;
border-radius:7px;
background:#eaf3ff;
color:#2670c6;
font-size:10px}
.member-list{
display:grid;
gap:8px}
.member-row{
display:flex;
align-items:center;
gap:10px;
padding:11px 12px;
border:1px solid #e6ebf2;
border-radius:10px;
background:#fff}
.member-info{
flex:1;
min-width:0}
.member-info b{
display:block;
color:#31455e;
font-size:11px}
.member-info small{
display:block;
color:#8997a9;
font-size:9px;
margin-top:2px;
overflow-wrap:anywhere}
.role-pill{
display:inline-block;
padding:4px 7px;
border-radius:5px;
background:#edf2f8;
color:#687991;
font-size:8px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.3px}
.role-pill.owner{
background:#fff0d5;
color:#986516}
.role-pill.admin{
background:#ffe7e7;
color:#b43b3b}
.role-pill.moderator{
background:#e9f1ff;
color:#2469b7}
.role-pill.researcher,.role-pill.judge{
background:#f0ebff;
color:#7059c4}
.status-pill{
font-size:8px;
font-weight:800;
color:#1b9665}
.status-pill.suspended,.status-pill.banned{
color:#c33c3c}
.staff-actions{
display:flex;
align-items:center;
gap:5px;
flex-wrap:wrap}
.staff-actions select{
max-width:125px;
min-height:30px;
padding:4px 6px;
font-size:9px}
.report-row,.audit-row{
padding:12px;
border:1px solid #e3eaf2;
border-radius:9px;
background:#fff;
margin-bottom:8px}
.report-row h4{
margin:0 0 5px;
font-size:11px;
color:#2c415c}
.report-row p,.audit-row p{
margin:0;
color:#728197;
font-size:10px;
line-height:1.7}
.report-actions{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-top:9px}
.chat-layout{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:0;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
overflow:hidden;
min-height:540px}
.chat-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:16px 18px;
border-bottom:1px solid #e7edf4;
background:#fff}
.chat-channel-title{
display:flex;
align-items:center;
gap:10px}
.chat-hash{
width:35px;
height:35px;
display:grid;
place-items:center;
border-radius:10px;
background:#eaf3ff;
color:#2875d7;
font-size:21px;
font-weight:800}
.chat-channel-title h3{
margin:0;
color:#2a3f5a;
font-size:14px}
.chat-channel-title p{
margin:2px 0 0;
color:#8b98a9;
font-size:9.5px}
.chat-status{
display:flex;
align-items:center;
gap:6px;
color:#229869;
font-size:9px;
font-weight:800}
.chat-messages{
display:flex;
flex-direction:column;
gap:3px;
min-height:350px;
max-height:55vh;
overflow:auto;
padding:16px 18px;
background:#fbfcfe}
.chat-message{
display:flex;
align-items:flex-start;
gap:9px;
padding:7px 0}
.chat-message:hover{
background:#f5f8fc}
.chat-message-body{
flex:1;
min-width:0}
.chat-message-head{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap}
.chat-message-head b{
font-size:10.5px;
color:#324860}
.chat-message-head time{
font-size:8.5px;
color:#a0abba}
.chat-message-body p{
margin:3px 0 0;
color:#617188;
font-size:11px;
line-height:1.7;
white-space:pre-wrap;
overflow-wrap:anywhere}
.chat-composer{
display:flex;
align-items:flex-end;
gap:8px;
padding:13px;
border-top:1px solid #e7edf4;
background:#fff}
.chat-composer textarea{
flex:1;
min-width:0;
min-height:42px;
max-height:130px;
resize:vertical;
border:1px solid #dce5f0;
border-radius:9px;
padding:10px;
color:#30445e;
font-size:11px}
.chat-composer .primary-small{
min-height:42px}
.chat-notice{
padding:8px 14px;
background:#f6f9fe;
border-top:1px solid #edf1f7;
color:#91a0b2;
font-size:9px}
.ai-workspace{
display:grid;
grid-template-columns:minmax(0,1fr) 230px;
gap:14px}
.ai-chat-window{
display:flex;
flex-direction:column;
min-height:580px;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
overflow:hidden}
.ai-chat-head{
padding:15px 18px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between}
.ai-chat-head b{
font-size:13px;
color:#2a3f5a}
.ai-chat-head small{
display:block;
margin-top:2px;
color:#8d9aad;
font-size:9px}
.ai-chat-log{
flex:1;
display:flex;
flex-direction:column;
gap:12px;
min-height:400px;
max-height:62vh;
overflow:auto;
padding:18px;
background:#fbfcff}
.ai-bubble{
max-width:90%;
padding:11px 13px;
border-radius:11px;
font-size:11px;
line-height:1.8;
white-space:pre-wrap;
overflow-wrap:anywhere}
.ai-bubble.user{
align-self:flex-end;
background:#eaf3ff;
color:#31577f;
border-bottom-right-radius:3px}
.ai-bubble.assistant{
align-self:flex-start;
background:#fff;
border:1px solid #e7edf5;
color:#53647a;
border-bottom-left-radius:3px}
.ai-bubble .bubble-label{
display:block;
margin-bottom:4px;
color:#8292a8;
font-size:8px;
font-weight:850;
letter-spacing:.8px}
.ai-composer{
padding:13px;
border-top:1px solid var(--line);
display:flex;
gap:8px;
align-items:flex-end}
.ai-composer textarea{
flex:1;
min-width:0;
min-height:44px;
max-height:160px;
resize:vertical;
border:1px solid #dce5f0;
border-radius:9px;
padding:10px;
font-size:11px}
.ai-side-card{
padding:15px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
height:max-content}
.ai-side-card h3{
margin:0 0 8px;
color:#334962;
font-size:11px}
.ai-side-card p{
color:#7d8b9e;
font-size:10px;
line-height:1.75}
.ai-side-card button{
width:100%;
text-align:left;
border:1px solid #e1e8f1;
background:#fff;
border-radius:8px;
padding:8px;
margin-top:6px;
color:#5e7088;
font-size:9.5px}
.ai-side-card button:hover{
background:#f4f8ff;
color:#236bc0}

.modal-backdrop{
position:fixed;
z-index:100;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(16,31,53,.45);
backdrop-filter:blur(5px)}
.modal{
width:min(100%,660px);
max-height:min(90vh,900px);
overflow:auto;
border-radius:16px;
background:#fff;
border:1px solid rgba(255,255,255,.7);
box-shadow:0 24px 90px rgba(8,25,48,.25);
padding:21px 23px 23px}
.modal.modal-wide{
width:min(100%,850px)}
.modal-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:16px}
.modal-head h2{
margin:4px 0 0;
color:#223852;
font-size:20px;
letter-spacing:-.5px}
.modal-close{
flex:none}
.modal .eyebrow{
font-size:8px}
.modal-divider{
height:1px;
background:#edf1f6;
margin:16px 0}
.auth-switch{
display:flex;
gap:5px;
padding:4px;
border-radius:9px;
background:#f1f5fa;
margin-bottom:14px}
.auth-switch button{
flex:1;
border:0;
border-radius:7px;
background:transparent;
padding:8px;
color:#77879c;
font-size:10.5px;
font-weight:800}
.auth-switch button.active{
background:#fff;
color:#286cbd;
box-shadow:0 1px 5px rgba(31,58,95,.1)}
.google-auth-wrap{
display:flex;
justify-content:center;
min-height:42px;
margin:11px 0}
.auth-error{
padding:9px 11px;
border-radius:8px;
background:#fff0f0;
color:#b63838;
border:1px solid #f2dada;
font-size:10px;
margin:10px 0}
.auth-success{
padding:9px 11px;
border-radius:8px;
background:#edfaf3;
color:#1a8b5d;
border:1px solid #d5f0e2;
font-size:10px;
margin:10px 0}
.thread-detail-content{
padding:12px 0}
.thread-detail-body{
padding:14px 15px;
border:1px solid #e8edf4;
border-radius:10px;
background:#fcfdff;
margin:12px 0 15px}
.thread-detail-actions{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
margin:12px 0}
.reply-list{
display:grid;
gap:9px;
margin:10px 0 15px}
.reply-card{
display:flex;
gap:9px;
padding:11px;
border:1px solid #e8edf4;
border-radius:9px;
background:#fff}
.reply-card .reply-body{
flex:1;
min-width:0}
.reply-card .reply-head{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap}
.reply-card .reply-head b{
font-size:10px;
color:#3b4f68}
.reply-card .reply-head time{
font-size:8.5px;
color:#9aa6b5}
.reply-card p{
margin:4px 0 0;
font-size:10.5px;
color:#66778d;
line-height:1.75;
white-space:pre-wrap;
overflow-wrap:anywhere}
.reply-card .reply-delete{
margin-left:auto;
border:0;
background:transparent;
color:#bf4a4a;
font-size:9px}
.toast{
position:fixed;
z-index:200;
bottom:22px;
left:50%;
transform:translate(-50%,20px);
opacity:0;
pointer-events:none;
max-width:min(92vw,560px);
padding:11px 16px;
border-radius:10px;
background:#193a62;
color:#fff;
box-shadow:0 9px 30px rgba(13,34,61,.22);
font-size:11px;
line-height:1.6;
transition:opacity .2s,transform .2s}
.toast.show{
opacity:1;
transform:translate(-50%,0)}
.site-footer{
display:flex;
align-items:center;
gap:15px;
flex-wrap:wrap;
padding:26px 2px 10px;
color:#9aa6b5;
font-size:9px}
.site-footer span:nth-child(2){
margin-left:auto}
.site-footer a{
color:#6e88a8}
.site-footer a:hover{
color:var(--blue)}
.system-note{
padding:12px 14px;
border:1px solid #dce9fa;
border-radius:9px;
background:#f4f8ff;
color:#647891;
font-size:10px;
line-height:1.7;
margin-bottom:12px}
.danger-zone{
padding:12px;
border:1px solid #f0dada;
background:#fff8f8;
border-radius:10px}
.danger-zone h3{
margin:0 0 5px;
font-size:11px;
color:#ae4141}
.empty-inline{
color:#95a2b2;
font-size:10px;
padding:10px 0}
.table-scroll{
overflow:auto}
.data-table{
width:100%;
border-collapse:collapse;
font-size:10px}
.data-table th,.data-table td{
padding:9px;
border-bottom:1px solid #e8edf4;
text-align:left;
vertical-align:top}
.data-table th{
color:#74849a;
font-size:9px;
text-transform:uppercase;
letter-spacing:.5px}
.data-table td{
color:#53657c}
.modal code{
padding:2px 4px;
border-radius:4px;
background:#f0f4f9;
color:#435b78}

@media(min-width:1600px){
.page-wrap{
padding-left:38px;
padding-right:38px}
.content-grid{
grid-template-columns:minmax(0,1fr) 320px;
gap:28px}
.welcome-banner{
padding-left:44px}
.hero-art{
margin-right:9%}
}

@media(max-width:1200px){
:root{
--sidebar-width:225px}
.topbar{
padding:0 20px;
gap:13px}
.page-wrap{
padding:23px 20px 14px}
.top-link{
display:none}
.content-grid{
grid-template-columns:minmax(0,1fr) 270px;
gap:16px}
.welcome-banner{
padding:29px}
.hero-art{
flex-basis:230px;
margin-right:0}
.welcome-banner h1{
font-size:29px}
.stats-grid{
gap:9px}
.stat-card{
padding:13px}
.ai-workspace{
grid-template-columns:minmax(0,1fr) 200px}
}

@media(max-width:930px){
:root{
--sidebar-width:250px}
.sidebar{
transform:translateX(-105%);
transition:transform .23s ease;
box-shadow:12px 0 40px rgba(20,43,73,.12)}
.sidebar.open{
transform:translateX(0)}
.mobile-close{
display:block;
margin:0 7px 6px auto;
border:0;
background:#f2f6fb;
border-radius:7px;
padding:6px 9px;
color:#65758a;
font-size:10px}
.mobile-scrim.show{
display:block;
position:fixed;
z-index:45;
inset:0;
background:rgba(18,33,53,.35)}
.main{
margin-left:0}
.menu-toggle{
display:grid}
.topbar{
height:62px}
.content-grid{
grid-template-columns:minmax(0,1fr)}
.right-column{
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start}
.ask-panel{
grid-column:span 2}
.welcome-banner{
min-height:230px}
.hero-art{
opacity:.55;
position:absolute;
right:8px;
top:10px}
.welcome-copy{
max-width:75%}
.ai-workspace{
grid-template-columns:minmax(0,1fr)}
}

@media(max-width:640px){
.topbar{
padding:0 12px;
gap:9px}
.topbar-wordmark{
font-size:16px}
.topbar-wordmark span{
display:none}
.topbar-breadcrumb{
gap:6px;
font-size:11px}
.top-actions{
gap:7px}
.quiet-btn{
padding:8px;
font-size:0}
.quiet-btn:after{
content:"✧ AI";
font-size:10px}
.account-button{
width:32px;
height:32px}
.page-wrap{
padding:15px 12px 10px}
.welcome-banner{
padding:23px 20px;
border-radius:14px;
min-height:260px}
.welcome-copy{
max-width:100%}
.welcome-banner h1{
font-size:28px}
.welcome-banner p{
max-width:390px;
font-size:11.5px}
.hero-art{
right:-92px;
top:53px;
transform:scale(.78);
opacity:.24}
.welcome-actions{
flex-wrap:wrap;
margin-top:18px}
.primary-btn,.secondary-btn{
min-height:37px;
padding:9px 11px}
.stats-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin:12px 0 21px}
.stat-card{
min-height:100px;
padding:12px}
.stat-card>b{
font-size:23px}
.stat-icon{
right:10px;
top:10px;
width:26px;
height:26px}
.section-heading h2{
font-size:19px}
.section-heading{
align-items:flex-end}
.section-heading>.text-btn{
font-size:9px}
.thread-card{
padding:14px}
.thread-card.is-pinned{
padding-left:12px}
.thread-card h3{
font-size:13px}
.thread-meta{
gap:8px}
.thread-meta .thread-open{
margin-left:0}
.right-column{
grid-template-columns:minmax(0,1fr)}
.ask-panel{
grid-column:auto}
.view-toolbar{
align-items:stretch;
flex-wrap:wrap}
.view-toolbar .form-control{
flex-basis:100%}
.modal-backdrop{
padding:8px;
align-items:flex-end}
.modal{
width:100%;
max-height:92vh;
border-radius:16px 16px 0 0;
padding:18px 16px 20px}
.modal-head h2{
font-size:18px}
.chat-messages{
padding:12px;
max-height:50vh}
.chat-header{
padding:12px}
.chat-composer{
padding:10px}
.ai-chat-window{
min-height:500px}
.ai-chat-log{
padding:12px;
min-height:330px}
.ai-bubble{
max-width:96%}
.site-footer{
gap:8px}
.site-footer span:nth-child(2){
margin-left:0;
flex-basis:100%;
order:3}
.site-footer a{
margin-left:auto}
.member-row{
align-items:flex-start;
flex-wrap:wrap}
.staff-actions{
width:100%;
padding-left:32px}
.staff-actions select{
max-width:none;
flex:1}
.thread-detail-actions>*{
flex:1}
.thread-detail-actions button{
font-size:9px;
padding:7px}
.report-actions button{
flex:1}
.hero-art .orbit-label{
display:none}
}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
scroll-behavior:auto!important;
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important}
}