:root{--accent:#ee86ad;--accent-dark:#ab2d60;--accent-pale:#fff2f7}
*{box-sizing:border-box}
body{margin:0;background:#f5f5f5;color:#242424;font:14px -apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif}
#app{max-width:480px;min-height:100vh;margin:auto;background:#fff;padding-bottom:75px}
header{height:58px;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 14px;gap:8px}
header .logo{width:174px;height:44px;margin-right:auto;display:flex;align-items:center}
.logo-image{width:156px;height:34px;display:block}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
header a{position:relative;color:#222;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:5px}
header i{position:absolute;top:3px;right:2px;color:#fff;background:var(--accent-dark);border-radius:9px;font:10px sans-serif;padding:1px 4px}
section{padding:20px}
section{padding:14px 16px 16px}
h1{font-size:18px;margin:0 0 12px}
h2{font-size:16px;margin:14px 0 6px}
p{line-height:1.7;margin:8px 0}
.demo{font-size:12px;background:var(--accent-pale);border-left:3px solid var(--accent);padding:8px 10px;margin:0 0 18px}
.heading{font-weight:700;border-bottom:1px solid #e9e9e9;padding:10px 0 6px;margin-top:6px}
.heading a{float:right;font-weight:400;color:var(--accent-dark);font-size:12px}
.rail{display:flex;overflow:auto;gap:8px;padding:7px 0}
.rail .card{min-width:126px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.card{color:#242424;text-decoration:none;line-height:1.45;border:1px solid #ddd;border-radius:5px;padding:6px;display:block}
.card b,.card small,.card strong{display:block}
.card small{font-size:11px;color:#777;margin-top:3px}
.card strong{font-size:13px;margin-top:3px}
.thumb{aspect-ratio:1;background:linear-gradient(135deg,#f7f5f6,#ffeaf2);border-radius:3px;margin-bottom:5px;display:grid;place-items:center;padding:12px;text-align:center}
.thumb span{color:#292329;font-size:17px;font-weight:800;line-height:1.25;word-break:break-all}
.makers{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#eee;margin:8px 0}
.makers a,.list a{background:white;padding:9px 8px;color:#333;text-decoration:none;border:1px solid transparent}
.makers em{font-style:normal;color:var(--accent-dark);font-weight:bold;margin-right:8px}
.tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:10px}
.tabs a{width:50%;text-align:center;padding:12px;color:#555;text-decoration:none;border-bottom:3px solid transparent}
.tabs .on{color:var(--accent-dark);border-bottom-color:var(--accent)}
.list a{display:block;border-bottom:1px solid #eee}
.list b{color:var(--accent-dark);margin-right:16px}
.list small{float:right;color:#777}
.back{color:#555;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-bottom:8px}
.maker{color:var(--accent-dark);display:inline-block;padding:8px 0}
.offer,.report{padding:10px;background:#fafafa;border:1px solid #ddd;border-radius:4px;margin:10px 0}
.affiliate code,.secret code{display:block;overflow-wrap:anywhere;font-size:12px;margin-top:5px}
button{min-height:44px;border:0;border-radius:4px;background:var(--accent);color:#30101e;padding:11px 14px;font:inherit;cursor:pointer}
button:disabled{background:#bbb}
.warn{color:#8e1842;background:var(--accent-pale);padding:10px}
.empty{color:#777;text-align:center;padding:18px 0}
.cart>div{padding:8px 0;border-bottom:1px solid #eee}
.cart b{float:right;margin-right:10px}
.cart button{background:white;color:var(--accent-dark);border:1px solid var(--accent);padding:4px 7px;font-size:12px;min-height:32px}
.block{display:block;text-decoration:none;color:#222;border:1px solid #ddd;border-radius:4px;padding:10px;margin:6px 0}
dl{font-size:12px;border-top:1px solid #eee;padding-top:8px}
dt{float:left;color:#777;width:75px}
dd{margin:0 0 7px}
form{display:grid;gap:7px}
input,textarea,select{width:100%;min-height:44px;padding:10px;border:1px solid #bbb;border-radius:3px;font:inherit}
label{font-size:12px;color:#666}
.secret{border:1px dashed #e6a2a6;padding:10px;font-size:12px;margin-top:16px}
.secret small{display:block;margin-top:5px}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:480px;width:100%;height:62px;background:#fff;border-top:1px solid #e8e8e8;display:flex;justify-content:space-around}
.bottom-nav a{color:#555;text-decoration:none;text-align:center;font-size:10px;padding:7px 0;width:25%;min-height:44px}
.bottom-nav a.active{color:var(--accent-dark);font-weight:700}
.bottom-nav svg,.bottom-nav span{display:block;margin:auto}
.bottom-nav span{margin-top:3px}
.breadcrumb{display:flex;align-items:flex-start;gap:4px;padding:0 14px;border-bottom:1px solid #eee;background:#fff}
.breadcrumb ol{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:2px 5px;margin:0;padding:0;list-style:none;min-height:44px}
.breadcrumb li{display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.breadcrumb li+li::before{content:"/";color:#999;margin-right:5px}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-dark);text-decoration:none}
.crumb-back{display:inline-flex;align-items:center;gap:2px;min-width:44px;min-height:44px;padding:0 6px;background:transparent;color:#555}
.crumb-back svg{width:20px;height:20px}
.crumb-back span{font-size:12px}
a,button,input,textarea,select{transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s}
a:hover,.card:hover,.makers a:hover,.list a:hover,.block:hover{border-color:var(--accent);color:var(--accent-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ffb8d2;outline-offset:2px}
.sample-gallery{margin:2px 0 10px;border:1px solid #f0dbe4;border-radius:5px;padding:7px}
.sample-note{margin:0 0 5px;color:#8e1842;font-size:12px}
.sample-main{display:block;width:100%;aspect-ratio:8/5;object-fit:cover;border-radius:3px;background:var(--accent-pale)}
.sample-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:#666;font-size:12px}
.sample-thumbs{display:flex;gap:5px}
.sample-thumb{width:52px;min-width:44px;min-height:44px;height:44px;padding:2px;background:#fff;border:2px solid transparent;border-radius:4px}
.sample-thumb.selected{border-color:var(--accent)}
.sample-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}

.creator-tabs{overflow-x:auto}
.creator-tabs a{width:auto;min-width:72px;min-height:44px;flex:0 0 auto}
.monitor-banner{position:sticky;top:58px;z-index:2;background:var(--accent-pale);border-bottom:1px solid var(--accent);padding:8px 14px;color:#8e1842}
.monitor-banner small{margin-left:8px}
.monitor-banner button{float:right;min-height:32px;padding:5px 8px;font-size:12px}
.demo-switch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 14px;background:#fff}
.demo-switch small{width:100%;color:#666}
.demo-switch button[data-role]{min-height:44px;padding:6px 10px;background:#fff;border:1px solid #d7d7d7;color:#333}
.demo-switch button[data-role].selected{background:var(--accent);border-color:var(--accent);color:#6b1635;font-weight:700}
.demo-switch button[data-role]:focus-visible{outline:3px solid var(--accent-dark);outline-offset:2px}
.creator-notice{padding:10px;background:var(--accent-pale);color:#8e1842}
.creator-tabs+*{margin-top:0}
#creator-product{margin-top:8px}
#creator-product label{display:grid;gap:5px}
#creator-affiliate input[type="checkbox"]{width:auto;min-height:auto}

.monitor-banner button{min-height:44px}
.monitor-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;position:sticky;top:0;z-index:3}
.monitor-banner small{margin-left:0}
.monitor-banner button{float:none;margin-left:auto;flex:none;min-height:44px}

.creator-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;overflow:hidden}
.creator-tabs a{width:auto;min-width:0;min-height:44px;padding:10px 2px;flex:initial;white-space:nowrap;font-size:11px}
@media (max-width:390px){.creator-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.creator-tabs a{padding:10px 2px;font-size:14px}
}

/* Public playback module */
.fanstar-player-title{margin:12px 0 8px;font-size:20px}.fanstar-player{margin:0 0 16px}.fanstar-player-stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}.fanstar-video{display:block;width:100%;height:100%;background:#000}.fanstar-play-action{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:112px;background:#fff;color:#24131d;border:2px solid #fff;font-weight:700}.fanstar-play-action[hidden]{display:none}.fanstar-player-status{min-height:1.5em;margin:7px 0;color:#555;font-size:13px}.fanstar-quality{display:inline-flex;align-items:center;gap:6px;color:#555;font-size:13px}.fanstar-quality select{width:auto;min-height:36px;padding:5px 8px}
.fanstar-demo-label{margin:8px 0 0;color:#8e1842;font-size:13px;font-weight:700}

/* Purchased library */
.library-chips,.library-bulk{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;overflow:visible}.library-chips button,.library-bulk button{min-height:44px}.library-new{display:flex;grid-template-columns:1fr auto;gap:8px}.library-manage{margin:8px 0}.library-manage form{margin:8px 0}.library-manage summary{min-height:44px;display:flex;align-items:center;color:var(--accent-dark)}.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.library-card{position:relative;border:1px solid #ddd;border-radius:5px;padding:6px}.library-play{display:block;color:#242424;text-decoration:none}.library-thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,#f7f5f6,#ffeaf2);border-radius:3px;overflow:hidden}.library-thumb img{width:100%;height:100%;object-fit:cover}.library-thumb i{position:absolute;inset:auto 6px 6px;background:rgba(48,16,30,.78);color:#fff;border-radius:3px;padding:5px;text-align:center;font-style:normal}.library-play b,.library-play small{display:block;margin-top:4px}.library-play small{color:#777}.library-check{display:flex;align-items:center;gap:6px;min-height:44px}.library-check input{width:20px;min-height:20px}.library-message{color:var(--accent-dark);margin:8px 0}.library-confirm{display:block;margin-top:8px}