:root { font-family: 'DM Sans','Noto Sans SC',system-ui,sans-serif; color: #292622; background: #f7f4ef; font-synthesis: none; --rose:#dc777b; --ink:#292622; }
* { box-sizing: border-box; }
html,body { max-width:100%; overflow-x:hidden; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 48% -8%,#fff 0,#faf7f2 30%,#f3efe9 100%); }
button,a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { width: min(100%, 560px); min-height: 100vh; margin: auto; background: rgba(255,253,250,.9); box-shadow: 0 0 60px rgba(62,49,36,.08); }
header { display:flex; align-items:center; gap:12px; padding: max(20px,env(safe-area-inset-top)) 20px 16px; background:rgba(255,253,250,.88); }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; border:1px solid #eee4da; border-radius:15px; background:#fff8ed; box-shadow:0 5px 16px rgba(74,55,36,.07); font-size:24px; }
h1 { margin:0; font-size:20px; line-height:1.2; letter-spacing:-.4px; } h1 span { font-size:15px; }
header p { margin:4px 0 0; color:#91877e; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; } header i { color:#d98688; font-style:normal; margin:0 5px; }
.header-heart { margin-left:auto; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#d98c8e; background:#fff; border:1px solid #eee8e2; font-size:21px; }
nav { position:sticky; top:0; z-index:5; display:flex; gap:8px; padding:8px 18px 13px; overflow-x:auto; scrollbar-width:none; background:rgba(255,253,250,.94); backdrop-filter:blur(15px); border-bottom:1px solid #eeeae5; } nav::-webkit-scrollbar{display:none}
nav button { flex:none; min-height:44px; border:1px solid #ebe6e0; border-radius:999px; background:white; padding:8px 14px; font-size:13px; cursor:pointer; white-space:nowrap; } nav button.active { border-color:var(--ink); background:var(--ink); color:white; box-shadow:0 4px 10px #29262220; } nav b { margin-left:5px; padding:1px 5px; border-radius:8px; background:#eaa0a2; color:white; font-size:10px; }
main { padding:17px 14px 28px; }
.feed-title { display:flex; align-items:center; justify-content:space-between; padding:2px 5px 13px; font-size:14px; font-weight:600; }.feed-title small{color:#aaa19a;font-weight:400}.feed-title em{color:#aaa19a;font-size:10px;font-style:normal;font-weight:400;margin-left:4px}.live-dot{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#e58285;box-shadow:0 0 0 4px #fce7e5}
.post-card { min-width:0; margin-bottom:14px; padding:17px; border:1px solid #eee9e3; border-radius:22px; background:#fff; box-shadow:0 7px 24px rgba(63,48,35,.055); }
.post-head { display:flex; align-items:center; gap:10px; }.avatar{width:43px;height:43px;border-radius:50%;padding:2px;display:grid;place-items:center;border:1px solid #eee}.avatar span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;font-weight:700}.avatar-official span{background:#e9effa;color:#798aaa}.avatar-media span{background:#e3ebdf;color:#74806d}.avatar-fan span,.avatar-fansite span{background:#fff3d9;font-size:19px}.identity{min-width:0}.identity div{display:flex;align-items:center;gap:5px}.identity strong{font-size:14px}.identity>span,time{color:#9a9189;font-size:11px}.verified{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#efb3b5;color:#fff;font-size:7px}time{margin-left:auto;white-space:nowrap}.badges{display:flex;align-items:center;gap:6px;margin:10px 1px -4px}.source-badge,.milkz-badge{padding:3px 7px;border-radius:999px;background:#f4f0eb;color:#81776f;font-size:10px;line-height:1.2}.source-official{background:#f8e2e2;color:#a45d60;font-weight:700}.milkz-badge{background:#fff4d9;color:#8e7143}.translated-text{margin:10px 1px 14px;padding:10px 12px;border-radius:12px;background:#faf5ef;color:#665e58;font-size:13px;line-height:1.6}.translated-text[hidden]{display:none}.post-text{margin:14px 1px;line-height:1.68;font-size:14px;word-break:break-word}
.media { position:relative; height:188px; overflow:hidden; border-radius:16px; display:grid; place-items:center; }.media-peach{background:#f4d7cd}.media-blue{background:#dbe6ec}.media-green{background:#dfe8d8}.media-lilac{background:#e5ddea}.media:before,.media:after{content:'';position:absolute;border-radius:50%;background:#ffffff52}.media:before{width:170px;height:170px;left:-35px;top:-65px}.media:after{width:120px;height:120px;right:-20px;bottom:-50px}.media-art{position:relative;z-index:1;width:115px;height:115px;border-radius:38% 62% 58% 42%;display:grid;place-items:center;background:#ffffff66;transform:rotate(-8deg)}.milk-glass{font-size:48px;transform:rotate(8deg)}.sparkle,.heart{position:absolute;color:#fff;font-size:23px}.sparkle{left:-22px;top:12px}.heart{right:-18px;bottom:8px;color:#d99092}.media small{position:absolute;z-index:2;bottom:11px;left:13px;padding:5px 9px;border-radius:9px;background:#ffffffcc;color:#756b64;font-size:10px}.play{position:absolute;z-index:3;display:grid;place-items:center;width:48px;height:48px;padding-left:3px;border-radius:50%;background:#ffffffdf;color:#473e38;box-shadow:0 5px 14px #55443325}
.stats{display:flex;gap:25px;padding:13px 3px 11px;color:#a39a92;font-size:11px;border-bottom:1px solid #f1ede9}.actions{display:flex;align-items:center;justify-content:space-between;padding-top:7px;gap:5px}.actions button,.actions a{min-height:44px;display:inline-flex;align-items:center;border:0;background:none;text-decoration:none;padding:8px 6px;color:#6f6862;font-size:12px;cursor:pointer}.actions button:first-child{color:#aa686a;font-weight:600}.actions .saved{color:#d48c40}.actions a{color:#8b837d}.empty{text-align:center;padding:65px 25px}.empty>span{font-size:38px;color:#dc9294}.empty h2{font-size:18px}.empty p{font-size:13px;color:#9a9189}.empty button{min-height:44px;margin-top:10px;border:0;border-radius:22px;background:#2d2926;color:white;padding:10px 18px}.toast{position:fixed;z-index:10;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 32px);transform:translate(-50%,25px);padding:12px 17px;border-radius:14px;background:#292622ed;color:white;font-size:12px;box-shadow:0 8px 28px #33292140;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}footer{text-align:center;padding:0 20px calc(28px + env(safe-area-inset-bottom));font-size:11px;color:#b5ada6}footer p{max-width:430px;margin:0 auto 8px;line-height:1.6}footer span{letter-spacing:.7px}
@media(min-width:600px){body{padding:25px 0}.app-shell{border-radius:28px;overflow:hidden;min-height:calc(100vh - 50px)}.post-card{padding:20px}.media{height:230px}}
@media(max-width:370px){.actions span{display:none}.post-card{padding:14px}.media{height:170px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}