/* =============================================
   PIXEL PAPER N RISE — Design Studio
   main.css — Shared styles, Login, Dashboard
   ============================================= */

:root {
  --cream:        #fdf6f0;
  --cream-mid:    #f5ebe0;
  --cream-deep:   #ede0d0;
  --blush:        #e2c5ae;
  --peach:        #d4956a;
  --peach-deep:   #b87348;
  --brown:        #3a2e2b;
  --brown-mid:    #6b5046;
  --brown-light:  #9a7c6e;
  --sage:         #6b8f72;
  --white:        #ffffff;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', sans-serif;

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --shadow-sm:  0 2px 12px rgba(100,60,30,0.08);
  --shadow-md:  0 6px 30px rgba(100,60,30,0.12);
  --shadow-lg:  0 12px 50px rgba(100,60,30,0.16);
}

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--brown);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Background Orbs ── */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}
.orb1 { width: 500px; height: 500px; background: radial-gradient(circle, #e2c5ae55, transparent 70%); top: -150px; right: -100px; }
.orb2 { width: 400px; height: 400px; background: radial-gradient(circle, #d4956a22, transparent 70%); bottom: -100px; left: -80px; }
.orb3 { width: 300px; height: 300px; background: radial-gradient(circle, #6b8f7222, transparent 70%); top: 40%; left: 35%; }

/* =============================================
   APP HEADER (shared)
   ============================================= */
.app-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(253,246,240,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(212,149,106,0.18);
}
.header-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 0.6rem 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.header-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.header-title {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 400;
  color: var(--brown); letter-spacing: 0.04em;
  flex: 1;
}
.header-back {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.78rem; color: var(--brown-mid);
  background: none; border: 1px solid var(--blush);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}
.header-back:hover { background: var(--cream-mid); border-color: var(--peach); }

/* ── Shared Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--peach), var(--peach-deep));
  color: #fff; border: none; border-radius: var(--radius-md);
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0.06em;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 18px rgba(212,149,106,0.38);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(212,149,106,0.5); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary.full-width { width: 100%; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--blush);
  border-radius: var(--radius-sm); padding: 0.38rem 0.8rem;
  font-family: var(--font-body); font-size: 0.77rem;
  color: var(--brown-mid); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-ghost:hover { background: var(--cream-mid); border-color: var(--peach); color: var(--brown); }
.btn-signout { margin-left: auto; opacity: 0.8; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--blush);
  border-radius: var(--radius-sm); padding: 0.6rem 1rem;
  font-family: var(--font-body); font-size: 0.82rem;
  color: var(--brown-mid); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-outline:hover { background: var(--cream-mid); border-color: var(--peach); color: var(--brown); }

/* =============================================
   LOGIN PAGE
   ============================================= */
.page-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem;
}
.login-outer {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  animation: fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) both;
}
.login-card {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212,149,106,0.2);
  border-radius: var(--radius-xl);
  padding: 2.75rem 2.25rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.login-logo {
  width: 96px; height: 96px; object-fit: contain;
  margin-bottom: 1.25rem;
  animation: logoFloat 5s ease-in-out infinite;
}
.login-title {
  font-family: var(--font-heading);
  font-size: 1.75rem; font-weight: 400;
  color: var(--brown); letter-spacing: 0.02em; margin-bottom: 0.35rem;
}
.login-sub {
  font-size: 0.85rem; color: var(--brown-light);
  font-weight: 300; letter-spacing: 0.02em; margin-bottom: 1.75rem;
}
.field-wrap { margin-bottom: 0.5rem; }
.auth-input {
  width: 100%; background: var(--cream);
  border: 1px solid var(--blush); border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  font-family: var(--font-body); font-size: 0.9rem;
  color: var(--brown); letter-spacing: 2px; outline: none;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input:focus { border-color: var(--peach); box-shadow: 0 0 0 3px rgba(212,149,106,0.13); }
.auth-input.shake { animation: shake 0.4s ease; border-color: #c0392b !important; }
.auth-error {
  color: #c0392b; font-size: 0.78rem;
  margin-bottom: 0.9rem; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.auth-error.hidden { display: none; }
.err-dot { font-size: 0.6rem; }
.login-brand {
  margin-top: 1.75rem; font-size: 0.7rem;
  color: var(--blush); letter-spacing: 0.08em; text-transform: uppercase;
}

/* =============================================
   DASHBOARD
   ============================================= */
.page-dashboard { min-height: 100vh; }
.dashboard-main {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) both 0.1s;
}
.dashboard-hero { text-align: center; margin-bottom: 2.75rem; }
.dash-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 400; color: var(--brown);
  letter-spacing: 0.02em; margin-bottom: 0.75rem;
}
.dash-sub {
  font-size: 0.88rem; color: var(--brown-light);
  max-width: 480px; margin: 0 auto; line-height: 1.65;
  font-weight: 300;
}
.tool-grid {
  display: flex; flex-direction: column; gap: 1rem;
  margin-bottom: 2rem;
}
.tool-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212,149,106,0.18);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  box-shadow: var(--shadow-sm);
  animation: fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.tool-card:nth-child(1) { animation-delay: 0.15s; }
.tool-card:nth-child(2) { animation-delay: 0.25s; }
.tool-card:nth-child(3) { animation-delay: 0.35s; }
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--peach);
}
.tool-card:active { transform: scale(0.99); }
.tool-icon-wrap {
  width: 68px; height: 68px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tc-peach  { background: rgba(212,149,106,0.15); color: var(--peach-deep); }
.tc-brown  { background: rgba(58,46,43,0.1); color: var(--brown-mid); }
.tc-sage   { background: rgba(107,143,114,0.15); color: var(--sage); }
.tool-info { flex: 1; min-width: 0; }
.tool-name {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 400; color: var(--brown);
  margin-bottom: 0.3rem; letter-spacing: 0.02em;
}
.tool-desc {
  font-size: 0.83rem; color: var(--brown-light);
  line-height: 1.55; font-weight: 300;
  margin-bottom: 0.65rem;
}
.tool-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-size: 0.68rem; background: var(--cream-mid);
  border: 1px solid var(--blush); border-radius: 20px;
  padding: 0.18rem 0.6rem; color: var(--brown-mid);
  letter-spacing: 0.03em; white-space: nowrap;
}
.tool-arrow {
  color: var(--blush); flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}
.tool-card:hover .tool-arrow { transform: translateX(4px); color: var(--peach); }
.dash-note {
  text-align: center; font-size: 0.76rem;
  color: var(--brown-light); letter-spacing: 0.03em;
  font-weight: 300; opacity: 0.8;
}

/* =============================================
   SHARED FORM/DESIGNER ELEMENTS
   ============================================= */
.section-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212,149,106,0.16);
  border-radius: var(--radius-lg); padding: 1.25rem;
  margin-bottom: 1rem;
}
.sec-title {
  font-family: var(--font-heading);
  font-size: 0.92rem; font-weight: 400; color: var(--brown);
  letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 0.9rem;
}
.sec-dot { color: var(--peach); font-size: 0.55rem; }

