:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eef5ff;
  background: #061326;
  color-scheme: dark;
  --panel: #0a1e39;
  --panel2: #0d2748;
  --line: rgba(255,255,255,.11);
  --line-strong: rgba(255,255,255,.17);
  --muted: #8fa4c3;
  --accent: #44c8ff;
  --good: #7ce6b2;
  --danger: #ff9ab0;
}
* { box-sizing: border-box; }
html { background: #061326; }
body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% -6%, rgba(68,200,255,.16), transparent 28rem),
    radial-gradient(circle at 92% 20%, rgba(124,230,178,.08), transparent 24rem),
    #061326;
}
button,input,textarea,select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
input,textarea,select,button,a { max-width: 100%; }

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 22px clamp(18px,4vw,48px);
  border-bottom: 1px solid var(--line);
  background: rgba(5,18,36,.88);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar > div:first-child { min-width: 0; }
.topbar h1 { margin: 4px 0 0; font-size: clamp(26px,4vw,38px); line-height: 1; letter-spacing: -.045em; }
.eyebrow { color: var(--good); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; align-items: end; min-width: 0; }
.top-actions label { color: var(--muted); font-size: 11px; min-width: min(220px, 100%); }
.top-actions input { display:block; margin-top:5px; min-width:190px; }
.top-actions a { min-height: 44px; }

button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 850;
  background: white;
  color: #07172e;
}
button.secondary, button.ghost { color: #eef5ff; background: rgba(255,255,255,.065); border: 1px solid var(--line); }
button.ghost { min-height: 38px; padding: 8px 10px; }

.demo-banner {
  margin: 18px clamp(18px,4vw,48px) 0 !important;
  padding: 13px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(124,230,178,.09), rgba(68,200,255,.055)) !important;
}
.demo-banner > div { min-width: 0; }
.demo-banner span { line-height: 1.45; }

main { width: min(1440px, 100%); margin: 0 auto; padding: 22px clamp(18px,4vw,48px) 56px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.stats-grid article {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(13,39,72,.94), rgba(8,28,53,.94));
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
}
.stats-grid span { display:block; color: var(--muted); font-size:12px; line-height: 1.3; }
.stats-grid strong { display:block; margin-top:8px; font-size:29px; line-height: 1; letter-spacing:-.04em; overflow-wrap: anywhere; }

