:root{
  --bg:#0a0a13;
  --panel:#151520;
  --panel-strong:#1d1d2d;
  --line:rgba(255,255,255,.12);
  --text:#f6f4ff;
  --muted:#a7a0c4;
  --accent:#ff8a42;
  --accent-2:#a06bff;
  color-scheme:dark;
}

@font-face{
  font-family:'DM Sans';
  src:url('../fonts/DM-Sans.ttf') format('truetype');
  font-style:normal;
  font-weight:100 1000;
  font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/DM-Sans-Italic.ttf') format('truetype');
  font-style:italic;
  font-weight:100 1000;
  font-display:swap;
}
@font-face{
  font-family:'Roca Heavy';
  src:url('../fonts/Roca-Heavy.ttf') format('truetype');
  font-style:normal;
  font-weight:700 900;
  font-display:swap;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans', system-ui, sans-serif;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  border:1px solid transparent;
  border-radius:8px;
  padding:.8rem 1rem;
  background:linear-gradient(95deg, var(--accent-2), var(--accent));
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

button:hover{
  filter:brightness(1.06);
}

button:disabled{
  opacity:.48;
  cursor:not-allowed;
  filter:none;
}

label{
  display:grid;
  gap:.45rem;
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

input,
select,
textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:.85rem .9rem;
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}

textarea{
  min-height:7rem;
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--accent);
}

.private-shell{
  min-height:100svh;
}

.login-panel{
  width:min(420px, calc(100vw - 2rem));
  margin:auto;
  padding:3rem 0;
  min-height:100svh;
  display:grid;
  align-content:center;
}

.eyebrow{
  margin:0 0 .75rem;
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

h1,
h2{
  margin:0;
}

.login-panel h1{
  font-size:clamp(2.2rem, 8vw, 4.5rem);
  line-height:1;
}

.login-form{
  display:grid;
  gap:1rem;
  margin-top:2rem;
  padding:1.25rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}

.form-message{
  min-height:1.2rem;
  margin:0;
  color:var(--accent);
  font-size:.86rem;
}

.is-hidden{
  display:none !important;
}

.account-shell{
  padding:clamp(1rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 8% 5%, rgba(160,107,255,.16), transparent 30rem),
    radial-gradient(circle at 95% 92%, rgba(255,138,66,.12), transparent 28rem),
    var(--bg);
}

.account-page{
  width:min(1100px, 100%);
  margin:0 auto;
}

.account-head,
.account-identity,
.account-head-actions,
.account-inline-actions{
  display:flex;
  align-items:center;
}

.account-head{
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
}
.account-head-actions{ gap:.65rem; }
.account-return-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.8rem;
  padding:.8rem 1rem;
  border:1px solid var(--line);
  border-radius:8px;
  color:#fff;
  font-weight:700;
  text-decoration:none;
}

.account-identity{ gap:1rem; }
.account-head h1{
  font-family:'Roca Heavy', 'DM Sans', sans-serif;
  font-size:clamp(2rem, 6vw, 4rem);
  line-height:1;
}
.account-welcome{
  margin:.55rem 0 0;
  color:var(--muted);
}
.account-avatar{
  display:grid;
  place-items:center;
  width:5rem;
  height:5rem;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:50%;
  background:linear-gradient(145deg, var(--accent-2), var(--accent));
  background-position:center;
  background-size:cover;
  color:#fff;
  font-size:2rem;
  font-weight:800;
}
.account-avatar.has-image span{ visibility:hidden; }
.account-alert{
  margin:0 0 1rem;
  padding:1rem;
  border:1px solid rgba(255,179,92,.45);
  border-radius:12px;
  background:rgba(255,179,92,.1);
  color:#ffd8a8;
  line-height:1.5;
}
.account-tools{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap:1rem;
  margin-bottom:1rem;
}
.account-tools a{
  display:grid;
  gap:.3rem;
  padding:1.2rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  color:var(--text);
  text-decoration:none;
  transition:transform .2s ease, border-color .2s ease;
}
.account-tools a:hover{ transform:translateY(-2px); border-color:var(--accent); }
.account-tools a span{ color:var(--muted); font-size:.86rem; }
.account-tools a.is-disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.account-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}
.account-card{
  display:grid;
  align-content:start;
  gap:1.25rem;
  padding:1.25rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
}
.account-card h2{ font-size:1.35rem; }
.account-form{ display:grid; gap:1rem; }
.account-avatar-form{
  padding-top:1.25rem;
  border-top:1px solid var(--line);
}
.account-inline-actions{ gap:.65rem; }
.field-help{
  margin:-.4rem 0 0;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.5;
}
.secondary-button{
  border-color:var(--line);
  background:rgba(255,255,255,.06);
}

