:root{
  --bg:#0b0c10; --panel:#111218; --text:#f1f5f9; --muted:#a8b0bf; --accent:#4f46e5; --border:#1f2937;
  --paper:#ffffff; --ink:#0b0c10;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Utility */
.hidden{display:none !important}
.small{font-size:12px;color:#94a3b8}

/* Header (centered) */
.site-header{max-width:1200px;margin:0 auto;text-align:center;padding:24px 16px 10px}
.logo{font-size:28px;font-weight:800;color:#a7f3d0;letter-spacing:.4px}
.tagline{color:var(--muted)}
#drop-area.dragover{outline:2px dashed #60a5fa; outline-offset:6px}

/* Info banner */
.info-banner{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:12px;
  background:#0f1117; border:1px solid var(--border); border-radius:10px;
  color:#cbd5e1;
}
.info-banner .info-dot{width:8px;height:8px;border-radius:999px;background:#34d399;box-shadow:0 0 8px #34d399}

/* ===== LAYOUT (STACKED + CENTERED) ===== */
.layout{
  display:flex; flex-direction:column; align-items:center;
  gap:24px; padding:24px 16px; max-width:1200px; margin:0 auto;
}
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:20px; width:100%; max-width:1180px; margin:0 auto;
}
.preview-panel .page{ margin:0 auto }

/* Footer (centered) */
.site-footer{max-width:1200px;margin:0 auto;text-align:center;padding:16px}
.bmc-link{color:#6ee7b7;font-weight:600;text-decoration:none;margin-left:8px}
.bmc-link:hover{text-decoration:underline}

/* Form */
.field{margin-bottom:14px}
label{font-size:13px;color:var(--muted);display:block;margin-bottom:6px}
input,textarea,select{
  width:100%;
  border:1px solid var(--border);
  background:#0f1117;
  color:var(--text);
  border-radius:10px;
  padding:14px 16px;
  font-size:16px;
  caret-color:var(--text);
}
textarea{font-family:ui-monospace,monospace; line-height:1.5; min-height:120px}
input::placeholder, textarea::placeholder{color:#94a3b8}
.row{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Import status + spinner */
.import-status{margin-top:8px;min-height:20px;color:#cbd5e1}
.import-status.success{color:#86efac}
.import-status.error{color:#fda4af}
.spinner{
  width:14px;height:14px;border:2px solid #64748b;border-top-color:#cbd5e1;border-radius:50%;
  display:inline-block;animation:spin 1s linear infinite;vertical-align:middle
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Buttons */
.btn{background:#0f172a;border:1px solid var(--border);color:var(--text);
  padding:13px 18px;border-radius:10px;cursor:pointer;font-weight:700;font-size:15px}
.btn.primary{background:var(--accent);border-color:#4338ca}
.link{background:none;border:none;color:#93c5fd;cursor:pointer;text-decoration:underline}

/* Preview page */
.preview-panel{overflow:auto}
.page{background:var(--paper);color:var(--ink);border-radius:10px}
.page-letter{
  width:100%; max-width:1180px; aspect-ratio: 8.5 / 11;
  padding:1in; border:1px solid #e5e7eb; background:white;
}

/* Ads */
.ad-slot{
  background:#0f1117;border:1px dashed var(--border);border-radius:10px;text-align:center;padding:14px;margin:16px 0;
  width:100%;max-width:1180px;margin-left:auto;margin-right:auto
}
.ad-label{font-size:12px;color:#a8b0bf}

/* Export disclaimer */
.export-disclaimer{
  margin-top:10px;
  font-size:13px;
  line-height:1.4;
  color:#94a3b8;
  background:#0f1117;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
}
.export-disclaimer strong{ color:#e2e8f0; }

/* ========== Drawer (right-side on desktop; bottom-sheet on mobile) ========== */
.drawer{position:fixed; inset:0; z-index:1000;}
.drawer.hidden{display:none !important}
.drawer__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.drawer__panel{
  position:absolute; top:0; right:0; height:100%;
  width:520px; max-width:92vw;
  background:var(--panel);
  border-left:1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,.35);
  padding:12px; overflow:auto; border-radius:0 0 0 0;
}
.drawer__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.drawer__header h3{margin:0;font-size:16px}
.drawer__close{background:#0f172a;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer}
.drawer__content{padding:4px}
.drawer__footer{display:flex;align-items:center;gap:10px;margin-top:10px}

.map-grid{display:grid;grid-template-columns:1fr;gap:10px}
.map-row{border:1px solid var(--border);border-radius:10px;padding:10px;background:#0f1117}
.map-row header{margin-bottom:6px}
.map-row .label{font-size:12px;color:#94a3b8}
.map-row input,.map-row textarea{
  width:100%; background:#0b0c10; color:var(--text);
  border:1px solid #263244; border-radius:10px; padding:10px 12px; font-size:14px
}
.map-row textarea{min-height:110px}

/* Undo snackbar */
.undo{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:1100; background:#0f1117; color:#e5e7eb;
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
}

/* Mobile: turn drawer into a bottom sheet for small screens */
@media (max-width:900px){
  .drawer__panel{
    right:auto; left:0; width:100%;
    height:70vh; top:auto; bottom:0;
    border-left:none; border-top:1px solid var(--border);
    border-radius:14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
  }
}

/* Print */
@media print{
  @page{size:Letter;margin:.5in}
  body{background:#fff}
  .site-header,.ad-slot,.site-footer,.drawer,.undo{display:none!important}
  .layout{display:block;padding:0;width:auto;max-width:none}
  .panel{border:none;padding:0;width:auto;max-width:none}
  .page-letter{width:8.5in; min-height:11in; aspect-ratio:auto; padding:.5in; border:none}
}

/* ===== SHARED ELEMENTS ===== */
.head .name{font-size:22pt;font-weight:800}
.head .meta{color:#475569;margin-top:2pt}
.head .meta.small{font-size:9.5pt;color:#64748b}
.section{margin-top:10pt}
.section h3{font-size:12pt;margin:10pt 0 6pt 0}
.contact{list-style:none;padding:0;margin:6pt 0}
.contact li{margin:4pt 0;color:#334155}
.m-job{padding:6pt 0;border-bottom:1px solid #e5e7eb}
.m-role{font-weight:700}

/* ===== 20 CORE TEMPLATES (IMPROVED) ===== */

/* 1) Ivory Lily — Minimalist Grid */
.ivory-lily .wrap{display:grid;grid-template-columns:0.35fr 1fr;gap:16pt;align-items:start}
.ivory-lily .sidebar{border-right:2px solid #e2e8f0;padding-right:12pt}
.ivory-lily .sidebar .box{border:1px solid #e5e7eb;border-radius:10px;padding:8pt;margin:8pt 0;background:#fafafa}

/* 2) Navy Iris — Modern Sidebar (dark) */
.navy-iris .wrap{display:grid;grid-template-columns:0.32fr 1fr;gap:0}
.navy-iris .sidebar{background:#0f172a;color:#e5e7eb;border-radius:10px 0 0 10px;padding:12pt}
.navy-iris .sidebar .name{color:#e2e8f0}
.navy-iris .sidebar .meta,.navy-iris .sidebar li{color:#cbd5e1}
.navy-iris .main{background:#ffffff;border:1px solid #e5e7eb;border-left:none;border-radius:0 10px 10px 0;padding:12pt}

/* 3) Cobalt Orchid — Two Column (balanced) */
.cobalt-orchid .grid{display:grid;grid-template-columns:1fr 1fr;gap:16pt}
.cobalt-orchid .tag{display:inline-block;border:1px solid #bfdbfe;border-radius:999px;padding:2px 8px;margin:2px 4px}

/* 4) Charcoal Dahlia — Vertical Timeline */
.charcoal-dahlia .timeline{position:relative;margin-top:8pt}
.charcoal-dahlia .timeline::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:#0f172a}
.charcoal-dahlia .t-item{position:relative;padding-left:28px;margin:10pt 0}
.charcoal-dahlia .t-item::before{content:"";position:absolute;left:7px;top:6px;width:10px;height:10px;background:#0f172a;border-radius:999px}
.charcoal-dahlia .t-role{font-weight:800}

/* 5) Sandstone Poppy — Projects grid */
.sandstone-poppy .proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:12pt;margin-top:6pt}
.sandstone-poppy .proj{border:1px solid #e5e7eb;border-radius:10px;padding:10pt;background:#fff}
.sandstone-poppy .tag{display:inline-block;border:1px dashed #94a3b8;border-radius:999px;padding:2px 8px;margin:2px 4px;font-size:9pt}

/* 6) Teal Lotus — Table sections */
.teal-lotus table{width:100%;border-collapse:collapse;margin:8pt 0 10pt}
.teal-lotus th,.teal-lotus td{border:1px solid #e5e7eb;padding:6pt 8pt;text-align:left}
.teal-lotus th{background:#f1f5f9;color:#0f172a}

/* 7) Plum Wisteria — Gradient accent */
.plum-wisteria .accent{height:6px;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:999px;margin-bottom:8pt}
.plum-wisteria .pill{display:inline-block;background:#ede9fe;color:#3730a3;border-radius:999px;padding:4px 10px;margin:4px 6px;font-size:9pt}

/* 8) Sapphire Hyacinth — Profile header */
.sapphire-hyacinth .banner{background:#0a66c2;color:#fff;padding:12pt;border-radius:10pt;margin-bottom:10pt}
.sapphire-hyacinth .banner .title{font-size:18pt;font-weight:900}
.sapphire-hyacinth .grid{display:grid;grid-template-columns:1fr 1fr;gap:12pt}

/* 9) Sunset Camellia — Timeline cards */
.sunset-camellia .tcard{border:1px solid #fde68a;background:linear-gradient(180deg,#fff7ed,#ffffff);border-radius:12px;padding:10pt;margin:10pt 0}
.sunset-camellia .accent{height:3px;background:linear-gradient(90deg,#f59e0b,#ef4444,#8b5cf6);border-radius:999px;margin:6pt 0}

/* 10) Cobalt Aster — Card sections */
.cobalt-aster .card{border:1px solid #e5e7eb;border-radius:12px;padding:10pt;margin:10pt 0;box-shadow:0 2px 6px rgba(0,0,0,0.06)}

/* 11) Bluebell Azalea — Social style bar */
.bluebell-azalea .bar{background:#1877f2;color:#fff;padding:10pt;border-radius:8pt;margin-bottom:8pt}
.bluebell-azalea .post{border:1px solid #e2e8f0;border-radius:10px;padding:10pt;margin:8pt 0}

/* 12) Onyx Anemone — Magazine serif */
.onyx-anemone{font-family:Georgia,serif}
.onyx-anemone .title{font-size:22pt;font-weight:800;margin:0}
.onyx-anemone .lede{color:#111;margin-bottom:8pt}
.onyx-anemone .grid{display:grid;grid-template-columns:1fr 1fr;gap:16pt}

/* 13) Scarlet Carnation — Accent rule */
.scarlet-carnation .title{font-family:Georgia,serif;font-size:22pt;font-weight:800;margin-bottom:6pt}
.scarlet-carnation .accent{height:4px;background:#dc2626;margin:6pt 0;border-radius:999px}

/* 14) Fuchsia Bougainvillea — Editorial spread */
.fuchsia-bougainvillea .mast{font-size:28pt;font-weight:900;letter-spacing:1px}
.fuchsia-bougainvillea .sub{color:#a21caf}

/* 15) Verdant Verbena — Left accent bar */
.verdant-verbena .wrap{display:grid;grid-template-columns:0.04fr 1fr;gap:12pt}
.verdant-verbena .bar{background:#00d66b;border-radius:999px}
.verdant-verbena .content h3{color:#065f46}

/* 16) Golden Marigold — Creative split */
.golden-marigold .grid{display:grid;grid-template-columns:1fr 1fr;gap:14pt;margin-top:8pt}
.golden-marigold .kicker{color:#d97706;font-weight:800;letter-spacing:.5px}
.golden-marigold .rule{height:3px;background:#f59e0b;border-radius:999px;margin:6pt 0}

/* 17) Midnight Petunia — Dark mode */
.midnight-petunia{background:#0b0c10;color:#e5e7eb;padding:10pt;border-radius:10pt}
.midnight-petunia .accent{color:#22c55e;font-weight:800}
.midnight-petunia h3{color:#93c5fd}
.midnight-petunia .section{border:1px solid #334155;border-radius:10px;padding:8pt;margin:8pt 0}

/* 18) Silver Lilac — Typographic single column */
.silver-lilac{max-width:700pt;margin:0 auto}
.silver-lilac .name{font-size:26pt;font-weight:900;letter-spacing:.3px}
.silver-lilac .divider{height:2px;background:#e5e7eb;margin:8pt 0 10pt;border-radius:999px}
.silver-lilac h3{letter-spacing:.5px;text-transform:uppercase;font-size:11pt}

/* 19) Aqua Cosmos — Newspaper columns */
.aqua-cosmos .news{column-count:2;column-gap:18pt}
@media (max-width:900px){ .aqua-cosmos .news{column-count:1} }
.aqua-cosmos .lead{font-size:12pt;color:#0f172a;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:10pt}

/* 20) Coral Zinnia — Diagonal ribbon */
.coral-zinnia .ribbon{position:relative;background:#f43f5e;color:#fff;padding:12pt;border-radius:10pt;margin-bottom:12pt;overflow:hidden}
.coral-zinnia .ribbon::after{content:"";position:absolute;right:-30px;top:0;bottom:0;width:60px;background:rgba(0,0,0,0.12);transform:skewX(-20deg)}
.coral-zinnia .grid{display:grid;grid-template-columns:0.6fr 1fr;gap:16pt}