:root{--bg:#07142b;--panel:#0b1d3d;--line:#1c3769;--text:#eff6ff;--muted:#99aac8;--gold:#f3c739}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at top,#143f8d 0,#07142b 28%,#02060d 100%);color:var(--text);font-family:Inter,Montserrat,Arial,sans-serif} .hidden{display:none!important}
button,input,select,textarea{font:inherit} button{background:var(--gold);border:0;color:#07142b;font-weight:950;padding:12px 16px;border-radius:12px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)} button.secondary{background:#183a73;color:#fff;border:1px solid #315792}
.menuScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px} .menuShell{width:min(1120px,100%);text-align:center} .menuLogo{width:min(430px,88vw);display:block;margin:0 auto 18px;filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(255,255,255,.55)) drop-shadow(0 20px 60px rgba(0,0,0,.45))}
.menuShell h1{margin:0;font-size:clamp(30px,5vw,56px);font-weight:950;line-height:1.02;letter-spacing:-.03em} .menuShell p{margin:12px 0 28px;color:#bfd0ec;font-size:18px} .menuGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.menuCard{min-height:164px;border:1px solid #284b7b;background:linear-gradient(180deg,rgba(17,52,106,.95),rgba(5,18,43,.97));border-radius:22px;color:#fff;text-align:left;padding:20px;cursor:pointer;box-shadow:0 20px 60px rgba(0,0,0,.35);transition:.2s ease;display:flex;flex-direction:column;justify-content:space-between} .menuCard:hover{transform:translateY(-5px);border-color:var(--gold)} .menuCardTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.menuIcon{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(243,199,57,.14);border:1px solid rgba(243,199,57,.35);font-size:20px}.menuIndex{color:var(--gold);font-weight:950;font-size:15px;letter-spacing:.08em} .menuCard strong{font-size:22px;line-height:1.05;font-weight:950} .menuCard small{color:#aebfdd;font-size:13px;line-height:1.35}
.topbar{min-height:86px;display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(4,16,38,.94);position:sticky;top:0;z-index:5} .editorHeading h1{font-size:22px;margin:0 0 4px;font-weight:950}.editorHeading p{margin:0;color:var(--muted);font-size:13px}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.editorLayout{display:grid;grid-template-columns:360px 1fr;min-height:calc(100vh - 86px)} .panel{background:rgba(5,16,37,.9);border-right:1px solid var(--line);padding:14px;overflow:auto}
.detailsBlock{border:1px solid rgba(78,119,178,.45);background:rgba(9,33,70,.68);border-radius:16px;margin-bottom:12px;overflow:hidden} .detailsBlock summary{list-style:none;cursor:pointer;padding:14px 16px;font-size:12px;text-transform:uppercase;font-weight:950;color:#87a9dc;letter-spacing:.14em;display:flex;align-items:center;justify-content:space-between;gap:12px} .detailsBlock summary::-webkit-details-marker{display:none} .detailsBlock[open] summary{border-bottom:1px solid rgba(78,119,178,.35)} .summaryLead{display:flex;align-items:center;gap:10px;min-width:0}.summaryIcon{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#113261;border:1px solid #315792;color:#f3c739;font-size:14px;line-height:1;flex:0 0 auto} .summaryArrow{transition:transform .2s ease}.detailsBlock[open] .summaryArrow{transform:rotate(180deg)} .blockBody{padding:14px 16px}
.control{margin-bottom:12px} label{font-size:12px;text-transform:uppercase;font-weight:850;color:#cbd8ef;display:block;margin:0 0 7px;letter-spacing:.05em} label.inlineCheck{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:14px} input[type="checkbox"]{width:auto}
input,select,textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid #244775;background:#071a37;color:#fff} textarea{resize:vertical;min-height:92px}
.fileLabel{display:block;background:#0a244c;padding:10px;border-radius:12px;margin-bottom:10px;text-transform:none;letter-spacing:0;color:#dce8ff;font-size:13px;font-weight:700} .fileLabel input{margin-top:8px;padding:7px;background:#081934}
.rangeRow{display:grid;grid-template-columns:1fr 56px;gap:8px;align-items:center} .rangeValue{padding:10px 8px;border-radius:10px;background:#071a37;border:1px solid #244775;text-align:center;color:#e6f0ff;font-weight:800;font-size:12px}
.previewGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .previewGrid.three{grid-template-columns:1fr 1fr 1fr} .logoPreview{border:1px solid #29456f;border-radius:14px;padding:8px;display:flex;align-items:center;justify-content:center;height:94px;position:relative;cursor:pointer;appearance:none;width:100%;transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease} .logoPreview:hover{border-color:#5e8fe6;transform:translateY(-1px)} .logoPreview.active{border-color:#ffd34f;box-shadow:0 0 0 2px rgba(255,211,79,.24)} .logoPreview.dark{background:#02060b}.logoPreview.light{background:#edf2fb}.logoPreview img{max-width:100%;max-height:74px;object-fit:contain;pointer-events:none}
.note{font-size:13px;color:#b3c4df;line-height:1.55;margin:0}.note.compact{font-size:12px;color:#9fb4d9}
.stageWrap{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:center} .stageHead{width:min(100%,1180px);display:flex;justify-content:space-between;align-items:center} .stageTitle{font-size:20px;font-weight:950}.stageSub{font-size:13px;color:#9fb4d9;line-height:1.45;max-width:980px}.stage{width:min(100%,1180px);aspect-ratio:16/9;background:#061022;border:1px solid #29456f;border-radius:16px;box-shadow:0 25px 70px rgba(0,0,0,.45);overflow:hidden;display:flex;position:relative}.stage svg{width:100%;height:100%;display:block;user-select:none} .assetShelf{max-width:1180px;width:100%;border:1px solid #29456f;border-radius:16px;background:rgba(7,20,43,.72);padding:14px}.assetShelf.hidden{display:none}.assetShelfHead{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}.assetShelfHead strong{display:block;font-size:15px}.assetShelfHead span{display:block;font-size:12px;color:#9fb4d9;margin-top:4px}.uploadChip{display:inline-flex;align-items:center;gap:8px;background:#0a244c;padding:10px 12px;border-radius:12px;color:#fff;font-size:13px;font-weight:800;cursor:pointer}.uploadChip input{display:none}.assetGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.assetCard{border:1px solid #29456f;background:#071a37;border-radius:12px;padding:8px;color:#fff;text-align:left;cursor:pointer}.assetCard.active{border-color:#f3c739;box-shadow:0 0 0 2px rgba(243,199,57,.22) inset}.assetCard img{width:100%;height:120px;object-fit:cover;border-radius:8px;margin-bottom:8px}.assetCard span{font-size:12px;font-weight:700;color:#dce8ff}.uploadCard{display:flex;align-items:center;justify-content:center;min-height:168px}.uploadInner{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:38px;font-weight:900;color:#f3c739}.uploadInner small{display:block;font-size:13px;color:#dce8ff;margin-top:6px}
@media(max-width:1100px){.menuGrid{grid-template-columns:repeat(2,1fr)}.editorLayout{grid-template-columns:1fr}.panel{border-right:0;border-bottom:1px solid var(--line)}.topbar{grid-template-columns:1fr}.actions{justify-content:flex-start}.stageWrap{padding:12px}} @media(max-width:640px){.menuGrid{grid-template-columns:1fr}.menuCard{min-height:132px}.assetGrid{grid-template-columns:repeat(2,1fr)}.assetShelfHead{flex-direction:column;align-items:flex-start}}


.flagGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:360px;overflow:auto;padding-right:4px}
.flagOption{display:grid;grid-template-columns:46px 1fr 34px;align-items:center;gap:8px;background:#071a37;color:#fff;border:1px solid #244775;border-radius:12px;padding:8px;text-align:left;box-shadow:none}
.flagOption:hover{border-color:#f3c739}
.flagOption.active{border-color:#f3c739;box-shadow:0 0 0 2px rgba(243,199,57,.22) inset}
.flagOption img{width:42px;height:28px;object-fit:cover;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.flagOption span{font-size:12px;font-weight:800;line-height:1.15}
.flagOption small{font-size:11px;color:#f3c739;font-weight:900;text-align:right}
@media(max-width:640px){.flagGrid{grid-template-columns:1fr}}

.quickFormats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.quickRatio{background:#0b2246;border:1px solid #315792;color:#fff;border-radius:12px;padding:8px 10px;display:grid;grid-template-columns:26px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;min-width:102px;box-shadow:none}.quickRatio strong{font-size:13px;line-height:1}.quickRatio small{font-size:11px;color:#bdd0ee;line-height:1}.quickRatio.active{border-color:#f3c739;background:#143261}.ratioShape{display:block;border:2px solid #f3c739;border-radius:4px;grid-row:1 / span 2;align-self:center;justify-self:center;background:rgba(243,199,57,.08)}.ratioShape.landscape{width:22px;height:13px}.ratioShape.square{width:18px;height:18px}.ratioShape.story{width:12px;height:20px}.ratioShape.poster{width:14px;height:20px}.ratioShape.social{width:16px;height:20px}
@media(max-width:900px){.stageHead{align-items:flex-start;flex-direction:column}.quickFormats{justify-content:flex-start}}

.assetCard span strong{display:block;font-size:12px;line-height:1.15}.assetCard span small{display:block;font-size:10px;line-height:1.2;color:#bdd0ee;margin-top:4px}

.countryControl select{width:100%;background:#061d3d;color:#fff;border:1px solid #315792;border-radius:10px;padding:10px 12px;font-weight:800;margin-bottom:8px}.countryControl select:focus{outline:2px solid #2b8cff;border-color:#f3c739}

.stageTitleRow{display:flex;align-items:center;gap:14px}
.gridToggle{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:#dbe8ff;background:#0b234d;border:1px solid #2b5796;border-radius:10px;padding:6px 10px;user-select:none}
.gridToggle input{accent-color:#f3c739}
.previewGridOverlay .gridLine{pointer-events:none}

.numberInput{width:76px;background:#071d43;color:#fff;border:1px solid #2d5b9e;border-radius:8px;padding:6px 8px;font-weight:800;text-align:center;}
.rangeRow{gap:8px;}

#exportLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 25, 0.72);
  backdrop-filter: blur(6px);
}

#exportLoadingOverlay.active {
  display: flex;
}

.export-loading-box {
  min-width: 280px;
  padding: 28px 34px;
  border-radius: 22px;
  background: rgba(10, 24, 54, 0.96);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.export-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.22);
  border-top-color: #f6c845;
  animation: exportSpin 0.8s linear infinite;
}

@keyframes exportSpin {
  to { transform: rotate(360deg); }
}