*{box-sizing:border-box} :root{--u:min(.1050420168vw,1px);--bg:#f2f2f2;--paper:#fff;--text:#303030;--muted:#999;--line:#e7e7e7;--purple:#8015e7;--soft:#f3eff9}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"Microsoft YaHei",sans-serif}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit}a{color:inherit;text-decoration:none}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.header{width:100%;background:var(--paper);box-shadow:0 calc(3 * var(--u)) calc(5 * var(--u)) #0002;position:relative;z-index:2}.nav{height:calc(142 * var(--u));max-width:952px;margin:auto;position:relative}.brand{position:absolute;left:calc(40 * var(--u));top:calc(5 * var(--u));width:calc(142 * var(--u));height:calc(126 * var(--u))}.brand img{width:100%;height:100%;object-fit:contain}.citypick{position:absolute;left:calc(252 * var(--u));top:calc(28 * var(--u));height:calc(80 * var(--u));max-width:calc(228 * var(--u));padding:0 calc(25 * var(--u));border-radius:calc(50 * var(--u));background:#f4f4f6;display:flex;align-items:center;gap:calc(13 * var(--u));font-size:calc(37 * var(--u));white-space:nowrap}.citypick svg:first-child{width:calc(28 * var(--u));height:calc(36 * var(--u));color:#7456ff;fill:#7456ff;stroke:white;stroke-width:1}.citypick svg:last-child{width:calc(20 * var(--u));height:calc(20 * var(--u));color:#999}.icon-btn{position:absolute;top:calc(40 * var(--u));padding:0;width:calc(54 * var(--u));height:calc(54 * var(--u))}.icon-btn[data-action="theme"]{left:calc(478 * var(--u))}.icon-btn[data-action="search"]{left:calc(588 * var(--u))}.icon-btn svg{width:calc(48 * var(--u));height:calc(48 * var(--u))}.login-btn{position:absolute;right:calc(40 * var(--u));top:0;width:calc(230 * var(--u));height:calc(138 * var(--u));border-radius:calc(20 * var(--u));background:linear-gradient(110deg,#d000be,#7c0ce9);box-shadow:0 calc(3 * var(--u)) calc(7 * var(--u)) #ab00be35;color:#fff;font-size:calc(36 * var(--u));text-align:left;padding:calc(20 * var(--u)) calc(40 * var(--u));line-height:1.4;overflow-wrap:anywhere}.page,.detail-page{width:100%;max-width:952px;margin:0 auto;padding:0 calc(40 * var(--u))}.feed-title{font-size:calc(40 * var(--u));line-height:1.4;margin:calc(35 * var(--u)) 0 calc(45 * var(--u));font-weight:700;display:flex;align-items:center;gap:calc(20 * var(--u))}.feed-title:before{content:'';width:calc(10 * var(--u));height:calc(40 * var(--u));border-radius:calc(6 * var(--u));background:linear-gradient(#7056ff,#ad49ff)}.photo-wall{display:grid;grid-template-columns:1fr 1fr;gap:calc(40 * var(--u));align-items:start}.photo-column{display:flex;flex-direction:column;gap:calc(40 * var(--u))}.card{background:var(--paper);border-radius:calc(20 * var(--u));overflow:hidden;box-shadow:0 calc(7 * var(--u)) calc(10 * var(--u)) #0002;cursor:pointer;outline-offset:4px}.card-photo{width:100%;height:auto;display:block}.card-body{padding:calc(31 * var(--u)) calc(30 * var(--u)) calc(32 * var(--u))}.card-body h3{font-size:calc(35 * var(--u));line-height:1.4;font-weight:400;margin:0 0 calc(12 * var(--u))}.card-body p{margin:0;color:#a2a2a2;font-size:calc(30 * var(--u));line-height:1.5}.detail-image{display:block;width:100%;height:auto;border-radius:0 0 calc(20 * var(--u)) calc(20 * var(--u))}.detail-page h1{font-size:calc(60 * var(--u));line-height:1.35;margin:calc(58 * var(--u)) 0 calc(48 * var(--u));font-weight:700}.detail-meta{display:flex;gap:calc(40 * var(--u));align-items:center;color:#a1a1a1;font-size:calc(36 * var(--u));line-height:1.5;white-space:nowrap}.detail-meta span,.detail-views{display:flex;align-items:center;gap:calc(12 * var(--u))}.detail-meta svg,.detail-views svg{width:calc(38 * var(--u));height:calc(38 * var(--u));flex-shrink:0}.detail-views{color:#a1a1a1;font-size:calc(36 * var(--u));margin-top:calc(42 * var(--u));line-height:1.5}.detail-copy{white-space:pre-wrap;font-size:calc(32 * var(--u));line-height:1.8;margin-top:calc(45 * var(--u))}.management-entry{margin:calc(65 * var(--u)) 0 calc(35 * var(--u));display:flex;justify-content:center;gap:24px;color:#aaa;font-size:12px}.empty{color:#999;font-size:16px;padding:40px 0}.primary{border:0;background:linear-gradient(110deg,#cc00bd,#7c0ce9);color:white;border-radius:8px;padding:12px 20px}.chip{border-radius:20px;padding:9px 15px;background:var(--bg)}.chip.active{color:var(--purple);background:var(--soft)}.modal{font-size:14px}.modal svg{width:20px;height:20px}.modal input,.modal textarea,.modal select{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:11px 12px;border-radius:8px}.modal textarea{min-height:110px;resize:vertical}.modal h2{font-size:20px}.dark{--bg:#202020;--paper:#303030;--text:#eee;--muted:#aaa;--line:#444}.dark .citypick{background:#444}.dark .brand img{border-radius:4px}
.modal-backdrop{position:fixed;z-index:50;inset:0;background:#21163166;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:24px}.modal{max-height:90vh;overflow:auto;background:var(--paper);border-radius:20px;width:500px;padding:28px;position:relative;box-shadow:0 25px 100px #180a3033}.modal.wide{width:790px}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-header h2{font-size:21px;margin:0}.modal-header p{color:var(--muted);font-size:12px}.close{background:var(--bg);border-radius:50%;width:30px;height:30px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:12px;color:#87808f;margin-bottom:7px}input,textarea,select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px;outline:none;color:var(--text)}input:focus,textarea:focus,select:focus{border-color:var(--purple)}textarea{resize:vertical;min-height:95px}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.full{width:100%}.form-note{color:var(--muted);font-size:11px;line-height:1.8}.cities{display:flex;gap:12px;flex-wrap:wrap}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px}.detail-image{width:100%;height:430px;object-fit:cover;border-radius:12px}.detail-content h1{margin:9px 0;font-size:27px}.detail-meta{color:var(--muted);font-size:12px;margin-bottom:20px}.detail-content h3{font-size:14px;margin-top:25px}.detail-content p{font-size:13px;line-height:2;color:#93869e;white-space:pre-wrap}.detail-actions{display:flex;gap:8px;margin-top:25px}.secondary{padding:10px 16px;border:1px solid var(--line);border-radius:8px;color:var(--purple)}.empty{text-align:center;padding:75px 20px;grid-column:1/-1;color:var(--muted)}.empty svg{width:40px;height:40px;margin-bottom:15px}.admin-list{display:flex;flex-direction:column;gap:9px;margin:17px 0}.admin-item{display:flex;align-items:center;padding:9px;background:var(--bg);border-radius:8px;gap:10px}.admin-item img{width:40px;height:46px;object-fit:cover;border-radius:5px}.admin-item span{flex:1}.admin-item button{color:var(--purple);font-size:12px}.upload-preview{width:75px;height:90px;object-fit:cover;border-radius:8px;margin-top:8px}.searchbox{position:relative;margin-bottom:20px}.searchbox svg{position:absolute;left:13px;top:12px;color:var(--muted)}.searchbox input{padding-left:41px}.grid.list{grid-template-columns:repeat(2,1fr)}.grid.list .card{display:flex}.grid.list .card-photo{width:45%;height:240px;flex-shrink:0}.grid.list .card-body{flex:1;padding-top:25px}#toast{position:fixed;z-index:100;bottom:30px;left:50%;transform:translate(-50%,20px);background:#342642;color:white;border-radius:10px;padding:12px 22px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;box-shadow:0 6px 25px #22113320}#toast.show{opacity:1;transform:translate(-50%,0)}body.dark{--bg:#1b1821;--paper:#24202c;--text:#e8e1ef;--muted:#a297ae;--line:#373040;--soft:#3a2d4e}.dark .hero{filter:brightness(.8)}.dark .tag{background:#352d40}.dark .age{background:#40303e}.dark .age.male{background:#2d3345}.dark .footer{border-color:var(--line)}

/* Detail layout follows the reference at every viewport size. */
.detail-image{height:auto;object-fit:initial;border-radius:0 0 calc(20 * var(--u)) calc(20 * var(--u))}.detail-meta{font-size:calc(36 * var(--u));margin-bottom:0}.modal-backdrop{padding:16px}.modal{max-height:92vh}.modal .form-pair{grid-template-columns:1fr 1fr}.modal .detail-meta{font-size:14px}@media(max-width:600px){.modal{padding:20px}.modal-header h2{font-size:19px}}
.custom-brand{display:flex;align-items:center;height:100%;gap:calc(12 * var(--u));font-size:calc(55 * var(--u));color:#b800b6}.custom-brand b{font-size:calc(48 * var(--u));line-height:1.3;overflow-wrap:anywhere;width:calc(52 * var(--u))}
.pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin:35px 0;color:var(--muted);font-size:14px}.pagination button{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:9px 14px;color:var(--purple)}.pagination button:disabled{opacity:.4;cursor:default}.pagination form{display:flex;align-items:center;gap:8px}.pagination input{width:58px;padding:8px 4px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--text);text-align:center}.pagination label{white-space:nowrap}@media(max-width:600px){.pagination{font-size:12px;gap:10px}.pagination button{padding:8px 10px}}
.image-frame{position:relative;width:100%;aspect-ratio:var(--image-ratio,3/4);overflow:hidden;background:var(--line)}.detail-page>.image-frame{border-radius:0 0 calc(20 * var(--u)) calc(20 * var(--u))}.image-frame>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .2s}.image-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:12px}.image-placeholder svg{width:32px;height:32px}.is-loading .image-placeholder{background:linear-gradient(100deg,transparent 25%,#ffffff55 50%,transparent 75%);background-size:200% 100%;animation:image-shimmer 1.6s infinite}.image-frame.is-loaded>img{opacity:1}.image-frame.is-loaded .image-placeholder{display:none}@keyframes image-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.is-loading .image-placeholder{animation:none}.image-frame>img{transition:none}}
