/* ============================================================
   Crackzone — modern dark UI
   Borders are replaced by layered surfaces + soft shadows.
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #09090b;
  --surface: #101013;
  --surface-2: #17171c;
  --surface-3: #212127;
  --hairline: #ffffff10;
  --text: #f4f4f5;
  --dim: #a1a1aa;
  --faint: #71717a;
  --accent: #6366f1;
  --accent-soft: #6366f126;
  --success: #34d399;
  --success-soft: #34d3991f;
  --warn: #fbbf24;
  --warn-soft: #fbbf241f;
  --danger: #f87171;
  --danger-soft: #f8717114;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px #00000080, 0 4px 16px #00000040;
  --shadow-lg: 0 8px 40px #000000a6;
  --ring: 0 0 0 3px #ffffff26;
  font-family: Inter, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font: 14px/1.55 Inter, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: #6366f166; }
:focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Topbar ---------- */
.topbar { position: sticky; z-index: 20; top: 0; height: 68px; background: #09090b99; backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.bar { width: min(1240px, 100% - 48px); height: 100%; margin: auto; display: flex; align-items: center; gap: 38px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: 15px; font-weight: 750; letter-spacing: -.4px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: -1px; box-shadow: 0 4px 18px #6366f14d; }
.main-nav { display: flex; align-items: center; gap: 4px; height: 100%; margin-right: auto; }
.main-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 99px; color: var(--dim); font-size: 12px; font-weight: 600; transition: .16s ease; }
.main-nav a:hover { color: var(--text); background: var(--surface-2); }
.main-nav a.active { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); }
.account-area { display: flex; align-items: center; gap: 10px; }

/* ---------- Buttons (modern, borderless) ---------- */
.button, .profile-chip, .text-button, .mobile-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 11px;
  background: var(--surface-2); color: var(--text); cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.button:hover, .profile-chip:hover { background: var(--surface-3); }