/* Fields */
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.fields-grid.cols-1 { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.span2 { grid-column: 1 / -1; }
.field label {
  font-size: 0.7rem; color: var(--brown-light);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400;
}
.field input, .field select, .field textarea {
  background: var(--cream); border: 1px solid var(--blush);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body); font-size: 0.84rem; color: var(--brown);
  outline: none; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--blush); font-weight: 300; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--peach);
  box-shadow: 0 0 0 3px rgba(212,149,106,0.1);
}
.field textarea { resize: vertical; min-height: 70px; }

/* Logo upload */
.logo-drop {
  border: 1.5px dashed var(--blush); border-radius: var(--radius-md);
  padding: 1.25rem; text-align: center; cursor: pointer;
  background: var(--cream); transition: border-color 0.2s, background 0.2s;
}
.logo-drop:hover { border-color: var(--peach); background: var(--cream-mid); }
.logo-drop-icon { color: var(--blush); display: flex; justify-content: center; margin-bottom: 0.4rem; }
.logo-drop-txt { font-size: 0.8rem; color: var(--brown-light); margin-bottom: 0.2rem; }
.logo-drop-hint { font-size: 0.68rem; color: var(--blush); }
.logo-preview-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.85rem; background: var(--cream);
  border: 1px solid var(--blush); border-radius: var(--radius-sm);
  margin-top: 0.6rem;
}
.logo-preview-row img { max-height: 44px; max-width: 110px; object-fit: contain; border-radius: 3px; }
.btn-remove {
  margin-left: auto; background: none; border: 1px solid rgba(192,57,43,0.3);
  border-radius: 6px; padding: 0.25rem 0.55rem; font-size: 0.7rem;
  color: #c0392b; cursor: pointer; transition: background 0.15s;
}
.btn-remove:hover { background: rgba(192,57,43,0.07); }

