
:root{--fb-purple:#6c4cf1;--fb-yellow:#ffd54a;--fb-ink:#24202f;--fb-muted:#6f6a7a;--fb-line:#e9e5f2;--fb-soft:#f8f6ff;--fb-green:#2e9d68;--fb-red:#c94a5d}
.active-link{color:var(--fb-purple)!important;font-weight:700}
.fb-hero{padding:64px 0 36px;background:radial-gradient(circle at 82% 24%,rgba(255,213,74,.32),transparent 24%),linear-gradient(180deg,#fbfaff 0%,#fff 100%)}
.fb-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.fb-hero h1{max-width:720px;margin:12px 0 18px;font-size:clamp(2.45rem,5vw,4.7rem);line-height:1.02;letter-spacing:-.05em}
.back-link{display:inline-flex;margin-bottom:24px;color:var(--fb-muted);font-size:.92rem;font-weight:600}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.hero-points span{padding:9px 13px;border:1px solid var(--fb-line);border-radius:999px;background:#fff;font-size:.86rem;font-weight:600}
.button-showcase{position:relative;min-height:470px;border-radius:48px;background:linear-gradient(145deg,#6c4cf1,#9c82ff);overflow:hidden;box-shadow:0 32px 70px rgba(74,50,173,.22)}
.showcase-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,213,74,.7);filter:blur(3px);right:-80px;top:-90px}
.photo-button{position:absolute;display:grid;place-items:center;border-radius:50%;background:#fff;border:9px solid rgba(255,255,255,.75);box-shadow:0 18px 35px rgba(29,21,70,.26),inset 0 0 0 2px rgba(36,32,47,.08);font-size:2.5rem}
.button-a{width:170px;height:170px;left:48px;top:50px;transform:rotate(-9deg)}
.button-b{width:125px;height:125px;right:62px;top:86px;transform:rotate(12deg)}
.button-c{width:145px;height:145px;left:92px;bottom:55px;transform:rotate(7deg)}
.button-d{width:105px;height:105px;right:67px;bottom:74px;transform:rotate(-12deg)}
.showcase-label{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;min-width:230px;padding:13px 22px;border-radius:18px;background:rgba(255,255,255,.92);text-align:center;box-shadow:0 12px 24px rgba(44,30,107,.16)}
.showcase-label small{color:var(--fb-muted)}
.quick-explainer{padding:0 0 48px}
.explainer-card{display:flex;align-items:center;justify-content:center;gap:30px;padding:24px 34px;border:1px solid var(--fb-line);border-radius:26px;background:#fff;box-shadow:0 14px 40px rgba(48,37,91,.07)}
.explainer-card>div{display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:center}
.explainer-card strong,.explainer-card small{grid-column:2}
.explainer-card small{color:var(--fb-muted)}
.mini-step{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--fb-yellow);font-weight:800}
.step-arrow{color:#b7b0c5;font-size:1.35rem}
.fb-config-section{padding:72px 0 100px;background:#faf9fd}
.fb-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:42px;align-items:start}
.config-main{min-width:0}
.config-block{margin-top:26px;padding:30px;border:1px solid var(--fb-line);border-radius:28px;background:#fff;box-shadow:0 10px 30px rgba(50,38,94,.045)}
.block-title{display:flex;gap:15px;align-items:flex-start;margin-bottom:24px}
.block-title h3{margin:0 0 4px;font-size:1.22rem}
.block-title p{margin:0;color:var(--fb-muted);font-size:.93rem}
.number-badge{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:var(--fb-purple);color:#fff;font-weight:800}
.size-options{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.choice-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 12px;border:2px solid var(--fb-line);border-radius:20px;background:#fff;color:var(--fb-ink);font-family:inherit;cursor:pointer;transition:.2s ease}
.choice-card:hover,.choice-card.active{border-color:var(--fb-purple);background:#f8f6ff;transform:translateY(-2px)}
.choice-card.active{box-shadow:0 0 0 4px rgba(108,76,241,.1)}
.choice-card small{color:var(--fb-muted);font-size:.77rem}
.size-preview{display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ffdf69,#ffd03c);box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 7px 15px rgba(139,104,0,.13);font-weight:800;font-size:.72rem}
.size-25{width:44px;height:44px}.size-32{width:54px;height:54px}.size-58{width:70px;height:70px}
.package-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.package-card{position:relative;padding:23px;border:2px solid var(--fb-line);border-radius:22px;background:#fff;text-align:left;font-family:inherit;cursor:pointer;transition:.2s ease}
.package-card:hover,.package-card.active{border-color:var(--fb-purple);background:var(--fb-soft)}
.package-card.active{box-shadow:0 0 0 4px rgba(108,76,241,.1)}
.package-card strong{display:block;margin:5px 0;font-size:1.08rem}
.package-card .package-count{font-size:1.35rem;font-weight:800}
.package-card small{display:block;color:var(--fb-muted)}
.recommended-label{position:absolute;right:14px;top:14px;padding:5px 9px;border-radius:999px;background:var(--fb-yellow);font-size:.68rem;font-weight:800}
.finish-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.finish-choice{min-width:0;padding:15px 8px;border:2px solid var(--fb-line);border-radius:17px;background:#fff;font-family:inherit;cursor:pointer}
.finish-choice:hover,.finish-choice.active{border-color:var(--fb-purple);background:var(--fb-soft)}
.finish-choice strong,.finish-choice small{display:block}
.finish-choice strong{font-size:.86rem;margin-top:7px}.finish-choice small{margin-top:3px;color:var(--fb-muted);font-size:.67rem;line-height:1.25}
.finish-dot{display:block;width:34px;height:34px;margin:auto;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #ddd}
.finish-dot.standard{background:linear-gradient(135deg,#fff,#dfe5ec)}
.finish-dot.glossy{background:linear-gradient(135deg,#8d6fff 0 48%,#fff 49% 58%,#6c4cf1 59%)}
.finish-dot.matte{background:#a996ef}
.finish-dot.glitter{background:radial-gradient(circle at 25% 25%,#fff 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,#fff 0 2px,transparent 3px),#8c6df2}
.finish-dot.holo{background:conic-gradient(#ff8bb1,#ffe16b,#82eccb,#7ab6ff,#d293ff,#ff8bb1)}
.template-panel{display:grid;grid-template-columns:240px 1fr;gap:25px;padding:22px;border-radius:22px;background:var(--fb-soft)}
.template-visual{position:relative;display:grid;place-items:center;min-height:230px;border-radius:18px;background:#ece8fb;overflow:hidden}
.template-sheet{width:150px;height:190px;padding:13px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-radius:5px;background:#fff;box-shadow:0 14px 24px rgba(58,42,124,.18);transform:rotate(-4deg)}
.template-sheet span{display:block;aspect-ratio:1;border:1.5px dashed #a998dc;border-radius:50%;background:#faf9ff}
.template-size-tag{position:absolute;bottom:13px;padding:6px 10px;border-radius:999px;background:#fff;font-size:.72rem;font-weight:700}
.template-copy{align-self:center}.template-copy h4{margin:10px 0 8px;font-size:1.17rem}.template-copy p{color:var(--fb-muted)}
.status-pill{display:inline-flex;padding:6px 9px;border-radius:999px;background:#e8fff3;color:#18734b;font-size:.72rem;font-weight:700}
.template-actions{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}
.file-rules{margin:0;padding-left:19px;color:var(--fb-muted);font-size:.84rem}
.file-rules li+li{margin-top:5px}
.upload-zone{display:flex;min-height:190px;flex-direction:column;align-items:center;justify-content:center;padding:25px;border:2px dashed #c9c1dd;border-radius:22px;background:#fcfbff;text-align:center;cursor:pointer;transition:.2s ease}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--fb-purple);background:#f7f4ff}
.upload-zone input{position:absolute;opacity:0;pointer-events:none}
.upload-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:10px;border-radius:15px;background:var(--fb-purple);color:#fff;font-size:1.45rem;font-weight:700}
.upload-zone small{margin-top:5px;color:var(--fb-muted)}
.validation-box{display:flex;gap:12px;align-items:flex-start;margin-top:13px;padding:14px 16px;border-radius:15px;font-size:.85rem}
.validation-box p{margin:2px 0 0}
.validation-box.neutral{background:#f3f1f7;color:var(--fb-muted)}
.validation-box.success{background:#eafff4;color:#176b48}
.validation-box.warning{background:#fff8df;color:#806013}
.validation-box.error{background:#fff0f2;color:#a43548}
.validation-icon{font-size:1.2rem}
.freedom-note{display:flex;gap:14px;margin-top:24px;padding:20px 22px;border:1px solid #efe5ae;border-radius:20px;background:#fffbed}
.freedom-note span{font-size:1.5rem}.freedom-note p{margin:3px 0 0;color:var(--fb-muted);font-size:.88rem}
.project-summary{position:relative}
.summary-sticky{position:sticky;top:104px;padding:26px;border:1px solid var(--fb-line);border-radius:28px;background:#fff;box-shadow:0 20px 48px rgba(48,37,91,.1)}
.summary-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--fb-line)}
.summary-header h2{margin:3px 0 0}
.summary-product-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--fb-yellow);color:var(--fb-purple);font-size:1.7rem}
.summary-preview{display:flex;gap:14px;align-items:center;padding:20px 0}
.summary-button-art{display:grid;place-items:center;width:66px;height:66px;border:6px solid #e5e1ee;border-radius:50%;background:linear-gradient(145deg,#7b5cf4,#ffd54a);color:#fff;font-size:.76rem;font-weight:800;box-shadow:0 7px 15px rgba(53,40,105,.17)}
.summary-preview small{display:block;color:var(--fb-muted)}
.summary-list{margin:0;padding:4px 0 15px;border-bottom:1px solid var(--fb-line)}
.summary-list div{display:flex;justify-content:space-between;gap:18px;padding:8px 0}.summary-list dt{color:var(--fb-muted)}.summary-list dd{margin:0;text-align:right;font-weight:600}
.pending-text{color:#9b7b16}
.price-placeholder{margin:17px 0;padding:15px;border-radius:16px;background:var(--fb-soft)}
.price-placeholder span{display:block;color:var(--fb-muted);font-size:.76rem}
.unit-price-row{padding-bottom:12px;border-bottom:1px solid var(--fb-line)}
.unit-price-row strong{display:block;margin-top:3px;font-size:1.05rem;color:var(--fb-purple)}
.package-price-row{display:flex;align-items:end;justify-content:space-between;gap:14px;padding-top:12px}
.package-price-row strong{font-size:1.28rem;text-align:right}
.quantity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0}
.quantity-row small{display:block;color:var(--fb-muted);font-size:.68rem}
.quantity-control{display:flex;align-items:center;border:1px solid var(--fb-line);border-radius:12px;overflow:hidden}.quantity-control button{width:34px;height:34px;border:0;background:#f7f5fb;font-size:1.05rem;cursor:pointer}.quantity-control output{min-width:34px;text-align:center;font-weight:700}
#add-project:disabled{opacity:.45;cursor:not-allowed}
.summary-hint{margin:8px 0 0;text-align:center;color:var(--fb-muted);font-size:.76rem}
.summary-rule{display:flex;gap:9px;margin-top:18px;padding-top:17px;border-top:1px solid var(--fb-line);color:var(--fb-muted);font-size:.76rem}.summary-rule p{margin:0}
.modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(25,18,51,.62)}
.modal-backdrop[hidden]{display:none}
.modal-close{position:absolute;right:18px;top:15px;border:0;background:transparent;font-size:1.8rem;cursor:pointer}
.toast{position:fixed;right:24px;bottom:24px;z-index:1200;padding:14px 20px;border-radius:14px;background:#211a35;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.2);opacity:0;transform:translateY(15px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}
@media(max-width:1050px){.fb-layout{grid-template-columns:1fr}.summary-sticky{position:static}.finish-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.fb-hero-grid{grid-template-columns:1fr;gap:35px}.button-showcase{min-height:390px}.explainer-card{align-items:stretch;flex-direction:column;gap:10px}.step-arrow{display:none}.explainer-card>div{width:100%}.template-panel{grid-template-columns:1fr}.template-visual{min-height:200px}}
@media(max-width:620px){.fb-hero{padding-top:40px}.size-options,.package-options{grid-template-columns:1fr}.finish-grid{grid-template-columns:1fr 1fr}.config-block{padding:21px}.template-actions{flex-direction:column}.template-actions .button{width:100%}.button-showcase{min-height:340px}.button-a{width:130px;height:130px;left:25px}.button-b{right:25px}.button-c{width:115px;height:115px;left:55px}.button-d{right:30px}}

.instagram-help-card{margin-top:18px;padding:16px 18px;border-radius:16px;background:#f2edff}.instagram-help-card p{margin:5px 0 0;color:var(--muted)}.instagram-help-card a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
