:root{
    --bg:#f4f7f2;
    --bg-accent:#d8eee6;
    --surface:#fbfcf7;
    --surface-strong:#ffffff;
    --text:#16201f;
    --muted:#63716b;
    --line:rgba(22,32,31,.12);
    --shadow:0 16px 42px rgba(31,67,62,.13);
    --brand:#d95a3d;
    --brand-strong:#bd432b;
    --brand-soft:#ffe4dc;
    --accent:#157c74;
    --accent-soft:#dff3ee;
    --photo-badge-bg:rgba(255,255,255,.94);
    --photo-badge-text:#16201f;
    --photo-badge-border:rgba(255,255,255,.82);
    --close:#4d5b55;
    --panel:rgba(255,255,255,.82);
    --panel-strong:rgba(255,255,255,.94);
    --chip:rgba(255,255,255,.92);
    --success:#287e5a;
    --warning:#a5601e;
    --theme-panel:linear-gradient(145deg,#ffffff,#edf7f2);
    --theme-hero:linear-gradient(135deg,#f6faf6 0%,#e2f2eb 48%,#ffe2d7 100%);
    --result-card:linear-gradient(160deg,rgba(255,255,255,.96),rgba(231,244,238,.9));
}
*{box-sizing:border-box;transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease,transform .2s ease,box-shadow .2s ease;}
html,body{margin:0;padding:0;min-height:100%;font-family:"Manrope",system-ui,sans-serif;background:var(--bg);color:var(--text);}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--theme-hero);}
body::after{content:"";position:fixed;inset:auto 0 0 0;height:10px;z-index:-1;background:linear-gradient(90deg,var(--brand),var(--accent),#e2b84b);}
a{text-decoration:none;color:inherit;}
button,input,textarea{font:inherit;}
button{cursor:pointer;}
main{min-height:calc(100vh - 220px);}
header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 24px;max-width:1220px;margin:0 auto;width:min(94%,1220px);border-bottom:1px solid var(--line);}
.brand-lockup{display:flex;align-items:center;gap:12px;min-width:0;}
.logo{width:52px;height:52px;background:var(--panel-strong);padding:5px;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 22px rgba(16,38,35,.12);flex:0 0 auto;overflow:hidden;}
.logo img{width:100%;height:100%;display:block;object-fit:cover;border-radius:10px;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.brand-text strong{font-family:"Fraunces",serif;font-size:24px;color:var(--text);white-space:nowrap;}
.brand-text small{font-size:12px;color:var(--muted);font-weight:700;}
.menu{display:flex;align-items:center;gap:4px;justify-content:flex-end;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:0 8px 18px rgba(0,0,0,.05);}
.header-action{border:1px solid transparent;background:transparent;color:var(--muted);padding:0;border-radius:999px;font-size:14px;font-weight:800;}
.header-action:hover{background:var(--panel-strong);border-color:var(--line);color:var(--text);transform:none;}
.header-action.accent{background:linear-gradient(180deg,var(--brand),var(--brand-strong));color:#fff;border-color:transparent;box-shadow:none;}
.icon-action{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:0;position:relative;}
.theme-icon::before{content:"";width:16px;height:16px;border-radius:50%;background:linear-gradient(90deg,var(--muted) 0 50%,var(--surface-strong) 50% 100%);border:2px solid currentColor;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);}
.premium-icon::before{content:"";width:17px;height:17px;background:currentColor;clip-path:polygon(50% 3%,61% 35%,95% 35%,68% 55%,79% 90%,50% 69%,21% 90%,32% 55%,5% 35%,39% 35%);}

.footer-shell{max-width:1220px;margin:36px auto 0;padding:18px 24px;width:min(94%,1220px);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);}
.footer-brand strong{display:block;font-size:16px;margin-bottom:0;}
.footer-brand p{max-width:520px;color:var(--muted);margin:0;line-height:1.6;}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;}
.footer-link{border:none;background:transparent;color:var(--muted);padding:0;font-size:14px;}
.footer-link:hover,.footer-link-anchor:hover{color:var(--text);}

