700&family=Noto+Sans+JP:wght@300;400;500&display=swap');
:root{--gold:#d8b77a;--gold2:#f3dfb0;--ink:#0d0b0a;--card:rgba(24,20,17,.72);--line:rgba(216,183,122,.28);--text:#efe6d6;--mute:#a59a88;--rose:#e7b9b0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--ink);color:var(--text);font:400 15px/1.6 'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif,sans-serif;letter-spacing:.02em}
body.bg{background:#0d0b0a url(/static/img/bg_hero.webp) center/cover fixed}
body.bg::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(13,11,10,.55),rgba(13,11,10,.92));z-index:-1}
body.login{background:#0d0b0a url(/static/img/bg_login.webp) center/cover fixed}
a{color:var(--gold);text-decoration:none}
.serif,h1,h2,h3{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif,serif;font-weight:500;letter-spacing:.08em}
.gold{background:linear-gradient(100deg,#b8925a,#f6e3b4 45%,#c9a265 70%,#f3dfb0);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:560px;margin:0 auto;padding:18px 16px 110px}
.wide{max-width:1180px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.top{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 18px}
.brand{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif,serif;font-size:20px;letter-spacing:.25em}
.orn{display:block;margin:6px auto 14px;width:180px;opacity:.85;mix-blend-mode:screen}
input,textarea,select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:13px 14px;font:inherit;outline:none;transition:.25s}
input:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(216,183,122,.12)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--gold);flex:none;margin:2px 0 0}
input[type=time]{color-scheme:dark}
label.f{display:block;font-size:12px;color:var(--mute);margin:14px 0 6px;letter-spacing:.12em}
.chk{display:flex;gap:10px;font-size:13px;color:var(--text);margin:12px 0;align-items:flex-start}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 22px;font:500 15px 'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;letter-spacing:.12em;cursor:pointer;transition:transform .2s,box-shadow .3s,opacity .2s;color:#1b140b;background:linear-gradient(120deg,#c8a165,#f3dfb0 50%,#c8a165);background-size:200% 100%;box-shadow:0 8px 30px rgba(216,183,122,.25)}
.btn:hover{background-position:100% 0}.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:transparent;color:#e89a8f;border:1px solid rgba(232,154,143,.4);box-shadow:none}
.btn.sm{padding:8px 14px;font-size:13px}.full{width:100%}
.tabs{display:flex;background:rgba(255,255,255,.04);border-radius:999px;padding:4px;margin-bottom:18px;border:1px solid var(--line)}
.tabs a{flex:1;text-align:center;padding:10px;border-radius:999px;color:var(--mute);transition:.3s}
.tabs a.on{background:rgba(216,183,122,.16);color:var(--gold2)}
.err{background:rgba(232,154,143,.12);border:1px solid rgba(232,154,143,.35);color:#f2b8ae;padding:10px 14px;border-radius:12px;font-size:13px}
.ok{background:rgba(216,183,122,.12);border:1px solid var(--line);color:var(--gold2);padding:10px 14px;border-radius:12px;font-size:13px;animation:fade .6s}
.fade{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* calendar */
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mhead h2{margin:0;font-size:24px}
.arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);font-size:18px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wd{text-align:center;font-size:11px;color:var(--mute);letter-spacing:.15em;padding-bottom:4px}
.wd.sun{color:#d99}.wd.sat{color:#9bc}
.day{position:relative;aspect-ratio:1/1.12;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);padding:6px;cursor:pointer;transition:transform .2s,background .3s,border-color .3s;display:flex;flex-direction:column;overflow:hidden}
.day:active{transform:scale(.94)}
.day .n{font-size:14px}
.day.out{opacity:.28}
.day.today{border-color:var(--gold)}
.day.today .n{color:var(--gold2);font-weight:500}
.day.on{background:linear-gradient(160deg,rgba(216,183,122,.38),rgba(216,183,122,.10));border-color:rgba(216,183,122,.6)}
.day .t{margin-top:auto;font-size:9.5px;color:var(--gold2);line-height:1.2;white-space:nowrap}
.day .dot{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--rose);box-shadow:0 0 8px var(--rose)}
.day.pop{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.1)}}
.stat{display:flex;gap:10px;margin:16px 0}
.stat div{flex:1;text-align:center;padding:12px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.stat b{display:block;font:500 22px 'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;color:var(--gold2)}
.stat span{font-size:11px;color:var(--mute);letter-spacing:.1em}
/* sheet */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .35s;z-index:40;backdrop-filter:blur(3px)}
.veil.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:linear-gradient(180deg,#1d1814,#120f0d);border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0;padding:10px 20px 28px;transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.2,1);z-index:50;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
.sheet.show{transform:none}
.grab{width:44px;height:5px;border-radius:9px;background:rgba(255,255,255,.18);margin:4px auto 14px}
.switch{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.tog{width:54px;height:32px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;transition:.3s;cursor:pointer;flex:none}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:.35s cubic-bezier(.3,1.4,.5,1)}
.tog.on{background:linear-gradient(120deg,#c8a165,#f3dfb0)}.tog.on::after{left:25px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{padding:6px 12px;border-radius:99px;border:1px solid var(--line);font-size:12px;color:var(--gold2);cursor:pointer;background:transparent}
.fields{transition:opacity .3s,max-height .45s;overflow:hidden;max-height:600px}
.fields.off{opacity:.25;pointer-events:none}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;background:rgba(30,25,20,.95);border:1px solid var(--line);color:var(--gold2);padding:10px 20px;border-radius:99px;transition:.4s;z-index:60;font-size:13px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(13,11,10,.96),rgba(13,11,10,.7));backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:30}
.nav a,.nav button{flex:1;max-width:170px;text-align:center;color:var(--mute);font-size:11px;letter-spacing:.12em;padding:6px;background:none;border:0;font-family:inherit;cursor:pointer}
.nav a.on{color:var(--gold2)}.nav i{display:block;font-style:normal;font-size:19px;margin-bottom:2px}
/* profile */
.avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(216,183,122,.12),0 10px 30px rgba(0,0,0,.5)}
.ph{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph figure{margin:0;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.ph figure:hover img{transform:scale(1.05)}
.ph form{position:absolute;top:6px;right:6px}
.ph button{background:rgba(0,0,0,.6);border:0;color:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer}
.drop{display:block;border:1.5px dashed var(--line);border-radius:16px;padding:18px;text-align:center;color:var(--mute);font-size:13px;cursor:pointer;transition:.3s}
.drop:hover{border-color:var(--gold);color:var(--gold2)}
.drop input{display:none}
.notice{font-size:12.5px;color:var(--gold2);background:rgba(216,183,122,.08);border-left:3px solid var(--gold);padding:10px 12px;border-radius:8px;line-height:1.7}
.lock{font-size:12px;color:var(--mute)}
.sec{margin-top:18px}
.sec h3{font-size:16px;margin:0 0 12px}
/* admin */
table{width:100%;border-collapse:collapse;font-size:14px}
th{color:var(--mute);font-weight:400;font-size:12px;text-align:left;padding:10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
tr:hover td{background:rgba(216,183,122,.04)}
.av-s{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--gold)}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;border:1px solid var(--line);color:var(--gold2)}
.pill.off{color:#e89a8f;border-color:rgba(232,154,143,.4)}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.cols>*{min-width:0}.slist div{overflow-wrap:anywhere;gap:8px}
@media(min-width:900px){.cols{grid-template-columns:340px 1fr}}
.langsw a{padding:4px 10px;border-radius:99px;font-size:12px;color:var(--mute)}.langsw a.on{background:rgba(216,183,122,.18);color:var(--gold2)}
@media(max-width:700px){.hide-m{display:none}}
/* public */
.strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip a{flex:none;scroll-snap-align:start;width:62px;padding:10px 0;text-align:center;border-radius:16px;border:1px solid var(--line);color:var(--text);transition:.3s}
.strip a b{display:block;font:500 20px 'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif}.strip a small{font-size:11px;color:var(--mute)}
.strip a.on{background:linear-gradient(160deg,rgba(216,183,122,.4),rgba(216,183,122,.1));border-color:var(--gold)}
.strip a .c{display:block;font-size:10px;color:var(--gold2)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.cards{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.cards{grid-template-columns:repeat(5,1fr)}}
.gcard{display:block;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line);transition:transform .35s,box-shadow .35s;color:var(--text)}
.gcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px var(--gold)}
.gcard img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.gcard div{padding:10px 12px 12px}.gcard h4{margin:0;font:500 15px 'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;letter-spacing:.08em}
.gcard span{font-size:12px;color:var(--gold2)}
body.embed{background:transparent!important}body.embed::before{display:none}
.empty{text-align:center;color:var(--mute);padding:40px}
.hero-g{text-align:center}
.slist div{display:flex;justify-content:space-between;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
html:has(body.embed){background:transparent}
.num{font-style:normal;color:var(--gold);font-size:.85em;margin-right:2px}
.gnote{margin:6px 0 0;font-size:11.5px;color:var(--text);opacity:.85;line-height:1.5}
.datepick{display:flex;gap:10px;align-items:center;justify-content:center;margin:0 auto 12px;max-width:360px}
.datepick span{font-size:12px;color:var(--mute);white-space:nowrap}.datepick input{color-scheme:dark;max-width:190px;padding:9px 12px}
@media(max-width:600px){.row2{grid-template-columns:1fr 1fr!important}.row2>*{min-width:0}.row2 input{width:100%;min-width:0}}
/* ===== Sunny light theme (2026-10-30) ===== */
:root{--gold:#c99a3c;--gold2:#b07f22;--ink:#fffaf5;--card:#ffffff;--line:#f3d6dc;--text:#3a2e2a;--mute:#9a8a84;--rose:#ff7a8a;--sakura:#ffd6de;--coral:#ff8a6b}
html,body{background:var(--ink);color:var(--text)}
body.bg,body.login{background:linear-gradient(180deg,#fff3f5 0%,#fffaf2 45%,#fff 100%) fixed}
body.bg::before{background:radial-gradient(circle at 85% 0%,rgba(255,214,222,.6),transparent 45%),radial-gradient(circle at 0% 30%,rgba(255,226,170,.35),transparent 40%)}
.gold{background:linear-gradient(100deg,#e0688a,#d99a3a 60%,#ff8a6b);-webkit-background-clip:text;background-clip:text;color:transparent}
.card{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(232,120,140,.12);backdrop-filter:none}
input,textarea,select{background:#fffdfb;border:1px solid #f0d9d2;color:var(--text)}
input[type=time],input[type=date],.datepick input{color-scheme:light!important}
input:focus,textarea:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(255,122,138,.15)}
.btn{color:#fff;background:linear-gradient(120deg,#ff7a8a,#ffa36b 55%,#ff7a8a);background-size:200% 100%;box-shadow:0 8px 22px rgba(255,122,138,.3)}
.btn.ghost{color:#e0688a;border-color:#f6c6cf;background:#fff}
.btn.danger{color:#e2574c;border-color:#f7c3bd;background:#fff}
.err{background:#fff0ef;color:#c84a40;border-color:#f7c3bd}.ok{background:#fff7e6;color:#a8731a;border-color:#f5dca6}
.arrow{border-color:var(--line);color:#e0688a;background:#fff}
.wd.sun{color:#e2574c}.wd.sat{color:#3d8fd6}
.day{background:#fff8f6;border:1px solid #f6e4df}
.day.today{border-color:var(--rose);box-shadow:0 0 0 2px rgba(255,122,138,.2)}.day.today .n{color:#e0688a}
.day.on{background:linear-gradient(160deg,#ffe1e7,#fff1dc);border-color:#ffb3c0}
.day .t{color:#b5651d}.day .dot{background:var(--coral);box-shadow:none}
.day .hol{color:#e2574c!important}.day.hd .n{color:#e2574c!important}.day .ord{background:#ffb347!important;color:#fff!important}
.stat div{background:#fff8f6;border-color:var(--line)}.stat b{color:#e0688a}
.veil{background:rgba(80,40,40,.25)}
.sheet{background:#fff;border-color:var(--line);box-shadow:0 -10px 40px rgba(232,120,140,.18)}
.grab{background:#f0d9d2}
.switch{background:#fff8f6;border-color:var(--line)}.tog{background:#eadbd6}.tog.on{background:linear-gradient(120deg,#ff7a8a,#ffa36b)}
.chip{color:#e0688a;border-color:#f6c6cf;background:#fff}
.toast{background:#fff;color:#e0688a;border-color:var(--line);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.nav{background:rgba(255,255,255,.96);border-top:1px solid var(--line)}.nav a.on{color:#e0688a}
.avatar{border-color:#ffb3c0;box-shadow:0 0 0 6px rgba(255,214,222,.6),0 8px 20px rgba(232,120,140,.18)}
.av-s{border-color:#ffb3c0}
.drop{border-color:#f3c6cf;color:var(--mute);background:#fffaf8}.drop:hover{color:#e0688a;border-color:var(--rose)}
.notice{color:#8a5a1a;background:#fff7e6;border-left-color:#ffb347}
td{border-bottom:1px solid #f6e8e4}tr:hover td{background:#fff6f4}
.pill{color:#b07f22;border-color:#f5dca6;background:#fffaf0}.pill.off{color:#e2574c;border-color:#f7c3bd}
.langsw a.on{background:#ffe1e7;color:#e0688a}
.slist div{border-bottom:1px solid #f6e8e4}
.tabs{background:#fff;border-color:var(--line)}.tabs a.on{background:#ffe1e7;color:#e0688a}
.strip a{background:#fff}.strip a.on{background:linear-gradient(160deg,#ffe1e7,#fff1dc);border-color:var(--rose)}.strip a .c{color:#e0688a}
.gcard{background:#fff}.gcard span{color:#b5651d}
.orn{mix-blend-mode:multiply;opacity:.6}
/* girl page extras */
.ordc{background:#fffaf2!important;border-color:#f5dca6!important}.ordc b{color:#e0688a!important}.ordc .or{border-top-color:#f6ebe0!important}
.omap{background:linear-gradient(120deg,#ff7a8a,#ffa36b)!important;color:#fff!important}
.shhol{color:#e2574c!important}.legend i{color:#e2574c!important}.legend em{background:#ffb347!important;color:#fff!important}
.avbtn{background:#fff!important;border:2px dashed #ffb3c0!important;color:#e0688a!important}.avbtn small{color:var(--mute)!important}
.avbtn.on{background:linear-gradient(135deg,#ff7a8a,#ffb347)!important;border:2px solid transparent!important;color:#fff!important;box-shadow:0 10px 26px rgba(255,122,138,.4)!important}.avbtn.on small{color:#fff!important}
.avbtn .avdot{background:#ddd}.avbtn.on .avdot{background:#fff;animation:pulse2 1.6s infinite}@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
/* ===== Girl side: cute rounded (Zen Maru Gothic, OFL, self-hosted subset) ===== */
body.girl,body.girl input,body.girl textarea,body.girl button,body.girl .btn,body.girl .serif,body.girl h1,body.girl h2,body.girl h3,body.girl .stat b,body.girl .strip a b{font-family:'ZenMaru','Hiragino Maru Gothic ProN','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif,sans-serif!important;letter-spacing:.04em}
body.girl{background:linear-gradient(180deg,#fff0f4 0%,#fff8ef 50%,#fff 100%) fixed}
body.girl .gold{background:none;color:#f0668a;-webkit-text-fill-color:#f0668a;font-weight:700}
body.girl .mhead h2::before{content:"✿ ";color:#ffb3c4;font-size:.7em}body.girl .mhead h2::after{content:" ✿";color:#ffb3c4;font-size:.7em}
body.girl .top .serif{font-weight:700;color:#5a3a3a}body.girl .top .serif::after{content:" ♡";color:#ff8fab;font-size:.8em}
body.girl .card{border-radius:28px;border:2px solid #ffe0e8}
body.girl .btn{border-radius:999px;font-weight:700}
body.girl .day{border-radius:16px;aspect-ratio:auto;min-height:64px;padding:5px 4px 4px;overflow:visible}
body.girl .day .n{font-weight:700}
body.girl .day .t{font-size:9px;line-height:1.25;margin-top:auto;white-space:nowrap;letter-spacing:0}
body.girl .day .hol{position:static!important;margin-top:2px;font-size:8px}
body.girl .day.on{background:linear-gradient(160deg,#ffe3ea,#fff3e0)}
body.girl .day.on::after{content:"♥";position:absolute;left:4px;bottom:-6px;font-size:9px;color:#ff8fab}
body.girl .stat div{border-radius:22px;border:2px solid #ffe0e8}
body.girl .avbtn{border-radius:26px!important}
body.girl .avbtn b::before{content:"♡ "}body.girl .avbtn.on b::before{content:"♥ "}
body.girl .ordc{border-radius:20px!important;border-width:2px!important}
body.girl .ordc .oh::after{content:" ✿";color:#ffb3c4}
body.girl .chip,body.girl .switch{border-radius:999px}
body.girl .sheet{border-radius:32px 32px 0 0}
body.girl .nav a.on i{color:#ff8fab}
body.girl .grid{grid-template-columns:repeat(7,minmax(0,1fr))}body.girl .day .t{overflow:hidden;text-overflow:clip}