.button:active, .profile-chip:active { transform: scale(.97); }
.button-dark, .download-button { background: linear-gradient(180deg, #ffffff, #e4e4e7); color: #09090b; box-shadow: var(--shadow-sm), inset 0 1px 0 #ffffff66; }
.button-dark:hover, .download-button:hover { background: #fff; box-shadow: 0 6px 26px #ffffff1f, inset 0 1px 0 #fff; }
.button-danger { background: var(--danger-soft); color: var(--danger); }
.button-danger:hover { background: #f8717126; }
.button:disabled, .button-dark:disabled { opacity: .55; cursor: wait; transform: none; }
.profile-chip { gap: 8px; padding: 0 12px 0 6px; min-height: 40px; border-radius: 99px; }
.profile-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.mobile-menu { display: none; width: 40px; padding: 0; font-size: 16px; border-radius: 99px; }
.text-button { min-height: 34px; padding: 0 10px; border-radius: 8px; background: transparent; color: var(--dim); }
.text-button:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Layout ---------- */
.view { width: min(1240px, 100% - 48px); margin: 0 auto; animation: view-in .28s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.archive-view { padding-bottom: 60px; }

/* ---------- Hero ---------- */
.hero { display: flex; align-items: center; gap: 26px; padding: 56px 0 40px; }
.hero-mark { display: grid; place-items: center; flex: 0 0 auto; width: 92px; height: 92px; border-radius: 24px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -3px; box-shadow: 0 16px 48px #6366f140; }
.eyebrow { margin: 0 0 7px; color: var(--faint); font-size: 9px; font-weight: 750; letter-spacing: 1.15px; line-height: 1.3; }
.hero h1, .page-intro h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1.08; letter-spacing: -1.8px; }
.hero-description { margin: 8px 0 0; color: var(--dim); font-size: 14px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.stat-chip { display: flex; align-items: baseline; gap: 7px; min-height: 36px; padding: 8px 13px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.stat-chip strong { font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stat-chip span { color: var(--faint); font-size: 10px; }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline); }
.search-field, .filter-field { display: flex; align-items: center; min-height: 42px; border-radius: var(--radius-sm); background: var(--surface-2); transition: box-shadow .16s ease; }
.search-field:focus-within, .filter-field:focus-within { box-shadow: var(--ring); }
.search-field { flex: 1; gap: 9px; padding: 0 12px; }
.search-field>span { color: var(--faint); font-size: 18px; }
.search-field input { width: 100%; min-width: 60px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12.5px; }
.search-field input::placeholder, input::placeholder, textarea::placeholder { color: var(--faint); }
kbd { padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--faint); font: 10px Inter, sans-serif; }
.filter-field { gap: 8px; padding: 0 11px; }
.filter-field span { color: var(--faint); font-size: 10px; font-weight: 600; }
.filter-field select { max-width: 145px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11.5px; cursor: pointer; }
.filter-field select option { background: var(--surface-2); color: var(--text); }
.search-button { flex: 0 0 auto; min-height: 42px; border-radius: var(--radius-sm); }

/* ---------- Archive grid ---------- */
.archive-main { padding-top: 38px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.section-heading h2, .section-title h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.65px; }
.section-heading .eyebrow, .section-title .eyebrow { margin-bottom: 5px; }
.muted { color: var(--dim); }
.section-heading p:not(.eyebrow) { margin: 6px 0 0; color: var(--dim); font-size: 12px; }
.result-count { flex: 0 0 auto; color: var(--faint); font-size: 11px; }
.upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.upload-card { min-width: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.upload-card:hover { transform: translateY(-3px); box-shadow: 0 12px 44px #000000b3, inset 0 0 0 1px #ffffff1c; }
.card-art { position: relative; display: grid; place-items: center; height: 214px; overflow: hidden; background: var(--surface-2); }
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-art-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #1f1f26, #101013); color: var(--dim); font-size: 25px; font-weight: 800; letter-spacing: -3px; }
.price-label { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 99px; background: #09090bcc; backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 750; box-shadow: inset 0 0 0 1px #ffffff1a; }
.card-content { display: flex; flex-direction: column; height: 100%; padding: 16px 17px 15px; }
.card-content>div:last-child { margin-top: auto; padding-top: 11px; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-title { min-width: 0; margin: 0; overflow: hidden; font-size: 16px; line-height: 1.3; letter-spacing: -.35px; text-overflow: ellipsis; white-space: nowrap; }
.card-description { display: -webkit-box; min-height: 40px; margin: 8px 0 14px; overflow: hidden; color: var(--dim); font-size: 12px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-author { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 0; }
.card-author img { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.card-author strong { overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.card-author .verified-pill { margin-left: auto; }
.verified-pill { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 3px 8px; border-radius: 99px; background: var(--success-soft); color: var(--success); font-size: 9px; font-weight: 650; }
.verified-pill::before { content: '✓'; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--success); color: #06281a; font-size: 8px; }
.status-pending { flex: 0 0 auto; padding: 3px 8px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 9px; font-weight: 650; }
.status-rejected { flex: 0 0 auto; padding: 3px 8px; border-radius: 99px; background: #71717a26; color: #a1a1aa; font-size: 9px; font-weight: 650; }
#detail-status.status-rejected { background: #71717a26 !important; color: #a1a1aa !important; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; padding-top: 11px; background: linear-gradient(90deg, var(--hairline), var(--hairline)) top / 100% 1px no-repeat; color: var(--faint); font-size: 10px; }
.card-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tag { padding: 4px 9px; border-radius: 99px; background: var(--surface-2); color: var(--dim); font-size: 9px; font-weight: 600; }
.archive-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; color: var(--faint); font-size: 10px; }

/* ---------- Panels / inner views ---------- */
.inner-view { padding-top: 48px; padding-bottom: 68px; }
.page-intro { margin: 0 0 25px; }
.page-intro h1 { font-size: 34px; }
.page-intro>p:last-child { margin: 9px 0 0; color: var(--dim); font-size: 13px; }
.panel { border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline); }
.leaderboard-panel { overflow: hidden; }
.table-scroll { overflow-x: auto; }
.leader-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.leader-table th { padding: 13px 18px; background: var(--surface-2); color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.leader-table td { padding: 15px 18px; background: linear-gradient(180deg, transparent calc(100% - 1px), var(--hairline)); font-size: 12px; color: var(--text); }
.leader-table tr:last-child td { background: none; }
.leader-table td:first-child { color: var(--dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.leader-person { display: flex; align-items: center; gap: 11px; font-weight: 700; color: var(--text); }
.leader-person img, .leader-person .leader-avatar { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; }
.author-identity, .leader-identity { display: grid; min-width: 0; gap: 3px; }
.empty-state { display: grid; gap: 5px; padding: 36px 20px; color: var(--dim); text-align: center; font-size: 12px; }
.empty-state strong { color: var(--text); font-size: 14px; }
.archive-empty { grid-column: 1 / -1; justify-items: center; min-height: 280px; padding: 40px 20px; background: var(--surface); }
.empty-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -1.5px; }
.archive-empty strong { font-size: 15px; }
.archive-empty>span:not(.empty-mark) { max-width: 42ch; }
.archive-empty .button { margin-top: 12px; }

/* ---------- Docs ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.step-card { min-height: 160px; padding: 23px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline); transition: transform .2s ease; }
.step-card:hover { transform: translateY(-3px); }
.step-number { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 22px; border-radius: 9px; background: var(--accent-soft); color: #a5b4fc; font-size: 9px; font-weight: 700; }
.step-card h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: -.2px; }
.step-card p { max-width: 52ch; margin: 0; color: var(--dim); font-size: 12px; line-height: 1.75; }
.guide-note { display: flex; align-items: center; gap: 15px; margin-top: 14px; padding: 19px; }
.guide-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: #a5b4fc; font-size: 12px; font-weight: 700; }
.guide-note>div:nth-child(2) { flex: 1; }
.guide-note h2 { margin: 0 0 3px; font-size: 13px; }
.guide-note p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.6; }

/* ---------- Requests ---------- */
.request-layout { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); align-items: start; gap: 16px; }
.request-info, .request-panel { padding: 23px; }
.request-mark { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -1px; }
.request-info h2, .request-panel h2 { margin: 0 0 10px; font-size: 17px; letter-spacing: -.3px; }
.request-info p { color: var(--dim); font-size: 12px; line-height: 1.7; }
.request-rule { height: 1px; margin: 20px 0; background: var(--hairline); }
.request-info .small-note { color: var(--faint); font-size: 10px; }
.stack-form { display: grid; gap: 15px; }
.stack-form>label, .form-row>label { display: grid; gap: 7px; color: var(--dim); font-size: 11px; font-weight: 650; }
.stack-form input:not([type=file]):not([type=checkbox]), .stack-form textarea, .stack-form select {
  width: 100%; min-height: 44px; padding: 11px 13px; border: 0; border-radius: var(--radius-sm);
  outline: 0; background: var(--surface-2); color: var(--text); font-size: 12.5px; font-weight: 400;
  box-shadow: inset 0 0 0 1px var(--hairline); transition: box-shadow .16s ease;
}
.stack-form textarea { min-height: 92px; resize: vertical; }
.stack-form input:focus, .stack-form textarea:focus, .stack-form select:focus { box-shadow: var(--ring); }
.file-picker { display: flex; align-items: center; min-height: 48px; padding: 7px 11px; border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--dim); font-size: 11px; font-weight: 400; }
.file-picker input[type=file] { max-width: 100%; color: var(--dim); font-size: 10px; }
.file-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submit-button { width: 100%; min-height: 46px; }
.form-feedback { min-height: 16px; margin: -7px 0 0; color: var(--faint); font-size: 10px; font-weight: 400; }
.request-list { display: grid; gap: 8px; padding-top: 16px; }
.request-list article { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; background: linear-gradient(90deg, var(--hairline), var(--hairline)) top / 100% 1px no-repeat; color: var(--dim); font-size: 10px; }

/* ---------- Detail ---------- */
.detail-view { padding-top: 28px; }
.back-link { display: inline-flex; margin: 0 0 16px; padding: 6px 12px 6px 8px; border-radius: 99px; background: var(--surface); color: var(--dim); font-size: 11px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--hairline); }
.back-link:hover { color: var(--text); background: var(--surface-2); }
.detail-shell { overflow: hidden; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hairline); }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 29px 31px; }
.detail-copy { min-width: 0; }
.detail-head h1 { margin: 0 0 13px; font-size: clamp(27px, 4vw, 36px); letter-spacing: -1.4px; line-height: 1.12; overflow-wrap: anywhere; }
.author-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--dim); font-size: 10px; }
.author-line>img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.author-line strong { color: var(--text); }
.author-line time { margin-left: 2px; }
.verified-pill { font-size: 9px; }
.price-card { display: grid; flex: 0 0 auto; gap: 2px; min-width: 140px; padding: 14px 16px; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); }
.price-card>span { color: var(--faint); font-size: 9px; }
.price-card strong { font-size: 22px; letter-spacing: -.7px; }
.price-card small { color: var(--faint); font-size: 9px; }
.file-panel { padding: 23px 31px; background: linear-gradient(90deg, var(--hairline), var(--hairline)) top / 100% 1px no-repeat; }
.file-panel-title, .section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; }
.file-panel-title h2 { margin: 0; font-size: 17px; letter-spacing: -.4px; }
.download-count { color: var(--faint); font-size: 10px; }
.download-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.download-row { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 14px; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); }
.jar-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 12px; background: var(--accent-soft); color: #a5b4fc; font-size: 9px; font-weight: 700; }
.download-file-name { display: grid; min-width: 0; gap: 3px; margin-right: auto; }
.download-file-name strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.download-file-name span { color: var(--faint); font-size: 10px; }
.download-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; min-height: 42px; padding: 0 18px; border: 0; border-radius: 99px; background: linear-gradient(180deg, #ffffff, #e4e4e7); color: #09090b; font-size: 11.5px; font-weight: 700; text-decoration: none !important; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.download-button:hover { background: #fff; }
.download-button:active { transform: scale(.97); }
.detail-columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); }
.detail-main-column { border-right: 1px solid var(--hairline); }
.detail-section { padding: 24px 31px; border-bottom: 1px solid var(--hairline); }
.detail-section:last-child, .comment-section { border-bottom: 0; }
.section-title { align-items: center; margin-bottom: 14px; }
.section-title h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.detail-description { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.meta-chip { padding: 5px 10px; border-radius: 99px; background: var(--surface-2); color: var(--dim); font-size: 9px; font-weight: 600; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.preview-item { display: grid; place-items: center; min-height: 174px; overflow: hidden; border-radius: 13px; background: var(--surface-2); }
.preview-item img { width: 100%; height: 100%; min-height: 174px; object-fit: cover; }
.preview-placeholder { display: grid; place-items: center; width: 100%; min-height: 174px; background: linear-gradient(140deg, #1c1c22, #0d0d10); color: var(--faint); font-size: 22px; font-weight: 800; letter-spacing: -2px; }
.comment-section { padding: 24px 21px; border-right: 0; background: transparent; }
.comment-section .section-title { align-items: flex-start; }
.count-pill { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 99px; background: var(--surface-3); color: var(--dim); font-size: 9px; font-weight: 700; }
.comment-form { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); }
.comment-compose-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.comment-compose-field { min-width: 0; }
.comment-form textarea { width: 100%; min-height: 84px; padding: 11px 13px; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 12px/1.65 Inter, sans-serif; resize: vertical; outline: 0; box-shadow: inset 0 0 0 1px var(--hairline); transition: box-shadow .16s ease; }
.comment-form textarea:focus { box-shadow: var(--ring); }
.comment-compose-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.comment-compose-footer>span { color: var(--faint); font-size: 10px; }
.comment-form .button { justify-self: end; min-height: 36px; padding: 0 14px; font-size: 11.5px; border-radius: 99px; }
.comment-list { display: grid; }
.comment { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 17px 2px; }
.comment img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.comment-main { min-width: 0; }
.comment-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.comment-byline strong { font-size: 11px; }
.comment-byline time { margin-left: auto; color: var(--faint); font-size: 9px; }
.comment p { margin: 8px 0 0; color: var(--dim); font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-line; }
.comment + .comment { background: linear-gradient(90deg, var(--hairline), var(--hairline)) top / 100% 1px no-repeat; }
.role-badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 99px; padding: 2px 8px; background: var(--accent-soft); color: #a5b4fc; font-size: 8px; font-weight: 650; line-height: 1.4; }
.empty-inline { padding: 15px 0; color: var(--faint); font-size: 10px; }
.detail-admin-row { display: flex; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--hairline); background: var(--surface-2); }

/* ---------- Profile ---------- */
.profile-view { display: grid; gap: 23px; }
.profile-panel { padding: 23px; }
.profile-head { display: flex; align-items: center; gap: 17px; }
.avatar-wrap { position: relative; display: grid; place-items: center; width: 78px; height: 78px; flex: 0 0 auto; }
.avatar-big { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--surface-3); }
.avatar-edit { position: absolute; right: -10px; bottom: -6px; padding: 4px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text); font-size: 8px; font-weight: 650; cursor: pointer; box-shadow: 0 4px 14px #0000008c; }
.profile-title { min-width: 0; flex: 1; }
.profile-title h1 { margin: 0; font-size: 25px; letter-spacing: -.8px; }
.profile-title .eyebrow { margin-bottom: 4px; }
.profile-title .muted { margin: 5px 0 0; font-size: 11px; }
.profile-role { display: inline-flex; margin-top: 6px; color: var(--dim); font-size: 10px; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-actions .text-button { min-height: 40px; padding: 0 12px; border-radius: 11px; background: var(--surface-2); }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; padding-top: 18px; background: linear-gradient(90deg, var(--hairline), var(--hairline)) top / 100% 1px no-repeat; }
.profile-stats>div { display: grid; gap: 2px; }
.profile-stats strong { font-size: 18px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.profile-stats span { color: var(--faint); font-size: 10px; }
.sign-in-panel { display: grid; justify-items: center; padding: 46px 18px; text-align: center; }
.small-mark { width: 58px; height: 58px; margin-bottom: 17px; border-radius: 17px; font-size: 18px; }
.sign-in-panel h1 { margin: 0; font-size: 22px; letter-spacing: -.6px; }
.sign-in-panel p { margin: 8px 0 17px; color: var(--dim); font-size: 12px; }
.profile-content { display: grid; gap: 20px; }
.profile-uploads-heading { margin: 0; font-size: 20px; }
.review-queue { padding: 20px; }
.review-list { display: grid; gap: 9px; }
.review-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; border-radius: 12px; background: var(--surface-2); }
.review-item>div:first-child { display: grid; gap: 3px; min-width: 0; }
.review-item strong { font-size: 12px; }
.review-item span { color: var(--dim); font-size: 10px; overflow-wrap: anywhere; }
.review-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.review-actions button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--text); font-size: 10px; font-weight: 600; cursor: pointer; transition: background .16s ease; }
.review-actions button:hover { background: #2b2b32; }
.review-action-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }

/* ---------- Members panel ---------- */
.member-list { display: grid; gap: 9px; }
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.member-info { display: grid; gap: 3px; min-width: 0; }
.member-info strong { font-size: 12px; }
.member-info small { color: var(--faint); font-size: 9px; }
.member-role { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.member-role select { min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--surface-3); color: var(--text); font-size: 11px; cursor: pointer; outline: 0; box-shadow: inset 0 0 0 1px var(--hairline); }
.member-role select:disabled { opacity: .6; }
.you-pill { padding: 3px 8px; border-radius: 99px; background: var(--accent-soft); color: #a5b4fc; font-size: 8px; font-weight: 700; }
.ban-button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: 10px; font-weight: 600; cursor: pointer; }
.ban-button:hover { background: #f8717126; }
.ban-button:disabled { opacity: .6; cursor: wait; }
.member-banned { opacity: .6; }
.banned-pill { padding: 3px 8px; border-radius: 99px; background: var(--danger-soft); color: var(--danger); font-size: 8px; font-weight: 700; }
.member-row .member-role select[disabled] { opacity: .45; }

/* ---------- Footer ---------- */
.footer { display: flex; align-items: center; gap: 20px; width: min(1240px, 100% - 48px); min-height: 68px; margin: 0 auto; color: var(--faint); font-size: 10px; }
.footer .brand { color: var(--text); font-size: 12px; }
.footer .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 9px; box-shadow: none; }
.footer nav { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.footer nav a { padding: 4px 8px; border-radius: 7px; }
.footer nav a:hover { color: var(--text); background: var(--surface-2); }

/* ---------- Modals ---------- */
.modal { width: min(560px, calc(100% - 30px)); max-height: min(90vh, 900px); padding: 25px; border: 0; border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 32px 120px #000000d9, inset 0 0 0 1px #ffffff14; }
.modal::backdrop { background: #000000b3; backdrop-filter: blur(4px); }
.modal form { position: relative; }
.modal h2 { margin: 0; font-size: 24px; letter-spacing: -.8px; }
.modal .eyebrow { margin-top: 5px; }
.modal-copy { margin: -5px 0 3px; color: var(--dim); font-size: 11px; }
.modal-close { position: absolute; top: -12px; right: -9px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--dim); cursor: pointer; font-size: 20px; transition: .16s ease; }
.modal-close:hover { background: #2b2b32; color: var(--text); }
.small-modal { width: min(420px, calc(100% - 30px)); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.price-input { display: flex; align-items: center; min-height: 44px; border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); padding-left: 12px; color: var(--faint); transition: box-shadow .16s ease; }
.price-input:focus-within { box-shadow: var(--ring); }
.price-input input { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text) !important; }
.thumbnail-row input[type=file] { max-width: 100%; font-size: 9px; font-weight: 400; }
.file-picker input[type=file]::file-selector-button, .thumbnail-row input[type=file]::file-selector-button { min-height: 30px; margin-right: 8px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--text); font: 600 10px Inter, sans-serif; cursor: pointer; }
.thumbnail-row small { color: var(--faint); font-size: 9px; font-weight: 400; }
.thumbnail-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 1.9; border-radius: var(--radius-sm); background: linear-gradient(140deg, #26262e, #131316); background-position: center; background-size: cover; color: var(--faint); font-size: 16px; font-weight: 800; letter-spacing: -2px; }
.check-line { display: flex !important; align-items: flex-start; gap: 8px !important; color: var(--dim) !important; font-size: 10px !important; font-weight: 400 !important; }
.check-line input { margin: 2px 0 0; accent-color: var(--accent); }
.form-note { color: var(--dim); text-align: center; font-size: 10px; }
.form-note .text-button { display: inline; min-height: 0; padding: 0; color: var(--text); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; background: none; }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 40; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 32px)); padding: 13px 16px; border-radius: 13px; background: #1b1b20; color: var(--text); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hairline); opacity: 0; pointer-events: none; font-size: 11.5px; transform: translateY(10px); transition: .2s ease; }
.toast.show { transform: translateY(0); opacity: 1; }

/* ---------- Upload modal ---------- */
.upload-modal { width: min(470px, calc(100% - 30px)); max-height: min(96vh, 856px); overflow: auto; padding: 12px 13px 11px; }
.upload-modal #upload-form { display: grid; gap: 8px; position: relative; }
.upload-modal h2 { font-size: 20px; letter-spacing: -.8px; margin: 0 0 1px; }
.upload-modal .modal-copy { max-width: 54ch; line-height: 1.5; font-size: 10px; margin: -2px 0 0; }
.upload-modal .eyebrow { margin: 18px 0 0; }
.upload-modal .eyebrow { margin: 20px 0 0; }
.upload-modal .modal-close { top: -8px; right: 0; }
.upload-modal .stack-form>label, .upload-modal .form-row>label { gap: 4px; font-size: 10.5px; }
.upload-modal .stack-form input:not([type=file]):not([type=checkbox]), .upload-modal .stack-form textarea, .upload-modal .stack-form select { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.upload-modal .stack-form textarea { min-height: 50px; }
.upload-modal .stack-form textarea[name=summary] { min-height: 52px; }
.upload-modal .upload-dropzone { min-height: 78px; padding: 10px 14px; gap: 4px; }
.upload-modal .dropzone-icon { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.upload-modal .upload-dropzone strong { font-size: 12px; }
.upload-modal .upload-dropzone small { font-size: 9px; }
.upload-modal .thumbnail-row { gap: 9px; }
.upload-modal .thumbnail-card { padding: 7px; gap: 5px !important; }
.upload-modal .thumbnail-preview { aspect-ratio: 2.7; font-size: 12px; }
.upload-modal .thumbnail-card small { font-size: 8px; }
.upload-modal .submit-button { min-height: 40px; }
.upload-modal .form-feedback { margin: -3px 0 0; font-size: 9px; }
.upload-modal .check-line { font-size: 9.5px !important; }
.upload-modal .modal-close { top: -10px; right: -9px; width: 31px; height: 31px; }
.upload-dropzone { position: relative; display: grid; justify-items: center; gap: 8px; min-height: 154px; padding: 22px 16px; overflow: hidden; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px #ffffff1f; text-align: center; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.upload-dropzone:hover, .upload-dropzone:focus-within { background: #1d1d23; box-shadow: inset 0 0 0 1.5px #6366f188; }
.upload-dropzone.is-dragging { background: #6366f11f; box-shadow: inset 0 0 0 2px var(--accent); transform: scale(1.01); }
.upload-dropzone input[type=file] { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: #a5b4fc; font-size: 19px; font-weight: 500; }
.upload-dropzone strong { max-width: 100%; overflow-wrap: anywhere; font-size: 13px; }
.upload-dropzone small { color: var(--faint); font-size: 10px; }
.upload-dropzone.has-file { box-shadow: inset 0 0 0 1.5px var(--success)66; background: var(--success-soft); }
.thumbnail-row { align-items: stretch; }
.thumbnail-card { position: relative; display: grid; gap: 9px !important; padding: 12px; overflow: hidden; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.thumbnail-card:hover, .thumbnail-card:focus-within { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #6366f188; }
.thumbnail-card input[type=file] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.thumbnail-preview { aspect-ratio: 1.9; border-radius: var(--radius-sm); font-size: 18px; }
.thumbnail-card small { color: var(--faint); font-size: 9px; }
.thumbnail-card input:focus-visible ~ .thumbnail-preview { outline: none; box-shadow: var(--ring); }
.submit-button { position: relative; overflow: hidden; }
.submit-button::after { position: absolute; inset: 0; background: #c8caff; content: ""; opacity: .35; transform: translateX(-105%); transition: transform .3s ease; }
.submit-button:hover::after { transform: translateX(105%); }
.submit-button>* { position: relative; z-index: 1; }

/* ---------- Motion ---------- */
.upload-card, .step-card, .review-item { animation: rise-in .35s both; }
.upload-card:nth-child(2), .step-card:nth-child(2), .review-item:nth-child(2) { animation-delay: 35ms; }
.upload-card:nth-child(3), .step-card:nth-child(3), .review-item:nth-child(3) { animation-delay: 70ms; }
.upload-card:nth-child(4), .step-card:nth-child(4), .review-item:nth-child(4) { animation-delay: 105ms; }
dialog[open] { animation: modal-in .2s ease-out both; }
.toast.show { animation: toast-in .22s ease-out both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .bar, .view, .footer { width: min(100% - 32px, 900px); }
  .bar { gap: 16px; }
  .main-nav a { padding-inline: 9px; font-size: 11px; }
  .upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-columns { grid-template-columns: minmax(0, 1fr); }
  .detail-main-column { border-right: 0; }
  .detail-side-column { border-top: 1px solid var(--hairline); }
  .comment-section { padding-inline: 31px; }
}
@media (max-width: 680px) {
  .topbar { height: 60px; }
  .bar, .view, .footer { width: calc(100% - 28px); }
  .bar { gap: 10px; }
  .brand { gap: 7px; font-size: 13px; }
  .brand-mark { width: 29px; height: 29px; }
  .main-nav { position: absolute; top: 59px; left: 12px; right: 12px; display: none; height: auto; padding: 8px; border-radius: 16px; background: #17171cee; backdrop-filter: blur(16px); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hairline); }
  .main-nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-nav a { justify-content: center; border-radius: 11px; }
  .account-area { gap: 6px; margin-left: auto; }
  .upload-top { min-height: 34px; padding-inline: 10px; font-size: 10px; }
  .profile-chip { min-height: 34px; padding: 0 9px 0 5px; font-size: 10px; }
  .profile-chip img { width: 23px; height: 23px; }
  .mobile-menu { display: inline-flex; width: 34px; min-height: 34px; }
  .hero { align-items: flex-start; gap: 14px; padding: 32px 0 24px; }
  .hero-mark { width: 57px; height: 57px; border-radius: 16px; font-size: 17px; }
  .hero h1 { font-size: 28px; }
  .hero-description { max-width: 280px; font-size: 11px; }
  .stats { gap: 5px; margin-top: 12px; }
  .stat-chip { gap: 4px; min-height: 29px; padding: 5px 9px; }
  .stat-chip strong { font-size: 10px; }
  .stat-chip span { font-size: 9px; }
  .toolbar { flex-wrap: wrap; gap: 7px; padding: 8px; }
  .search-field { flex-basis: 100%; min-height: 38px; }
  .filter-field { flex: 1; justify-content: space-between; min-width: 115px; min-height: 37px; padding-inline: 9px; }
  .filter-field span { font-size: 9px; }
  .filter-field select { max-width: 93px; font-size: 10px; }
  .search-button { min-height: 37px; padding-inline: 12px; }
  .archive-main { padding-top: 25px; }
  .section-heading h2 { font-size: 20px; }
  .section-heading p:not(.eyebrow) { max-width: 38ch; font-size: 10px; }
  .result-count { font-size: 9px; }
  .upload-grid { grid-template-columns: 1fr; gap: 12px; }
  .card-art { height: 195px; }
  .card-content { padding: 14px; }
  .card-description { min-height: 0; }
  .inner-view { padding-top: 32px; padding-bottom: 45px; }
  .page-intro h1 { font-size: 28px; }
  .steps-grid { grid-template-columns: 1fr; gap: 9px; }
  .step-card { min-height: 0; padding: 17px; }
  .step-number { margin-bottom: 14px; }
  .guide-note { align-items: flex-start; flex-wrap: wrap; padding: 15px; }
  .guide-note>.button { margin-left: 44px; }
  .request-layout { grid-template-columns: 1fr; }
  .request-info, .request-panel { padding: 17px; }
  .detail-view { padding-top: 22px; }
  .detail-head { align-items: flex-start; flex-direction: column; padding: 21px 17px; }
  .detail-head h1 { font-size: 27px; }
  .price-card { grid-template-columns: 1fr auto; align-items: center; width: 100%; }
  .price-card strong { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; }
  .file-panel, .detail-section { padding: 19px 17px; }
  .download-row { flex-wrap: wrap; padding: 11px; }
  .download-button { width: 100%; }
  .comment-section { padding-inline: 17px; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-item, .preview-item img, .preview-placeholder { min-height: 150px; }
  .profile-panel { padding: 16px; }
  .profile-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .avatar-wrap, .avatar-big { width: 62px; height: 62px; }
  .profile-title h1 { font-size: 20px; }
  .profile-actions { width: 100%; margin-left: 74px; }
  .profile-stats { margin-top: 16px; }
  .profile-stats strong { font-size: 16px; }
  .review-item { align-items: flex-start; flex-direction: column; }
  .review-actions { align-self: flex-end; }
  .footer { align-items: flex-start; flex-wrap: wrap; gap: 7px 15px; padding: 14px 0; margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .footer>span { width: 100%; order: 3; }
  .footer nav { flex: 1 0 100%; gap: 9px 13px; margin-left: 0; }
  .modal { padding: 21px 17px; }
  .modal-close { top: -8px; right: 0; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .toast { right: 14px; bottom: 14px; }
}