:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#f4f3ef;--card:#fff;--tx:#14182b;--mu:#6b6f80;--ac:#1f2a5c;--ac2:#b8924a;--acx:#fff;--bd:#e4e2da;--in:#faf9f6;--ok:#16794a;--er:#b3261e;--sh:0 1px 2px rgba(20,24,43,.05),0 12px 32px -12px rgba(20,24,43,.12);--hero:linear-gradient(135deg,#141b3f,#2a3a7d)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d0f1a;--card:#161a2c;--tx:#eceef8;--mu:#9296ad;--ac:#c9a45c;--ac2:#c9a45c;--acx:#12141f;--bd:#262b45;--in:#0f1222;--ok:#5fd39b;--er:#ff8a80;--sh:0 12px 32px -12px rgba(0,0,0,.6);--hero:linear-gradient(135deg,#141b3f,#222f6b)}}
:root[data-theme="dark"]{--bg:#0d0f1a;--card:#161a2c;--tx:#eceef8;--mu:#9296ad;--ac:#c9a45c;--ac2:#c9a45c;--acx:#12141f;--bd:#262b45;--in:#0f1222;--ok:#5fd39b;--er:#ff8a80;--sh:0 12px 32px -12px rgba(0,0,0,.6);--hero:linear-gradient(135deg,#141b3f,#222f6b)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.hero{background:var(--hero);color:#fff;padding:36px 20px 74px}
.hero .in{max-width:760px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#d9c08a;font-weight:600}
.brand i{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-style:normal;color:#e8cf97}
h1{font:600 clamp(1.7rem,6vw,2.4rem)/1.15 "Playfair Display",Georgia,"Times New Roman",serif;margin:18px 0 10px;letter-spacing:-.01em}
.hero p{margin:0;max-width:520px;color:#c8cdea;font-size:.98rem}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.badges span{font-size:.74rem;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#e6e9fb}
main{max-width:760px;margin:-46px auto 0;padding:0 16px 40px;position:relative}
.tabs{display:flex;gap:4px;padding:5px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);margin-bottom:14px}
.tabs button{flex:1;padding:11px;border:0;background:transparent;color:var(--mu);border-radius:10px;font:inherit;font-weight:600;font-size:.93rem;cursor:pointer;transition:.18s}
.tabs button.on{background:var(--ac);color:var(--acx)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:22px;box-shadow:var(--sh);margin-bottom:14px}
.card h2{font:600 1.15rem/1.3 "Playfair Display",Georgia,serif;margin:0 0 4px}
.card .sub{color:var(--mu);font-size:.88rem;margin:0 0 16px}
.drop{border:1.5px dashed var(--bd);background:var(--in);border-radius:14px;padding:28px 14px;text-align:center;color:var(--mu);cursor:pointer;transition:.18s;font-size:.93rem}
.drop::before{content:"";display:block;width:44px;height:44px;margin:0 auto 10px;border-radius:12px;background:var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4m0 0L7 9m5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center/22px no-repeat}
.drop:hover,.drop.h{border-color:var(--ac2);color:var(--tx)}
label{display:block;font-size:.76rem;color:var(--mu);margin:16px 0 6px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
select,input[type=number]{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--bd);background:var(--in);color:var(--tx);font:inherit;font-size:.93rem}
select:focus,input:focus{outline:2px solid var(--ac2);outline-offset:1px}
.row{display:flex;gap:12px}.row>*{flex:1;min-width:0}
input[type=color]{width:100%;height:44px;padding:4px;border:1px solid var(--bd);border-radius:10px;background:var(--in);cursor:pointer}
.go{width:100%;margin-top:22px;padding:14px;border:0;border-radius:12px;background:var(--ac);color:var(--acx);font:inherit;font-weight:600;font-size:1rem;letter-spacing:.01em;cursor:pointer;transition:.18s;box-shadow:0 8px 20px -10px var(--ac)}
.go:hover:not(:disabled){transform:translateY(-1px)}
.go:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
progress{width:100%;height:6px;margin-top:14px;appearance:none;border:0;border-radius:9px;overflow:hidden;background:var(--bd)}
progress::-webkit-progress-bar{background:var(--bd)}progress::-webkit-progress-value{background:var(--ac2)}progress::-moz-progress-bar{background:var(--ac2)}
#log{font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;color:var(--mu);max-height:200px;overflow:auto;padding:0 4px}
#log:not(:empty){background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px}
.note{font-size:.84rem;color:var(--mu);background:var(--in);border:1px solid var(--bd);border-left:3px solid var(--ac2);border-radius:10px;padding:11px 13px;margin-top:18px}
footer{text-align:center;color:var(--mu);font-size:.78rem;padding:10px 0 4px}
.ok{color:var(--ok)}.er{color:var(--er)}[hidden]{display:none!important}