*,
*::before,
*::after{box-sizing:border-box;}

:root{
  --bg-main:#ffffff;
  --glass-bg:#ffffffee;
  --glass-border:rgba(148,163,184,0.4);
  --accent:#0ea5e9;
  --accent-soft:rgba(14,165,233,0.12);
  --accent-strong:#0284c7;
  --text-main:#0f172a;
  --text-soft:#64748b;
  --radius-lg:26px;
  --radius-md:18px;
  --shadow-soft:0 18px 40px rgba(15,23,42,0.12);
}

body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--text-main);
  background:var(--bg-main);
}

.page-bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.16), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(129,140,248,0.16), transparent 55%),
    radial-gradient(circle at 0% 90%, rgba(52,211,153,0.15), transparent 60%),
    #f9fafb;
  z-index:-1;
}

.app-shell{
  max-width:1240px;
  margin:0 auto;
  padding:18px 14px 32px;
}

.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:#ffffffee;
  border:1px solid rgba(148,163,184,0.4);
  box-shadow:0 12px 30px rgba(148,163,184,0.25);
  margin-bottom:18px;
  gap:12px;
}

.brand{display:flex;align-items:center;gap:10px;}
.brand-icon{
  width:32px;height:32px;border-radius:12px;
  background:linear-gradient(135deg,#0ea5e9,#22c55e);
  display:flex;align-items:center;justify-content:center;
  color:#f9fafb;font-weight:700;font-size:14px;
}
.brand-title{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
.brand-sub{font-size:11px;color:var(--text-soft);}
.main-nav{display:flex;gap:6px;}
.main-nav a{
  text-decoration:none;font-size:12px;padding:6px 12px;border-radius:999px;
  color:var(--text-soft);border:1px solid transparent;
}
.main-nav a.active{
  background:var(--accent-soft);
  color:var(--accent-strong);
  border-color:rgba(14,165,233,0.7);
}
.main-nav a:hover{border-color:rgba(148,163,184,0.8);}

/* hero */
.hero{
  display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;
}
.hero-text{
  flex:2 1 260px;
  background:var(--glass-bg);
  border-radius:var(--radius-lg);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-soft);
  padding:16px 18px;
}
.hero-text h1{margin:0 0 6px;font-size:24px;}
.hero-text p{margin:0;font-size:13px;color:var(--text-soft);}
.hero-badges{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.badge{
  font-size:11px;padding:4px 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-strong);
  border:1px solid rgba(14,165,233,0.5);
}
.hero-stats{flex:1 1 200px;display:flex;flex-direction:column;gap:8px;}
.stat-card{
  flex:1;min-height:56px;border-radius:16px;
  background:#ffffffee;
  border:1px solid rgba(226,232,240,0.9);
  box-shadow:var(--shadow-soft);
  padding:10px 12px;display:flex;flex-direction:column;justify-content:center;
}
.stat-value{font-size:18px;font-weight:700;}
.stat-label{font-size:11px;color:var(--text-soft);}

/* layout */
.app-main{display:flex;flex-direction:column;gap:16px;}
#create-panel{
  display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
}
.left-column,.right-column{
  flex:1 1 360px;
  border-radius:var(--radius-lg);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-soft);
  padding:14px;
}
@media(min-width:1024px){
  #create-panel{flex-wrap:nowrap;}
  .left-column,.right-column{flex:0 0 50%;}
  .right-column{position:sticky;top:110px;}
}
@media(max-width:900px){
  .app-header{flex-direction:column;align-items:flex-start;}
  .hero{flex-direction:column;}
}

/* controls */
.pill-bar{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:8px;margin-bottom:10px;
}
.pill-label{font-size:11px;color:var(--text-soft);letter-spacing:.16em;text-transform:uppercase;}
.pill-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;}
.template-pill{
  flex:0 0 auto;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  font-size:11px;color:var(--text-soft);background:#f9fafb;cursor:pointer;
}
.template-pill.active{
  background:var(--accent-soft);border-color:rgba(14,165,233,0.8);color:var(--accent-strong);
}
.control-block{margin-bottom:10px;}
.glass{
  border-radius:var(--radius-md);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  padding:12px;
}
.block-title{margin-bottom:8px;}
.block-title h2{margin:0;font-size:16px;}
.block-title p{margin:2px 0 0;font-size:12px;color:var(--text-soft);}
.block-title .tag{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;padding:2px 7px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-strong);
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:4px;
}
.block-title.small h3{margin:0;font-size:13px;}
.block-title.small p{font-size:11px;}

