.admaker-root{
      --bg:#0f1115;
      --panel:#151923;
      --panel2:#10141c;
      --line:rgba(255,255,255,.08);
      --text:#e9edf5;
      --muted:rgba(233,237,245,.70);
      --accent:#2f7df6;
      --accent2:#4ea2ff;
      --danger:#ff4d6d;
      --good:#27d07d;
      --shadow: 0 18px 45px rgba(0,0,0,.45);
      --radius:18px;
      --radius2:14px;
    }.admaker-root *{box-sizing:border-box}.admaker-root{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1100px 600px at 70% 10%, rgba(47,125,246,.22), transparent 55%),
                  radial-gradient(900px 500px at 20% 30%, rgba(255,77,109,.12), transparent 50%),
                  var(--bg);
      color:var(--text);
      overflow:hidden;
    }.admaker-root .app{
      height:100vh;
      display:grid;
      grid-template-columns: 260px 1fr 360px;
      gap:14px;
      padding:14px;
    }.admaker-root .card{
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      min-height:0;
    }.admaker-root .left{
      display:flex;
      flex-direction:column;
      padding:16px 14px;
      gap:12px;
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    }.admaker-root .brand{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:8px 10px;
      border-radius: 14px;
      background: rgba(0,0,0,.18);
      border:1px solid var(--line);
    }.admaker-root .brand h1{
      margin:0;
      font-size:18px;
      letter-spacing:.12em;
      font-weight:800;
    }.admaker-root .pill{
      font-size:12px;
      color:var(--muted);
      padding:4px 8px;
      border:1px solid var(--line);
      border-radius:999px;
      background: rgba(255,255,255,.02);
    }.admaker-root .effectsTitle{
      margin:10px 2px 4px;
      font-size:12px;
      letter-spacing:.18em;
      color:var(--muted);
      text-transform:uppercase;
    }.admaker-root .effects{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:4px 2px;
      overflow:auto;
      min-height:0;
    }.admaker-root .fxBtn{
      display:flex;
      gap:12px;
      align-items:center;
      padding:12px 12px;
      border-radius: 16px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.22);
      cursor:pointer;
      user-select:none;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
    }.admaker-root .fxBtn:hover{ transform: translateY(-1px); background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.12); }.admaker-root .fxBtn.active{ border-color: rgba(47,125,246,.6); background: rgba(47,125,246,.12); }.admaker-root .fxIcon{
      width:44px;height:44px;border-radius:14px;
      display:grid;place-items:center;
      background: rgba(255,255,255,.04);
      border:1px solid var(--line);
      flex:0 0 auto;
    }.admaker-root .fxIcon svg{opacity:.9}.admaker-root .fxName{
      font-weight:800;
      letter-spacing:.08em;
    }.admaker-root .fxSub{
      font-size:12px;color:var(--muted); margin-top:2px;
    }.admaker-root .main{
      display:flex;
      flex-direction:column;
      padding:14px;
      gap:12px;
      min-height:0;
    }.admaker-root .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius: 16px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.18);
    }.admaker-root .btnRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;}.admaker-root button{
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color:var(--text);
      border-radius: 12px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:700;
      letter-spacing:.02em;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
    }.admaker-root button:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }.admaker-root .primary{
      background: linear-gradient(180deg, rgba(47,125,246,.95), rgba(47,125,246,.75));
      border-color: rgba(47,125,246,.9);
    }.admaker-root .primary:hover{ background: linear-gradient(180deg, rgba(78,162,255,.98), rgba(47,125,246,.78)); }.admaker-root .ghost{ background: rgba(0,0,0,.22); }.admaker-root .danger{ background: rgba(255,77,109,.15); border-color: rgba(255,77,109,.35); }.admaker-root .good{ background: rgba(39,208,125,.14); border-color: rgba(39,208,125,.35); }.admaker-root .select{
      padding:10px 12px;border-radius:12px;border:1px solid var(--line);
      background: rgba(0,0,0,.22); color:var(--text);
      font-weight:700;
    }.admaker-root .previewWrap{
      flex:1;
      min-height:0;
      display:grid;
      place-items:center;
      padding:10px;
    }.admaker-root .stageShell{
      width:min(420px, 100%);
      aspect-ratio: 9 / 16;
      border-radius: 26px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.22);
      box-shadow: 0 26px 80px rgba(0,0,0,.55);
      overflow:hidden;
      position:relative;
    }.admaker-root canvas#stage{
      width:100%;
      height:100%;
      display:block;
      background:#f8d6d9;
    }.admaker-root .hint{
      font-size:12px;color:var(--muted);
    }.admaker-root .right{
      display:flex;
      flex-direction:column;
      min-height:0;
    }.admaker-root .panelHeader{
      padding:14px 14px 10px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between;
      background: rgba(0,0,0,.18);
    }.admaker-root .panelHeader h2{
      margin:0;
      font-size:14px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }.admaker-root .panelBody{
      padding:12px 14px 14px;
      overflow:auto;
      min-height:0;
    }.admaker-root .group{
      border:1px solid var(--line);
      background: rgba(0,0,0,.18);
      border-radius: 16px;
      padding:12px;
      margin-bottom:12px;
    }.admaker-root .group h3{
      margin:0 0 10px;
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--muted);
    }.admaker-root label{
      display:block;
      font-size:12px;
      color:var(--muted);
      margin:10px 0 6px;
    }.admaker-root input[type="text"], .admaker-root input[type="number"]{
      width:100%;
      padding:10px 12px;
      border-radius: 12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color:var(--text);
      outline:none;
      font-weight:700;
    }.admaker-root input[type="range"]{
      width:100%;
    }.admaker-root .row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }.admaker-root .tiny{
      font-size:11px;
      color:var(--muted);
      line-height:1.35;
    }.admaker-root .swatchRow{ display:flex; gap:10px; flex-wrap:wrap; }.admaker-root .swatch{
      width:34px;height:34px;border-radius:12px;border:1px solid var(--line);
      cursor:pointer;
      box-shadow: inset 0 0 0 2px rgba(0,0,0,.18);
    }.admaker-root .kbd{
      border:1px solid var(--line);
      background: rgba(0,0,0,.2);
      padding:3px 7px;
      border-radius:8px;
      font-size:11px;
      color:var(--muted);
    }.admaker-root .modalBack{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
      display:none; align-items:center; justify-content:center;
      padding:18px;
    }.admaker-root .modal{
      width:min(760px, 96vw);
      border-radius: 18px;
      border:1px solid var(--line);
      background: rgba(16,20,28,.92);
      box-shadow: var(--shadow);
      overflow:hidden;
    }.admaker-root .modalTop{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between;
    }.admaker-root .modalTop strong{ letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--muted); }.admaker-root .modalBody{ padding:14px; }.admaker-root .footerNote{
      margin-top:10px;
      font-size:12px;
      color:var(--muted);
    }

