:root { --bg:#f6f7fb; --card:#fff; --text:#172033; --muted:#667085; --line:#e5e7eb; --brand:#f97316; --danger:#b42318; --ok:#067647; }
* { box-sizing: border-box; }
body { margin:0; font-family:Arial,sans-serif; background:var(--bg); color:var(--text); }
.admin-navbar { border-bottom:1px solid var(--line); background:#fff; box-shadow:0 4px 18px rgba(16,24,40,.04); }
.admin-navbar .container { min-height:64px; }
.navbar-brand { display:flex; align-items:center; gap:10px; color:var(--text); }
.navbar-brand:hover { color:var(--text); }
.navbar-brand small { display:block; margin-top:1px; color:var(--muted); font-size:10px; font-weight:normal; letter-spacing:.08em; text-transform:uppercase; }
.admin-brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--brand); color:#fff; font-weight:800; }
.admin-navbar .nav-link { padding:9px 12px; color:#475467; font-weight:700; }
.admin-navbar .nav-link:hover { color:var(--brand); }
.admin-content { max-width:1200px; padding-top:28px; padding-bottom:40px; }
.admin-page-intro { margin-bottom:22px; }
.admin-page-intro h1 { margin:0 0 5px; font-size:28px; font-weight:750; }
.admin-page-intro p { margin:0; color:var(--muted); }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; }
.topbar h1 { margin:0 0 4px; font-size:26px; }
.topbar p, .muted { color:var(--muted); }
nav a { margin-left:12px; color:var(--brand); text-decoration:none; font-weight:bold; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 8px 24px rgba(16,24,40,.06); margin-bottom:20px; }
.card-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.card-heading h2 { margin:0 0 3px; font-size:21px; }
.card-heading p { margin:0; }
.narrow { max-width:540px; margin-left:auto; margin-right:auto; }
label { display:block; font-weight:bold; margin:14px 0 6px; }
input[type="email"], input[type="password"], input[type="text"], input[type="file"], select { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.password-field { position:relative; }
.password-field input[type="password"], .password-field input[type="text"] { padding-right:44px; }
.password-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; margin:0; padding:6px; font-size:18px; line-height:1; cursor:pointer; color:var(--muted); }
.password-hint { margin:6px 0 0; font-size:13px; color:var(--muted); }
.auth-tabs { display:flex; gap:8px; margin-bottom:18px; }
.auth-tab { flex:1; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:bold; cursor:pointer; color:var(--muted); }
.auth-tab.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.account-info { color:var(--muted); margin:-10px 0 20px; }
details.card summary { font-weight:bold; cursor:pointer; font-size:18px; }
details.card[open] summary { margin-bottom:10px; }
button, .button { display:inline-block; background:var(--brand); color:#fff; border:0; padding:12px 16px; border-radius:10px; font-weight:bold; text-decoration:none; cursor:pointer; margin-top:16px; }
.actions .button { margin-top:0; }
.button-secondary { background:#344054; }
button:disabled { opacity:.65; cursor:not-allowed; }
.generation-progress { margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fffaf5; }
.generation-progress__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.progress-track { width:100%; height:10px; overflow:hidden; border-radius:999px; background:#e5e7eb; }
.progress-bar { width:0; height:100%; border-radius:inherit; background:var(--brand); transition:width .45s ease; }
.progress-note { margin:10px 0 0; font-size:13px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table > thead th { padding:12px; background:#f9fafb; color:#475467; font-size:12px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
.table > tbody td { padding:13px 12px; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:bold; background:#eef2ff; color:#3538cd; }
.badge.done { background:#ecfdf3; color:var(--ok); }
.badge.failed { background:#fef3f2; color:var(--danger); }
.badge.processing { background:#fffaeb; color:#b54708; }
.badge.completed { background:#ecfdf3; color:var(--ok); }
.badge.created { background:#fffaeb; color:#b54708; }
.alert { padding:12px 14px; border-radius:12px; margin-bottom:16px; }
.alert-error { background:#fef3f2; color:var(--danger); border:1px solid #fecdca; }
.alert-success { background:#ecfdf3; color:var(--ok); border:1px solid #abefc6; }
.actions { margin-bottom:16px; }
.actions .button + .button { margin-left:8px; }
.table-responsive { width:100%; overflow-x:auto; }
.table-responsive table { min-width:760px; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.page-heading h2 { margin-bottom:4px; }
.page-heading p { margin:0; }
.page-heading .button { margin-top:0; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.stat-card { padding:18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.stat-card span { display:block; margin-bottom:8px; color:var(--muted); font-size:13px; }
.stat-card strong { font-size:25px; }
.analytics-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.analytics-wrap { max-width:420px; overflow-wrap:anywhere; }
.analytics-wrap small { display:block; margin-top:5px; color:var(--muted); }
@media (max-width:800px) { .analytics-columns { grid-template-columns:1fr; } }
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.filter-link { padding:7px 11px; border-radius:999px; background:#f2f4f7; color:#475467; font-size:13px; font-weight:bold; text-decoration:none; }
.filter-link.active { background:var(--brand); color:#fff; }
code { color:#475467; font-size:12px; overflow-wrap:anywhere; }
.payment-error-row td { padding-top:6px; background:#fef3f2; color:var(--danger); }
.share-tools { border-color:#fed7aa; background:linear-gradient(135deg,#fff 0%,#fff7ed 100%); }
.share-tools-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.share-tools-heading h2 { margin:4px 0; font-size:22px; }
.share-tools-heading p { margin:0; color:var(--muted); }
.share-tools-label { color:#c2410c; font-size:11px; font-weight:800; letter-spacing:.12em; }
.share-ready { flex:0 0 auto; padding:7px 11px; border-radius:999px; background:#ecfdf3; color:var(--ok); font-size:12px; font-weight:bold; }
.share-link-box { display:flex; overflow:hidden; border:1px solid #fed7aa; border-radius:11px; background:#fff; }
.share-link-box input { min-width:0; flex:1; border:0; border-radius:0; background:#fff; color:#475467; font-family:monospace; font-size:13px; }
.copy-button { flex:0 0 auto; margin:0; border-radius:0; padding-inline:20px; }
.copy-button.copied, [data-copy].copied { background:var(--ok); }
.share-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
.share-actions .button { margin-top:0; }
.whatsapp-share { background:#16a34a; }
.copy-feedback { min-height:20px; margin-top:10px; color:var(--ok); font-size:13px; font-weight:bold; }
.reprocess-form { margin-top:18px; padding:16px; border:1px solid #fed7aa; border-radius:12px; background:#fff7ed; }
.reprocess-form button { margin-top:0; }
.reprocess-form p { margin:9px 0 0; font-size:13px; }
.cover-preview { margin:26px 0 30px; padding:18px; border:1px solid var(--line); border-radius:15px; background:#f9fafb; }
.cover-preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:15px; }
.cover-preview-heading h3 { margin:0 0 4px; }
.cover-preview-heading p { margin:0; }
.cover-preview-heading .button { flex:0 0 auto; margin-top:0; }
.cover-preview > a { display:block; max-width:760px; margin:0 auto; }
.cover-preview img { display:block; width:100%; height:auto; border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(16,24,40,.08); }
.share-home-link { margin-bottom:16px; }
.share-home-link a { display:inline-flex; align-items:center; gap:6px; color:#475467; font-weight:bold; text-decoration:none; }
.share-home-link a:hover { color:var(--brand); }
.share-cta { position:relative; overflow:hidden; margin-bottom:20px; padding:38px; border-radius:18px; background:linear-gradient(135deg,#172033 0%,#344054 100%); color:#fff; box-shadow:0 12px 34px rgba(16,24,40,.16); }
.share-cta::after { content:'☺'; position:absolute; right:30px; top:50%; color:rgba(255,255,255,.06); font-size:190px; font-weight:bold; transform:translateY(-52%) rotate(8deg); pointer-events:none; }
.share-cta-content { position:relative; z-index:1; max-width:780px; }
.share-cta-label { color:#fdba74; font-size:11px; font-weight:800; letter-spacing:.14em; }
.share-cta h2 { max-width:690px; margin:9px 0 12px; font-size:30px; line-height:1.2; }
.share-cta p { margin:0; color:#d0d5dd; font-size:16px; line-height:1.7; }
.share-cta-points { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; color:#f2f4f7; font-size:13px; font-weight:bold; }
.share-cta-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.share-cta-actions .button { margin-top:16px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.thumb { background:#fafafa; border:1px solid var(--line); border-radius:14px; padding:10px; text-align:center; }
.thumb img { width:100%; max-width:180px; aspect-ratio:1/1; object-fit:contain; display:block; margin:0 auto 8px; }
.thumb span, .thumb a { display:block; font-size:13px; color:var(--muted); }
.landing { display:flex; flex-direction:column; gap:70px; padding:20px 0 50px; }
.language-switch { display:flex; align-self:flex-end; padding:4px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.language-button { margin:0; padding:8px 12px; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; }
.language-button.active { background:var(--text); color:#fff; }
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; min-height:520px; padding:54px; border-radius:28px; background:linear-gradient(135deg,#fff7ed 0%,#fff 55%,#ffedd5 100%); border:1px solid #fed7aa; overflow:hidden; }
.hero h2 { max-width:680px; margin:12px 0 18px; font-size:clamp(38px,5vw,64px); line-height:1.06; letter-spacing:-2px; }
.hero p { max-width:650px; margin:0; color:var(--muted); font-size:18px; line-height:1.7; }
.eyebrow { display:inline-block; color:#c2410c; font-size:13px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
.hero__actions { display:flex; align-items:center; gap:22px; margin-top:14px; }
.text-link { color:#c2410c; font-weight:bold; text-decoration:none; }
.hero__points { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero__points span { padding:8px 12px; border-radius:999px; background:#fff; border:1px solid #fed7aa; color:#9a3412; font-size:13px; font-weight:bold; }
.sticker-showcase { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; transform:rotate(2deg); }
.sticker-showcase span { display:grid; place-items:center; aspect-ratio:1; border-radius:22px; background:#fff; box-shadow:0 12px 25px rgba(124,45,18,.12); font-size:clamp(34px,4vw,54px); transition:transform .2s ease; }
.sticker-showcase span:nth-child(even) { transform:translateY(12px); }
.sticker-showcase span:hover { transform:scale(1.08) rotate(-4deg); }
.landing-section { scroll-margin-top:20px; }
.section-heading { max-width:680px; margin:0 auto 34px; text-align:center; }
.section-heading h2 { margin:10px 0 12px; font-size:36px; }
.section-heading p { color:var(--muted); line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { padding:28px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 8px 24px rgba(16,24,40,.05); }
.feature-card h3 { margin:16px 0 8px; }
.feature-card p { margin:0; color:var(--muted); line-height:1.65; }
.feature-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:#fff7ed; font-size:26px; }
.process-section { padding:45px; border-radius:24px; background:#172033; color:#fff; }
.process-section .eyebrow { color:#fdba74; }
.process-list { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:0; margin:0; list-style:none; counter-reset:steps; }
.process-list li { display:flex; gap:16px; }
.process-list li > span { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:50%; background:var(--brand); font-weight:bold; }
.process-list h3 { margin:7px 0 8px; }
.process-list p { margin:0; color:#cbd5e1; line-height:1.6; }
.landing-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:40px 46px; border-radius:24px; background:linear-gradient(120deg,#ea580c,#f97316); color:#fff; }
.landing-cta .eyebrow { color:#ffedd5; }
.landing-cta h2 { margin:8px 0; font-size:32px; }
.landing-cta p { margin:0; color:#fff7ed; }
.button-light { flex:0 0 auto; margin:0; background:#fff; color:#c2410c; }
.order-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; scroll-margin-top:20px; }
.price-card, .checkout-card { padding:38px; border-radius:24px; border:1px solid var(--line); background:#fff; box-shadow:0 12px 32px rgba(16,24,40,.07); }
.price { margin:12px 0; font-size:78px; line-height:1; font-weight:800; letter-spacing:-4px; }
.price sup { margin-right:4px; font-size:20px; letter-spacing:0; vertical-align:top; }
.price-card p, .checkout-card p { color:var(--muted); line-height:1.65; }
.price-card ul { display:grid; gap:12px; padding:0; margin:24px 0 0; list-style:none; }
.price-card li::before { content:'✓'; margin-right:10px; color:var(--ok); font-weight:bold; }
.checkout-card h2 { margin:10px 0; font-size:32px; }
#paypal-button-container { min-height:45px; margin-top:24px; }
.payment-notice, .payment-message { margin:20px 0; padding:14px; border-radius:12px; background:#fff7ed; color:#9a3412; line-height:1.5; }
.payment-message:empty { display:none; }
.payment-message.success { background:#ecfdf3; color:var(--ok); }
.payment-message.error { background:#fef3f2; color:var(--danger); }
.whatsapp-button { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:18px; padding:15px 18px; border-radius:12px; background:#16a34a; color:#fff; text-decoration:none; }
.whatsapp-button span { font-weight:800; }
.whatsapp-button strong { font-size:14px; }
@media (max-width:991px) { .admin-navbar .navbar-collapse { padding:12px 0 16px; border-top:1px solid var(--line); } .admin-navbar .btn { display:block; margin-top:8px; padding:10px 12px; text-align:left; } }
@media (max-width:800px) { .admin-content { padding-top:20px; } .admin-page-intro h1 { font-size:24px; } .card { padding:16px; border-radius:13px; } .grid { grid-template-columns:repeat(2,1fr); } table { font-size:13px; } .page-heading { display:block; } .page-heading .button { margin-top:12px; } .stat-grid { grid-template-columns:repeat(2,1fr); } .actions .button { width:100%; text-align:center; } .actions .button + .button { margin-left:0; } .share-tools-heading { display:block; } .share-ready { display:inline-block; margin-top:10px; } .share-link-box { display:block; overflow:visible; border:0; background:transparent; } .share-link-box input { width:100%; border:1px solid #fed7aa; border-radius:10px; } .copy-button { width:100%; margin-top:8px; border-radius:10px; } .share-actions { display:grid; } .share-actions .button { width:100%; text-align:center; } .cover-preview { padding:12px; } .cover-preview-heading { display:block; } .cover-preview-heading .button { display:block; width:100%; margin-top:12px; text-align:center; } .share-cta { padding:26px 20px; } .share-cta h2 { font-size:25px; } .share-cta-actions { display:grid; } .share-cta-actions .button { width:100%; text-align:center; } }
@media (max-width:800px) { .landing { gap:48px; } .hero { grid-template-columns:1fr; padding:34px 24px; min-height:auto; } .hero h2 { font-size:40px; letter-spacing:-1px; } .sticker-showcase { max-width:440px; } .feature-grid, .process-list, .order-section { grid-template-columns:1fr; } .process-section, .price-card, .checkout-card { padding:34px 24px; } .landing-cta { display:block; padding:34px 24px; } .landing-cta .button { margin-top:22px; } .whatsapp-button { align-items:flex-start; flex-direction:column; } }