textarea{
  width:100%;border-radius:14px;border:1px solid rgba(203,213,225,0.9);
  background:#f9fafb;color:var(--text-main);padding:8px 10px;
  resize:vertical;font-size:13px;
}
textarea::placeholder{color:#9ca3af;}

.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.row.two .field{flex:1 1 calc(50% - 4px);}
.row.three .field{flex:1 1 calc(33.33% - 6px);}
.field{display:flex;flex-direction:column;gap:3px;}
.field label{font-size:11px;color:var(--text-soft);}

select,input[type=color],input[type=range]{
  border-radius:999px;border:1px solid rgba(203,213,225,0.9);
  background:#f9fafb;color:var(--text-main);padding:4px 10px;font-size:12px;
}
input[type=range]{padding:0;}

.upload-label{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 10px;border-radius:999px;
  border:1px dashed rgba(148,163,184,0.9);background:#f9fafb;
  cursor:pointer;margin-top:8px;
}
.upload-label.small{padding:6px 10px;}
.upload-text{display:flex;flex-direction:column;}
.upload-text strong{font-size:12px;}
.upload-text span{font-size:11px;color:var(--text-soft);}
.upload-label input{display:none;}

.check-pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:999px;background:#f9fafb;
  border:1px solid rgba(203,213,225,0.9);font-size:11px;cursor:pointer;
}
.check-pill input{accent-color:var(--accent);}
.options-row{gap:6px;}

.palette-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.palette{
  width:52px;height:24px;border-radius:999px;border:1px solid rgba(148,163,184,0.8);
  overflow:hidden;display:flex;
}
.palette span{flex:1;}
.suggest-row{margin-top:6px;}

.btn{
  border:none;border-radius:999px;padding:8px 14px;font-size:13px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn.small{font-size:12px;padding:6px 12px;}
.btn.primary{
  background:linear-gradient(135deg,#0ea5e9,#22c55e);
  color:#ecfeff;box-shadow:0 14px 30px rgba(14,165,233,0.6);
}
.btn.subtle{
  background:#f9fafb;color:var(--text-main);
  border:1px solid rgba(203,213,225,0.9);
}
.btn.whats{
  background:#22c55e;color:#ecfdf5;
  box-shadow:0 12px 26px rgba(34,197,94,0.55);
}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}

.bg-list{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-top:6px;
}
.bg-item{
  flex:0 0 auto;width:120px;height:150px;border-radius:22px;overflow:hidden;
  border:1px solid rgba(203,213,225,0.9);cursor:pointer;position:relative;background:#e5e7eb;
}
.bg-item img{width:100%;height:100%;object-fit:cover;display:block;}
.bg-item::after{
  content:attr(data-name);position:absolute;left:8px;bottom:8px;right:8px;
  font-size:11px;padding:3px 6px;border-radius:999px;
  background:rgba(15,23,42,0.9);color:#e5e7eb;
}
.bg-item.active{
  border-color:rgba(14,165,233,0.9);
  box-shadow:0 0 0 1px rgba(14,165,233,0.8),0 10px 24px rgba(148,163,184,0.7);
}

.sticker-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.sticker-chip{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(203,213,225,0.9);background:#f9fafb;
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
}
.sticker-chip img{width:80%;height:80%;object-fit:contain;}
.sticker-chip.none{font-size:11px;color:var(--text-soft);}
.sticker-chip.active{
  border-color:rgba(14,165,233,0.9);
  box-shadow:0 0 0 1px rgba(14,165,233,0.5);
}

.history-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-top:6px;}
.history-thumb{
  flex:0 0 auto;width:80px;height:110px;border-radius:18px;
  overflow:hidden;border:1px solid rgba(203,213,225,0.9);cursor:pointer;background:#e5e7eb;
}
.history-thumb img{width:100%;height:100%;object-fit:cover;}

.preview-header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;
}
.preview-header h2{margin:0;font-size:16px;}
.preview-header p{margin:2px 0 0;font-size:12px;color:var(--text-soft);}
.preview-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.chip{
  font-size:11px;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(148,163,184,0.8);background:#f9fafb;color:var(--text-soft);
}

.device-frame{
  position:relative;margin:0 auto;border-radius:32px;padding:10px;
  background:linear-gradient(145deg,#e5f3ff,#f1f5f9);
  box-shadow:0 18px 45px rgba(148,163,184,0.7);max-width:360px;
}
.device-notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:84px;height:14px;border-radius:999px;background:#0f172a;
}
.device-frame canvas{
  width:100%;display:block;border-radius:24px;margin-top:10px;background:#020617;
}

.share-row{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
.share-row .btn{flex:1 1 140px;}

/* gallery */
#gallery-panel{
  border-radius:var(--radius-lg);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  box-shadow:var(--shadow-soft);
  padding:14px;
}
.gallery-header{
  display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px;
}
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
.gallery-grid img{
  width:100%;border-radius:18px;display:block;
  border:1px solid rgba(203,213,225,0.9);
}

.hidden{display:none;}
.app-footer{
  margin-top:18px;text-align:center;font-size:12px;color:var(--text-soft);
}