.layout { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 16px; margin-top: 16px; align-items: start; }
.panel { min-width: 0; border:1px solid var(--line); border-radius:22px; background:rgba(8,27,51,.9); overflow:hidden; box-shadow: 0 16px 48px rgba(0,0,0,.12); }
.form-panel,.list-panel { padding: 22px; }
.panel-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:20px; min-width:0; }
.panel-heading > div { min-width: 0; }
.panel-heading h2 { margin:4px 0 0; font-size:22px; line-height: 1.15; }
.counter { flex: 0 0 auto; min-width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:rgba(68,200,255,.1); color:var(--accent); font-weight:900; }
form { display:grid; gap:13px; min-width:0; }
label { display:grid; gap:7px; min-width:0; color:#c8d5e8; font-size:12px; font-weight:700; }
input,textarea,select {
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 12px;
  outline:none;
  background:rgba(255,255,255,.05);
  color:#f5f8ff;
}
textarea { resize: vertical; }
select option { color:#07172e; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(68,200,255,.09); }
.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; min-width:0; }
.check { display:flex; align-items:center; gap:9px; min-height: 34px; }
.check input { width:auto; }
.upload-box { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; gap:10px; align-items:center; min-width:0; padding:12px; border:1px dashed rgba(255,255,255,.17); border-radius:14px; background: rgba(255,255,255,.02); }
.upload-box > * { min-width: 0; }
.upload-box strong,.upload-box small { display:block; }
.upload-box small { color:var(--muted); margin-top:3px; line-height: 1.35; }
.upload-box input[type="file"] { font-size: 11px; }
.save { margin-top:4px; min-height: 48px; padding:13px 16px; }
.creative-preview { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#061326; }
.creative-preview img { display:block; width:100%; max-height:280px; object-fit:cover; }
.campaign-list { display:grid; gap:10px; min-width:0; }
.campaign { display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:13px; align-items:center; min-width:0; padding:11px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.thumb { width:92px; height:74px; border-radius:11px; overflow:hidden; background:linear-gradient(145deg,#143f6f,#0b2546); display:grid; place-items:center; color:#7fa0c9; font-size:10px; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.campaign > div:nth-child(2) { min-width: 0; }
.campaign h3 { margin:0; font-size:14px; line-height: 1.25; overflow-wrap: anywhere; }
.campaign p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.4; overflow-wrap: anywhere; }
.meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag { padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.055); color:#a9b9d0; font-size:10px; white-space: nowrap; }
.tag.on { color:var(--good); background:rgba(124,230,178,.08); }
.row-actions { display:grid; gap:7px; }
.row-actions button { min-width:72px; min-height: 38px; padding:8px 9px; font-size:11px; }
.row-actions .delete { color:var(--danger); background:rgba(255,80,120,.08); border:1px solid rgba(255,80,120,.18); }
.empty { padding:30px 15px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px; }
.toast { position:fixed; right:20px; bottom:20px; z-index:20; max-width:min(420px,calc(100% - 40px)); padding:13px 15px; border-radius:12px; background:#f6fbff; color:#07172e; box-shadow:0 18px 50px rgba(0,0,0,.32); font-weight:750; }

@media(max-width:900px){
  .topbar { position: static; align-items:flex-start; flex-direction:column; padding-top: 20px; }
  .top-actions { justify-content:flex-start; width:100%; }
  .stats-grid{grid-template-columns:1fr 1fr}
  .layout{grid-template-columns:1fr}
  .upload-box{grid-template-columns:1fr}
  .campaign{grid-template-columns:82px minmax(0,1fr)}
  .thumb{width:82px}
  .row-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  body { background: linear-gradient(180deg,#07182f 0,#061326 360px); }
  .topbar {
    gap: 16px;
    padding: max(17px, env(safe-area-inset-top)) 16px 16px;
    background: rgba(5,18,36,.96);
  }
  .topbar h1 { font-size: 29px; }
  .top-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; }
  .top-actions label { grid-column:1/-1; width:100%; font-size:10px; }
  .top-actions label,.top-actions input { width:100%; min-width:0; }
  .top-actions input { min-height:45px; margin-top:6px; }
  .top-actions button { width:100%; min-height:44px; padding-inline:10px; }
  .top-actions a {
    grid-column:1/-1;
    width:100%;
    justify-content:center;
    min-height:48px;
    padding:13px 14px !important;
    border-radius:13px !important;
  }
  .demo-banner { margin:12px 16px 0 !important; padding:12px 13px !important; }
  .demo-banner strong,.demo-banner span { display:block; }
  .demo-banner span { margin-top:3px; font-size:11px !important; }
  main { padding:14px 16px calc(38px + env(safe-area-inset-bottom)); }
  .stats-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; }
  .stats-grid article { min-height:92px; padding:14px; border-radius:16px; }
  .stats-grid span { font-size:10.5px; }
  .stats-grid strong { margin-top:9px; font-size:25px; }
  .layout { margin-top: 12px; gap:12px; }
  .panel { border-radius:18px; }
  .form-panel,.list-panel { padding:16px; }
  .panel-heading { margin-bottom:16px; }
  .panel-heading h2 { font-size:20px; }
  .two { grid-template-columns:1fr; gap:13px; }
  label { font-size:11px; }
  input,textarea,select { min-height:46px; padding:12px; font-size:16px; border-radius:12px; }
  textarea { min-height: 96px; }
  .upload-box { padding:12px; gap:9px; }
  .upload-box input[type="file"] { min-height:auto; padding:10px; font-size:12px; }
  .upload-box button { width:100%; min-height:44px; }
  .save { width:100%; min-height:50px; }
  .campaign { grid-template-columns:1fr; gap:10px; padding:10px; border-radius:15px; }
  .thumb { width:100%; height:auto; aspect-ratio:16/9; border-radius:12px; }
  .campaign h3 { font-size:15px; }
  .campaign p { font-size:12px; }
  .meta { gap:5px; }
  .tag { font-size:9.5px; }
  .row-actions { grid-column:auto; grid-template-columns:1fr 1fr; gap:8px; }
  .row-actions button { min-width:0; min-height:42px; font-size:12px; }
  .toast { left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); max-width:none; }
}

@media(max-width:360px){
  .stats-grid { grid-template-columns:1fr; }
  .top-actions { grid-template-columns:1fr; }
  .top-actions label,.top-actions a { grid-column:auto; }
}