.app-modal-root{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(34,20,16,.54);z-index:1200;}
.app-modal-root.is-open{display:flex;}
.app-modal{width:min(92vw,760px);max-height:min(88vh,900px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px rgba(16,28,26,.24);padding:28px;position:relative;}
.modal-close{position:absolute;top:14px;right:16px;border:none;background:transparent;color:var(--close);font-size:32px;line-height:1;padding:0 4px;opacity:.82;}
.modal-close:hover{color:var(--text);}
.modal-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-strong);background:var(--brand-soft);padding:8px 12px;border-radius:999px;}
.modal-title{font-family:"Fraunces",serif;font-size:32px;line-height:1.05;margin:18px 0 10px;}
.modal-copy{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 24px;}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.btn-primary,.btn-secondary,.btn-ghost{border:none;border-radius:14px;padding:13px 17px;font-weight:800;}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-strong));color:#fff;}
.btn-secondary{background:var(--accent-soft);color:var(--accent);}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line);}
.btn-primary[disabled],.btn-secondary[disabled],.btn-ghost[disabled]{opacity:.55;cursor:default;}

.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.shop-card{background:var(--theme-panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;min-height:220px;}
.shop-card.active{border-color:rgba(43,138,87,.35);box-shadow:inset 0 0 0 1px rgba(43,138,87,.22);}
.shop-card h3{margin:0 0 8px;font-size:22px;font-family:"Fraunces",serif;}
.shop-card p{margin:0 0 14px;color:var(--muted);line-height:1.6;font-size:14px;}
.shop-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:10px;}
.price-badge{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;background:var(--chip);border:1px solid var(--line);font-weight:800;}
.discount-panel{margin-top:18px;padding:16px;background:var(--panel-strong);border:1px solid var(--line);border-radius:18px;}
.discount-panel form{display:flex;gap:12px;flex-wrap:wrap;}
.discount-panel input{flex:1;min-width:200px;border:1px solid var(--line);background:var(--surface-strong);color:var(--text);padding:14px 16px;border-radius:14px;}
.discount-note{margin-top:10px;font-size:13px;color:var(--muted);}

