:root{
--gap: 18px;
--radius: 10px;
--accent: #0b76ef;
--max-width: 1100px;
}

body{
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background:#f4f6f8;
margin: 32px;
display:flex;
justify-content:center;
}

.container{ width:100%; max-width:var(--max-width); }

.panel{
display:flex;
border-radius:var(--radius);
overflow:hidden;
margin-bottom:var(--gap);
box-shadow:0 5px 16px rgba(0,0,0,0.1);
background:#fff;
min-height:200px;
}

/* 1/3 Media, 2/3 Ad section */
.media{ flex:1 1 33.333%; position:relative; background:#000; }
.ad{ flex:2 1 66.667%; padding:24px; display:flex; flex-direction:column; justify-content:center; }

.media img, .media video, .media iframe{
width:100%; height:100%; object-fit:cover;
}

/* Ad content */
.ad h2{ margin:0; font-size:1.3rem; color:#0f172a; }
.ad p{ margin:6px 0 0 0; color:#334155; }
.cta-row{ margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn{ background:var(--accent); color:#fff; text-decoration:none; padding:9px 14px; border-radius:8px; font-weight:600; }
.meta{ font-size:0.9rem; color:#64748b; }

/* Toggle controls */
.controls{
position:absolute; top:10px; left:10px;
display:flex; gap:6px; z-index:10;
}
.controls button{
border:none;
background:rgba(255,255,255,0.8);
padding:6px 8px;
border-radius:6px;
cursor:pointer;
font-size:0.8rem;
}

/* Watermark overlay */
.watermark{
position:absolute;
bottom:8px;
right:12px;
background:rgba(0,0,0,0.45);
color:#fff;
font-size:0.85rem;
padding:4px 10px;
border-radius:6px;
font-weight:600;
font-family:Arial,Helvetica,sans-serif;
pointer-events:none; /* ignore clicks */
user-select:none;
}

.watermark {
  color: #0B76EF;
  opacity: 0.5;
}

@media(max-width:720px){
.panel{ flex-direction:column; }
.media{ height:220px; flex:none; }
.ad{ padding:16px; }
}

/* small helper text */
.note{ font-size:0.86rem; color:#94a3b8; }