/*! Lolibaka — generated by `php artisan lolibaka:css`, do not edit. Sources: resources/css */
/* 10-base.css */
:root{
--pink:#ed4c91;
--pink-soft:#fff0f6;
--ink:#34303e;
--muted:#8a8595;
--bg:#f6f5fa;
--paper:#fff;
--line:#eeeaf2;
--shadow:0 4px 18px #3a214506;
--radius:10px;
color-scheme:light}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font:14px/1.7 Tahoma,'Noto Sans Thai',system-ui,sans-serif;
overflow-wrap:anywhere}
a{
color:inherit;
text-decoration:none}
a:hover{
color:var(--pink)}
button,input,select,textarea{
font:inherit}
button,a,input,textarea,select{
-webkit-tap-highlight-color:transparent}
button,.button{
border:0;
border-radius:6px;
background:var(--pink);
color:#fff;
padding:10px 19px;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px}
button:hover,.button:hover{
filter:brightness(.96);
color:white}
.plain,.quiet{
background:transparent;
color:var(--muted);
padding:6px 9px}
.quiet{
border:1px solid var(--line);
background:var(--paper)}
.quiet:hover,.plain:hover{
color:var(--pink)}
.active,.selected{
color:var(--pink)!important;
background:var(--pink-soft)!important}
.danger{
background:#b92e4c}
.quiet.danger{
background:var(--paper);
color:#b92e4c;
border-color:#e9b8c4}
.quiet.danger:hover{
background:#b92e4c;
border-color:#b92e4c;
color:#fff}
body.dark .quiet.danger{
color:#f08ba3;
border-color:#6a3644}
body.dark .quiet.danger:hover{
color:#fff}
button:disabled{
opacity:.45;
cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:3px solid #c56e9d;
outline-offset:3px}
input,textarea,select{
border:1px solid #e4dfe9;
border-radius:6px;
padding:11px 13px;
background:var(--paper);
color:var(--ink);
max-width:100%;
min-width:0}
textarea{
min-height:140px;
resize:vertical;
width:100%}
label{
display:grid;
gap:7px;
font-weight:500}
h1,h2,h3,p{
margin:0 0 12px}
h1{
font-size:28px;
line-height:1.4}
h2{
font-size:19px}
h3{
font-size:16px}
small,.muted{
color:var(--muted)}
hr{
border:0;
border-top:1px solid var(--line);
margin:24px 0}
main{
max-width:1200px;
margin:24px auto 56px;
min-height:50vh}
.hero{
overflow:hidden;
position:relative;
border-radius:var(--radius);
background:linear-gradient(110deg,#ffe4ec,#fbcfe4 55%,#e4def8);
padding:36px 45px;
min-height:235px;
display:flex;
align-items:center;
margin-bottom:24px}
.hero-copy{
z-index:1;
max-width:65%}
.eyebrow{
letter-spacing:2px;
font-size:11px;
color:#b66d96;
text-transform:uppercase}
.hero h1{
font-size:39px;
color:#653d60;
margin:10px 0;
letter-spacing:-1px}
.hero p{
color:#a16d90}
.hero-art{
position:absolute;
right:0;
bottom:-50px;
height:340px;
width:39%;
object-fit:cover;
border-radius:50% 0 0 0;
opacity:.6}
.hero .button{
margin-top:7px}
.layout{
display:grid;
grid-template-columns:minmax(0,1fr) 270px;
gap:24px}
.sidebar{
display:grid;
align-content:start;
gap:18px}
.panel,.card,.post-card{
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow)}
.panel{
padding:23px}
.section-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
margin:9px 0 18px}
.section-head h1,.section-head h2{
margin:0}
.section-head a:not(.button){
font-size:12px;
color:var(--muted)}
.feed{
columns:2;
column-gap:18px}
.post-card{
break-inside:avoid;
margin:0 0 18px;
overflow:hidden}
.post-head{
display:flex;
align-items:center;
gap:9px;
padding:15px 16px 10px}
.avatar{
width:34px;
height:34px;
display:inline-grid;
place-items:center;
flex-shrink:0;
border-radius:50%;
background:var(--avatar,#eecadc);
color:white;
font-weight:bold;
font-size:16px}
.avatar.large{
width:76px;
height:76px;
font-size:32px;
border:4px solid var(--paper)}
.post-head small{
display:block;
font-size:10px}
.post-body{
padding:0 16px 12px}
.post-body h3{
font-size:14px;
font-weight:500;
line-height:1.7;
margin-bottom:4px}
.excerpt{
font-size:12px;
color:var(--muted);
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden}
.art{
width:100%;
aspect-ratio:1.15;
object-fit:cover;
display:block;
background:var(--bg)}
.post-card:nth-child(3n) .art{
aspect-ratio:.86}
.image-wrap{
position:relative}
.badge{
font-size:10px;
padding:3px 7px;
background:var(--pink-soft);
color:var(--pink);
border-radius:4px;
display:inline-block}
.image-wrap>.badge{
position:absolute;
bottom:12px;
right:12px;
background:#ffffffdb;
color:#555}
.tags{
display:flex;
gap:6px;
flex-wrap:wrap;
margin:12px 0 0}
.tag{
background:var(--bg);
color:var(--muted);
font-size:10px;
padding:3px 8px;
border-radius:4px}
.post-actions{
display:flex;
align-items:center;
gap:7px;
padding:11px 12px;
border-top:1px solid var(--line);
color:var(--muted);
font-size:11px}
.post-actions button{
font-size:11px;
padding:4px 6px}
.post-actions>a{
margin-left:auto}
.ranking{
display:grid;
grid-template-columns:1.7fr repeat(3,1fr);
gap:10px;
margin-bottom:25px}
.rank-card{
position:relative;
overflow:hidden;
border-radius:7px;
min-height:150px}
.rank-card img{
width:100%;
height:100%;
position:absolute;
object-fit:cover}
.rank-card span{
position:absolute;
left:8px;
top:8px;
background:var(--pink);
color:white;
min-width:24px;
border-radius:4px;
text-align:center}
.rank-card b{
position:absolute;
bottom:0;
left:0;
right:0;
padding:25px 10px 10px;
color:#fff;
background:linear-gradient(transparent,#403044af);
font-size:11px}
.creator{
display:flex;
align-items:center;
gap:9px;
padding:11px 0;
border-bottom:1px solid var(--line)}
.creator:last-child{
border:0}
.creator>a{
flex:1;
font-size:12px}
.creator button{
font-size:11px;
padding:5px 10px}
.event-tile{
display:block;
background:linear-gradient(120deg,#fce3d8,#ffd9e8);
border-radius:7px;
padding:22px 18px;
margin:10px 0;
color:#a7566d}
.event-tile:nth-child(3){
background:linear-gradient(120deg,#e6def9,#dbecfa);
color:#67628f}
.event-tile small{
display:block;
margin-top:6px;
font-size:11px}
.side-links{
display:grid;
gap:10px;
font-size:12px;
color:var(--muted)}
.tabs{
display:flex;
gap:6px;
align-items:center;
flex-wrap:wrap;
margin:0 0 20px}
.tabs a{
padding:7px 14px;
border-radius:5px;
color:var(--muted)}
.tabs a.current{
background:var(--pink-soft);
color:var(--pink)}
.form-grid{
display:grid;
gap:20px}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px}
.form-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
margin-top:10px}
.form-narrow{
max-width:520px;
margin:35px auto}
.full{
width:100%}
.list{
display:grid;
gap:14px}
.list-row{
display:flex;
gap:15px;
align-items:center;
padding:18px}
.list-row>div{
flex:1;
min-width:0}
.list-row p{
font-size:12px;
color:var(--muted)}
.list-row img{
width:75px;
height:75px;
object-fit:cover;
border-radius:7px}
.list-row h3{
margin:0 0 4px}
.list-row .actions{
display:flex;
gap:6px;
flex-wrap:wrap;
flex:0 1 auto}
.profile-cover{
height:180px;
background:linear-gradient(110deg,#f9d5e4,#d9dcf6);
border-radius:10px 10px 0 0;
background-size:cover;
background-position:center}
.profile-info{
padding:0 28px 24px}
.profile-info .avatar{
margin-top:-40px;
position:relative}
.profile-info h1{
margin:12px 0 7px}
.profile-stats{
display:flex;
gap:28px;
margin-top:18px;
color:var(--muted)}
.profile-stats b{
color:var(--ink)}
.detail{
padding:30px 40px}
.detail h1{
font-size:25px;
margin:20px 0}
.detail-copy{
white-space:pre-wrap;
line-height:2}
.detail-image{
width:100%;
height:auto;
display:block;
margin:15px auto;
border-radius:5px}
.detail-meta{
color:var(--muted);
font-size:12px}
.comments{
margin-top:24px}
.comment{
display:flex;
gap:12px;
border-bottom:1px solid var(--line);
padding:18px 0}
.comment>div{
flex:1;
min-width:0}
.comment p{
white-space:pre-wrap;
margin:5px 0}
.comment small{
font-size:10px}
.comment-form{
display:grid;
gap:12px;
margin:18px 0}
.empty{
text-align:center;
padding:60px 25px}
.empty .symbol{
font-size:42px;
color:#bfaacb;
margin-bottom:14px}
.empty p{
color:var(--muted)}
.empty img{
max-width:270px;
width:80%}
.grid3{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px}
.grid4{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px}
.feature-card{
padding:23px}
.feature-card h2{
margin:12px 0 6px}
.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
margin:25px 0}
.pagination span{
font-size:12px;
color:var(--muted)}
.settings-layout,.admin-layout{
display:grid;
grid-template-columns:205px minmax(0,1fr);
gap:24px}
.settings-nav{
display:grid;
align-content:start;
padding:12px;
gap:5px}
.settings-nav a{
padding:10px;
border-radius:6px}
.settings-nav a.current{
color:var(--pink);
background:var(--pink-soft)}
.table-scroll{
overflow-x:auto}
table{
width:100%;
border-collapse:collapse;
font-size:12px}
td,th{
text-align:left;
padding:13px;
border-bottom:1px solid var(--line);
white-space:nowrap}
td.wrap{
white-space:normal;
min-width:180px}
.metric{
padding:22px}
.metric b{
font-size:27px;
display:block;
color:var(--pink)}
.metric small{
font-size:11px}
.message{
max-width:80%;
padding:12px 16px;
border-radius:12px;
background:var(--bg);
margin:12px 0;
white-space:pre-wrap}
.message.mine{
margin-left:auto;
background:var(--pink-soft)}
.chat-log{
min-height:260px;
max-height:500px;
overflow-y:auto}
.notice{
border-left:3px solid var(--pink);
background:var(--pink-soft);
padding:13px 17px;
border-radius:4px;
font-size:12px;
margin-bottom:20px}
.upload-box{
padding:30px;
text-align:center;
background:var(--bg);
border:1px dashed #c9bdcf;
border-radius:8px}
.upload-previews{
display:flex;
gap:10px;
flex-wrap:wrap}
.upload-previews img{
width:100px;
height:100px;
object-fit:cover}
.reader{
max-width:720px;
margin:auto;
font-size:var(--reader-size,18px);
line-height:2.2;
white-space:pre-wrap}
.reader p{
margin-bottom:24px}
.reader-tools{
position:sticky;
top:0;
display:flex;
gap:10px;
padding:12px;
background:var(--paper);
border-bottom:1px solid var(--line);
z-index:1}
.viewer{
background:#25232c;
color:white;
padding:20px;
border-radius:10px;
text-align:center}
.viewer img{
max-height:75vh;
max-width:100%;
display:block;
margin:15px auto}
.viewer nav{
display:flex;
justify-content:space-between;
align-items:center}
.history{
border-left:2px solid var(--line);
padding-left:20px;
margin:20px 0}
.history article{
padding:12px 0}
.chart{
display:flex;
gap:14px;
align-items:end;
height:170px;
padding-top:25px}
.chart span{
flex:1;
background:linear-gradient(var(--pink),#f9bfd9);
border-radius:6px 6px 0 0;
position:relative;
min-height:20px}
.chart small{
position:absolute;
bottom:-25px;
left:0}
.sitemap section{
margin-bottom:20px}
.sitemap-links{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px}
.sitemap a{
padding:10px;
background:var(--bg);
border-radius:5px;
font-size:12px}
.skeleton{
display:grid;
gap:15px}
.skeleton i{
display:block;
height:80px;
background:linear-gradient(90deg,var(--bg),var(--line),var(--bg));
border-radius:8px;
animation:pulse 1.5s infinite}
.check{
display:flex;
align-items:center;
gap:10px}
.check input{
width:17px;
height:17px}
.sensitive{
filter:blur(12px);
pointer-events:none}
.media-note{
display:block;
padding:8px;
font-size:11px;
background:var(--bg);
color:var(--muted)}
video,audio{
width:100%;
max-height:550px}
footer{
border-top:1px solid var(--line);
padding:35px 24px;
background:var(--paper)}
.footer-inner{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:30px}
.footer-inner nav{
display:grid;
gap:10px;
font-size:12px;
color:var(--muted)}
.footer-inner p,.local-note{
font-size:11px;
color:var(--muted)}
.local-note{
max-width:1200px;
margin:25px auto 0}
.mobile-nav{
display:none}
.sr-only,.skip{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%)}
.skip:focus{
width:auto;
height:auto;
clip-path:none;
padding:15px;
z-index:100;
background:white}
.pill-count{
background:var(--pink-soft);
color:var(--pink);
padding:3px 8px;
border-radius:20px;
font-size:11px}
dialog{
border:1px solid var(--line);
border-radius:14px;
background:var(--paper);
color:var(--ink);
width:min(500px,94vw);
max-height:90dvh;
padding:27px;
box-shadow:0 20px 80px #32203b35}
dialog::backdrop{
background:#20162880}
dialog .close{
float:right;
background:none;
color:var(--muted);
font-size:22px;
padding:0 5px}
#toast{
position:fixed;
bottom:28px;
left:50%;
transform:translateX(-50%);
background:#393140;
color:#fff;
max-width:90vw;
padding:12px 22px;
border-radius:8px;
z-index:1000;
font-size:13px}
.sep{
height:20px}
body.dark{
--ink:#e8e2ed;
--muted:#aaa0b4;
--bg:#201d26;
--paper:#2b2633;
--line:#3c3546;
--pink-soft:#4b2c40;
color-scheme:dark}
.dark .hero{
background:linear-gradient(110deg,#583449,#3b354e)}
.dark .hero h1{
color:#f5d9e8}
.dark .hero p{
color:#dcb0c8}
.dark .event-tile{
color:#714c66}
.reading-tone .reader{
background:#f5eddc;
color:#554d3d;
padding:25px}
@keyframes pulse{
50%{
opacity:.5}
}
@media(prefers-reduced-motion:reduce){
*{
animation:none!important;
scroll-behavior:auto!important}
}
@media(min-width:1450px){
main{
max-width:1240px}
}
@media(max-width:1250px){
main{
margin:22px 24px 45px}
}
@media(max-width:1000px){
.layout{
grid-template-columns:minmax(0,1fr) 225px;
gap:17px}
.panel{
padding:18px}
.sidebar .creator{
flex-wrap:wrap}
.hero h1{
font-size:32px}
.hero{
padding:30px}
.grid4{
grid-template-columns:repeat(2,minmax(0,1fr))}
.detail{
padding:25px}
.settings-layout,.admin-layout{
grid-template-columns:170px minmax(0,1fr)}
}
@media(max-width:760px){
main{
margin:16px 14px 35px}
.hero{
min-height:200px;
padding:25px 22px}
.hero h1{
font-size:27px}
.hero p{
font-size:12px}
.hero-copy{
max-width:78%}
.hero-art{
width:42%;
right:-40px;
opacity:.35}
.hero .button{
font-size:12px;
padding:8px 14px}
.layout{
display:block}
.sidebar{
margin-top:25px;
grid-template-columns:1fr 1fr;
gap:14px}
.sidebar>section:last-child{
grid-column:1/-1}
.feed{
column-gap:12px}
.post-card{
margin-bottom:12px}
.post-head{
padding:11px 10px 8px}
.post-body{
padding:0 10px 10px}
.post-body h3{
font-size:12px}
.post-head small{
font-size:9px}
.post-head strong{
font-size:11px}
.avatar{
width:28px;
height:28px;
font-size:13px}
.post-actions{
gap:1px;
padding:8px 5px;
font-size:10px;
flex-wrap:wrap}
.post-actions button{
font-size:10px}
.tags{
gap:4px}
.tag{
font-size:9px;
padding:2px 5px}
.ranking{
gap:7px;
grid-template-columns:1.5fr 1fr 1fr}
.rank-card{
min-height:135px}
.rank-card:last-child{
display:none}
.rank-card b{
font-size:10px}
.grid3{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px}
.grid4{
gap:12px}
.section-head h1{
font-size:23px}
.section-head{
align-items:start}
.section-head a:not(.button){
white-space:nowrap;
font-size:11px}
.settings-layout,.admin-layout{
display:block}
.settings-nav{
display:flex;
overflow-x:auto;
white-space:nowrap;
margin-bottom:18px}
.settings-nav a{
padding:8px 12px}
.detail{
padding:20px}
.detail h1{
font-size:22px}
.form-row{
grid-template-columns:1fr}
.sitemap-links{
grid-template-columns:1fr 1fr}
.footer-inner{
grid-template-columns:1fr 1fr;
gap:25px}
.footer-inner>div{
grid-column:1/-1}
.mobile-nav{
display:flex;
position:fixed;
bottom:0;
left:0;
right:0;
z-index:50;
justify-content:space-around;
align-items:center;
background:var(--paper);
border-top:1px solid var(--line);
padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.mobile-nav a{
display:grid;
text-align:center;
font-size:24px;
line-height:1.3;
color:var(--muted);
min-width:50px}
.mobile-nav small{
font-size:9px}
.mobile-nav .mobile-create{
color:var(--pink);
font-size:30px}
.mobile-nav .mobile-create small{
font-size:9px}
.local-note{
padding-bottom:70px}
#toast{
bottom:90px}
.list-row{
padding:14px;
gap:10px;
flex-wrap:wrap}
.list-row img{
width:60px;
height:60px}
.list-row .actions{
flex-basis:100%;
justify-content:flex-end}
.tabs a{
padding:6px 10px;
font-size:12px}
.reader{
font-size:var(--reader-size,17px)}
.profile-cover{
height:135px}
.profile-info{
padding:0 20px 20px}
}
@media(max-width:390px){
.sidebar{
grid-template-columns:1fr}
.grid3{
grid-template-columns:1fr}
.sitemap-links{
grid-template-columns:1fr}
.hero h1{
font-size:24px}
.hero-copy{
max-width:95%}
.post-head .avatar{
display:none}
}
/* 15-gallery.css */
.photo-channel-heading{
margin:0 0 17px}
.photo-channel-heading h1{
font-size:23px}
.photo-feature-layout{
margin-bottom:30px}
.photo-feature-layout .sidebar{
max-height:385px;
overflow:hidden}
.photo-feature-layout .sidebar>section:nth-child(n+2){
display:none}
.photo-rank-tabs{
min-height:34px;
margin-bottom:12px;
gap:6px}
.photo-rank-tabs a{
padding:5px 12px;
font-size:12px}
.photo-ranking{
display:grid;
grid-template-columns:2.05fr repeat(3,minmax(0,1fr));
grid-template-rows:repeat(2,164px);
gap:9px}
.photo-rank-tile{
position:relative;
display:block;
min-width:0;
min-height:0;
border-radius:6px;
overflow:hidden;
background:var(--line)}
.photo-rank-tile:first-child{
grid-row:span 2}
.photo-rank-tile>img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:transform .2s}
.photo-rank-tile:hover>img{
transform:scale(1.035)}
.photo-rank-number{
position:absolute;
left:0;
top:0;
min-width:22px;
padding:0 5px;
line-height:24px;
border-radius:0 0 5px 0;
background:#999;
color:#fff;
font-size:16px;
font-weight:bold;
font-style:italic}
.photo-rank-tile:nth-child(1) .photo-rank-number{
background:#f16766}
.photo-rank-tile:nth-child(2) .photo-rank-number{
background:#ffb61e}
.photo-rank-tile:nth-child(3) .photo-rank-number{
background:#e9d647}
.photo-rank-author{
position:absolute;
bottom:0;
left:0;
right:0;
display:flex;
align-items:center;
gap:6px;
padding:25px 8px 9px;
background:linear-gradient(transparent,#33283a99);
color:white;
font-size:10px}
.photo-rank-author>span:last-child{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis}
.photo-rank-author .avatar{
display:inline-grid;
width:20px;
height:20px;
border:1px solid white;
font-size:10px}
.photo-list-heading{
border-bottom:1px solid var(--line);
padding-bottom:10px}
.photo-list-heading h2{
font-size:16px}
.photo-list-heading .tabs{
margin:0;
font-size:12px}
.photo-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:14px 11px}
.photo-card{
min-width:0;
background:var(--paper);
border-radius:5px;
overflow:hidden;
box-shadow:0 1px 3px #3026380c;
border:1px solid var(--line)}
.photo-cover{
display:block;
position:relative;
aspect-ratio:2/3;
overflow:hidden;
background:var(--line)}
.photo-cover>img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .2s}
.photo-cover:hover>img{
transform:scale(1.035)}
.photo-count{
position:absolute;
right:5px;
bottom:5px;
background:#332d3f8c;
border-radius:3px;
padding:1px 5px;
font-size:10px;
color:white}
.photo-meta{
display:flex;
align-items:center;
gap:4px;
padding:6px;
min-height:32px}
.photo-author{
min-width:0;
display:flex;
align-items:center;
gap:4px;
flex:1;
font-size:10px;
color:var(--muted)}
.photo-author>span:last-child{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis}
.photo-author .avatar{
display:inline-grid;
width:16px;
height:16px;
font-size:8px}
.photo-like{
background:transparent;
color:var(--muted);
padding:2px 0;
gap:3px;
flex-shrink:0;
font-size:9px;
border-radius:3px}
.photo-like:hover{
color:var(--pink)}
.photo-like.selected{
background:transparent!important}
@media(min-width:1450px){
.photo-ranking{
grid-template-rows:repeat(2,180px)}
}
@media(max-width:1000px){
.photo-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
.photo-ranking{
grid-template-rows:repeat(2,145px)}
.photo-rank-author{
font-size:9px;
padding-left:5px}
.photo-feature-layout{
grid-template-columns:minmax(0,1fr) 200px;
gap:15px}
}
@media(max-width:760px){
.photo-feature-layout .sidebar{
display:none}
.photo-ranking{
grid-template-rows:repeat(2,clamp(105px,19vw,145px));
grid-template-columns:1.85fr repeat(3,minmax(0,1fr));
gap:6px}
.photo-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px 7px}
.photo-rank-tabs{
gap:0}
.photo-rank-tabs a{
font-size:11px;
padding:5px 9px}
.photo-rank-author .avatar{
width:16px;
height:16px;
font-size:8px}
.photo-rank-author{
gap:4px;
font-size:8px;
padding:20px 5px 6px}
.photo-channel-heading h1{
font-size:21px}
.photo-channel-heading .quiet{
padding:6px 10px;
font-size:12px}
.photo-feature-layout{
margin-bottom:22px}
.photo-meta{
padding:5px 4px;
flex-wrap:wrap}
.photo-like{
font-size:8px}
.photo-author{
font-size:9px}
.photo-list-heading h2{
font-size:14px}
}
@media(max-width:420px){
.photo-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.photo-rank-number{
font-size:12px;
min-width:16px;
line-height:18px;
padding:0 3px}
.photo-rank-author .avatar{
display:none}
.photo-rank-author{
font-size:7px}
.photo-rank-tabs a{
padding:5px 7px;
font-size:10px}
.photo-meta{
flex-wrap:nowrap}
.photo-author{
font-size:10px}
.photo-like{
font-size:9px}
}
.numbered-pagination{
flex-wrap:wrap;
gap:10px}
.page-numbers{
display:flex;
align-items:center;
gap:6px}
.page-number{
display:inline-grid;
place-items:center;
min-width:34px;
min-height:34px;
padding:4px 8px;
border:1px solid var(--line);
background:var(--paper);
border-radius:5px;
font-size:12px}
.page-number[aria-current]{
border-color:var(--pink);
font-weight:bold}
.page-disabled{
color:var(--muted);
opacity:.5;
font-size:12px;
padding:8px}
.page-summary{
flex-basis:100%;
text-align:center;
font-size:11px}
@media(max-width:500px){
.numbered-pagination{
gap:6px}
.page-numbers{
gap:3px}
.page-number{
min-width:28px;
min-height:32px;
padding:3px 6px}
.numbered-pagination>.quiet{
font-size:11px;
padding:6px}
.page-disabled{
font-size:10px;
padding:3px}
}
.page-jump{
display:flex;
justify-content:center;
flex-basis:100%;
margin-top:5px}
.page-jump input{
width:165px;
border-radius:5px 0 0 5px;
padding:8px 12px;
text-align:center;
appearance:textfield}
.page-jump input::-webkit-inner-spin-button,.page-jump input::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0}
.page-jump button{
border-radius:0 5px 5px 0;
padding:8px 17px;
min-width:50px}
.photo-cover>img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center}
.rank-category-tabs,.rank-period-tabs{
display:flex;
justify-content:center;
align-items:center;
gap:0}
.rank-category-tabs{
margin:8px 0 16px}
.rank-category-tabs a{
padding:0 20px;
font-size:15px;
font-weight:bold;
color:var(--muted);
border-right:1px solid var(--line)}
.rank-category-tabs a:last-child{
border:0}
.rank-category-tabs a.current{
color:var(--ink)}
.rank-period-tabs{
width:max-content;
max-width:100%;
margin:0 auto 25px;
padding:4px;
background:var(--line);
border-radius:6px}
.rank-period-tabs a{
padding:3px 18px;
font-size:11px;
border-radius:4px;
color:var(--muted)}
.rank-period-tabs a.current{
background:var(--paper);
color:var(--ink);
box-shadow:0 1px 3px #44364b12}
.rank-photo-grid{
grid-template-columns:repeat(5,minmax(0,1fr));
gap:16px 12px}
.ranked-photo{
position:relative}
.gallery-rank-number{
position:absolute;
z-index:2;
top:0;
left:0;
border-radius:0 0 4px 0;
min-width:22px;
line-height:22px;
padding:0 5px;
font-size:11px;
color:#696572;
background:#e6e4ebdd}
.gallery-rank-number.podium{
color:white}
.podium-1{
background:#ec6864}
.podium-2{
background:#f4b527}
.podium-3{
background:#e3d14c}
.rank-gallery .photo-count{
display:none}
@media(max-width:1000px){
.rank-photo-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
.rank-photo-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px 8px}
.rank-category-tabs a{
padding:0 12px;
font-size:12px}
.rank-period-tabs a{
padding:3px 12px;
font-size:10px}
}
@media(max-width:420px){
.rank-photo-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.rank-category-tabs a{
padding:0 9px;
font-size:11px}
}
/* 20-tags.css */
.tag-input-wrap{
position:relative}
.tag-input-wrap>input{
width:100%}
.tag-suggestions{
position:absolute;
left:0;
right:0;
top:calc(100% + 6px);
background:var(--paper);
border:1px solid var(--line);
border-radius:9px;
box-shadow:0 12px 36px #3021391a;
z-index:80;
overflow:hidden}
.tag-suggestions[hidden]{
display:none}
.tag-suggestions button{
width:100%;
border-radius:0;
background:var(--paper);
color:var(--ink);
display:flex;
justify-content:flex-start;
padding:10px 14px;
text-align:left;
border-bottom:1px solid var(--line)}
.tag-suggestions button:hover,.tag-suggestions button:focus{
background:var(--pink-soft);
color:var(--ink)}
.tag-suggestions button>span:nth-child(2){
display:grid;
flex:1}
.tag-suggestions b{
font-size:12px;
font-weight:500}
.tag-suggestions small{
font-size:10px;
color:var(--muted)}
.suggestion-count{
font-size:10px;
color:var(--muted)}
.tag-no-suggestion{
padding:13px;
font-size:12px;
color:var(--muted)}
.tag-category-dot{
width:8px;
height:8px;
border-radius:50%;
flex-shrink:0}
.tag-dot-artist{
background:#dd7b65}
.tag-dot-copyright{
background:#a582c6}
.tag-dot-character{
background:#60ad8e}
.tag-dot-general{
background:#779acb}
.tag-dot-meta{
background:#c4aa60}
.tag-search-panel{
margin-bottom:23px;
padding:23px 27px}
.tag-search-panel .form-grid{
gap:14px}
.tag-search-controls{
display:flex;
align-items:end;
gap:12px}
.tag-search-controls label{
font-size:11px;
min-width:150px}
.tag-search-controls button{
margin-left:auto;
min-width:110px}
.tag-search-hint{
font-size:11px;
color:var(--muted);
margin:12px 0 0}
.tag-query-examples{
display:flex;
gap:13px;
flex-wrap:wrap;
font-size:11px;
color:var(--muted);
margin-top:10px}
.tag-query-examples a{
color:var(--pink)}
.selected-tag-chips{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:17px}
.selected-tag-chip{
padding:5px 10px;
color:#a94875;
background:var(--pink-soft);
border:1px solid #f5d6e4;
border-radius:5px;
font-size:11px;
display:flex;
gap:12px;
align-items:center}
.selected-tag-chip.excluded{
background:var(--bg);
color:var(--muted);
border-style:dashed}
.clear-tags{
font-size:11px;
color:var(--muted);
padding:5px}
.tag-search-layout{
display:grid;
grid-template-columns:240px minmax(0,1fr);
gap:24px;
align-items:start}
.tag-search-layout>section{
min-width:0}
.tag-filter{
padding:20px 18px;
position:sticky;
top:15px}
.tag-filter h2{
margin:8px 0 3px;
font-size:17px}
.tag-help{
font-size:10px}
.tag-category{
margin:20px 0}
.tag-category h3{
font-size:11px;
font-weight:500;
letter-spacing:.3px;
margin-bottom:8px;
color:var(--muted)}
.tag-row{
display:flex;
gap:6px;
align-items:center;
padding:7px 0;
min-width:0}
.tag-row-name{
flex:1;
min-width:0;
line-height:1.4;
font-size:12px}
.tag-row-name span{
display:block;
overflow-wrap:anywhere}
.tag-row-name small{
display:block;
font-size:9px;
margin-top:3px}
.tag-use-count{
font-size:10px;
color:var(--muted)}
.tag-wiki-link{
width:16px;
height:16px;
display:inline-grid;
place-items:center;
border-radius:50%;
border:1px solid var(--line);
font-size:10px;
color:var(--muted);
flex-shrink:0}
.tag-row-tools{
display:flex;
gap:3px;
margin-left:3px}
.tag-mini{
font-size:12px;
color:var(--muted);
width:17px;
text-align:center}
.tag-directory-link{
display:block;
font-size:11px;
color:var(--pink);
border-top:1px solid var(--line);
padding-top:13px}
.tag-category-artist .tag-row-name,.tag-color-artist{
color:#bc6c56}
.tag-category-copyright .tag-row-name,.tag-color-copyright{
color:#9671bd}
.tag-category-character .tag-row-name,.tag-color-character{
color:#489a7b}
.tag-category-general .tag-row-name,.tag-color-general{
color:#608bc1}
.tag-category-meta .tag-row-name,.tag-color-meta{
color:#aa914d}
.tag-results-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
.post-tag-panel{
padding:20px 18px}
.post-tag-panel h2{
font-size:16px}
.post-tag-panel .tag-row-tools{
display:none}
.post-tag-panel .tag-row-name{
font-size:11px}
.post-tag-panel .tag-category{
margin:15px 0}
.tag-legend{
display:flex;
justify-content:space-between;
color:var(--muted);
font-size:9px;
margin:15px 0}
.tag-directory-hero{
background:linear-gradient(110deg,#fae8f1,#eeebfa);
border:1px solid var(--line);
border-radius:10px;
padding:34px 38px;
margin-bottom:22px}
.tag-directory-hero h1{
font-size:28px;
margin:9px 0}
.tag-directory-hero p{
color:#98869d;
font-size:12px}
.tag-directory-search{
display:flex;
max-width:520px;
margin-top:19px;
gap:8px}
.tag-directory-search input{
flex:1;
min-width:0}
.tag-directory-card{
padding:22px;
display:flex;
flex-direction:column;
min-width:0}
.tag-category-badge{
background:var(--bg);
border-radius:4px;
font-size:10px;
padding:3px 8px;
width:max-content;
max-width:100%;
display:inline-block}
.tag-directory-card h2{
font-size:17px;
margin:15px 0 3px}
.tag-directory-card code{
font-size:10px;
color:var(--muted);
overflow-wrap:anywhere}
.tag-directory-card p{
font-size:12px;
color:var(--muted);
margin:12px 0 20px;
flex:1}
.tag-card-footer{
display:flex;
align-items:center;
justify-content:space-between;
padding-top:12px;
border-top:1px solid var(--line);
font-size:11px}
.tag-card-footer a{
color:var(--pink)}
.tag-page-header{
padding:27px 30px;
margin-bottom:22px}
.tag-page-header .section-head{
margin:13px 0}
.tag-page-header h1{
font-size:30px;
margin:0}
.tag-canonical{
font-size:12px;
color:var(--muted);
margin:4px 0 0}
.tag-page-header>p{
font-size:11px;
margin:0}
.tag-wiki-layout{
display:grid;
grid-template-columns:205px minmax(0,1fr);
gap:24px;
align-items:start}
.tag-wiki-layout>section{
min-width:0}
.wiki-sidebar{
display:grid;
gap:10px;
font-size:12px}
.wiki-sidebar h3{
font-size:14px}
.wiki-sidebar hr{
margin:5px 0}
.wiki-sidebar code{
font-size:10px;
overflow-wrap:anywhere;
color:var(--muted)}
.wiki-article{
padding:30px 34px}
.wiki-article h2{
margin:7px 0 0}
.wiki-article h3{
font-size:15px}
.wiki-lead{
font-size:16px;
line-height:2;
margin:23px 0}
.wiki-guidelines{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-bottom:27px}
.wiki-guidelines section{
background:var(--bg);
padding:19px;
border-radius:7px;
border-left:3px solid #83b7a4}
.wiki-guidelines section:last-child{
border-color:#dd9eaf}
.wiki-guidelines h3{
font-size:12px}
.wiki-guidelines p{
font-size:12px;
color:var(--muted);
margin:0}
.wiki-examples{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:15px}
.wiki-examples img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
border-radius:6px;
display:block}
.wiki-examples span{
font-size:10px;
color:var(--muted);
display:block;
margin-top:8px}
.wiki-proposal{
margin-bottom:18px}
.wiki-proposal h3{
margin:10px 0}
.wiki-compare{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
font-size:12px}
.wiki-compare section{
background:var(--bg);
padding:15px;
border-radius:7px}
.dark .tag-directory-hero{
background:linear-gradient(110deg,#493142,#353045)}
.dark .tag-directory-hero h1{
color:#f2dfe9}
@media(max-width:1000px){
.tag-search-layout{
grid-template-columns:210px minmax(0,1fr);
gap:17px}
.tag-results-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.tag-wiki-layout{
grid-template-columns:170px minmax(0,1fr);
gap:17px}
.wiki-article{
padding:25px}
.tag-row-tools{
display:none}
}
@media(max-width:760px){
.tag-search-layout,.tag-wiki-layout{
display:flex;
flex-direction:column;
gap:18px}
.tag-search-layout>*,.tag-wiki-layout>*{
width:100%}
.tag-filter{
position:static;
max-height:280px;
overflow:auto}
.tag-filter .tag-category{
display:inline-block;
vertical-align:top;
width:calc(50% - 10px);
padding-right:12px;
margin-top:10px}
.tag-row-name{
font-size:11px}
.tag-row-tools{
display:flex}
.tag-search-panel{
padding:20px}
.tag-search-controls{
flex-wrap:wrap}
.tag-search-controls label{
min-width:0;
flex:1}
.tag-search-controls button{
font-size:12px;
min-width:0}
.tag-query-examples{
gap:10px;
font-size:10px}
.tag-results-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.tag-directory-hero{
padding:25px}
.tag-directory-hero h1{
font-size:24px}
.tag-directory-card{
padding:18px}
.tag-page-header{
padding:23px}
.tag-page-header .section-head{
flex-wrap:wrap}
.tag-page-header h1{
font-size:25px}
.wiki-sidebar{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
padding:15px}
.wiki-sidebar hr,.wiki-sidebar code,.wiki-sidebar small{
display:none}
.wiki-sidebar h3{
margin:0 12px 0 0}
.wiki-article{
padding:22px}
.wiki-guidelines{
grid-template-columns:1fr}
.wiki-lead{
font-size:14px}
.wiki-examples{
gap:9px}
.wiki-compare{
grid-template-columns:1fr}
}
@media(max-width:420px){
.tag-results-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.tag-filter .tag-category{
width:100%}
.tag-search-controls button{
flex-basis:100%}
.tag-directory-hero{
padding:22px 19px}
.tag-directory-hero h1{
font-size:21px}
.wiki-article .section-head{
flex-wrap:wrap}
.wiki-examples{
grid-template-columns:repeat(2,minmax(0,1fr))}
.wiki-examples a:last-child{
display:none}
}
.mobile-tag-toggle{
display:none}
@media(max-width:760px){
.mobile-tag-toggle{
display:inline-flex;
margin-top:5px;
font-size:11px}
.tag-filter{
max-height:none;
overflow:visible}
.tag-filter-content{
display:none}
.tag-filter.expanded .tag-filter-content{
display:block;
max-height:350px;
overflow:auto}
.tag-filter:not(.expanded) .tag-help{
margin-bottom:5px}
}
/* 25-tag-drawer.css */
body.tag-drawer-open{
overflow:hidden}
#tag-drawer{
position:fixed;
inset:0 auto 0 0;
margin:0;
width:380px;
max-width:calc(100vw - 24px);
height:100dvh;
max-height:100dvh;
border:0;
border-right:1px solid var(--line);
border-radius:0;
padding:0;
box-shadow:15px 0 70px #32203930;
overflow:hidden;
background:var(--paper)}
#tag-drawer[open]{
display:flex;
flex-direction:column;
animation:tag-drawer-in .24s ease-out}
#tag-drawer::backdrop{
background:#29223166;
backdrop-filter:blur(2px)}
.drawer-header{
padding:26px 25px 19px;
background:linear-gradient(120deg,var(--pink-soft),var(--bg));
display:flex;
gap:15px;
align-items:start;
flex-shrink:0}
.drawer-header>div{
flex:1}
.drawer-header h2{
font-size:23px;
margin:8px 0 4px}
.drawer-header p{
font-size:11px;
color:var(--muted);
margin:0}
.drawer-close{
border:1px solid var(--line);
border-radius:50%;
width:29px;
height:29px;
min-width:29px;
padding:0;
background:var(--paper);
color:var(--muted);
font-size:21px;
line-height:1}
.drawer-search{
display:grid;
grid-template-columns:minmax(0,1fr) 119px;
gap:8px;
padding:17px 22px 14px;
flex-shrink:0}
.drawer-search input,.drawer-search select{
width:100%;
font-size:11px;
padding:10px 9px}
.drawer-selection{
padding:0 22px 15px;
border-bottom:1px solid var(--line);
max-height:170px;
overflow-y:auto;
flex-shrink:0}
.drawer-section-head{
display:flex;
align-items:center;
justify-content:space-between;
font-size:11px;
margin-bottom:8px}
.drawer-section-head button{
font-size:10px;
padding:2px 0}
.drawer-selection-empty{
font-size:11px;
color:var(--muted);
margin:5px 0}
#drawer-selected{
display:flex;
gap:6px;
flex-wrap:wrap}
.drawer-chip{
background:var(--pink-soft);
color:var(--pink);
border:1px solid #efcfdf;
padding:4px 8px;
border-radius:5px;
gap:8px;
font-size:10px}
.drawer-chip.excluded{
background:var(--bg);
color:var(--muted);
border:1px dashed #c9c0d0}
.drawer-list-header{
display:flex;
justify-content:space-between;
padding:13px 22px 4px;
flex-shrink:0}
.drawer-list-header small{
font-size:9px}
.drawer-tag-list{
padding:0 22px 20px;
overflow-y:auto;
overscroll-behavior:contain;
flex:1;
min-height:0}
.drawer-tag-group{
margin:18px 0 0}
.drawer-tag-group h3{
display:flex;
align-items:center;
gap:7px;
font-size:11px;
color:var(--muted);
margin:0 0 7px;
font-weight:500}
.drawer-tag-row{
display:flex;
align-items:center;
gap:7px;
min-height:48px;
padding:7px 0;
border-bottom:1px solid var(--line)}
.drawer-tag-row .tag-row-name{
font-size:12px}
.drawer-tag-row .tag-row-name small{
font-size:9px}
.drawer-tag-button{
width:25px;
min-width:25px;
height:25px;
padding:0;
background:var(--bg);
color:var(--muted);
border:1px solid var(--line);
font-size:15px;
border-radius:5px}
.drawer-tag-button:hover{
background:var(--pink-soft);
color:var(--pink)}
.drawer-tag-row .tag-wiki-link{
width:18px;
height:18px}
.drawer-footer{
padding:15px 22px calc(15px + env(safe-area-inset-bottom));
background:var(--paper);
border-top:1px solid var(--line);
display:grid;
grid-template-columns:1fr auto;
gap:10px;
flex-shrink:0}
.drawer-footer>div{
display:grid;
line-height:1.5}
.drawer-footer small{
font-size:9px}
.drawer-footer strong{
font-size:15px;
font-weight:500}
.drawer-footer .button{
font-size:12px;
padding:9px 18px}
.drawer-directory-link{
grid-column:1/-1;
text-align:center;
font-size:10px;
color:var(--muted);
padding-top:3px}
.drawer-no-tags{
text-align:center;
color:var(--muted);
padding:50px 10px}
.drawer-no-tags>span{
font-size:34px}
.drawer-no-tags p{
font-size:13px;
margin:8px 0}
.drawer-no-tags small{
font-size:11px}
@keyframes tag-drawer-in{
from{
transform:translateX(-100%)}
to{
transform:translateX(0)}
}
@media(max-width:760px){
.drawer-header{
padding:22px 20px 17px}
.drawer-search{
padding:14px 17px;
grid-template-columns:minmax(0,1fr) 110px}
.drawer-selection{
padding-left:17px;
padding-right:17px}
.drawer-tag-list{
padding-left:17px;
padding-right:17px}
.drawer-list-header{
padding-left:17px;
padding-right:17px}
.drawer-footer{
padding-left:17px;
padding-right:17px}
.drawer-tag-row{
min-height:49px}
}
/* 30-image-board.css */
.image-board-layout{
display:grid;
grid-template-columns:240px minmax(0,1fr) 260px;
gap:16px;
align-items:start}
.image-board-layout .panel{
padding:18px}
.image-board-main,.image-tag-sidebar,.image-info-sidebar{
min-width:0}
.image-tag-sidebar .tag-row{
flex-wrap:wrap}
.image-tag-sidebar .tag-row-name{
min-width:80px}
.image-board-layout .image-work{
padding:0;
overflow:hidden}
.image-work-nav{
display:flex;
justify-content:space-between;
gap:12px;
padding:16px;
border-bottom:1px solid var(--line)}
.board-full-image{
display:block;
width:100%;
height:auto}
.image-caption{
padding:22px}
.image-caption h1{
font-size:22px}
.image-author{
text-align:center}
.image-statistics{
display:grid;
gap:7px;
margin:0}
.image-statistics dt{
font-size:12px;
color:var(--muted);
margin-top:10px}
.image-statistics dd{
margin:0;
overflow-wrap:anywhere}
.image-import{
border:1px solid var(--line);
border-radius:14px;
overflow:hidden}
.import-url{
background:var(--bg);
padding:24px;
display:grid;
gap:12px}
.import-url-row{
display:flex;
gap:8px}
.import-url-row input{
flex:1;
min-width:0}
.import-url #import-result{
font-size:13px;
margin:0}
.upload-divider{
display:flex;
justify-content:center;
color:var(--muted);
padding:12px}
.image-drop-zone{
padding:20px;
text-align:center;
display:grid;
gap:12px;
transition:background .2s}
.image-drop-zone label{
cursor:pointer;
font-weight:600}
.image-drop-zone input{
max-width:100%;
margin:auto}
.image-drop-zone.dragging{
background:#ffe5ef;
outline:2px dashed #ec518b;
outline-offset:-6px}
.upload-symbol{
font-size:32px;
color:#ec518b}
.import-guide{
max-width:920px;
margin:auto}
.import-guide h2{
margin-top:24px}
.source-site-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px}
.source-site-grid article{
border:1px solid var(--line);
border-radius:10px;
padding:16px;
display:grid;
gap:8px}
.source-site-grid small{
overflow-wrap:anywhere}
.source-status{
font-size:12px;
color:var(--muted)}
@media(min-width:1500px){
.image-board-layout{
grid-template-columns:260px minmax(0,1fr) 280px}
}
@media(max-width:1050px){
.image-board-layout{
grid-template-columns:220px minmax(0,1fr)}
.image-info-sidebar{
grid-column:2}
.image-tag-sidebar{
grid-row:1 / span 2}
.source-site-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
.image-board-layout{
display:flex;
flex-direction:column}
.image-board-main{
order:0;
width:100%}
.image-tag-sidebar{
order:1;
width:100%}
.image-info-sidebar{
order:2;
width:100%}
.import-url{
padding:16px}
.import-url-row{
flex-direction:column}
.source-site-grid{
grid-template-columns:1fr}
.image-work-nav{
font-size:12px}
.image-caption{
padding:16px}
}
.image-tag-sidebar .tag-row{
flex-wrap:nowrap;
padding:6px 0;
gap:7px}
.image-tag-sidebar .tag-row-name{
font-size:14px;
min-width:0}
.image-tag-sidebar .tag-row-name span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
overflow-wrap:normal}
.image-tag-sidebar .tag-use-count{
font-size:11px;
flex-shrink:0}
.image-tag-sidebar .tag-category{
margin:13px 0}
.image-statistics{
grid-template-columns:auto minmax(0,1fr);
column-gap:12px;
row-gap:0;
align-items:baseline}
.image-statistics dt,.image-statistics dd{
margin:0;
padding:9px 0;
border-bottom:1px solid var(--line);
font-size:12px;
line-height:1.6;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.image-statistics dd{
text-align:right}
.image-statistics dt:last-of-type,.image-statistics dd:last-of-type{
border-bottom:0}
/* 35-lightbox.css */
.board-image-button{
display:block;
width:100%;
padding:0;
border:0;
border-radius:0;
background:none;
cursor:zoom-in}
.board-image-button:hover{
background:none}
body.image-lightbox-open{
overflow:hidden}
#image-lightbox{
position:fixed;
inset:0;
width:100vw;
max-width:100vw;
height:100dvh;
max-height:100dvh;
margin:0;
padding:0;
border:0;
border-radius:0;
background:#08080c;
color:#fff;
overflow:hidden}
#image-lightbox[open]{
display:flex}
#image-lightbox::backdrop{
background:#08080c}
.lightbox-stage{
position:relative;
flex:1;
min-width:0;
height:100%;
padding:65px 90px 75px}
.lightbox-canvas{
width:100%;
height:100%;
overflow:auto;
display:grid;
place-items:center}
.lightbox-canvas>img{
max-width:100%;
max-height:100%;
object-fit:contain;
transform-origin:center;
transition:transform .15s}
.lightbox-close,.lightbox-discussion-toggle{
position:absolute;
top:16px;
z-index:3;
border-radius:50%;
background:#242436;
color:white;
width:44px;
height:44px;
padding:0;
font-size:28px}
.lightbox-close{
left:16px}
.lightbox-discussion-toggle{
right:16px;
font-size:22px}
.lightbox-arrow{
position:absolute;
top:48%;
background:#181822bb;
color:white;
border-radius:50%;
width:46px;
height:46px;
padding:0;
font-size:34px}
.lightbox-arrow.previous{
left:20px}
.lightbox-arrow.next{
right:85px}
.lightbox-thumbnails{
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
display:grid;
gap:8px;
max-height:65%;
overflow:auto}
.lightbox-thumbnails button{
padding:0;
width:52px;
height:52px;
border:2px solid transparent;
overflow:hidden;
background:#272732}
.lightbox-thumbnails button[aria-pressed=true]{
border-color:#fff}
.lightbox-thumbnails img{
width:100%;
height:100%;
object-fit:cover}
.lightbox-toolbar{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:10px;
background:#000c;
padding:7px 12px;
border-radius:12px;
white-space:nowrap;
font-size:13px}
.lightbox-toolbar .quiet{
background:transparent;
color:#fff;
border:0;
padding:5px;
font-size:14px}
.lightbox-discussion{
display:none;
width:380px;
flex-shrink:0;
flex-direction:column;
min-height:0;
background:var(--paper);
color:var(--ink);
border-radius:16px 0 0 16px}
.show-discussion .lightbox-discussion{
display:flex}
.show-discussion .lightbox-discussion-toggle{
right:396px}
.lb-author{
display:flex;
align-items:center;
gap:10px;
padding:16px 18px 10px}
.lb-author .avatar{
width:40px;
height:40px}
.lb-author div{
display:grid;
min-width:0}
.lb-author a{
color:var(--ink)}
.lb-author small{
color:var(--muted);
font-size:12px}
.lb-description{
padding:0 18px 8px;
font-size:13px}
.lb-tags{
gap:5px;
padding:0 18px 10px;
border-bottom:1px solid var(--line)}
.lb-tags .tag{
font-size:11px;
padding:2px 8px}
.lb-comments{
flex:1;
min-height:0;
overflow:auto;
padding:4px 18px 12px}
.lb-comments h3{
font-size:13px;
margin:10px 0 2px;
color:var(--muted)}
.lb-comments .comment{
padding:12px 0}
.lb-more{
display:block;
padding:10px 0;
font-size:13px}
.lb-bar{
border-top:1px solid var(--line);
padding:8px 14px 12px;
display:grid;
gap:8px;
background:var(--paper)}
.lb-actions{
display:flex;
justify-content:space-around;
align-items:center}
.lb-actions form{
margin:0}
.lb-action{
display:grid;
justify-items:center;
gap:1px;
min-width:56px;
padding:4px 8px;
border:0;
border-radius:10px;
background:transparent;
color:var(--ink);
font-size:20px;
line-height:1.1;
cursor:pointer;
box-shadow:none}
.lb-action small{
font-size:11px;
color:var(--muted)}
.lb-action:hover{
background:var(--pink-soft);
color:var(--ink)}
.lb-action.is-on{
color:var(--pink)}
.lb-write{
display:flex;
gap:8px;
align-items:flex-end}
.lb-write textarea{
flex:1;
min-height:40px;
max-height:140px;
resize:vertical;
border-radius:12px;
padding:9px 12px;
font-size:14px;
background:var(--bg)}
.lb-write button{
padding:9px 16px;
border-radius:12px}
.lb-write-login{
text-align:center;
font-size:13px;
padding:6px}
@media(max-width:700px){
.lightbox-stage{
padding:70px 20px 140px}
.lightbox-thumbnails{
top:auto;
bottom:72px;
left:20px;
right:20px;
transform:none;
display:flex;
justify-content:center}
.lightbox-thumbnails button{
flex-shrink:0;
width:40px;
height:40px}
.lightbox-arrow.next{
right:10px}
.lightbox-arrow.previous{
left:10px}
.lightbox-toolbar{
gap:7px;
font-size:12px;
bottom:16px}
.show-discussion .lightbox-discussion{
position:absolute;
right:0;
top:65px;
bottom:0;
width:min(380px,100vw);
border-radius:16px 16px 0 0;
box-shadow:-10px 0 40px #0008;
z-index:4}
.show-discussion .lightbox-discussion-toggle{
right:16px}
}
.lightbox-canvas{
min-height:0;
min-width:0}
.lightbox-canvas>img{
width:100%;
height:100%;
min-height:0;
min-width:0}
#image-lightbox .lightbox-canvas{
position:relative;
display:block;
overflow:hidden;
touch-action:none;
user-select:none;
cursor:zoom-in}
#image-lightbox .lightbox-canvas>img{
position:absolute;
inset:0;
width:100%;
height:100%;
max-width:none;
max-height:none;
object-fit:contain;
transform-origin:center;
transition:none;
pointer-events:none;
user-select:none}
.lightbox-thumbnails,.lightbox-discussion{
scrollbar-width:none}
.lightbox-thumbnails::-webkit-scrollbar,.lightbox-discussion::-webkit-scrollbar{
display:none}
.lightbox-toolbar{
gap:9px}
.lightbox-toolbar button{
min-width:20px}
.lightbox-toolbar button:hover{
background:#363644;
color:white}
#image-lightbox .comment-actions { gap: 2px; }
#image-lightbox .comment-actions .plain { padding: 2px 6px; font-size: 12px; }
/* 40-tag-directory.css */
.tag-directory-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:10px}
.compact-tag-hero{
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
padding:22px 26px;
margin-bottom:18px}
.compact-tag-hero h1{
font-size:24px;
margin:5px 0}
.compact-tag-hero p{
margin:0}
.compact-tag-hero .tag-directory-search{
margin:0;
width:420px;
max-width:48%}
.compact-tag-card{
padding:14px 12px;
box-shadow:none;
overflow:hidden}
.compact-tag-card .tag-category-badge{
font-size:9px;
padding:2px 5px}
.compact-tag-card h2{
font-size:14px;
margin:10px 0 4px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.compact-tag-card h2 a{
display:block;
overflow:hidden;
text-overflow:ellipsis}
.compact-tag-card p{
font-size:10px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin:0 0 12px;
line-height:1.5}
.compact-tag-card .tag-card-footer{
padding-top:8px;
font-size:10px}
.compact-tag-card .tag-card-footer small{
font-size:10px}
.tag-directory-summary h2{
font-size:16px}
.tag-directory-summary h2 small{
font-weight:400;
font-size:11px;
margin-left:10px;
color:var(--muted)}
@media(max-width:1100px){
.tag-directory-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
.tag-directory-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.compact-tag-hero{
display:block;
padding:20px}
.compact-tag-hero .tag-directory-search{
max-width:100%;
width:100%;
margin-top:15px}
.tag-directory-summary{
align-items:start;
gap:10px}
.tag-directory-summary h2 small{
display:block;
margin:4px 0}
}
@media(max-width:480px){
.tag-directory-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px}
.compact-tag-card{
padding:12px 10px}
}
/* 45-community.css */
.header-popup{
position:absolute;
top:calc(100% + 8px);
right:22px;
width:320px;
max-width:calc(100vw - 24px);
z-index:150;
background:var(--paper);
border:1px solid var(--line);
border-radius:12px;
box-shadow:0 18px 45px #25202c26;
overflow:hidden}
.header-popup[hidden]{
display:none}
.header-popup-heading{
display:flex;
align-items:center;
gap:10px;
padding:17px;
border-bottom:1px solid var(--line)}
.header-popup-heading>div{
display:grid;
gap:3px}
.header-popup-heading small{
font-size:11px;
color:var(--muted)}
.header-popup-heading button{
margin-left:auto;
font-size:11px}
.header-account-links{
display:grid;
padding:7px 10px}
.header-account-links a,.header-account-links button{
padding:11px 10px;
text-align:left;
font-size:13px;
color:var(--ink);
border-radius:6px}
.header-account-links a:hover{
background:var(--bg)}
.header-account-links button{
border-top:1px solid var(--line);
color:#d85b72}
.notification-popup-list{
max-height:360px;
overflow:auto}
.notification-popup-item{
display:flex;
gap:10px;
padding:16px;
border-bottom:1px solid var(--line)}
.notification-popup-item.unread{
background:var(--pink-soft)}
.notification-popup-item>span{
color:var(--pink)}
.notification-popup-item b{
font-size:12px;
font-weight:500}
.notification-popup-item small{
display:block;
font-size:10px;
color:var(--muted);
margin-top:6px}
.notification-popup-footer{
display:block;
text-align:center;
padding:15px;
font-size:12px;
color:var(--pink)}
.circle-directory-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 270px;
gap:20px;
align-items:start}
.circle-directory{
padding:0 24px}
.circle-category-nav{
display:flex;
gap:20px;
flex-wrap:wrap;
padding:24px 0;
border-bottom:1px solid var(--line);
font-size:13px}
.circle-category-nav .current{
color:var(--pink)}
.circle-category{
padding:25px 0}
.circle-category h2{
font-size:17px;
margin:0 0 18px}
.circle-category h2 small{
font-size:11px;
font-weight:400;
color:var(--muted);
margin-left:8px}
.circle-card-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px}
.circle-card{
border:1px solid var(--line);
border-radius:7px;
padding:14px;
display:flex;
gap:10px;
min-width:0;
align-items:start}
.circle-card>img{
width:44px;
height:44px;
border-radius:9px;
object-fit:cover;
flex-shrink:0}
.circle-card>div{
min-width:0}
.circle-card h3{
font-size:13px;
margin:0 0 6px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.circle-card small,.circle-card p{
font-size:10px;
color:var(--muted);
margin:5px 0}
.circle-create-guide h2{
font-size:17px}
.circle-create-guide p,.circle-create-guide li{
font-size:12px;
line-height:2}
.circle-create-guide ol{
padding-left:18px}
.mobile-nav button{
background:none;
color:var(--muted);
padding:0;
display:grid;
justify-items:center}
.mobile-nav button small{
font-size:9px}
@media(max-width:1050px){
.circle-directory-layout{
grid-template-columns:1fr}
.circle-create-guide{
order:-1}
.circle-card-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
.header-popup{
position:fixed;
top:75px;
right:12px}
.circle-card-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.circle-directory{
padding:0 16px}
.circle-category-nav{
gap:14px}
}
@media(max-width:480px){
.circle-card-grid{
grid-template-columns:1fr}
}
/* 50-bbcode-circles.css */
.bb-toolbar{
display:flex;
align-items:center;
gap:3px;
flex-wrap:wrap;
border:1px solid var(--line);
border-top:0;
padding:5px;
background:var(--bg);
border-radius:0 0 6px 6px}
.bb-toolbar button{
background:transparent;
color:var(--muted);
padding:5px 7px;
min-width:27px;
font-size:12px;
border:0}
.bb-toolbar button:hover{
color:var(--pink);
background:var(--pink-soft)}
.bb-help{
margin-left:auto;
font-size:10px;
padding:5px}
.bb-editor textarea{
border-radius:6px 6px 0 0;
display:block}
.bb-preview{
padding:16px;
border:1px dashed var(--line);
margin-top:8px;
overflow-wrap:anywhere}
.bb-content{
line-height:1.9;
font-size:13px;
overflow-wrap:anywhere}
.bb-content a{
color:var(--pink)}
.bb-content img,.bb-image{
max-width:100%;
max-height:500px;
object-fit:contain}
.bb-quote{
display:block;
padding:12px 16px;
border-left:3px solid var(--pink);
background:var(--bg);
margin:10px 0}
.bb-code{
display:block;
white-space:pre-wrap;
padding:14px;
background:var(--bg);
font-family:monospace;
overflow:auto}
.bb-center{
display:block;
text-align:center}
.bb-list{
display:block;
padding-left:14px}
.bb-list>span{
display:block}
.bb-spoiler{
padding:10px;
background:var(--bg);
margin:10px 0}
.bb-spoiler summary{
cursor:pointer;
color:var(--pink)}
.bb-guide-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
border-bottom:1px solid var(--line);
padding:15px 0}
.circle-inner-layout{
display:grid;
grid-template-columns:190px minmax(0,1fr) 245px;
gap:16px;
align-items:start}
.circle-inner-layout .panel{
padding:20px}
.circle-center,.circle-left,.circle-right{
min-width:0}
.circle-inner-layout h3{
font-size:14px}
.circle-mini{
display:flex;
gap:10px;
align-items:center;
padding:10px 0;
font-size:11px}
.circle-mini img{
width:32px;
height:32px;
border-radius:6px;
object-fit:cover}
.circle-cover-heading{
display:flex;
gap:12px;
align-items:center;
margin-bottom:16px}
.circle-cover-heading>img{
width:50px;
height:50px;
object-fit:cover;
border-radius:9px}
.circle-cover-heading h1{
font-size:19px;
margin:0}
.circle-cover-heading small{
font-size:10px;
color:var(--muted)}
.circle-cover-stats{
display:flex;
gap:12px;
align-items:center;
margin-left:auto;
flex-shrink:0}
.circle-cover-stats b{
display:grid;
text-align:center}
.circle-cover-stats button{
padding:8px;
font-size:11px}
.circle-composer-heading{
display:flex;
align-items:center;
gap:10px;
margin-bottom:18px;
font-size:12px}
.circle-composer textarea{
min-height:120px}
.circle-composer #circle-choice-fields textarea{
min-height:90px}
.circle-feed-filter nav{
display:flex;
gap:17px;
flex-wrap:wrap;
font-size:11px;
padding:8px 0}
.circle-feed-filter .current{
color:var(--pink);
font-weight:bold}
.circle-feed{
display:grid;
gap:15px}
.circle-post header{
display:flex;
gap:10px;
align-items:center}
.circle-post header small{
display:block;
font-size:10px;
color:var(--muted)}
.circle-post h2{
font-size:17px;
margin:20px 0 12px}
.circle-post-image{
background:transparent;
padding:0;
display:inline-block;
margin:12px 0;
cursor:zoom-in;
max-width:100%}
.circle-post-image img{
display:block;
max-width:100%;
max-height:300px;
border-radius:6px}
.circle-poll{
padding:16px;
background:var(--bg);
margin:16px 0;
display:grid;
gap:10px;
border-radius:7px}
.circle-poll>b{
font-size:12px}
.circle-poll>div{
display:grid;
gap:4px}
.circle-poll button{
text-align:left;
white-space:normal;
justify-content:start}
.circle-poll small{
font-size:10px}
.circle-right p{
font-size:12px;
line-height:1.8}
@media(max-width:1100px){
.circle-inner-layout{
grid-template-columns:170px minmax(0,1fr)}
.circle-right{
grid-column:1/-1;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px}
}
@media(max-width:760px){
.circle-inner-layout{
display:flex;
flex-direction:column}
.circle-center{
order:0;
width:100%}
.circle-left{
order:1;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px}
.circle-right{
order:2;
display:block;
width:100%}
.circle-cover-heading{
flex-wrap:wrap}
.circle-cover-stats{
margin-left:0}
.circle-cover-heading h1{
font-size:17px}
.bb-guide-row{
grid-template-columns:1fr}
.bb-toolbar{
gap:1px}
.bb-toolbar button{
padding:5px}
.circle-inner-layout .panel{
padding:16px}
}
/* 55-bbcode-help.css */
.bb-field-label{
display:block;
margin-bottom:9px}
.bb-editor .bb-toolbar{
border:1px solid var(--line);
border-bottom:0;
border-radius:6px 6px 0 0}
.bb-editor textarea{
border-radius:0 0 6px 6px}
.bb-toolbar .bb-help{
margin-left:auto;
font-size:10px}
#bb-help-dialog{
width:760px;
max-width:calc(100vw - 28px);
max-height:85dvh;
overflow:auto;
border:1px solid var(--line);
border-radius:14px;
background:var(--paper);
color:var(--ink);
padding:26px}
#bb-help-dialog::backdrop{
background:#24202c88}
#bb-help-dialog>.panel{
padding:0;
border:0;
box-shadow:none}
#bb-help-dialog h2{
font-size:22px;
margin-top:0}
#bb-help-dialog .bb-guide-row code{
white-space:pre-wrap;
overflow-wrap:anywhere}
#bb-help-dialog .close{
position:sticky;
top:0;
float:right}
/* 60-attachments.css */
.attachment-item{
margin:0;
max-width:180px;
background:var(--bg);
padding:8px;
border:1px solid var(--line);
border-radius:8px}
.attachment-item img{
width:100%;
height:100px;
object-fit:cover}
.attachment-item figcaption{
font-size:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin:5px 0}
.attachment-item>div{
display:flex;
gap:5px}
.attachment-item button{
font-size:11px;
padding:6px 9px}
.upload-previews{
flex-wrap:wrap}
.upload-previews[aria-busy=true]{
opacity:.5}
.bb-editor:not(:has(.bb-toolbar)) textarea{
border-radius:6px}
.bb-guide-row>div{
overflow-wrap:anywhere}
@media(max-width:480px){
.bb-toolbar button{
min-width:30px;
min-height:32px}
.circle-composer .upload-box{
padding:12px}
}
/* 65-responsive-polish.css */
@media (max-width: 480px) {
  .header-popup { top: 62px; max-height: calc(100dvh - 145px); overflow-y: auto; }
  .bb-toolbar button { min-width: 36px; min-height: 36px; }
  .page-numbers { flex-wrap: wrap; justify-content: center; }
  .page-number { min-width: 32px; }
}
.header-popup :focus-visible,
.bb-toolbar :focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}
#bb-help-dialog .close,
#modal .close { min-width: 36px; min-height: 36px; }
.recovery-notice { display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--pink-soft); border:1px solid var(--line); border-radius:7px; padding:10px 12px; margin-bottom:12px; font-size:11px; }
.recovery-notice button { font-size:11px; padding:6px 10px; }
.recovery-status { font-size:10px; color:var(--muted); }
/* 70-completion.css */
.completion-nav{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 22px}.completion-nav a{padding:9px 13px;border:1px solid var(--line,#dedce8);border-radius:8px}.completion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.completion-grid>*{min-width:0}.completion-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted,#777);font-size:13px}.completion-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line,#dedce8)}.completion-row>div:first-child{flex:1;min-width:150px}.completion-diff{display:grid;grid-template-columns:1fr 1fr;gap:16px}.completion-diff section{border:1px solid var(--line,#dedce8);border-radius:8px;padding:16px;overflow-wrap:anywhere}.completion-badge{display:inline-block;padding:3px 9px;border-radius:20px;background:#eee8f4;color:#744b85;font-size:12px}.completion-cover{width:100%;max-height:220px;object-fit:cover;border-radius:10px}.completion-avatar{width:60px;height:60px;object-fit:cover;border-radius:50%}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.completion-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.completion-check{display:flex;gap:10px;align-items:center}.completion-check input{width:auto}.completion-preview{width:200px;height:200px;object-fit:cover;max-width:100%}.completion-notice{padding:14px;border-left:3px solid #d65c95;background:rgba(214,92,149,.07);margin:14px 0}.completion-timeline{border-left:2px solid #ddd;padding-left:20px}.completion-timeline article{margin:0 0 20px}.completion-help details{border-bottom:1px solid var(--line,#dedce8);padding:15px 0}.completion-help summary{cursor:pointer;font-weight:600}.completion-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}.completion-toolbar input{flex:1;min-width:120px}.completion-progress{width:100%;height:8px;accent-color:#d65c95}.completion-grid .panel{margin:0}body.dark .completion-badge{background:#403349;color:#ead7ef}body.dark .completion-notice{background:#322530}@media(max-width:900px){.completion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.completion-grid,.completion-diff{grid-template-columns:1fr}.completion-row{align-items:flex-start}.completion-nav{gap:6px}.completion-nav a{padding:8px}.completion-actions>*{max-width:100%}}
/* 80-admin.css */
.admin-body { margin: 0; background: var(--bg); color: var(--ink); }
.admin-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.admin-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--paper); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.admin-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; font-weight: 800; letter-spacing: .04em; color: var(--ink); text-decoration: none; }
.admin-brand b { color: var(--pink); }
.admin-nav-group { margin: 0; }
.admin-nav-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; border-radius: 8px; }
.admin-nav-group summary::-webkit-details-marker { display: none; }
.admin-nav-group summary::after { content: '▸'; font-size: 10px; margin-left: auto; padding-left: 6px; transition: transform .15s; }
.admin-nav-group[open] summary::after { transform: rotate(90deg); }
.admin-nav-group summary .admin-badge { margin-left: auto; }
.admin-nav-group a { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px 7px 16px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.admin-nav-group a:hover { background: var(--bg); }
.admin-nav-group a.current { background: var(--pink-soft); color: var(--pink); font-weight: 700; }
.admin-badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 16px; }
.admin-side-foot { margin-top: auto; padding: 10px; font-size: 13px; }
.admin-main-col { min-width: 0; display: flex; flex-direction: column; }
.admin-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.admin-menu-button { display: none; }
.admin-search { position: relative; flex: 1; max-width: 560px; }
.admin-search input { width: 100%; }
.admin-search-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: 4px; max-height: 60vh; overflow-y: auto; }
.admin-search-pop a { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.admin-search-pop a.active { background: var(--pink-soft); }
.admin-search-pop small { min-width: 56px; color: var(--muted); }
.admin-search-pop em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.admin-top-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.admin-me { font-weight: 600; text-decoration: none; }
.admin-content { padding: 20px 24px 60px; max-width: 1400px; width: 100%; box-sizing: border-box; }
.admin-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-page-head h1 { margin: 0; font-size: 24px; }
.admin-crumb { margin: 0 0 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.admin-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-scrim { display: none; }
.admin-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.admin-card h2 { font-size: 17px; margin: 0 0 12px; }
.admin-link-list { margin: 0; padding-left: 18px; }
.admin-link-list li { margin: 4px 0; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.admin-filters input:not([type=date]), .admin-filters select { min-width: 140px; }
.admin-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.admin-table { width: 100%; background: var(--paper); }
.admin-table th { white-space: nowrap; }
.admin-check { width: 28px; }
.admin-sort { color: inherit; text-decoration: none; }
.admin-sort span { color: var(--muted); font-size: 11px; }
.admin-sort.is-asc span, .admin-sort.is-desc span { color: var(--pink); }
.admin-bulk { position: sticky; top: 58px; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; padding: 10px 12px; background: var(--pink-soft); border: 1px solid var(--pink); border-radius: var(--radius); }
.admin-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--pink-soft); color: var(--pink); font-size: 11px; font-weight: 700; }
.admin-changes { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 4px 0 0; font-size: 12px; }
.admin-changes dt { color: var(--muted); }
.admin-changes dd { margin: 0; overflow-wrap: anywhere; }
.admin-changes del { color: #b4233a; }
.admin-changes ins { color: #15803d; text-decoration: none; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.permission-grid fieldset { margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.permission-grid small { display: block; margin-left: 24px; }
.two-factor-qr svg { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; }
.recovery-codes { padding: 10px 14px; background: var(--bg); border-radius: 8px; font-size: 14px; letter-spacing: .05em; }
@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side { position: fixed; left: 0; top: 0; z-index: 60; width: 260px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 30px rgba(0, 0, 0, .2); }
    .admin-shell.nav-open .admin-side { transform: none; }
    .admin-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .35); }
    .admin-menu-button { display: inline-flex; }
    .admin-top { padding: 8px 12px; }
    .admin-me { display: none; }
    .admin-content { padding: 14px 12px 50px; }
    .admin-bulk { top: 52px; }
}
.admin-link-sort { max-width: 90px; }
.danbooru-table th, .danbooru-table td { vertical-align: top; }
.danbooru-table td.is-diff, .admin-table td.is-diff { color: var(--pink); font-weight: 700; }
.danbooru-body { max-height: 320px; overflow: auto; font-size: 13px; }
.danbooru-table { width: 100%; table-layout: fixed; }
.danbooru-table th:nth-child(1) { width: 44px; }
.danbooru-table th:nth-child(2) { width: 22%; }
.danbooru-table td, .danbooru-table th, .danbooru-body * { overflow-wrap: anywhere; white-space: normal; }
.danbooru-table select { max-width: 100%; }
.recovery-run-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.recovery-run { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.recovery-run button { justify-self: start; }
/* 82-admin-dashboard.css */
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 8px; }
.admin-stat { display: grid; gap: 2px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
a.admin-stat:hover { border-color: var(--pink); }
.admin-stat small { color: var(--muted); font-weight: 600; }
.admin-stat b { font-size: 28px; line-height: 1.15; }
.admin-stat span { font-size: 12px; color: var(--muted); }
.admin-stat-wait { background: var(--pink-soft); border-color: var(--pink); }
.admin-delta { font-style: normal; font-weight: 700; }
.admin-delta.up { color: #15803d; }
.admin-delta.down { color: #b4233a; }
.admin-chart-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.admin-segment { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.admin-segment a { padding: 6px 12px; font-size: 13px; color: var(--ink); text-decoration: none; }
.admin-segment a + a { border-left: 1px solid var(--line); }
.admin-segment a.is-on { background: var(--pink); color: #fff; }
.admin-metric-picks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.admin-metric-picks label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.admin-metric-picks i, .admin-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.admin-chart { margin: 0; }
.admin-chart svg { width: 100%; height: 240px; display: block; }
.admin-chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.admin-chart-axis { fill: var(--muted); font-size: 11px; }
.admin-chart-hit { fill: transparent; }
.admin-chart-hit:hover { fill: rgba(237, 76, 145, .08); }
.admin-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; margin-top: 6px; }
.admin-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.admin-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.admin-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #16a34a; vertical-align: middle; }
.admin-dot.warn { background: #f59e0b; }
.admin-dot.bad { background: #dc2626; }
.admin-health { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.admin-health li { display: grid; grid-template-columns: 14px minmax(110px, auto) 1fr; gap: 8px; align-items: baseline; font-size: 14px; }
.admin-health li.bad b { color: #dc2626; }
.admin-card h3 { font-size: 14px; margin: 14px 0 6px; color: var(--muted); }
.admin-top-posts { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-top-posts a { display: grid; gap: 2px; text-decoration: none; font-size: 11px; }
.admin-top-posts img { width: 60px; height: 90px; object-fit: cover; border-radius: 6px; }
.admin-tag-cloud a { display: inline-block; margin: 0 6px 4px 0; }
.admin-rank { margin: 0; padding-left: 20px; }
.admin-queue-tabs { margin-bottom: 10px; }
.admin-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.admin-queue-item { display: grid; grid-template-columns: 22px 80px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); outline: none; }
.admin-queue-item.is-focus { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink-soft); }
.admin-queue-item.is-claimed { opacity: .7; }
.admin-queue-item.is-mine { border-left: 4px solid var(--pink); }
.admin-queue-media img { width: 80px; height: 120px; object-fit: cover; border-radius: 6px; display: block; }
.admin-queue-media img.is-blurred { filter: blur(8px); }
.admin-queue-icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 8px; background: var(--bg); font-size: 30px; }
.admin-queue-body p { margin: 0 0 6px; }
.admin-queue-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.admin-queue-reasons span { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: #fee2e2; color: #991b1b; font-size: 12px; font-weight: 600; }
.admin-queue-quote { margin: 4px 0 8px; padding: 6px 10px; border-left: 3px solid var(--line); background: var(--bg); border-radius: 0 6px 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.admin-queue-quote.is-subject { border-left-color: var(--pink); }
.admin-queue-claim { font-size: 12px; font-weight: 700; color: var(--pink); }
.admin-queue-actions { display: grid; gap: 6px; min-width: 150px; }
.admin-queue-actions button { width: 100%; display: flex; justify-content: space-between; gap: 8px; }
.admin-queue-actions kbd, .admin-keys kbd { font-size: 11px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--muted); }
.admin-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 4px 18px 18px; }
@media (max-width: 760px) {
    .admin-queue-item { grid-template-columns: 22px 60px minmax(0, 1fr); }
    .admin-queue-media img, .admin-queue-icon { width: 60px; height: 90px; }
    .admin-queue-actions { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.admin-member-head { display: flex; gap: 16px; align-items: center; }
.admin-member-head p { margin: 0 0 4px; }
.admin-member-name { font-size: 20px; }
.admin-pill.is-bad { background: #fee2e2; color: #991b1b; }
.admin-sanctions { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.admin-sanctions li { padding: 8px 10px; border-radius: 8px; background: var(--bg); font-size: 14px; }
.admin-sanctions li.is-active { background: #fee2e2; color: #7f1d1d; }
.admin-sanction-form { margin-bottom: 8px; }
.admin-note { padding: 8px 10px; margin-top: 8px; border-left: 3px solid #f59e0b; background: var(--bg); border-radius: 0 8px 8px 0; }
.admin-note p { margin: 0 0 4px; white-space: pre-line; }
.admin-top-posts a.is-deleted img { opacity: .4; }
.admin-dupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 16px; }
.admin-dupe-head { margin: 0 0 8px; }
.admin-dupe-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.admin-dupe-pair figure { margin: 0; }
.admin-dupe-pair img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--bg); }
.admin-dupe-pair img.is-blurred { filter: blur(10px); }
.admin-dupe-pair figcaption { font-size: 12px; margin-top: 6px; color: var(--muted); }
@media (max-width: 520px) { .admin-dupes { grid-template-columns: 1fr; } }
.admin-announcement { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.admin-announcement p { margin: 0; }
.admin-announcement.is-running b { color: #15803d; }
.announcement { position: relative; padding-right: 36px; }
.announcement .bb-content p:last-child { margin-bottom: 0; }
.announcement-warning { background: #fef3c7; border-color: #f59e0b; color: #78350f; }
.announcement-success { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.announcement-close { position: absolute; top: 6px; right: 8px; font-size: 18px; line-height: 1; }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.admin-log li { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid #94a3b8; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.admin-log li.admin-log-error, .admin-log li.admin-log-critical, .admin-log li.admin-log-emergency { border-left-color: #dc2626; }
.admin-log li.admin-log-warning { border-left-color: #f59e0b; }
.admin-log summary { cursor: pointer; overflow-wrap: anywhere; }
.admin-log time { color: var(--muted); font-size: 12px; }
.admin-log pre { margin: 6px 0 0; white-space: pre-wrap; font-size: 11px; max-height: 320px; overflow: auto; }
.admin-bar-cell { width: 40%; }
.admin-bar { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--pink), #ff9a62); }
.admin-cache-actions { display: grid; gap: 10px; }
.admin-cache-actions form { display: grid; gap: 2px; justify-items: start; }
/* 90-lolibaka.css */
[x-cloak] { display: none !important; }
.flash { margin: 18px 0; }
.field-error { color: #b92e4c; }
.photo-card { position: relative; }
.photo-card.is-blurred .photo-cover img, .photo-rank-tile.is-blurred img { filter: blur(18px) saturate(.8); transform: scale(1.06); transition: filter .25s ease, transform .25s ease; }
.photo-card.is-blurred.is-revealed .photo-cover img, .photo-rank-tile.is-blurred.is-revealed img { filter: none; transform: none; }
.photo-card.blur-explicit .photo-cover::after, .photo-rank-tile.blur-explicit::after { content: ""; position: absolute; inset: 0; background: rgba(230, 70, 90, .28); pointer-events: none; transition: opacity .25s ease; }
.photo-card.blur-explicit.is-revealed .photo-cover::after, .photo-rank-tile.blur-explicit.is-revealed::after { opacity: 0; }
.photo-blur-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 11px; white-space: nowrap; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .photo-card.is-blurred .photo-cover img, .photo-rank-tile.is-blurred img { transition: none; } }
.photo-cover { position: relative; overflow: hidden; }
.photo-rating { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #fff; background: #c9851f; }
.photo-rating.rating-s { background: #4c8fd6; }
.photo-rating.rating-e { background: #b92e4c; }
.board-full-image.blur-explicit.post-image-blur { filter: blur(28px) sepia(.35) hue-rotate(-20deg) saturate(1.6); }
.photo-missing { display: grid; place-items: center; aspect-ratio: 2 / 3; color: var(--muted); background: var(--bg); font-size: 12px; }
.photo-hidden-cover { display: grid; place-items: center; align-content: center; gap: 2px; width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius) var(--radius) 0 0;
    background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 10px, var(--paper) 10px, var(--paper) 20px); color: var(--ink); border: 1px dashed var(--line); }
.photo-stats { color: var(--muted); font-size: 12px; white-space: nowrap; }
.photo-stats span { margin-left: 6px; }
.board-image-button { padding: 0; background: none; display: block; width: 100%; }
.post-image-blur { filter: blur(28px); }
.post-adult-reveal { position: absolute; inset: 0; display: grid; place-items: center; }
.image-work-media { position: relative; overflow: hidden; }
.tag-diff-added { color: #2e7d4f; }
.tag-diff-removed { color: #b92e4c; text-decoration: line-through; }
.history-table td { vertical-align: top; }
.comment-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.comment-actions form { display: inline; }
.stat-strip { display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); }
.stat-strip b { color: var(--ink); font-size: 18px; margin-right: 4px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.form-hint { color: var(--muted); font-size: 12px; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.radio-row input, .check-row input { width: auto; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.photo-rank-tile { overflow: hidden; }
.selected-tag-chip.excluded { text-decoration: line-through; }
.drawer-tag-list.is-loading { opacity: .6; }
.bb-hidden { background: currentColor; border-radius: 3px; padding: 0 2px; cursor: help; transition: background-color .15s; }
.bb-hidden:hover, .bb-hidden:focus, .bb-hidden:focus-within { background: var(--pink-soft); outline: none; }
.bb-hidden:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.bb-hidden * { color: inherit; }
@media (prefers-reduced-motion: reduce) { .bb-hidden { transition: none; } }
.verified-badge { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--pink); color: #fff; font-size: .7em; vertical-align: middle; }
.theme-toggle { font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 999px; }
.theme-toggle:hover { background: var(--pink-soft); }
.theme-toggle:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.social-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.social-buttons .social-line { border-color: #06c755; }
.social-buttons .social-google { border-color: #4285f4; }
.social-buttons .social-facebook { border-color: #1877f2; }
.hero-gallery { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); display: flex; }
.hero-gallery a { display: block; width: 140px; aspect-ratio: 2 / 3; margin-left: -34px; border-radius: 12px; overflow: hidden;
    box-shadow: 0 12px 28px rgba(80, 30, 60, .22); border: 3px solid var(--paper);
    transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc(var(--i) * 6px - 6px)); transition: transform .2s; }
.hero-gallery a:hover, .hero-gallery a:focus-visible { transform: rotate(0) translateY(-6px); z-index: 1; }
.hero-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .hero-gallery a { width: 110px; } }
@media (max-width: 700px) { .hero-gallery { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-gallery a { transition: none; } }
.profile-cover { display: flex; overflow: hidden; position: relative; }
.profile-cover img { height: 100%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; flex: none; opacity: .55; }
.profile-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--paper)); opacity: .45; pointer-events: none; }
.dark .profile-cover { background: linear-gradient(110deg, #583449, #3b354e); }
.grid-host { container-type: inline-size; }
.photo-grid.g24, .photo-grid.g20 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 11px; }
@container (min-width: 440px) { .photo-grid.g24 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 520px) { .photo-grid.g20 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 640px) { .photo-grid.g24 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 760px) { .photo-grid.g20 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (min-width: 880px) { .photo-grid.g24 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
textarea:focus, select:focus {
    outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft);
}
input, textarea, select { transition: border-color .15s, box-shadow .15s; }
@media (prefers-reduced-motion: reduce) { input, textarea, select { transition: none; } }
.search-start { display: grid; gap: 14px; padding-block: 28px; }
.search-start-form { display: flex; gap: 8px; }
.search-start-form input { flex: 1; font-size: 16px; }
.search-syntax { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.search-popular { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.search-popular .tag small { opacity: .6; margin-left: 4px; }
dialog.modal { border: none; border-radius: 18px; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
    background: var(--paper); color: var(--ink); box-shadow: 0 24px 70px rgba(40, 12, 34, .34); overflow: auto; }
dialog.modal::backdrop { background: rgba(26, 14, 30, .46); backdrop-filter: blur(5px); }
dialog.modal[open] { animation: modal-in .2s cubic-bezier(.2, .8, .3, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 4px; }
.modal-head h2 { font-size: 18px; margin: 0; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 24px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.modal-close:hover { background: var(--pink-soft); color: var(--ink); }
.modal-body { padding: 8px 22px 12px; margin: 0; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 22px 20px; }
.modal-actions button { min-width: 96px; }
.modal fieldset { border: none; padding: 0; margin: 0; }
.modal legend { font-weight: 600; margin-bottom: 8px; }
.choice-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; }
.choice-chip:has(input:checked) { border-color: var(--pink); background: var(--pink-soft); }
.choice-chip input { accent-color: var(--pink); }
@media (max-width: 560px) {
    dialog.modal { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    @keyframes modal-in { from { transform: translateY(40px); opacity: .6; } }
    .modal-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { dialog.modal[open] { animation: none; } }
.header-popup { border-radius: 16px; box-shadow: 0 18px 50px rgba(40, 12, 34, .22); animation: modal-in .16s ease-out; }
#toast { border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.post-share h3 { margin-bottom: 10px; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: none; padding: 0;
    font: 700 18px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.share-btn:hover, .share-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.share-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.share-facebook { background: #1877f2; color: #fff; font-size: 22px; }
.share-x { background: #111; color: #fff; }
.share-line { background: #06c755; color: #fff; font-size: 11px; letter-spacing: .02em; }
.share-copy, .share-native { background: var(--pink-soft); color: var(--ink); }
.dark .share-x { background: #f2f2f2; color: #111; }
@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } }
.bb-editor .bb-shell { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.bb-editor .bb-shell:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.bb-editor .bb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg); }
.bb-editor .bb-tabs { display: flex; gap: 2px; background: var(--paper); border-radius: 8px; padding: 2px; }
.bb-editor .bb-tabs button { border: none; background: none; color: var(--muted); font-size: 13px; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.bb-editor .bb-tabs button.is-active { background: var(--pink-soft); color: var(--ink); font-weight: 600; }
.bb-editor .bb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; border: none; padding: 0; background: none; border-radius: 0; flex: 1; }
.bb-editor .bb-toolbar button, .bb-editor .bb-toolbar .bb-help { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px;
    border: none; border-radius: 8px; background: none; color: var(--muted); font-size: 15px; cursor: pointer; text-decoration: none; }
.bb-editor .bb-toolbar button:hover, .bb-editor .bb-toolbar .bb-help:hover { background: var(--pink-soft); color: var(--ink); }
.bb-editor .bb-toolbar .bb-help { margin-left: auto; font-weight: 700; }
.bb-editor .bb-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.bb-editor textarea { border: none; border-radius: 0; box-shadow: none; display: block; width: 100%; min-height: 140px; padding: 12px 14px; }
.bb-editor textarea:focus { box-shadow: none; }
.bb-editor .bb-preview { min-height: 140px; padding: 12px 14px; border: none; }
.bb-editor .bb-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 12px; }
.bb-editor .bb-count { font-variant-numeric: tabular-nums; color: var(--muted); }
.bb-editor .bb-count.is-near { color: var(--pink); font-weight: 600; }
@media (max-width: 480px) { .bb-editor .bb-toolbar button { min-width: 36px; height: 36px; } }
@media (max-width: 960px) {
    .layout { display: block; }
    .layout > .sidebar { margin-top: 25px; grid-template-columns: 1fr 1fr; gap: 14px; }
    .tag-wiki-layout { display: flex; flex-direction: column; gap: 18px; }
}
.wiki-guidelines { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.wiki-guidelines section { border-radius: 10px; padding: 14px 16px; background: var(--bg); border-left: 4px solid #8fbf9f; }
.wiki-guidelines .wiki-avoid { border-left-color: #e08aa5; }
.wiki-guidelines h3 { margin: 0 0 6px; font-size: 15px; }
.wiki-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 140px)); gap: 10px; }
.wiki-examples img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; display: block; }
.wiki-guidelines-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.wiki-sidebar code { font-size: 13px; overflow-wrap: anywhere; }
.tag-card-title { margin: 2px 0 0; font-size: 13px; }
.history-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.history-compare p { white-space: pre-wrap; background: var(--bg); border-radius: 8px; padding: 10px; margin: 4px 0 0; font-size: 13px; }
.history details summary { cursor: pointer; color: var(--pink); font-size: 13px; }
a.tag-row-name { text-decoration: none; min-width: 0; }
a.tag-row-name:hover span, a.tag-row-name:focus-visible span { color: var(--pink); text-decoration: underline; }
.header-popup-heading form { margin-left: auto; }
.header-popup-heading button.plain { font-size: 12px; padding: 6px 10px; border-radius: 999px; }
.header-popup-heading button.plain:hover { background: var(--pink-soft); }
.notification-popup-list > p { margin: 0; padding: 28px 17px; text-align: center; font-size: 13px; }
.notification-popup-footer { border-top: 1px solid var(--line); }
.notification-popup-footer:hover { background: var(--bg); }
.image-tag-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.image-tag-sidebar > .panel { margin: 0; }
.image-author { text-align: center; display: grid; justify-items: center; gap: 6px; }
.image-author h2, .image-author p { margin: 0; }
.post-share .share-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; }
.post-share .share-btn { width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; justify-self: center; }
.footer-inner { align-items: start; }
.footer-inner nav a:hover { color: var(--pink); }
.footer-inner nav .plain { padding: 0; justify-self: start; color: var(--muted); font-size: 12px; }
.js img[loading="lazy"] { opacity: 0; transition: opacity .3s ease; }
.js img[loading="lazy"].is-loaded { opacity: 1; }
.photo-cover, .photo-rank-tile, .wiki-examples a { background: linear-gradient(110deg, var(--line) 30%, var(--bg) 50%, var(--line) 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: reduce) { .js img[loading="lazy"] { transition: none; } }
main > .panel + .panel { margin-top: 18px; }
.image-tag-sidebar .form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.image-tag-sidebar .form-actions form, .image-tag-sidebar .form-actions button { width: 100%; margin: 0; }
.image-tag-sidebar .form-actions button { font-size: 12px; padding: 8px 6px; }
.image-tag-sidebar .post-replace { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); gap: 8px; }
.image-tag-sidebar .post-replace input[type="file"] { font-size: 12px; max-width: 100%; }
.upload-layout .image-import { margin-bottom: 4px; }
.import-url label { font-weight: 600; }
.import-result { display: grid; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.import-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.import-page-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.import-page-buttons button { min-width: 36px; padding: 6px 8px; }
.import-filled { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; color: var(--muted); }
.import-hints .tags { margin-top: 6px; }
.import-hints button.tag { border: 0; cursor: pointer; }
.import-sites { font-size: 13px; color: var(--muted); }
.import-sites summary { cursor: pointer; color: var(--pink); }
.import-sites ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.upload-preview { max-height: 360px; max-width: 100%; border-radius: 8px; margin: auto; display: block; }
.image-drop-zone .notice { text-align: left; margin: 0; }
.dark .image-drop-zone.dragging { background: var(--pink-soft); }
.bookmarklet-panel .bookmarklet { cursor: grab; justify-self: start; }
.bookmarklet-panel { display: grid; gap: 10px; }
.bookmarklet-panel h3, .bookmarklet-panel p { margin: 0; }
.tag-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tag-check .tag small { margin-left: 5px; opacity: .7; font-size: 10px; }
.tag-check .tag-new { outline: 1.5px dashed #e0a100; outline-offset: -1.5px; }
.tag-check .tag-new small { color: #b07d00; opacity: 1; font-weight: 700; }
.tag-check .tag-implied { opacity: .8; font-style: italic; }
.tag-check .tag-remove { margin: 0 -4px 0 6px; padding: 0 5px; border: 0; border-radius: 50%; background: transparent; color: inherit;
    font-size: 14px; line-height: 1.2; cursor: pointer; opacity: .55; min-height: 0; box-shadow: none; }
.tag-check .tag-remove:hover, .tag-check .tag-remove:focus-visible { opacity: 1; background: rgba(0, 0, 0, .12); }
.tag-check-count { flex-basis: 100%; color: var(--muted); }
.tag-check-count.is-short { color: #d85b72; font-weight: 600; }
.tag-check-new { flex-basis: 100%; color: #b07d00; }
.dark .tag-check .tag-new small, .dark .tag-check-new { color: #f0c24b; }
.post-description { margin: 10px 0 4px; line-height: 1.7; }
.history-description summary { cursor: pointer; color: var(--pink); }
.history-description p { white-space: pre-wrap; font-size: 13px; margin: 4px 0 0; }
.rating-picker { border: 0; padding: 0; margin: 0; position: relative; }
.rating-picker legend { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.rating-guide-toggle { width: 20px; height: 20px; padding: 0; border-radius: 50%; font-size: 12px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.rating-segments { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rating-segment { position: relative; cursor: pointer; }
.rating-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rating-segment span { display: block; padding: 7px 14px; font-size: 13px; border-left: 1px solid var(--line); color: var(--ink); background: var(--paper); transition: background .15s, color .15s; }
.rating-segment:first-child span { border-left: 0; }
.rating-segment input:checked + span { background: #4c8fd6; color: #fff; }
.rating-segment.rating-q input:checked + span { background: #c9851f; }
.rating-segment.rating-e input:checked + span { background: #b92e4c; }
.rating-segment.rating-g input:checked + span { background: #3f9a6b; }
.rating-segment input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: -2px; }
.rating-guide { position: absolute; z-index: 20; top: 100%; left: 0; margin: 6px 0 0; width: min(560px, calc(100vw - 40px)); padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.15); font-size: 13px; }
.rating-guide dt { font-weight: 700; margin-top: 8px; }
.rating-guide dt:first-child { margin-top: 0; }
.rating-guide dt.rating-e { color: #b92e4c; } .rating-guide dt.rating-q { color: #c9851f; } .rating-guide dt.rating-s { color: #4c8fd6; } .rating-guide dt.rating-g { color: #3f9a6b; }
.rating-guide dd { margin: 2px 0 0; }
.rating-guide dd.form-hint { margin-top: 10px; }
dialog.modal.modal-wide { width: min(640px, calc(100vw - 32px)); }
dialog.modal.modal-wide .modal-body { overflow-y: auto; max-height: calc(100dvh - 160px); }
.bbcode-guide table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bbcode-guide td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bbcode-guide td:first-child { white-space: nowrap; }
@media (max-width: 760px) { dialog.modal.modal-wide { width: 100%; } }
.guideline-tabs { margin-bottom: 18px; }
.rating-guide-list dt { font-weight: 700; margin-top: 10px; }
.rating-guide-list dt.rating-e { color: #b92e4c; } .rating-guide-list dt.rating-q { color: #c9851f; }
.rating-guide-list dt.rating-s { color: #4c8fd6; } .rating-guide-list dt.rating-g { color: #3f9a6b; }
.rating-guide-list dd { margin: 2px 0 0; }
.post-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.post-action-bar form { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 999px; font-size: 13px; line-height: 1.3;
    background: var(--paper); color: var(--ink); border: 1px solid var(--line); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.pill:hover { border-color: var(--pink); color: var(--pink); background: var(--paper); filter: none; }
.pill.is-on { color: var(--pink); border-color: var(--pink); background: var(--pink-soft); }
.pill .pill-icon { font-size: 15px; line-height: 1; }
.pill-end { margin-left: auto; }
.image-caption { display: grid; gap: 10px; }
.post-about { display: grid; gap: 10px; }
.post-author { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.post-author .avatar { width: 40px; height: 40px; min-width: 40px; }
.post-author > span { display: grid; min-width: 0; }
.post-author b, .post-author small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-author small { color: var(--muted); font-size: 12px; }
.post-author-more { font-size: 12px; }
.post-facts { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 7px; font-size: 12px; }
.post-facts div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
.post-facts dt { color: var(--muted); }
.post-facts dd { margin: 0; overflow-wrap: anywhere; }
.rating-chip { display: inline-block; padding: 0 8px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 700; background: #3f9a6b; }
.rating-chip.rating-s { background: #4c8fd6; } .rating-chip.rating-q { background: #c9851f; } .rating-chip.rating-e { background: #b92e4c; }
.share-in-dialog { border: 0; box-shadow: none; padding: 0; background: transparent; }
.share-in-dialog h3 { display: none; }
.share-in-dialog .share-row { justify-content: center; }
.share-link { display: grid; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.pool-search { display: flex; gap: 8px; margin: 0 0 16px; max-width: 520px; }
.pool-search input { flex: 1; min-width: 0; }
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pool-card { display: grid; gap: 6px; padding: 10px; color: var(--ink); text-decoration: none; }
.pool-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: var(--line); }
.pool-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pool-cover img.is-blurred { filter: blur(16px); transform: scale(1.06); }
.pool-count { position: absolute; right: 6px; bottom: 6px; padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.pool-header { margin-bottom: 18px; }
.pool-item { position: relative; }
.pool-position { position: absolute; z-index: 2; right: 8px; top: 8px; min-width: 24px; padding: 0 6px; border-radius: 12px; text-align: center; background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; }
.pool-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 13px; background: var(--pink-soft); }
.pool-nav-name { text-align: center; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-dialog-body { display: grid; gap: 8px; }
.pool-choice { margin: 0; }
.pool-choice .pill { width: 100%; justify-content: flex-start; }
.pool-choice .pill small { margin-left: auto; color: var(--muted); }
.pool-new { display: flex; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.pool-new input { flex: 1; min-width: 0; }
.danger-text { color: #b92e4c; margin-top: 12px; }
.upload-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.upload-previews figure { position: relative; margin: 0; }
.upload-previews img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; display: block; }
.upload-previews figcaption { position: absolute; left: 6px; top: 6px; min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--pink); color: #fff; font-size: 11px; text-align: center; }
.upload-pool { padding: 12px 14px; border-radius: 10px; background: var(--pink-soft); }
.image-board-layout { grid-template-columns: 250px minmax(0, 1fr); }
.image-board-main { display: grid; gap: 16px; align-content: start; }
.image-board-main > .panel { margin: 0; }
.image-work-media { background: var(--bg); }
.board-full-image { width: auto; max-width: 100%; max-height: calc(100vh - 120px); margin: 0 auto; }
@media (min-width: 1500px) { .image-board-layout { grid-template-columns: 270px minmax(0, 1fr); } }
@media (max-width: 1050px) { .image-board-layout { grid-template-columns: 220px minmax(0, 1fr); } .image-tag-sidebar { grid-row: auto; } }
@media (max-width: 680px) { .board-full-image { max-height: none; width: 100%; } }
.board-full-image.is-long { max-height: none; }
.image-board-main .post-about { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); grid-template-areas: "author facts" "more facts"; column-gap: 24px; align-items: start; }
.image-board-main .post-author { grid-area: author; }
.image-board-main .post-author-more { grid-area: more; }
.image-board-main .post-facts { grid-area: facts; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--line);
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
@media (max-width: 1050px) {
    .image-board-main .post-about { grid-template-columns: minmax(0, 1fr); grid-template-areas: "author" "more" "facts"; }
    .image-board-main .post-facts { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.comment-threads { display: grid; gap: 16px; margin-bottom: 18px; }
.comment-thread { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.comment-thread-media { position: sticky; top: 12px; }
.comment-thread-card .photo-meta { display: none; }
.comment-thread-body { display: grid; gap: 10px; min-width: 0; }
.comment-thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comment-thread-tags { gap: 5px; }
.comment-thread-tags .tag { font-size: 12px; padding: 2px 8px; }
.comment-thread-list { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.comment-thread-list .comment { padding: 10px 0; border-bottom: 1px solid var(--line); }
.comment-thread-list .comment:last-child { border-bottom: 0; }
.comment-thread-more { font-size: 13px; padding: 4px 0; }
.comment-thread-reply { justify-self: start; }
.comment-thread-write { display: grid; }
.comment-thread-write .comment-form { margin: 4px 0 0; }
.comment-replies { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--line); }
.comment-replies .comment { padding: 10px 0; border-bottom: 0; }
.comment-replies .comment + .comment { border-top: 1px dashed var(--line); }
.comment-replies .avatar { width: 26px; height: 26px; font-size: 11px; }
.comment-reply-form { display: grid; gap: 8px; margin-top: 8px; }
.comment-deleted { padding: 12px 0; }
.comment-deleted > div > small { font-style: italic; }
.comment-feed-thumb img.is-blurred { filter: blur(10px); }
@media (max-width: 640px) {
    .comment-thread { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
    .comment-thread-media { position: static; }
    .comment-thread-tags .tag:nth-child(n+9) { display: none; }
}
.forum-pending { margin-bottom: 16px; }
.forum-pending-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.forum-pending-row form { margin: 0; }
.forum-room-name { grid-template-columns: 110px minmax(0, 1fr); }
.forum-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.forum-topic-row h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.topic-room { color: var(--pink); }
.topic-type, .topic-status, .topic-solved { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.topic-type { background: #e7f0fb; color: #2f6db3; }
.topic-type-poll { background: #f3eafb; color: #7d43b0; } .topic-type-quiz { background: #fdf0de; color: #a8650e; }
.topic-status { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.topic-status-accepted { color: #2f6db3; border-color: #9cc0ea; } .topic-status-fixed { color: #2f8a5c; border-color: #9fd3b6; } .topic-status-wontfix { color: #9a4b5b; border-color: #e3aab6; }
.topic-solved { background: #e3f4ea; color: #2f8a5c; }
.dark .topic-type { background: #20344d; color: #9cc6f5; } .dark .topic-type-poll { background: #33244a; color: #cfa6f5; } .dark .topic-type-quiz { background: #3d2e17; color: #f3c27b; } .dark .topic-solved { background: #183528; color: #8fdcb1; }
.forum-poll, .forum-accepted { margin-bottom: 16px; }
.forum-poll h2, .forum-accepted h2 { margin-top: 0; font-size: 17px; }
.poll-option { margin: 8px 0; }
.poll-option form { margin: 0; }
.poll-choose { width: 100%; justify-content: flex-start; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.poll-choose:hover { border-color: var(--pink); color: var(--pink); filter: none; }
.poll-bar { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; }
.poll-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--pink-soft); z-index: 0; transition: width .4s ease; }
.poll-bar > * { position: relative; }
.poll-option.is-correct .poll-bar { border-color: #2f8a5c; } .poll-option.is-correct .poll-bar::before { background: #d8f0e2; }
.poll-option.is-wrong .poll-bar { border-color: #b92e4c; }
.dark .poll-option.is-correct .poll-bar::before { background: #1d4030; }
.forum-accepted { border-left: 4px solid #2f8a5c; }
.forum-staff-tools select { width: auto; }
@media (max-width: 640px) { .forum-room-name { grid-template-columns: 80px minmax(0, 1fr); } }
.avatar.has-frame { position: relative; overflow: visible; container-type: inline-size; }
.avatar.has-frame::after { content: ""; position: absolute; --fw: clamp(1.5px, 10cqw, 5px); --fi: clamp(2px, 14cqw, 7px);
    inset: calc(-1 * var(--fi)); border-radius: 50%; pointer-events: none; }
.avatar.frame-sakura::after { border: var(--fw) solid #f4a7c3; box-shadow: 0 0 0 2px #fff4f8, 0 0 8px rgba(244, 133, 175, .6); }
.avatar.frame-gold::after { border: var(--fw) solid transparent; background: linear-gradient(135deg, #f8e08e, #c9962c, #fff2b8, #b8821f) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.avatar.frame-neon::after { border: calc(var(--fw) * .75) solid #5ff3ff; box-shadow: 0 0 6px #5ff3ff, 0 0 14px rgba(95, 243, 255, .6); animation: neon-pulse 2.4s ease-in-out infinite; }
.avatar.frame-starry::after { inset: calc(-1.2 * var(--fi)); border: var(--fw) solid transparent; background: conic-gradient(#8f6bff, #e86bd0, #6bc7ff, #8f6bff) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: frame-spin 8s linear infinite; }
.avatar.frame-image::after { inset: -18%; border-radius: 0; background: var(--frame-image) center / contain no-repeat; }
@keyframes neon-pulse { 50% { box-shadow: 0 0 3px #5ff3ff, 0 0 8px rgba(95, 243, 255, .4); } }
@keyframes frame-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .avatar.frame-neon::after, .avatar.frame-starry::after { animation: none; } }
.profile-bg { display: block; min-height: 135px; background-size: cover; background-position: center; }
.profile-bg-sunset { background: linear-gradient(120deg, #ffb18a, #ff8fb1 55%, #b58cff); }
.profile-bg-night { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 20%, #fff, transparent), radial-gradient(1px 1px at 85% 25%, #fff, transparent), linear-gradient(180deg, #141b3d, #3a2a6b); }
.profile-bg-mint { background: linear-gradient(120deg, #bff0dc, #d8f7c8 50%, #c3e6ff); }
.profile-theme-sakura { --pink: #e8689b; --pink-soft: #fde6ef; }
.profile-theme-ocean { --pink: #2f86c8; --pink-soft: #e1f0fb; }
.profile-theme-midnight { --pink: #7c5cd6; --pink-soft: #ece6fb; }
.dark .profile-theme-sakura { --pink-soft: #46283a; } .dark .profile-theme-ocean { --pink-soft: #1d3346; } .dark .profile-theme-midnight { --pink-soft: #2e2747; }
.profile-card[class*="profile-theme-"] { border-top: 3px solid var(--pink); }
.profile-card[class*="profile-theme-"] h1, .profile-card[class*="profile-theme-"] .profile-stats b { color: var(--pink); }
.comment.deco-pink { background: #fff1f6; border-radius: 12px; padding: 10px 12px; }
.dark .comment.deco-pink { background: #3a2432; }
.comment.deco-gold { border-left: 3px solid #d4a63a; padding-left: 10px; }
.comment.deco-sparkle { position: relative; }
.comment.deco-sparkle::after { content: "✦ ✧"; position: absolute; right: 6px; top: 4px; color: #e9b949; font-size: 12px; letter-spacing: 2px; pointer-events: none; }
.comment.deco-image { background: var(--deco-image) right top / 64px no-repeat; }
.fan-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
    color: #fff; background: linear-gradient(90deg, #ff6fa8, #ff9a62); text-decoration: none; vertical-align: middle; white-space: nowrap; }
.fan-badge-glow { box-shadow: 0 0 8px rgba(255, 111, 168, .55); }
.fan-badge-image { background: var(--badge-image) center / cover; }
.fan-badge:hover { color: #fff; filter: brightness(1.05); }
.bb-emoji { display: inline-block; padding: 0 4px; border-radius: 6px; background: var(--pink-soft); color: var(--ink); font-size: 1.05em; vertical-align: middle; }
img.bb-emoji { width: 32px; height: 32px; padding: 0; background: none; object-fit: contain; }
.bb-emoji.big { font-size: 20px; padding: 6px 10px; } img.bb-emoji.big { width: 72px; height: 72px; }
.bb-emoji-picker { position: relative; }
.bb-emoji-toggle { display: inline-grid; place-items: center; }
.bb-emoji-menu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px;
    width: min(360px, calc(100vw - 32px)); max-height: 320px; overflow-y: auto; padding: 8px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }
.bb-emoji-menu button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: auto !important; height: auto !important;
    min-height: 64px; padding: 6px 4px; border-radius: 8px; }
.bb-emoji-menu button:hover { background: var(--pink-soft); }
.bb-emoji-menu img { width: 40px; height: 40px; object-fit: contain; }
.bb-emoji-face { font-size: 12px; line-height: 1.2; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bb-emoji-menu small { color: var(--muted); font-size: 11px; }
.bb-emoji-empty, .bb-emoji-shop { grid-column: 1 / -1; font-size: 12px; padding: 4px; }
.bb-emoji-shop { text-align: right; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.shop-card { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 14px; margin: 0; }
.shop-card.is-equipped { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
.shop-card.is-expired { opacity: .6; }
.shop-card-body { display: grid; gap: 3px; }
.shop-card-body small { font-size: 12px; }
.shop-card-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.shop-card-buy form { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.shop-card-buy input { width: 140px; }
.shop-price { font-weight: 700; }
.shop-preview { height: 120px; display: grid; place-items: center; border-radius: 10px; background: var(--bg); overflow: hidden; }
.shop-preview .profile-bg { width: 100%; height: 100%; min-height: 0; }
.shop-preview .avatar.large { width: 64px; height: 64px; font-size: 24px; }
.theme-swatch { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 10px; background: var(--paper); border-top: 3px solid var(--pink); }
.theme-swatch b { color: var(--pink); font-size: 22px; }
.theme-swatch i { width: 18px; height: 18px; border-radius: 50%; background: var(--pink); } .theme-swatch i + i { background: var(--pink-soft); }
.shop-deco-sample { display: block; width: 80%; padding: 12px; margin: 0; }
.header-credits { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 17px; border-bottom: 1px solid var(--line); font-size: 13px; }
.header-credits a { color: var(--ink); }
.header-credits form { margin: 0; }
.credit-top { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.credit-balance { display: grid; gap: 6px; align-content: center; margin: 0; }
.credit-balance b { font-size: 32px; }
.credit-checkin { margin: 0; }
.checkin-board { display: grid; gap: 14px; }
.checkin-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.checkin-day { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--paper); font-size: 12px; color: var(--muted); }
.checkin-day small { font-size: 11px; }
.checkin-day .checkin-icon { font-size: 20px; line-height: 1.2; }
.checkin-day b { font-size: 11px; font-weight: 600; color: var(--muted); }
.checkin-day.is-gift { border-color: #f1d28a; background: #fffaf0; }
.checkin-day.is-done { border-color: #ead7b3; background: #f3e4c6; }
.checkin-day.is-done .checkin-icon { opacity: .45; }
.checkin-day .checkin-tick { display: none; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px;
    border-radius: 50%; background: #d9a62e; color: #fff; font-size: 13px; line-height: 22px; text-align: center; font-weight: 700; }
.checkin-day.is-done .checkin-tick { display: block; }
.checkin-day.is-next { border: 2px solid #c8961f; padding: 7px 1px 6px; background: #fffaf0; box-shadow: 0 2px 10px rgba(200, 150, 31, .25); }
.checkin-day.just-claimed { animation: checkin-pop .5s ease-out; }
@keyframes checkin-pop { 40% { transform: scale(1.12); } }
.checkin-claim { margin: 0; }
.checkin-claim-button { width: 100%; padding: 13px 18px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 700; color: #fff;
    background: linear-gradient(180deg, #e0ab35, #c8961f); box-shadow: 0 4px 14px rgba(200, 150, 31, .35); cursor: pointer; }
.checkin-claim-button:disabled { background: #d8cdb8; box-shadow: none; cursor: default; }
.checkin-note { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
dialog.checkin-dialog { width: min(520px, calc(100vw - 24px)); }
.checkin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 16px; color: #fff;
    background: linear-gradient(135deg, #e3b23c, #c8961f); }
.checkin-head h2 { margin: 0 0 4px; font-size: 20px; color: #fff; }
.checkin-head p { margin: 0; font-size: 13px; opacity: .95; }
.checkin-head .checkin-close { color: #fff; }
.checkin-head .checkin-close:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.checkin-dialog .checkin-board { padding: 16px 20px 6px; }
.checkin-foot { margin: 0; padding: 4px 20px 16px; text-align: center; font-size: 12px; }
.dark .checkin-day { background: var(--paper); }
.dark .checkin-day.is-gift, .dark .checkin-day.is-next { background: #3a3122; border-color: #8a6a24; }
.dark .checkin-day.is-done { background: #4a3d27; border-color: #6d5a33; color: #e6d3a8; }
@media (max-width: 420px) {
    .checkin-grid { gap: 5px; }
    .checkin-day { padding: 6px 0; }
    .checkin-day small { font-size: 10px; }
    .checkin-day .checkin-icon { font-size: 16px; }
}
.credit-history td.plus { color: #2f8a5c; } .credit-history td.minus { color: #b92e4c; }
.credit-history .num, table .num { text-align: right; white-space: nowrap; }
@media (max-width: 760px) { .credit-top { grid-template-columns: 1fr; } }
.thumb-stats { margin-bottom: 8px; }
.thumb-run { margin: 16px 0; }
.thumb-progress { height: 12px; border-radius: 999px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.thumb-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), #ff9a62); transition: width .6s ease; }
.similar-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.similar-thumbs img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; display: block; }
.avatar-crop { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.avatar-crop-current .avatar.large { width: 120px; height: 120px; font-size: 40px; }
.avatar-crop-stage { position: relative; width: 240px; height: 240px; overflow: hidden; border-radius: 12px; background: var(--bg); cursor: grab; touch-action: none; flex: none; }
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-stage img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; pointer-events: none; transform-origin: 0 0; }
.avatar-crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); pointer-events: none; border: 2px solid rgba(255, 255, 255, .8); }
.avatar-crop-controls { display: grid; gap: 10px; flex: 1; min-width: 220px; }
.social-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.profile-cover-chosen { background-size: cover; background-position: center 25%; min-height: 160px; }
.social-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.social-link { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; color: #fff; background: #6b7280; }
.social-link:hover { color: #fff; filter: brightness(1.08); }
.social-pixiv { background: #0096fa; } .social-x { background: #111; } .social-facebook { background: #1877f2; }
.social-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); } .social-youtube { background: #ff0000; } .social-deviantart { background: #05cc47; }
.dark .social-x { background: #f2f2f2; color: #111; }
.profile-featured { margin-top: 18px; }
.profile-featured h2 { font-size: 17px; margin: 0 0 10px; }
.recover-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; text-align: left; max-width: 520px; margin: 12px auto; font-size: 13px; }
.recover-facts dt { color: var(--muted); }
.recover-facts dd { margin: 0; overflow-wrap: anywhere; }
.recover-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 12px 0; }
.recover-form input[type=file] { max-width: 100%; }
.recovered-by { font-size: 12px; margin: 8px 0 0; }
.recover-intro p { margin: 0 0 8px; }
.recover-stats { display: flex; flex-wrap: wrap; gap: 16px; }
.recover-row { display: block; }
.recover-row-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.recover-tags { margin: 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.recover-links { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.recovery-table th, .recovery-table td { vertical-align: top; }
.recovery-on { background: #16a34a; color: #fff; }
.recovery-latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 16px; }
.recovery-latest a { display: grid; gap: 2px; text-decoration: none; font-size: 11px; }
.recovery-latest img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; display: block; background: var(--bg); }
.recovery-problems { font-size: 13px; padding-left: 18px; }
.pixiv-review-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pixiv-review { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 12px 0; }
.pixiv-card { display: grid; gap: 4px; align-content: start; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 12px; cursor: pointer; }
.pixiv-card:has(input:checked) { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
.pixiv-card.is-warned { border-style: dashed; }
.pixiv-card-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pixiv-card img { width: 100%; height: 220px; object-fit: contain; border-radius: 6px; background: var(--bg); display: block; }
.pixiv-card-tags { overflow-wrap: anywhere; }
.recovery-missing code.md5 { user-select: all; font-size: 12px; }
footer.site-footer { padding: 14px 24px; }
.footer-bar { max-width: 1200px; margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; font-size: 12px; color: var(--muted); }
.footer-copy { margin: 0; font-size: 12px; }
.footer-copy a { color: var(--ink); font-weight: 700; }
.footer-heart { color: var(--pink); }
.footer-bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.footer-bar nav a { color: var(--muted); }
.footer-bar nav a:hover, .footer-copy a:hover { color: var(--pink); }
.footer-bar .theme-toggle { padding: 0 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
    footer.site-footer { padding: 12px 16px 76px; } 
    .footer-bar { justify-content: center; text-align: center; }
    .footer-bar nav { justify-content: center; }
}
.link-directory { display: grid; gap: 18px; }
.link-intro-plain { margin: 0; }
.link-panel { display: grid; gap: 26px; }
.link-group-title { margin: 0 0 14px; padding-left: 10px; border-left: 4px solid var(--pink); font-size: 17px; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.link-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .15s, box-shadow .15s, transform .15s; }
.link-card:hover { border-color: var(--pink); box-shadow: 0 6px 18px #0000000f; transform: translateY(-1px); }
.link-card-main { display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; min-width: 0; }
.link-icon { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; }
.link-icon-letter { display: grid; place-items: center; background: hsl(var(--hue) 70% 92%); color: hsl(var(--hue) 55% 38%); font-weight: 800; font-size: 20px; }
.link-text { display: grid; gap: 3px; min-width: 0; }
.link-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.link-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.45; }
.link-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 12px; color: var(--muted); }
.link-host { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.link-foot form { margin: 0; }
.link-like { padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
button.link-like:hover { border-color: var(--line); color: var(--pink); filter: none; }
.link-like.is-liked { background: var(--pink-soft); color: var(--pink); }
.dark .link-icon-letter { background: hsl(var(--hue) 35% 24%); color: hsl(var(--hue) 70% 82%); }
.extension-page { display: grid; gap: 18px; }
.extension-hero { display: flex; gap: 18px; align-items: flex-start; }
.extension-hero img { border-radius: 16px; flex: none; }
.extension-hero p { margin-top: 0; }
.extension-features { display: grid; gap: 10px; padding-left: 18px; }
.extension-steps { display: grid; gap: 8px; }
.extension-token input { flex: 1; font-family: ui-monospace, Consolas, monospace; }
.extension-token-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .extension-hero { flex-direction: column; } }
.welcome-back-list { display: grid; gap: 6px; padding-left: 4px; list-style: none; }
/* 91-shop-looks.css */
.avatar.frame-rainbow::after, .avatar.frame-emerald::after, .avatar.frame-ruby::after, .avatar.frame-sapphire::after,
.avatar.frame-silver::after, .avatar.frame-flame::after, .avatar.frame-diamond::after, .avatar.frame-pumpkin::after {
    border: var(--fw) solid transparent;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.avatar.frame-rainbow::after { inset: calc(-1.2 * var(--fi)); background: conic-gradient(#ff5f6d, #ffc371, #f9f871, #6bffb8, #5ac8fa, #a78bfa, #ff5f6d) border-box; animation: frame-spin 6s linear infinite; }
.avatar.frame-emerald::after { background: linear-gradient(135deg, #0f9d76, #6ff2c1, #0a7a5b, #b8ffe6) border-box; }
.avatar.frame-ruby::after { background: linear-gradient(135deg, #b0102c, #ff6b81, #7d0a1f, #ffc2cc) border-box; }
.avatar.frame-sapphire::after { background: linear-gradient(135deg, #1a3fb0, #6f9bff, #0f2a7a, #c4d6ff) border-box; }
.avatar.frame-silver::after { background: linear-gradient(135deg, #8d949e, #f4f6f8, #6b7380, #ffffff, #9aa1ab) border-box; }
.avatar.frame-flame::after { inset: calc(-1.2 * var(--fi)); background: conic-gradient(from 200deg, #ff3d00, #ffb300, #ff6d00, #ffd54f, #ff3d00) border-box; animation: frame-flicker 1.6s ease-in-out infinite; }
.avatar.frame-diamond::after { inset: calc(-1.2 * var(--fi)); border-width: calc(var(--fw) * 1.25); background: conic-gradient(#ffffff, #b9f3ff, #ffe1fb, #ffffff, #c7d2ff, #ffffff) border-box;
    filter: drop-shadow(0 0 4px rgba(185, 243, 255, .9)); animation: frame-spin 10s linear infinite; }
.avatar.frame-pumpkin::after { background: repeating-conic-gradient(#ff7a00 0 20deg, #2b1a3d 20deg 30deg) border-box; }
.avatar.frame-ice::after { border: calc(var(--fw) * .75) solid #bfe9ff; box-shadow: 0 0 0 2px #ffffff, 0 0 10px rgba(130, 210, 255, .8), inset 0 0 6px rgba(170, 225, 255, .8); }
.avatar.frame-lavender::after { border: var(--fw) solid #c9b6ff; box-shadow: 0 0 0 2px #f6f1ff, 0 0 8px rgba(160, 130, 255, .5); }
.avatar.frame-heart::after, .avatar.frame-bow::after, .avatar.frame-crown::after, .avatar.frame-halo::after, .avatar.frame-moon::after { border: calc(var(--fw) * .75) solid var(--frame-ring, #ffc1d9); }
.avatar.frame-heart { --frame-ring: #ff8fb8; } .avatar.frame-bow { --frame-ring: #f7a8c8; } .avatar.frame-crown { --frame-ring: #e9c15a; }
.avatar.frame-halo { --frame-ring: #fff2b0; } .avatar.frame-moon { --frame-ring: #9fb3ff; }
.avatar.frame-heart, .avatar.frame-bow, .avatar.frame-crown, .avatar.frame-halo, .avatar.frame-moon, .avatar.frame-pumpkin { container-type: inline-size; }
.avatar.frame-heart::before, .avatar.frame-bow::before, .avatar.frame-crown::before, .avatar.frame-moon::before, .avatar.frame-pumpkin::before {
    position: absolute; z-index: 1; left: 50%; top: -22%; transform: translateX(-50%); font-size: 42cqw; line-height: 1; pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.avatar.frame-heart::before { content: "💗"; top: auto; bottom: -14%; left: 82%; font-size: 34cqw; }
.avatar.frame-bow::before { content: "🎀"; left: 80%; top: -10%; }
.avatar.frame-crown::before { content: "👑"; top: -34%; }
.avatar.frame-moon::before { content: "🌙"; left: 84%; top: -12%; }
.avatar.frame-pumpkin::before { content: "🎃"; left: 82%; top: auto; bottom: -16%; font-size: 38cqw; }
.avatar.frame-halo::before { content: ""; position: absolute; z-index: 1; left: 15%; right: 15%; top: -16%; height: 14%; border-radius: 50%;
    border: 2px solid #ffe27a; box-shadow: 0 0 6px #ffe27a; pointer-events: none; }
@keyframes frame-flicker { 50% { filter: brightness(1.25) saturate(1.2); } }
@media (prefers-reduced-motion: reduce) { .avatar.frame-rainbow::after, .avatar.frame-flame::after, .avatar.frame-diamond::after { animation: none; } }
.profile-bg-aurora { background: linear-gradient(120deg, #0b1d3a, #145c5c 35%, #3cd3a3 55%, #7c4dff 80%, #0b1d3a); background-size: 300% 300%; animation: bg-drift 18s ease-in-out infinite; }
.profile-bg-sakura { background: radial-gradient(6px 4px at 15% 30%, #ffc2d8 60%, transparent 62%), radial-gradient(5px 4px at 60% 70%, #ffb3cf 60%, transparent 62%),
    radial-gradient(6px 5px at 82% 25%, #ffd1e2 60%, transparent 62%), radial-gradient(4px 3px at 35% 80%, #ffc2d8 60%, transparent 62%), linear-gradient(160deg, #fff0f6, #ffd9e8 60%, #f8c8ff); }
.profile-bg-ocean { background: repeating-radial-gradient(circle at 50% 160%, rgba(255, 255, 255, .18) 0 6px, transparent 6px 26px), linear-gradient(180deg, #4fc3f7, #0277bd 70%, #01579b); }
.profile-bg-galaxy { background: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 40%, #fff, transparent),
    radial-gradient(1px 1px at 82% 78%, #fff, transparent), radial-gradient(1px 1px at 33% 68%, #fff, transparent),
    radial-gradient(ellipse at 30% 40%, rgba(214, 90, 255, .55), transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(70, 140, 255, .55), transparent 55%), #0a0820; }
.profile-bg-candy { background: repeating-linear-gradient(135deg, #ffd6e8 0 18px, #fff4fa 18px 36px, #d9f1ff 36px 54px, #fff4fa 54px 72px); }
.profile-bg-polka { background: radial-gradient(circle, #ffffff 22%, transparent 24%) 0 0 / 28px 28px, radial-gradient(circle, #ffffff 22%, transparent 24%) 14px 14px / 28px 28px, #ffb4cf; }
.profile-bg-matcha { background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .45), transparent 40%), linear-gradient(135deg, #a8d5a2, #6aa86b 60%, #4b7f52); }
.profile-bg-lavender { background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .12) 0 3px, transparent 3px 14px), linear-gradient(180deg, #e9d8ff, #b79cff 60%, #8a6be0); }
.profile-bg-synthwave { background: linear-gradient(transparent 55%, rgba(255, 64, 180, .25) 55% 56%, transparent 56%),
    repeating-linear-gradient(90deg, rgba(255, 64, 180, .35) 0 1px, transparent 1px 32px) 0 60% / 100% 45% no-repeat,
    radial-gradient(circle at 50% 58%, #ffd25e 0 14%, transparent 15%), linear-gradient(180deg, #1b0b3a, #5b1a7a 55%, #ff4fa3 100%); }
.profile-bg-snow { background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 65%, #fff, transparent),
    radial-gradient(2px 2px at 85% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 10% 80%, #fff, transparent), linear-gradient(180deg, #9bb7d4, #dfeaf5); }
.profile-bg-autumn { background: radial-gradient(circle at 20% 80%, rgba(255, 196, 0, .5), transparent 40%), linear-gradient(135deg, #ffb347, #e8603c 55%, #8e3b2c); }
.profile-bg-sunrise { background: radial-gradient(circle at 50% 110%, #fff1a8 0 18%, transparent 19%), linear-gradient(180deg, #7aa7ff, #ffb7c5 60%, #ffd59e); }
.profile-bg-halloween { background: radial-gradient(circle at 78% 28%, #fff4c2 0 9%, transparent 10%), radial-gradient(ellipse at 50% 120%, #ff7a00 0 30%, transparent 31%),
    linear-gradient(180deg, #1a0d2e, #3d1a5c 70%, #6b2b1a); }
@keyframes bg-drift { 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .profile-bg-aurora { animation: none; } }
.profile-theme-matcha { --pink: #4f8f4a; --pink-soft: #e4f3df; }
.profile-theme-lavender { --pink: #8a6be0; --pink-soft: #efe8ff; }
.profile-theme-coral { --pink: #f0645a; --pink-soft: #ffe8e5; }
.profile-theme-amber { --pink: #c98a0c; --pink-soft: #fff4d6; }
.profile-theme-mint { --pink: #1ea88a; --pink-soft: #dcf7ef; }
.profile-theme-crimson { --pink: #c0193c; --pink-soft: #fde2e8; }
.profile-theme-sky { --pink: #2b9de9; --pink-soft: #e0f2ff; }
.profile-theme-cocoa { --pink: #8a5a3c; --pink-soft: #f5e9e0; }
.profile-theme-mono { --pink: #4b5563; --pink-soft: #eceef1; }
.dark .profile-theme-matcha { --pink: #7fc278; --pink-soft: #22341f; } .dark .profile-theme-lavender { --pink: #b39cff; --pink-soft: #2c2547; }
.dark .profile-theme-coral { --pink: #ff8a80; --pink-soft: #3d2422; } .dark .profile-theme-amber { --pink: #f2b935; --pink-soft: #3a2f14; }
.dark .profile-theme-mint { --pink: #4fd6b5; --pink-soft: #173a31; } .dark .profile-theme-crimson { --pink: #ff5a7a; --pink-soft: #3d1a22; }
.dark .profile-theme-sky { --pink: #6cc0ff; --pink-soft: #17324a; } .dark .profile-theme-cocoa { --pink: #c9916b; --pink-soft: #33251c; }
.dark .profile-theme-mono { --pink: #c3c8d0; --pink-soft: #2b2f36; }
.comment.deco-mint, .comment.deco-lavender, .comment.deco-sky { border-radius: 12px; padding: 10px 12px; }
.comment.deco-mint { background: #e9faf3; } .comment.deco-lavender { background: #f3eeff; } .comment.deco-sky { background: #eaf6ff; }
.dark .comment.deco-mint { background: #183229; } .dark .comment.deco-lavender { background: #2a2440; } .dark .comment.deco-sky { background: #18293a; }
.comment.deco-rainbow { border-left: 4px solid; border-image: linear-gradient(180deg, #ff5f6d, #ffc371, #6bffb8, #5ac8fa, #a78bfa) 1; padding-left: 10px; }
.comment.deco-neon { border: 1px solid #ff4fd8; border-radius: 12px; padding: 10px 12px; box-shadow: 0 0 8px rgba(255, 79, 216, .45), inset 0 0 6px rgba(255, 79, 216, .2); }
.comment.deco-paws, .comment.deco-hearts, .comment.deco-music, .comment.deco-snow, .comment.deco-sakura, .comment.deco-bats { position: relative; }
.comment.deco-paws::after, .comment.deco-hearts::after, .comment.deco-music::after, .comment.deco-snow::after, .comment.deco-sakura::after, .comment.deco-bats::after {
    position: absolute; right: 6px; top: 4px; font-size: 12px; letter-spacing: 2px; pointer-events: none; opacity: .85;
}
.comment.deco-paws::after { content: "🐾"; } .comment.deco-hearts::after { content: "♥ ♡"; color: #ff6fa8; }
.comment.deco-music::after { content: "♪ ♫"; color: #7c5cff; } .comment.deco-snow::after { content: "❄ ❅"; color: #7fb9e8; }
.comment.deco-sakura::after { content: "🌸"; } .comment.deco-bats::after { content: "🦇 🎃"; }
.fan-badge-rainbow { background: linear-gradient(90deg, #ff5f6d, #ffc371, #6bcf8e, #5ac8fa, #a78bfa); }
.fan-badge-gold { background: linear-gradient(90deg, #b8821f, #f8e08e, #c9962c); color: #3b2a05; }
.fan-badge-gold:hover { color: #3b2a05; }
.fan-badge-ocean { background: linear-gradient(90deg, #1565c0, #4fc3f7); }
.fan-badge-mint { background: linear-gradient(90deg, #12a883, #7be3c6); }
.fan-badge-violet { background: linear-gradient(90deg, #6a3de8, #c084fc); }
.fan-badge-neon { background: #1b1030; box-shadow: 0 0 6px #ff4fd8, inset 0 0 0 1px #ff4fd8; color: #ffd6f5; animation: badge-pulse 2.4s ease-in-out infinite; }
.fan-badge-neon:hover { color: #ffd6f5; }
@keyframes badge-pulse { 50% { box-shadow: 0 0 12px #ff4fd8, inset 0 0 0 1px #ff4fd8; } }
@media (prefers-reduced-motion: reduce) { .fan-badge-neon { animation: none; } }
.shop-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.shop-toolbar select { width: auto; }
.shop-group-title { margin: 18px 0 8px; font-size: 18px; }
.shop-card { position: relative; }
.shop-flags { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 4px; flex-wrap: wrap; }
.shop-flag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--pink); }
.shop-flag.is-limited { background: #7c3aed; } .shop-flag.is-low { background: #dc2626; } .shop-flag.is-premium { background: linear-gradient(90deg, #b8821f, #e9c15a); color: #2b1d02; }
.items-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.items-nav { display: grid; gap: 4px; padding: 10px; position: sticky; top: 76px; margin: 0; }
.items-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ink); }
.items-nav a:hover { background: var(--bg); }
.items-nav a.current { color: var(--pink); background: var(--pink-soft); font-weight: 700; }
.items-nav-icon { font-size: 18px; width: 22px; text-align: center; }
.items-nav small { margin-left: auto; min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 11px; text-align: center; }
.items-nav a.current small { background: var(--paper); color: var(--pink); }
.items-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.items-head h2 { margin: 0; font-size: 18px; }
.items-filter { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.items-filter a { padding: 4px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); }
.items-filter a.current { background: var(--pink); color: #fff; }
.items-hint { margin: -4px 0 12px; font-size: 13px; }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.item-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.item-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #3a214514; }
.item-card .shop-preview { height: 130px; }
.item-card.is-equipped { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), var(--shadow); }
.item-card.is-expired .shop-preview { filter: grayscale(1); opacity: .55; }
.item-badge { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 2px 9px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; }
.item-card-body { display: grid; gap: 4px; min-width: 0; }
.item-card-body b { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-card-body small { font-size: 12px; }
.item-term { justify-self: start; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; }
.item-term.is-permanent { background: #e8f7ee; color: #1f8a4c; }
.item-term.is-timed { background: #fff6e0; color: #a0680b; }
.item-term.is-soon { background: #fdecec; color: #c62828; }
.item-term.is-expired { background: var(--bg); color: var(--muted); }
.item-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.item-card-actions:empty { display: none; }
.item-card-actions form { margin: 0; }
@media (max-width: 760px) {
    .items-layout { display: block; }
    .items-nav { display: flex; overflow-x: auto; white-space: nowrap; position: static; margin-bottom: 14px; }
    .items-nav a { padding: 8px 12px; }
    .items-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* 92-seasons.css */
.season .header { border-bottom: 3px solid transparent; border-image: var(--s-stripe) 1; }
.season .brand { position: relative; }
.season .brand::before { content: var(--s-emoji); position: absolute; left: 26px; top: -9px; font-size: 18px; transform: rotate(14deg); pointer-events: none; filter: drop-shadow(0 1px 1px #0003); }
.season .hero { background: var(--s-hero); }
.season .hero h1 { color: var(--s-title); }
.season .hero p, .season .hero .eyebrow { color: var(--s-title); opacity: .82; }
.season .season-greeting { font-weight: 700; letter-spacing: 1px; text-transform: none; font-size: 13px; opacity: 1; }
body.dark.season { --pink-soft: var(--s-soft-dark); }
body.dark.season .hero { background: var(--s-hero-dark); }
body.dark.season .hero h1, body.dark.season .hero p, body.dark.season .hero .eyebrow { color: var(--s-title-dark); }
.season .hero::before { content: ""; position: absolute; inset: -40px 0 0; background-image: var(--s-particles, none); background-size: 180px 180px, 260px 260px, 120px 120px;
    animation: season-drift 22s linear infinite; pointer-events: none; opacity: .75; }
.season .hero-copy { position: relative; z-index: 1; }
.season .hero-gallery { z-index: 1; }
@keyframes season-drift { to { background-position: 40px 180px, -60px 260px, 20px 120px; } }
@keyframes season-rise { to { background-position: 30px -180px, -40px -260px, 10px -120px; } }
@media (prefers-reduced-motion: reduce) { .season .hero::before { animation: none; } }
.season-new-year {
    --pink: #b8860b; --pink-soft: #fff6dc; --s-soft-dark: #4a3d1c;
    --s-hero: linear-gradient(110deg, #1d2450, #3b2a6b 55%, #6b3d7a); --s-hero-dark: linear-gradient(110deg, #141a3a, #2c2050);
    --s-title: #ffe9a8; --s-title-dark: #ffe9a8; --s-stripe: linear-gradient(90deg, #f6d365, #fda085, #f6d365); --s-emoji: "🎆";
    --s-particles: radial-gradient(2px 2px at 20px 30px, #ffe9a8, transparent), radial-gradient(2px 2px at 140px 90px, #fff, transparent), radial-gradient(1.5px 1.5px at 60px 70px, #f6d365, transparent);
}
.season-chinese-new-year {
    --pink: #c8102e; --pink-soft: #fde8e8; --s-soft-dark: #4d1f22;
    --s-hero: linear-gradient(110deg, #fff1d6, #ffd7b5 55%, #ffc2b0); --s-hero-dark: linear-gradient(110deg, #5a1a1f, #6b3a12);
    --s-title: #8a0f1f; --s-title-dark: #ffd98a; --s-stripe: linear-gradient(90deg, #c8102e, #e9b949, #c8102e); --s-emoji: "🧧";
}
.season-valentine {
    --pink: #e0245e; --pink-soft: #ffe8ef; --s-soft-dark: #4f2233;
    --s-hero: linear-gradient(110deg, #ffe1ea, #ffc3d4 55%, #ffd9e8); --s-hero-dark: linear-gradient(110deg, #5a2236, #46263f);
    --s-title: #8e1e44; --s-title-dark: #ffd0de; --s-stripe: linear-gradient(90deg, #ff7aa2, #e0245e, #ff7aa2); --s-emoji: "💝";
    --s-particles: radial-gradient(3px 3px at 30px 40px, #ff8fb1aa, transparent), radial-gradient(4px 4px at 150px 120px, #ffb3c8aa, transparent), radial-gradient(2px 2px at 80px 60px, #ff6f9caa, transparent);
}
.season-miku-day {
    --pink: #12a5a5; --pink-soft: #dff7f6; --s-soft-dark: #1d4444;
    --s-hero: linear-gradient(110deg, #d9f7f5, #b5ece8 55%, #f3d6e8); --s-hero-dark: linear-gradient(110deg, #1b4545, #3d2a47);
    --s-title: #0b6363; --s-title-dark: #aef0ea; --s-stripe: linear-gradient(90deg, #39c5bb, #e12885, #39c5bb); --s-emoji: "🎤";
}
.season-sakura {
    --pink: #e05a8a; --pink-soft: #fff0f5; --s-soft-dark: #4b2c3d;
    --s-hero: linear-gradient(110deg, #fff0f5, #ffd9e6 55%, #e9f3ff); --s-hero-dark: linear-gradient(110deg, #4d2e40, #2f3550);
    --s-title: #8a3a5f; --s-title-dark: #ffd6e5; --s-stripe: linear-gradient(90deg, #ffc1d6, #ff8fb5, #ffc1d6); --s-emoji: "🌸";
    --s-particles: radial-gradient(4px 2.5px at 25px 30px, #ffb7cecc, transparent), radial-gradient(5px 3px at 160px 110px, #ffc9d9cc, transparent), radial-gradient(3px 2px at 70px 80px, #ff9fbfcc, transparent);
}
.season-songkran {
    --pink: #0a8fd8; --pink-soft: #e3f4ff; --s-soft-dark: #1c3a50;
    --s-hero: linear-gradient(110deg, #dff4ff, #b9e6ff 55%, #d3f7ec); --s-hero-dark: linear-gradient(110deg, #173a55, #1d4a45);
    --s-title: #0b4f7d; --s-title-dark: #bfe9ff; --s-stripe: linear-gradient(90deg, #4fc3f7, #0a8fd8, #26c6a6); --s-emoji: "💦";
    --s-particles: radial-gradient(2.5px 4px at 30px 30px, #4fc3f7aa, transparent), radial-gradient(3px 5px at 150px 100px, #81d4faaa, transparent), radial-gradient(2px 3px at 70px 70px, #29b6f6aa, transparent);
}
.season-anime-day {
    --pink: #7c3aed; --pink-soft: #f1eaff; --s-soft-dark: #352a52;
    --s-hero: linear-gradient(110deg, #ffe4f2, #e6dcff 50%, #d4f1ff); --s-hero-dark: linear-gradient(110deg, #3f2a55, #23374f);
    --s-title: #4b2391; --s-title-dark: #e2d4ff; --s-stripe: linear-gradient(90deg, #ff6fb5, #7c3aed, #36c2ff); --s-emoji: "📺";
}
.season-tanabata {
    --pink: #3f51b5; --pink-soft: #e8ebff; --s-soft-dark: #262c50;
    --s-hero: linear-gradient(110deg, #18204a, #2b3a78 55%, #3d2f6e); --s-hero-dark: linear-gradient(110deg, #10152f, #22204a);
    --s-title: #e6ebff; --s-title-dark: #e6ebff; --s-stripe: linear-gradient(90deg, #ffd54f, #7986cb, #4dd0e1); --s-emoji: "🎋";
    --s-particles: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 140px 90px, #ffe082, transparent), radial-gradient(1px 1px at 60px 70px, #fff, transparent);
}
.season-summer {
    --pink: #f05a28; --pink-soft: #fff0e6; --s-soft-dark: #4d2c1f;
    --s-hero: linear-gradient(110deg, #fff4d6, #ffd9b8 55%, #c9f1e4); --s-hero-dark: linear-gradient(110deg, #553420, #1f4a42);
    --s-title: #8a3412; --s-title-dark: #ffe0c2; --s-stripe: linear-gradient(90deg, #ff8a65, #ffd54f, #4db6ac); --s-emoji: "🍉";
}
.season-anime-festival {
    --pink: #ff3d7f; --pink-soft: #ffe6ef; --s-soft-dark: #4f2236;
    --s-hero: linear-gradient(110deg, #ffe0ec, #ffe8b8 50%, #d8f0ff); --s-hero-dark: linear-gradient(110deg, #57233a, #4b3a1f 50%, #1f3a52);
    --s-title: #7a1c44; --s-title-dark: #ffe1ec; --s-stripe: linear-gradient(90deg, #ff3d7f, #ffb300, #29b6f6, #7c4dff); --s-emoji: "🎪";
    --s-particles: radial-gradient(3px 3px at 30px 30px, #ff3d7f99, transparent), radial-gradient(3px 3px at 150px 100px, #29b6f699, transparent), radial-gradient(3px 3px at 80px 60px, #ffb30099, transparent);
}
.season-halloween {
    --pink: #e8650a; --pink-soft: #fff0e3; --s-soft-dark: #4a2b18;
    --s-hero: linear-gradient(110deg, #2a1838, #4a2350 55%, #7a3a1a); --s-hero-dark: linear-gradient(110deg, #1c1026, #3a1a2a);
    --s-title: #ffb766; --s-title-dark: #ffb766; --s-stripe: linear-gradient(90deg, #ff7a18, #6a1b9a, #ff7a18); --s-emoji: "🎃";
    --s-particles: radial-gradient(2px 2px at 30px 30px, #ffb76688, transparent), radial-gradient(3px 3px at 150px 110px, #b388ff66, transparent), radial-gradient(1.5px 1.5px at 70px 70px, #ffd18088, transparent);
}
.season-loy-krathong {
    --pink: #d9822b; --pink-soft: #fff3e3; --s-soft-dark: #4a3420;
    --s-hero: linear-gradient(110deg, #13244a, #1f3d6b 55%, #2c2f5e); --s-hero-dark: linear-gradient(110deg, #0d1834, #1b2448);
    --s-title: #ffe0a3; --s-title-dark: #ffe0a3; --s-stripe: linear-gradient(90deg, #ffb74d, #ffe082, #ffb74d); --s-emoji: "🏮";
    --s-particles: radial-gradient(3px 3px at 30px 30px, #ffcc80cc, transparent), radial-gradient(4px 4px at 150px 110px, #ffb74daa, transparent), radial-gradient(2px 2px at 70px 70px, #ffe082cc, transparent);
}
.season-loy-krathong .hero::before { animation-name: season-rise; } 
.season-christmas {
    --pink: #c62828; --pink-soft: #fdeaea; --s-soft-dark: #4a2222;
    --s-hero: linear-gradient(110deg, #e8f5ee, #fde7e7 55%, #e6f0fb); --s-hero-dark: linear-gradient(110deg, #1d3a2c, #4a1f22);
    --s-title: #1b5e3a; --s-title-dark: #dff3e6; --s-stripe: linear-gradient(90deg, #c62828 0 25%, #2e7d32 25% 50%, #c62828 50% 75%, #2e7d32 75%); --s-emoji: "🎄";
    --s-particles: radial-gradient(2.5px 2.5px at 25px 30px, #b9d3e6, transparent), radial-gradient(3px 3px at 150px 110px, #cfe0ee, transparent), radial-gradient(2px 2px at 70px 70px, #a9c7de, transparent);
}
.season-christmas .hero::before { opacity: .9; }
body.dark.season-christmas { --s-particles: radial-gradient(2.5px 2.5px at 25px 30px, #fff, transparent), radial-gradient(3px 3px at 150px 110px, #fffd, transparent), radial-gradient(2px 2px at 70px 70px, #fff, transparent); }
/* 93-forum.css */
.room-cover { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
    font-size: 22px; line-height: 1; background: var(--rc, linear-gradient(160deg, #f3c6d8, #b9a7dc)); }
.room-cover::before { content: ""; position: absolute; inset: auto -10% -30% -10%; height: 62%; border-radius: 50% 50% 0 0; background: #ffffff55; } 
.room-cover::after { content: ""; position: absolute; width: 26%; aspect-ratio: 1; top: 12%; left: 14%; border-radius: 50%; background: #fff7dccc; } 
.room-cover > span { position: relative; z-index: 1; filter: drop-shadow(0 1px 2px #0004); }
.room-cover.mini { width: 32px; height: 32px; border-radius: 7px; font-size: 16px; }
.room-cover.big { width: 58px; height: 58px; border-radius: 12px; font-size: 28px; }
.room-cover-0 { --rc: linear-gradient(160deg, #f7c9dc, #c9b5e6); }
.room-cover-1 { --rc: linear-gradient(160deg, #bcd3ef, #a9d6c7); }
.room-cover-2 { --rc: linear-gradient(160deg, #d4c4f1, #f0c3d9); }
.room-cover-3 { --rc: linear-gradient(160deg, #a8dcd3, #f3d8b3); }
.room-cover-4 { --rc: linear-gradient(160deg, #e3e2a9, #f1c0cf); }
.room-cover-5 { --rc: linear-gradient(160deg, #f6cfae, #c8b6e2); }
body.dark .room-cover:not(.has-image) { filter: saturate(.8) brightness(.78); }
.room-cover.has-image { background: var(--line); }
.room-cover.has-image::before, .room-cover.has-image::after { content: none; }
.room-cover.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-cover-field { display: flex; gap: 16px; align-items: flex-start; }
.room-cover-field > div { flex: 1; min-width: 0; display: grid; gap: 6px; }
.room-cover-field .form-hint { margin: 0; }
.forum-directory { margin-bottom: 26px; }
.forum-room-card { color: var(--ink); text-decoration: none; background: var(--paper); transition: border-color .15s, transform .15s; }
.forum-room-card:hover { border-color: var(--pink); color: var(--ink); transform: translateY(-1px); }
.forum-room-card h3 { font-size: 14px; }
.circle-card.forum-room-card small, .circle-card.forum-room-card p { font-size: 11.5px; }
.forum-directory .circle-category + .circle-category { border-top: 1px solid var(--line); }
.forum-directory .circle-category .form-hint { margin: -8px 0 14px; }
.circle-category-nav a { color: var(--muted); }
.circle-category-nav a:hover, .circle-category-nav a.current { color: var(--pink); }
.forum-directory-side { display: grid; gap: 14px; }
.circle-create-guide .button { margin-top: 6px; }
.forum-side-list { display: grid; gap: 2px; }
.forum-side-list h3 { margin: 0 0 6px; font-size: 14px; }
.forum-side-list a { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.forum-side-list a:hover { color: var(--pink); }
.forum-side-list small { color: var(--muted); font-size: 11px; }
.forum-latest-heading { margin-top: 8px; }
.forum-room-page .circle-left, .forum-room-page .circle-right, .forum-room-page .circle-center { display: grid; gap: 12px; align-content: start; }
.forum-room-page .panel { margin: 0; }
.forum-side-nav { display: grid; gap: 10px; font-size: 13px; }
.forum-side-nav h3 { margin: 0 0 4px; }
.forum-side-nav a { color: var(--muted); }
.forum-side-nav a:hover { color: var(--pink); }
.forum-room-page .circle-mini { color: var(--ink); font-size: 12.5px; }
.forum-room-page .circle-mini:hover { color: var(--pink); }
.forum-room-cover .circle-cover-heading { margin-bottom: 0; }
.forum-room-cover .circle-cover-heading > div:not(.circle-cover-stats) { min-width: 0; }
.forum-room-cover .circle-cover-heading small { font-size: 12px; }
.circle-cover-stats b { font-size: 16px; }
.circle-cover-stats b small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.circle-cover-stats form { margin: 0; }
.forum-room-description { margin: 14px 0 0; font-size: 14px; line-height: 1.7; }
.forum-join-prompt { text-align: center; padding: 34px 10px; }
.forum-join-prompt h2 { font-size: 19px; margin: 0 0 8px; }
.forum-join-prompt p { color: var(--muted); margin: 0 0 16px; }
.forum-composer-start { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); }
.forum-composer-start:hover { border-color: var(--pink); color: var(--pink); }
.forum-composer-start .avatar { width: 32px; height: 32px; }
.forum-composer-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.forum-composer-note { margin: 0; color: var(--muted); font-size: 13px; }
.forum-room-page .circle-feed-filter { padding-top: 12px; padding-bottom: 12px; }
.circle-feed-filter nav { font-size: 13px; }
.circle-feed-filter nav a { color: var(--muted); }
.circle-feed-filter nav a:hover, .circle-feed-filter nav a.current { color: var(--pink); }
.forum-room-topics { margin: 0; }
.forum-room-page .circle-right p { font-size: 13px; }
.forum-room-page .circle-right h3 { margin-top: 0; }
@media (max-width: 760px) {
    .forum-room-page .circle-left { display: grid; grid-template-columns: 1fr; }
    .forum-room-cover .circle-cover-stats { width: 100%; justify-content: flex-start; }
}
/* 94-forum-topic.css */
.topic-page { display: grid; grid-template-columns: 48px minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.topic-main, .topic-side { display: grid; gap: 14px; min-width: 0; }
.topic-main > .panel, .topic-side > .panel { margin: 0; }
.topic-rail { position: sticky; top: 90px; display: grid; gap: 12px; justify-items: center; padding-top: 30px; }
.topic-rail form { margin: 0; }
.topic-rail-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%;
    background: var(--paper); color: var(--muted); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 17px; line-height: 1; text-decoration: none; }
.topic-rail-btn:hover { color: var(--pink); border-color: var(--pink); background: var(--paper); filter: none; }
.topic-rail-btn.is-on { color: var(--pink); background: var(--pink-soft); border-color: var(--pink); }
.topic-rail-btn.is-static { cursor: default; }
.topic-rail-btn small { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.topic-article { padding: 26px 30px; }
.topic-article h1 { font-size: 24px; line-height: 1.4; margin: 4px 0 12px; overflow-wrap: anywhere; }
.topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.topic-chip { padding: 3px 10px; border-radius: 6px; background: var(--pink-soft); color: var(--pink); font-weight: 600; }
.topic-chip:hover { color: var(--pink); filter: brightness(.97); }
.topic-lead { margin: 16px 0 0; padding: 12px 16px; background: var(--bg); border-radius: 6px; color: var(--muted); font-size: 13.5px; }
.topic-byline { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; }
.topic-byline > div { flex: 1; min-width: 0; }
.topic-body { font-size: 15px; line-height: 1.85; margin: 10px 0 18px; overflow-wrap: anywhere; }
.topic-article .forum-poll, .topic-article .forum-accepted { padding: 16px; border-radius: 8px; background: var(--bg); }
.topic-note { margin: 18px 0 0; padding: 12px 16px; border-radius: 6px; background: #eef4ff; color: #4a5a78; font-size: 12.5px; line-height: 1.7; }
body.dark .topic-note { background: #222a3a; color: #aebad2; }
.topic-tips { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 18px 20px;
    border-radius: 8px; background: #fffaf0; border: 1px solid #f6e7c9; }
body.dark .topic-tips { background: #2c2619; border-color: #4a3e22; }
.topic-tips h2 { font-size: 16px; margin: 0 0 4px; }
.topic-tips p { margin: 0; font-size: 12.5px; color: var(--muted); }
.topic-tippers { display: flex; margin-top: 8px; }
.topic-tippers .avatar { width: 26px; height: 26px; margin-right: -6px; border: 2px solid var(--paper); font-size: 11px; }
.topic-tips-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.topic-tips-actions form { margin: 0; }
.topic-tip-btn { padding: 8px 14px; border-radius: 999px; font-weight: 700; }
.topic-tips-actions .field-error { flex-basis: 100%; }
.topic-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.topic-pager a { display: grid; gap: 4px; padding: 16px 20px; margin: 0; color: var(--ink); }
.topic-pager a:hover { color: var(--pink); border-color: var(--pink); }
.topic-pager b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.topic-pager small { color: var(--muted); font-size: 11.5px; }
.topic-pager-next { text-align: right; }
.topic-replies { padding: 22px 26px; }
.topic-replies-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.topic-replies-head h2 { margin: 0 14px 0 0; font-size: 18px; }
.topic-replies-head small { font-size: 11.5px; color: var(--muted); margin-right: 8px; }
.topic-badge { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; font-size: 10px; font-weight: 700; vertical-align: middle; border: 1px solid; }
.topic-badge.is-author { color: #e04f5f; border-color: #f2b3ba; background: #fff1f2; }
.topic-badge.is-staff { color: #3f6fd8; border-color: #b6c9f2; background: #eff4ff; }
body.dark .topic-badge.is-author { background: #3a2026; } body.dark .topic-badge.is-staff { background: #1f2a44; }
.topic-composer { padding: 16px 0; border-bottom: 1px solid var(--line); }
.topic-composer-locked { position: relative; min-height: 150px; border-radius: 8px; overflow: hidden; background: var(--bg); }
.topic-composer-ghost { position: absolute; inset: 16px; border-radius: 8px; background:
    linear-gradient(var(--line), var(--line)) 16px 18px / 40% 10px no-repeat,
    linear-gradient(var(--line), var(--line)) 16px 40px / 70% 10px no-repeat,
    linear-gradient(var(--line), var(--line)) right 16px bottom 16px / 80px 30px no-repeat, var(--paper); filter: blur(2px); opacity: .7; }
.topic-composer-cta { position: relative; display: grid; place-items: center; gap: 8px; min-height: 150px; text-align: center; }
.topic-composer-cta p { margin: 0; font-size: 13px; }
.topic-reply { padding: 18px 0; }
.topic-reply .avatar { width: 40px; height: 40px; }
.topic-reply-main header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.topic-reply-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.topic-reply-who > small { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.comment small.topic-reply-when { font-size: 11px; color: var(--muted); white-space: nowrap; text-align: right; }
.topic-reply .bb-content { margin: 8px 0; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.topic-reply.is-accepted { background: linear-gradient(90deg, #e9f7ef, transparent 70%); border-radius: 8px; padding-left: 10px; }
body.dark .topic-reply.is-accepted { background: linear-gradient(90deg, #17302a, transparent 70%); }
.topic-reply-actions { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; font-size: 12px; }
.topic-reply-actions form { margin: 0; }
.topic-reply-actions .plain { font-size: 12px; padding: 4px 6px; }
.topic-like { color: var(--muted); }
.topic-like.is-on { color: var(--pink); }
.topic-like.is-static { padding: 4px 6px; }
.topic-no-replies { padding: 20px 0; text-align: center; }
.topic-side h3 { margin: 0 0 12px; font-size: 15px; }
.topic-side h3 small { font-weight: 400; font-size: 11px; }
.topic-author-head { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.topic-author-head .avatar { width: 52px; height: 52px; border-radius: 10px; }
.topic-author-head span { display: grid; gap: 2px; }
.topic-author-head small { color: var(--muted); font-size: 12px; }
.topic-author-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px -4px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.topic-author-stats dt { font-size: 11px; color: var(--muted); }
.topic-author-stats dd { margin: 2px 0 0; font-weight: 700; font-size: 15px; }
.topic-author-recent { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; }
.topic-author-recent span { color: #7b8fcf; font-size: 11.5px; }
.topic-author-recent a { color: var(--ink); }
.topic-author-recent a:hover, .topic-side-more:hover { color: var(--pink); }
.topic-side-more { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); text-align: center; font-size: 12.5px; color: var(--pink); }
.topic-activity-item { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 12.5px; }
.topic-activity-item:first-of-type { border-top: 0; padding-top: 0; }
.topic-activity-who { display: flex; align-items: center; gap: 6px; }
.topic-activity-who .avatar { width: 22px; height: 22px; font-size: 10px; }
.topic-activity-who small { margin-left: auto; color: var(--muted); font-size: 11px; }
.topic-activity-bubble { position: relative; padding: 8px 10px; border-radius: 6px; background: var(--bg); overflow-wrap: anywhere; }
.topic-activity-item small.muted { font-size: 11px; }
.topic-activity-item:hover .topic-activity-bubble { color: var(--pink); }
.topic-popular ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: hot; }
.topic-popular li { position: relative; display: grid; gap: 3px; padding-left: 30px; counter-increment: hot; font-size: 13px; }
.topic-popular li::before { content: counter(hot); position: absolute; left: 0; top: 0; width: 22px; height: 20px; display: grid; place-items: center;
    border-radius: 0 10px 10px 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.topic-popular li:nth-child(1)::before { background: #e84a5f; color: #fff; }
.topic-popular li:nth-child(2)::before { background: #f0a030; color: #fff; }
.topic-popular li:nth-child(3)::before { background: #4f86f0; color: #fff; }
.topic-popular a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.topic-popular a:hover { color: var(--pink); }
.topic-popular small { color: var(--muted); font-size: 11px; }
.topic-staff { display: grid; gap: 8px; }
.topic-staff form { margin: 0; }
.topic-staff select { width: 100%; }
@media (max-width: 1100px) {
    .topic-page { grid-template-columns: 48px minmax(0, 1fr); }
    .topic-side { grid-column: 2; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 760px) {
    .topic-page { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 72px; }
    .topic-side { grid-column: 1; grid-template-columns: 1fr; }
    .topic-rail { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); top: auto; display: flex; justify-content: space-around;
        padding: 6px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 6px 20px #3a21451f; }
    .topic-rail-btn { width: 38px; height: 38px; box-shadow: none; border-color: transparent; }
    .topic-rail-btn small { position: static; transform: none; font-size: 10px; }
    .topic-rail-btn:has(small) { width: auto; min-width: 40px; padding: 0 10px; border-radius: 20px; display: flex; gap: 4px; }
    .topic-article, .topic-replies { padding: 18px 16px; }
    .topic-article h1 { font-size: 20px; }
    .topic-pager { grid-template-columns: 1fr; }
    .topic-pager-next { text-align: left; }
    .topic-reply-main header { flex-direction: column; gap: 2px; }
    .comment small.topic-reply-when { text-align: left; }
}
.home-comments h3, .home-forum h3 { margin: 0 0 12px; font-size: 15px; }
.home-forum h3 small { font-weight: 400; font-size: 11px; }
.home-comment-from { display: flex; align-items: center; gap: 6px; }
.home-comment-from img { width: 22px; height: 33px; object-fit: cover; border-radius: 4px; }
.home-comment-from img.is-blurred { filter: blur(4px); }
.home-all-posts { display: flex; width: 100%; margin-top: 22px; padding: 14px; border-radius: 12px; font-weight: 600; font-size: 14px; }
/* 95-bbcode-media.css */
.bb-video { position: relative; display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 10px 0; border-radius: 10px; overflow: hidden;
    background: #1d1a24; }
.bb-video.is-vertical { max-width: 340px; aspect-ratio: 9 / 16; }
.bb-video-tiktok.is-vertical { aspect-ratio: 325 / 740; }
.bb-video > a { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-decoration: none; }
.bb-video > a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.bb-video-play { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #000000b3; font-size: 14px; font-weight: 700; }
.bb-video-play b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ff2d55; font-size: 12px; }
.bb-video-youtube .bb-video-play b { background: #ff0033; }
.bb-video-tiktok { background: linear-gradient(135deg, #111, #25f4ee33 50%, #fe2c5533); }
.bb-video-facebook { background: linear-gradient(135deg, #0d3a8a, #1877f2); }
.bb-video-niconico { background: #252525; } .bb-video-bilibili { background: linear-gradient(135deg, #0b6d93, #fb7299); } .bb-video-vimeo { background: #1ab7ea; }
.bb-video > a:hover .bb-video-play { background: #000000e0; }
.bb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bb-img-link { display: inline-block; max-width: 100%; margin: 6px 0; vertical-align: top; }
.bb-img { display: block; max-width: 100%; max-height: 640px; height: auto; border-radius: 6px; background: var(--bg); }
.bb-img-gone { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0; padding: 6px 12px; border: 1px dashed var(--line); border-radius: 6px;
    color: var(--muted); font-size: 12.5px; text-decoration: none; overflow-wrap: anywhere; }
.bb-img-gone:hover { color: var(--pink); border-color: var(--pink); }
.bb-spoiler { margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.bb-spoiler > summary { padding: 8px 12px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); }
.bb-spoiler[open] > summary { border-bottom: 1px solid var(--line); }
.bb-spoiler > div { padding: 10px 12px; }
.bb-editor .bb-toolbar .bb-upload.is-busy { pointer-events: none; color: var(--pink); }
.bb-editor .bb-toolbar .bb-upload.is-busy svg { animation: bb-busy 1s ease-in-out infinite alternate; }
@keyframes bb-busy { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .bb-editor .bb-toolbar .bb-upload.is-busy svg { animation: none; opacity: .5; } }
.bb-smiley { display: inline-block; vertical-align: -6px; margin: 0 1px; }
img.bb-smiley { width: 26px; height: 24px; image-rendering: auto; }
.bb-post-previews { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; }
.bb-post-previews .photo-card.is-preview { flex: 0 0 140px; width: 140px; margin: 0; }
.bb-post-previews .photo-card.is-preview .photo-cover img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; height: auto; }
.bb-post-previews .photo-card.is-preview .photo-meta { font-size: 11px; }
.bb-post-previews .photo-card.is-preview .avatar { width: 20px; height: 20px; font-size: 9px; }
@media (max-width: 480px) { .bb-post-previews .photo-card.is-preview { flex-basis: calc(50% - 5px); width: calc(50% - 5px); } }
.media-dialog-preview { padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--muted); }
.media-dialog-preview img { display: block; max-width: 100%; max-height: 220px; margin: 0 auto; border-radius: 6px; }
.media-dialog-ok { color: #2f8a5c; font-weight: 700; }
#media-dialog .field-error { margin: 0; }
dialog.modal.modal-image { width: auto; max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; background: #14111a; overflow: hidden; }
.modal-image form { position: relative; display: grid; }
.modal-image img { display: block; max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 100px); width: auto; height: auto; margin: 0 auto; object-fit: contain; background: #14111a; }
.image-viewer-close { position: absolute; top: 8px; right: 8px; z-index: 1; background: #000a; color: #fff; border-radius: 50%; width: 36px; height: 36px; }
.image-viewer-close:hover { background: #000d; color: #fff; }
.image-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #1d1925; color: #cfc8da; }
.image-viewer-bar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-viewer-bar .button { padding: 6px 14px; font-size: 13px; }
.bb-img-link { cursor: zoom-in; }
@media (max-width: 760px) { dialog.modal.modal-image { margin: auto; border-radius: 14px; width: auto; max-width: calc(100vw - 16px); } }
.page-dialog-body { max-height: min(65vh, 640px); overflow: auto; overscroll-behavior: contain; }
.page-dialog-body .form-hint { margin-top: 16px; }
.modal-actions a.button { display: inline-flex; align-items: center; justify-content: center; }
.footer-donate { padding: 2px 10px; border-radius: 999px; background: var(--pink-soft); color: var(--pink); font-size: inherit; font-weight: 600; }
.footer-donate:hover { background: var(--pink); color: #fff; filter: none; }
.home-donate { width: 100%; margin-top: 12px; color: var(--pink); font-weight: 600; }
.donate-body { display: grid; gap: 16px; }
.donate-message { margin: 0; line-height: 1.7; }
.donate-goal { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.donate-goal-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.donate-goal small { color: var(--muted); font-size: 12px; }
.donate-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.donate-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), #ffb36b); transition: width .6s ease; }
.donate-qr { margin: 0; display: grid; justify-items: center; gap: 8px; }
.donate-qr img { width: min(240px, 70vw); height: auto; border-radius: 12px; background: #fff; padding: 8px; border: 1px solid var(--line); }
.donate-qr figcaption { font-size: 12px; color: var(--muted); text-align: center; }
.donate-kofi { justify-content: center; gap: 8px; background: #29abe0; }
.donate-kofi small { font-weight: 400; opacity: .9; font-size: 11px; }
.donate-admin-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.donate-admin-qr img { border-radius: 10px; border: 1px solid var(--line); background: #fff; padding: 6px; }
.donate-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.donate-actions > * { flex: 1 1 180px; }
.donate-report { justify-content: center; }
.donate-perk { margin: -6px 0 0; text-align: center; }
.donate-supporters h3, .donate-mine h3, .donate-form h3 { font-size: 14px; margin: 0 0 8px; }
.donate-supporter-list { display: flex; flex-wrap: wrap; gap: 6px; }
.donate-supporter { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--pink-soft); color: var(--ink); font-size: 12.5px; }
.donate-supporter .avatar { width: 22px; height: 22px; font-size: 10px; }
.donate-supporter.is-hidden { padding: 3px 10px; background: var(--bg); color: var(--muted); }
.donate-mine p { margin: 4px 0; font-size: 13px; }
.donate-status { display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fff3d6; color: #a06a00; }
.donate-status.is-approved { background: #e3f4ea; color: #2f8a5c; } .donate-status.is-rejected { background: #fde8e8; color: #b92e4c; }
body.dark .donate-status { background: #3d2e17; color: #f3c27b; } body.dark .donate-status.is-approved { background: #183528; color: #8fdcb1; } body.dark .donate-status.is-rejected { background: #3a2026; color: #f08ba3; }
#donate-dialog .modal-head form { margin: 0; }
.donate-admin-progress { font-size: 14px; }
.donate-slip { max-width: 90px; max-height: 120px; }
.donate-admin-table td { vertical-align: top; }
.donate-admin-table form + form { margin-top: 6px; }
.donate-more { display: block; text-align: center; font-size: 13px; }
.donate-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.donate-quick button { flex: 1 1 60px; padding: 6px 8px; }
.donate-quick button.is-on { background: var(--pink); color: #fff; border-color: var(--pink); }
.support-hero { text-align: center; background: linear-gradient(135deg, var(--pink-soft), #fff6e8); }
body.dark .support-hero { background: linear-gradient(135deg, #3a2030, #33291c); }
.support-hero h1 { margin: 4px 0 8px; font-size: clamp(20px, 4vw, 28px); }
.support-hero p { margin: 0 auto; max-width: 640px; line-height: 1.7; }
.support-kicker { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 16px 0; }
.support-grid .panel { margin: 0; }
.support-stats { display: grid; gap: 12px; align-content: start; }
.support-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.support-stat { padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.support-stat small { display: block; color: var(--muted); font-size: 12px; }
.support-stat b { font-size: 22px; }
.support-stat b span { font-size: 13px; font-weight: 400; color: var(--muted); }
.support-top h2, .support-give h2 { margin-top: 0; }
.support-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.support-rank li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--bg); }
.support-medal { width: 2em; text-align: center; font-weight: 700; color: var(--muted); }
.support-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.support-who > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.support-who small { color: var(--muted); font-size: 11.5px; }
.support-who .avatar { width: 32px; height: 32px; flex: none; }
.support-anon { margin: 10px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.support-give-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: start; }
.support-pay { display: grid; gap: 12px; }
.support-login { padding: 16px; border-radius: 12px; background: var(--bg); text-align: center; }
.support-message-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.support-message-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.support-message-list .avatar { width: 36px; height: 36px; flex: none; }
.support-message-list li > div { min-width: 0; flex: 1; }
.support-anon-avatar { display: inline-grid; place-items: center; background: var(--line); color: var(--muted); font-weight: 700; }
.support-message-head { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.support-plus { margin-left: auto; color: #2f8a5c; font-weight: 700; font-size: 13px; }
body.dark .support-plus { color: #8fdcb1; }
.support-message-text { margin: 4px 0 0; overflow-wrap: anywhere; }
.support-thanks { text-align: center; color: var(--muted); margin: 20px 0; }
@media (max-width: 760px) {
    .support-grid, .support-give-grid { grid-template-columns: minmax(0, 1fr); }
}
.footer-install { padding: 2px 10px; border-radius: 999px; background: transparent; color: inherit; font-size: inherit; font-weight: 600; border: 1px solid var(--line); }
.footer-install:hover { border-color: var(--pink); color: var(--pink); filter: none; }
.footer-install[hidden] { display: none; }
/* 96-page-fade.css */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
@supports not (view-transition-name: none) {
    #main { animation: page-fade-in .28s ease-out both; }
}
@keyframes page-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    #main { animation: none; }
}
/* 97-header.css */
.icon { display: block; flex: none; }
.header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { position: relative; max-width: 1240px; margin: auto; padding: 15px 22px; display: flex; align-items: center; } 
.brand { display: flex; align-items: center; }
#global-search { position: relative; display: flex; flex: 1; } 
.header input { border: 0; background: transparent; width: 100%; }
.icon-button { background: transparent; }
.header-actions { margin-left: auto; display: flex; align-items: center; white-space: nowrap; }
#unread { font-style: normal; }
#account-button { display: flex; align-items: center; }
#account-button .avatar { font-size: 12px; }
.header .header-actions > a.plain { font-size: 14px; font-weight: 600; color: var(--ink); }
.header .header-actions > a.plain:hover { background: var(--pink-soft); color: var(--pink); }
.nav-wrap { background: var(--paper); }
.navigation { max-width: 1196px; margin: auto; display: flex; align-items: center; overflow-x: auto; white-space: nowrap; }
.nav-wrap .navigation > .nav-tags-button { flex-shrink: 0; }
@media (min-width: 1450px) {
    .header-inner { max-width: 1284px; }
    .navigation { max-width: 1240px; }
}
@media (max-width: 1250px) {
    .navigation { padding: 0 24px; }
}
@media (max-width: 760px) {
    .header-inner { flex-wrap: wrap; }
    #global-search { order: 3; max-width: none; flex-basis: 100%; }
    .nav-wrap .navigation > .nav-tags-button { position: sticky; left: 0; z-index: 3; }
}
@media (max-width: 480px) {
    .header .brand { flex: 1; min-width: 0; }
    .header-actions { flex-shrink: 0; }
}
.header .header-inner { gap: 28px; padding-top: 12px; padding-bottom: 12px; min-height: 66px; }
.header .brand { gap: 10px; color: var(--ink); flex-shrink: 0; }
.header .brand img { width: 40px; height: 40px; border-radius: 10px; }
.header .brand-text { display: grid; gap: 1px; font-size: 21px; line-height: 1.15; font-weight: 800; letter-spacing: .06em; }
.header .brand-text small { font-size: 11px; line-height: 1.3; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.season .header .brand::before { left: -6px; top: -8px; font-size: 16px; }
.header #global-search { height: 40px; max-width: 420px; align-items: center; border-radius: 999px; background: var(--bg);
    border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s, background .15s; }
.header #global-search:focus-within { border-color: var(--pink); background: var(--paper); box-shadow: 0 0 0 3px var(--pink-soft); }
.header #global-search input { height: 100%; padding: 0 4px 0 16px; font-size: 13.5px; color: var(--ink); }
.header #global-search input:focus-visible { outline: none; }
.header #global-search .icon-button { display: grid; place-items: center; width: 40px; height: 38px; padding: 0; border-radius: 999px; color: var(--muted); }
.header #global-search .icon-button:hover { color: var(--pink); }
.header .header-actions { gap: 6px; }
.header .header-actions .theme-toggle,
.header .header-actions .notification-trigger { display: grid; place-items: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px;
    padding: 0; border-radius: 999px; font-size: 0; line-height: 0; color: var(--muted); position: relative; }
.header .header-actions .theme-toggle:hover,
.header .header-actions .notification-trigger:hover,
.header .header-actions .notification-trigger[aria-expanded="true"] { background: var(--pink-soft); color: var(--pink); }
.header #unread { position: absolute; }
.header #unread:empty { display: none; }
.header #unread:not(:empty) { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
    border: 2px solid var(--paper); background: var(--pink); color: #fff; font: 700 10px/14px Tahoma, sans-serif; text-align: center; }
.header #account-button { height: 40px; gap: 8px; padding: 0 10px 0 5px; border-radius: 999px; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.header #account-button:hover,
.header #account-button[aria-expanded="true"] { background: var(--pink-soft); }
.header #account-button .avatar { width: 30px; height: 30px; min-width: 30px; }
.header #account-button .account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header #account-button .icon { color: var(--muted); transition: transform .15s; }
.header #account-button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.header .header-actions > .button { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px 0 14px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; box-shadow: 0 4px 12px -6px var(--pink); }
.header .header-actions > .header-register { padding: 0 18px; }
.header .header-actions > a.plain { height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; }
.nav-wrap { border-bottom: 1px solid var(--line); }
.nav-wrap .navigation { gap: 6px; min-height: 50px; scrollbar-width: none; }
.nav-wrap .navigation::-webkit-scrollbar { display: none; }
.nav-wrap .navigation a { position: relative; display: inline-flex; align-items: center; height: 50px; padding: 0 12px; border: 0;
    color: var(--muted); font-weight: 600; transition: color .15s; }
.nav-wrap .navigation a:hover { color: var(--ink); }
.nav-wrap .navigation a.current { color: var(--pink); font-weight: 700; }
.nav-wrap .navigation a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--pink); transform: scaleX(0); transition: transform .2s ease; }
.nav-wrap .navigation a.current::after { transform: scaleX(1); }
.nav-wrap .navigation a:hover::after { transform: scaleX(.4); opacity: .5; }
.nav-wrap .navigation a.current:hover::after { transform: scaleX(1); opacity: 1; }
.nav-wrap .navigation > .nav-tags-button { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-right: 10px; padding: 0 14px 0 11px;
    border: 0; border-radius: 999px; background: var(--pink-soft); color: var(--pink); font-size: 13px; font-weight: 700; }
.nav-wrap .navigation > .nav-tags-button:hover,
.nav-wrap .navigation > .nav-tags-button[aria-expanded="true"] { background: var(--pink); color: #fff; }
.header-account-links a, .header-account-links button { display: flex; align-items: center; gap: 10px; width: 100%; }
.header-account-links .icon { color: var(--muted); }
.header-account-links a:hover .icon { color: var(--pink); }
.header-account-links button .icon { color: inherit; }
.footer-bar .theme-toggle .icon { width: 15px; height: 15px; }
.mobile-nav a .icon { margin: 0 auto 2px; }
@media (max-width: 1000px) {
    .header .header-inner { gap: 16px; }
    .header .header-actions .notification-trigger { display: grid; }
    .header #account-button { padding-right: 8px; }
    .header #account-button .account-name { display: none; }
}
@media (max-width: 760px) {
    .header .header-inner { padding: 10px 16px; gap: 10px 8px; min-height: 0; }
    .header .brand img { width: 36px; height: 36px; border-radius: 9px; }
    .header .brand-text { font-size: 18px; }
    .header .brand-text small { font-size: 10px; }
    .header #global-search { height: 40px; }
    .header .header-actions .theme-toggle,
    .header .header-actions .notification-trigger { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
    .header #account-button { height: 38px; width: 38px; padding: 0; justify-content: center; }
    .header #account-button .account-name, .header #account-button .icon { display: none; }
    .nav-wrap .navigation { min-height: 46px; padding: 0 12px; gap: 2px; font-size: 13px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
    .nav-wrap .navigation a { height: 46px; padding: 0 10px; }
    .nav-wrap .navigation a::after { left: 10px; right: 10px; }
    .nav-wrap .navigation > .nav-tags-button { height: 32px; margin-right: 6px; padding: 0 12px 0 9px; font-size: 12.5px; }
}
@media (max-width: 390px) {
    .header .brand-text { font-size: 16px; }
    .header .brand-text small { display: none; }
}
@media (max-width: 480px) {
    .header .header-actions > .button { display: none; }
}
.auth-brand { display: flex; justify-content: center; margin: 12px 0 30px; }
.auth-brand .brand { display: inline-flex; gap: 12px; color: var(--ink); font-size: 22px; font-weight: 800; letter-spacing: .06em; text-decoration: none; }
.auth-brand .brand img { border-radius: 12px; }
.season .auth-brand .brand::before { left: -6px; top: -8px; }
/* 98-follow.css */
.follow-form { margin: 0; display: inline-flex; }
.follow-button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
    background: var(--pink); color: #fff; border: 1px solid var(--pink); }
.follow-button small { font-weight: 400; opacity: .85; font-size: 12px; }
.follow-button.is-following { background: var(--paper); color: var(--pink); }
.follow-button.is-following:hover { background: var(--pink-soft); filter: none; }
.nav-wrap .navigation .nav-count { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff;
    font: 700 10.5px/18px Tahoma, sans-serif; text-align: center; }
.feed-layout { align-items: start; }
.feed-start h3 { font-size: 14px; margin: 18px 0 10px; }
.feed-suggest { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.feed-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--bg); }
.feed-suggest-item .tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.feed-suggest-item .follow-button { height: 30px; padding: 0 12px; font-size: 12.5px; flex: none; }
.feed-follow-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.feed-follow-row .creator { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.feed-follow-row .creator .avatar { width: 26px; height: 26px; }
.feed-follow-row form { margin: 0; }
.feed-follow-row button.plain { width: 28px; height: 28px; border-radius: 999px; color: var(--muted); font-size: 16px; line-height: 1; }
.feed-follow-row button.plain:hover { background: var(--pink-soft); color: var(--pink); }
.feed-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--muted); font-size: 12.5px; }
.feed-divider::before, .feed-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.related-posts { margin-top: 18px; }
.related-posts .section-head { margin-bottom: 10px; }
@container (min-width: 640px) { .photo-grid.g24.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 760px) { .photo-grid.g24.related-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ranking-tabs { margin-bottom: 16px; }
.ranking-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.rank-item { position: relative; display: grid; gap: 4px; align-content: start; }
.rank-badge { position: absolute; z-index: 3; top: 8px; left: 8px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
    display: grid; place-items: center; background: rgba(20, 14, 26, .72); color: #fff; font-weight: 800; font-size: 13px; pointer-events: none; }
.ranking-podium .rank-badge { min-width: 40px; height: 40px; font-size: 22px; background: var(--paper); box-shadow: 0 4px 14px -6px #0006; }
.rank-score { color: var(--muted); font-size: 12px; text-align: right; }
.ranking-podium .rank-score { font-size: 13px; font-weight: 700; color: var(--pink); }
@container (max-width: 520px) { .ranking-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ranking-podium .rank-1 { grid-column: 1 / -1; } }
.photo-rank-tabs .photo-rank-more { margin-left: auto; font-size: 13px; }
.image-work-nav { align-items: center; }
.image-work-nav-middle { display: inline-flex; align-items: center; gap: 14px; }
.slideshow-toggle { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--pink); background: var(--pink-soft); }
.slideshow-toggle[aria-pressed="true"] { background: var(--pink); color: #fff; }
@media (max-width: 480px) { .image-work-nav-middle > a { display: none; } }
.upload-similar { display: flex; gap: 14px; align-items: flex-start; }
.upload-similar img { border-radius: 8px; object-fit: cover; flex: none; }
.folder-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.folder-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 13px; border: 1px solid var(--line); }
.folder-chip small { color: var(--muted); }
.folder-chip:hover { border-color: var(--pink); }
.folder-chip.current { background: var(--pink); border-color: var(--pink); color: #fff; }
.folder-chip.current small { color: #fff; opacity: .85; }
.folder-manage { margin-bottom: 14px; }
.folder-manage summary { cursor: pointer; font-weight: 700; }
.folder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.folder-row form { margin: 0; }
.folder-row-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; }
.folder-row input[name="name"] { flex: 1; min-width: 160px; }
.folder-picker { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.folder-picker select.pill { max-width: 210px; padding-right: 26px; cursor: pointer; }
.folder-new { display: inline-flex; align-items: center; gap: 6px; }
.folder-new input { height: 34px; width: 160px; }
.source-status { font-size: 14px; }
.source-card { display: flex; gap: 16px; align-items: flex-start; }
.source-thumb img { border-radius: 8px; object-fit: cover; }
.source-body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.source-body p { margin: 0; }
.source-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.source-link a { overflow-wrap: anywhere; }
.source-link form { margin: 0; }
.source-sim { min-width: 52px; font-weight: 800; color: var(--pink); }
.image-work-media { position: relative; }
.image-work-media:has(.note-layer) { overflow: visible; }
.image-work-media:has(.note-layer) .board-image-button { overflow: hidden; }
.note-layer { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
.note-layer.is-hidden .note-box { display: none; }
.note-layer.is-adding { pointer-events: auto; cursor: crosshair; outline: 2px dashed var(--pink); outline-offset: -2px; background: rgba(255, 255, 255, .06); }
.note-box { position: absolute; pointer-events: auto; padding: 0; border: 2px solid #fff; border-radius: 4px; background: rgba(255, 236, 120, .28);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .45); cursor: help; min-width: 0; min-height: 0; }
.note-box { cursor: pointer; }
.note-box:hover, .note-box:focus-visible, .note-box.is-open { background: rgba(255, 246, 170, .32); border-color: var(--pink); }
.note-box.is-draft { pointer-events: none; border-style: dashed; border-color: var(--pink); background: rgba(232, 101, 160, .15); }
.note-text { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 2; width: max-content; max-width: min(320px, 70vw); padding: 8px 10px;
    border-radius: 8px; background: #fffbe6; color: #2b2633; font-size: 13.5px; line-height: 1.55; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .45); pointer-events: none; }
.note-text.is-up { top: auto; bottom: calc(100% + 6px); }
.note-text.is-right { left: auto; right: 0; }
.note-box.is-open .note-text { pointer-events: auto; }
.note-text small { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.note-edit { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--pink); color: #fff; }
.note-text small { display: block; margin-top: 4px; color: #8a8595; font-size: 11.5px; }
.note-box:hover .note-text, .note-box:focus-visible .note-text, .note-box.is-open .note-text { display: block; }
.note-editor { position: absolute; z-index: 5; width: min(300px, 80vw); margin-top: 6px; padding: 10px; border-radius: 10px; background: var(--paper);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5); pointer-events: auto; display: grid; gap: 6px; cursor: auto; }
.note-editor.is-up { transform: translateY(calc(-100% - 12px)); }
.note-editor textarea { width: 100%; min-height: 70px; resize: vertical; }
.note-editor-actions { display: flex; gap: 6px; }
.note-tool { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--bg); }
.note-tool[aria-pressed="true"] { background: var(--pink-soft); color: var(--pink); }
.note-tool[data-note-add][aria-pressed="true"] { background: var(--pink); color: #fff; }
.note-tool[hidden] { display: none; }
@media (max-width: 480px) { .image-work-nav-middle { flex-wrap: wrap; justify-content: center; gap: 6px; } }
.note-box.is-cover { display: flex; align-items: center; justify-content: center; padding: 2px; border: 0; box-shadow: none; border-radius: 6px; overflow: visible; }
.note-box.is-cover:hover, .note-box.is-cover:focus-visible, .note-box.is-cover.is-open { box-shadow: 0 0 0 2px var(--pink); }
.note-cover-text { display: block; width: 100%; max-height: 100%; overflow: hidden; text-align: center; line-height: 1.18; font-weight: 700; font-family: Tahoma, "Noto Sans Thai", sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
.note-editor-style { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.note-editor-colours { display: flex; gap: 12px; font-size: 13px; }
.note-editor-colours[hidden] { display: none; }
.note-editor-colours label, .note-editor-style label { display: inline-flex; align-items: center; gap: 4px; }
.note-editor-colours input[type=color] { width: 32px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; }
.note-box:not(.is-draft)::after { content: ""; position: absolute; inset: -8px; }
.note-box.is-open, .note-box:hover { z-index: 3; }
#image-lightbox .lightbox-frame { position: absolute; transform-origin: center; }
#image-lightbox .lightbox-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; pointer-events: none; user-select: none; }
#image-lightbox .lb-note-layer { inset: 0; width: 100%; height: 100%; }
#image-lightbox .lb-note-layer .note-text { transform: scale(calc(1 / var(--lb-zoom, 1))); transform-origin: top left; }
#image-lightbox .lb-note-layer .note-text.is-up { transform-origin: bottom left; }
#image-lightbox .lb-note-layer .note-text.is-right { transform-origin: top right; }
#image-lightbox .lb-note-layer .note-editor { transform: scale(calc(1 / var(--lb-zoom, 1))); transform-origin: top left; }
#image-lightbox .lb-note-layer .note-editor.is-up { transform: scale(calc(1 / var(--lb-zoom, 1))) translateY(calc(-100% - 12px)); }
#image-lightbox .lb-note-layer.is-adding { outline-width: calc(2px / var(--lb-zoom, 1)); }
.lb-note-add[aria-pressed="true"] { background: var(--pink); color: #fff; border-color: var(--pink); }
.note-editor { color: var(--ink); text-align: left; font-size: 14px; }
.note-editor textarea { color: var(--ink); background: var(--paper); }
.note-box.is-editing { visibility: hidden; }
.note-adjust { position: absolute; z-index: 4; pointer-events: auto; cursor: move; border: 2px dashed var(--pink); background: rgba(232, 101, 160, .12); touch-action: none; }
.note-handle { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--pink); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.note-handle-nw { left: -8px; top: -8px; cursor: nwse-resize; } .note-handle-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.note-handle-sw { left: -8px; bottom: -8px; cursor: nesw-resize; } .note-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
#image-lightbox .lb-note-layer .note-box:not(.is-cover) { border-width: calc(2px / var(--lb-zoom, 1)); border-radius: calc(4px / var(--lb-zoom, 1)); box-shadow: 0 0 0 calc(1px / var(--lb-zoom, 1)) rgba(0,0,0,.7); }
#image-lightbox .lb-note-layer .note-adjust { border-width: calc(2px / var(--lb-zoom, 1)); }
#image-lightbox .lb-note-layer .note-handle { transform: scale(calc(1 / var(--lb-zoom, 1))); }
.feed-suggest-item .tag { flex: 1 1 auto; min-width: 0; display: block; }
.feed-suggest-item .follow-form { flex: none; }
.feed-follow-add { display: flex; gap: 8px; margin: 4px 0 10px; }
.feed-follow-input { position: relative; flex: 1; min-width: 0; }
.feed-follow-input input { width: 100%; height: 36px; }
.feed-follow-add button { height: 36px; padding: 0 14px; border-radius: 999px; white-space: nowrap; }
.simple-pagination { gap: 10px; flex-wrap: nowrap; }
.simple-pagination .page-step { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13.5px; font-weight: 600; }
.simple-pagination a.page-step:hover { border-color: var(--pink); color: var(--pink); }
.simple-pagination .page-step.is-disabled { opacity: .45; }
.simple-pagination .page-current { min-width: 64px; text-align: center; font-size: 13px; color: var(--muted); }
.cookie-notice { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 34px -10px rgba(0,0,0,.35); font-size: 13.5px; }
.cookie-notice p { margin: 0; flex: 1; line-height: 1.6; }
.cookie-notice button { flex: none; height: 36px; padding: 0 18px; border-radius: 999px; }
@media (max-width: 760px) { .cookie-notice { bottom: 76px; font-size: 12.5px; padding: 10px 12px; gap: 10px; } }
.note-history-link { text-decoration: none; display: inline-flex; align-items: center; }
.note-history-thumb { border-radius: 8px; object-fit: cover; }
.note-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note-history li { padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.note-history-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.note-history-head form { margin: 0 0 0 auto; }
.note-history-action { padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--pink-soft); color: var(--pink); }
.note-history-action.is-deleted { background: #fde8e8; color: #b92e4c; } .note-history-action.is-restored { background: #e3f4ea; color: #2f8a5c; }
body.dark .note-history-action.is-deleted { background: #3a2026; color: #f08ba3; } body.dark .note-history-action.is-restored { background: #183528; color: #8fdcb1; }
.note-history-gone { color: #b92e4c; }
.note-history-body { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }