/* Shared visual language for every public and artist-facing FATE screen. */
:root {
  --fate-bg: #040404;
  --fate-surface: #090909;
  --fate-surface-raised: #0e0e0e;
  --fate-border: rgba(255,255,255,.12);
  --fate-border-strong: rgba(255,255,255,.3);
  --fate-accent: #fff;
  --fate-accent-bright: #fff;
  --fate-accent-soft: rgba(255,255,255,.075);
  --fate-radius-sm: 12px;
  --fate-radius-md: 18px;
  --fate-radius-lg: 26px;
  --fate-shadow: 0 28px 80px rgba(0,0,0,.48);
}

body {
  background:
    radial-gradient(circle at 50% -15%,rgba(255,255,255,.032),transparent 38rem),
    var(--fate-bg);
}

/* Surfaces */
.submit-page .contact-box,
.track-card,
.artist-auth-card,
.verification-success-card,
.artist-demo-card,
.release-form section,
.submission-success-card {
  border-color: var(--fate-border);
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.028),transparent 42%),
    linear-gradient(145deg,rgba(10,10,10,.985),rgba(5,5,5,.99));
  box-shadow: var(--fate-shadow),inset 0 1px rgba(255,255,255,.025);
}

.submit-page .contact-box,
.artist-auth-card,
.verification-success-card { border-radius: var(--fate-radius-lg); }
.track-card { border-radius: var(--fate-radius-lg); }
.artist-demo-card,
.release-form section { border-radius: var(--fate-radius-md); }

.track-card-head,
.track-messages-wrap,
.track-card-foot,
.artist-demo-meta { border-color: rgba(255,255,255,.075); }

/* Inputs */
.submit-page .contact-box input:not([type="radio"]),
.submit-page .contact-box select,
.artist-auth-form input,
.release-form input,
.release-form textarea,
.revision-form input,
.revision-form textarea,
.track-reply-input,
.submission-link-row input {
  border-color: var(--fate-border);
  border-radius: var(--fate-radius-sm);
  background: rgba(4,4,4,.74);
  color: #f7f5ff;
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}

.submit-page .contact-box input:not([type="radio"]):hover,
.submit-page .contact-box select:hover,
.artist-auth-form input:hover,
.release-form input:hover,
.release-form textarea:hover,
.revision-form input:hover,
.revision-form textarea:hover,
.track-reply-input:hover { border-color: rgba(255,255,255,.22); }

.submit-page .contact-box input:not([type="radio"]):focus,
.submit-page .contact-box select:focus,
.artist-auth-form input:focus,
.release-form input:focus,
.release-form textarea:focus,
.revision-form input:focus,
.revision-form textarea:focus,
.track-reply-input:focus {
  outline: none;
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 0 0 3px rgba(255,255,255,.07);
}

/* Primary actions */
.submit-page .contact-btn,
.artist-auth-form button,
.artist-primary-action,
.artist-empty-state a,
.release-submit,
.track-reply-btn,
.verification-continue,
.submission-success-actions a {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--fate-radius-sm);
  background: linear-gradient(110deg,#0a0a0a,#212121,#0a0a0a);
  color: #f8f6ff;
  box-shadow: inset 0 1px rgba(255,255,255,.07),0 10px 28px rgba(0,0,0,.28);
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease;
}

.submit-page .contact-btn:hover,
.artist-auth-form button:hover,
.artist-primary-action:hover,
.artist-empty-state a:hover,
.release-submit:hover,
.track-reply-btn:hover,
.verification-continue:hover,
.submission-success-actions a:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 14px 34px rgba(0,0,0,.4),0 0 20px rgba(255,255,255,.045),inset 0 1px rgba(255,255,255,.1);
}

.track-reply-btn:disabled,
.contact-btn:disabled { opacity: .55; cursor: wait; transform: none; }

/* Selectors and secondary actions */
.track-source-tabs,
.revision-source-tabs {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(3,3,3,.5);
  padding: .3rem;
}

.track-source-tab,
.revision-source-tabs button { border-radius: 10px; }

.track-source-tab.active,
.revision-source-tabs button.active {
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  color: var(--fate-accent-bright);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}

.track-file-picker,
.revision-file-picker {
  border-color: rgba(255,255,255,.2);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.track-file-picker:hover,
.revision-file-picker:hover { border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.06); }

/* Tracker and artist dashboard details */
.track-genre-badge { color: var(--fate-accent-bright); border-color: rgba(255,255,255,.2); }
.track-step.step-active .step-icon { border-color: rgba(255,255,255,.7); box-shadow: 0 0 20px rgba(255,255,255,.08); }
.track-step.step-active .step-active-dot { background: var(--fate-accent-bright); }
.track-msg-body { border-radius: var(--fate-radius-sm); border-color: rgba(255,255,255,.09); }
.track-msg-team .track-msg-body { background: rgba(14,14,14,.72); }
.track-msg-artist .track-msg-body { background: rgba(255,255,255,.06); }
.track-decision { border-radius: var(--fate-radius-sm); }
.artist-demo-card:hover { border-color: var(--fate-border-strong); box-shadow: 0 18px 45px rgba(0,0,0,.34); }
.artist-pagination a,.artist-notice-link { color: var(--fate-accent-bright); }
.artist-logout { border-color: var(--fate-border); border-radius: var(--fate-radius-sm); background: rgba(6,6,6,.75); }

