:root {
  --hlr-green: #38f86c;
  --hlr-green-2: #09db7c;
  --hlr-ink: #001b0a;
  --hlr-panel: rgba(0, 22, 8, .9);
  --hlr-panel-soft: rgba(0, 35, 12, .64);
  --hlr-line: rgba(56, 248, 108, .32);
  --hlr-text: #effff3;
  --hlr-muted: #abd8b7;
  --hlr-yellow: #ffdf5e;
  --hlr-red: #ff6d7a;
}

.hlr-admin-page,
.hlr-admin-page * { box-sizing: border-box; }

.hlr-admin-page { min-height: 100vh; color: var(--hlr-text); font-family: Orbitron, Arial, sans-serif; }
.hlr-admin-page > footer { width: 100%; }
.hlr-shell { width: min(1500px, calc(100% - 34px)); margin: 32px auto 76px; }
.hlr-panel { border: 1px solid var(--hlr-line); border-radius: 26px; background: linear-gradient(145deg, rgba(0, 28, 10, .94), rgba(0, 13, 5, .92)); box-shadow: 0 22px 70px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .025); }

.hlr-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(26px, 4vw, 46px); }
.hlr-hero::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -170px; top: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 248, 108, .22), transparent 68%); }
.hlr-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .11; background-image: linear-gradient(rgba(56,248,108,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(56,248,108,.22) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.hlr-eyebrow,.hlr-step { color: var(--hlr-green); font-size: .72rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.hlr-live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--hlr-green); box-shadow: 0 0 18px var(--hlr-green); }
.hlr-hero h1 { margin: 10px 0 8px; color: #fffef1; font-size: clamp(2.2rem, 5vw, 4.75rem); line-height: 1; letter-spacing: -.04em; }
.hlr-hero h1 span { color: var(--hlr-green); }
.hlr-hero p { max-width: 820px; margin: 0; color: #d9f8e1; font: 500 .95rem/1.65 Orbitron, Arial, sans-serif; }
.hlr-status-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.hlr-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(0,0,0,.23); color: #ccefd5; font-size: .66rem; }
.hlr-chip.is-good { border-color: rgba(56,248,108,.4); color: var(--hlr-green); }
.hlr-chip.is-bad { border-color: rgba(255,109,122,.55); color: var(--hlr-red); }
.hlr-hero-actions { display: grid; min-width: 245px; gap: 10px; }
.hlr-hero-actions form { margin: 0; }

.hlr-button,.hlr-small-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--hlr-line); border-radius: 13px; background: rgba(0, 44, 15, .64); color: var(--hlr-text); font: 800 .72rem/1.25 Orbitron, Arial, sans-serif; text-decoration: none; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.hlr-button { width: 100%; min-height: 48px; padding: 12px 16px; }
.hlr-button:hover,.hlr-small-button:hover { transform: translateY(-1px); border-color: rgba(56,248,108,.8); box-shadow: 0 10px 26px rgba(0,0,0,.24); }
.hlr-button-ghost { background: rgba(0,0,0,.18); }
.hlr-button-warn { border-color: rgba(255,223,94,.55); color: var(--hlr-yellow); background: rgba(89,69,0,.24); }
.hlr-button-primary { border-color: rgba(117,255,154,.88); background: linear-gradient(135deg, #48ff7b, #06e789); color: #001707; box-shadow: 0 14px 34px rgba(18, 238, 112, .18); }
.hlr-button:disabled { cursor: not-allowed; opacity: .5; transform: none; }

.hlr-alert { margin: 18px 0; padding: 15px 18px; border: 1px solid rgba(56,248,108,.5); border-radius: 16px; background: rgba(0, 54, 19, .85); color: #eaffee; font-size: .78rem; }
.hlr-alert.is-error { border-color: rgba(255,109,122,.55); background: rgba(83,10,17,.78); color: #ffe8ea; }
.hlr-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; margin-top: 20px; align-items: start; }
.hlr-release-form { padding: clamp(22px, 3vw, 34px); }
.hlr-section-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.hlr-section-head h2,.hlr-guide h2 { margin: 7px 0 7px; color: #fffef1; font-size: clamp(1.25rem, 2.2vw, 1.8rem); }
.hlr-section-head p,.hlr-guide p { margin: 0; color: var(--hlr-muted); font: 500 .78rem/1.55 Orbitron, Arial, sans-serif; }
.hlr-text-link { color: var(--hlr-yellow); font-size: .7rem; white-space: nowrap; }
.hlr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.hlr-field { display: grid; gap: 8px; min-width: 0; }
.hlr-field-wide { grid-column: 1 / -1; }
.hlr-field > span { color: #eaffef; font-size: .74rem; font-weight: 800; }
.hlr-field em { color: var(--hlr-muted); font-size: .66rem; font-style: normal; font-weight: 500; }
.hlr-field input,.hlr-field textarea { width: 100%; border: 1px solid rgba(56,248,108,.35); border-radius: 13px; outline: none; background: rgba(0, 7, 3, .57); color: #f4fff6; font: 500 .82rem/1.45 Orbitron, Arial, sans-serif; transition: border-color .15s, box-shadow .15s; }
.hlr-field input { min-height: 48px; padding: 0 14px; }
.hlr-field textarea { resize: vertical; min-height: 145px; padding: 14px; }
.hlr-field input:focus,.hlr-field textarea:focus { border-color: var(--hlr-green); box-shadow: 0 0 0 3px rgba(56,248,108,.11); }
.hlr-field input[readonly] { color: var(--hlr-muted); cursor: not-allowed; }
.hlr-field small { color: #8ebe9a; font-size: .61rem; line-height: 1.4; }
.hlr-toggle-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; }
.hlr-toggle { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; min-height: 68px; padding: 12px; border: 1px solid rgba(56,248,108,.18); border-radius: 14px; background: rgba(0,0,0,.17); cursor: pointer; }
.hlr-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.hlr-toggle-track { position: relative; width: 42px; height: 23px; border-radius: 999px; background: #193a23; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .16s; }
.hlr-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #b8d8c0; transition: transform .16s, background .16s; }
.hlr-toggle input:checked + .hlr-toggle-track { background: var(--hlr-green); }
.hlr-toggle input:checked + .hlr-toggle-track::after { transform: translateX(19px); background: #001707; }
.hlr-toggle b,.hlr-toggle small { display: block; }
.hlr-toggle b { color: #edfff1; font-size: .69rem; }
.hlr-toggle small { margin-top: 4px; color: #8ebe9a; font-size: .57rem; line-height: 1.35; }

.hlr-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.hlr-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 172px; padding: 20px; overflow: hidden; border: 1px dashed rgba(56,248,108,.46); border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(56,248,108,.09), transparent 66%), rgba(0,0,0,.18); text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.hlr-dropzone:hover,.hlr-dropzone.is-dragging { border-color: var(--hlr-green); background-color: rgba(0,50,18,.42); transform: translateY(-1px); }
.hlr-dropzone.has-files { border-style: solid; background-color: rgba(0,61,22,.4); }
.hlr-dropzone-wide { grid-column: 1 / -1; min-height: 138px; }
.hlr-dropzone input,.hlr-folder-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hlr-drop-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border: 1px solid rgba(56,248,108,.45); border-radius: 13px; background: rgba(56,248,108,.09); color: var(--hlr-green); font-size: 1.35rem; font-weight: 900; }
.hlr-dropzone strong { color: #f3fff5; font-size: .78rem; }
.hlr-dropzone > span:not(.hlr-drop-icon) { margin-top: 6px; color: #b5ddbf; font-size: .64rem; line-height: 1.45; }
.hlr-dropzone small { margin-top: 11px; color: var(--hlr-green); font-size: .58rem; line-height: 1.4; }
.hlr-folder-picker { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; grid-column: 1 / -1; min-height: 46px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(0,0,0,.17); cursor: pointer; }
.hlr-folder-picker span { color: var(--hlr-green); font-size: .68rem; font-weight: 800; }
.hlr-folder-picker small { color: #8ebe9a; font-size: .56rem; }
.hlr-notes { margin-top: 20px; }
.hlr-transfer { margin-top: 18px; padding: 15px; border: 1px solid rgba(56,248,108,.3); border-radius: 15px; background: rgba(0,0,0,.24); }
.hlr-transfer.is-error { border-color: rgba(255,109,122,.5); }
.hlr-transfer-copy { display: flex; justify-content: space-between; gap: 14px; }
.hlr-transfer-copy strong { color: var(--hlr-green); font-size: .68rem; }
.hlr-transfer.is-error .hlr-transfer-copy strong { color: var(--hlr-red); }
.hlr-transfer-copy span,.hlr-transfer-stats { color: var(--hlr-muted); font-size: .59rem; }
.hlr-progress { height: 9px; margin: 11px 0 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.hlr-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hlr-green), var(--hlr-green-2)); transition: width .18s ease; }
.hlr-transfer-stats { display: flex; justify-content: space-between; }
.hlr-publish { flex-direction: column; min-height: 66px; margin-top: 20px; }
.hlr-publish > span { font-size: .8rem; }
.hlr-publish small { font: 600 .56rem Orbitron, Arial, sans-serif; opacity: .72; }

.hlr-guide { position: sticky; top: 24px; padding: 25px; }
.hlr-guide ol { display: grid; gap: 18px; margin: 24px 0; padding: 0; list-style: none; }
.hlr-guide li { display: grid; grid-template-columns: 35px 1fr; gap: 12px; align-items: start; }
.hlr-guide li > span { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(56,248,108,.4); border-radius: 11px; color: var(--hlr-green); font-size: .7rem; font-weight: 900; }
.hlr-guide li b { color: #edfff1; font-size: .68rem; }
.hlr-guide li p { margin-top: 5px; font-size: .62rem; }
.hlr-security-note { padding: 16px; border: 1px solid rgba(255,223,94,.3); border-radius: 15px; background: rgba(73,55,0,.15); }
.hlr-security-note b { color: var(--hlr-yellow); font-size: .68rem; }
.hlr-security-note p { margin-top: 7px; font-size: .59rem; }

.hlr-library { margin-top: 20px; padding: clamp(22px, 3vw, 32px); }
.hlr-count { display: grid; place-items: center; min-width: 48px; height: 48px; border: 1px solid rgba(56,248,108,.38); border-radius: 15px; background: rgba(56,248,108,.08); color: var(--hlr-green); font-weight: 900; }
.hlr-release-list { display: grid; gap: 11px; margin-top: 22px; }
.hlr-release-row { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px; overflow: hidden; border: 1px solid rgba(56,248,108,.2); border-radius: 18px; background: rgba(0,0,0,.18); }
.hlr-release-row.is-current { border-color: rgba(56,248,108,.58); background: linear-gradient(90deg, rgba(56,248,108,.08), rgba(0,0,0,.17) 45%); }
.hlr-version-mark { color: #f5fff7; font-size: 1.32rem; font-weight: 900; letter-spacing: -.03em; }
.hlr-version-mark span { margin-right: 2px; color: var(--hlr-green); }
.hlr-release-title { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hlr-release-title h3 { margin: 0; color: #f4fff6; font-size: .8rem; }
.hlr-badge { padding: 5px 8px; border-radius: 999px; background: var(--hlr-green); color: #001707; font-size: .52rem; font-weight: 900; text-transform: uppercase; }
.hlr-badge.is-warn { background: var(--hlr-yellow); }
.hlr-release-summary > p { margin: 7px 0 9px; color: #c5e9ce; font: 500 .66rem/1.5 Orbitron, Arial, sans-serif; }
.hlr-file-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #82b890; font-size: .56rem; }
.hlr-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 420px; }
.hlr-row-actions form { margin: 0; }
.hlr-small-button { min-height: 34px; padding: 7px 10px; font-size: .56rem; }
.hlr-small-button.is-edit { border-color: rgba(255,223,94,.55); color: var(--hlr-yellow); }
.hlr-small-button.is-danger { border-color: rgba(255,109,122,.55); color: #ffadb5; background: rgba(90,13,22,.33); }
.hlr-empty { padding: 48px 20px; text-align: center; }
.hlr-empty > span { color: rgba(56,248,108,.25); font-size: 4rem; font-weight: 900; }
.hlr-empty h3 { margin: -8px 0 8px; color: #f3fff5; }
.hlr-empty p { color: var(--hlr-muted); font-size: .72rem; }

/* Public Previous Versions section; intentionally outside the Builder canvas. */
.hlr-public,.hlr-public * { box-sizing: border-box; }
.hlr-public { width: min(1632px, calc(100% - 48px)); margin: 0 auto 70px; padding: clamp(22px, 3vw, 30px); border: 1px solid rgba(56,248,108,.45); border-radius: 24px; background: linear-gradient(145deg, rgba(0,25,9,.9), rgba(0,12,5,.92)); color: var(--hlr-text); font-family: Orbitron, Arial, sans-serif; box-shadow: 0 18px 58px rgba(0,0,0,.2); }
.hlr-public-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.hlr-public-head h2 { margin: 0 0 7px; color: var(--hlr-green); font-size: clamp(1.25rem, 2.1vw, 1.75rem); }
.hlr-public-head p { margin: 0; color: #c5e9ce; font-size: .72rem; line-height: 1.55; }
.hlr-public-list { display: grid; gap: 12px; margin-top: 20px; }
.hlr-public-row { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 18px; border: 1px solid rgba(56,248,108,.25); border-radius: 17px; background: rgba(0,0,0,.2); }
.hlr-public-row.is-current { border-color: rgba(56,248,108,.62); background: linear-gradient(90deg, rgba(56,248,108,.08), rgba(0,0,0,.17)); }
.hlr-public-version { color: #fffef1; font-size: 1.1rem; font-weight: 900; }
.hlr-public-version small { display: inline-block; margin-left: 7px; padding: 4px 7px; border-radius: 999px; background: var(--hlr-green); color: #001707; font-size: .5rem; vertical-align: 2px; }
.hlr-public-copy p { margin: 4px 0; color: #d8f4df; font-size: .66rem; line-height: 1.5; }
.hlr-public-copy .hlr-public-date { color: #8ebe9a; font-size: .57rem; }
.hlr-public-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hlr-public-download { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 165px; min-height: 52px; padding: 9px 14px; border-radius: 13px; background: linear-gradient(135deg,#46ff79,#05e588); color: #001707; text-decoration: none; font-size: .65rem; font-weight: 900; }
.hlr-public-download span { margin-top: 3px; font-size: .51rem; opacity: .7; }
.hlr-public-admin { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2 / -1; }
.hlr-public-admin form { margin: 0; }
.hlr-public-empty { padding: 34px 18px; border: 1px dashed rgba(56,248,108,.28); border-radius: 16px; color: #a8d4b3; text-align: center; font-size: .72rem; }

@media (max-width: 1040px) {
  .hlr-workspace { grid-template-columns: 1fr; }
  .hlr-guide { position: static; }
  .hlr-release-row,.hlr-public-row { grid-template-columns: 120px minmax(0,1fr); }
  .hlr-row-actions,.hlr-public-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .hlr-public-admin { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .hlr-shell { width: min(100% - 20px, 650px); margin-top: 18px; }
  .hlr-hero { grid-template-columns: 1fr; padding: 24px 20px; }
  .hlr-hero-actions { min-width: 0; }
  .hlr-form-grid,.hlr-toggle-row,.hlr-upload-grid { grid-template-columns: 1fr; }
  .hlr-field-wide,.hlr-dropzone-wide,.hlr-folder-picker { grid-column: auto; }
  .hlr-section-head,.hlr-transfer-copy { flex-direction: column; }
  .hlr-release-row,.hlr-public-row { grid-template-columns: 1fr; gap: 10px; }
  .hlr-row-actions,.hlr-public-actions,.hlr-public-admin { grid-column: auto; justify-content: flex-start; }
  .hlr-public { width: calc(100% - 32px); margin-bottom: 48px; }
  .hlr-public-head { align-items: flex-start; }
  .hlr-public-download { min-width: 145px; }
}