.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.theme-tile{padding:18px;border-radius:18px;border:1px solid var(--line);text-align:left;background:var(--panel-strong);position:relative;overflow:hidden;}
.theme-tile strong{display:block;font-size:18px;margin-bottom:8px;font-family:"Fraunces",serif;}
.theme-tile span{display:block;color:var(--muted);font-size:13px;line-height:1.5;}
.theme-tile.active{box-shadow:inset 0 0 0 2px rgba(223,108,79,.28);}
.theme-tile.locked{opacity:.76;}
.theme-preview-warm{background:linear-gradient(145deg,#f8faf4,#dcefe7);}
.theme-preview-rose{background:linear-gradient(145deg,#fff4f8 0%,#ffc6dc 48%,#ffb071 100%);color:#351823;}
.theme-preview-noir{background:linear-gradient(145deg,#101514,#2b342f);color:#fff;}
.theme-preview-noir span{color:rgba(255,255,255,.78);}
.theme-preview-aurora{background:linear-gradient(145deg,#081d34 0%,#0fb7c7 46%,#ff6f59 100%);color:#fff;}

.status-badge,.lock-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.status-badge{background:rgba(43,138,87,.12);color:var(--success);}
.lock-badge{background:rgba(35,24,21,.08);color:var(--text);}

.legal-copy h3{margin:22px 0 8px;font-size:18px;}
.legal-copy p{margin:0 0 14px;line-height:1.7;color:var(--muted);}

.page-hero{max-width:1220px;margin:18px auto 0;padding:0 24px;width:min(94%,1220px);}
.hero-banner{min-height:330px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;position:relative;overflow:hidden;border-radius:28px;padding:34px;background:linear-gradient(90deg,rgba(13,22,23,.9),rgba(13,22,23,.58) 44%,rgba(13,22,23,.08)),url("../images/CharacterCanvas-Hero-01.png") center/cover no-repeat;box-shadow:0 22px 60px rgba(22,32,31,.18);}
.hero-banner::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(0deg,rgba(0,0,0,.34),rgba(0,0,0,0));pointer-events:none;}
.hero-content{position:relative;z-index:1;max-width:620px;color:#fff;}
.hero-content .modal-kicker{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);}
.hero-banner h1{font-family:"Fraunces",serif;margin:16px 0 10px;font-size:52px;line-height:1;max-width:680px;}
.hero-banner p{max-width:560px;margin:0;color:rgba(255,255,255,.84);line-height:1.55;font-size:17px;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.hero-stats{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:10px;width:178px;}
.hero-stats span{display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:12px 14px;color:#fff;backdrop-filter:blur(10px);font-size:13px;font-weight:800;}
.hero-stats strong{font-family:"Fraunces",serif;font-size:20px;}

.result-premium-panel{margin-top:26px;background:var(--result-card);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--shadow);}
.result-premium-panel h3{margin:0 0 10px;font-family:"Fraunces",serif;font-size:28px;}
.result-premium-panel p{margin:0 0 14px;color:var(--muted);line-height:1.7;}
.insight-list{display:grid;gap:12px;margin-top:16px;}
.insight-item{background:var(--panel-strong);border:1px solid var(--line);border-radius:16px;padding:16px;}
.insight-item strong{display:block;margin-bottom:8px;}

.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.result-export-card{margin-top:18px;border:1px dashed rgba(35,24,21,.15);border-radius:22px;padding:18px;background:rgba(255,255,255,.6);}

.premium-inline-trigger.is-locked{opacity:.8;}

.theme-rose{--bg:#fff6f8;--bg-accent:#ffd9e6;--surface:#fffafb;--surface-strong:#ffffff;--text:#2f1721;--muted:#765c66;--line:rgba(110,38,63,.13);--shadow:0 18px 46px rgba(166,58,91,.14);--brand:#e85d8d;--brand-strong:#c83e72;--brand-soft:#ffe2ed;--accent:#b8552f;--accent-soft:#ffe8d7;--panel:rgba(255,255,255,.84);--panel-strong:rgba(255,255,255,.96);--chip:rgba(255,255,255,.92);--photo-badge-bg:rgba(255,255,255,.94);--photo-badge-text:#351823;--photo-badge-border:rgba(255,255,255,.72);--close:#6e2a45;--success:#257e60;--warning:#a75d19;--theme-panel:linear-gradient(145deg,#ffffff 0%,#ffeaf1 62%,#fff0df 100%);--theme-hero:linear-gradient(135deg,#fff9fb 0%,#ffddea 50%,#ffd4ac 100%);--result-card:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,233,241,.92));}
.theme-noir{--bg:#111816;--bg-accent:#1b2824;--surface:#17201e;--surface-strong:#202c28;--text:#f5f1e8;--muted:#c6d0ca;--line:rgba(245,241,232,.16);--shadow:0 18px 50px rgba(0,0,0,.34);--brand:#e5ad27;--brand-strong:#c88f12;--brand-soft:#332914;--accent:#63c7b3;--accent-soft:#17352f;--panel:rgba(28,39,36,.86);--panel-strong:rgba(35,48,44,.94);--chip:rgba(245,241,232,.1);--photo-badge-bg:rgba(247,244,232,.95);--photo-badge-text:#101514;--photo-badge-border:rgba(255,255,255,.7);--close:#f5f1e8;--success:#8fdaa4;--warning:#e4b65a;--theme-panel:linear-gradient(145deg,#22302c,#141c1a);--theme-hero:linear-gradient(135deg,#111816 0%,#20342e 58%,#423513 100%);--result-card:linear-gradient(160deg,rgba(32,44,40,.96),rgba(18,25,23,.92));}
.theme-aurora{--bg:#071a2b;--bg-accent:#0f3449;--surface:#10283d;--surface-strong:#17344d;--text:#f7fcff;--muted:#b8d7df;--line:rgba(170,239,255,.22);--shadow:0 22px 58px rgba(0,13,27,.38);--brand:#ff715b;--brand-strong:#f04f3d;--brand-soft:rgba(255,113,91,.18);--accent:#25d6dc;--accent-soft:rgba(37,214,220,.16);--panel:rgba(13,42,61,.78);--panel-strong:rgba(18,55,78,.9);--chip:rgba(255,255,255,.12);--photo-badge-bg:rgba(7,26,43,.88);--photo-badge-text:#ffffff;--photo-badge-border:rgba(137,235,255,.42);--close:#f7fcff;--success:#80efbd;--warning:#ffd166;--theme-panel:linear-gradient(145deg,rgba(21,65,91,.94) 0%,rgba(13,42,61,.9) 52%,rgba(255,113,91,.2) 100%);--theme-hero:radial-gradient(circle at 78% 22%,rgba(255,113,91,.38),rgba(255,113,91,0) 28%),radial-gradient(circle at 18% 18%,rgba(37,214,220,.42),rgba(37,214,220,0) 32%),linear-gradient(135deg,#071a2b 0%,#0c2d45 52%,#151a3a 100%);--result-card:linear-gradient(160deg,rgba(18,55,78,.94),rgba(9,31,49,.92));}

.theme-aurora .hero-banner{background:linear-gradient(90deg,rgba(7,26,43,.92),rgba(7,26,43,.5) 44%,rgba(7,26,43,.04)),url("../images/CharacterCanvas-Hero-01.png") center/cover no-repeat;box-shadow:0 28px 78px rgba(37,214,220,.18),0 20px 54px rgba(0,0,0,.34);}
.theme-aurora .hero-content .modal-kicker,
.theme-aurora .modal-kicker{background:rgba(37,214,220,.16);border-color:rgba(137,235,255,.35);color:#c9fbff;}
.theme-aurora .shop-card,
.theme-aurora .p_1_m .t,
.theme-aurora .app-modal{box-shadow:0 18px 44px rgba(0,13,27,.28),inset 0 1px 0 rgba(255,255,255,.08);}
.theme-aurora .btn-secondary,
.theme-aurora .p_1_m .t.free-item .bu{background:rgba(37,214,220,.16);color:#9df9ff;border-color:rgba(137,235,255,.28);}

.app-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:rgba(35,24,21,.92);color:#fff;padding:12px 16px;border-radius:999px;opacity:0;pointer-events:none;z-index:1300;}
.app-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}

@media only screen and (max-width:980px){
    .shop-grid,.settings-grid{grid-template-columns:1fr;}
    .hero-banner{min-height:360px;align-items:flex-start;flex-direction:column;justify-content:flex-end;}
    .hero-banner h1{font-size:42px;}
    .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;}
    .hero-stats span{display:block;}
}
@media only screen and (max-width:820px){
    header{padding:12px 18px;}
    .logo{width:48px;height:48px;margin:0;}
    .brand-text strong{font-size:21px;}
    .menu{justify-content:flex-end;}
}
@media only screen and (max-width:640px){
    .app-modal{padding:22px 18px;}
    .modal-title{font-size:28px;}
    .hero-banner{min-height:420px;border-radius:22px;padding:22px;background-position:center;}
    .hero-banner h1{font-size:34px;}
    .hero-stats{grid-template-columns:1fr;}
    .footer-shell{padding:0 18px;}
    .brand-text small{display:none;}
    .icon-action{width:34px;height:34px;}
}