:root{
  --bg:#efefed; --panel:#fafaf9; --panel-2:#e6e6e3; --border:#cfcfcb;
  --text:#2e2e2e; --muted:#77776f; --head:#1c1c1c; --link:#3a5a7a;
  --row:#f3f3f1; --hover:#dcdcd8; --btn:#3b3b39; --btn-text:#f2f2ef; --chrome:linear-gradient(#fff,#bdbdbd 48%,#8e8e8e 52%,#d9d9d9);
  --chrome-edge:#6b6b6b;
}
[data-theme=dark]{
  --bg:#343434; --panel:#2b2b2b; --panel-2:#222; --border:#404040;
  --text:#b0b0b0; --muted:#7f7f7f; --head:#e2e2e2; --link:#a3b8cc;
  --row:#303030; --hover:#3c3c3c; --btn:#1c1c1c; --btn-text:#d4d4d4; --chrome:linear-gradient(#f4f4f4,#bcbcbc 48%,#8c8c8c 52%,#cfcfcf);
  --chrome-edge:#222;
}
*{box-sizing:border-box;border-radius:0}
body{margin:0;background:var(--bg);color:var(--text);font:12px/1.5 Tahoma,Verdana,"DejaVu Sans",sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--head)}

header{display:flex;align-items:center;gap:24px;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--panel-2)}
.logo{font:900 30px/1 Verdana,sans-serif;letter-spacing:-1px;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px var(--chrome-edge)}
nav{display:flex;gap:16px;flex:1}
nav a{color:var(--muted)}
nav a.on{color:var(--head)}
button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);padding:4px 10px;cursor:pointer}
button:hover{background:var(--hover)}
.icon-btn{display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--muted)}
.hdr-icons{display:flex;gap:2px}
.icon-btn:hover{background:transparent;color:var(--head)}
.icon-btn .sun,[data-theme=dark] .icon-btn .moon{display:none}
[data-theme=dark] .icon-btn .sun{display:block}

#v-home{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:20px 24px;margin:0 auto}
main>section{min-width:0}