/* Color pickers */
.color-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; }
.color-row label { font-size: 0.72rem; color: var(--brown-light); text-transform: uppercase; letter-spacing: 0.05em; }
.color-swatch {
  display: flex; align-items: center; gap: 7px;
  background: var(--cream); border: 1px solid var(--blush);
  border-radius: var(--radius-sm); padding: 3px 10px 3px 5px;
  cursor: pointer; transition: border-color 0.15s;
}
.color-swatch:hover { border-color: var(--peach); }
.color-swatch input[type="color"] {
  width: 24px; height: 24px; border: none; background: none;
  padding: 0; cursor: pointer; border-radius: 4px;
  -webkit-appearance: none;
}
.color-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
.hex-label { font-family: 'Courier New', monospace; font-size: 0.68rem; color: var(--brown-light); min-width: 54px; }
.palette-label { font-size: 0.68rem; color: var(--brown-light); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.75rem 0 0.45rem; }
.palettes { display: flex; flex-wrap: wrap; gap: 7px; }
.palette-dot {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid transparent; transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.palette-dot:hover { transform: scale(1.22); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* Template grid */
.tmpl-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.tmpl-thumb {
  cursor: pointer; border-radius: 7px; overflow: hidden;
  border: 2px solid transparent; transition: border-color 0.18s, transform 0.15s;
  background: #fff;
}
.tmpl-thumb:hover { transform: translateY(-2px); border-color: var(--blush); }
.tmpl-thumb.sel { border-color: var(--peach); box-shadow: 0 2px 10px rgba(212,149,106,0.3); }
.tmpl-inner { transform: scale(0.245); transform-origin: top left; width: 408%; height: 204px; pointer-events: none; }
.tmpl-wrap { height: 50px; overflow: hidden; position: relative; }
.tmpl-label { font-size: 7px; text-align: center; padding: 2px; color: var(--brown-light); background: var(--cream); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Font options */
.font-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.font-opt {
  border: 1.5px solid var(--blush); border-radius: var(--radius-sm);
  padding: 0.55rem 0.4rem; text-align: center; cursor: pointer;
  background: var(--cream); transition: border-color 0.15s, background 0.15s;
}
.font-opt:hover { border-color: var(--peach); background: var(--cream-mid); }
.font-opt.sel { border-color: var(--peach); background: rgba(212,149,106,0.08); }
.font-preview { font-size: 1.1rem; color: var(--brown); line-height: 1; }
.font-name { font-size: 0.65rem; color: var(--brown-light); margin-top: 3px; letter-spacing: 0.03em; }

/* Export */
.export-card {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(212,149,106,0.16);
  border-radius: var(--radius-lg); padding: 1.1rem;
  margin-top: 0.9rem;
}
.export-title { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 400; color: var(--brown); letter-spacing: 0.04em; margin-bottom: 0.65rem; }
.export-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.btn-export {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--cream); border: 1px solid var(--blush);
  border-radius: var(--radius-sm); padding: 0.6rem 0.4rem;
  font-family: var(--font-body); font-size: 0.77rem; color: var(--brown-mid);
  cursor: pointer; letter-spacing: 0.04em;
  transition: all 0.15s;
}
.btn-export:hover { background: var(--cream-deep); border-color: var(--peach); color: var(--brown); transform: translateY(-1px); }
.btn-export.pdf { background: linear-gradient(135deg, var(--peach), var(--peach-deep)); border-color: var(--peach-deep); color: #fff; }
.btn-export.pdf:hover { opacity: 0.88; color: #fff; }
.export-msg { font-size: 0.73rem; color: var(--brown-light); text-align: center; min-height: 16px; margin-top: 0.5rem; letter-spacing: 0.02em; }
.export-msg.ok { color: var(--peach-deep); }
.export-msg.err { color: #c0392b; }

/* Save/Load bar */
.save-bar {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-top: 0.7rem;
}
.save-msg { font-size: 0.73rem; color: var(--peach-deep); letter-spacing: 0.02em; min-height: 16px; margin-top: 0.4rem; text-align: center; }

/* Preview stage */
.preview-stage {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(212,149,106,0.15);
  border-radius: var(--radius-lg); padding: 2rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; overflow: auto;
}
.card-shadow { filter: drop-shadow(0 8px 28px rgba(80,40,10,0.18)); }

/* Preview size toggle */
.size-btns { display: flex; gap: 4px; }
.size-btn {
  background: none; border: 1px solid var(--blush); border-radius: 6px;
  padding: 0.2rem 0.5rem; font-size: 0.7rem; color: var(--brown-light);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.size-btn.active, .size-btn:hover { background: var(--peach); border-color: var(--peach); color: #fff; }

/* =============================================
   DESIGNER LAYOUT
   ============================================= */
.page-designer { min-height: 100vh; }
.designer-wrap {
  position: relative; z-index: 1;
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 400px 1fr;
  min-height: calc(100vh - 62px);
  animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both 0.05s;
}
.left-panel {
  border-right: 1px solid rgba(212,149,106,0.14);
  padding: 1.25rem;
  overflow-y: auto;
  max-height: calc(100vh - 62px);
}
.right-panel { padding: 1.25rem; }
.preview-sticky { position: sticky; top: calc(62px + 1.25rem); }
.preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }

/* Tab bar for double-side */
.tab-bar {
  display: flex; gap: 0; margin-bottom: 1rem;
  background: var(--cream-mid); border-radius: var(--radius-sm);
  padding: 3px; border: 1px solid var(--blush);
}
.tab-btn {
  flex: 1; background: none; border: none; border-radius: 6px;
  padding: 0.55rem 0.5rem; font-family: var(--font-body);
  font-size: 0.8rem; color: var(--brown-mid); cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.tab-btn.active { background: white; color: var(--brown); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* =============================================
   DOUBLE-SIDE PREVIEW FLIP
   ============================================= */
.flip-container { perspective: 900px; }
.flip-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.76rem; color: var(--brown-mid);
  background: none; border: 1px solid var(--blush);
  border-radius: var(--radius-sm); padding: 0.32rem 0.7rem;
  cursor: pointer; transition: all 0.15s;
}
.flip-btn:hover { border-color: var(--peach); color: var(--brown); background: var(--cream-mid); }

/* =============================================
   EMAIL SIGNATURE SPECIFIC
   ============================================= */
.sig-layout-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 0.5rem; }
.sig-layout-opt {
  border: 2px solid var(--blush); border-radius: var(--radius-sm);
  padding: 0.7rem 0.5rem; cursor: pointer; background: var(--cream);
  transition: border-color 0.15s, background 0.15s; text-align: center;
}
.sig-layout-opt:hover { border-color: var(--peach); background: var(--cream-mid); }
.sig-layout-opt.sel { border-color: var(--peach); background: rgba(212,149,106,0.08); }
.sig-layout-icon { font-size: 1.4rem; margin-bottom: 3px; }
.sig-layout-name { font-size: 0.72rem; color: var(--brown-mid); }

.sig-preview-wrap {
  background: #f5f5f5; border: 1px solid #ddd;
  border-radius: var(--radius-md); padding: 1.5rem; overflow: auto;
}
.sig-copy-wrap { margin-top: 0.75rem; }
.btn-copy-sig {
  width: 100%; background: var(--cream-deep);
  border: 1px solid var(--blush); border-radius: var(--radius-md);
  padding: 0.75rem; font-family: var(--font-body);
  font-size: 0.85rem; color: var(--brown); cursor: pointer;
  transition: all 0.15s; letter-spacing: 0.03em;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-copy-sig:hover { background: var(--cream-mid); border-color: var(--peach); }
.btn-copy-sig.copied { background: rgba(107,143,114,0.12); border-color: var(--sage); color: var(--sage); }
.sig-instructions {
  background: rgba(212,149,106,0.07); border: 1px solid rgba(212,149,106,0.2);
  border-radius: var(--radius-md); padding: 0.85rem;
  margin-top: 0.75rem; font-size: 0.78rem; color: var(--brown-mid); line-height: 1.6;
}
.sig-instructions h4 { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 400; margin-bottom: 0.4rem; color: var(--brown); }
.sig-instructions ol { padding-left: 1.1rem; }
.sig-instructions li { margin-bottom: 0.25rem; }

/* =============================================
   SOCIAL LINKS (signature)
   ============================================= */
.social-fields { display: flex; flex-direction: column; gap: 0.5rem; }
.social-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream); border: 1px solid var(--blush);
  border-radius: var(--radius-sm); padding: 0.35rem 0.6rem;
}
.social-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.social-row input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-body); font-size: 0.82rem; color: var(--brown);
}
.social-row input::placeholder { color: var(--blush); font-weight: 300; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}

/* =============================================
   MOBILE RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .designer-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .left-panel {
    border-right: none;
    border-bottom: 1px solid rgba(212,149,106,0.14);
    max-height: none;
    overflow-y: visible;
  }
  .right-panel { padding: 1rem; }
  .preview-sticky { position: relative; top: 0; }
}

@media (max-width: 640px) {
  .header-inner { padding: 0.5rem 1rem; }
  .header-title { font-size: 0.88rem; }
  .left-panel, .right-panel { padding: 0.9rem; }
  .fields-grid { grid-template-columns: 1fr; }
  .field.span2 { grid-column: 1; }
  .tmpl-grid { grid-template-columns: repeat(5,1fr); gap: 5px; }
  .font-grid { grid-template-columns: repeat(3,1fr); }
  .export-btns { grid-template-columns: 1fr 1fr 1fr; }
  .preview-stage { padding: 1.25rem; }
  .dashboard-main { padding: 2rem 1rem 3rem; }
  .tool-card { flex-direction: column; align-items: flex-start; }
  .tool-arrow { align-self: flex-end; }
  .sig-layout-grid { grid-template-columns: repeat(2,1fr); }
  .login-card { padding: 2.25rem 1.5rem; }
  .login-logo { width: 80px; height: 80px; }
}

@media (max-width: 400px) {
  .export-btns { grid-template-columns: 1fr 1fr 1fr; }
  .tmpl-grid { grid-template-columns: repeat(5,1fr); gap: 4px; }
}