/* Import Google Fonts with fallback */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes:wght@400&display=swap');

* { box-sizing: border-box; }
[v-cloak] { display: none !important; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; background:#f1f5f9; color:#0f172a; transform: scale(0.9); transform-origin: top left; width: 111.12%; height: 111.12%; }
body { padding: 1.25rem; line-height:1.4; }

/* v-cloak now defined at top */
header { text-align:center; margin-bottom:1rem; }
header h1 { margin:0 0 .25rem; font-size:1.9rem; }
.tagline { margin:0; font-size:.9rem; color:#475569; }
form { display:flex; flex-direction:column; gap:.35rem; max-width:420px; margin:0 auto 1rem; }
label { font-weight:600; }
input { padding:.6rem .8rem; border:2px solid #cbd5e1; border-radius:.6rem; font-size:1rem; font-weight:600; background:#fff; }
input:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px #6366f133; }
.hint { font-size:.7rem; color:#64748b; }
.hint.warn { color:#b45309; }

.preview-wrapper { display:flex; justify-content:center; margin:1.2rem 0; }
.live-preview { position:relative; background:transparent; padding:1.2rem; padding-bottom:5rem; border-radius:1.2rem; box-shadow:0 4px 14px -4px rgba(15,23,42,.2); }
/* Optional checkerboard (add class checkerboard to .live-preview if you want to visualize transparency) */
.live-preview.checkerboard { background:repeating-conic-gradient(#e2e8f0 0% 25%, transparent 0% 50%) 50% / 28px 28px; }
/* Make predominantly white images more visible */
.live-preview img { filter: drop-shadow(0 0 4px rgba(0,0,0,.08)); }
.live-preview.checkerboard img { filter: drop-shadow(0 1px 6px rgba(0,0,0,.25)); }
.live-preview img { display:block; width:100%; height:auto; }
/* Name appears below image (raised) with script style */
.name-text { position:absolute; left:50%; bottom:3rem; transform:translateX(-50%); font-family:'Great Vibes', 'Brush Script MT', cursive; font-weight:400; color:#000; font-size:64px; white-space:nowrap; line-height:1; letter-spacing:.03em; text-shadow:0 2px 4px rgba(0,0,0,.25),0 0 0 4px #fff; padding:0 .4rem; pointer-events:none; }

.actions { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-bottom:1rem; }
button { cursor:pointer; background:#6366f1; color:#fff; font-weight:600; border:none; padding:.75rem 1.1rem; border-radius:.7rem; font-size:.95rem; box-shadow:0 2px 6px -1px rgba(99,102,241,.5); transition:background .2s, transform .15s; }
button:hover:not(:disabled) { background:#4f46e5; }
button:active:not(:disabled) { transform:translateY(2px); }
button:disabled { background:#94a3b8; cursor:not-allowed; }
button.secondary { background:#0d9488; }
button.secondary:hover:not(:disabled) { background:#0f766e; }

.loading { text-align:center; padding:2rem; color:#64748b; }
.error-msg { color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; padding:.75rem 1rem; max-width:760px; margin:0.5rem auto; border-radius:.6rem; font-size:.85rem; }

.generated textarea { width:100%; height:200px; font-family:monospace; font-size:.75rem; padding:.5rem; border:1px solid #cbd5e1; border-radius:.5rem; background:#fff; }
.generated summary { cursor:pointer; font-weight:600; margin-bottom:.5rem; }

footer { text-align:center; font-size:.7rem; color:#64748b; margin-top:1rem; }

/* Top bar with language selector and logo */
.top-bar { display:flex; justify-content:space-between; align-items:center; max-width:760px; margin:0 auto 1.2rem; padding:.25rem .25rem; }
.lang-select { display:flex; align-items:center; gap:.35rem; }
.lang-label { font-size:.65rem; font-weight:600; letter-spacing:.5px; color:#475569; }
.lang-dropdown { padding:.35rem .55rem; border:1px solid #cbd5e1; border-radius:.45rem; font-size:.7rem; background:#fff; font-weight:600; cursor:pointer; }
.lang-dropdown:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 2px #6366f133; }

.brand-link { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; background:#ffffff; padding:.35rem .6rem; border:1px solid #e2e8f0; border-radius:.6rem; box-shadow:0 2px 6px -2px rgba(15,23,42,.15); transition:.25s ease; font-size:.65rem; font-weight:600; color:#6366f1; }
.brand-link:hover { background:#f1f5f9; border-color:#cbd5e1; transform:translateY(-2px); }
.brand-logo { width:30px; height:30px; border-radius:8px; display:block; }
.brand-text { display:none; letter-spacing:.5px; }
@media (min-width:540px){ .brand-text { display:inline; } }

/* SmartgearEase Branding */
.smartgearease-branding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(108, 92, 231, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(108, 92, 231, 0.2);
}

.smartgearease-branding:hover {
  background: rgba(108, 92, 231, 0.2);
  border-color: rgba(108, 92, 231, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
}

.smartgearease-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.smartgearease-text {
  font-size: 11px;
  font-weight: 600;
  color: #6C5CE7;
  white-space: nowrap;
}

/* Authentication Form Styles */
.auth-container { max-width: 480px; margin: 0 auto; padding: 2rem; }
.auth-form { background: #fff; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 14px -4px rgba(15,23,42,.2); border: 1px solid #e2e8f0; }
.auth-form input.error { border-color: #dc2626; box-shadow: 0 0 0 3px #dc262633; }
.auth-form button { width: 100%; }

/* App Signature Footer */
.app-signature {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem;
  border-top: 1px solid rgba(108, 92, 231, 0.1);
}

.sig-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sig-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.sig-logo:hover {
  opacity: 1;
}

.sig-text {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.sig-link {
  color: #6C5CE7;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sig-link:hover {
  color: #4C3CB7;
  text-decoration: underline;
}

@media (max-width:640px) { 
	.live-preview { width:100%; padding:.8rem .8rem 6rem; }
	.name-text { bottom:1rem; font-size:48px; }
	
	.sig-inner {
	  flex-direction: column;
	  gap: 4px;
	}
	
	.sig-logo {
	  width: 20px;
	  height: 20px;
	}
}

/* Tabs */
.main-tabs { display:flex; gap:.4rem; justify-content:center; margin:0 auto 1rem; flex-wrap:wrap; }
.main-tabs button { background:#e2e8f0; color:#1e293b; padding:.55rem .9rem; border:none; border-radius:.7rem; font-size:.8rem; font-weight:600; cursor:pointer; box-shadow:0 2px 4px -1px rgba(15,23,42,.15); transition:.2s; }
.main-tabs button.active { background:#6366f1; color:#fff; box-shadow:0 2px 6px -1px rgba(99,102,241,.5); }
.main-tabs button:hover:not(.active) { background:#cbd5e1; }

/* Stores grid (responsive grid) */
.stores-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); max-width:1100px; margin:1.2rem auto 2.4rem; }
.store-card { --accent:#6366f1; background:linear-gradient(#ffffff,#ffffff) padding-box, linear-gradient(135deg,#6366f1,#8b5cf6,#6366f1) border-box; border:2px solid transparent; border-radius:1.4rem; padding:1.05rem 1rem 1.2rem; box-shadow:0 6px 18px -6px rgba(99,102,241,.35),0 2px 6px -2px rgba(15,23,42,.15); position:relative; display:flex; flex-direction:column; gap:.55rem; text-decoration:none; cursor:pointer; transition:.35s ease; }
.store-card:hover { transform:translateY(-6px); box-shadow:0 10px 28px -8px rgba(99,102,241,.45),0 4px 12px -4px rgba(15,23,42,.25); }
.store-card:active { transform:translateY(-2px); }
.store-card h3 { margin:.1rem 0 0; font-size:1.02rem; color:#111827; letter-spacing:.3px; }
.store-card .store-url { font-size:.68rem; font-weight:600; color:#6366f1; letter-spacing:.5px; }
.store-card .store-desc { font-size:.72rem; line-height:1.3; color:#374151; flex:1; }
.store-card.clickable:focus-visible { outline:3px solid #6366f1; outline-offset:2px; }

/* Secret Picks gallery */
.secret-hero { text-align:center; margin: 0 auto 1rem; max-width: 900px; }
.secret-hero h2 { margin:0; font-size:1.6rem; }
.secret-hero .secret-tag { color:#475569; font-size:.9rem; margin:.35rem 0 0; }

.secret-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); max-width:1200px; margin:0 auto 2rem; }
.secret-card { background:#fff; border-radius:1rem; overflow:hidden; box-shadow:0 8px 22px -10px rgba(15,23,42,.35); border:1px solid #e2e8f0; transition:.3s ease; }
.secret-card:hover { transform: translateY(-4px); box-shadow:0 12px 28px -12px rgba(15,23,42,.45); }
.secret-media { aspect-ratio: 1 / 1; background: #fde8ef; display:flex; align-items:center; justify-content:center; }
.secret-media img { width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 4px 20px rgba(0,0,0,.35)); background:transparent; }
.secret-info { padding:.6rem .8rem .8rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.secret-title { font-weight:700; font-size:.9rem; color:#111827; }
.secret-note { font-size:.7rem; color:#64748b; }
.secret-hint { text-align:center; font-size:.85rem; color:#475569; margin-top:.5rem; }