:root{
  --wine-950:#210810;
  --wine-900:#2f0c15;
  --wine-800:#3d111c;
  --wine-700:#4c1826;
  --gold:#c9a961;
  --gold-soft:#e4cd93;
  --cream:#f4ead9;
  --cream-dim:#cbb9a4;
  --line: rgba(201,169,97,0.28);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(1200px 500px at 15% -10%, var(--wine-700), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, var(--wine-800), transparent 55%),
    var(--wine-950);
  color:var(--cream);
  font-family:'Inter', sans-serif;
  min-height:100vh;
}
.wrap{max-width:920px; margin:0 auto; padding:56px 24px 100px;}

.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--gold);}

h1.brand{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:clamp(40px,7vw,64px);
  line-height:1;
  margin:0 0 6px;
  letter-spacing:.01em;
  color:var(--cream);
}
h1.brand em{ font-style:italic; color:var(--gold-soft); }

.subhead{
  font-size:16px; color:var(--cream-dim); max-width:600px; line-height:1.55;
  margin:14px 0 36px;
}

/* tabs */
.tabs{ display:flex; gap:6px; margin-bottom:32px; border-bottom:1px solid var(--line); }
.tab-btn{
  background:transparent; border:none; color:var(--cream-dim);
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; letter-spacing:.02em;
  padding:12px 6px; margin-right:26px; cursor:pointer; position:relative; top:1px;
  border-bottom:2px solid transparent;
}
.tab-btn.active{ color:var(--gold-soft); border-bottom-color:var(--gold); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border:1px solid var(--line);
  border-radius:6px;
  padding:36px;
  margin-bottom:28px;
}

.card h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:26px;
  color:var(--gold-soft);
  margin:0 0 20px;
  display:flex; align-items:baseline; gap:12px;
}
.card h2 .num{
  font-size:13px; color:var(--gold); letter-spacing:.15em; font-family:'Inter',sans-serif;
}
.card h3.mini{
  font-family:'Cormorant Garamond', serif; font-size:19px; color:var(--gold-soft);
  margin:26px 0 12px; font-weight:600;
}

label{
  display:block; font-size:12px; letter-spacing:.05em; color:var(--cream-dim);
  margin:0 0 6px; text-transform:uppercase;
}
.field{margin-bottom:20px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px;}
@media (max-width:640px){ .row2, .row3{grid-template-columns:1fr;} }

input[type=text], textarea, select{
  width:100%;
  background:rgba(0,0,0,0.18);
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px 14px;
  color:var(--cream);
  font-family:'Inter', sans-serif;
  font-size:14.5px;
  outline:none;
  transition:border-color .15s;
}
input::placeholder, textarea::placeholder{ color:rgba(244,234,217,0.32); }
input:focus, textarea:focus, select:focus{ border-color:var(--gold); }
textarea{ resize:vertical; min-height:64px; line-height:1.5; }

select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat:no-repeat; }

button.primary{
  width:100%;
  background:var(--gold);
  color:var(--wine-950);
  border:none;
  padding:16px;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.03em;
  border-radius:4px;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
}
button.primary:hover{ box-shadow:0 8px 24px rgba(201,169,97,0.25); transform:translateY(-1px); }
button.primary:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }

button.ghost{
  background:transparent; border:1px solid var(--line); color:var(--gold-soft);
  padding:9px 14px; font-size:12.5px; border-radius:4px; cursor:pointer; letter-spacing:.02em;
  font-family:'Inter',sans-serif;
}
button.ghost:hover{ border-color:var(--gold); }
button.small-x{
  background:transparent; border:1px solid var(--line); color:var(--cream-dim);
  width:28px; height:28px; border-radius:4px; cursor:pointer; font-size:14px; line-height:1;
}

.exp-row{ border:1px solid var(--line); border-radius:4px; padding:18px; margin-bottom:14px; background:rgba(0,0,0,0.1); position:relative; }
.exp-row-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.exp-row-top .label-exp{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }

.err{ color:#e0a5a5; font-size:13.5px; margin-top:10px; }

.loading{
  display:none; text-align:center; padding:40px 0; color:var(--cream-dim); font-size:14px;
}
.spin{
  width:26px; height:26px; margin:0 auto 16px;
  border:2px solid var(--line); border-top-color:var(--gold);
  border-radius:50%; animation:sp 0.9s linear infinite;
}
@keyframes sp{ to{ transform:rotate(360deg);} }

.results{ display:none; }

.visimap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.vaxis{ border:1px solid var(--line); border-radius:4px; padding:16px; background:rgba(0,0,0,0.15); }
.vaxis .top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.vaxis .name{ font-size:13px; color:var(--gold-soft); font-weight:600; }
.vaxis .score{ font-family:'Cormorant Garamond', serif; font-size:22px; color:var(--gold); }
.vaxis .bar{ height:3px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; margin-bottom:10px; }
.vaxis .bar > div{ height:100%; background:var(--gold); }
.vaxis .note{ font-size:12.5px; color:var(--cream-dim); line-height:1.5; }

.headline-opt{
  border:1px solid var(--line); border-radius:4px; padding:16px 18px; margin-bottom:12px;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  background:rgba(0,0,0,0.12);
}
.headline-opt p{ margin:0; font-size:14.5px; line-height:1.5; }

.copyblock{
  position:relative; border:1px solid var(--line); border-radius:4px; padding:20px 20px 16px;
  background:rgba(0,0,0,0.12); margin-bottom:16px;
}
.copyblock .txt{ margin:0; font-size:14.5px; line-height:1.7; color:var(--cream); white-space:pre-wrap; }
.copyblock .exp-title{ font-size:12.5px; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.copyblock .actions{ margin-top:14px; display:flex; justify-content:flex-end; }

.kw-list{ display:flex; flex-wrap:wrap; gap:8px; }
.kw-pill{
  border:1px solid var(--line); border-radius:20px; padding:6px 14px; font-size:13px; color:var(--gold-soft);
  background:rgba(201,169,97,0.06);
}

#bannerCanvasWrap{ text-align:center; }
#bannerCanvasWrap canvas{ max-width:100%; border-radius:4px; border:1px solid var(--line); }
.banner-actions{ display:flex; justify-content:center; gap:12px; margin-top:16px; flex-wrap:wrap; }

.cal-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.cal-table th{ text-align:left; color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--line); }
.cal-table td{ padding:10px; border-bottom:1px solid rgba(201,169,97,0.12); color:var(--cream); vertical-align:top; }
.cal-table td.day{ color:var(--gold-soft); font-weight:600; white-space:nowrap; }

.idea-item{ border-left:2px solid var(--gold); padding:8px 0 8px 16px; margin-bottom:10px; font-size:14px; line-height:1.55; }

.foot-note{
  text-align:center; font-size:12px; color:rgba(203,185,164,0.55); margin-top:44px; letter-spacing:.02em;
}

.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gold); color:var(--wine-950); font-size:13px; font-weight:600;
  padding:10px 20px; border-radius:4px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
