*{box-sizing:border-box}
:root{
  --bg:#eaf8ff;
  --bg2:#f8fcff;
  --panel:#ffffff;
  --panel2:#eef9ff;
  --line:#bddff1;
  --line2:#d8edf8;
  --text:#17324a;
  --muted:#6c8799;
  --blue:#32aee7;
  --blue2:#168cca;
  --blue3:#0a6ea9;
  --success:#31b67a;
  --warning:#eea632;
  --danger:#e55f66;
  --shadow:0 16px 45px rgba(45,115,150,.12);
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:linear-gradient(145deg,#e3f6ff 0%,#f8fcff 55%,#eaf8ff 100%)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:232px;padding:20px 14px;background:rgba(240,250,255,.94);backdrop-filter:blur(18px);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}
.brand{display:flex;align-items:center;gap:11px;padding:5px 7px 24px}
.brand-mark{width:42px;height:42px;border-radius:10px;background:linear-gradient(145deg,#48c4f5,#1288c7);box-shadow:inset 0 -4px 0 rgba(0,0,0,.1),0 8px 18px rgba(27,143,196,.25);display:grid;place-items:center;color:#fff;font-weight:1000;letter-spacing:-2px;border:2px solid rgba(255,255,255,.8)}
.brand-mark.small{width:34px;height:34px;border-radius:8px;font-size:13px}
.brand-copy{display:flex;flex-direction:column;line-height:1.08}
.brand-copy strong{font-size:17px}
.brand-copy span{font-size:11px;color:var(--muted);margin-top:5px}
.nav-list{display:flex;flex-direction:column;gap:7px}
.nav-btn,.mobile-nav-btn{border:0;background:transparent;color:var(--muted)}
.nav-btn{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;text-align:left;font-weight:750}
.nav-btn:hover{background:#e4f5ff;color:var(--blue3)}
.nav-btn.active{background:linear-gradient(145deg,#d8f2ff,#c6ebff);color:var(--blue3);box-shadow:inset 0 0 0 1px #a8dafa}
.nav-icon{width:25px;text-align:center;font-size:21px}
.sidebar-footer{margin-top:auto;padding:8px}
.mini-note{font-size:11px;color:var(--muted);line-height:1.45;padding:12px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.5)}
.main{margin-left:232px;min-height:100vh;padding:0 28px 40px}
.topbar{height:88px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:10;background:linear-gradient(to bottom,rgba(239,250,255,.96),rgba(239,250,255,.86),rgba(239,250,255,0));backdrop-filter:blur(9px)}
.topbar-title{margin-right:auto}
.topbar h1{font-size:24px;margin:0 0 4px}
.topbar p{margin:0;color:var(--muted);font-size:13px}
.mobile-brand{display:none;border:0;background:transparent;align-items:center;gap:8px;font-weight:900;color:var(--text);padding:0}
.primary-btn,.secondary-btn,.text-btn,.icon-btn,.user-chip{border:0;border-radius:11px;font-weight:800}
.primary-btn{background:linear-gradient(145deg,#41bdf0,#168fce);color:white;padding:11px 16px;box-shadow:0 7px 15px rgba(24,144,204,.22),inset 0 -2px 0 rgba(0,0,0,.08)}
.primary-btn:active{transform:translateY(1px)}
.secondary-btn{background:#edf8fe;color:var(--blue3);padding:10px 15px;border:1px solid #b9dff3}
.text-btn{background:transparent;color:var(--blue3);padding:8px 10px}
.small-btn{padding:9px 12px;font-size:13px}
.auth-btn{white-space:nowrap}
.user-chip{display:flex;align-items:center;gap:8px;background:#fff;padding:6px 10px 6px 6px;border:1px solid var(--line)}
.user-chip img{width:31px;height:31px;border-radius:8px;object-fit:cover;background:#d8edf8}
.hidden{display:none!important}
.page{display:none;animation:fadeIn .18s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}}
.hero-card{min-height:345px;border:1px solid var(--line);border-radius:24px;padding:30px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(220,245,255,.92));box-shadow:var(--shadow);display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;overflow:hidden;position:relative}
.hero-card:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#8fdcff55;right:-70px;top:-110px;filter:blur(5px)}
.eyebrow{display:inline-block;color:var(--blue3);font-size:11px;font-weight:1000;letter-spacing:1.5px;margin-bottom:12px}
.hero-card h2{font-size:38px;line-height:1.06;letter-spacing:-1.3px;margin:0 0 14px;max-width:650px}
.hero-card p{color:var(--muted);line-height:1.65;max-width:600px;margin:0}
.hero-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.hero-preview{position:relative;z-index:1;padding:10px;border-radius:18px;background:rgba(255,255,255,.68);border:1px solid #bfe6f7;box-shadow:0 20px 50px rgba(37,106,140,.15);transform:rotate(1.5deg)}
.hero-preview canvas{display:block;width:100%;border-radius:11px;background:#172536}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.stat-card{background:rgba(255,255,255,.9);border:1px solid var(--line2);border-radius:16px;padding:16px;box-shadow:0 9px 25px rgba(45,115,150,.06)}
.stat-card span,.stat-card small{display:block;color:var(--muted)}
.stat-card strong{display:block;font-size:28px;margin:3px 0;color:var(--blue3)}
.stat-card small{font-size:11px}
.panel{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px}
.panel-heading h3{margin:0;font-size:18px}
.panel-heading p{margin:4px 0 0;color:var(--muted);font-size:12px}
.creator-layout{display:grid;grid-template-columns:390px 1fr;gap:18px;align-items:start}
.creator-controls{position:sticky;top:103px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field span{font-size:12px;font-weight:800;color:#496b82}
.field input,.field textarea,.field select{width:100%;border:1px solid #bcdff0;background:#f9fdff;color:var(--text);border-radius:11px;padding:11px 12px;outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#4ab8e8;box-shadow:0 0 0 3px #4ab8e81a}
.field textarea{resize:vertical;min-height:98px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.keyword-help{display:flex;flex-wrap:wrap;gap:6px;border:1px dashed var(--line);background:#f3fbff;padding:10px;border-radius:11px;margin:1px 0 14px;font-size:11px;color:var(--muted)}
.keyword-help strong{width:100%;color:#496b82}
.keyword-help span{background:white;border:1px solid #d1eaf5;padding:4px 7px;border-radius:7px}
.button-row{display:flex;gap:9px;flex-wrap:wrap}
.preview-panel{min-width:0}
.canvas-wrap{width:100%;overflow:auto;border-radius:15px;background:linear-gradient(45deg,#eaf4f8 25%,#f9fdff 25%,#f9fdff 50%,#eaf4f8 50%,#eaf4f8 75%,#f9fdff 75%);background-size:24px 24px;padding:14px;border:1px solid #d4eaf4}
#bannerCanvas{display:block;max-width:100%;height:auto;margin:auto;border-radius:10px;box-shadow:0 12px 25px rgba(0,0,0,.16);background:#111}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.graphic-card{border:1px solid var(--line2);border-radius:15px;overflow:hidden;background:#fff}
.graphic-thumb{aspect-ratio:2.5/1;background:#d9edf5;overflow:hidden;position:relative}
.graphic-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.graphic-info{padding:12px}
.graphic-title-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.graphic-info h4{margin:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.graphic-info p{margin:5px 0 0;color:var(--muted);font-size:11px}
.status-pill{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;padding:4px 6px;border-radius:999px;white-space:nowrap}
.status-draft{background:#edf3f6;color:#6d7e88}
.status-pending{background:#fff0d6;color:#a06a0f}
.status-approved{background:#dff7eb;color:#248558}
.status-published{background:#dff2ff;color:#167cb2}
.card-actions{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 12px}
.card-actions button{flex:1;min-width:max-content;border:1px solid #cde5f1;background:#f6fcff;color:#3f687f;border-radius:8px;padding:7px 8px;font-size:10px;font-weight:800}
.card-actions button.primary-mini{background:#daf2ff;color:#0875ac;border-color:#a9daf3}
.card-actions button.danger-mini{color:#b5484f;background:#fff7f7;border-color:#f0ced0}
.empty-state{grid-column:1/-1;text-align:center;padding:42px 20px;color:var(--muted);border:1px dashed var(--line);border-radius:14px;background:#f9fdff}
.transmitter-list{display:flex;flex-direction:column;gap:11px}
.transmitter-row{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line2);border-radius:14px;padding:10px;background:#fff}
.transmitter-row img{width:150px;height:60px;object-fit:cover;border-radius:8px;background:#d9edf5}
.transmitter-meta h4{margin:0 0 5px}
.transmitter-meta p{margin:2px 0;color:var(--muted);font-size:11px}
.transmitter-actions{display:flex;gap:7px;align-items:center}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:#17324a;color:#fff;border-radius:11px;padding:10px 15px;font-weight:750;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;inset:0;background:rgba(12,32,48,.48);display:grid;place-items:center;padding:18px;z-index:50;backdrop-filter:blur(6px)}
.modal{width:min(460px,100%);background:#f9fdff;border:1px solid #b9deef;border-radius:20px;padding:18px;box-shadow:0 24px 80px rgba(7,45,65,.28)}
.modal-heading{display:flex;justify-content:space-between;gap:15px;margin-bottom:12px}
.modal-heading h3{margin:0}
.modal-heading p{margin:4px 0 0;color:var(--muted);font-size:11px}
.icon-btn{width:34px;height:34px;background:#edf8fe;color:#52768a;font-size:20px}
.modal-preview img{width:100%;aspect-ratio:2.5/1;object-fit:cover;border-radius:12px;margin:0 0 14px;background:#dbeef6}
.modal-actions{justify-content:flex-end}
.mobile-nav{display:none}
@media(max-width:1050px){
  .creator-layout{grid-template-columns:1fr}
  .creator-controls{position:static}
  .card-grid,.card-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body{padding-bottom:78px}
  .sidebar{display:none}
  .main{margin-left:0;padding:0 12px 24px}
  .topbar{height:72px;gap:10px}
  .topbar-title{display:none}
  .mobile-brand{display:flex;margin-right:auto}
  .auth-btn{padding:9px 12px;font-size:12px}
  .user-chip span{display:none}
  .hero-card{grid-template-columns:1fr;padding:20px;border-radius:18px;min-height:auto}
  .hero-card h2{font-size:28px}
  .hero-preview{margin-top:5px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:9px}
  .stat-card{padding:12px}
  .panel{padding:14px;border-radius:16px}
  .panel-heading{align-items:flex-start}
  .two-col{grid-template-columns:1fr}
  .card-grid,.card-grid.compact{grid-template-columns:1fr}
  .transmitter-row{grid-template-columns:95px 1fr;gap:10px}
  .transmitter-row img{width:95px;height:58px}
  .transmitter-actions{grid-column:1/-1;justify-content:flex-end}
  .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:30;background:rgba(248,253,255,.96);border:1px solid #b9dfef;border-radius:17px;padding:7px 5px;box-shadow:0 12px 35px rgba(27,84,111,.2);backdrop-filter:blur(14px)}
  .mobile-nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 1px;border-radius:10px}
  .mobile-nav-btn span{font-size:18px;line-height:1}
  .mobile-nav-btn small{font-size:8px;font-weight:800}
  .mobile-nav-btn.active{background:#dff4ff;color:#0879b4}
  .toast{bottom:94px;max-width:calc(100vw - 30px);text-align:center}
}

.marketplace-link{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--blue3);font-weight:850;font-size:11px;
  padding:8px 10px;border:1px solid #b9dff3;border-radius:9px;background:#edf8fe;
}

button, .keyword-help span, .marketplace-link{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:disabled{
  opacity:.62;
  cursor:default;
}
.keyword-help span{
  cursor:pointer;
  user-select:none;
  transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
.keyword-help span:active{
  transform:scale(.96);
  background:#dff4ff;
  border-color:#8fd0ee;
}
.danger-action{
  color:#b5484f!important;
  border-color:#efc7ca!important;
  background:#fff5f5!important;
}

.creator-pickers{display:grid;gap:9px;margin:4px 0 14px}
.picker-btn{
  width:100%;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;
  text-align:left;border:1px solid #bcdff0;background:#f7fcff;color:var(--text);
  padding:10px 11px;border-radius:12px;touch-action:manipulation
}
.picker-btn:active{transform:scale(.992);background:#eaf8ff}
.picker-btn .picker-icon{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:#dcf3ff;color:#0a7db8;font-size:20px;font-weight:900
}
.picker-btn span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.picker-btn strong{font-size:12px}
.picker-btn small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-btn b{min-width:24px;text-align:center;color:#0c82bc}

.selection-modal{max-height:min(720px,88vh);overflow:auto}
.search-field{
  display:flex;align-items:center;gap:8px;border:1px solid #bcdff0;background:#f8fdff;
  border-radius:11px;padding:0 10px;margin-bottom:12px
}
.search-field span{font-size:20px;color:#5f7e90}
.search-field input{border:0!important;box-shadow:none!important;background:transparent!important;padding:11px 4px!important;margin:0}
.category-tabs{display:flex;gap:6px;overflow:auto;padding-bottom:8px;margin-bottom:5px}
.category-tab{
  border:1px solid #c9e4f1;background:#f5fbfe;color:#5f7d8d;border-radius:999px;
  padding:7px 10px;font-size:10px;font-weight:850;white-space:nowrap
}
.category-tab.active{background:#d9f2ff;color:#0877ae;border-color:#9bd3ed}
.selection-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.selection-chip{
  border:1px solid #cae5f1;background:#fff;color:var(--text);border-radius:11px;
  padding:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  text-align:left;touch-action:manipulation
}
.selection-chip:hover,.selection-chip:active{background:#edf9ff;border-color:#9bd7ef}
.selection-chip.selected{background:#ddf4ff;border-color:#72c5e8;color:#0873aa}
.selection-chip span{font-size:11px;font-weight:800}
.selection-chip b{color:#0d8ac4;font-size:15px}
.selection-chip.wide{grid-column:1/-1}
.selection-chip.wide span{display:flex;flex-direction:column;gap:3px}
.selection-chip.wide strong{font-size:12px}
.selection-chip.wide small{font-size:9px;color:var(--muted);font-weight:600}
.modal-actions-inline{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.empty-mini{grid-column:1/-1;text-align:center;padding:24px;color:var(--muted);font-size:12px}
@media(max-width:520px){
  .selection-grid{grid-template-columns:1fr}
  .selection-modal{width:100%;max-height:84vh}
}

body.modal-open{
  overflow:hidden!important;
  position:fixed;
  width:100%;
}
.modal-backdrop{
  overscroll-behavior:contain;
}
.selection-modal{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.settings-section{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line2);
}
.settings-section h4{
  margin:0 0 9px;
  font-size:12px;
  color:#496b82;
}

/* Universal animated thumbnails — Created, Approved, Transmitter and modal preview */
.animated-media{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#d9edf5;
}
.animated-media > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:translateZ(0);
}
.transmitter-thumb{
  width:150px;
  height:60px;
  border-radius:8px;
}
.modal-animated-preview{
  width:100%;
  aspect-ratio:2.5/1;
  border-radius:12px;
  margin:0 0 14px;
}
.anim-parallax > img{
  animation:shoreParallax 14s ease-in-out infinite alternate;
  width:106%;
  max-width:none;
  margin-left:-3%;
}
.anim-clouds > img{
  animation:shoreCloudDrift 22s ease-in-out infinite alternate;
}
.anim-pulse > img{
  animation:shorePulse 2.4s ease-in-out infinite;
}
.anim-shimmer::after,
.anim-shimmer .anim-shimmer{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.33) 47%,rgba(165,230,255,.18) 53%,transparent 72%);
  transform:translateX(-75%);
  animation:shoreShimmer 4.6s linear infinite;
  z-index:4;
}
.anim-water .anim-water{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:0;
  height:42%;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 8px,rgba(167,239,247,.18) 9px 11px,transparent 12px 20px);
  animation:shoreWater 2.8s linear infinite;
  z-index:3;
  mix-blend-mode:screen;
}
.anim-rain{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:5;
}
.anim-rain i{
  position:absolute;
  top:-28px;
  width:2px;
  height:24px;
  background:rgba(215,242,255,.58);
  animation:shoreRain 1.15s linear infinite;
}
.anim-rain i:nth-child(1){left:4%;animation-delay:-.1s}
.anim-rain i:nth-child(2){left:10%;animation-delay:-.7s}
.anim-rain i:nth-child(3){left:17%;animation-delay:-.35s}
.anim-rain i:nth-child(4){left:23%;animation-delay:-.95s}
.anim-rain i:nth-child(5){left:30%;animation-delay:-.5s}
.anim-rain i:nth-child(6){left:37%;animation-delay:-.15s}
.anim-rain i:nth-child(7){left:43%;animation-delay:-.82s}
.anim-rain i:nth-child(8){left:49%;animation-delay:-.42s}
.anim-rain i:nth-child(9){left:55%;animation-delay:-1.05s}
.anim-rain i:nth-child(10){left:61%;animation-delay:-.28s}
.anim-rain i:nth-child(11){left:67%;animation-delay:-.72s}
.anim-rain i:nth-child(12){left:73%;animation-delay:-.57s}
.anim-rain i:nth-child(13){left:79%;animation-delay:-.03s}
.anim-rain i:nth-child(14){left:84%;animation-delay:-.9s}
.anim-rain i:nth-child(15){left:89%;animation-delay:-.47s}
.anim-rain i:nth-child(16){left:94%;animation-delay:-.67s}
.anim-rain i:nth-child(17){left:27%;animation-delay:-.22s}
.anim-rain i:nth-child(18){left:70%;animation-delay:-1.1s}
@keyframes shoreRain{from{transform:translateY(-40px)}to{transform:translateY(720px)}}
@keyframes shoreWater{to{transform:translateX(6%) translateY(7px)}}
@keyframes shoreParallax{from{transform:translateX(-1.5%) scale(1.02)}to{transform:translateX(1.5%) scale(1.055)}}
@keyframes shoreCloudDrift{from{transform:translateX(-1.2%)}to{transform:translateX(1.2%)}}
@keyframes shorePulse{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.14);transform:scale(1.012)}}
@keyframes shoreShimmer{to{transform:translateX(75%)}}
@media(max-width:760px){
  .transmitter-thumb{width:95px;height:58px}
}

.prompt-tools{margin:-5px 0 12px}
.surprise-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #b9def0;
  background:linear-gradient(180deg,#f7fcff,#eaf8ff);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  text-align:left;
  touch-action:manipulation;
}
.surprise-btn:active{transform:scale(.992)}
.surprise-icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:#d5f2ff;color:#0788c3;
  font-size:20px;font-weight:900;
  flex:0 0 auto;
}
.surprise-btn > span:last-child{display:flex;flex-direction:column;gap:2px}
.surprise-btn strong{font-size:12px}
.surprise-btn small{font-size:10px;color:var(--muted)}
.anim-rain i{
  will-change:transform;
  -webkit-animation-name:shoreRain;
  -webkit-animation-duration:1.05s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
}

/* v9 rebuilt Created / Approved / Transmitter cards */
.builder-card{
  border:1px solid #b9dded;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 7px 20px rgba(32,92,122,.07);
  position:relative;
  width:100%;
  min-width:0;
}
.builder-card-media{
  width:100%;
  aspect-ratio:2.5/1;
  overflow:hidden;
  background:#d9edf5;
  position:relative;
}
.builder-thumb{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#d9edf5;
}
.builder-thumb > img{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:cover!important;
  position:relative!important;
  inset:auto!important;
}
.builder-card-body{padding:11px 12px 12px}
.builder-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.builder-card-heading h4{
  margin:0 0 4px;
  font-size:14px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.builder-card-heading p{
  margin:0;
  color:var(--muted);
  font-size:10px;
}
.builder-card-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.builder-card-actions button,
.builder-card-actions a{
  min-width:0;
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:10px;
}
.transmitter-card .builder-card-actions{
  grid-template-columns:1fr 1fr;
}
#createdGrid,#approvedGrid,#homeRecent{
  align-items:start;
}
@media(max-width:520px){
  .builder-card{border-radius:14px}
  .builder-card-body{padding:10px}
  .builder-card-actions{grid-template-columns:1fr 1fr 1fr}
  .builder-card-actions button,.builder-card-actions a{font-size:9px;padding:8px 5px}
  .transmitter-card .builder-card-actions{grid-template-columns:1fr 1fr}
}

.build-version{
  display:block;
  font-size:8px;
  line-height:1.1;
  color:#5f8298;
  font-weight:800;
  letter-spacing:.04em;
  margin-top:2px;
}
.selection-modal .selection-grid{
  align-items:stretch;
}
#keywordResults .selection-chip{
  min-height:42px;
}

/* v11: denser scene picker on phones */
.scene-grid .selection-chip{min-height:44px}
.build-version{color:#2f8fb8}

/* v12 scene-first */
.build-version{color:#218bb7}.field select#lightingPreset{min-height:42px}

.biome-group{grid-column:1/-1;margin:4px 0 10px}
.biome-group h4{margin:6px 0 8px;padding-bottom:6px;border-bottom:1px solid #d9ebf3;color:#327f9f;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.biome-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
@media(max-width:520px){.biome-group-grid{grid-template-columns:1fr 1fr}.biome-group-grid .selection-chip{min-height:44px;padding:9px}}

.create-type-modal{max-width:620px}
.create-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.create-type-card{border:1px solid #b9dfef;background:#f8fdff;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;color:var(--text);touch-action:manipulation}
.create-type-card:active{transform:scale(.985)}
.create-type-card strong{font-size:14px}.create-type-card small{font-size:10px;line-height:1.45;color:var(--muted)}
.create-type-preview{width:100%;height:90px;border-radius:12px;overflow:hidden;position:relative;display:block;background:#dff5ff;border:1px solid #c9e5f1}
.banner-type-preview{background:linear-gradient(#7acbe7 0 50%,#1d8ea5 50% 72%,#dabd73 72%)}
.banner-type-preview i:nth-child(1){position:absolute;left:16%;bottom:17%;width:12px;height:42px;background:#6b4a32}
.banner-type-preview i:nth-child(2){position:absolute;left:12%;bottom:48%;width:40px;height:28px;background:#43834c;border-radius:50%}
.banner-type-preview i:nth-child(3){position:absolute;right:12%;top:14%;width:21px;height:21px;background:#ffe279}
.nameplate-type-preview{height:58px;margin:auto 0;background:linear-gradient(90deg,#416e45,#2b8c99 48%,#416e45)}
.nameplate-type-preview i{position:absolute;border-radius:50%;background:#4f8a4f}
.nameplate-type-preview i:nth-child(1){width:26px;height:26px;left:4%;top:6px}
.nameplate-type-preview i:nth-child(2){width:33px;height:33px;left:15%;bottom:3px}
.nameplate-type-preview i:nth-child(3){width:30px;height:30px;right:11%;top:4px}
.nameplate-type-preview i:nth-child(4){width:20px;height:20px;right:2%;bottom:4px}
.creator-title-row{display:flex;align-items:center;gap:8px}.creator-title-row h3{margin:0}
.creator-mode-badge{border-radius:999px;background:#d9f3ff;color:#087cb4;font-size:8px;font-weight:900;letter-spacing:.08em;padding:5px 7px}
.canvas-mode-hint{position:absolute;top:9px;left:10px;z-index:3;background:rgba(7,22,33,.64);color:#fff;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:800;backdrop-filter:blur(6px);pointer-events:none}
.creator-preview{position:relative}
@media(max-width:520px){.create-type-grid{grid-template-columns:1fr}.create-type-preview{height:76px}.nameplate-type-preview{height:54px}}

.picker-caret{font-size:11px;margin-left:4px;opacity:.8}.create-type-card{cursor:pointer}

/* v16 Save to Photos format picker */
.save-format-modal{max-width:560px}
.save-format-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.save-format-card{
  border:1px solid #b9dfee;
  background:#f8fdff;
  color:var(--text);
  border-radius:14px;
  padding:13px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  min-height:76px;
  touch-action:manipulation;
}
.save-format-card:active{transform:scale(.985);background:#edf9ff}
.save-format-card:disabled{opacity:.58}
.save-format-icon{
  width:38px;height:38px;border-radius:10px;
  background:#dbf3ff;color:#087db4;
  display:grid;place-items:center;
  flex:0 0 auto;
  font-size:18px;font-weight:900;
}
.save-format-card > span:last-child{display:flex;flex-direction:column;gap:3px}
.save-format-card strong{font-size:13px}
.save-format-card small{font-size:9px;color:var(--muted);line-height:1.35}
.save-ios-note{
  margin:12px 1px 0;
  font-size:9px;
  color:var(--muted);
  line-height:1.45;
}
.no-animation-selected .save-format-icon{opacity:.72}
@media(max-width:520px){
  .save-format-grid{grid-template-columns:1fr}
}

/* v17 authoritative biome lock */
.biome-lock-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-4px 0 10px;
  padding:8px 10px;
  border:1px solid #cfe5ef;
  background:#f8fcfe;
  border-radius:11px;
  font-size:9px;
  color:#678295;
}
.biome-lock-status b{font-weight:900}
.biome-lock-dot{
  width:9px;height:9px;border-radius:50%;
  background:#9db2bd;
  box-shadow:0 0 0 4px rgba(157,178,189,.12);
  flex:0 0 auto;
}
.biome-lock-status.locked{
  border-color:#8ed0ec;
  background:#e9f8ff;
  color:#176b91;
}
.biome-lock-status.locked .biome-lock-dot{
  background:#1b9ed6;
  box-shadow:0 0 0 4px rgba(27,158,214,.14);
}

/* v18 inline renaming */
.editable-graphic-name{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:text;
  user-select:none;
  -webkit-user-select:none;
  border-radius:7px;
  padding:2px 4px;
  margin-left:-4px!important;
  transition:background .12s ease;
}
.editable-graphic-name:active,
.editable-graphic-name:hover{
  background:#eef9fe;
}
.rename-pencil{
  color:#79a9be;
  font-size:10px;
  opacity:.75;
  flex:0 0 auto;
}
.inline-name-input{
  width:min(100%,320px);
  min-width:0;
  border:1px solid #72c7e9!important;
  background:#fff!important;
  color:var(--text)!important;
  border-radius:8px!important;
  padding:7px 8px!important;
  font:inherit!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(75,174,216,.12)!important;
  margin:0!important;
}

/* v19 variation hint */
.surprise-btn small{white-space:normal}

/* v20 */
.surprise-btn small{line-height:1.35}


/* v21 — keep mobile navigation fixed to the bottom of the screen */
@media (max-width: 768px){
  .mobile-nav,
  .bottom-nav,
  .mobile-bottom-nav,
  nav.mobile-nav,
  nav.bottom-nav,
  [data-mobile-nav]{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:999!important;
    width:100%!important;
    margin:0!important;
    border-radius:0!important;
    padding-bottom:max(8px, env(safe-area-inset-bottom))!important;
    box-shadow:0 -6px 24px rgba(21,70,93,.10);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  body{
    padding-bottom:calc(74px + env(safe-area-inset-bottom))!important;
  }

  .app-shell,
  main,
  .main-content,
  .page-wrap{
    padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;
  }
}

/* v22 prompt-accuracy note */
.surprise-btn small{line-height:1.35}

/* v23 */
.save-format-card:disabled{opacity:.62;pointer-events:none}

/* v24 */
.save-format-card:disabled{opacity:.6;pointer-events:none}

/* v25 */
.transmit-buildbuck-preview{
  display:block;
  margin-top:7px;
  color:#4589a7;
  font-size:12px;
}