*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --cream:      #F6F0E5;
      --parchment:  #EDE3CF;
      --amber:      #93591C;
      --amber-lt:   #E2A84E;
      --brown:      #6B4928;
      --dark:       #1E1109;
      --ink:        #3A250E;
      --muted:      #8A6A4A;
      --warm-white: #FBF7F0;
      --red:        #8B2222;
      --red-lt:     #F8EBEB;
    }

    body {
      font-family: 'Jost', sans-serif;
      background: var(--cream);
      color: var(--ink);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    body::after {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 9999;
    }

    nav {
      position: relative;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.1rem 3.5rem;
      background: rgba(246,240,229,.93);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(147,89,28,.13);
      z-index: 500;
    }
    .nav-logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem; font-weight: 600;
      color: var(--brown); letter-spacing: .03em; text-decoration: none;
    }
    .nav-logo span { color: var(--amber); }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }
    .nav-link {
      font-size: .76rem;
      font-weight: 400;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color .2s;
    }
    .nav-link:hover { color: var(--brown); }
    .nav-links .nav-link.hidden { display: none !important; }
    .nav-user {
      display: flex;
      align-items: center;
      gap: .85rem;
      color: var(--muted);
      font-size: .9rem;
    }
    .nav-user strong {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--brown);
    }
    .signout-link {
      font-size: .74rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--muted);
      transition: color .2s;
    }
    .signout-link:hover { color: var(--amber); }
    .lang-toggle {
      display: flex;
      background: rgba(147,89,28,.1);
      border: 1px solid rgba(147,89,28,.22);
      border-radius: 3px;
      overflow: hidden;
    }
    .lang-btn {
      padding: .35rem .75rem;
      border: none;
      cursor: pointer;
      font-family: 'Jost', sans-serif;
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .1em;
      background: transparent;
      color: var(--muted);
      transition: all .15s;
    }
    .lang-btn.active { background: var(--amber); color: white; }
    .lang-btn:not(.active):hover { background: rgba(147,89,28,.15); color: var(--brown); }

    main {
      flex: 1;
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      padding: 2.2rem 1.5rem 3.5rem;
      position: relative;
      z-index: 1;
    }

    .back-to-dashboard {
      display: inline-block;
      font-family: 'Jost', sans-serif;
      font-size: .8rem;
      font-weight: 400;
      color: var(--amber);
      text-decoration: none;
      margin-bottom: .85rem;
    }
    .back-to-dashboard:hover {
      color: var(--brown);
      text-decoration: underline;
    }

    .form-card {
      background: rgba(255,255,255,.72);
      border: 1.5px solid rgba(147,89,28,.24);
      border-radius: 2px;
      box-shadow: 0 12px 40px rgba(30,17,9,.06);
      padding: 2rem 1.7rem;
    }

    h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 5vw, 2.8rem);
      font-weight: 400;
      color: var(--dark);
      line-height: 1.1;
    }
    .subheading {
      margin-top: .55rem;
      color: var(--muted);
      font-style: italic;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.05rem;
      line-height: 1.55;
      margin-bottom: 1.5rem;
    }

    .top-error {
      display: none;
      margin-bottom: 1rem;
      color: var(--red);
      background: var(--red-lt);
      border: 1px solid rgba(139,34,34,.2);
      border-radius: 2px;
      padding: .65rem .85rem;
      font-size: .9rem;
      line-height: 1.45;
    }
    .top-error.visible { display: block; }

    .upload-status {
      display: none;
      margin-bottom: 1rem;
      color: var(--brown);
      background: rgba(147,89,28,.1);
      border: 1px solid rgba(147,89,28,.28);
      border-radius: 2px;
      padding: .7rem .9rem;
      font-size: .9rem;
      line-height: 1.45;
      align-items: center;
      gap: .55rem;
    }
    .upload-status.visible { display: flex; }
    .upload-status .spinner {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(147,89,28,.25);
      border-top-color: var(--amber);
      border-radius: 50%;
      animation: spin .7s linear infinite;
      flex-shrink: 0;
    }

    .field {
      margin-bottom: 1.1rem;
    }
    .field label {
      display: block;
      font-size: .72rem; font-weight: 500;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--brown); margin-bottom: .42rem;
    }
    .field input,
    .field select,
    .field textarea {
      width: 100%;
      padding: .82rem 1rem;
      border: 1.5px solid rgba(147,89,28,.28);
      border-radius: 2px;
      background: rgba(255,255,255,.85);
      font-family: 'Jost', sans-serif;
      font-size: .95rem;
      color: var(--ink);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .field select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B4928' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right .9rem center;
      padding-right: 2.3rem;
    }
    .field select:disabled {
      opacity: .55;
      cursor: not-allowed;
    }
    .field textarea {
      resize: vertical;
      min-height: 170px;
      line-height: 1.6;
    }
    .field input:focus,
    .field select:focus:not(:disabled),
    .field textarea:focus {
      border-color: var(--amber);
      background: rgba(255,255,255,.92);
      box-shadow: 0 0 0 3px rgba(147,89,28,.1);
    }
    .field-error {
      min-height: 1.05rem;
      margin-top: .28rem;
      color: var(--red);
      font-size: .82rem;
      line-height: 1.2;
    }

    #massFieldGroup:not(.hidden) {
      margin-top: -0.55rem;
    }
    .small-note {
      margin-top: .2rem;
      color: var(--muted);
      font-size: .8rem;
    }

    .date-status {
      margin-top: .35rem;
      min-height: 1.35rem;
      font-size: .8rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: .45rem;
      line-height: 1.35;
    }
    .spinner {
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      border: 2px solid rgba(147,89,28,.25);
      border-top-color: var(--amber);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .pill-toggle {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
      margin-bottom: .8rem;
    }
    .pill-btn {
      border: 1px solid rgba(147,89,28,.3);
      background: rgba(255,255,255,.75);
      color: var(--brown);
      border-radius: 999px;
      padding: .45rem .9rem;
      font-family: 'Jost', sans-serif;
      font-size: .82rem;
      cursor: pointer;
      transition: all .2s;
    }
    .pill-btn.active {
      background: var(--amber);
      color: var(--warm-white);
      border-color: var(--amber);
    }

    .source-type-selector {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-bottom: 1rem;
    }
    .source-type-option {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .55rem .9rem;
      border: 1px solid rgba(147,89,28,.3);
      border-radius: 4px;
      background: rgba(255,255,255,.75);
      cursor: pointer;
      font-family: 'Jost', sans-serif;
      font-size: .9rem;
      color: var(--brown);
      transition: background .2s, border-color .2s, color .2s;
    }
    .source-type-option:has(input:checked) {
      background: var(--amber);
      border-color: var(--amber);
      color: var(--warm-white);
    }
    .source-type-option input[type="radio"] {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin: 0;
      accent-color: var(--amber);
    }
    .source-panel {
      margin-bottom: .25rem;
    }
    .source-panel.hidden {
      display: none;
    }
    .trim-fields {
      margin-top: 1.1rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(147,89,28,.15);
    }
    .trim-fields-label {
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--brown);
      margin-bottom: .65rem;
    }
    .trim-fields-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    @media (max-width: 520px) {
      .trim-fields-row {
        grid-template-columns: 1fr;
      }
    }
    .trim-field label {
      display: block;
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--brown);
      margin-bottom: .42rem;
    }
    .trim-field input {
      width: 100%;
      padding: .82rem 1rem;
      border: 1.5px solid rgba(147,89,28,.28);
      border-radius: 2px;
      background: rgba(255,255,255,.85);
      font-family: 'Jost', sans-serif;
      font-size: .95rem;
      color: var(--ink);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .trim-field input:focus {
      border-color: var(--amber);
      background: rgba(255,255,255,.92);
      box-shadow: 0 0 0 3px rgba(147,89,28,.1);
    }

    .waveform-hint {
      color: #8A6A4A;
      font-family: 'Jost', sans-serif;
      font-size: 12px;
      margin-top: 8px;
    }

    .waveform-play-btn {
      margin-top: 10px;
      padding: .55rem 1rem;
      background: var(--amber);
      color: var(--warm-white);
      border: none;
      border-radius: 2px;
      cursor: pointer;
      font-family: 'Jost', sans-serif;
      font-size: .82rem;
      font-weight: 500;
      letter-spacing: .06em;
      transition: background .2s, transform .15s;
    }
    .waveform-play-btn:hover {
      background: var(--brown);
      transform: translateY(-1px);
    }

    .checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
    }
    .checkbox-row input[type="checkbox"] {
      width: 17px;
      height: 17px;
      margin-top: .15rem;
      accent-color: var(--amber);
    }
    .checkbox-row label {
      margin-bottom: 0;
      text-transform: none;
      letter-spacing: normal;
      font-size: .92rem;
      color: var(--ink);
      line-height: 1.55;
      font-weight: 400;
    }

    .submit-btn {
      width: 100%;
      margin-top: .45rem;
      padding: .88rem 1.2rem;
      background: var(--amber);
      color: var(--warm-white);
      border: none;
      cursor: pointer;
      font-family: 'Jost', sans-serif;
      font-size: .82rem;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      border-radius: 2px;
      transition: background .2s, transform .15s, opacity .15s;
    }
    .submit-btn:hover:not(:disabled) { background: var(--brown); transform: translateY(-1px); }
    .submit-btn:disabled { opacity: .72; cursor: not-allowed; transform: none; }

    .hidden { display: none !important; }

    .success-panel {
      text-align: center;
      padding: .6rem .2rem .2rem;
    }
    .success-panel p {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-style: italic;
      color: var(--dark);
      line-height: 1.5;
      margin-bottom: 1rem;
    }
    .back-link {
      color: var(--amber);
      text-decoration: none;
      font-size: .84rem;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .back-link:hover { text-decoration: underline; }

    footer {
      border-top: 1px solid rgba(147,89,28,.13);
      text-align: center;
      color: var(--muted);
      font-size: .82rem;
      padding: 1.2rem;
      position: relative;
      z-index: 1;
    }

    @media (max-width: 900px) {
      nav { padding: 1rem 1.5rem; }
      main { padding: 1.7rem 1rem 2.7rem; }
      .form-card { padding: 1.4rem 1rem; }
    }

.waveform-player-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 12px;
}
.waveform-player-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #93591C;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  line-height: 1;
  padding: 0;
  padding-left: 2px;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.waveform-player-btn:hover { background: #A86A2A; }
.waveform-player-btn:active { transform: scale(.96); }
.waveform-player-btn svg { width: 16px; height: 16px; fill: #ffffff; }
.waveform-time {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: #6B4928;
  font-variant-numeric: tabular-nums;
}
.waveform-time-sep { font-size: 12px; color: #8A6A4A; }
.waveform-hint {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: #8A6A4A;
  margin-top: 8px;
}

.drop-zone {
  border: 2px dashed #93591C;
  border-radius: 8px;
  padding: 24px 16px;
  background: rgba(147,89,28,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: center;
  margin-bottom: 0.25rem;
}
.drop-zone:hover,
.drop-zone.drag-over {
  background: rgba(147,89,28,0.12);
  border-color: #6B4928;
}
.drop-zone-text {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #6B4928;
}
.drop-zone-link {
  color: #93591C;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.drop-zone-hint {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: #8A6A4A;
}
.drop-zone-selected {
  border: 2px solid #93591C;
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(147,89,28,0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.drop-zone-selected-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drop-zone-selected-name {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #3A250E;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-zone-selected-size {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  color: #8A6A4A;
}
.drop-zone-clear {
  background: none;
  border: none;
  color: #8A6A4A;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: color .15s;
}
.drop-zone-clear:hover { color: #6B4928; }