/* Modals and compact controls */
.submission-success-modal { background: rgba(1,1,1,.88); }
.submission-success-close,
.submission-link-row button {
  border-color: var(--fate-border);
  background: var(--fate-surface-raised);
  color: rgba(255,255,255,.72);
}
.submission-success-mark { border-color: rgba(255,255,255,.35); background: var(--fate-accent-soft); color: var(--fate-accent-bright); }
.submission-copy-status { color: var(--fate-accent-bright); }
.verification-rings i { background: linear-gradient(135deg,#777,#fff); color:#050505; box-shadow:0 0 45px rgba(255,255,255,.12); }

.revision-request-card { border-color:rgba(255,255,255,.16); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(8,8,8,.98) 55%); }
.revision-eyebrow { color:#fff; }
.revision-request-card blockquote { border-left-color:#fff; }
.revision-steps b,.revision-file-icon { background:rgba(255,255,255,.1); color:#fff; }
.track-decision.revision-required,.track-decision.approved,.track-decision.declined { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.035); }
.track-decision .decision-dot { background:#fff; }
.track-decision .decision-text,.approved .decision-text { color:rgba(255,255,255,.78); }
.revision-error,.artist-auth-error,.artist-notice-error { color:rgba(255,255,255,.78); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.status-approved,.status-reviewing,.status-team_discussion,.status-needs_revision,.status-declined { color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.15); }
.status-approved { color:#fff; border-color:rgba(255,255,255,.34); }
.release-success { color:#fff; border-color:rgba(255,255,255,.25); }
.verification-rings span { border-color:rgba(255,255,255,.4); }

@media (max-width: 640px) {
  .track-card { border-radius: 20px; }
  .submit-page .contact-box,
  .artist-auth-card,
  .verification-success-card { border-radius: 20px; }
}

/* ── Submission success modal — premium polish ────────────────────────────── */
.submission-success-modal:not([hidden]) { animation: successFade .28s ease both; }
@keyframes successFade { from { opacity: 0; } to { opacity: 1; } }

.submission-success-card {
  overflow: hidden;
  border-color: rgba(255,255,255,.12);
  background:
    radial-gradient(130% 85% at 50% -12%, rgba(74,222,128,.13), transparent 55%),
    linear-gradient(160deg, rgba(13,13,14,.99), rgba(4,4,5,.99));
  box-shadow: 0 40px 110px rgba(0,0,0,.72), 0 0 50px rgba(74,222,128,.06), inset 0 1px rgba(255,255,255,.04);
  animation: successCardIn .5s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes successCardIn { from { opacity:0; transform: translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
/* glowing top hairline */
.submission-success-card::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:62%; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(74,222,128,.6), transparent);
}

/* Success check — filled green badge with a pulsing ring */
.submission-success-mark {
  position: relative;
  width: 60px; height: 60px; margin: .35rem auto 1.4rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: #06140b;
  background: linear-gradient(150deg, #bbf7d0, #4ade80 58%, #22c55e);
  box-shadow: 0 12px 32px rgba(34,197,94,.42), 0 0 0 6px rgba(74,222,128,.08);
  animation: successMarkIn .55s .12s cubic-bezier(.2,1.5,.4,1) both;
}
.submission-success-mark::after {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(74,222,128,.5); pointer-events:none;
  animation: successRing 2.2s ease-out infinite;
}
@keyframes successMarkIn { from { opacity:0; transform: scale(.3) rotate(-12deg); } to { opacity:1; transform:none; } }
@keyframes successRing { 0% { transform: scale(.85); opacity:.7; } 100% { transform: scale(1.55); opacity:0; } }

.submission-success-kicker { color:#86efac !important; }

/* Primary "Open tracking page" action gets a green accent; copy button refined */
#submissionOpenLink {
  border-color: rgba(74,222,128,.45);
  background: linear-gradient(110deg, rgba(74,222,128,.18), rgba(16,26,19,.96) 70%);
  color: #d8ffe6;
}
#submissionOpenLink:hover {
  border-color: rgba(74,222,128,.7);
  box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 22px rgba(74,222,128,.2), inset 0 1px rgba(255,255,255,.08);
}
.submission-link-row button {
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.submission-link-row button:hover { border-color: rgba(74,222,128,.5); color:#d8ffe6; }

@media (prefers-reduced-motion: reduce) {
  .submission-success-modal:not([hidden]),
  .submission-success-card,
  .submission-success-mark { animation: none; }
  .submission-success-mark::after { display: none; }
}

/* Quiet legal pages shared by footer links. */
.legal-page { width:min(860px,calc(100% - 2rem)); min-height:65vh; margin:0 auto; padding:clamp(4rem,9vw,7rem) 0; box-sizing:border-box; text-align:left; }
.legal-card { padding:clamp(1.4rem,5vw,3rem); border:1px solid rgba(255,255,255,.1); border-radius:22px; background:linear-gradient(145deg,rgba(11,11,11,.94),rgba(4,4,4,.98)); box-shadow:var(--fate-shadow); }
.legal-card h1 { margin:.5rem 0 1.5rem; color:#f5f5f5; font-size:clamp(2rem,6vw,3.5rem); }
.legal-card h2 { margin:2rem 0 .6rem; color:rgba(255,255,255,.82); font-size:1rem; }
.legal-card p { color:rgba(255,255,255,.5); font-size:.84rem; line-height:1.75; }
.legal-card a { color:#fff; }