:root{
  --bg:#f7f8f6; --panel:rgba(255,255,255,.82); --line:#dfe5d8; --text:#10140e;
  --muted:#6d7567; --lime:#b3ff00; --lime2:#8fd400; --dark:#0b0e0a; --soft:#eef5e4;
  --shadow:0 14px 40px rgba(22,28,18,.10); --r:22px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:
linear-gradient(rgba(14,30,10,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(14,30,10,.035) 1px,transparent 1px),var(--bg);
background-size:38px 38px;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
button,input,select{font:inherit} button{cursor:pointer}.hidden{display:none!important}
.wrap{max-width:1500px;margin:auto;padding:0 28px}.glass{background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(18,24,15,.09);box-shadow:var(--shadow)}
header{position:sticky;top:0;z-index:30;background:rgba(247,248,246,.8);backdrop-filter:blur(18px);border-bottom:1px solid #e7ebdf}
.nav{height:74px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:20px}
.logo{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center}.logo img{display:block;width:100%;height:100%;object-fit:contain}
.navlinks{display:flex;gap:22px;flex:1;justify-content:center;color:#50584a;font-weight:700}.navlinks a{color:inherit;text-decoration:none}
.pill{border:1px solid #dfe5d8;background:#fff;border-radius:999px;padding:10px 16px;font-weight:800}.primary{background:var(--dark);color:#fff;border:0}
.primary b{color:var(--lime)} .hero{padding:32px 0 20px}.hero-card{border-radius:30px;overflow:hidden;position:relative;min-height:250px;
background:radial-gradient(circle at 75% 35%,rgba(179,255,0,.33),transparent 24%),linear-gradient(135deg,#111710,#1e2d18 55%,#0d120b);color:#fff;padding:34px 38px}
.hero-card h1{font-size:clamp(40px,6vw,78px);line-height:.91;margin:0;letter-spacing:-4px;max-width:780px}.hero-card h1 span{color:var(--lime)}
.hero-card p{max-width:650px;color:#d4decf;font-size:16px}.float-card{position:absolute;right:40px;bottom:30px;width:260px;height:170px;border-radius:28px;border:1px solid rgba(255,255,255,.14);
background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));transform:rotate(4deg);padding:18px}
.float-card .strip{height:100%;width:76px;background:#fff;border-radius:12px;padding:6px;display:grid;gap:5px}.strip i{background:linear-gradient(135deg,#26351f,#9ad23a);border-radius:6px}
.section{padding:25px 0 60px}.title-row{display:flex;align-items:end;justify-content:space-between;gap:20px}.title-row h2{font-size:34px;margin:0 0 5px}.muted{color:var(--muted)}
.toolbar{margin-top:22px;border-radius:20px;padding:14px;display:grid;grid-template-columns:auto 150px 150px 170px 170px 1fr 120px;gap:10px;align-items:center}
.select,.search{height:48px;border:1px solid #dfe5d8;background:#fff;border-radius:14px;padding:0 14px}.search{width:100%}
.btn{height:48px;border:0;border-radius:14px;padding:0 18px;font-weight:900}.lime{background:var(--lime);color:#111}.dark{background:var(--dark);color:#fff}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.tag{background:#edf1e8;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:800;color:#4e5947}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.frame-card{border-radius:22px;overflow:hidden;background:#fff;border:1px solid #e0e6da;transition:.2s;position:relative}
.frame-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,24,10,.12)}.thumb{aspect-ratio:4/5;background:#eef0ec;padding:15px;display:flex;justify-content:center;align-items:center}
.preview-strip{height:100%;max-width:55%;min-width:120px;background:#fff;border-radius:11px;border:1px solid #ddd;padding:7px;display:grid;gap:7px;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.preview-strip .slot{border-radius:8px;background:linear-gradient(135deg,#dce3d7,#b4c9a6);position:relative;overflow:hidden}
.preview-strip .slot:after{content:"PHOTO";position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:900;color:#62705b}
.frame-card[data-theme="news"] .preview-strip{background:linear-gradient(#fff 0 18%,#f4efe6 18%)}.frame-card[data-theme="retro"] .preview-strip{background:#1a2330}.frame-card[data-theme="pastel"] .preview-strip{background:#fff0f5}
.badge{position:absolute;top:12px;left:12px;background:var(--dark);color:var(--lime);font-size:12px;font-weight:900;padding:7px 10px;border-radius:999px;z-index:2}
.card-body{padding:16px}.card-body h3{margin:0 0 6px;font-size:16px}.meta{display:flex;justify-content:space-between;color:#697362;font-size:13px}.price{font-weight:900;color:#17200f}
.card-actions{display:flex;gap:10px;margin-top:12px}.card-actions button{flex:1}
.creator-banner{margin:22px 0;border-radius:22px;padding:20px 22px;display:flex;justify-content:space-between;gap:18px;align-items:center;background:linear-gradient(90deg,#111710,#1a2515);color:#fff}.creator-banner span{color:var(--lime)}
.stage{padding:24px 0 60px}.stage-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.steps{display:flex;gap:10px;align-items:center}.step{display:flex;align-items:center;gap:8px;color:#879080;font-weight:800;font-size:13px}.step strong{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#edf1e8}.step.on{color:#111}.step.on strong{background:var(--lime)}
.source-box{max-width:860px;margin:25px auto;text-align:center}.source-box h2{font-size:36px}.selected-frame{padding:18px;border-radius:18px;text-align:left;margin:18px 0}.source-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.source{border-radius:22px;padding:38px 20px;border:1px solid #dfe5d8;background:#fff}
.icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;margin:0 auto 18px;background:var(--soft);font-size:28px}.studio{display:grid;grid-template-columns:220px 1fr 220px;gap:18px;align-items:start}
.side{border-radius:20px;padding:18px}.setting-group{margin-bottom:20px}.seg{display:grid;grid-template-columns:repeat(3,1fr);background:#eef1eb;padding:4px;border-radius:13px;gap:4px}.seg button{border:0;background:transparent;padding:9px;border-radius:10px}.seg button.on{background:var(--dark);color:var(--lime);font-weight:900}
.camera-wrap{position:relative;border-radius:26px;overflow:hidden;background:#161a15;min-height:580px}.camera-wrap video,.camera-wrap img{width:100%;height:100%;min-height:580px;object-fit:cover;display:block}.camera-placeholder{min-height:580px;display:grid;place-items:center;color:#b8c2b0;text-align:center;padding:30px}
.shutter{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;border:8px solid rgba(255,255,255,.75);background:var(--lime);box-shadow:0 8px 25px rgba(0,0,0,.28)}
.photoslots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.photo-mini{aspect-ratio:1;background:#f5f6f3;border:1px dashed #ccd3c6;border-radius:13px;overflow:hidden;display:grid;place-items:center;color:#999}.photo-mini img{width:100%;height:100%;object-fit:cover}
.filterbar{margin-top:18px;border-radius:20px;padding:15px;display:flex;gap:12px;overflow:auto}.filter{min-width:88px;text-align:center}.filter button{width:58px;height:58px;border-radius:18px;border:2px solid transparent;background:linear-gradient(135deg,#eee,#ccc)}.filter.on button{border-color:var(--dark);box-shadow:0 0 0 4px var(--lime)}.filter small{display:block;margin-top:6px}

.upload-workspace{display:none}
.upload-workspace.active{display:block}
.upload-topbar{display:flex;justify-content:center;margin-bottom:18px}
.mode-switch{display:inline-grid;grid-template-columns:1fr 1fr;background:#f1f2ef;border:1px solid #e3e7df;border-radius:999px;padding:4px;min-width:190px}
.mode-switch button{border:0;background:transparent;border-radius:999px;padding:9px 20px;color:#6f7569}
.mode-switch button.on{background:var(--dark);color:var(--lime);font-weight:900;box-shadow:0 5px 14px rgba(0,0,0,.14)}
.upload-main{display:grid;grid-template-columns:220px 1fr 270px;gap:18px;align-items:start}
.upload-center{border-radius:22px;padding:18px;background:#fff;border:1px solid #e5e8e1}
.upload-count{text-align:center;color:#685c75;font-weight:800;margin:0 0 14px}
.dropzone{min-height:270px;border:2px dashed #ff6b18;border-radius:20px;background:#fff3e4;display:grid;place-items:center;text-align:center;padding:24px;transition:.2s}
.dropzone.drag{background:#ffead0;transform:scale(.995)}
.dropicon{width:76px;height:76px;border-radius:18px;background:#ffd29e;display:grid;place-items:center;margin:0 auto 12px;font-size:38px;color:#ca4d0a}
.dropzone h3{margin:6px 0;color:#c74100}.dropzone p{margin:0;color:#e45d19}
.upload-side{border-radius:20px;padding:18px}
.upload-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.upthumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;border:2px solid transparent;background:#f1f3ef;cursor:pointer}
.upthumb.active{border-color:#7f3bd0}
.upthumb img{width:100%;height:100%;object-fit:cover}
.upthumb .num{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:rgba(16,20,14,.84);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:900}
.upthumb .remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(16,20,14,.84);color:#fff;font-size:12px;padding:0}
.retake-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;background:#f6f4f7;border-radius:12px;padding:12px;font-size:13px}
.linkbtn{border:0;background:transparent;color:#7c3bc6;font-weight:800;padding:0}
.upload-actions{display:grid;gap:9px;margin-top:16px}
.upload-actions .btn{width:100%}
@media(max-width:1000px){.upload-main{grid-template-columns:1fr}.upload-side,.upload-main>.side{order:2}}

.result-layout{display:grid;grid-template-columns:380px 1fr;gap:22px}.final-strip{background:#fff;border:1px solid #dfe5d8;border-radius:22px;padding:16px;min-height:700px;display:grid;gap:12px}.final-strip img{width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:10px}.result-panel{display:grid;gap:18px}.result-card{border-radius:22px;padding:22px}.share-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.share{padding:16px;border:1px solid #e0e6da;border-radius:15px;background:#fff}.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.paybox{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.summary{border-radius:22px;padding:22px}.checkout{border-radius:22px;padding:22px;background:#111710;color:#fff}.checkout .amount{font-size:38px;font-weight:1000;color:var(--lime)}.row{display:flex;justify-content:space-between;gap:20px;margin:11px 0}.hr{height:1px;background:#e5e9e0;margin:14px 0}.checkout .hr{background:#2e382a}
.notice{padding:12px 14px;background:#f2f7ea;border:1px solid #dae8c9;border-radius:13px;color:#48523f;font-size:13px}
.modal{position:fixed;inset:0;background:rgba(6,8,5,.72);display:grid;place-items:center;z-index:80;padding:20px}.modal-card{max-width:520px;width:100%;background:#fff;border-radius:26px;padding:24px}.modal-card h3{font-size:28px;margin:0 0 10px}
footer{padding:30px 0 50px;color:#75806d;text-align:center}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr 1fr}.toolbar label{display:none}.studio{grid-template-columns:1fr}.side{order:2}.studio>.side:last-child{order:3}.result-layout,.paybox{grid-template-columns:1fr}.navlinks{display:none}.float-card{opacity:.45}.hero-card h1{max-width:650px}.camera-wrap,.camera-wrap video,.camera-wrap img,.camera-placeholder{min-height:420px}}
@media(max-width:620px){.wrap{padding:0 14px}.grid,.source-grid,.share-row,.actions{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.hero-card{padding:28px 24px}.hero-card h1{font-size:48px;letter-spacing:-2px}.float-card{display:none}.title-row h2{font-size:28px}}

button,a,input,select{touch-action:manipulation}button,a.pill{min-height:44px}button{transition:background .15s,opacity .15s,box-shadow .15s}button:active{opacity:.8}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #769e00;outline-offset:3px}.icon svg,.btn svg,.dropicon svg{width:24px;height:24px;display:block}.dropicon svg{width:38px;height:38px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px}.thumb img{width:100%;height:100%;object-fit:contain}.thumb{height:340px}.frame-card:hover{transform:none}.upthumb .remove{width:44px;height:44px;top:0;right:0;border-radius:0 0 0 14px}.upthumb{min-height:90px}.final-strip{display:block;min-height:0;padding:0;overflow:hidden}.final-strip img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0}.camera-wrap{aspect-ratio:4/3;min-height:300px}.camera-wrap video{position:absolute;inset:0;min-height:0;object-fit:contain}.camera-placeholder{position:absolute;inset:0;min-height:0}.edit-layout{display:grid;grid-template-columns:240px 1fr 240px;gap:20px}.edit-controls label{display:block;margin:12px 0}.edit-controls input{width:100%}.edit-preview img{max-width:100%;max-height:75vh;object-fit:contain}.edit-preview{text-align:center;border-radius:22px;padding:16px;min-height:350px}.filterbar button{min-width:76px}.mode-switch{margin-bottom:16px}.statusbar{position:sticky;top:74px;z-index:29;margin:0 auto;padding:10px 24px;background:#edf5df;color:#344029;min-height:44px}.statusbar.error{background:#fff0e6;color:#8b3300}.modal-card{max-height:90vh;overflow:auto;position:relative}.modal-card img{width:100%;max-height:65vh;object-fit:contain}.modal{animation:modal-in .2s ease}.modal-close{position:absolute;top:8px;right:8px;width:44px;background:white;border:0;border-radius:50%}.steps{flex-wrap:wrap}.logo{width:42px;height:42px;flex-basis:42px}.brand{text-decoration:none;color:inherit;white-space:nowrap}.nav .primary{white-space:nowrap}.nav a.pill{display:flex;align-items:center;text-decoration:none;color:inherit}.consent{display:flex;gap:10px;text-align:left;align-items:start;margin:18px 0}.consent input{width:22px;height:22px}.mobile-nav{display:none}.order-list{display:flex;gap:8px;flex-wrap:wrap}.preview-wait{opacity:.65}body.modal-open{overflow:hidden}#how .grid{grid-template-columns:repeat(3,1fr)}#how article{padding:22px;border-radius:22px}.pricing-list{display:flex;flex-wrap:wrap;gap:10px}.pricing-list span{padding:12px;background:white;border-radius:14px}.toolbar{grid-template-columns:auto 140px 160px 170px 1fr 100px}.pb-privacy{font-size:13px;line-height:1.6}.edit-preview img:not([src]){display:none}.camera-wrap .shutter{z-index:2}.camera-wrap .shutter:disabled{opacity:.5}
@keyframes modal-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.edit-layout{grid-template-columns:1fr 1fr}.edit-preview{grid-column:1/-1;grid-row:1}.toolbar{grid-template-columns:1fr 1fr}.nav{gap:12px}.navlinks{display:none}.mobile-nav{display:block}.nav .primary{display:none}.brand{margin-right:auto}#how .grid{grid-template-columns:1fr}.upload-main{grid-template-columns:1fr}.camera-wrap{min-height:320px}.camera-wrap video{min-height:0}}
@media(max-width:620px){.edit-layout{grid-template-columns:1fr}.nav{height:70px}.toolbar{grid-template-columns:1fr}.stage-head{gap:10px;align-items:start;flex-direction:column}.steps{font-size:12px}.hero-card h1{font-size:44px}.result-layout{grid-template-columns:minmax(0,1fr)}.upload-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}.statusbar{top:70px}.edit-preview img{max-height:55vh}.wrap{width:100%}.source-box h2{font-size:28px}.result-card{padding:18px}.paybox{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.selected-photo-source{display:block;max-width:100%;max-height:180px;object-fit:contain;margin:12px auto}.upthumb[aria-pressed=true]{outline:3px solid #1d562c;outline-offset:3px}.status-close{min-width:44px;min-height:44px;margin-left:12px;border:0;background:transparent;color:inherit}#status[hidden]{display:none}#status{overflow-wrap:anywhere}button:disabled{min-height:44px}@media(max-width:600px){.edit-layout{grid-template-columns:minmax(0,1fr)}.edit-layout>*{min-width:0}.edit-preview img{max-width:100%}.side{min-width:0}.selected-photo-source{max-height:130px}.stage-head{flex-wrap:wrap}.stage-head h2{overflow-wrap:anywhere}.wrap{max-width:100%;box-sizing:border-box}.edit-controls{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}
@media(max-width:430px){.nav{gap:8px}.nav .brand{font-size:17px;gap:6px;min-width:0}.nav .logo{width:32px;height:32px;flex-basis:32px}.nav .pill{padding:10px;font-size:12px;flex-shrink:0}}

.catalog-empty{grid-column:1/-1;text-align:center;padding:56px 24px;border:1px solid #d6dcd0;border-radius:24px;background:#ffffff90}.catalog-empty h3{font-size:24px}.catalog-empty p{max-width:540px;margin:16px auto}.catalog-empty .btn{display:inline-flex;text-decoration:none}