/* Tutorial Edit styles: simple comments added by me to explain sections. */
:root{
    --bg:#F6F3F6; --ink:#4f3b4e; --border:#e4dce3; --chip:#b49eb1; --brand:#5c475b;
    --btn-base:#7F627D; --btn-hover:#5C475B; --page-w:1100px; --pad-x:40px; --field-h:54px;
  }
  
  *{ box-sizing:border-box; }
  body{ background:var(--bg); color:var(--ink); }
  
  .page-wrap{ max-width:var(--page-w); margin:28px auto 64px; padding:0 18px; }
  .upload-title{ margin:18px 0 14px; padding:0 var(--pad-x); font-size:28px; font-weight:800; }
  .upload-form{ width:100%; padding:0 var(--pad-x) 40px; }
  .form-group{ margin-bottom:22px; display:flex; flex-direction:column; gap:10px; }
  .upload-form label{ font-weight:800; font-size:.98rem; }
  
  .upload-form input[type="text"], .upload-form select{
    width:100%; height:var(--field-h); padding:0 20px; border:1px solid var(--border);
    border-radius:999px; background:#fff; font-size:1rem; color:var(--ink);
  }
  .upload-form textarea{
    width:100%; min-height:150px; padding:14px 20px; border:1px solid var(--border);
    border-radius:28px; background:#fff; font-size:1rem; color:var(--ink); resize:vertical;
  }
  .upload-form input:focus, .upload-form select:focus, .upload-form textarea:focus{
    box-shadow:0 0 0 3px rgba(92,71,91,.15); border-color:#d6c7d3;
  }
  
  
  .thumbs-window{ padding:4px 0; overflow-x:hidden; }
  .thumbs-track{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
  .media-plus{
    width:64px; height:64px; display:flex; align-items:center; justify-content:center;
    border:2px dashed var(--chip); border-radius:14px; background:#efe7ee;
    font-size:22px; font-weight:800; color:#4f3b4e; cursor:pointer; user-select:none;
  }
  .media-plus.dragover{ background:#f3ecf2; }
  
  .thumb{
    position:relative; width:140px; height:98px; border-radius:18px;
    overflow:hidden; background:#fff; border:1px solid var(--border); user-select:none;
  }
  .thumb img, .thumb video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; }
  .pdf-tile{
    width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#f2ecf2; color:#3f2f3e; padding:8px; text-align:center;
  }
  .pdf-tile .badge{ font-weight:900; border:1px solid var(--chip); border-radius:8px; padding:2px 6px; margin-bottom:6px; background:#fff; }
  .pdf-tile .name{ font-size:.78rem; line-height:1.05; max-height:2.2em; overflow:hidden; text-overflow:ellipsis; }
  .remove-preview{
    position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
    border:none; background: var(--brand); color:#fff; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; line-height:1; padding:0;
  }
  .thumb.dragging{ opacity:.4; }
  .thumb.drop-hint{ outline:2px dashed var(--btn-base); outline-offset:-4px; }
  
  
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-weight:800; transition:background-color .2s ease; }
  .btn-primary{ background:var(--btn-base); color:#fff; padding:12px 22px; border-radius:999px; font-size:16px; }
  .btn-primary:hover{ background:var(--btn-hover); }
  .btn-ghost{ background:#e9e0e8; color:#4f3b4e; padding:12px 22px; border-radius:999px; font-size:16px; text-decoration:none; }
  .text-end{ text-align:end; }
  
  .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  
  /* Responsive styles */
@media (max-width:720px){
    .upload-title{ padding:0 16px; }
    .upload-form{ padding:0 16px 28px; }
    :root{ --field-h:50px; }
  }