/* =============================================================================
   Waidrn v2 design system — founder-settled direction (mockups/v2, PR #283).
   Near-black forum-native discovery: list/covers/table modes, dense metadata,
   right rail, project page. Scoped to html[data-design="v2"] so the v1 shell and
   all non-v2 pages keep their existing CSS untouched.
   Fonts: Inter / Space Grotesk / IBM Plex Mono (open-licensed, self-hosted).
   ============================================================================= */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/Inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Inter-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/SpaceGrotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/SpaceGrotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/SpaceGrotesk-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexMono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/IBMPlexMono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/IBMPlexMono-600.woff2') format('woff2');}
html[data-design="v2"] *{
 box-sizing: border-box; margin: 0; padding: 0; 
}
html[data-design="v2"], html[data-design="v2"] body{
 min-height: 100%; 
}
html[data-design="v2"] body{

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

}
html[data-design="v2"] a{
 color: inherit; text-decoration: none; 
}
html[data-design="v2"] button{
 font: inherit; color: inherit; background: none; border: 0; cursor: pointer; 
}
html[data-design="v2"] img, html[data-design="v2"] svg{
 display: block; max-width: 100%; 
}
html[data-design="v2"] ul, html[data-design="v2"] ol{
 list-style: none; 
}
html[data-design="v2"] table{
 border-collapse: collapse; 
}
html[data-design="v2"] code, html[data-design="v2"] kbd, html[data-design="v2"] pre{
 font-family: 'IBM Plex Mono', monospace; 
}
html[data-design="v2"]{

  --bg:#07080A;
  --bg-2:#0B0D10;
  --panel:#0F1216;
  --panel-2:#13171C;
  --panel-3:#181D24;
  --line:#222831;
  --line-2:#2C3440;
  --ink:#E9EDF2;
  --ink-2:#BAC3CE;
  --ink-3:#8C97A5;
  --faint:#5D6875;
  --accent:#7CC4FF;          
  --accent-dim:#3E6E96;
  --gold:#E8B14C;            
  --gold-dim:#8A6A2F;
  --green:#5BD3A0;           
  --violet:#B8A4FF;          
  --rose:#E86A8A;            
  --fandom:#7CC4FF;
  --kind:#E8B14C;
  --format:#B8A4FF;
  --radius:10px;
  --radius-sm:6px;
  --font-ui:'Inter',system-ui,sans-serif;
  --font-display:'Space Grotesk',var(--font-ui);
  --font-mono:'IBM Plex Mono',monospace;
  --shadow-lg:0 24px 70px rgba(0,0,0,.65), 0 6px 18px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);

}
html[data-design="v2"] *{
box-sizing:border-box;margin:0;padding:0
}
html[data-design="v2"], html[data-design="v2"] body{
height:100%
}
html[data-design="v2"] body{
background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:13.5px;
  -webkit-font-smoothing:antialiased;overflow:hidden
}
html[data-design="v2"] a{
color:inherit;text-decoration:none
}
html[data-design="v2"] button{
font:inherit;color:inherit;background:none;border:0;cursor:pointer
}
html[data-design="v2"] img{
display:block
}
html[data-design="v2"] .mono{
font-family:var(--font-mono);font-variant-numeric:tabular-nums
}
html[data-design="v2"] .dim{
color:var(--ink-3)
}
html[data-design="v2"] .faint{
color:var(--faint)
}
html[data-design="v2"] .gold{
color:var(--gold)
}
html[data-design="v2"] .green{
color:var(--green)
}
html[data-design="v2"] .acc{
color:var(--accent)
}
html[data-design="v2"] .shell{
display:flex;flex-direction:column;height:100vh;background:
  radial-gradient(1200px 500px at 70% -10%, #0E1620 0%, transparent 60%), var(--bg)
}
html[data-design="v2"] .topbar{
height:54px;flex:0 0 54px;display:flex;align-items:center;gap:18px;
  padding:0 20px;background:#050607;border-bottom:1px solid var(--line);position:relative;z-index:40
}
html[data-design="v2"] .logo{
display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;font-size:17px;letter-spacing:.4px
}
html[data-design="v2"] .logo .mark{
width:15px;height:15px;background:var(--gold);transform:rotate(45deg);
  box-shadow:0 0 14px rgba(232,177,76,.35)
}
html[data-design="v2"] .topnav{
display:flex;gap:4px;margin-left:6px
}
html[data-design="v2"] .topnav a{
padding:7px 12px;border-radius:7px;font-size:13px;color:var(--ink-3)
}
html[data-design="v2"] .topnav a:hover{
color:var(--ink);background:var(--panel-2)
}
html[data-design="v2"] .topnav a.on{
color:var(--ink);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--gold)
}
html[data-design="v2"] .search{
margin-left:auto;display:flex;align-items:center;gap:10px;width:360px;height:34px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--faint)
}
html[data-design="v2"] .search input{
background:none;border:0;outline:none;color:var(--ink);font:inherit;flex:1
}
html[data-design="v2"] .search .kbd{
font-family:var(--font-mono);font-size:10.5px;border:1px solid var(--line-2);
  border-radius:4px;padding:1px 5px;color:var(--ink-3)
}
html[data-design="v2"] .tb-actions{
display:flex;align-items:center;gap:6px
}
html[data-design="v2"] .icon-btn{
width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3)
}
html[data-design="v2"] .icon-btn:hover{
background:var(--panel-2);color:var(--ink)
}
html[data-design="v2"] .icon-btn .dot{
position:absolute;transform:translate(9px,-8px);width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 2px #050607
}
html[data-design="v2"] .avatar{
width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#2A3340,#151A21);
  border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--font-display);
  font-size:11px;color:var(--ink-2)
}
html[data-design="v2"] .subbar{
height:46px;flex:0 0 46px;display:flex;align-items:center;gap:8px;padding:0 20px;
  background:var(--bg-2);border-bottom:1px solid var(--line);position:relative;z-index:30
}
html[data-design="v2"] .hotbar{
display:flex;align-items:center;gap:6px
}
html[data-design="v2"] .slot{
display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:6px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font-size:12px
}
html[data-design="v2"] .slot .n{
font-family:var(--font-mono);font-size:10px;color:var(--faint)
}
html[data-design="v2"] .slot.on{
border-color:var(--gold-dim);background:#1A160C;color:var(--gold)
}
html[data-design="v2"] .slot .x{
color:var(--faint);font-size:11px
}
html[data-design="v2"] .subbar .spacer{
flex:1
}
html[data-design="v2"] .viewswitch{
display:flex;background:var(--panel);border:1px solid var(--line);border-radius:7px;overflow:hidden
}
html[data-design="v2"] .viewswitch button{
padding:6px 12px;font-size:12px;color:var(--ink-3);display:flex;gap:6px;align-items:center
}
html[data-design="v2"] .viewswitch button.on{
background:var(--panel-3);color:var(--ink)
}
html[data-design="v2"] .viewswitch button:hover{
color:var(--ink)
}
html[data-design="v2"] .sortlink{
font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px
}
html[data-design="v2"] .sortlink:hover{
background:var(--panel)
}
html[data-design="v2"] .body{
flex:1;display:grid;grid-template-columns:290px minmax(0,1fr) 300px;min-height:0
}
html[data-design="v2"] .rail{
border-right:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column;
  min-height:0;overflow:hidden
}
html[data-design="v2"] .rail-scroll{
flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A313C transparent;padding:14px 12px 20px
}
html[data-design="v2"] .rail h4{
font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  margin:14px 8px 8px;font-weight:600
}
html[data-design="v2"] .rail h4:first-child{
margin-top:2px
}
html[data-design="v2"] .realm{
display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:7px;font-size:13px;color:var(--ink-2)
}
html[data-design="v2"] .realm:hover{
background:var(--panel)
}
html[data-design="v2"] .realm.on{
background:var(--panel-2);color:var(--ink);box-shadow:inset 2px 0 0 var(--gold)
}
html[data-design="v2"] .realm .count{
margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--faint)
}
html[data-design="v2"] .realm .ico{
width:14px;height:14px;opacity:.85
}
html[data-design="v2"] .facet{
margin-bottom:2px
}
html[data-design="v2"] .facet-head{
display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer
}
html[data-design="v2"] .facet-head:hover{
background:var(--panel)
}
html[data-design="v2"] .facet-head .name{
font-size:12px;color:var(--ink-2);text-transform:capitalize
}
html[data-design="v2"] .facet-head .tot{
margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--faint)
}
html[data-design="v2"] .facet-head .caret{
width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--faint);margin-left:2px;transition:transform .15s
}
html[data-design="v2"] .facet.open .caret{
transform:rotate(180deg)
}
html[data-design="v2"] .facet-body{
display:none;padding:2px 4px 8px 8px
}
html[data-design="v2"] .facet.open .facet-body{
display:block
}
html[data-design="v2"] .fval{
display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;font-size:12px;
  color:var(--ink-3)
}
html[data-design="v2"] .fval:hover{
background:var(--panel);color:var(--ink-2)
}
html[data-design="v2"] .fval .sw{
width:8px;height:8px;border-radius:2px;flex:0 0 auto
}
html[data-design="v2"] .fval .n{
margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--faint)
}
html[data-design="v2"] .fval.on{
background:#1A2412;color:var(--ink);box-shadow:inset 0 0 0 1px #2C3A1E
}
html[data-design="v2"] .fval.on .n{
color:var(--green)
}
html[data-design="v2"] .fval.on::after{
content:"−";font-family:var(--font-mono);font-size:11px;color:var(--green);margin-left:6px
}
html[data-design="v2"] .rail-foot{
margin-top:auto;padding:10px 12px;border-top:1px solid var(--line);
  display:flex;gap:8px;align-items:center;font-size:11px;color:var(--faint)
}
html[data-design="v2"] .center{
display:flex;flex-direction:column;min-width:0;min-height:0
}
html[data-design="v2"] .center-head{
padding:14px 22px 10px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0C0F13,transparent)
}
html[data-design="v2"] .headline{
display:flex;align-items:baseline;gap:12px
}
html[data-design="v2"] .headline h1{
font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.2px
}
html[data-design="v2"] .headline .sub{
font-size:12px;color:var(--ink-3)
}
html[data-design="v2"] .headline .r{
margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3)
}
html[data-design="v2"] .chips{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px
}
html[data-design="v2"] .fchip{
display:flex;align-items:center;gap:7px;height:26px;padding:0 9px;border-radius:5px;
  background:#101720;border:1px solid #22303D;font-size:11.5px;color:var(--ink-2)
}
html[data-design="v2"] .fchip .lab{
color:var(--faint);font-size:10.5px
}
html[data-design="v2"] .fchip .val{
color:var(--accent)
}
html[data-design="v2"] .fchip .x{
color:var(--faint);font-family:var(--font-mono);font-size:11px;padding-left:2px
}
html[data-design="v2"] .fchip:hover .x{
color:var(--rose)
}
html[data-design="v2"] .fchip.add{
border-style:dashed;color:var(--ink-3);padding:0 8px
}
html[data-design="v2"] .fchip.selected{
background:#16261A;border-color:#2E4A33
}
html[data-design="v2"] .fchip.selected .val{
color:var(--green)
}
html[data-design="v2"] .chips .save{
margin-left:auto;font-size:11.5px;color:var(--accent)
}
html[data-design="v2"] .chips .clear{
font-size:11.5px;color:var(--faint)
}
html[data-design="v2"] .chips .clear:hover{
color:var(--ink-2)
}
html[data-design="v2"] .results-meta{
display:flex;align-items:center;gap:14px;margin-top:9px;font-size:11.5px;color:var(--faint)
}
html[data-design="v2"] .results-meta b{
color:var(--ink-2);font-weight:600
}
html[data-design="v2"] .results-meta .live{
display:flex;align-items:center;gap:6px;color:var(--green)
}
html[data-design="v2"] .results-meta .pulse{
width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(91,211,160,.8)
}
html[data-design="v2"] .list{
flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A313C transparent;padding:6px 14px 30px
}
html[data-design="v2"] .lrow{
position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 176px 92px;
  gap:12px;align-items:center;padding:7px 10px;border-radius:9px;border:1px solid transparent
}
html[data-design="v2"] .lrow:hover, html[data-design="v2"] .lrow.hovered{
background:var(--panel);border-color:var(--line-2)
}
html[data-design="v2"] .lrow.hovered{
background:#121820;border-color:#2A3A4C
}
html[data-design="v2"] .cover-thumb{
width:42px;height:60px;border-radius:4px;overflow:hidden;box-shadow:var(--shadow-sm);
  position:relative
}
html[data-design="v2"] .cover-thumb img{
width:100%;height:100%;object-fit:cover
}
html[data-design="v2"] .cover-thumb .stack{
position:absolute;right:-3px;top:-3px;background:#050607;border:1px solid var(--line-2);
  border-radius:3px;padding:0 3px;font-family:var(--font-mono);font-size:8px;color:var(--ink-3)
}
html[data-design="v2"] .lmain{
min-width:0
}
html[data-design="v2"] .lt{
display:flex;align-items:center;gap:9px;min-width:0
}
html[data-design="v2"] .lt a{
font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html[data-design="v2"] .lt a:hover{
color:var(--accent)
}
html[data-design="v2"] .lt .mark{
font-size:9px;padding:1px 5px;border-radius:3px;font-family:var(--font-mono);
  text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto
}
html[data-design="v2"] .mark.proj{
border:1px solid var(--gold-dim);color:var(--gold);background:#1A160C
}
html[data-design="v2"] .mark.fork{
border:1px solid #3A3348;color:var(--violet);background:#161222
}
html[data-design="v2"] .mark.stall{
border:1px solid #4A3038;color:var(--rose);background:#180F13
}
html[data-design="v2"] .mark.wish{
border:1px solid #2E3A48;color:var(--accent);background:#0F1720
}
html[data-design="v2"] .mark.demo{
border:1px solid #4A4458;color:#B9B2C7;background:#16141C
}
html[data-design="v2"] .lmeta{
display:flex;align-items:center;gap:7px;margin-top:4px;flex-wrap:nowrap;overflow:hidden
}
html[data-design="v2"] .mtag{
display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:1px 6px;background:#0C1014;flex:0 0 auto
}
html[data-design="v2"] .mtag .sw{
width:6px;height:6px;border-radius:1.5px
}
html[data-design="v2"] .mtag .sw.f{
background:var(--fandom)
}
html[data-design="v2"] .mtag .sw.k{
background:var(--kind)
}
html[data-design="v2"] .mtag .sw.c{
background:var(--format)
}
html[data-design="v2"] .mtag.more{
color:var(--faint);border-style:dashed
}
html[data-design="v2"] .ldesc{
display:none
}
html[data-design="v2"] .lstats{
margin-top:4px;display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--ink-3)
}
html[data-design="v2"] .lstats .st{
display:flex;align-items:center;gap:5px
}
html[data-design="v2"] .lstats .st svg{
width:12px;height:12px;stroke:var(--faint);fill:none;stroke-width:1.5
}
html[data-design="v2"] .lstats .rate{
display:flex;align-items:center;gap:5px;color:var(--gold)
}
html[data-design="v2"] .lstats .rate b{
color:var(--gold);font-weight:600;font-size:11.5px
}
html[data-design="v2"] .lstats .rate .cnt{
color:var(--faint);font-size:10.5px
}
html[data-design="v2"] .lstats .fund{
display:flex;align-items:center;gap:5px;color:var(--gold)
}
html[data-design="v2"] .lstats .fund .bar{
width:46px;height:3px;background:#2A2213;border-radius:2px;overflow:hidden
}
html[data-design="v2"] .lstats .fund .bar i{
display:block;height:100%;background:var(--gold)
}
html[data-design="v2"] .lside{
display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:11px;color:var(--faint)
}
html[data-design="v2"] .lside .top{
font-family:var(--font-mono);font-size:11px;color:var(--ink-2)
}
html[data-design="v2"] .lside .sub-actions{
display:flex;gap:6px;opacity:0
}
html[data-design="v2"] .lrow:hover .lside .sub-actions, html[data-design="v2"] .lrow.hovered .lside .sub-actions{
opacity:1
}
html[data-design="v2"] .mini-action{
width:24px;height:24px;border-radius:5px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-3)
}
html[data-design="v2"] .mini-action:hover{
border-color:var(--line-2);color:var(--ink)
}
html[data-design="v2"] .lact{
display:flex;gap:6px;justify-content:flex-end
}
html[data-design="v2"] .btn{
display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:6px;
  font-size:11.5px;font-weight:600;border:1px solid var(--line-2);color:var(--ink-2)
}
html[data-design="v2"] .btn:hover{
color:var(--ink);border-color:#3B4654
}
html[data-design="v2"] .btn.gold{
background:var(--gold);border-color:var(--gold);color:#151004
}
html[data-design="v2"] .btn.gold:hover{
filter:brightness(1.06)
}
html[data-design="v2"] .btn.ghost{
background:none
}
html[data-design="v2"] .lsep{
height:1px;background:var(--line);margin:2px 12px
}
html[data-design="v2"] .stars{
display:inline-flex;gap:1.5px;align-items:center
}
html[data-design="v2"] .star{
width:10px;height:10px;background:#FFC24B;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)
}
html[data-design="v2"] .star.off{
background:#3A3F47
}
html[data-design="v2"] .preview{
position:absolute;right:6px;top:calc(100% - 2px);width:330px;background:#0E1116;
  border:1px solid #31404F;border-radius:10px;box-shadow:var(--shadow-lg);z-index:20;
  opacity:0;pointer-events:none
}
html[data-design="v2"] .preview.show{
opacity:1;pointer-events:auto
}
html[data-design="v2"] .preview:before{
content:"";position:absolute;right:26px;top:-6px;width:10px;height:10px;
  background:#0E1116;border-left:1px solid #31404F;border-top:1px solid #31404F;transform:rotate(45deg)
}
html[data-design="v2"] .preview .cover{
height:96px;overflow:hidden;border-radius:9px 9px 0 0;position:relative
}
html[data-design="v2"] .preview .cover img{
width:100%;height:100%;object-fit:cover;object-position:center 30%
}
html[data-design="v2"] .preview .cover:after{
content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#0E1116 100%)
}
html[data-design="v2"] .preview .pbody{
padding:2px 14px 12px
}
html[data-design="v2"] .preview h5{
font-family:var(--font-display);font-size:16px;margin-top:-14px;position:relative
}
html[data-design="v2"] .preview .pauthor{
font-size:11.5px;color:var(--ink-3);margin-top:3px
}
html[data-design="v2"] .preview .pdesc{
font-size:11.5px;line-height:1.55;color:var(--ink-3);margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
html[data-design="v2"] .preview .pstats{
display:flex;gap:12px;margin-top:9px;font-size:11px;color:var(--ink-3)
}
html[data-design="v2"] .preview .pstats b{
color:var(--ink-2)
}
html[data-design="v2"] .preview .pfoot{
display:flex;gap:6px;margin-top:11px
}
html[data-design="v2"] .preview .ptags{
display:flex;gap:5px;margin-top:8px;flex-wrap:wrap
}
html[data-design="v2"] .preview .arrowbtn{
flex:1;justify-content:center
}
html[data-design="v2"] .right{
border-left:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column;min-height:0
}
html[data-design="v2"] .right-scroll{
flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A313C transparent;padding:14px 14px 20px
}
html[data-design="v2"] .rblock{
margin-bottom:20px
}
html[data-design="v2"] .rhead{
display:flex;align-items:center;gap:8px;margin-bottom:8px
}
html[data-design="v2"] .rhead h4, html[data-design="v2"] .rhead h3{
font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600
}
html[data-design="v2"] .rhead .all{
margin-left:auto;font-size:10.5px;color:var(--accent)
}
html[data-design="v2"] .ru{
display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:9px;padding:7px 6px;border-radius:6px;align-items:center
}
html[data-design="v2"] .ru:hover{
background:var(--panel)
}
html[data-design="v2"] .ru .cv{
width:26px;height:38px;border-radius:3px;overflow:hidden
}
html[data-design="v2"] .ru .cv img{
width:100%;height:100%;object-fit:cover
}
html[data-design="v2"] .ru .t, html[data-design="v2"] .ru .u{
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html[data-design="v2"] .ru .t{
font-size:11.5px;color:var(--ink-2)
}
html[data-design="v2"] .ru .u{
font-size:10.5px;color:var(--faint);margin-top:2px
}
html[data-design="v2"] .ru .when{
font-family:var(--font-mono);font-size:9.5px;color:var(--faint);white-space:nowrap
}
html[data-design="v2"] .rblock .hint{
font-size:10.5px;color:var(--faint);line-height:1.5;margin-top:6px
}
html[data-design="v2"] .statusbar{
flex:0 0 28px;height:28px;display:flex;align-items:center;gap:14px;padding:0 18px;
  background:#050607;border-top:1px solid var(--line);font-size:10.5px;color:var(--faint);
  white-space:nowrap;overflow:hidden
}
html[data-design="v2"] .statusbar>span{
white-space:nowrap;flex:0 0 auto
}
html[data-design="v2"] .statusbar .right{
margin-left:auto;display:flex;flex-direction:row;gap:14px
}
html[data-design="v2"] .statusbar .k{
font-family:var(--font-mono);color:var(--ink-3)
}
@media (max-width:430px){
html[data-design="v2"] body{
overflow:auto
}
html[data-design="v2"] .shell{
height:auto;min-height:100vh
}
html[data-design="v2"] .topbar{
height:50px;padding:0 12px;gap:10px
}
html[data-design="v2"] .logo{
font-size:15px
}
html[data-design="v2"] .topnav{
display:none
}
html[data-design="v2"] .search{
display:none
}
html[data-design="v2"] .subbar{
height:auto;flex-wrap:wrap;padding:8px 12px;gap:6px
}
html[data-design="v2"] .hotbar{
overflow-x:auto;width:100%;flex-wrap:nowrap
}
html[data-design="v2"] .slot{
flex:0 0 auto
}
html[data-design="v2"] .subbar .spacer{
display:none
}
html[data-design="v2"] .viewswitch{
margin-left:auto
}
html[data-design="v2"] .body{
grid-template-columns:1fr;grid-template-rows:auto
}
html[data-design="v2"] .rail{
display:none
}
html[data-design="v2"] .right{
display:none
}
html[data-design="v2"] .center-head{
padding:12px 14px 8px
}
html[data-design="v2"] .headline h1{
font-size:18px
}
html[data-design="v2"] .headline .sub, html[data-design="v2"] .headline .r{
display:none
}
html[data-design="v2"] .results-meta{
display:none
}
html[data-design="v2"] .chips .save, html[data-design="v2"] .chips .clear{
display:none
}
html[data-design="v2"] .chips{
margin-top:8px
}
html[data-design="v2"] .fchip{
height:24px;font-size:10.5px
}
html[data-design="v2"] .list{
padding:4px 8px 20px
}
html[data-design="v2"] .lrow{
grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:9px 8px
}
html[data-design="v2"] .cover-thumb{
width:38px;height:54px
}
html[data-design="v2"] .lt a{
font-size:13.5px
}
html[data-design="v2"] .lmeta{
flex-wrap:wrap;gap:5px
}
html[data-design="v2"] .mtag{
font-size:10px;padding:1px 5px
}
html[data-design="v2"] .ldesc{
display:none
}
html[data-design="v2"] .lstats{
margin-top:4px;gap:9px;font-size:10.5px;flex-wrap:wrap
}
html[data-design="v2"] .lstats .st.hide-ph{
display:none
}
html[data-design="v2"] .lside .top{
font-size:10px
}
html[data-design="v2"] .lside .sub-actions{
display:none
}
html[data-design="v2"] .lact{
display:none
}
html[data-design="v2"] .preview{
display:none
}
html[data-design="v2"] .statusbar{
height:auto;flex-wrap:wrap;gap:6px;padding:7px 12px;font-size:9.5px
}
html[data-design="v2"] .statusbar .right{
display:none
}
}
html[data-design="v2"] .cards{
flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A313C transparent;
    padding:14px 16px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
    align-content:start;align-items:start;grid-auto-rows:max-content
}
html[data-design="v2"] .card{
background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;
    display:flex;flex-direction:column;position:relative;transition:border-color .12s, transform .12s
}
html[data-design="v2"] .card:hover{
border-color:var(--line-2);transform:translateY(-2px)
}
html[data-design="v2"] .card.hovered{
border-color:#3A4C60;box-shadow:0 14px 40px rgba(0,0,0,.55)
}
html[data-design="v2"] .cw{
position:relative;flex:0 0 auto;height:262px;overflow:hidden;background:#0A0C0F
}
html[data-design="v2"] .cw img{
width:100%;height:100%;object-fit:cover
}
html[data-design="v2"] .cw:after{
content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,0) 45%,rgba(5,6,10,.82) 100%)
}
html[data-design="v2"] .card .badge{
position:absolute;left:8px;top:8px;font-family:var(--font-mono);font-size:9px;
    letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;z-index:2;
    border:1px solid var(--gold-dim);color:var(--gold);background:#151003
}
html[data-design="v2"] .card .badge.fork{
border-color:#3A3348;color:var(--violet);background:#100C18
}
html[data-design="v2"] .card .badge.wish{
border-color:#2E3A48;color:var(--accent);background:#0A121A
}
html[data-design="v2"] .card .badge.seal{
border-color:#4A3038;color:var(--rose);background:#150B0F
}
html[data-design="v2"] .bookmark{
position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:6px;z-index:2;
    background:rgba(5,6,10,.65);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;
    color:var(--ink-2);opacity:0;transition:opacity .12s
}
html[data-design="v2"] .card:hover .bookmark, html[data-design="v2"] .bookmark.on{
opacity:1
}
html[data-design="v2"] .cfoot{
position:absolute;left:0;right:0;bottom:0;padding:8px 10px;z-index:2
}
html[data-design="v2"] .crate{
display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--ink-2)
}
html[data-design="v2"] .crate .pct{
font-family:var(--font-mono);color:var(--gold);font-size:11px
}
html[data-design="v2"] .pbar{
height:3px;background:#1B2028;border-radius:2px;margin-top:5px;overflow:hidden
}
html[data-design="v2"] .pbar i{
display:block;height:100%;background:var(--gold)
}
html[data-design="v2"] .cbody{
padding:9px 10px 10px;display:flex;flex-direction:column;gap:6px;min-height:0
}
html[data-design="v2"] .ct{
font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
html[data-design="v2"] .card:hover .ct{
color:var(--accent)
}
html[data-design="v2"] .cauthor{
font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html[data-design="v2"] .ctags{
display:flex;gap:4px;flex-wrap:wrap;overflow:hidden;max-height:18px
}
html[data-design="v2"] .ctag{
font-size:9.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;
    padding:0 4px;background:#0B0F13;display:flex;align-items:center;gap:4px
}
html[data-design="v2"] .ctag .sw{
width:5px;height:5px;border-radius:1px
}
html[data-design="v2"] .cstats{
display:flex;align-items:center;gap:9px;font-size:10.5px;color:var(--ink-3);margin-top:1px
}
html[data-design="v2"] .cstats .r{
display:flex;align-items:center;gap:4px;color:var(--gold)
}
html[data-design="v2"] .cstats .r b{
font-weight:600
}
html[data-design="v2"] .cstats .r .cnt{
color:var(--faint);font-size:9.5px
}
html[data-design="v2"] .ctail{
display:flex;align-items:center;gap:6px;margin-top:auto
}
html[data-design="v2"] .ctail .mini{
flex:1;font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html[data-design="v2"] .ctail .btn{
height:24px;font-size:10.5px;padding:0 8px
}
@media (max-width: 430px){
html[data-design="v2"] .cards{
grid-template-columns:1fr 1fr;gap:10px;padding:10px 10px 20px
}
html[data-design="v2"] .cw{
height:auto;aspect-ratio:2/3;flex:0 0 auto
}
html[data-design="v2"] .cbody{
padding:8px
}
html[data-design="v2"] .ct{
font-size:12px
}
html[data-design="v2"] .cauthor{
font-size:10px
}
html[data-design="v2"] .cstats{
flex-wrap:wrap;gap:6px;font-size:10px
}
html[data-design="v2"] .ctail .mini{
display:none
}
html[data-design="v2"] .card .btn{
width:100%
}
}
html[data-design="v2"] .work{
flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A313C transparent;
    background:radial-gradient(900px 320px at 30% -10%, #12181F 0%, transparent 70%), var(--bg)
}
html[data-design="v2"] .hero{
position:relative;height:226px;overflow:hidden;border-bottom:1px solid var(--line)
}
html[data-design="v2"] .hero img{
width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.9)
}
html[data-design="v2"] .hero:after{
content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(7,8,10,.25) 0%,rgba(7,8,10,.55) 55%,var(--bg) 100%)
}
html[data-design="v2"] .hero-in{
position:absolute;left:0;right:0;bottom:0;padding:0 28px 16px;display:flex;gap:18px;align-items:flex-end;z-index:2;max-width:1160px;margin:0 auto
}
html[data-design="v2"] .hero-cover{
width:104px;height:156px;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 40px rgba(0,0,0,.6);flex:0 0 auto;background:#0A0C0F
}
html[data-design="v2"] .hero-cover img{
width:100%;height:100%;object-fit:cover
}
html[data-design="v2"] .hero-txt{
min-width:0
}
html[data-design="v2"] .crumbs{
font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:7px;margin-bottom:7px
}
html[data-design="v2"] .crumbs a{
color:var(--ink-3)
}
html[data-design="v2"] .crumbs a:hover{
color:var(--accent)
}
html[data-design="v2"] .crumbs .sep{
color:var(--faint)
}
html[data-design="v2"] .hero h1{
font-family:var(--font-display);font-size:30px;line-height:1.1;letter-spacing:.2px
}
html[data-design="v2"] .byline{
display:flex;align-items:center;gap:10px;margin-top:7px;font-size:12.5px;color:var(--ink-3)
}
html[data-design="v2"] .byline b{
color:var(--ink-2);font-weight:600
}
html[data-design="v2"] .byline .dot{
width:3px;height:3px;border-radius:50%;background:var(--faint)
}
html[data-design="v2"] .hero-badges{
display:flex;gap:6px;margin-top:9px
}
html[data-design="v2"] .hb{
font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
    border:1px solid var(--line-2);border-radius:4px;padding:2px 7px;color:var(--ink-3);background:#0B0E12
}
html[data-design="v2"] .hb.gold{
border-color:var(--gold-dim);color:var(--gold);background:#151003
}
html[data-design="v2"] .hb.green{
border-color:#2E4A33;color:var(--green);background:#0B1410
}
html[data-design="v2"] .hero-actions{
margin-left:auto;display:flex;gap:8px;align-items:center;padding-bottom:2px
}
html[data-design="v2"] .btn.lg{
height:34px;padding:0 14px;font-size:12.5px;border-radius:7px
}
html[data-design="v2"] .layout{
display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;padding:14px 28px 40px;max-width:1160px;margin:0 auto;position:relative
}
html[data-design="v2"] .maincol{
min-width:0
}
html[data-design="v2"] .sidecol{
display:flex;flex-direction:column;gap:14px
}
html[data-design="v2"] .statstrip{
display:flex;align-items:center;gap:0;background:var(--panel);border:1px solid var(--line);
    border-radius:9px;overflow:hidden;margin-bottom:14px
}
html[data-design="v2"] .stat{
flex:1;padding:9px 12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0
}
html[data-design="v2"] .stat:last-child{
border-right:0
}
html[data-design="v2"] .stat .v{
font-family:var(--font-mono);font-size:14px;color:var(--ink);display:flex;align-items:center;gap:6px
}
html[data-design="v2"] .stat .v small{
font-size:10.5px;color:var(--faint)
}
html[data-design="v2"] .stat .k{
font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)
}
html[data-design="v2"] .stat .v .stars{
margin-right:2px
}
html[data-design="v2"] .tagrow{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px
}
html[data-design="v2"] .tagrow .lab{
font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-right:2px
}
html[data-design="v2"] .pchip{
font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:2px 8px;background:#0C1014
}
html[data-design="v2"] .pchip:hover{
color:var(--ink-2);border-color:var(--line-2)
}
html[data-design="v2"] .pchip.on{
background:#16261A;border-color:#2E4A33;color:var(--green)
}
html[data-design="v2"] .pchip.on:after{
content:"×";margin-left:6px;color:var(--green);font-family:var(--font-mono)
}
html[data-design="v2"] .pchip .cnt{
color:var(--faint);font-size:9.5px;margin-left:4px;font-family:var(--font-mono)
}
html[data-design="v2"] .pchip.warn{
border-color:#4A3038;color:var(--rose);background:#150B0F
}
html[data-design="v2"] h2.sec{
font-family:var(--font-display);font-size:16px;margin:20px 0 9px;display:flex;align-items:center;gap:9px
}
html[data-design="v2"] h2.sec .rule{
flex:1;height:1px;background:var(--line)
}
html[data-design="v2"] h2.sec .link{
font-family:var(--font-ui);font-size:11px;font-weight:500;color:var(--accent)
}
html[data-design="v2"] .prose{
font-size:13px;line-height:1.7;color:var(--ink-2)
}
html[data-design="v2"] .prose p+p{
margin-top:9px
}
html[data-design="v2"] .prose .hl{
color:var(--ink)
}
html[data-design="v2"] .ladder{
border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)
}
html[data-design="v2"] .rung{
display:grid;grid-template-columns:44px minmax(0,1fr) 120px 110px 92px;gap:10px;align-items:center;
    padding:11px 14px;border-bottom:1px solid var(--line);position:relative
}
html[data-design="v2"] .rung:last-child{
border-bottom:0
}
html[data-design="v2"] .rung .num{
font-family:var(--font-mono);font-size:11px;color:var(--faint)
}
html[data-design="v2"] .rung .nm{
min-width:0
}
html[data-design="v2"] .rung .nm .t{
font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html[data-design="v2"] .rung .nm .m{
font-size:10.5px;color:var(--faint);margin-top:3px;font-family:var(--font-mono)
}
html[data-design="v2"] .rung .tg{
font-family:var(--font-mono);font-size:12px;color:var(--ink-2);text-align:right
}
html[data-design="v2"] .rung .sh{
font-family:var(--font-mono);font-size:12px;color:var(--ink-3);text-align:right
}
html[data-design="v2"] .rung .st{
justify-self:end
}
html[data-design="v2"] .stchip{
font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
    border-radius:4px;padding:2px 7px;border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap
}
html[data-design="v2"] .stchip.passed{
color:var(--green);border-color:#2E4A33;background:#0B1410
}
html[data-design="v2"] .stchip.vote{
color:var(--gold);border-color:var(--gold-dim);background:#151003
}
html[data-design="v2"] .stchip.next{
color:var(--faint);border-style:dashed
}
html[data-design="v2"] .rung.active{
background:linear-gradient(90deg,#151203, transparent 60%)
}
html[data-design="v2"] .rung.active:before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold)
}
html[data-design="v2"] .rung.active .nm .t{
color:var(--gold)
}
html[data-design="v2"] .rung .ev{
grid-column:2 / -1;margin-top:6px;display:flex;gap:9px;align-items:center;font-size:10.5px;color:var(--ink-3);font-family:var(--font-mono)
}
html[data-design="v2"] .rung .ev .btn{
height:24px;font-size:10.5px;padding:0 8px
}
html[data-design="v2"] .decidein{
grid-column:1/-1;margin-top:9px;border:1px solid var(--gold-dim);border-radius:8px;
    background:#0D0C07;padding:10px 12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center
}
html[data-design="v2"] .decidein .dt{
flex:1 1 320px;font-size:11.5px;color:var(--ink-3);line-height:1.5
}
html[data-design="v2"] .decidein .dt b{
color:var(--ink)
}
html[data-design="v2"] .decidein .dt .am{
color:var(--gold);font-family:var(--font-mono)
}
html[data-design="v2"] .decidein .db{
display:flex;gap:7px
}
html[data-design="v2"] .decidein .dn{
flex:1 1 100%;font-size:10px;color:var(--faint)
}
html[data-design="v2"] .decide{
margin-top:10px;border:1px solid var(--gold-dim);border-radius:8px;background:#0D0C07;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center
}
html[data-design="v2"] .decide .dtext .t{
font-size:12.5px;font-weight:600
}
html[data-design="v2"] .decide .dtext .s{
font-size:11px;color:var(--ink-3);margin-top:3px;font-family:var(--font-mono)
}
html[data-design="v2"] .decide .dbtns{
display:flex;gap:7px
}
html[data-design="v2"] .leavebtn{
display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:6px;font-size:11.5px;
    border:1px solid var(--gold-dim);color:var(--gold);background:transparent;font-weight:600
}
html[data-design="v2"] .decide .note{
grid-column:1 / -1;font-size:10.5px;color:var(--faint)
}
html[data-design="v2"] .rel{
display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)
}
html[data-design="v2"] .rel:last-child{
border-bottom:0
}
html[data-design="v2"] .rel .no{
font-family:var(--font-mono);font-size:11px;color:var(--faint);width:22px
}
html[data-design="v2"] .rel .rt{
font-size:12.5px;font-weight:600;color:var(--ink-2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html[data-design="v2"] .rel .when{
font-family:var(--font-mono);font-size:10.5px;color:var(--faint)
}
html[data-design="v2"] .rel .tagp{
font-family:var(--font-mono);font-size:9px;padding:1px 5px;border-radius:3px;border:1px solid var(--line-2);color:var(--ink-3)
}
html[data-design="v2"] .rel.new .rt:before{
content:"NEW";font-family:var(--font-mono);font-size:8px;color:var(--gold);border:1px solid var(--gold-dim);
    border-radius:3px;padding:0 4px;margin-right:7px;vertical-align:1px
}
html[data-design="v2"] .threadrow{
display:flex;gap:11px;padding:9px 12px;border-bottom:1px solid var(--line);align-items:baseline
}
html[data-design="v2"] .threadrow:last-child{
border-bottom:0
}
html[data-design="v2"] .threadrow .bub{
width:14px;height:11px;border:1.4px solid var(--ink-3);border-radius:3px;position:relative;flex:0 0 auto;margin-top:3px
}
html[data-design="v2"] .threadrow .bub:after{
content:"";position:absolute;left:2px;bottom:-4px;width:4px;height:4px;background:var(--ink-3);clip-path:polygon(0 0,100% 0,0 100%)
}
html[data-design="v2"] .threadrow .th{
font-size:12.5px;color:var(--ink-2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html[data-design="v2"] .threadrow .th b{
color:var(--ink)
}
html[data-design="v2"] .threadrow .meta{
font-family:var(--font-mono);font-size:10.5px;color:var(--faint);white-space:nowrap
}
html[data-design="v2"] .side-card{
background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px
}
html[data-design="v2"] .side-card h3{
font-family:var(--font-display);font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:10px
}
html[data-design="v2"] .side-card h3 .tag{
margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);border-radius:3px;padding:1px 5px;background:#151003
}
html[data-design="v2"] .poolbig{
font-family:var(--font-display);font-size:26px;letter-spacing:.2px
}
html[data-design="v2"] .poolbig small{
font-family:var(--font-ui);font-size:11px;color:var(--ink-3);font-weight:400;margin-left:6px
}
html[data-design="v2"] .pbar2{
height:5px;background:#1B2028;border-radius:3px;margin:9px 0 7px;overflow:hidden
}
html[data-design="v2"] .pbar2 i{
display:block;height:100%;background:var(--gold)
}
html[data-design="v2"] .prow{
display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);padding:3px 0;font-family:var(--font-mono)
}
html[data-design="v2"] .prow b{
color:var(--ink-2);font-weight:500
}
html[data-design="v2"] .prow.total{
border-top:1px solid var(--line);margin-top:6px;padding-top:7px
}
html[data-design="v2"] .pledge{
margin-top:12px;border:1px solid #3A3540;border-radius:8px;background:#0C0A07;color:#F2EFE8;padding:11px 12px
}
html[data-design="v2"] .pledge .ph{
display:flex;justify-content:space-between;align-items:baseline
}
html[data-design="v2"] .pledge .ph .pt{
font-family:var(--font-display);font-size:12px;color:#F2EFE8;letter-spacing:.3px
}
html[data-design="v2"] .pledge .ph .pv{
font-family:var(--font-mono);font-size:11px;color:#C9C4CE
}
html[data-design="v2"] .pledge .split{
font-family:var(--font-mono);font-size:10px;color:#9A948C;margin-top:6px
}
html[data-design="v2"] .pledge .stayline{
margin-top:9px;display:flex;align-items:center;gap:8px;font-size:10.5px;color:#B9B3C0
}
html[data-design="v2"] .pledge .stayline b{
color:#E8B14C
}
html[data-design="v2"] .lockrow{
display:flex;align-items:center;gap:7px;margin-top:11px;font-size:10px;color:var(--faint)
}
html[data-design="v2"] .lockrow .lg{
width:10px;height:10px;border:1px solid var(--faint);border-radius:2px;position:relative
}
html[data-design="v2"] .clock{
margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;
    color:var(--gold);font-size:11px;font-family:var(--font-mono);line-height:1.5
}
html[data-design="v2"] .creator{
display:flex;gap:11px;align-items:center
}
html[data-design="v2"] .cava{
width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#2A3340,#151A21);
    border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--font-display);font-size:13px;color:var(--ink-2);flex:0 0 auto
}
html[data-design="v2"] .creator .cn, html[data-design="v2"] .creator .cm{
display:block
}
html[data-design="v2"] .creator .cn{
font-size:12.5px;font-weight:600
}
html[data-design="v2"] .creator .cm{
font-size:10.5px;color:var(--faint);margin-top:2px
}
html[data-design="v2"] .track{
display:flex;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)
}
html[data-design="v2"] .track .tv{
font-family:var(--font-mono);font-size:13px;color:var(--ink-2)
}
html[data-design="v2"] .track .tk{
font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;margin-top:1px
}
html[data-design="v2"] .fact{
display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--ink-3);padding:3px 0
}
html[data-design="v2"] .fact b{
color:var(--ink-2);font-weight:500;text-align:right
}
html[data-design="v2"] .fact .ok{
color:var(--green)
}
html[data-design="v2"] .hero2 .lineage{
margin-top:4px;font-size:10.5px;color:var(--faint);font-family:var(--font-mono)
}
html[data-design="v2"] .hero2 .lineage b{
color:var(--violet)
}
@media (max-width: 430px){
html[data-design="v2"] .hero{
height:190px
}
html[data-design="v2"] .hero-in{
padding:0 14px 12px;gap:12px
}
html[data-design="v2"] .hero-cover{
width:78px;height:117px;margin-bottom:-30px
}
html[data-design="v2"] .hero h1{
font-size:20px
}
html[data-design="v2"] .byline{
font-size:11px;flex-wrap:wrap;gap:7px
}
html[data-design="v2"] .hero-actions{
display:none
}
html[data-design="v2"] .layout{
grid-template-columns:1fr;padding:10px 12px 30px;gap:14px;margin-top:-30px
}
html[data-design="v2"] .sidecol{
padding-top:0
}
html[data-design="v2"] .statstrip{
order:-1;flex-wrap:wrap
}
html[data-design="v2"] .stat{
flex:1 0 32%;padding:8px 10px;border-right:1px solid var(--line)
}
html[data-design="v2"] .stat .v{
font-size:13px
}
html[data-design="v2"] .tagrow{
gap:5px
}
html[data-design="v2"] .ladder .rung{
grid-template-columns:26px minmax(0,1fr) auto;gap:8px;padding:9px 10px;align-items:start
}
html[data-design="v2"] .rung .tg, html[data-design="v2"] .rung .sh{
display:none
}
html[data-design="v2"] .rung .st{
justify-self:end
}
html[data-design="v2"] .rung .ev{
grid-column:1 / -1;flex-wrap:wrap
}
html[data-design="v2"] .decide{
grid-template-columns:1fr;gap:8px
}
html[data-design="v2"] .decide .dbtns{
flex-wrap:wrap
}
html[data-design="v2"] .decide .dbtns .btn{
flex:1;justify-content:center
}
html[data-design="v2"] .side-card{
padding:12px
}
html[data-design="v2"] .poolbig{
font-size:22px
}
}
html[data-design="v2"] .tablewrap{
flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#2A313C transparent;padding:12px 18px 26px
}
html[data-design="v2"] table.dt{
width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:980px
}
html[data-design="v2"] .dt thead th{
position:sticky;top:0;z-index:3;background:#0A0D11;border-bottom:1px solid var(--line-2);
    text-align:left;font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
    padding:8px 10px;white-space:nowrap
}
html[data-design="v2"] .dt thead th .sortn{
display:inline-grid;place-items:center;width:14px;height:14px;border:1px solid var(--line-2);
    border-radius:50%;font-family:var(--font-mono);font-size:8.5px;color:var(--faint);margin-left:5px;vertical-align:1px
}
html[data-design="v2"] .dt thead th.on{
color:var(--ink)
}
html[data-design="v2"] .dt thead th.on .sortn{
border-color:var(--gold-dim);color:var(--gold)
}
html[data-design="v2"] .dt thead th .dir{
color:var(--gold);margin-left:3px;font-size:9px
}
html[data-design="v2"] .dt tbody td{
padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap
}
html[data-design="v2"] .dt tbody tr{
background:transparent
}
html[data-design="v2"] .dt tbody tr:hover td{
background:var(--panel)
}
html[data-design="v2"] .dt tbody tr.hovered td{
background:#121820
}
html[data-design="v2"] .dt .ttl{
display:flex;align-items:center;gap:8px;min-width:0
}
html[data-design="v2"] .dt .ttl img{
width:26px;height:38px;border-radius:3px;object-fit:cover;flex:0 0 auto
}
html[data-design="v2"] .dt .ttl .tx{
min-width:0
}
html[data-design="v2"] .dt .ttl .name{
font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px
}
html[data-design="v2"] .dt .ttl .auth{
font-size:10.5px;color:var(--faint);margin-top:2px
}
html[data-design="v2"] .dt .mark{
font-family:var(--font-mono);font-size:8.5px;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.06em
}
html[data-design="v2"] .dt .mark.proj{
border:1px solid var(--gold-dim);color:var(--gold);background:#1A160C
}
html[data-design="v2"] .dt .mark.fork{
border:1px solid #3A3348;color:var(--violet);background:#161222
}
html[data-design="v2"] .dt .mark.stall{
border:1px solid #4A3038;color:var(--rose);background:#180F13
}
html[data-design="v2"] .dt .mark.wish{
border:1px solid #2E3A48;color:var(--accent);background:#0F1720
}
html[data-design="v2"] .dt .num{
font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);text-align:right
}
html[data-design="v2"] .dt .num.dim{
color:var(--ink-3)
}
html[data-design="v2"] .dt .rate{
display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11.5px;color:var(--gold)
}
html[data-design="v2"] .dt .rate .cnt{
color:var(--faint);font-size:9.5px
}
html[data-design="v2"] .dt .upd{
font-family:var(--font-mono);font-size:11px;color:var(--ink-3)
}
html[data-design="v2"] .dt .fundcell{
display:flex;align-items:center;gap:7px
}
html[data-design="v2"] .dt .pbar3{
width:56px;height:3px;background:#2A2213;border-radius:2px;overflow:hidden
}
html[data-design="v2"] .dt .pbar3 i{
display:block;height:100%;background:var(--gold)
}
html[data-design="v2"] .dt .fundtxt{
font-family:var(--font-mono);font-size:10.5px;color:var(--gold)
}
html[data-design="v2"] .dt .stx{
font-family:var(--font-mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em
}
html[data-design="v2"] .dt .tags{
display:flex;gap:4px
}
html[data-design="v2"] .dt .tg{
font-size:9.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:0 4px;background:#0B0F13
}
html[data-design="v2"] .tablefoot{
display:flex;align-items:center;gap:14px;padding:9px 18px;border-top:1px solid var(--line);
    font-size:10.5px;color:var(--faint);background:#0A0D11
}
html[data-design="v2"] .tablefoot .r{
margin-left:auto;display:flex;gap:14px
}
html[data-design="v2"] .pager{
display:flex;gap:4px;margin-left:auto
}
html[data-design="v2"] .pager button{
width:22px;height:22px;border:1px solid var(--line);border-radius:4px;font-family:var(--font-mono);font-size:10px;color:var(--ink-3)
}
html[data-design="v2"] .pager button.on{
border-color:var(--gold-dim);color:var(--gold);background:#151003
}
@media (max-width: 430px){
html[data-design="v2"] .tablewrap{
padding:8px 10px 20px
}
html[data-design="v2"] table.dt{
min-width:0;width:100%;font-size:11px
}
html[data-design="v2"] .dt th:nth-child(1), html[data-design="v2"] .dt td:nth-child(1), html[data-design="v2"] .dt th:nth-child(3), html[data-design="v2"] .dt td:nth-child(3), html[data-design="v2"] .dt th:nth-child(4), html[data-design="v2"] .dt td:nth-child(4), html[data-design="v2"] .dt th:nth-child(6), html[data-design="v2"] .dt td:nth-child(6), html[data-design="v2"] .dt th:nth-child(7), html[data-design="v2"] .dt td:nth-child(7), html[data-design="v2"] .dt th:nth-child(8), html[data-design="v2"] .dt td:nth-child(8), html[data-design="v2"] .dt th:nth-child(9), html[data-design="v2"] .dt td:nth-child(9){
display:none
}
html[data-design="v2"] .dt .ttl .name{
max-width:150px
}
html[data-design="v2"] .dt .ttl img{
width:22px;height:32px
}
html[data-design="v2"] .dt thead th, html[data-design="v2"] .dt tbody td{
padding:6px 7px
}
}
/* =============================================================================
   LIVE BEHAVIOUR + COMPONENT GLUE (appended after the ported mockup CSS).
   Everything stays scoped to html[data-design="v2"].
   ============================================================================= */
html[data-design="v2"] .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html[data-design="v2"] .v2-skip{position:fixed;left:12px;top:-40px;z-index:100;padding:8px 12px;
  background:var(--gold);color:#151004;border-radius:6px;font-weight:600;font-size:12px}
html[data-design="v2"] .v2-skip:focus{top:10px}
html[data-design="v2"] .lrow:hover .preview,
html[data-design="v2"] .lrow:focus-within .preview{opacity:1;pointer-events:auto}
html[data-design="v2"] .cover-thumb .cover-art,
html[data-design="v2"] .cw .cover-art,
html[data-design="v2"] .ttl > a .cover-art,
html[data-design="v2"] .cv .cover-art,
html[data-design="v2"] .preview .cover .cover-art{width:100%;height:100%;display:block}
html[data-design="v2"] .cover-art{background:#0A0C0F}
html[data-design="v2"] .lside .author{display:block;font-size:10.5px;color:var(--faint);max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-design="v2"] .lrow{overflow:visible}
html[data-design="v2"] .preview{transition:opacity .12s ease}
html[data-design="v2"] .pager-bar{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:9px 22px;border-top:1px solid var(--line);background:#0A0D11;color:var(--faint);font-size:11px}
html[data-design="v2"] .pager-nav{margin-left:auto;display:flex;gap:5px;align-items:center}
html[data-design="v2"] .pgn{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:5px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
html[data-design="v2"] .pgn.on{border-color:var(--gold-dim);color:var(--gold);background:#151003}
html[data-design="v2"] .v2-empty{margin:26px 14px;padding:34px 22px;border:1px dashed var(--line-2);
  border-radius:10px;background:var(--panel);text-align:center}
html[data-design="v2"] .v2-empty-title{font-family:var(--font-display);font-size:17px;margin-bottom:8px}
html[data-design="v2"] .v2-empty .hint{max-width:520px;margin:0 auto 14px}
html[data-design="v2"] .libstats{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:2px 0 8px}
html[data-design="v2"] .libstats div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--line);
  padding:3px 0}
html[data-design="v2"] .libstats dt{color:var(--faint);font-size:10.5px}
html[data-design="v2"] .libstats dd{font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}
html[data-design="v2"] .clock-line{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);margin:2px 0 6px}
html[data-design="v2"] .gold-note{color:var(--gold)}
html[data-design="v2"] .fchip .x{text-decoration:none}
html[data-design="v2"] .chips .save,html[data-design="v2"] .chips .clear{text-decoration:none}
html[data-design="v2"] .facet summary{cursor:pointer;list-style:none}
html[data-design="v2"] .facet summary::-webkit-details-marker{display:none}
html[data-design="v2"] .facet .facet-body a{text-decoration:none}
html[data-design="v2"] .topbar .logo,html[data-design="v2"] .topnav a,html[data-design="v2"] .rail a{text-decoration:none}
html[data-design="v2"] .ru-tx{display:block;min-width:0}
html[data-design="v2"] .ru .t{display:block}
html[data-design="v2"] .ttl > a{flex:0 0 auto}
html[data-design="v2"] .statusbar .k{color:var(--ink-3)}
html[data-design="v2"] .center{background:transparent}
html[data-design="v2"] .body{min-height:0}
html[data-design="v2"] .shell{min-height:100vh}
html[data-design="v2"] .list{padding-top:8px}
html[data-design="v2"] .lrow .lact .btn{cursor:pointer}
html[data-design="v2"] .lrow .lact a{text-decoration:none}

/* v2 live fixes: anchor-based controls (the mockups used <button>) */
html[data-design="v2"] .viewswitch a{padding:6px 12px;font-size:12px;color:var(--ink-3);
  display:flex;gap:6px;align-items:center;text-decoration:none}
html[data-design="v2"] .viewswitch a.on{background:var(--panel-3);color:var(--ink)}
html[data-design="v2"] .viewswitch a:hover{color:var(--ink)}
html[data-design="v2"] .viewswitch .vs-ico{font-family:var(--font-mono);font-size:11px;opacity:.85}
html[data-design="v2"] .hotbar .slot{text-decoration:none}
html[data-design="v2"] .hotbar .slot.on{border-color:var(--gold-dim);background:#1A160C;color:var(--gold)}
html[data-design="v2"] .facet[open] .facet-body{display:block}
html[data-design="v2"] .facet[open] .caret,
html[data-design="v2"] .facet[open] .facet-head .tot{color:var(--ink-2)}
html[data-design="v2"] .facet .facet-head .tot{margin-left:auto}

/* Table cover thumbnails (mockup used <img>; we render inline SVG). */
html[data-design="v2"] .dt .ttl > a .cover-art{width:26px;height:38px;border-radius:3px;flex:0 0 auto}
html[data-design="v2"] .dt .ttl{align-items:center}
html[data-design="v2"] .tablewrap{flex:1;min-height:0;overflow:auto;padding:10px 18px 22px}
html[data-design="v2"] .dt{width:100%;min-width:960px}
html[data-design="v2"] .dt .ttl .name{font-weight:600;font-size:12.5px;color:var(--ink)}
html[data-design="v2"] .dt .ttl .auth{font-size:10.5px;color:var(--faint);margin-top:2px}
html[data-design="v2"] .dt .stx{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em}
html[data-design="v2"] .dt thead th{position:sticky;top:0;z-index:3;background:#0A0D11;
  border-bottom:1px solid var(--line-2);text-align:left;font-weight:600;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px;white-space:nowrap}
html[data-design="v2"] .dt tbody td{padding:7px 10px;border-bottom:1px solid var(--line);
  vertical-align:middle;white-space:nowrap;font-size:12px}
html[data-design="v2"] .dt tbody tr:hover td{background:var(--panel)}
html[data-design="v2"] .dt .num{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);text-align:right}

/* =============================================================================
   LIGHT THEME for the v2 design system. The founder-settled mockups are dark;
   light keeps the same grammar with a warm paper stack and AA-safe ink.
   ============================================================================= */
html[data-design="v2"][data-theme="light"]{
  --bg:#F5F1E8; --bg-2:#EFEADD; --panel:#FFFDF8; --panel-2:#F7F2E7; --panel-3:#EFE7D8;
  --line:#D9CDB6; --line-2:#C4B69C;
  --ink:#1B1610; --ink-2:#3D3427; --ink-3:#5A4E3D; --faint:#766A57;
  --accent:#1D5F96; --accent-dim:#8FB6D6;
  --gold:#7A4E0C; --gold-dim:#B08A4A;
  --green:#1F6B3A; --violet:#5B4A96; --rose:#9C2F45;
  --fandom:#1D5F96; --kind:#7A4E0C; --format:#5B4A96;
  --shadow-lg:0 22px 60px rgba(60,45,20,.16); --shadow-sm:0 2px 8px rgba(60,45,20,.1);
}
html[data-design="v2"][data-theme="light"] body,
html[data-design="v2"][data-theme="light"] .shell{background:var(--bg);color:var(--ink)}
html[data-design="v2"][data-theme="light"] .topbar{background:#FBF8F1;border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .subbar{background:var(--bg-2);border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .rail,
html[data-design="v2"][data-theme="light"] .right{background:var(--bg-2);border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .center-head{background:linear-gradient(180deg,#FBF8F1,transparent)}
html[data-design="v2"][data-theme="light"] .statusbar,
html[data-design="v2"][data-theme="light"] .pager-bar{background:#FBF8F1;border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .search,
html[data-design="v2"][data-theme="light"] .slot,
html[data-design="v2"][data-theme="light"] .viewswitch{background:var(--panel);border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .lrow:hover{background:var(--panel-2);border-color:var(--line-2)}
html[data-design="v2"][data-theme="light"] .mtag,
html[data-design="v2"][data-theme="light"] .fchip{background:var(--panel);border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .preview{background:var(--panel);border-color:var(--line-2)}
html[data-design="v2"][data-theme="light"] .preview .cover:after{background:linear-gradient(180deg,transparent 30%,var(--panel) 100%)}
html[data-design="v2"][data-theme="light"] .card{background:var(--panel);border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .cw:after{background:linear-gradient(180deg,rgba(245,241,232,0) 45%,rgba(245,241,232,.8) 100%)}
html[data-design="v2"][data-theme="light"] .btn{background:var(--panel);border-color:var(--line-2);color:var(--ink-2)}
html[data-design="v2"][data-theme="light"] .btn.gold{background:var(--gold);border-color:var(--gold);color:#FFF9EC}
html[data-design="v2"][data-theme="light"] .facet-head:hover,
html[data-design="v2"][data-theme="light"] .fval:hover,
html[data-design="v2"][data-theme="light"] .realm:hover{background:var(--panel-2)}
html[data-design="v2"][data-theme="light"] .fval.on{background:#E7EEDD;color:var(--ink);box-shadow:inset 0 0 0 1px #B7C6A2}
html[data-design="v2"][data-theme="light"] .fval.on .n{color:var(--green)}

/* =============================================================================
   v2 project page — the existing v1.3 funding anatomy re-lit with the v2 system.
   Markup is unchanged (forms/actions stay identical); this block only re-lights
   surfaces, type, chips, ladder rungs and controls to the founder-settled look.
   ============================================================================= */
html[data-design="v2"] .v2-funds{
  --body-bg:var(--bg);
  background:
    radial-gradient(1100px 460px at 78% -8%, #101722 0%, transparent 62%),
    var(--bg);
  color:var(--ink);font-family:var(--font-ui);font-size:13.5px;line-height:1.55;
}
html[data-design="v2"] .v2-funds::before,
html[data-design="v2"] .v2-funds::after{display:none}
html[data-design="v2"] .v2-fund-container{max-width:1240px;margin:0 auto;padding:0 24px}
html[data-design="v2"] .v2-funds .breadcrumb{font-size:11px;color:var(--faint);margin-bottom:6px;letter-spacing:.02em}
html[data-design="v2"] .v2-funds .breadcrumb a{color:var(--accent);text-decoration:none}
html[data-design="v2"] .v2-funds .breadcrumb a:hover{text-decoration:underline}

/* hero = banner + cover + title */
html[data-design="v2"] .fund-hero{
  position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;
  margin:18px 0 14px;padding:26px 26px 22px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(130% 120% at 82% -20%, rgba(232,177,76,.20) 0%, transparent 46%),
    radial-gradient(80% 130% at 8% 120%, rgba(124,196,255,.16) 0%, transparent 55%),
    linear-gradient(140deg,#151b24 0%,#0c1015 55%,#0a0d11 100%);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
}
html[data-design="v2"] .fund-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px);
}
html[data-design="v2"] .fund-hero-cover{
  position:relative;z-index:1;width:150px;height:212px;border-radius:8px;overflow:hidden;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(232,177,76,.85) 0%, rgba(232,177,76,.22) 42%, transparent 70%),
    linear-gradient(180deg,#2a3040 0%,#151a22 100%);
  box-shadow:var(--shadow-sm);
}
html[data-design="v2"] .fund-hero-initial{
  font-family:var(--font-display);font-size:64px;font-weight:700;color:#fffdf7;opacity:.92;
  text-shadow:0 2px 18px rgba(0,0,0,.45)
}
html[data-design="v2"] .fund-hero-main{position:relative;z-index:1;min-width:0}
html[data-design="v2"] .fund-hero-main h1{font-family:var(--font-display);font-size:30px;
  line-height:1.16;font-weight:700;letter-spacing:-.01em;margin:2px 0 8px;color:var(--ink)}
html[data-design="v2"] .fund-hero-badges{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
html[data-design="v2"] .v2-funds .badge{
  position:static;left:auto;top:auto;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  color:var(--ink-3);font-weight:500
}
html[data-design="v2"] .v2-funds .badge-gold,
html[data-design="v2"] .v2-funds .badge-live{border-color:var(--gold-dim);color:var(--gold);background:#1a1608}
html[data-design="v2"] .v2-funds .badge-ok{border-color:#2e4a33;color:var(--green);background:#0f1c13}
html[data-design="v2"] .fund-pitch{max-width:76ch;color:var(--ink-2);font-size:13.5px;margin:0 0 8px}
html[data-design="v2"] .fund-hero-meta{font-size:11.5px;color:var(--ink-3);margin:0 0 10px}
html[data-design="v2"] .fund-tagbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
html[data-design="v2"] .v2-funds .tag-pill{
  font-size:11px;color:var(--ink-2);border:1px solid var(--line);border-radius:4px;
  padding:1px 7px;background:var(--panel);text-decoration:none
}
html[data-design="v2"] .v2-funds .tag-pill:hover{color:var(--ink);border-color:var(--line-2)}
html[data-design="v2"] .fund-hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
html[data-design="v2"] .v2-funds .btn{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:7px;
  font-size:12px;font-weight:600;border:1px solid var(--line-2);color:var(--ink-2);
  background:rgba(255,255,255,.03);text-decoration:none;cursor:pointer
}
html[data-design="v2"] .v2-funds .btn:hover{color:var(--ink);border-color:#3b4654;background:rgba(255,255,255,.06)}
html[data-design="v2"] .v2-funds .btn-primary,
html[data-design="v2"] .v2-funds .btn.btn-primary{background:var(--gold);border-color:var(--gold);color:#151004}
html[data-design="v2"] .v2-funds .btn-primary:hover{filter:brightness(1.06);color:#151004}
html[data-design="v2"] .v2-funds .btn-lg{height:36px;padding:0 16px;font-size:12.5px}
html[data-design="v2"] .v2-funds .btn-small{height:26px;padding:0 10px;font-size:11px}
html[data-design="v2"] .v2-funds input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-design="v2"] .v2-funds select,
html[data-design="v2"] .v2-funds textarea{
  background:#0d1116;border:1px solid var(--line-2);color:var(--ink);border-radius:7px;
  padding:8px 10px;font:inherit;font-size:12.5px
}
html[data-design="v2"] .v2-funds input::placeholder,html[data-design="v2"] .v2-funds textarea::placeholder{color:var(--faint)}

/* stat strip + lock story */
html[data-design="v2"] .fund-strip{
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:11px 0 0;
  border-top:1px solid var(--line);margin-top:4px;color:var(--ink-2);font-size:11.5px
}
html[data-design="v2"] .fund-strip-main{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
html[data-design="v2"] .fund-strip-phase{font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
html[data-design="v2"] .fund-strip-m{color:var(--ink)}
html[data-design="v2"] .fund-strip-clock{color:var(--ink-3)}
html[data-design="v2"] .fund-strip-sub{width:100%;color:var(--faint);font-size:11px}
html[data-design="v2"] .fund-draft-terms{color:var(--ink-3)}
html[data-design="v2"] .fund-seal{color:var(--accent)}
html[data-design="v2"] .fund-contract-line{color:var(--faint);margin-top:8px}
html[data-design="v2"] .fund-lock-steps{display:none}

/* body grid: ladder left, sections right (existing anatomy) */
html[data-design="v2"] .fund-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:18px;align-items:start;margin:18px 0 30px}
html[data-design="v2"] .v2-funds .card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;padding:16px 18px
}
html[data-design="v2"] .v2-funds .card-title{font-family:var(--font-display);font-size:15px;
  font-weight:600;color:var(--ink);margin:0 0 10px}
html[data-design="v2"] .v2-funds .muted{color:var(--ink-3)}
html[data-design="v2"] .v2-funds .small{font-size:11.5px;line-height:1.5}
html[data-design="v2"] .v2-funds .fund-rungs{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
html[data-design="v2"] .v2-funds .fund-rung{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:11px 12px;border-radius:9px;
  border:1px solid var(--line);background:#0e1217
}
html[data-design="v2"] .v2-funds .fund-rung-live{border-color:var(--gold-dim);background:#141208}
html[data-design="v2"] .v2-funds .fund-rung-rail{display:flex;justify-content:center}
html[data-design="v2"] .v2-funds .fund-rung-glyph{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
html[data-design="v2"] .v2-funds .fund-rung-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-design="v2"] .v2-funds .fund-rung-pos{font-family:var(--font-mono);font-size:10.5px;color:var(--gold);letter-spacing:.06em}
html[data-design="v2"] .v2-funds .fund-rung-head h3{font-size:13px;font-weight:600;color:var(--ink);margin:0}
html[data-design="v2"] .v2-funds .fund-rung-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);margin-top:4px}
html[data-design="v2"] .v2-funds .fund-rung-meta strong{color:var(--ink-2);font-weight:600}
html[data-design="v2"] .v2-funds .fund-rung-share{height:3px;background:#241f14;border-radius:2px;margin:6px 0;overflow:hidden}
html[data-design="v2"] .v2-funds .fund-share-bar{height:100%;background:var(--gold)}
html[data-design="v2"] .v2-funds a{color:var(--accent)}
html[data-design="v2"] .v2-funds a:hover{color:#a9dcff}
html[data-design="v2"] .v2-funds code{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);background:#0d1116;padding:1px 5px;border-radius:4px}
html[data-design="v2"] .v2-funds .fund-pool,
html[data-design="v2"] .v2-funds .fund-mypledge,
html[data-design="v2"] .v2-funds .fund-patrons{background:var(--panel);border:1px solid var(--line);border-radius:12px}
html[data-design="v2"] .v2-funds .fund-mobile-bar{display:none}
html[data-design="v2"] .v2-funds .site-footer{border-color:var(--line);background:var(--bg-2);color:var(--faint)}
@media (max-width:980px){
  html[data-design="v2"] .fund-hero{grid-template-columns:110px minmax(0,1fr);padding:18px;gap:14px}
  html[data-design="v2"] .fund-hero-cover{width:110px;height:158px}
  html[data-design="v2"] .fund-hero-main h1{font-size:23px}
  html[data-design="v2"] .fund-layout{grid-template-columns:1fr}
}

/* error page egg placement (Mote peeks around the 404 card) */
html[data-design="v2"] .error-card-egg,
.error-card-egg{position:relative}
.error-card-egg .egg-404{right:14px;bottom:8px;width:104px}
html[data-design="v2"] .egg-search-radar{width:22px;height:22px;flex:0 0 auto}
html[data-design="v2"] .v2-empty .egg-empty{width:96px;margin:0 auto 10px}
html[data-design="v2"] .ladder-climber{position:absolute;right:8px;bottom:-4px;width:44px}
.error-card-egg .egg-404{right:16px;top:14px;bottom:auto;width:84px}
@media (max-width:640px){.error-card-egg .egg-404{width:64px;top:8px;right:8px}}

/* Light theme: marker chips + project hero must not keep dark surfaces. */
html[data-design="v2"][data-theme="light"] .lt .mark.proj,
html[data-design="v2"][data-theme="light"] .lt .mark.fork,
html[data-design="v2"][data-theme="light"] .lt .mark.wish,
html[data-design="v2"][data-theme="light"] .lt .mark.stall{
  border-color:var(--gold-dim);color:var(--gold);background:#F3E7CE
}
html[data-design="v2"][data-theme="light"] .v2-funds{background:var(--bg);color:var(--ink)}
html[data-design="v2"][data-theme="light"] .fund-hero{
  background:
    radial-gradient(130% 120% at 82% -20%, rgba(122,78,12,.13) 0%, transparent 46%),
    radial-gradient(80% 130% at 8% 120%, rgba(29,95,150,.10) 0%, transparent 55%),
    linear-gradient(140deg,#FFFDF8 0%,#F7F2E7 60%,#F2EBDC 100%);
  border-color:var(--line-2);box-shadow:var(--shadow-lg)
}
html[data-design="v2"][data-theme="light"] .fund-hero-cover{
  border-color:rgba(122,78,12,.25);box-shadow:var(--shadow-sm)
}
html[data-design="v2"][data-theme="light"] .fund-hero-main h1{color:var(--ink)}
html[data-design="v2"][data-theme="light"] .v2-funds .badge{
  border-color:var(--line-2);background:#F7F2E7;color:var(--ink-2)
}
html[data-design="v2"][data-theme="light"] .v2-funds .badge-gold,
html[data-design="v2"][data-theme="light"] .v2-funds .badge-live{border-color:var(--gold-dim);color:var(--gold);background:#F3E7CE}
html[data-design="v2"][data-theme="light"] .v2-funds .badge-ok{border-color:#9BC3A7;color:var(--green);background:#E8F1E4}
html[data-design="v2"][data-theme="light"] .v2-funds .btn{background:#FFFDF8;border-color:var(--line-2);color:var(--ink-2)}
html[data-design="v2"][data-theme="light"] .v2-funds .btn:hover{background:#F3ECDD;color:var(--ink)}
html[data-design="v2"][data-theme="light"] .v2-funds .btn-primary{background:var(--gold);border-color:var(--gold);color:#FFF9EC}
html[data-design="v2"][data-theme="light"] .v2-funds .btn-primary:hover{color:#FFF9EC}
html[data-design="v2"][data-theme="light"] .v2-funds .tag-pill{background:#FFFDF8;border-color:var(--line);color:var(--ink-2)}
html[data-design="v2"][data-theme="light"] .v2-funds input,
html[data-design="v2"][data-theme="light"] .v2-funds select,
html[data-design="v2"][data-theme="light"] .v2-funds textarea{background:#FFFDF8;border-color:var(--line-2);color:var(--ink)}
html[data-design="v2"][data-theme="light"] .fund-strip{border-color:var(--line);color:var(--ink-2)}
html[data-design="v2"][data-theme="light"] .fund-strip-phase{color:var(--gold)}
html[data-design="v2"][data-theme="light"] .fund-strip-sub{color:var(--faint)}
html[data-design="v2"][data-theme="light"] .v2-funds .fund-rung{background:#FFFDF8;border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .v2-funds .fund-rung-live{background:#F7EFDE;border-color:var(--gold-dim)}
html[data-design="v2"][data-theme="light"] .v2-funds .fund-rung-head h3{color:var(--ink)}
html[data-design="v2"][data-theme="light"] .v2-funds .fund-rung-meta{color:var(--ink-3)}
html[data-design="v2"][data-theme="light"] .v2-funds .muted{color:var(--ink-3)}
html[data-design="v2"][data-theme="light"] .v2-funds .card{background:var(--panel);border-color:var(--line)}

/* Contrast gate fixes: WCAG AA for micro-labels (audited via scripts/theme_audit.sh) */
html[data-design="v2"]{--faint:#7E8A98}
html[data-design="v2"][data-theme="light"]{--faint:#6B5E4B}
html[data-design="v2"] .rail h4,
html[data-design="v2"] .rhead h4, html[data-design="v2"] .rhead h3{color:var(--faint)}
html[data-design="v2"] .realm .count,
html[data-design="v2"] .facet-head .tot,
html[data-design="v2"] .slot .n,
html[data-design="v2"] .fchip .x{color:var(--faint)}
html[data-design="v2"] .fchip .x:hover{color:var(--rose)}
html[data-design="v2"][data-theme="light"] .hotbar .slot.on{
  background:#F3E7CE;color:var(--gold);border-color:var(--gold-dim)
}
html[data-design="v2"][data-theme="light"] .hotbar .slot.on .n{color:var(--gold-deep)}
html[data-design="v2"][data-theme="light"] .pgn.on{background:#F3E7CE;color:var(--gold);border-color:var(--gold-dim)}
html[data-design="v2"][data-theme="light"] .pgn{border-color:var(--line);color:var(--ink-3)}

/* =============================================================================
   Issue #293 — decluttered works shell.
   The permanent three-column rails become explicit, keyboard-operable
   disclosures: the favourite-realm rail (left, off by default), the updates
   dropdown (subbar), the one-clock/library digest (topbar) and the big
   filter + sort panel (right, where the old right rail lived). The canvas keeps
   the full width, so 1280/768/360 all stay usable.
   Append-only: the founder-settled blocks above stay intact.
   ============================================================================= */

/* ---- layout: one dense canvas, panels are overlays ---- */
html[data-design="v2"] .body{display:flex;min-height:0}
html[data-design="v2"] .center{flex:1 1 auto;width:100%;max-width:1240px;margin:0 auto}

/* ---- shared disclosure chrome ---- */
html[data-design="v2"] details > summary{list-style:none}
html[data-design="v2"] details > summary::-webkit-details-marker{display:none}
html[data-design="v2"] summary:focus-visible,
html[data-design="v2"] .panel a:focus-visible,
html[data-design="v2"] .panel button:focus-visible,
html[data-design="v2"] .panel input:focus-visible,
html[data-design="v2"] .panel select:focus-visible,
html[data-design="v2"] .umenus a:focus-visible,
html[data-design="v2"] .umenus button:focus-visible,
html[data-design="v2"] .cmenu a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px
}
html[data-design="v2"] .subbar details{flex:0 0 auto}
html[data-design="v2"] .panelbtn,
html[data-design="v2"] .filterbtn{
  display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:6px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font-size:12px;
  cursor:pointer;user-select:none
}
html[data-design="v2"] .panelbtn:hover,
html[data-design="v2"] .filterbtn:hover{color:var(--ink);border-color:var(--line-2)}
html[data-design="v2"] details[open] > .panelbtn,
html[data-design="v2"] details[open] > .filterbtn{
  color:var(--ink);border-color:var(--line-2);background:var(--panel-2)
}
html[data-design="v2"] .panelbtn .caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--faint);margin-left:1px;transition:transform .15s
}
html[data-design="v2"] details[open] > .panelbtn .caret{transform:rotate(180deg)}
html[data-design="v2"] .pb-ico{font-size:12px;line-height:1;color:var(--gold)}
html[data-design="v2"] .filterbtn .pb-label{color:inherit}
html[data-design="v2"] .fb-count{
  display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--gold);color:#151004;font-family:var(--font-mono);font-size:9.5px;font-weight:600
}

/* ---- slide-over panels (left: favourites, right: filters) ---- */
html[data-design="v2"] .panel{
  position:fixed;top:100px;bottom:28px;z-index:36;
  background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A313C transparent;
  padding:16px 16px 24px
}
html[data-design="v2"] .railpanel > .panel{
  left:0;width:min(320px,88vw);border-radius:0 12px 12px 0;border-left:0
}
html[data-design="v2"] .filters > .filter-panel{
  right:0;width:min(380px,92vw);border-radius:12px 0 0 12px;border-right:0
}
html[data-design="v2"] .panel-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
html[data-design="v2"] .panel-head h2{
  font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.01em
}
html[data-design="v2"] .panel-count{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-dim);border-radius:4px;padding:1px 6px
}
html[data-design="v2"] .panel-done{
  margin-left:auto;font-size:11.5px;color:var(--accent);border:1px solid var(--line-2);
  border-radius:6px;padding:3px 10px;white-space:nowrap
}
html[data-design="v2"] .panel-done:hover{color:var(--ink);border-color:#3B4654}
html[data-design="v2"] .panel-hint{font-size:11px;color:var(--faint);line-height:1.5;margin:0 0 10px}
html[data-design="v2"] .rail-panel .realm{margin-bottom:1px}
html[data-design="v2"] .rail-panel .rail-foot{margin-top:14px;padding:10px 4px 0;border-top:1px solid var(--line)}

/* ---- filter panel content ---- */
html[data-design="v2"] .facet-search{display:flex;gap:6px;margin:0 0 14px}
html[data-design="v2"] .facet-search input{
  flex:1;min-width:0;height:30px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);padding:0 9px;font:inherit;font-size:12px
}
html[data-design="v2"] .facet-search input::placeholder{color:var(--faint)}
html[data-design="v2"] .panel-sec{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--line)}
html[data-design="v2"] .panel-sec:last-of-type{border-bottom:0}
html[data-design="v2"] .panel-sec h3{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:0 0 8px
}
html[data-design="v2"] .inline-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
html[data-design="v2"] .inline-controls select{
  flex:1;min-width:0;height:30px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-2);padding:0 8px;font:inherit;font-size:12px
}
html[data-design="v2"] .panel-link{display:inline-block;margin-top:9px;font-size:11.5px;color:var(--accent)}
html[data-design="v2"] .panel-link:hover{color:var(--ink)}
html[data-design="v2"] .panel-foot{display:flex;align-items:center;gap:14px;margin-top:4px}
html[data-design="v2"] .filter-panel details.facet[open] > .facet-body{display:block}
html[data-design="v2"] .filter-panel details.facet[open] .caret{transform:rotate(180deg)}
html[data-design="v2"] .filter-panel .facet-head{margin-top:2px}
html[data-design="v2"] .filter-panel .fval{font-size:12px}

/* ---- topbar dropdowns: updates, one clock, account ---- */
html[data-design="v2"] .usermenu,
html[data-design="v2"] .clockmenu,
html[data-design="v2"] .updates-menu{position:relative}
html[data-design="v2"] .usermenu > summary.avatar{cursor:pointer}
html[data-design="v2"] .umenus,
html[data-design="v2"] .cmenu{
  position:absolute;top:calc(100% + 12px);right:0;z-index:45;
  width:340px;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:12px;max-height:min(72vh,560px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#2A313C transparent
}
html[data-design="v2"] .updates-menu > .umenus{left:0;right:auto;width:390px}
html[data-design="v2"] .umenus .rblock:last-child,
html[data-design="v2"] .cmenu .rblock:last-child,
html[data-design="v2"] .updates-pop .rblock:last-child{margin-bottom:0}
html[data-design="v2"] .um-head{margin:0 0 10px}
html[data-design="v2"] .um-done{display:none}
html[data-design="v2"] .umenu-head{
  display:flex;align-items:center;gap:9px;padding:2px 2px 10px;border-bottom:1px solid var(--line);
  margin-bottom:8px
}
html[data-design="v2"] .um-ident{display:flex;flex-direction:column;line-height:1.3;min-width:0}
html[data-design="v2"] .um-ident b{
  font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis
}
html[data-design="v2"] .um-ident span{font-size:10.5px;color:var(--faint)}
html[data-design="v2"] .umenu-item{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 8px;
  border-radius:6px;font-size:12.5px;color:var(--ink-2)
}
html[data-design="v2"] .umenu-item:hover{background:var(--panel-2);color:var(--ink)}
html[data-design="v2"] .umenu-sep{border:0;border-top:1px solid var(--line);margin:6px 4px}
html[data-design="v2"] .umenu-logout{margin-top:2px}
html[data-design="v2"] .umenu-logout .umenu-item{color:var(--ink-3)}
html[data-design="v2"] .umenu-logout .umenu-item:hover{color:var(--rose);background:var(--panel-2)}
html[data-design="v2"] .updates-pop .rhead{margin-top:2px}

/* ---- view switch uses links (role=tab) in the live shell ---- */
html[data-design="v2"] .viewswitch a{
  padding:6px 12px;font-size:12px;color:var(--ink-3);display:flex;gap:6px;align-items:center
}
html[data-design="v2"] .viewswitch a.on{background:var(--panel-3);color:var(--ink)}
html[data-design="v2"] .viewswitch a:hover{color:var(--ink)}

/* ---- tablet: keep the subbar on one row, anchored dropdowns ---- */
@media (max-width:900px){
  html[data-design="v2"] .panelbtn .pb-label,
  html[data-design="v2"] .sortlink{display:none}
  html[data-design="v2"] .hotbar{overflow-x:auto;min-width:0;flex:1 1 auto;scrollbar-width:none}
  html[data-design="v2"] .slot{flex:0 0 auto}
  html[data-design="v2"] .viewswitch .vs-label{display:none}
  html[data-design="v2"] .updates-menu{position:static}
  html[data-design="v2"] .updates-menu > .umenus{
    left:auto;right:12px;top:calc(100% + 6px);width:min(390px,calc(100vw - 24px))
  }
}

/* ---- phone: disclosures become full-screen sheets with an explicit Done ---- */
@media (max-width:640px){
  html[data-design="v2"] .topnav{display:flex}
  html[data-design="v2"] .topnav a{padding:6px 9px;font-size:12.5px}
  html[data-design="v2"] .subbar{z-index:50}
  html[data-design="v2"] .panel,
  html[data-design="v2"] .railpanel > .panel,
  html[data-design="v2"] .filters > .filter-panel,
  html[data-design="v2"] .updates-menu > .umenus{
    position:fixed;inset:0;width:auto;max-width:none;max-height:none;border:0;border-radius:0;
    z-index:70;padding:16px 16px 28px;overflow-y:auto;background:var(--bg-2);box-shadow:none
  }
  /* Top-bar dropdowns stay anchored under the bar (the bar sits above the
     subbar while one is open so the menu is never clipped by it). */
  html[data-design="v2"] .topbar:has(details[open]){z-index:60}
  html[data-design="v2"] .umenus,
  html[data-design="v2"] .cmenu{
    position:fixed;top:56px;left:auto;right:8px;width:min(340px,calc(100vw - 16px));
    max-height:calc(100vh - 150px);overflow-y:auto;z-index:80;
    border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow-lg);
    padding:12px;background:var(--panel)
  }
  html[data-design="v2"] .panel-done.um-done,
  html[data-design="v2"] .updates-pop .um-done{display:inline-block}
  html[data-design="v2"] .umenus .panel-head{position:sticky;top:0;background:var(--bg-2);z-index:1}
}

/* ---- light theme for the new surfaces ---- */
html[data-design="v2"][data-theme="light"] .panel,
html[data-design="v2"][data-theme="light"] .umenus,
html[data-design="v2"][data-theme="light"] .cmenu{background:var(--panel);border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .panelbtn,
html[data-design="v2"][data-theme="light"] .filterbtn{
  background:var(--panel);border-color:var(--line);color:var(--ink-2)
}
html[data-design="v2"][data-theme="light"] details[open] > .panelbtn,
html[data-design="v2"][data-theme="light"] details[open] > .filterbtn{background:#F3ECDD;color:var(--ink)}
html[data-design="v2"][data-theme="light"] .facet-search input,
html[data-design="v2"][data-theme="light"] .inline-controls select{
  background:#FFFDF8;border-color:var(--line);color:var(--ink)
}
html[data-design="v2"][data-theme="light"] .umenu-item:hover{background:#F3ECDD}
html[data-design="v2"][data-theme="light"] .umenu-head,
html[data-design="v2"][data-theme="light"] .umenu-sep,
html[data-design="v2"][data-theme="light"] .panel-sec,
html[data-design="v2"][data-theme="light"] .rail-panel .rail-foot{border-color:var(--line)}
html[data-design="v2"][data-theme="light"] .viewswitch a{color:var(--ink-3)}
html[data-design="v2"][data-theme="light"] .viewswitch a.on{background:var(--panel-3);color:var(--ink)}
@media (max-width:640px){
  html[data-design="v2"][data-theme="light"] .panel,
  html[data-design="v2"][data-theme="light"] .updates-menu > .umenus{background:var(--bg-2)}
}

/* Phone: the subbar wraps to two tidy rows — hotbar on top, controls below. */
@media (max-width:430px){
  html[data-design="v2"] .hotbar{order:1;width:100%}
  html[data-design="v2"] .updates-menu{order:2}
  html[data-design="v2"] .filters{order:3}
  html[data-design="v2"] .railpanel{order:4}
  html[data-design="v2"] .viewswitch{order:5;margin-left:auto}
}

/* =============================================================================
   Realms Phase 1 (#301/#302) — /realms directory, /r realm pages, favourites.
   Document-flow pages (not the works canvas): same v2 vars/topbar, simple
   scrollable body. All selectors are scoped to body.realms-v2.
   ============================================================================= */
html[data-design="v2"] body.realms-v2{overflow:auto;height:auto;min-height:100vh;background:var(--bg)}
html[data-design="v2"] .realms-main{
  max-width:1180px;margin:0 auto;padding:22px 24px 56px;
  font-size:13.5px;line-height:1.55;color:var(--ink)
}
html[data-design="v2"] .realms-main a{color:inherit}
html[data-design="v2"] .realms-main .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
html[data-design="v2"] .realms-main .faint{color:var(--faint)}
html[data-design="v2"] .realms-main .muted{color:var(--ink-3)}

/* head ------------------------------------------------------------------ */
html[data-design="v2"] .realm-head{
  display:flex;align-items:flex-start;gap:18px;justify-content:space-between;
  margin:6px 0 18px;flex-wrap:wrap
}
html[data-design="v2"] .realm-head h1{
  font-family:var(--font-display);font-size:clamp(22px,1.4rem + .8vw,30px);
  font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px
}
html[data-design="v2"] .realm-head .lede{color:var(--ink-2);max-width:64ch;margin-top:6px}
html[data-design="v2"] .realm-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-design="v2"] .realm-head .btn,
html[data-design="v2"] .realms-main .btn{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;
  border-radius:8px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer
}
html[data-design="v2"] .realms-main .btn:hover{border-color:var(--gold-dim);color:var(--ink)}
html[data-design="v2"] .realms-main .btn-primary{background:var(--gold);border-color:var(--gold);color:#171207;font-weight:600}
html[data-design="v2"] .realms-main .btn-primary:hover{filter:brightness(1.06);color:#171207}
html[data-design="v2"] .realms-main .btn-small{min-height:30px;padding:4px 10px;font-size:12px}
html[data-design="v2"] .realms-main .btn:disabled{opacity:.4;cursor:default}

/* breadcrumb ------------------------------------------------------------ */
html[data-design="v2"] .realm-breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:11.5px;color:var(--faint);margin:0 0 14px;letter-spacing:.02em
}
html[data-design="v2"] .realm-breadcrumb a{color:var(--accent)}
html[data-design="v2"] .realm-breadcrumb a:hover{text-decoration:underline}
html[data-design="v2"] .realm-breadcrumb .crumb-current{color:var(--ink-2)}
html[data-design="v2"] .realm-breadcrumb .crumb-sep{color:var(--faint);opacity:.6}

/* search + filters ------------------------------------------------------- */
html[data-design="v2"] .realm-search{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;
  padding:14px 16px;margin:0 0 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel)
}
html[data-design="v2"] .realm-filters{display:flex;flex-wrap:wrap;gap:10px 12px;flex:1 1 520px}
html[data-design="v2"] .realm-filter{display:flex;flex-direction:column;gap:4px;min-width:0}
html[data-design="v2"] .realm-filter > span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
html[data-design="v2"] .realm-filter input[type="search"],
html[data-design="v2"] .realm-filter select{
  min-height:34px;padding:6px 10px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--ink);font:inherit;font-size:13px;min-width:170px
}
html[data-design="v2"] .realm-filter input[type="search"]{min-width:min(320px,42vw)}
html[data-design="v2"] .realm-filter-check{flex-direction:row;align-items:center;gap:8px;padding-bottom:8px}
html[data-design="v2"] .realm-filter-check input{accent-color:var(--gold);width:15px;height:15px}
html[data-design="v2"] .realm-signin-hint{flex:1 1 260px;color:var(--ink-3);font-size:12.5px;padding-bottom:8px}
html[data-design="v2"] .realm-signin-hint a{color:var(--accent)}
html[data-design="v2"] .realm-search-actions{display:flex;gap:8px;padding-bottom:1px}
html[data-design="v2"] .realm-results-meta{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--ink-3);font-size:12px;margin:2px 0 12px
}

/* cards ----------------------------------------------------------------- */
html[data-design="v2"] .realm-cards{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))
}
html[data-design="v2"] .realm-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  padding:14px 15px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:border-color .12s ease,transform .12s ease
}
html[data-design="v2"] .realm-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
html[data-design="v2"] .realm-card-main{display:flex;flex-direction:column;gap:5px;min-width:0}
html[data-design="v2"] .realm-glyph{color:var(--gold);font-size:15px;line-height:1}
html[data-design="v2"] .realm-glyph-lg{font-size:22px}
html[data-design="v2"] .realm-card-title{
  font-family:var(--font-display);font-weight:600;font-size:15.5px;letter-spacing:-.01em
}
html[data-design="v2"] .realm-card-desc{color:var(--ink-3);font-size:12.5px}
html[data-design="v2"] .realm-card-meta{color:var(--faint);font-size:11.5px;margin-top:2px}
html[data-design="v2"] .realm-path{display:block;color:var(--faint);font-size:11px;word-break:break-all}
html[data-design="v2"] .realm-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:9px
}
html[data-design="v2"] .realm-kinds{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
html[data-design="v2"] .realm-fav{margin-left:auto;display:inline-flex}
html[data-design="v2"] .realm-fav-anon{font-size:12px;color:var(--ink-3);padding:5px 8px;border-radius:6px}
html[data-design="v2"] .realm-fav-anon:hover{color:var(--gold)}
html[data-design="v2"] .realm-badges-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}

/* badges (app.css vocabulary re-lit for the v2 surfaces) ----------------- */
html[data-design="v2"] .realms-main .badge{
  display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--panel-3);color:var(--ink-3);
  font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600
}
html[data-design="v2"] .realms-main .badge-warn{border-color:var(--rose);color:var(--rose);background:transparent}
html[data-design="v2"] .realms-main .badge-muted{color:var(--faint)}

/* realm page sections ---------------------------------------------------- */
html[data-design="v2"] .realm-section{margin-top:26px}
html[data-design="v2"] .realm-section h2{
  font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:10px;
  letter-spacing:-.01em
}
html[data-design="v2"] .realm-banner{
  padding:11px 14px;border-radius:10px;margin:0 0 14px;font-size:12.5px;
  border:1px solid var(--line-2);background:var(--panel)
}
html[data-design="v2"] .realm-banner-warn{border-color:var(--gold-dim);color:var(--gold)}
html[data-design="v2"] .realms-main .stats-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
  margin:14px 0 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--line)
}
html[data-design="v2"] .realms-main .stats-row .stat{background:var(--panel-2);padding:10px 12px}
html[data-design="v2"] .realms-main .stats-row dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
html[data-design="v2"] .realms-main .stats-row dd{font-family:var(--font-display);font-size:17px;font-weight:600;margin-top:2px}
html[data-design="v2"] .realms-main .empty-state{
  padding:22px 18px;border:1px dashed var(--line-2);border-radius:12px;
  background:var(--panel);text-align:left
}
html[data-design="v2"] .realms-main .empty-title{font-family:var(--font-display);font-weight:600;font-size:15px}
html[data-design="v2"] .realms-main .empty-hint{color:var(--ink-3);font-size:12.5px;margin:5px 0 12px;max-width:62ch}

/* favourites manage page ------------------------------------------------- */
html[data-design="v2"] .realm-fav-list{display:flex;flex-direction:column;gap:8px}
html[data-design="v2"] .realm-fav-row{
  display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,auto) auto;gap:12px;align-items:center;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)
}
html[data-design="v2"] .realm-fav-pos{color:var(--faint);font-size:12px;text-align:right}
html[data-design="v2"] .realm-fav-title{display:flex;align-items:center;gap:8px;font-weight:500;min-width:0}
html[data-design="v2"] .realm-fav-meta{color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-design="v2"] .realm-fav-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
html[data-design="v2"] .realms-main .pagination{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:16px}
html[data-design="v2"] .realms-main .pagination .page{
  padding:5px 10px;border:1px solid var(--line-2);border-radius:7px;font-size:12px;color:var(--ink-3)
}
html[data-design="v2"] .realms-main .pagination .page.current{border-color:var(--gold);color:var(--gold)}
html[data-design="v2"] .realms-main .pagination .page-meta{color:var(--faint);font-size:11.5px;margin-left:4px}

/* responsive ------------------------------------------------------------- */
@media (max-width:900px){
  html[data-design="v2"] .realms-main{padding:18px 16px 44px}
  html[data-design="v2"] .realm-fav-row{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"pos title actions" "pos meta meta"}
  html[data-design="v2"] .realm-fav-pos{grid-area:pos}
  html[data-design="v2"] .realm-fav-title{grid-area:title}
  html[data-design="v2"] .realm-fav-meta{grid-area:meta}
  html[data-design="v2"] .realm-fav-actions{grid-area:actions}
}
@media (max-width:640px){
  html[data-design="v2"] .realms-main{padding:14px 12px 40px}
  html[data-design="v2"] .realm-head{flex-direction:column;gap:10px}
  html[data-design="v2"] .realm-head h1{font-size:22px}
  html[data-design="v2"] .realm-search{padding:12px}
  html[data-design="v2"] .realm-filters{flex-direction:column;flex:1 1 100%}
  html[data-design="v2"] .realm-filter input[type="search"]{min-width:0;width:100%}
  html[data-design="v2"] .realm-filter select{width:100%}
  html[data-design="v2"] .realm-search-actions{width:100%}
  html[data-design="v2"] .realm-search-actions .btn{flex:1 1 auto;justify-content:center}
  html[data-design="v2"] .realm-cards{grid-template-columns:1fr}
  html[data-design="v2"] .realm-fav-row{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"pos title" "pos meta" "actions actions"}
  html[data-design="v2"] .realm-fav-actions{justify-content:flex-start}
  html[data-design="v2"] .realms-main .stats-row{grid-template-columns:repeat(2,1fr)}
}

/* =============================================================================
   Issue #332 — push-layout realms + filters, realm views, Kindling.

   #293 put the favourite-realm rail and the filter panel behind disclosures but
   kept them as slide-over overlays. #332 makes them *columns*: opening one
   reserves its width and pushes the canvas across (YouTube-style), so results
   are never covered. Below 640px they stay full-screen sheets (the mobile
   drawer behaviour). Everything here is CSS state driven by the native
   <details open> attribute, so the no-JS surface behaves exactly like the
   JavaScript-enhanced one; app.js only mirrors the state into body classes for
   browsers without :has(), keeps one panel open at a time and remembers a panel
   across filter navigation.

   The sort hotbar is replaced by `.realmviews` — named realm-type entries
   (All works / Kindling / Fresh ink / Most loved / Long reads) that map to the
   same canonical Query sort URLs. “Kindling” is the Waidrn name that replaces
   the former trademarked rail term everywhere user-visible.
   ============================================================================= */

html[data-design="v2"]{
  --v2-rail-w:300px;
  --v2-filter-w:380px;
}

/* ---- shell: side panels push the canvas instead of covering it ---------- */
html[data-design="v2"] .body{
  padding-left:0;padding-right:0;
  transition:padding-left .18s var(--ease, ease),padding-right .18s var(--ease, ease)
}
/* CSS-only state (all current browsers) */
html[data-design="v2"] body:has(details.railpanel[open]) .body{padding-left:var(--v2-rail-w)}
html[data-design="v2"] body:has(details.filters[open]) .body{padding-right:var(--v2-filter-w)}
/* app.js mirror for engines without :has() — identical geometry */
html[data-design="v2"] body.v2-push-left .body{padding-left:var(--v2-rail-w)}
html[data-design="v2"] body.v2-push-right .body{padding-right:var(--v2-filter-w)}

/* the panels themselves: fixed to the reserved column, revealed by [open] */
html[data-design="v2"] .railpanel > .panel,
html[data-design="v2"] .filters > .filter-panel{
  display:block;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .16s var(--ease, ease),transform .18s var(--ease, ease)
}
html[data-design="v2"] .railpanel > .panel{
  left:0;width:var(--v2-rail-w);border-radius:0 12px 12px 0;
  border-left:0;transform:translateX(-10px)
}
html[data-design="v2"] .filters > .filter-panel{
  right:0;width:var(--v2-filter-w);border-radius:12px 0 0 12px;
  border-right:0;transform:translateX(10px)
}
html[data-design="v2"] details[open] > .panel,
html[data-design="v2"] details[open] > .filter-panel{
  visibility:visible;opacity:1;pointer-events:auto;transform:none
}
/* a push panel is not modal: the canvas behind it stays interactive */
html[data-design="v2"] .railpanel > .panel a,
html[data-design="v2"] .filters > .filter-panel a{cursor:pointer}

/* ---- realm views (#332): named entries, not sort chips ----------------- */
html[data-design="v2"] .realmviews{
  display:flex;align-items:center;gap:2px;min-width:0;flex:0 1 auto;
  overflow-x:auto;scrollbar-width:none;padding:0 2px
}
html[data-design="v2"] .realmviews::-webkit-scrollbar{display:none}
html[data-design="v2"] .rv{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  border-radius:6px;border:1px solid transparent;color:var(--ink-3);
  font-size:12px;white-space:nowrap;text-decoration:none;
  transition:background .12s ease,color .12s ease,border-color .12s ease
}
html[data-design="v2"] .rv:hover{background:var(--panel);color:var(--ink-2)}
html[data-design="v2"] .rv:focus-visible,
html[data-design="v2"] .presets-pop a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
html[data-design="v2"] .rv.on{
  background:var(--panel-2);border-color:var(--line);color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--gold)
}
html[data-design="v2"] .rv .rv-ico{font-size:11px;color:var(--gold);opacity:.9;line-height:1}
html[data-design="v2"] .rv.on .rv-ico{opacity:1}

/* ---- presets dropdown sits beside the realm views ---------------------- */
html[data-design="v2"] .presets-menu{position:relative}
html[data-design="v2"] .presets-menu > .umenus{
  left:0;right:auto;width:260px;margin-top:12px;z-index:46
}
html[data-design="v2"] .presets-pop .umenu-item.on{background:var(--panel-2);color:var(--ink)}

/* ---- responsive: reserve less, never cover; sheet at phone -------------- */
@media (max-width:1180px){
  html[data-design="v2"]{--v2-rail-w:272px;--v2-filter-w:340px}
}
@media (max-width:900px){
  html[data-design="v2"]{--v2-rail-w:248px;--v2-filter-w:308px}
  html[data-design="v2"] .rv{padding:0 8px}
  html[data-design="v2"] .rv .rv-tx{font-size:11.5px}
  html[data-design="v2"] .presets-menu > .umenus{width:min(260px,calc(100vw - 24px))}
}
@media (max-width:640px){
  /* phone keeps the full-screen sheet: no reserved column, no push */
  html[data-design="v2"] .body{padding-left:0;padding-right:0;transition:none}
  html[data-design="v2"] .railpanel > .panel,
  html[data-design="v2"] .filters > .filter-panel{
    width:auto;inset:0;border-radius:0;transform:none
  }
  html[data-design="v2"] .presets-menu{order:2}
  html[data-design="v2"] .realmviews{order:1;width:100%;flex-wrap:nowrap}
  html[data-design="v2"] .updates-menu{order:3}
  html[data-design="v2"] .filters{order:4}
  html[data-design="v2"] .railpanel{order:5}
  html[data-design="v2"] .viewswitch{order:6;margin-left:auto}
}
@media (prefers-reduced-motion: reduce){
  html[data-design="v2"] .body,
  html[data-design="v2"] .railpanel > .panel,
  html[data-design="v2"] .filters > .filter-panel{transition:none}
}

/* ---- light theme for the push surfaces / realm views ------------------- */
html[data-design="v2"][data-theme="light"] .rv.on{
  background:#F3ECDD;border-color:var(--line);color:var(--ink)
}
html[data-design="v2"][data-theme="light"] .rv:hover{background:#F3ECDD}
html[data-design="v2"][data-theme="light"] .presets-pop .umenu-item.on{background:#F3ECDD}

/* ---- #332: keep the list readable when a push column narrows the canvas ---
   768px with one push panel open leaves ~460px of canvas; the desktop row has
   a fixed side column and a fixed action column. Drop the side column and let
   the stat line wrap so nothing overlaps the author/time. */
@media (max-width:1100px){
  html[data-design="v2"] .lrow{
    grid-template-columns:42px minmax(0,1fr) auto;gap:10px
  }
  html[data-design="v2"] .lrow .lside{display:none}
  html[data-design="v2"] .lstats{flex-wrap:wrap;row-gap:3px;gap:10px}
  html[data-design="v2"] .tb-actions .btn,
  html[data-design="v2"] .topnav a{white-space:nowrap}
}

/* =============================================================================
   #485/#376 shell polish — responsive v2 top bar.
   =============================================================================
   Issue: at 320/360 px the shared top bar clipped the auth controls at the
   right edge, the search form was hidden by an earlier ≤430px rule, and the
   command-bar trigger was unstyled (its assets were never loaded on v2 pages).
   The shell now wraps to a second row on small screens: row one carries the
   logo, ⌘K trigger and account controls; the search field gets a full-width
   row of its own. Every control stays inside the viewport, touch targets are
   ≥44 px, dropdown/dialog panels are fixed inside the viewport, and desktop
   layouts keep the single-row shell.
   CSS only (plus loading the existing command-bar assets in the shell); no
   markup, endpoint or JS behaviour was changed.
   ============================================================================= */

/* Keep the bar flexible at every width: the search field may shrink, nothing
   inside may force the flex line wider than the viewport. */
html[data-design="v2"] .topbar { min-width: 0; }
html[data-design="v2"] .topbar .logo,
html[data-design="v2"] .topbar .topnav,
html[data-design="v2"] .topbar .cmdk,
html[data-design="v2"] .topbar .tb-actions { flex: 0 0 auto; min-width: 0; }
html[data-design="v2"] .topbar .search {
  flex: 1 1 200px; width: auto; min-width: 120px; max-width: 360px;
}
html[data-design="v2"] .topbar .cmdk-trigger { min-height: 34px; }
html[data-design="v2"] .topbar a,
html[data-design="v2"] .topbar button,
html[data-design="v2"] .topbar summary,
html[data-design="v2"] .topbar input { -webkit-tap-highlight-color: transparent; }
html[data-design="v2"] .topbar :is(a, button, summary, input):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}

@media (max-width: 1100px) {
  html[data-design="v2"] .topbar { gap: 12px; padding: 0 14px; }
  html[data-design="v2"] .topbar .search { max-width: 260px; }
}
@media (max-width: 900px) {
  html[data-design="v2"] .topbar { gap: 10px; padding: 0 12px; }
  html[data-design="v2"] .topbar .logo { min-height: 44px; display: inline-flex; align-items: center; }
  html[data-design="v2"] .topbar .topnav a { min-height: 44px; display: inline-flex; align-items: center; }
  html[data-design="v2"] .topbar .search { max-width: 210px; height: 46px; }
  html[data-design="v2"] .topbar .search input { height: 100%; }
  /* keep the single row but compact the ⌘K trigger and give tablet/pointer-
     coarse widths 44 px controls without growing the bar. */
  html[data-design="v2"] .topbar .cmdk-trigger {
    min-width: 44px; width: 44px; height: 44px; min-height: 44px;
    justify-content: center; padding: 0;
  }
  html[data-design="v2"] .topbar .cmdk-trigger-label,
  html[data-design="v2"] .topbar .cmdk-kbd { display: none; }
  html[data-design="v2"] .topbar .icon-btn { width: 44px; height: 44px; }
  html[data-design="v2"] .topbar .tb-actions .btn {
    min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center;
  }
  html[data-design="v2"] .topbar .avatar,
  html[data-design="v2"] .topbar .usermenu > summary.avatar { width: 44px; height: 44px; min-width: 44px; }
}

/* Small screens: two-row top bar. The previous ≤430px block hid the search;
   this block restores it on its own 44 px row and keeps the account controls
   fully inside the viewport. */
@media (max-width: 700px) {
  html[data-design="v2"] .topbar {
    height: auto; flex: 0 0 auto; min-height: 0;
    flex-wrap: wrap; align-items: center;
    padding: 8px 12px; gap: 8px 8px;
  }
  html[data-design="v2"] .topbar .logo { min-height: 44px; font-size: 15px; }
  html[data-design="v2"] .topbar .topnav { display: none; }
  html[data-design="v2"] .topbar .cmdk { order: 1; }
  html[data-design="v2"] .topbar .tb-actions {
    order: 2; margin-left: auto; gap: 4px; flex-wrap: nowrap;
  }
  html[data-design="v2"] .topbar .search {
    order: 3; display: flex; flex: 1 1 100%; width: auto; max-width: none;
    margin: 0; height: 46px; min-width: 0; padding: 0 10px; gap: 8px;
  }
  html[data-design="v2"] .topbar .search input {
    font-size: 16px; min-width: 0; height: 100%; align-self: stretch;
  }
  html[data-design="v2"] .topbar .search .kbd,
  html[data-design="v2"] .topbar .search .egg-search-radar { display: none; }
  /* 44 px touch targets for every top-bar control. */
  html[data-design="v2"] .topbar .icon-btn { width: 44px; height: 44px; border-radius: 10px; }
  html[data-design="v2"] .topbar .tb-actions .btn {
    min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center;
    font-size: 11.5px;
  }
  html[data-design="v2"] .topbar .avatar,
  html[data-design="v2"] .topbar .usermenu > summary.avatar {
    width: 44px; height: 44px; min-width: 44px; border-radius: 12px;
  }
  html[data-design="v2"] .topbar .cmdk-trigger {
    min-width: 44px; width: 44px; height: 44px; min-height: 44px;
    justify-content: center; padding: 0; border-radius: 10px;
  }
  html[data-design="v2"] .topbar .cmdk-trigger-icon { font-size: 18px; }
  /* Menus and dialog are fixed; anchor them just under the wrapped bar and
     keep them inside the viewport on both axes. */
  html[data-design="v2"] .umenus,
  html[data-design="v2"] .cmenu,
  html[data-design="v2"] .updates-menu > .umenus,
  html[data-design="v2"] .filters > .filter-panel {
    position: fixed; top: 108px; left: 8px; right: 8px; width: auto;
    max-width: calc(100vw - 16px); max-height: calc(100vh - 124px);
    overflow-y: auto; margin: 0;
  }
  html[data-design="v2"] .cmdk-dialog { max-width: 100vw; }
}
@media (max-width: 430px) {
  /* The one-clock menu is a secondary info surface; the clock itself is shown
     in the footer/status line. Hide it on the narrow bar so the primary
     controls (search, ⌘K, account/auth) always fit two rows. */
  html[data-design="v2"] .topbar .clockmenu { display: none; }
}
@media (max-width: 380px) {
  html[data-design="v2"] .topbar { padding: 8px 10px; gap: 6px; }
  html[data-design="v2"] .topbar .logo { font-size: 14px; gap: 8px; }
  html[data-design="v2"] .topbar .logo .mark { width: 13px; height: 13px; }
  html[data-design="v2"] .topbar .tb-actions .btn { padding: 0 8px; font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="v2"] .topbar .icon-btn,
  html[data-design="v2"] .topbar .tb-actions .btn { transition: none; }
}
@media (forced-colors: active) {
  html[data-design="v2"] .topbar .icon-btn,
  html[data-design="v2"] .topbar .cmdk-trigger,
  html[data-design="v2"] .topbar .tb-actions .btn { border: 1px solid CanvasText; }
}