:root{--bg:#08090d;--panel:#11131a;--panel2:#0d0f15;--line:rgba(255,255,255,.09);--text:#f5f6fa;--muted:#9299aa;--accent:#8b7cff;--cyan:#62d8ff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Inter,system-ui,sans-serif;min-height:100vh}body:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}.bg-glow{position:fixed;border-radius:50%;filter:blur(110px);opacity:.18;pointer-events:none;z-index:-1}.glow-a{width:480px;height:480px;background:#6454ff;top:-260px;left:25%}.glow-b{width:360px;height:360px;background:#22c9f4;right:-220px;top:35%}
.nav{height:64px;max-width:1240px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.brand{color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;font-weight:700}.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:#0b1230;box-shadow:0 5px 18px rgba(70,120,255,.18)}.logo img{width:100%;height:100%;display:block;object-fit:cover}.secure{font-size:11px;color:#687083}
main{max-width:1240px;margin:auto;padding:20px 28px 38px}.hero{text-align:center;max-width:760px;margin:0 auto 18px}.eyebrow,.kicker{font-size:10px;font-weight:800;letter-spacing:.16em;color:#9b91ff}.eyebrow{display:inline-flex;gap:8px;align-items:center;margin-bottom:18px}.eyebrow span{width:6px;height:6px;border-radius:50%;background:#8b7cff;box-shadow:0 0 14px #8b7cff}.compact-hero .eyebrow{margin-bottom:8px}.lead{margin:0 auto;color:var(--muted);line-height:1.45;max-width:620px;font-size:13px}
.builder-shell{border:1px solid var(--line);border-radius:24px;background:rgba(14,16,23,.82);box-shadow:0 30px 100px rgba(0,0,0,.35);overflow:hidden}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px}.main-col{padding:24px;border-right:1px solid var(--line)}
.card{border:1px solid var(--line);background:rgba(17,19,26,.72);border-radius:17px;padding:20px;margin-bottom:14px}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:16px}.card h2{font-size:16px;margin:5px 0 0;letter-spacing:-.025em}.hint{font-size:10px;color:#686f80}
.dropzone{min-height:185px;border:1px dashed #343949;border-radius:15px;background:#0b0d12;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;transition:.2s}.dropzone.drag{border-color:#8174ff;background:#121027}.upload-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#19162e;color:#a79dff;font-size:21px;margin-bottom:10px}.dropzone h3{margin:0 0 6px;font-size:14px}.dropzone p{margin:0 0 13px;color:#72798a;font-size:11px}.browse{cursor:pointer;padding:9px 14px;border-radius:10px;background:#f2f3f6;color:#101117;font-size:11px;font-weight:700}.browse input{display:none}.file-status{margin-top:12px;color:#626a7a;font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-status.ok{color:#6bd9a7}.folder-note{margin-top:12px;padding:12px;border-radius:11px;background:#111526;border:1px solid #252b43;display:flex;flex-direction:column;gap:4px}.folder-note span{color:#777f91;font-size:10px;line-height:1.5}.hidden{display:none!important}
.form-grid,.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}label{display:flex;flex-direction:column;gap:7px;color:#8991a1;font-size:10px;font-weight:600}input,select{width:100%;height:43px;background:#0b0d12;color:#eef0f5;border:1px solid var(--line);border-radius:10px;padding:0 12px;outline:none;font:12px Inter}input:focus,select:focus{border-color:#6458bd}.check{flex-direction:row;align-items:center;gap:8px;height:43px}.check input{width:15px;height:15px;accent-color:#897bff}
.icon-options{display:grid;gap:8px}.icon-option{width:100%;display:grid;grid-template-columns:40px 1fr 20px;align-items:center;gap:11px;text-align:left;border:1px solid var(--line);background:#0c0e13;color:#fff;border-radius:12px;padding:9px;cursor:pointer}.icon-option.selected{border-color:#51499a;background:#121126}.icon-option b{display:block;font-size:11px}.icon-option small{display:block;color:#6f7788;font-size:9px;margin-top:3px;line-height:1.35}.icon-box{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800}.icon-box.detected{background:linear-gradient(135deg,#8b7cff,#5edbff)}.icon-box.upload{background:#1b1931;color:#a89fff}.icon-box.default{background:linear-gradient(135deg,#272b39,#11131a);border:1px solid #34394a}.radio{color:#8f84ff;font-size:12px}.custom-icon{margin-top:10px}
.advanced{border:1px solid var(--line);border-radius:17px;background:rgba(17,19,26,.55);margin-bottom:14px}.advanced summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;justify-content:space-between;align-items:center}.advanced summary::-webkit-details-marker{display:none}.advanced summary span{font-size:12px;font-weight:700}.advanced summary small{font-size:9px;color:#646c7c}.advanced-grid{padding:0 20px 17px}.advanced-note{font-size:9px;color:#646c7c;line-height:1.5;padding:0 20px 18px;margin:0}
.build-row{border:1px solid #2b2942;background:linear-gradient(100deg,#11121a,#141326);border-radius:17px;padding:16px 17px;display:flex;align-items:center;justify-content:space-between;gap:15px}.build-row b{display:block;font-size:12px}.build-row span{display:block;color:#737b8c;font-size:9px;margin-top:4px}.build-btn{border:0;background:linear-gradient(135deg,#8a7bff,#5fd9ff);color:#fff;border-radius:11px;height:45px;padding:0 18px;font:700 11px Inter;cursor:pointer;box-shadow:0 9px 28px rgba(111,111,255,.2)}.build-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.full{width:100%}.live-dot{color:#62d8a4;font-size:8px}
.trust-strip{display:flex;justify-content:center;gap:13px;align-items:center;color:#565e6e;font-size:9px;font-weight:700;letter-spacing:.08em;padding:28px}.trust-strip i{width:3px;height:3px;background:#353b48;border-radius:50%}footer{max-width:1240px;margin:auto;border-top:1px solid var(--line);padding:22px 28px 30px;display:flex;justify-content:space-between;color:#4f5666;font-size:9px}

@media(max-width:900px){.workspace{grid-template-columns:1fr}.main-col{border-right:0}}
@media(max-width:620px){.nav{padding:0 18px}main{padding:16px 14px 28px}.builder-shell{border-radius:18px}.form-grid,.advanced-grid{grid-template-columns:1fr}.build-row{align-items:stretch;flex-direction:column}.build-btn{width:100%}.hint{display:none}.trust-strip{flex-wrap:wrap}}

.folder-note label{display:block;margin-top:12px;color:#7f8797;font-size:9px}.folder-note input{margin-top:5px;width:100%;background:#0b0d12;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:9px 10px;font:10px Inter}.advanced-wide{grid-column:1/-1}.mini-label{font-size:9px;color:#7d8595;margin-bottom:7px}.mime-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mime-grid label{display:flex;align-items:center;gap:6px;padding:8px;border:1px solid var(--line);border-radius:9px;background:#0c0e13;color:#aeb5c2;font-size:9px}.mime-grid input{width:auto}.custom-mime{display:block;margin-top:9px;color:#7d8595;font-size:9px}.custom-mime input{margin-top:5px;width:100%;background:#0b0d12;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:9px 10px;font:10px Inter}.icon-color-row{display:flex;align-items:center;gap:10px;margin:0 20px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0c0e13;color:#8d95a5;font-size:9px}.icon-color-row>span{margin-right:auto}.color-auto{display:flex;align-items:center;gap:5px}.color-auto input[type=checkbox]{width:auto}.icon-color-row input[type=color]{width:30px;height:24px;padding:2px;border:1px solid var(--line);border-radius:6px;background:#0b0d12}.icon-color-row input[type=color]:disabled{opacity:.45}
@media(max-width:620px){.mime-grid{grid-template-columns:1fr 1fr}}

/* V7: keep long selected filenames inside the upload card */
.file-status {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* V8: hard containment for selected filenames / narrow viewports */
.upload-card,
.upload-card * {
  box-sizing: border-box;
}
.upload-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.upload-card .dropzone {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.upload-card .file-status {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* V9: global responsive containment — no component may create horizontal page overflow */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
main,
.nav,
.builder-shell,
.workspace,
.main-col,
.card,
.card-head,
.form-grid,
.advanced-grid,
.build-row,
label,
input,
select,
button {
  min-width: 0;
  max-width: 100%;
}
.workspace {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
.main-col {
  width: 100%;
  min-width: 0;
}
.form-grid,
.advanced-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.form-grid > *,
.advanced-grid > * {
  min-width: 0;
}
.form-grid input,
.form-grid select,
.advanced-grid input,
.advanced-grid select,
.folder-note input,
.custom-mime input {
  min-width: 0;
  max-width: 100%;
}
.dropzone,
.file-status,
.folder-note {
  min-width: 0;
  max-width: 100%;
}

.browse-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.browse.alt{background:#0d0f15;color:#bcb5ff;border:1px solid #554c9d}

.icon-preview{display:flex;align-items:center;gap:14px;padding:12px;margin-bottom:14px;border:1px solid var(--line);border-radius:13px;background:#0b0d12}
.icon-preview-box{width:64px;height:64px;border-radius:16px;overflow:hidden;flex:none;background:#19162e}
.icon-preview-box img,.icon-box img{width:100%;height:100%;object-fit:cover;display:block}
.icon-preview b{display:block;font-size:12px}
.icon-preview small{display:block;color:#72798a;font-size:10px;margin-top:3px;word-break:break-all}
.icon-box{overflow:hidden}

.entry-note{margin-top:6px;font-size:10px;color:#8b93a6;max-width:100%;word-break:break-all}
.entry-note.warn{color:#f0a35e}
.browse{position:relative}
.browse input{display:block!important;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.browse:focus-within{outline:2px solid #8174ff;outline-offset:2px}

/* V17: font fallback for form controls + no-wrap Build button */
button,input,select,textarea,.build-btn,
.build-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}

.bar{height:10px;border-radius:99px;background:#1a1d28;overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#8a7bff,#5fd9ff);transition:width .3s}
.stages{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:#626a7a}
.stages li::before{content:'○ '}
.stages li.done{color:#6bd9a7}.stages li.done::before{content:'✓ '}
.stages li.active{color:#eef0f5;font-weight:700}.stages li.active::before{content:'● '}
.stages li.failed{color:#ff7a7a;font-weight:700}.stages li.failed::before{content:'✕ '}
.prog-msg{margin-top:10px;font-size:11px;color:#8b93a6;min-height:14px;word-break:break-word}
.prog-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.prog-actions .browse{border:1px solid #554c9d;font-size:11px}
.prog-actions a.build-btn{text-decoration:none}