/* Bantrum 0.1.29: Premium Elite layout, real DOM, no screenshot-placeholder artwork.
   Load after base styles and the metallic design tokens.
   Existing interactive controls, route handlers, and forms remain unchanged. */

:root{
 --elite-panel:#101f34;
 --elite-panel-deep:#09192c;
 --elite-line:#456487;
 --elite-blue:#0052ff;
 --elite-gold:#f4c430;
 --elite-steel:#bfc9d7;
}
body{
 background:radial-gradient(ellipse 850px 520px at 78% 12%,#0f39604c,transparent 70%),
  repeating-linear-gradient(135deg,transparent 0 59px,#598dc009 60px,#598dc009 61px),
  linear-gradient(165deg,#071426,#091d34 50%,#060e1d)!important;
}
#app{min-height:100vh}
.topbar{height:76px!important;position:sticky!important;z-index:40!important}
.topbar-inner{height:76px!important;max-width:1600px!important;width:100%;padding:0 25px!important;gap:22px!important}
.brand{flex:none;width:252px!important;font-size:30px!important}
.bantrum-mark{height:44px!important;width:44px!important}
.top-search{height:46px!important;max-width:540px!important;width:min(540px,40vw)!important;border-radius:9px!important}
.top-search input{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
.top-actions{gap:14px!important;margin-left:auto!important}
.header-avatar{width:43px!important;height:43px!important;flex:none}
.top-create{height:44px!important;min-width:160px!important}
.shell{
 width:100%;max-width:1600px!important;
 margin:0 auto!important;padding:0 24px!important;
 display:grid!important;
 grid-template-columns:minmax(210px,235px) minmax(0,1fr) minmax(275px,340px)!important;
 gap:22px!important;align-items:start!important;
}
.shell>.main-content{width:100%;min-width:0;max-width:none;padding:22px 0 96px!important}
.sidebar{
 position:relative!important;top:auto!important;
 height:auto!important;max-height:none!important;
 overflow:visible!important;min-width:0;
 background:linear-gradient(180deg,#0b1e36,#071628)!important;
 border-right:1px solid #37597b!important;
 border-left:1px solid #213d5a!important;
 border-bottom:1px solid #37597b!important;
 box-shadow:inset -1px 0 #0008,0 9px 24px #0003!important;
}
.sidebar::before{display:none!important}
.sidebar-content{padding:22px 14px 22px!important;min-height:0!important}
.sidebar .nav-section-label{padding-left:10px;margin:0 0 9px;font-size:10px!important}
.sidebar .nav-item{
 display:flex!important;align-items:center!important;
 min-height:39px!important;height:auto!important;
 padding:9px 10px!important;margin:0 0 2px!important;
 font-size:12.5px!important;line-height:1.25!important;gap:10px!important;
}
.sidebar .nav-item svg{width:18px!important;height:18px!important}
.sidebar .main-nav{gap:1px!important}
.sidebar-divider{margin:12px 0 15px!important}
.sidebar-communities{margin-left:0!important}
.sidebar-community{min-height:38px!important;height:auto!important;padding:5px 8px!important;gap:9px!important}
.community-heading{padding-right:4px}
.invite-card{
 display:block!important;position:relative!important;
 height:auto!important;min-height:0!important;width:auto!important;
 padding:17px!important;margin:20px 0 0!important;
 background:linear-gradient(135deg,#203e63,#0c1b31)!important;
 border:1px solid #b99445!important;border-radius:10px!important;
}
.invite-card>*{opacity:1!important;pointer-events:auto!important}
.invite-card .invite-identity{margin:0 0 10px}
.invite-card .invite-identity img{height:35px;width:35px}
.invite-card b{font-size:17px;color:#f3f6ff!important}
.invite-card p{margin:9px 0 14px!important;color:#bfd1e7!important}
.invite-card button:not(.dismiss-panel){position:static!important;opacity:1!important;width:100%!important;height:auto!important;padding:10px!important;font-size:12px!important}
.dismiss-panel{
 position:absolute!important;top:11px!important;right:11px!important;left:auto!important;
 width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 opacity:1!important;pointer-events:auto!important;
 padding:0!important;margin:0!important;color:#f4d580!important;
 background:#071428e8!important;border:1px solid #b195567d!important;
 border-radius:7px!important;font:normal 19px/1 Arial,sans-serif!important;z-index:4!important;
}
.dismiss-panel:hover{border-color:#ffe098!important;color:#fff!important}
.page-heading{margin:0 0 16px!important;min-height:0!important;height:auto!important;padding:0 0 15px!important;border-bottom:1px solid #3f5e804e!important}
.page-heading h1{font-size:30px!important;font-weight:850!important;letter-spacing:-.8px!important}
.page-eyebrow{color:#f3c962!important}
.feed-tabs{margin:0 0 14px!important;gap:7px!important;padding-bottom:11px!important}
.feed-tabs .tab{padding:9px 18px!important;font-size:12px!important;min-width:85px;border-radius:7px!important}
.elite-hero{
 position:relative;
 display:flex;flex-direction:column;justify-content:space-between;
 min-height:292px;margin:0 0 16px;
 isolation:isolate;overflow:hidden;
 background:linear-gradient(90deg,#06152bf5 0%,#071a30e9 32%,#07203da4 59%,#06142c26 100%),
 url('/static/bantrum-hero.svg') 57% center/cover no-repeat!important;
 border:1px solid #ba9345;border-radius:11px;
 box-shadow:inset 0 0 0 1px #5c8bb157,0 5px 28px #010910a3,0 0 17px #0c5ad226;
}
.elite-hero::before{
 content:"";position:absolute;pointer-events:none;
 top:0;left:0;right:0;height:4px;
 background:linear-gradient(90deg,#fbd878,#ad7e2f 30%,#0052ff 70%,#86baff 90%,transparent);
 box-shadow:0 2px 11px #f4c43055;
}
.elite-hero::after{
 content:"";position:absolute;pointer-events:none;
 inset:10px;z-index:-1;
 border:1px solid #acbdcb17;
 clip-path:polygon(0 0,100% 0,100% 92%,96% 100%,0 100%);
}
.elite-hero-content{max-width:600px;padding:33px 28px 23px;position:relative;z-index:1}
.elite-kicker{
 display:inline-block;padding:5px 9px;margin-bottom:12px;
 color:#f7d579;letter-spacing:2px;font-size:10px;font-weight:850;
 background:#06162aad;border-left:3px solid #edbf59;
}
.elite-hero h2{font:900 clamp(26px,3vw,41px)/1.06 "Arial Black",Inter,"Segoe UI",sans-serif!important;
 color:#f3f7ff!important;letter-spacing:-1px!important;
 text-shadow:0 3px 4px #000c,0 0 17px #215fba44;
 max-width:530px;margin:0 0 10px}
.elite-hero h2 span{color:#f2c453;display:block;text-shadow:0 2px 7px #01060f}
.elite-hero p{max-width:435px;line-height:1.5;font-size:13px;font-weight:620;color:#e6eefb;margin:0 0 19px;text-shadow:0 2px 5px #000e}
.elite-hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.elite-hero-actions .primary-button,.elite-hero-actions .outline-button{font-size:12px;padding:11px 15px!important}
.elite-hero-actions .primary-button{
 background:linear-gradient(180deg,#ffe68a,#f4c430 50%,#bd852c)!important;
 border-color:#ffe4a4!important;color:#101c30!important;
 text-shadow:none!important;font-weight:850!important
}
.elite-hero-actions .outline-button{background:#0a203cc9!important;border-color:#a7bbd0!important}
.elite-hero-footer{
 display:flex;align-items:center;justify-content:space-around;gap:7px;
 padding:9px 12px;background:#06172ce8;
 border-top:1px solid #c09a4670;
 font-weight:850;font-size:9px;letter-spacing:1.8px;color:#d7e5f5
}
.elite-hero-footer span:not(:last-child)::after{content:"";display:inline-block;vertical-align:middle;width:3px;height:3px;background:#f4c430;border-radius:50%;margin-left:15px}
.post-composer,.post-card{
 background:linear-gradient(150deg,#182f4b,#0f2035 76%)!important;
 border:1px solid #547498!important;
 box-shadow:inset 0 1px #d5e8ff1c,0 5px 17px #02070e70!important;
 border-radius:10px!important;
}
.post-composer{padding:16px!important;margin-bottom:15px!important}
.post-card{padding:19px!important;margin-bottom:13px!important}
.post-card .post-body{font-size:13px!important;line-height:1.65!important;color:#dfebf8!important}
.post-meta,.post-card .author-name{font-size:13px!important}
.post-actions{padding-top:10px!important;border-top:1px solid #49658c67!important;margin-top:15px!important}
.post-actions .action{font-size:11px!important}
.post-composer .primary-button{
 background:linear-gradient(180deg,#ffe28b,#eebc3e 55%,#b17b24)!important;
 border-color:#ffe59a!important;
 color:#0b1c35!important;
 text-shadow:none!important;
 min-width:100px!important;
}
.post-composer .compose-prompt{height:auto!important;min-height:45px!important}
.rightbar{
 position:relative!important;top:auto!important;
 display:block!important;max-height:none!important;
 height:auto!important;overflow:visible!important;
 min-width:0;width:100%;padding:22px 0 40px!important;
}
.right-welcome{
 width:100%!important;height:auto!important;min-height:252px!important;
 max-width:100%!important;margin:0 0 17px!important;
 padding:24px 22px 19px!important;position:relative!important;
 display:flex!important;flex-direction:column!important;align-items:flex-start!important;
 background:
  linear-gradient(105deg,#06172bea 10%,#0b2551c5 76%,#152547c2),
  url('/static/bantrum-hero.svg') 78% center/auto 100% no-repeat!important;
 border:1px solid #9d7c41!important;border-radius:11px!important;
 box-shadow:inset 0 1px #ecd38c32,0 6px 19px #0005!important;
 overflow:hidden!important;
}
.right-welcome::after{
 content:"";display:block!important;position:absolute;left:15px;right:15px;top:0;height:3px;
 background:linear-gradient(90deg,#f1c760,#0052ff,transparent);pointer-events:none
}
.right-welcome>*{opacity:1!important;pointer-events:auto!important;position:relative;z-index:1}
.right-welcome .eyebrow{font-size:9px!important;letter-spacing:1.6px!important;color:#f9d77a!important;margin:2px 0 12px}
.right-welcome h3{font-size:30px!important;line-height:1.06!important;color:#fff!important;
 margin:3px 0 10px!important;text-shadow:0 2px 5px #0009}
.right-welcome p{color:#dae6f5!important;font-size:12px!important;max-width:250px;line-height:1.55!important;margin:0 0 17px!important}
.right-welcome button.soft-button{
 position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;
 width:auto!important;height:auto!important;min-height:39px!important;
 padding:10px 13px!important;opacity:1!important;pointer-events:auto!important;
 font-size:12px!important;z-index:1!important;
}
.right-welcome .dismiss-panel{position:absolute!important;left:auto!important;right:10px!important;top:10px!important}
.widget{
 width:100%!important;margin:0 0 15px!important;padding:18px 16px!important;
 border:1px solid #385775!important;
 background:linear-gradient(145deg,#142b46,#0c1c30)!important;
 border-radius:10px!important;min-height:0!important;
}
.widget-heading{opacity:1!important;pointer-events:auto!important;margin-bottom:13px!important}
.widget-heading h3{color:#f5d27a!important;letter-spacing:.1px;font-size:15px!important}
.widget .text-link{color:#84b7ff!important}
.right-com-row{padding:10px 4px!important;min-height:52px!important;border-bottom:1px solid #36526b70!important}
.right-com-row:last-child{border-bottom:0!important}
.right-com-row strong{font-size:12px!important;color:#f3f7fd!important}
.right-com-row small{color:#aebfda!important}
.right-com-row .community-mini-icon{
 background:linear-gradient(#243c5b,#15243b)!important;
 border-color:#5a7291!important;
}
.guideline-widget{
 width:100%!important;height:auto!important;min-height:0!important;
 background:linear-gradient(150deg,#173254,#0b1b30)!important;
 margin:0 0 15px!important;padding:17px 15px!important;
 border:1px solid #547393!important;overflow:visible!important;
}
.guideline-widget .widget-heading{opacity:1!important;pointer-events:auto!important}
.guideline-widget .guideline-link{
 position:static!important;display:flex!important;align-items:flex-start!important;
 gap:12px!important;width:100%!important;height:auto!important;inset:auto!important;
 padding:13px!important;
 border:1px solid #59728b!important;border-radius:8px!important;
 background:#092039!important;color:#dceaff!important;
}
.guideline-widget .guideline-link>*{opacity:1!important;pointer-events:auto!important}
.guideline-widget .guideline-link .guide-shield{color:#f4c430!important}
.guideline-widget .guideline-link p{color:#c1d3e7!important;font-size:11px!important}
.guideline-widget .guideline-link strong{color:#f8e1a5!important}
.guideline-widget>.dismiss-panel{top:12px!important;right:12px!important}
.info-page,.admin-panel,.settings-panel,.community-card,.profile-hero{
 border-color:#486589!important;box-shadow:inset 0 1px #ffffff15,0 4px 14px #0208107a!important
}
#app.settings-mode .rightbar{display:none!important}
#app.settings-mode .shell{grid-template-columns:220px minmax(0,1fr)!important}
#app.settings-mode .main-content{width:100%!important;max-width:none!important}
@media (min-width:1500px){
 .shell{grid-template-columns:235px minmax(0,1fr) 350px!important;gap:24px!important}
 .topbar-inner{max-width:1650px!important}
}
@media(min-width:741px) and (max-width:1230px){
 .shell{grid-template-columns:210px minmax(0,1fr)!important;gap:18px!important;padding:0 18px!important}
 .rightbar{display:none!important}
 .topbar-inner{padding:0 18px!important}
 .brand{width:225px!important;font-size:25px!important}
 .top-search{width:min(430px,37vw)!important}
 .elite-hero{min-height:250px}
 .elite-hero h2{font-size:32px!important}
}
@media (max-width:740px), (max-width:1100px) and (pointer:coarse){
 .topbar{height:63px!important}
 .topbar-inner{height:63px!important;gap:9px!important;padding:0 11px!important}
 .brand{width:auto!important;gap:5px!important;font-size:23px!important}
 .bantrum-mark{height:29px!important;width:29px!important}
 .brand-wordmark{font-size:21px!important}
 .top-search{width:40px!important;height:40px!important;padding:0 6px!important;background:transparent!important;border:0!important;box-shadow:none!important}
 .top-create{display:none!important}
 .shell{display:block!important;padding:0 11px!important}
 .shell>.main-content{padding:20px 0 99px!important}
 .sidebar{display:none!important}
 .sidebar.open{
  display:block!important;position:fixed!important;
  top:63px!important;bottom:0!important;left:0!important;
  width:min(310px,86vw)!important;height:auto!important;
  max-height:calc(100vh - 63px)!important;overflow-y:auto!important;z-index:35!important;
  box-shadow:16px 0 40px #0008!important
 }
 .rightbar{display:none!important}
 .page-heading h1{font-size:26px!important}
 .elite-hero{min-height:280px;margin-bottom:14px;background-position:65% center!important}
 .elite-hero-content{padding:24px 17px 16px}
 .elite-kicker{font-size:8px;letter-spacing:1.3px}
 .elite-hero h2{font-size:clamp(21px,6vw,31px)!important;max-width:355px}
 .elite-hero p{font-size:11px;max-width:290px}
 .elite-hero-actions{gap:7px}
 .elite-hero-actions .primary-button,.elite-hero-actions .outline-button{font-size:11px!important;padding:9px 12px!important}
 .elite-hero-footer{padding:9px 4px;font-size:8px;letter-spacing:.6px}
 .elite-hero-footer span:not(:last-child)::after{margin-left:8px}
 .post-card{padding:14px!important}
 .post-composer{padding:12px!important}
 .post-actions{flex-wrap:wrap!important;gap:8px 14px!important}
 .mobile-bottom{background:#0a1a30f8!important;border-top:1px solid #a8884388!important}
 .mobile-bottom button{color:#d5e5f9!important}
 #app.settings-mode .shell{display:block!important}
}
@media(prefers-reduced-motion:reduce){
 .elite-hero,.post-card,.right-welcome{animation:none!important}
}