.upload-shell{
  position:relative;
  padding:clamp(1rem, 3vw, 2.5rem);
  overflow:hidden;
  background:
    radial-gradient(circle at 6% 0%, rgba(127,87,255,.24), transparent 32rem),
    radial-gradient(circle at 100% 100%, rgba(255,113,66,.16), transparent 32rem),
    linear-gradient(145deg, #090911 0%, #0e0d19 52%, #100d18 100%);
}
.upload-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.025;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:48px 48px;
}
.upload-page{
  position:relative;
  width:min(1180px, 100%);
  margin:0 auto;
}
.upload-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:clamp(2rem, 5vw, 4.5rem);
}
.upload-back-link{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color:var(--muted);
  font-size:.82rem;
  font-weight:750;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.upload-back-link:hover{ color:var(--text); transform:translateX(-3px); }
.upload-secure-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:.7rem;
  font-weight:750;
}
.upload-secure-badge > span{
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:#67e8a4;
  box-shadow:0 0 14px rgba(103,232,164,.75);
}
.upload-hero{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:clamp(1rem, 3vw, 2rem);
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.upload-hero-icon{
  display:grid;
  place-items:center;
  width:clamp(4.5rem, 9vw, 7rem);
  height:clamp(4.5rem, 9vw, 7rem);
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  background:linear-gradient(145deg, rgba(160,107,255,.32), rgba(255,138,66,.16));
  box-shadow:0 24px 55px -28px rgba(160,107,255,.8), inset 0 1px 0 rgba(255,255,255,.2);
  transform:rotate(-4deg);
}
.upload-hero-icon svg{ width:48%; height:48%; }
.upload-hero h1{
  font-family:'Roca Heavy', 'DM Sans', sans-serif;
  font-size:clamp(2.7rem, 7vw, 5.8rem);
  line-height:.9;
  letter-spacing:-.045em;
  background:linear-gradient(105deg, #fff 18%, #d9c7ff 55%, #ffb584);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.upload-hero p:last-child{
  max-width:48rem;
  margin:.85rem 0 0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}
.upload-workspace{
  display:grid;
  grid-template-columns:minmax(340px, 430px) minmax(0, 1fr);
  gap:1rem;
  align-items:start;
}
.upload-card,
.upload-library{
  display:grid;
  gap:1.25rem;
  padding:1.35rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow:0 30px 70px -42px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.upload-card{ position:sticky; top:1rem; }
.upload-card-head,
.upload-library-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.upload-card-head > span:first-child{
  font-size:1.08rem;
  font-weight:800;
}
.upload-step-count,
.library-count{
  padding:.35rem .55rem;
  border-radius:999px;
  background:rgba(160,107,255,.12);
  color:#cbb6ff;
  font-size:.68rem;
  font-weight:800;
}
.upload-step{
  display:grid;
  gap:.85rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.upload-step-title{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.upload-step-title > span{
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  flex:0 0 auto;
  border-radius:9px;
  background:linear-gradient(145deg, var(--accent-2), #7652d8);
  color:#fff;
  font-size:.66rem;
  font-weight:850;
}
.upload-step-title > div{ display:grid; gap:.08rem; }
.upload-step-title strong{ font-size:.88rem; }
.upload-step-title small{ color:var(--muted); font-size:.7rem; }
.music-dropzone{
  position:relative;
  display:grid;
  place-items:center;
  gap:.45rem;
  min-height:13rem;
  padding:1.25rem;
  overflow:hidden;
  border:1px dashed rgba(176,153,255,.45);
  border-radius:18px;
  background:radial-gradient(circle at 50% 0%, rgba(160,107,255,.14), transparent 65%), rgba(255,255,255,.025);
  color:var(--text);
  text-align:center;
  text-transform:none;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.music-dropzone:hover{
  border-color:#bba4ff;
  background:radial-gradient(circle at 50% 0%, rgba(160,107,255,.22), transparent 68%), rgba(255,255,255,.04);
  transform:translateY(-2px);
}
.music-dropzone.has-file{ border-style:solid; border-color:rgba(103,232,164,.5); }
.music-dropzone.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
}
.upload-card.is-uploading .music-dropzone{
  border-color:rgba(160,107,255,.7);
  background:radial-gradient(circle at 50% 0%, rgba(160,107,255,.24), transparent 68%), rgba(255,255,255,.04);
}
.music-dropzone input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.dropzone-icon{
  display:grid;
  place-items:center;
  width:3.2rem;
  height:3.2rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(255,255,255,.055);
  color:#cbb6ff;
}
.dropzone-icon svg{ width:1.55rem; height:1.55rem; }
.music-dropzone > strong{
  max-width:100%;
  overflow:hidden;
  font-size:.9rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.music-dropzone > span:not(.dropzone-icon):not(.dropzone-button){
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:0;
}
.dropzone-button{
  margin-top:.25rem;
  padding:.5rem .7rem;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:0;
}
.upload-select-label{ text-transform:none; letter-spacing:0; }
.upload-select-label select{
  min-height:3.2rem;
  border-radius:12px;
  background:#171622;
  font-size:.84rem;
}
.upload-file-preview{
  display:grid;
  gap:.75rem;
  padding:.8rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.upload-file-meta{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.upload-file-type{
  display:grid;
  place-items:center;
  width:2.7rem;
  height:2.7rem;
  flex:0 0 auto;
  border-radius:10px;
  background:rgba(160,107,255,.16);
  color:#cbb6ff !important;
  font-size:.6rem !important;
  font-weight:850;
  text-transform:uppercase;
}
.upload-file-meta > div{ display:grid; min-width:0; gap:.15rem; }
.upload-file-meta strong{ overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.upload-file-preview span{ color:var(--muted); font-size:.7rem; }
.upload-file-preview audio{ width:100%; }
.upload-target-status{
  padding:.75rem .85rem;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(0,0,0,.12);
  color:var(--muted);
  font-size:.75rem;
  line-height:1.5;
}
.upload-auto-note{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.8rem .9rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:.72rem;
  line-height:1.4;
}
.upload-auto-note > span{
  width:.46rem;
  height:.46rem;
  flex:0 0 auto;
  border-radius:50%;
  background:#67e8a4;
  box-shadow:0 0 12px rgba(103,232,164,.5);
}
.upload-message{ margin-top:-.7rem; }
.upload-library{ min-width:0; }
.upload-library h2{ font-size:clamp(1.4rem, 3vw, 2rem); }
.upload-track-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.65rem;
}
.upload-track-item{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:.65rem;
  min-width:0;
  padding:.75rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  transition:border-color .2s ease, background .2s ease;
}
.upload-track-item:hover{ border-color:rgba(160,107,255,.36); background:rgba(255,255,255,.055); }
.upload-track-number{
  display:grid;
  place-items:center;
  width:2.15rem;
  height:2.15rem;
  grid-row:1 / 3;
  border-radius:10px;
  background:rgba(255,255,255,.055);
  color:#cbb6ff !important;
  font-size:.68rem !important;
  font-weight:850;
}
.upload-track-item > div:not(.upload-track-badges):not(.upload-track-files){ display:grid; min-width:0; gap:.12rem; }
.upload-track-item > div strong{ overflow:hidden; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.upload-track-item > div > span{ overflow:hidden; color:var(--muted); font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.upload-track-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  grid-column:2;
  gap:.4rem;
}
.upload-format-online{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .48rem;
  border:1px solid rgba(103,232,164,.2);
  border-radius:999px;
  background:rgba(103,232,164,.08);
  color:#91d9b1 !important;
  font-size:.59rem !important;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
}
.upload-format-online::before{
  content:"";
  width:.38rem;
  height:.38rem;
  flex:0 0 auto;
  border-radius:50%;
  background:#67e8a4;
  box-shadow:0 0 9px rgba(103,232,164,.45);
}
.upload-track-empty{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#d7a1aa;
  font-size:.62rem !important;
}
.upload-track-empty::before{
  content:"";
  width:.42rem;
  height:.42rem;
  flex:0 0 auto;
  border-radius:50%;
  background:#ff808e;
  box-shadow:0 0 10px rgba(255,128,142,.35);
}
.upload-track-details{
  grid-column:1 / -1;
  margin-top:.1rem;
  border-top:1px solid var(--line);
}
.upload-track-details summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.62rem .05rem 0;
  color:#cbb6ff;
  font-size:.64rem;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}
.upload-track-details summary::-webkit-details-marker{ display:none; }
.upload-track-details summary::after{
  content:"+";
  display:grid;
  place-items:center;
  width:1.25rem;
  height:1.25rem;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--muted);
  font-size:.8rem;
}
.upload-track-details[open] summary::after{ content:"−"; }
.upload-track-files{
  display:grid;
  gap:.45rem;
  padding-top:.6rem;
}
.upload-track-files > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.55rem .6rem;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(0,0,0,.12);
}
.upload-track-files > div > div{ display:grid; min-width:0; gap:.12rem; }
.upload-track-files strong{
  overflow:hidden;
  font-size:.65rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.upload-track-files span,
.upload-track-files time{
  color:var(--muted);
  font-size:.58rem;
  white-space:nowrap;
}

.editor{
  padding:1.25rem;
}

.editor-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0 1.25rem;
}

.editor-head h1{
  font-family:'Roca Heavy', 'DM Sans', sans-serif;
  font-size:clamp(2rem, 5vw, 3.4rem);
}

.editor-status{
  margin:.6rem 0 0;
  color:var(--muted);
  font-size:.82rem;
}

.editor-status[data-state="success"]{ color:#77d9a0; }
.editor-status[data-state="dirty"]{ color:#ffc078; }
.editor-status[data-state="error"]{ color:#ff8d8d; }

.editor-actions,
.preview-head{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.editor-actions button,
.preview-head button,
#addSectionButton{
  background:var(--panel-strong);
  border-color:var(--line);
}

.workspace{
  display:grid;
  grid-template-columns:minmax(360px, 520px) 1fr;
  gap:1rem;
  align-items:start;
}

.editor-form{
  display:grid;
  gap:1rem;
}

.panel,
.preview-panel{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}

.panel{
  display:grid;
  gap:1rem;
  padding:1rem;
}

.panel h2,
.preview-head h2{
  font-size:1rem;
}

.panel-title-row,
.content-field-head,
.inline-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.panel-title-row p,
.source-panel > p,
.preview-head p{
  margin:.35rem 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.5;
}

.field-count,
.content-field-head span{
  flex:0 0 auto;
  padding:.28rem .5rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
}

.inline-actions button{
  padding:.65rem .8rem;
  background:var(--panel-strong);
  border-color:var(--line);
}

.inline-actions a{
  color:var(--accent);
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
}

.content-fields{
  display:grid;
  gap:.75rem;
  max-height:56svh;
  padding-right:.25rem;
  overflow:auto;
}

.content-toolbar,
.field-actions,
.content-field-identity{
  display:flex;
  align-items:center;
  gap:.45rem;
}

.content-toolbar{
  flex-wrap:wrap;
  padding:.65rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.025);
}

.content-toolbar button,
.field-actions button,
.drag-handle{
  width:auto;
  min-height:0;
  padding:.45rem .6rem;
  border-color:var(--line);
  background:var(--panel-strong);
  font-size:.7rem;
}

.content-toolbar span{
  color:var(--muted);
  font-size:.7rem;
  line-height:1.4;
}

.content-field{
  display:grid;
  gap:.75rem;
  padding:.85rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}

.content-field.is-dragging{ opacity:.4; }
body.is-reordering,
body.is-reordering *{ cursor:grabbing !important; }
.content-field.is-drop-target{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,138,66,.18);
}

.content-field-identity{
  min-width:0;
}

.drag-handle{
  flex:0 0 auto;
  cursor:grab;
  color:var(--muted);
  font-size:1rem;
  line-height:1;
  touch-action:none;
  user-select:none;
}

.field-actions{
  flex-wrap:wrap;
}

.field-actions .danger-action{
  margin-left:auto;
  color:#ff9c9c;
  background:transparent;
}

.content-field-head strong{
  min-width:0;
  overflow:hidden;
  font-size:.76rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.content-field textarea{
  min-height:4.5rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.78rem;
  line-height:1.5;
}

.source-panel summary{
  cursor:pointer;
  font-size:1rem;
  font-weight:800;
}

.source-panel[open] summary{
  margin-bottom:.25rem;
}

#htmlSource{
  min-height:32rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.75rem;
  line-height:1.5;
  tab-size:2;
  white-space:pre;
}

.custom-sections{
  display:grid;
  gap:.75rem;
}

.custom-section{
  display:grid;
  gap:.45rem;
  padding:.85rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.04);
}

.custom-section h3{
  margin:0;
  font-size:.95rem;
}

.custom-section p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.custom-section button{
  justify-self:start;
  padding:.55rem .75rem;
  background:transparent;
  border-color:var(--line);
}

.preview-panel{
  position:sticky;
  top:1rem;
  overflow:hidden;
}

.preview-head{
  align-items:center;
  justify-content:space-between;
  padding:1rem;
  border-bottom:1px solid var(--line);
}

iframe{
  display:block;
  width:100%;
  height:calc(100svh - 7.5rem);
  border:0;
  background:#fff;
}

@media (max-width:900px){
  .editor-head,
  .workspace{
    display:grid;
    grid-template-columns:1fr;
  }

  .preview-panel{
    position:static;
  }

  iframe{
    height:75svh;
  }
  .upload-workspace{ grid-template-columns:1fr; }
  .upload-card{ position:static; }
}

@media (max-width:640px){
  body{ overflow-x:hidden; }
  button{
    width:100%;
    min-height:2.75rem;
  }
  .login-panel{
    width:100%;
    padding:2rem 1rem;
  }
  .login-panel h1{
    font-size:clamp(2rem, 15vw, 3.6rem);
  }
  .login-form{
    margin-top:1.5rem;
    padding:1rem;
  }
  .editor{
    padding:.85rem;
  }
  .editor-head{
    align-items:stretch;
    gap:1rem;
    padding:.5rem 0 1rem;
  }
  .editor-head h1{
    font-size:clamp(2rem, 13vw, 3rem);
    line-height:1;
  }
  .editor-actions,
  .preview-head{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .workspace{
    gap:.85rem;
  }
  .panel,
  .preview-panel{
    border-radius:8px;
  }
  .panel{
    padding:.9rem;
  }
  .preview-head{
    align-items:stretch;
    padding:.85rem;
  }
  iframe{
    height:70svh;
  }
  .account-shell{ padding:1rem; }
  .account-head,
  .account-identity{
    align-items:flex-start;
  }
  .account-head{ flex-direction:column; }
  .account-head-actions{ width:100%; }
  .account-head-actions > *{ flex:1 1 0; }
  .account-avatar{ width:3.8rem; height:3.8rem; }
  .account-tools,
  .account-grid{ grid-template-columns:1fr; }
  .account-inline-actions{ align-items:stretch; flex-direction:column; }
  .upload-shell{ padding:1rem; }
  .upload-head{ margin-bottom:2.5rem; }
  .upload-secure-badge{ padding:.4rem .55rem; }
  .upload-hero{ grid-template-columns:1fr; }
  .upload-hero-icon{ width:4.5rem; height:4.5rem; border-radius:20px; }
  .upload-hero h1{ font-size:clamp(2.65rem, 15vw, 4.3rem); }
  .upload-card,
  .upload-library{ padding:1rem; border-radius:20px; }
  .upload-track-list{ grid-template-columns:1fr; }
}

@media (max-width:380px){
  input,
  select,
  textarea{
    padding:.75rem;
  }
  .panel{
    padding:.8rem;
  }
}