/* profile: one continuous bar */
[hidden]{display:none!important}
.profile{align-self:start;border:1px solid var(--border);background:var(--panel)}
.profile .avatar{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-bottom:1px solid var(--border)}
.p-sec{padding:10px;border-top:1px solid var(--border)}
.p-sec:first-of-type{border-top:0}
.profile h1{margin:0;font-size:17px;color:var(--head)}
.profile .handle{color:var(--muted)}
.actions{display:flex;gap:6px;margin-top:10px}
.actions button{flex:1;height:30px;display:grid;place-items:center;padding:0;color:var(--muted);background:var(--panel-2)}
.actions button:hover{color:var(--head)}
.profile .bio{margin:0}
.rows div,.rows a{display:flex;justify-content:space-between;gap:8px;padding:4px 10px}
.rows>:nth-child(odd){background:var(--row)}
.rows b{color:var(--head)}
.rows span{text-align:right}
.rows.num span{color:var(--head);font-variant-numeric:tabular-nums}
.ok{color:#3c9a3c}
[data-theme=dark] .ok{color:#6cc46c}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.btns a{background:var(--btn);color:var(--btn-text);border:1px solid var(--border);text-align:center;padding:6px;font-weight:bold}
.btns a:hover{color:var(--btn-text);filter:brightness(1.25)}
.p-sec h3{margin:0 0 6px;padding-bottom:4px;font-size:13px;color:var(--head);border-bottom:1px solid var(--border)}
.p-list{list-style:none;margin:0;padding:0}
.p-list li{padding:2px 0;overflow-wrap:anywhere}
.rss{display:inline-flex;gap:6px;align-items:center}

/* about */
.about{border:1px solid var(--border);border-top:none;background:var(--panel);padding:14px 16px}
.about h3{margin:0 0 8px;padding-bottom:4px;font-size:13px;color:var(--head);border-bottom:1px solid var(--border)}
.about .long p{margin:0 0 8px}
.about .long{margin-bottom:22px}
.fav-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border)}
.about .fav-head h3{margin:0;padding:0 0 7px;border:0}
.minitabs{display:flex;gap:18px;flex-wrap:wrap}
.minitabs button{border:0;background:none;padding:0 0 6px;margin-bottom:-1px;color:var(--muted);border-bottom:2px solid transparent}
.minitabs button:hover{background:none;color:var(--head)}
.minitabs button.on{color:var(--head);border-bottom-color:var(--head)}
.fav-h{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.fav h4{margin:0;font-size:12px;font-weight:bold;color:var(--head)}
.fav h4 span{color:var(--muted);font-weight:normal}
.pg{display:flex;gap:4px}
.pg button{width:24px;height:22px;padding:0;display:grid;place-items:center;color:var(--muted);background:var(--panel-2)}
.pg button:disabled{opacity:.35;cursor:default}
.strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.card{position:relative;flex:none;width:124px;height:180px;margin:0;overflow:hidden;border:1px solid var(--border);background:var(--panel-2);scroll-snap-align:start}
.card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.card figcaption,.pane p{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 8px 7px;font-size:11px;line-height:1.35;color:#cfcfcf;background:linear-gradient(transparent,rgba(0,0,0,.88) 45%);opacity:0;transition:opacity .15s}
.card figcaption b,.pane p b{display:block;color:#fff}
.card:hover figcaption,.pane:hover p{opacity:1}
.card:hover img{transform:scale(1.05)}
.card.sq{width:180px}

/* library */
.tabs{display:flex;border-bottom:1px solid var(--border)}
#tabs{display:flex}
#q{flex:1;min-width:0;margin:0 0 -1px -1px;font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);padding:4px 8px;outline:none}
#q:hover,#q:focus{background:var(--hover);outline:none}
.tag{display:inline-block;margin:1px 4px 1px 0;padding:0 5px;font-size:10px;border:1px solid var(--border);color:var(--muted)}
td.tags{white-space:normal;min-width:120px}
td.none{text-align:center;color:var(--muted);font-weight:normal;padding:24px}
.tabs button{border-bottom:none;margin-right:-1px;background:var(--panel-2);color:var(--muted)}
.tabs button.on{background:var(--panel);color:var(--head);position:relative;top:1px}
.lib{display:grid;grid-template-columns:1fr 300px;min-height:440px;gap:0;border:1px solid var(--border);border-top:none;background:var(--panel)}
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;white-space:nowrap}
th{text-align:left;padding:6px 8px;font-size:11px;color:var(--head);background:var(--panel-2);border-bottom:1px solid var(--border)}
td{padding:5px 7px;border-bottom:1px solid var(--border)}
tr:nth-child(even) td{background:var(--row)}
tbody tr:hover td,tbody tr.sel td{background:var(--hover);color:var(--head);cursor:default}
td:first-child{color:var(--head);font-weight:bold;white-space:normal;min-width:140px}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.pane{border-left:1px solid var(--border);background:var(--panel-2)}
.pane div{position:sticky;top:0;height:440px;overflow:hidden}
.pane img{display:block;width:100%;height:100%;object-fit:cover}
.pane p{padding:40px 12px 12px;font-size:12px}
.pane.empty div{visibility:hidden}

/* pages */
.page{padding:20px 24px}
.page-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.page-h h2{margin:0;font-size:20px;color:var(--head)}
.page-h p{margin:0;color:var(--muted)}
.panel{border:1px solid var(--border);background:var(--panel);margin-bottom:16px}
.panel-h{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;background:var(--panel-2);border-bottom:1px solid var(--border);color:var(--head);font-weight:bold}
.panel-h span{color:var(--muted);font-weight:normal}
.filters{padding:10px;display:grid;gap:8px}
.f-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.f-row input,.f-row select{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);padding:4px 8px;outline:none}
.f-row input{flex:1;min-width:200px}
.f-row input:hover,.f-row input:focus,.f-row select:hover{background:var(--hover)}
.chip{padding:3px 10px;background:var(--panel-2);color:var(--muted)}
.chip.on{background:var(--btn);color:var(--btn-text);border-color:var(--btn)}
.btn{background:var(--btn);color:var(--btn-text);border-color:var(--border);font-weight:bold}
.btn:hover{background:var(--btn);filter:brightness(1.25)}
.pt td:first-child{font-weight:normal;min-width:0}
.pt td{vertical-align:middle}
.pt .thumb{width:44px;padding:4px 0 4px 8px}
.thumb img,.thumb .ph{display:block;width:34px;height:51px;object-fit:cover;border:1px solid var(--border)}
.thumb .sq{height:34px}
/* covers: book shape (2:3) everywhere, album shape (1:1) for music; a slight lift on hover */
.thumb img,.chart .cv img{transition:filter .15s ease,border-color .15s ease}
.thumb img:hover,.chart .cv img:hover{filter:brightness(1.08);border-color:var(--muted)}
.ph{display:grid;place-items:center;overflow:hidden;background:var(--panel-2);color:var(--muted);font-size:8px;line-height:1.1;text-align:center;padding:3px}
.nm b{color:var(--head)}
.nm .sub{color:var(--muted);font-size:11px}
.nm .tag{margin-top:2px}
.cat{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.seed{color:#3c9a3c}
[data-theme=dark] .seed{color:#6cc46c}
.leech{color:#b0553f}
[data-theme=dark] .leech{color:#d98670}
.pager{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;color:var(--muted);border-top:1px solid var(--border)}
.pager div{display:flex;gap:4px}
.pager button{padding:2px 8px}
.pager button.on{background:var(--btn);color:var(--btn-text)}
.vote{padding:0 6px;margin-left:6px;font-size:11px}
.yes{color:#3c9a3c}
[data-theme=dark] .yes{color:#6cc46c}
.no{color:var(--muted)}
.cat-row td{background:var(--panel-2)!important;color:var(--head);font-weight:bold;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
.forum b{font-size:13px}
.two{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.list{list-style:none;margin:0;padding:0}
.list li{padding:6px 10px;border-top:1px solid var(--border)}
.list li:first-child{border-top:0}
.list .sub{color:var(--muted);font-size:11px}
/* detail states: forum, thread, request, item, inbox, forms */
.crumb{color:var(--muted);margin-bottom:4px;font-size:11px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--head)}
.badge{display:inline-block;font-size:9px;padding:0 5px;margin-right:6px;border:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;vertical-align:1px}
.badge.solid{background:var(--btn);color:var(--btn-text);border-color:var(--btn)}
.pages-mini{margin-left:6px;font-size:11px}
.pages-mini a{margin-left:3px}
.post{display:grid;grid-template-columns:150px 1fr;border:1px solid var(--border);background:var(--panel);margin-bottom:12px}
.post.staff{border-left:3px solid var(--btn)}
.who{padding:12px;border-right:1px solid var(--border);background:var(--panel-2);text-align:center;font-size:11px;color:var(--muted)}
.who img{display:block;width:96px;height:96px;margin:0 auto 8px;object-fit:cover;border:1px solid var(--border)}
.who b{display:block;font-size:12px;color:var(--head)}
.who .cls{display:block;margin:2px 0 6px}
.pbody{display:flex;flex-direction:column;min-width:0}
.ph-row{display:flex;justify-content:space-between;gap:10px;padding:6px 12px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px}
.ph-row a{margin-left:10px}
.content{padding:12px;flex:1}
.content p,.content ul{margin:0 0 10px}
.content blockquote{margin:0 0 10px;padding:8px 10px;border-left:3px solid var(--border);background:var(--panel-2);color:var(--muted)}
.content blockquote b{display:block;color:var(--head);font-size:11px;margin-bottom:2px}
.content pre{margin:0 0 10px;padding:10px;overflow-x:auto;background:var(--panel-2);border:1px solid var(--border);font:11px/1.6 ui-monospace,Menlo,monospace;color:var(--head)}
.edited{color:var(--muted);font-size:11px;font-style:italic}
.sig{padding:6px 12px;border-top:1px dashed var(--border);color:var(--muted);font-size:11px;font-style:italic}
.post.removed .content{color:var(--muted);font-style:italic}
details.spoiler{margin:0 0 10px;padding:6px 10px;border:1px solid var(--border);background:var(--panel-2)}
details.spoiler summary{cursor:pointer;color:var(--head);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
details.spoiler p{margin:8px 0 0}
.spectro{position:relative;height:170px;margin:0 0 10px;border:1px solid var(--border);background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 7px),linear-gradient(to top,#ffe45c 0%,#ff9a1f 16%,#d8325a 32%,#5a1470 44%,#1a0626 49.5%,#050008 50%,#050008 100%)}
.spectro span{position:absolute;right:6px;font-size:10px;color:#ccc}
.poll{padding:12px;border:1px solid var(--border);background:var(--panel);margin-bottom:12px}
.poll h4{margin:0 0 8px;color:var(--head)}
.opt{display:grid;grid-template-columns:200px 1fr 90px;gap:10px;align-items:center;margin:5px 0}
.bar{height:10px;border:1px solid var(--border);background:var(--panel-2)}
.bar i{display:block;height:100%;background:var(--btn)}
.note{padding:8px 12px;margin-bottom:12px;border:1px solid var(--border);background:var(--panel-2);color:var(--muted)}
.editor{border:1px solid var(--border);background:var(--panel)}
.tools{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-bottom:1px solid var(--border);background:var(--panel-2)}
.tools button{min-width:28px;padding:2px 6px}
.editor textarea,.composer textarea,.form textarea{display:block;width:100%;min-height:130px;padding:10px;border:0;font:inherit;background:var(--panel);color:var(--text);resize:vertical;outline:none}
.efoot{display:flex;justify-content:flex-end;gap:6px;padding:6px;border-top:1px solid var(--border)}
.form{display:grid;grid-template-columns:170px 1fr;gap:12px 16px;padding:16px;align-items:start}
.form label{padding-top:5px;color:var(--head);font-weight:bold}
.form input,.form select{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);padding:5px 8px;outline:none;width:100%;max-width:520px}
.form input:hover,.form input:focus,.form select:hover{background:var(--hover)}
.form textarea{border:1px solid var(--border);background:var(--panel-2)}
.hint{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:normal}
.item{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.item .big{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--border)}
.item .big.ph{font-size:18px;padding:20px}
.kv{display:grid;grid-template-columns:auto 1fr;margin:0}
.kv dt,.kv dd{margin:0;padding:5px 10px;border-bottom:1px solid var(--border)}
.kv dt{color:var(--muted)}
.kv dd{text-align:right;color:var(--head)}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}
.mi{margin:0;padding:10px;overflow-x:auto;background:var(--panel-2);font:11px/1.6 ui-monospace,Menlo,monospace;color:var(--head)}
.comment{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:10px;border-top:1px solid var(--border)}
.comment:first-child{border-top:0}
.comment img{width:44px;height:44px;object-fit:cover;border:1px solid var(--border)}
.comment .sub{color:var(--muted);font-size:11px}
.comment p{margin:4px 0 0}
.inbox{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - 170px);min-height:480px;border:1px solid var(--border);background:var(--panel)}
.convos{overflow:auto;border-right:1px solid var(--border)}
.convo{display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text)}
.convo:hover{color:var(--text);background:var(--row)}
.convo.on{background:var(--hover)}
.convo>span{min-width:0}
.convo img{width:40px;height:40px;object-fit:cover;border:1px solid var(--border)}
.convo b{display:block;color:var(--head)}
.convo .snip{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo time{color:var(--muted);font-size:10px;white-space:nowrap}
.convo.unread .snip{color:var(--head)}
.convo.unread time::after{content:'';display:block;width:7px;height:7px;margin:6px 0 0 auto;background:#b0553f}
.chat{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel-2)}
.chat-h img{width:34px;height:34px;object-fit:cover;border:1px solid var(--border)}
.chat-h b{display:block;color:var(--head)}
.chat-h span{color:var(--muted);font-size:11px}
.msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:16px}
.msg{max-width:68%;padding:8px 11px;background:var(--panel-2);border:1px solid var(--border);align-self:flex-start}
.msg.me{align-self:flex-end;background:var(--btn);color:var(--btn-text);border-color:var(--btn)}
.msg time{display:block;margin-top:3px;font-size:10px;opacity:.6}
.msg.sys{align-self:stretch;max-width:none;text-align:center;color:var(--muted);background:none;border-style:dashed}
.day{align-self:center;margin:6px 0;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px;border-top:1px solid var(--border)}
.composer textarea{min-height:40px;height:40px;border:1px solid var(--border);background:var(--panel-2)}
.pip{position:absolute;top:2px;right:0;min-width:14px;height:14px;padding:0 3px;display:grid;place-items:center;font-size:9px;font-weight:bold;background:#b0553f;color:#fff}
.hdr-icons a.icon-btn{position:relative}

/* top 100 */
.chart-tabs{display:flex;border-bottom:1px solid var(--border)}
.chart-tabs button{border-bottom:none;margin-right:-1px;background:var(--panel-2);color:var(--muted)}
.chart-tabs button.on{background:var(--panel);color:var(--head);position:relative;top:1px}
.genres{display:flex;gap:6px;flex-wrap:wrap;padding:10px;border-bottom:1px solid var(--border)}
.chart{display:grid;grid-template-columns:64px 80px 1fr 64px 64px 64px 90px}
.chart>div{display:contents}
.chart>div>*{padding:8px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}
.chart>div:nth-child(even)>*{background:var(--row)}
.chart>div:not(.ch):hover>*{background:var(--hover)}
.chart .ch>*{background:var(--panel-2);color:var(--head);font-size:11px;font-weight:bold;padding:6px 8px}
.chart .n{align-items:center;text-align:center}
.chart .rk{font:bold 24px/1 Verdana,sans-serif;color:var(--head)}
.chart .mv{font-size:10px;margin-top:3px}
.up{color:#3c9a3c}.down{color:#b0553f}.new{color:var(--btn-text);background:var(--btn);padding:0 4px}
[data-theme=dark] .up{color:#6cc46c}[data-theme=dark] .down{color:#d98670}
.chart .cv img,.chart .cv .ph{display:block;width:48px;height:72px;object-fit:cover;border:1px solid var(--border)}
.chart .cv .sq{width:64px;height:64px}
.chart .cv .ph{font-size:7px}
.chart .num{align-items:flex-end;text-align:right;font-variant-numeric:tabular-nums}
.chart .t b{color:var(--head);font-size:13px}
.chart .t span{color:var(--muted)}
.chart .no1 .rk{font-size:40px}
.chart .no1 .t b{font-size:17px}

/* settings: full-screen takeover, two scrolling columns under a fixed top */
.settings{position:fixed;inset:0;z-index:10;display:grid;grid-template-rows:auto auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);background:var(--bg)}
body:has(#v-settings:not([hidden])){overflow:hidden}
.s-top{display:flex;align-items:center;gap:20px;padding:10px 24px;background:var(--panel-2);border-bottom:1px solid var(--border)}
.s-top .logo{font-size:24px}
.s-top .crumb{flex:1;margin:0;font-size:12px}
.crumb b{color:var(--head)}
.s-who{display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--panel);border-bottom:1px solid var(--border)}
.s-who img{width:38px;height:38px;object-fit:cover;border:1px solid var(--border)}
.s-who b{color:var(--head);font-size:13px}
.s-who>a{margin-left:auto}
.s-body{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0}
.s-nav{overflow:auto;padding:6px 0 24px;border-right:1px solid var(--border);background:var(--panel)}
.s-nav h4{margin:14px 0 3px;padding:4px 14px 0;border-top:1px solid var(--border);font-size:10px;font-weight:normal;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.s-nav a{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 11px;color:var(--text);border-left:3px solid transparent}
.s-nav a svg{flex:none;color:var(--muted)}
.s-nav a:hover{background:var(--row);color:var(--head)}
.s-nav a.on{background:var(--hover);color:var(--head);font-weight:bold;border-left-color:var(--head)}
.s-nav a.on svg{color:var(--head)}
.s-main{overflow:auto;padding:20px 32px 64px}
.s-inner{max-width:900px}
.s-main .panel{overflow-x:auto}
.s-main .sub{color:var(--muted);font-size:11px}
.s-main :is(input:not([type=checkbox],[type=radio],[type=file]),select,textarea){font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);padding:5px 8px;outline:none}
.s-main :is(input:not([type=checkbox],[type=radio],[type=file]),select,textarea):is(:hover,:focus){background:var(--hover)}
.s-main input[type=checkbox],.s-main input[type=radio]{width:auto;margin:2px 0 0;accent-color:var(--head)}
.s-main .form textarea{min-height:0;max-width:520px}
.s-main .efoot input{flex:1;max-width:260px}
.s-lead{margin:0;padding:10px 16px 0;color:var(--muted)}
.checks{padding:6px 16px 10px}
.checks.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));padding-bottom:0}
.chk{display:flex;gap:8px;align-items:flex-start;padding:5px 0;cursor:pointer}
.chk b{display:block;color:var(--head)}
.form .chk{padding:3px 0;font-weight:normal;color:var(--text)}
.s-num{flex:none!important;width:90px;min-width:0!important}
.s-code{font:11px/1.5 ui-monospace,Menlo,monospace;color:var(--head);background:var(--panel-2);border:1px solid var(--border);padding:2px 6px;overflow-wrap:anywhere}
.s-main .c{text-align:center;width:70px}
.s-main td.num{white-space:nowrap}
.s-order button{padding:0 6px;font-size:10px;margin:0 1px}
.s-order button:disabled{opacity:.35;cursor:default}
.s-edit li{display:flex;gap:6px}
.s-edit input{flex:1;min-width:0}
.s-person{display:flex;align-items:center;gap:8px}
.s-person img{width:26px;height:26px;object-fit:cover;border:1px solid var(--border)}
.s-person button{margin-left:auto}
.s-avatar{display:flex;gap:14px;align-items:flex-start}
.s-avatar img{width:96px;height:96px;object-fit:cover;border:1px solid var(--border)}
/* settings › favorites: every entry of a list as a row; a profile shows the first ten */
.s-favs{list-style:none;margin:0;padding:0}
.s-fav{display:grid;grid-template-columns:16px auto minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:6px 10px;border-top:1px solid var(--border);background:var(--panel)}
.s-favs>li:first-child{border-top:0}
.s-fav.drag{position:relative;z-index:1;background:var(--hover);outline:1px solid var(--border)}
.s-grip{color:var(--muted);font-size:14px;line-height:1;text-align:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.s-fav.drag .s-grip{cursor:grabbing}
.s-pic{position:relative;display:block;width:36px;height:54px;overflow:hidden;border:1px solid var(--border);background:var(--panel-2);cursor:pointer}
.s-pic.sq{width:54px}
.s-pic img{display:block;width:100%;height:100%;object-fit:cover}
.s-pic>span{display:flex;align-items:center;justify-content:center;height:100%;padding:2px;font-size:10px;line-height:1.2;text-align:center;color:var(--muted)}
.s-pic input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.s-pic:focus-within,.s-pic:hover{outline:1px solid var(--head)}
/* dragging a row: its own list is the only drop zone, everywhere else is "not allowed" */
html.fav-drag{user-select:none;-webkit-user-select:none}
html.fav-drag *{cursor:not-allowed}
.fav-drag .panel.drop,.fav-drag .panel.drop *{cursor:grabbing}
.fav-drag .panel.drop .s-favs{outline:1px dashed var(--muted);outline-offset:-1px}
.fav-drag .panel:not(.drop) .s-favs{opacity:.45}
.s-fav.drag.out{opacity:.6;outline-style:dashed}
.s-fav-text{display:grid;gap:4px;min-width:0}
.s-fav-text input{width:100%;min-width:0;max-width:520px}
.s-main .s-favs .s-fav-text input{padding:2px 6px;border-color:transparent;background:none;color:var(--head);font-weight:bold}
.s-main .s-favs .s-fav-text input+input{color:var(--muted);font-size:11px;font-weight:normal}
.s-main .s-favs .s-fav-text input:is(:hover,:focus){border-color:var(--border);background:var(--hover)}
.s-fav-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.s-fav-cut{padding:5px 10px;border-top:1px dashed var(--muted);background:var(--panel-2);color:var(--muted);font-size:11px;text-align:center}
.s-fav-new{grid-template-columns:auto minmax(0,1fr) auto;padding-left:36px}
.s-fav-new .s-fav-text{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.s-fav-full{margin:0;padding:8px 10px;border-top:1px solid var(--border);color:var(--muted)}
.s-fav-foot{flex-wrap:wrap;justify-content:flex-start;align-items:center}
.s-sp{flex:1}
.s-wrap{white-space:normal}
.s-fav-ask{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.panel.danger{border-color:#b0553f}
.panel.danger .panel-h{color:#b0553f}
button.danger{color:#b0553f;border-color:#b0553f}
button.danger:hover{background:#b0553f;color:#fff}
[data-theme=dark] .panel.danger .panel-h,[data-theme=dark] button.danger{color:#d98670}
.themes{display:flex;gap:14px;flex-wrap:wrap;padding:14px 16px}
.theme-card{position:relative;display:grid;gap:6px;color:var(--head);cursor:pointer}
.theme-card input{position:absolute;opacity:0}
.sw{display:grid;grid-template:14px 1fr/38px 1fr;gap:5px;width:150px;height:94px;padding:0 6px 6px 0;border:1px solid var(--border);background:#efefed}
.sw i:first-child{grid-column:1/-1;margin-right:-6px;background:#e6e6e3;border-bottom:1px solid #cfcfcb}
.sw i{background:#fafaf9;border:1px solid #cfcfcb}
.sw i:nth-child(2){border-left:0}
.sw.dark{background:#343434}
.sw.dark i{background:#2b2b2b;border-color:#404040}
.sw.dark i:first-child{background:#222}
.sw.system{background:linear-gradient(135deg,#efefed 50%,#343434 50%)}
.sw.system i{background:rgba(160,160,160,.35);border-color:rgba(128,128,128,.5)}
.theme-card input:checked+.sw{outline:2px solid var(--head);outline-offset:2px}
.theme-card input:focus-visible+.sw{outline:2px dashed var(--head);outline-offset:2px}
.toast{position:fixed;right:20px;bottom:20px;z-index:20;max-width:360px;padding:8px 14px;background:var(--btn);color:var(--btn-text);border:1px solid var(--border);opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;pointer-events:none}
.toast.on{opacity:1;transform:none}
/* appearance and forum settings the rest of the demo honors */
.no-pane .lib{grid-template-columns:1fr}.no-pane .pane{display:none}
.no-thumbs .pt .thumb,.no-thumbs .pt th:first-child:empty,.no-thumbs .chart .cv>*{display:none}
.no-captions .card figcaption,.no-captions .pane p{display:none}
.no-sigs .sig{display:none}
.no-avatars .who img{display:none}

/* pages.js: sign in, invites, upload, profiles, statistics, history, notifications, staff, errors */
.pip:empty{display:none}
button[data-pg]:disabled{opacity:.45;cursor:default}
button[data-pg]:disabled:hover{background:var(--panel)}
a.btn{display:inline-block;padding:4px 10px;border:1px solid var(--border)}
a.chip{border:1px solid var(--border)}
a.chip:hover{color:var(--head)}
a.chip.on,a.chip.on .sub{color:var(--btn-text)}
a.lbtn{display:inline-block;padding:4px 10px;border:1px solid var(--border);background:var(--panel);color:var(--text)}
a.lbtn:hover{background:var(--hover);color:var(--text)}
.who b a{color:inherit}
.who b a:hover{color:var(--link)}
th.num{text-align:right}
.page input[type=checkbox],.page input[type=radio]{width:auto;max-width:none;margin:2px 0 0;accent-color:var(--head)}
.page .form input[type=file]{padding:4px}
.page .form textarea{min-height:0;max-width:520px}
.note.bad{border-color:#b0553f;color:#b0553f}
.note.good{border-left:3px solid #3c9a3c;color:var(--text)}
[data-theme=dark] .note.bad{border-color:#d98670;color:#d98670}
[data-theme=dark] .note.good{border-left-color:#6cc46c}
.note b{color:inherit}
.banner{padding:7px 24px;border-bottom:1px solid #b0553f;background:var(--panel-2);color:var(--text)}
.banner b{color:#b0553f}
[data-theme=dark] .banner{border-bottom-color:#d98670}
[data-theme=dark] .banner b{color:#d98670}
.bare header>:not(.logo),.bare #banner{display:none}
.ptabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.ptabs a{padding:4px 10px;margin-right:-1px;border:1px solid var(--border);border-bottom:0;background:var(--panel-2);color:var(--muted)}
.ptabs a:hover{color:var(--head)}
.ptabs a.on{background:var(--panel);color:var(--head);position:relative;top:1px}
.ptabs .sub{font-size:11px;color:var(--muted)}
.ptabs+.panel{border-top:0}
.panel:not(.filters)>.f-row{padding:10px;border-bottom:1px solid var(--border)}
.auth{max-width:380px;margin:48px auto 24px}
.auth.wide{max-width:560px}
.auth .form{grid-template-columns:1fr;gap:4px;padding:16px}
.auth .form label:not(.chk){padding-top:8px}
.auth .form>label:first-child{padding-top:0}
.auth .form input{max-width:none}
.auth .form .btn{margin-top:12px;padding:6px}
.auth .note{margin:16px 16px 0}
.auth-foot{padding:8px 16px;border-top:1px solid var(--border);color:var(--muted);font-size:11px}
.auth>p{color:var(--muted);text-align:center;font-size:11px}
.code-in{font:18px/1.2 ui-monospace,Menlo,monospace!important;letter-spacing:6px;text-align:center}
.rules{margin:4px 0 0;padding:0;list-style:none;font-size:11px;color:var(--muted)}
.rules li::before{content:'·';display:inline-block;width:14px;text-align:center;color:var(--muted)}
.rules li.met{color:var(--text)}
.rules li.met::before{content:'✓';color:#3c9a3c}
[data-theme=dark] .rules li.met::before{color:#6cc46c}
.rulelist{margin:0;padding:5px 0 0 18px}
.rulelist li{padding:1px 0 3px}
.steps{margin:0;padding:6px 16px 14px 36px}
.steps li{padding:6px 0}
.steps li b{color:var(--head)}
.pick{max-height:300px;overflow:auto}
.pick label{display:grid;grid-template-columns:auto 36px 1fr;gap:10px;align-items:center;padding:6px 10px;border-top:1px solid var(--border);cursor:pointer}
.pick label:first-child{border-top:0}
.pick label:hover{background:var(--row)}
.pick .thumb img,.pick .thumb .ph{width:34px;height:51px}
.pick .thumb .sq{height:34px}
.pick b{color:var(--head)}
.req{display:inline-block;margin-left:6px;font-size:9px;font-weight:normal;text-transform:uppercase;letter-spacing:.5px;color:#b0553f}
[data-theme=dark] .req{color:#d98670}
/* staff tag beside a member's name, everywhere it appears: Admin or Mod (D-I36). A role, not a class or a rank */
span.role{display:inline-block;margin-left:5px;padding:0 4px;font-size:9px;font-weight:normal;line-height:13px;text-transform:uppercase;letter-spacing:.5px;vertical-align:1px;white-space:nowrap;border:1px solid var(--link);color:var(--link)}
:is(h1,h2) span.role{vertical-align:4px}
.mono{font:11px/1.6 ui-monospace,Menlo,monospace!important}
.brk{word-break:break-all}
.two>*,.item>*{min-width:0}
.home2{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px}
.profile .rows span.no{color:var(--muted);font-style:italic}
.actions button.on,.acts button.on{background:var(--btn);color:var(--btn-text)}
.actions button span{margin-left:6px;font-size:11px}
.actions button{display:flex;align-items:center;justify-content:center}
.feed{list-style:none;margin:0;padding:0}
.feed li{padding:8px 10px;border-top:1px solid var(--border)}
.feed li:first-child{border-top:0}
.feed .sub{color:var(--muted);font-size:11px}
.feed p{margin:4px 0 0;overflow-wrap:anywhere}
.barc{display:flex;align-items:center;gap:8px}
.barc .bar{flex:1;min-width:60px}
.notifs{list-style:none;margin:0;padding:0}
.notif{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 10px;border-top:1px solid var(--border)}
.notif:first-child{border-top:0}
.notif .txt{overflow-wrap:anywhere}
.notif.unread{background:var(--row)}
.notif.unread .txt{color:var(--head)}
.notif time{color:var(--muted);font-size:11px;white-space:nowrap}
.notif time::after{content:'';display:inline-block;width:7px;height:7px;margin-left:8px}
.notif.unread time::after{background:#b0553f}
.err{max-width:520px;margin:48px auto}
.err .content p:last-child{margin-bottom:0}
.who-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.who-h img{width:56px;height:56px;object-fit:cover;border:1px solid var(--border)}
.who-h h2{margin:0;font-size:20px;color:var(--head)}
.who-h .sub{color:var(--muted)}
.who-h>a{margin-left:auto}
.state-list{columns:3 220px;column-gap:16px;padding:10px}
.state-list div{break-inside:avoid;margin-bottom:12px}
.state-list b{display:block;color:var(--head);margin-bottom:2px}
.state-list a{display:block;padding:1px 0}

@media (max-width:900px){
  .page{padding:16px}
  .two{grid-template-columns:1fr}
  .chart{grid-template-columns:48px 80px 1fr 70px}
  .chart .hide-s{display:none}
  .post{grid-template-columns:1fr}
  .who{border-right:0;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;text-align:left}
  .who img{width:40px;height:40px;margin:0}
  .item,.inbox,.form{grid-template-columns:1fr}
  .convos{max-height:220px;border-right:0;border-bottom:1px solid var(--border)}
  #v-home{grid-template-columns:1fr;padding:16px}
  .profile .avatar{width:120px}
  .lib{grid-template-columns:1fr}
  .pane{display:none}
  header{flex-wrap:wrap;padding:12px 16px}
  .s-top,.s-who{padding-left:16px;padding-right:16px}
  .s-top{gap:12px}
  .s-top .crumb{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .s-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .s-nav{display:flex;overflow-x:auto;padding:0;border-right:0;border-bottom:1px solid var(--border);scrollbar-width:none}
  .s-nav h4{display:none}
  .s-nav a{flex:none;padding:9px 12px;border-left:0;border-bottom:2px solid transparent}
  .s-nav a.on{border-bottom-color:var(--head)}
  .s-main{padding:16px 16px 48px}
  .s-avatar{flex-direction:column}
  .s-fav{grid-template-columns:16px auto minmax(0,1fr)}
  .s-fav-acts{grid-column:3;justify-content:flex-start}
  .s-fav-new{grid-template-columns:auto minmax(0,1fr)}
  .s-fav-new .s-fav-acts{grid-column:2}
  .banner{padding:7px 16px}
  .home2{grid-template-columns:minmax(0,1fr)}
  .home2 .profile .avatar{width:120px}
  .tabs,#tabs{flex-wrap:wrap}
  #q{order:-1;flex:1 0 100%;margin:0 0 8px}
  .notif{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .notif .cat{grid-column:1/-1}
  .auth{margin-top:24px}
  .who-h{flex-wrap:wrap}
}

/* iotad's own rules, served after web/iota.css (the demo's CSS, verbatim).
   Only for places where a server-rendered element stands in for one the
   demo's script drives; anything else belongs in the demo first. */

/* The theme toggle is a <form> posting to /theme so it works without JS
   (the demo's is a bare <button>); the form must not add a box. */
.hdr-icons form{display:contents}

/* The upload form renders every category's fields in fieldset[data-cat] groups
   (a hidden group is disabled, so it is not submitted); they must not add a box.
   Its first button is the form's default (Enter uploads), kept out of sight. */
fieldset[data-cat]{display:contents}
fieldset[data-cat][hidden]{display:none}
.default-submit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* Forums and comments (pages/forums.rs, pages/comments.rs). The demo's links that act
   (Subscribe, Pin, Lock) submit POST forms here: a button that looks like the link. */
button.link{padding:0;border:0;background:none;color:var(--link);font:inherit;cursor:pointer}
button.link:hover{background:none;text-decoration:underline}
/* BBCode the demo's posts never show (images, numbered lists), and comment bodies, which
   reuse the post styles inside .comment with the comment's own spacing. */
.content img{max-width:100%;height:auto}
.content ol{margin:0 0 10px}
.comment .content blockquote,.comment .content pre,.comment .content ul,.comment .content ol,.comment .content details.spoiler{margin:4px 0 0}
.poll .opt label{cursor:pointer}
/* Content-Security-Policy (style-src 'self') refuses style="…" attributes, so the demo's
   inline styles are these classes in the real pages. Each is one of the demo's inline
   declarations, verbatim, and !important so it wins exactly as an inline style did.
   New markup uses a class here (or in the demo's CSS), never style=. */
.u-tar{text-align:right!important}
.u-bt{border-top:1px solid var(--border)!important}
.u-bb{border-bottom:1px solid var(--border)!important}
.u-p10{padding:10px!important}
.u-m0{margin:0!important}
.u-mw520{max-width:520px!important}
.u-h10{height:10px!important}
.u-w42{width:42%!important}
.u-w40{width:40%!important}
.u-wsn{white-space:normal!important}
.u-mt10only{margin:10px 0 0!important}
.u-mt6{margin-top:6px!important}
.u-mtn10{margin-top:-10px!important}
.u-jcs{justify-content:flex-start!important}
.u-contents{display:contents!important}
.u-sq44{width:44px!important;height:44px!important}
.u-minw240{min-width:240px!important}
.u-p4x10{padding:4px 10px!important}
.u-p0x10x10{padding:0 10px 10px!important}
.u-pt0{padding-top:0!important}
.u-off{opacity:.45!important;cursor:not-allowed!important}
.u-minw72{min-width:72px!important}
.u-minw160{min-width:160px!important}
.u-mw120{max-width:120px!important}
.u-m6x0x2{margin:6px 0 2px!important}
.u-mt6only{margin:6px 0 0!important}
.u-pl18{padding-left:18px!important}
.u-bwb{border-width:0 0 1px!important}
.u-m0x16x16{margin:0 16px 16px!important}
.u-mt12{margin-top:12px!important}
.u-mb4{margin-bottom:4px!important}
.u-mb10{margin-bottom:10px!important}
.u-mb16{margin-bottom:16px!important}
.u-ls2{letter-spacing:2px!important}
.u-jce{justify-content:flex-end!important}
.u-nowrap{flex-wrap:nowrap!important}
.u-g36{grid-template-columns:36px 1fr auto!important}
.u-curd{cursor:default!important}
.u-fwn{font-weight:normal!important}
.u-code150{flex:none!important;width:150px!important;min-width:0!important}
.u-flex1{flex:1!important}
.u-mla{margin-left:auto!important}
.u-minw200{min-width:200px!important}
.u-inline{display:inline!important}
.u-qrbox{display:block!important;width:176px!important;height:176px!important;background:#fff!important;border:1px solid var(--border)!important}
.u-qr{display:block!important;width:100%!important;height:100%!important}
.u-muted{color:var(--muted)!important}
.u-inherit{color:inherit!important}
.u-ais{align-items:flex-start!important}
.u-p10x10x0{padding:10px 10px 0!important}
.u-p0{padding:0!important}
.u-sq40{width:40px!important;height:40px!important}
.u-fnone{flex:none!important}
.u-m10{margin:10px!important}
.u-m10x10x0{margin:10px 10px 0!important}
.u-mt8{margin-top:8px!important}
.u-g70{grid-template-columns:70px 1fr!important}
.u-p12x14{padding:12px 14px!important}
.u-fs14{font-size:14px!important}
.u-bord{border:1px solid var(--border)!important}
.u-bb0{border-bottom:0!important}
.u-bt0{border-top:0!important}
/* Bar widths in whole percents (pages.js's barc() and friends). */
.u-pc0{width:0%!important}.u-pc1{width:1%!important}.u-pc2{width:2%!important}.u-pc3{width:3%!important}.u-pc4{width:4%!important}.u-pc5{width:5%!important}.u-pc6{width:6%!important}.u-pc7{width:7%!important}.u-pc8{width:8%!important}.u-pc9{width:9%!important}.u-pc10{width:10%!important}.u-pc11{width:11%!important}.u-pc12{width:12%!important}.u-pc13{width:13%!important}.u-pc14{width:14%!important}.u-pc15{width:15%!important}.u-pc16{width:16%!important}.u-pc17{width:17%!important}.u-pc18{width:18%!important}.u-pc19{width:19%!important}.u-pc20{width:20%!important}.u-pc21{width:21%!important}.u-pc22{width:22%!important}.u-pc23{width:23%!important}.u-pc24{width:24%!important}.u-pc25{width:25%!important}.u-pc26{width:26%!important}.u-pc27{width:27%!important}.u-pc28{width:28%!important}.u-pc29{width:29%!important}.u-pc30{width:30%!important}.u-pc31{width:31%!important}.u-pc32{width:32%!important}.u-pc33{width:33%!important}.u-pc34{width:34%!important}.u-pc35{width:35%!important}.u-pc36{width:36%!important}.u-pc37{width:37%!important}.u-pc38{width:38%!important}.u-pc39{width:39%!important}.u-pc40{width:40%!important}.u-pc41{width:41%!important}.u-pc42{width:42%!important}.u-pc43{width:43%!important}.u-pc44{width:44%!important}.u-pc45{width:45%!important}.u-pc46{width:46%!important}.u-pc47{width:47%!important}.u-pc48{width:48%!important}.u-pc49{width:49%!important}.u-pc50{width:50%!important}.u-pc51{width:51%!important}.u-pc52{width:52%!important}.u-pc53{width:53%!important}.u-pc54{width:54%!important}.u-pc55{width:55%!important}.u-pc56{width:56%!important}.u-pc57{width:57%!important}.u-pc58{width:58%!important}.u-pc59{width:59%!important}.u-pc60{width:60%!important}.u-pc61{width:61%!important}.u-pc62{width:62%!important}.u-pc63{width:63%!important}.u-pc64{width:64%!important}.u-pc65{width:65%!important}.u-pc66{width:66%!important}.u-pc67{width:67%!important}.u-pc68{width:68%!important}.u-pc69{width:69%!important}.u-pc70{width:70%!important}.u-pc71{width:71%!important}.u-pc72{width:72%!important}.u-pc73{width:73%!important}.u-pc74{width:74%!important}.u-pc75{width:75%!important}.u-pc76{width:76%!important}.u-pc77{width:77%!important}.u-pc78{width:78%!important}.u-pc79{width:79%!important}.u-pc80{width:80%!important}.u-pc81{width:81%!important}.u-pc82{width:82%!important}.u-pc83{width:83%!important}.u-pc84{width:84%!important}.u-pc85{width:85%!important}.u-pc86{width:86%!important}.u-pc87{width:87%!important}.u-pc88{width:88%!important}.u-pc89{width:89%!important}.u-pc90{width:90%!important}.u-pc91{width:91%!important}.u-pc92{width:92%!important}.u-pc93{width:93%!important}.u-pc94{width:94%!important}.u-pc95{width:95%!important}.u-pc96{width:96%!important}.u-pc97{width:97%!important}.u-pc98{width:98%!important}.u-pc99{width:99%!important}.u-pc100{width:100%!important}
/* Invite tree depth: 10px plus 18px per level (settings.js's tree). */
.u-ind1{padding-left:28px!important}.u-ind2{padding-left:46px!important}.u-ind3{padding-left:64px!important}.u-ind4{padding-left:82px!important}.u-ind5{padding-left:100px!important}.u-ind6{padding-left:118px!important}.u-ind7{padding-left:136px!important}.u-ind8{padding-left:154px!important}
/* The staff area (M9). */
.u-mt0{margin-top:0!important}
.u-mt10{margin-top:10px!important}
.u-mra{margin-right:auto!important;align-self:center!important}
.u-mw200{max-width:200px!important}
.u-mw220{max-width:220px!important}
.u-h8{height:8px!important}
.u-w24{width:24px!important}
.staff-note{display:block;width:100%;font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);padding:8px}
.staff-msgs{max-height:260px;flex:none}
button.linkish{background:none;border:0;padding:0;color:var(--link);cursor:pointer;font:inherit}
.u-mla{margin-left:auto!important}