/* ===== Responsive / Fit-to-screen fixes ===== */
.admaker-root .app{
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
  gap: 12px;
}
.admaker-root .card{ min-width: 0; }
.admaker-root .topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
}
.admaker-root .topbar .btnRow{
  flex-wrap: wrap;
  gap: 8px;
}
.admaker-root .topbar .btnRow > *{
  min-height: 40px;
}
.admaker-root .previewWrap{
  display: flex;
  justify-content: center;
}
.admaker-root .stageShell{
  width: 100%;
  max-width: 520px; /* desktop default */
}
.admaker-root canvas#stage{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Make side panels scroll independently so buttons stay visible */
.admaker-root .card.left,
.admaker-root .card.right{
  max-height: calc(100vh - 120px);
  overflow: auto;
}

/* Tablet: stack columns */
@media (max-width: 1200px){
  .admaker-root .app{
    display: flex;
    flex-direction: column;
  }
  .admaker-root .card.left,
  .admaker-root .card.right{
    max-height: none;
  }
  .admaker-root .stageShell{
    max-width: 640px;
  }
}

/* Small screens: make panels collapse-friendly + keep action buttons visible */
@media (max-width: 768px){
  .admaker-root .app{ padding: 10px; }
  .admaker-root .card{ padding: 10px; }
  .admaker-root .topbar{
    gap: 8px;
    padding: 10px;
  }
  .admaker-root .topbar .btnRow{
    width: 100%;
    justify-content: space-between;
  }
  .admaker-root .topbar .btnRow:first-child > *{
    flex: 1 1 auto;
  }
  .admaker-root .topbar .btnRow:last-child > *{
    flex: 1 1 auto;
  }
  .admaker-root .stageShell{
    max-width: 100%;
  }
  /* Make long option panels less tall */
  .admaker-root .group{ margin-bottom: 12px; }
}

/* Ultra small: ensure controls never overflow off screen */
@media (max-width: 420px){
  .admaker-root .topbar .btnRow{ gap: 6px; }
  .admaker-root .topbar .btnRow > button,
  .admaker-root .topbar .btnRow > select{
    font-size: 14px;
    padding: 10px 10px;
  }
}