/* style.css - responsive, mobile-first */
:root{
  --accent:#ff6b00;
  --muted:#666;
  --card:#fff;
  --bg:#f6f7f9;
  --maxw:1100px;
}

*{box-sizing:border-box}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  margin:0; background:var(--bg); color:#222; -webkit-font-smoothing:antialiased;
}
.cv-app{max-width:var(--maxw); margin:18px auto; padding:12px;}
.cv-header h1{margin:0 0 6px;font-size:20px}
.cv-header .muted{color:var(--muted); margin:0 0 12px; font-size:14px}

.cv-grid{display:grid; grid-template-columns:1fr; gap:18px;}
/* larger screens: two columns */
@media(min-width:980px){
  .cv-grid{grid-template-columns:420px 1fr; align-items:start;}
}

/* FORM */
.cv-form{background:var(--card); padding:14px; border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,0.04)}
.form-row{margin-bottom:12px}
label{display:block; font-weight:600; margin-bottom:6px; font-size:13px}
input[type=text], input[type=email], textarea{width:100%; padding:8px 10px; border:1px solid #e6e6e6; border-radius:6px; font-size:14px; background:#fff}
textarea{min-height:80px; resize:vertical}
.btn{display:inline-block; padding:8px 12px; border-radius:8px; background:#f0f0f0; border:0; cursor:pointer}
.btn.small{font-size:13px; padding:6px 10px}
.btn.primary{background:var(--accent); color:#fff}

/* repeatable container */
.repeatable h4{display:flex; justify-content:space-between; align-items:center; margin:0 0 8px}
.repeatable .item{border:1px dashed #eee; padding:8px; border-radius:6px; margin-bottom:8px}

/* sponsor CTA row */
.sponsor-cta{display:flex; gap:10px; align-items:center; margin:12px 0; background:#fff; padding:10px; border-radius:8px}
.sponsor-text{flex:1}
.sponsor-ad{width:150px; text-align:center}
.ad-placeholder{background:#f5f7fa; border:1px solid #e6e6e9; padding:18px; border-radius:6px; color:#666}

/* preview */
.cv-preview{padding:6px}
.preview-card{background:#fff; border-radius:8px; padding:14px; box-shadow:0 2px 10px rgba(0,0,0,0.04)}
.preview-header h2{margin:0; font-size:20px}
.pv-contact{color:var(--muted); font-size:13px; margin-top:6px}
.pv-section{margin-top:12px}
.pv-section h3{margin:0 0 8px; font-size:14px}
.tags{font-size:13px; color:var(--muted)}

/* preview ad */
.preview-ad{margin-top:14px}

/* monetize overlay */
.monetize-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9998; align-items:center; justify-content:center}
.monetize-overlay .monetize-box{background:#fff; padding:18px; width:90%; max-width:420px; border-radius:10px; position:relative}
.close-overlay{position:absolute; top:8px; right:8px; border:0; background:transparent; font-size:20px}
.overlay-actions{display:flex; gap:8px; justify-content:center; margin-top:12px}

/* small utilities */
.muted{color:var(--muted); font-size:13px}