/* PPC Calculator v7 — removed chips; numeric input only for Clicks/day */
:root{
  --bg:#f6f7fb;
  --text:#0b1220;
  --muted:#667085;
  --line:#e6eaf2;
  --card:#ffffff;
  --blue:#2563eb;
  --blue-press:#1d4ed8;
  --ring: 0 0 0 3px rgba(37,99,235,.18);
  --shadow-lg: 0 18px 50px rgba(16,24,40,.08);
  --shadow-md: 0 8px 24px rgba(16,24,40,.06);
  --radius: 24px;
  --field-h: 56px;
  --metric-h: 128px;
  --pad-x: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing:.01em; }
.wrap{ width:min(960px,92vw); margin:40px auto }

.card{ background: linear-gradient(180deg,#fff,#fbfcff); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.7); padding: 22px 24px; }
.card-head{ margin-bottom: 16px; }
.card-head h2{ margin:0; font-size:18px; letter-spacing:.02em; font-weight:700 }

.grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:12px; }
@media (max-width: 760px){ .grid{ grid-template-columns:1fr } }

.field{ display:flex; flex-direction:column; gap:8px }
.field.small{ max-width:360px }
label{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#2f3b4f; letter-spacing:.08em }
.hint{ width:20px;height:20px;border-radius:999px; border:1px solid #d0d7e6; background:#fff; color:#3b4656; font-weight:800; font-size:12px; display:grid; place-items:center; cursor:pointer; }

.input-wrap{ position:relative; }
.input-wrap input{ width:100%; height:var(--field-h); appearance:textfield; border:1px solid #E3E8F3; background: linear-gradient(180deg,#f4f6fb,#eef2f8); border-radius:14px; padding:0 var(--pad-x); font-size:16px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.input-wrap.has-prefix input{ padding-left: calc(var(--pad-x) + 18px); }
.input-wrap.has-suffix input{ padding-right: calc(var(--pad-x) + 26px); }
.prefix, .suffix{ position:absolute; top:0; height:100%; display:grid; place-items:center; width:18px; color:#475569; font-weight:700; font-size:14px; }
.prefix{ left:10px; } .suffix{ right:10px; width:auto }
.input-wrap input:focus{ border-color:#c6d7ff; box-shadow: var(--ring); background:#fff; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.sub{ color:var(--muted); font-size:12px; margin-top:-2px }
.error{ color:#b00020; font-size:12px; min-height:14px }

/* Actions */
.actions{ grid-column:1 / -1; margin-top:4px }
.btnrow{ display:flex; align-items:center; gap:12px }
.left{ display:flex; gap:12px; flex-wrap:wrap }
.spacer{ flex:1 }
.btn{ appearance:none; border:0; cursor:pointer; border-radius:14px; padding:12px 18px; font-weight:700; transition: transform .08s ease, box-shadow .12s ease, background .12s ease; }
.btn.primary{ background:var(--blue); color:#fff; box-shadow:0 10px 28px rgba(37,99,235,.24) }
.btn.primary:active{ background:var(--blue-press); transform:translateY(0.5px) }
.btn.light{ background:#eef2ff; color:#1e3a8a; border:1px solid #dbe4ff; box-shadow:var(--shadow-md) }
.btn.light:active{ transform:translateY(0.5px) }
.link{ background:transparent; border:0; color:#2563eb; font-weight:700; font-size:14px; padding:6px 4px }
.link.subtle{ opacity:.9 }
.link::after{ content:" ›"; }

/* Advanced */
.advanced{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line) }
.advanced-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:760px){ .advanced-grid{ grid-template-columns:1fr } }

.sep{ border:none; border-top:1px solid var(--line); margin:16px 0 10px }

/* Results */
.results{ margin-top:6px }
.rgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:760px){ .rgrid{ grid-template-columns:1fr } }

.rcard{ border:1px solid #E3E8F3; border-radius:16px; background: linear-gradient(180deg,#ffffff,#fafbff); box-shadow: var(--shadow-md); padding:14px 16px; }
.rcard.primary{ background: linear-gradient(180deg,#ffffff,#f3f7ff); border-color:#dbe6ff; box-shadow: 0 10px 26px rgba(37,99,235,.10); }
.rcard h3{ margin:0 0 6px 0; font-size:13px; letter-spacing:.02em; color:#1f2a3a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.value{ margin:2px 0 0; font-weight:800; font-size:28px; letter-spacing:-.01em }
.hintline{ margin:4px 0 0; color:#667085; font-size:13px }

.pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch }
@media (max-width:760px){ .pair{ grid-template-columns:1fr } }
.item{ padding:8px 10px; border-radius:12px; background:#fff; border:1px solid #eef2f7 }
.item.metric{ min-height: var(--metric-h); display:flex; flex-direction:column; justify-content:flex-start }

/* Tooltip */
.tip{ border:0; border-radius:16px; padding:14px; max-width:min(420px,92vw); box-shadow:0 24px 62px rgba(0,0,0,.18); background:linear-gradient(180deg,#fff,#f5f7fb) }
.tip::backdrop{ background:rgba(10,22,40,.28) }

/* Hover/focus tooltip */
.tooltip{
  position: fixed;
  z-index: 1000;
  padding: 8px 10px;
  font-size: 12px;
  color: #0b1220;
  background: #ffffff;
  border: 1px solid #E3E8F3;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  max-width: 260px;
  transition: opacity 180ms cubic-bezier(.2,.6,.2,1), transform 180ms cubic-bezier(.2,.6,.2,1);
  opacity: 0;
  transform: translateY(4px);
}
.tooltip.show{ opacity:1; transform: translateY(0) }

.export-row{ display:flex; align-items:center; gap:12px; margin-top:12px }

.title-row{display:flex;align-items:center;gap:8px}
.title-row h3{margin:0}