/*
 * OPC product design system
 * A late-loading compatibility layer for the existing Flask/Jinja interface.
 */

:root {
  --color-brand-600: #f4512c;
  --color-brand-700: #d94220;
  --color-brand-050: #fff6f2;
  --color-ink-950: #171717;
  --color-ink-700: #404040;
  --color-ink-500: #737373;
  --color-line-200: #e5e5e5;
  --color-line-100: #eeeeec;
  --color-surface-000: #fff;
  --color-surface-050: #fafaf9;
  --color-surface-100: #f5f5f3;
  --color-positive-600: #18794e;
  --color-positive-050: #effaf5;
  --color-warning-600: #9a6700;
  --color-warning-050: #fff8e6;
  --color-danger-600: #c9352b;
  --color-danger-050: #fff2f1;
  --space-0-5: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --page-gutter: clamp(16px, 2vw, 32px);
  --font-body: 16px;
  --font-small: 14px;
  --font-caption: 13px;
  --control-height: 40px;
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-panel: 12px;
  --shadow-float: 0 8px 24px rgba(23, 23, 23, .08);
  --transition-product: 180ms ease-out;

  /* Backwards-compatible aliases used throughout existing templates. */
  --primary: var(--color-brand-600);
  --primary-dark: var(--color-brand-700);
  --text: var(--color-ink-950);
  --text-muted: var(--color-ink-500);
  --border: var(--color-line-200);
  --border-light: var(--color-line-200);
  --border-lighter: var(--color-line-100);
  --bg: var(--color-surface-050);
  --bg-light: var(--color-surface-050);
  --bg-lighter: var(--color-surface-100);
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-control);
  --radius-lg: var(--radius-panel);
  --shadow-xs: 0 1px 2px rgba(23, 23, 23, .04);
  --shadow-sm: 0 4px 12px rgba(23, 23, 23, .06);
  --shadow-md: var(--shadow-float);
  --shadow-lg: var(--shadow-float);
  --transition: var(--transition-product);
}

html {
  color-scheme: light;
  background: var(--color-surface-000);
  scroll-behavior: smooth;
}

body {
  color: var(--color-ink-950);
  background: var(--color-surface-000);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: var(--font-body);
  font-variant-emoji: text;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

button,
a,
input,
select,
textarea,
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid rgba(244, 81, 44, .38);
  outline-offset: 2px;
}

::selection {
  color: var(--color-ink-950);
  background: #ffe0d6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-ink-950);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.3;
  text-wrap: balance;
}

h1 {
  font-size: clamp(48px, 5vw, 64px);
  line-height: 1.15;
}

h2 {
  font-size: clamp(36px, 4vw, 40px);
}

h3 {
  font-size: clamp(28px, 3vw, 32px);
}

h4 {
  font-size: clamp(22px, 2.5vw, 24px);
}

p {
  text-wrap: pretty;
}

.container {
  width: 100%;
  max-width: none;
  padding-inline: var(--page-gutter);
}

.site-main {
  min-width: 0;
}

/* Shell */
.site-header {
  min-height: 64px;
  border-color: var(--color-line-100);
  background: rgba(255, 255, 255, .97);
}

.header-inner {
  height: 64px;
  gap: var(--space-3);
}

.logo-mark,
.drawer-logo-mark {
  color: var(--color-ink-950);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.025em;
}

.logo-sub {
  display: none;
}

.primary-nav {
  gap: var(--space-3);
  font-size: 14px;
}

.primary-nav a {
  position: relative;
  padding: 22px 0 20px;
  border: 0;
  color: var(--color-ink-700);
  transition: color var(--transition-product);
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-brand-600);
  content: "";
  opacity: 0;
  transition: opacity var(--transition-product);
}

.primary-nav a:hover {
  border: 0;
  color: var(--color-ink-950);
}

.primary-nav a:hover::after {
  opacity: 1;
}

.user-area {
  gap: var(--space-2);
}

.user-area a,
.icon-link,
.user-name {
  color: var(--color-ink-700);
}

.lang-menu,
.user-menu {
  padding-block: 20px;
}

.lang-trigger {
  min-height: 32px;
  padding: 5px 10px;
  border-color: var(--color-line-200);
  border-radius: var(--radius-control);
  color: var(--color-ink-700);
}

.search-type-menu,
.bs-type-menu,
.lang-dropdown,
.user-dropdown,
.upload-dropdown,
.notify-dropdown {
  padding: var(--space-1);
  border-color: var(--color-line-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}

.search-type-menu .st-item,
.bs-menu-item,
.lang-dropdown a,
.user-dropdown a,
.upload-dropdown a {
  min-height: 40px;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-ink-700);
}

.search-type-menu .st-item:hover,
.bs-menu-item:hover,
.lang-dropdown a:hover,
.user-dropdown a:hover,
.upload-dropdown a:hover {
  color: var(--color-ink-950);
  background: var(--color-surface-100);
}

.search-type-menu .st-item.active,
.bs-menu-item.active,
.lang-dropdown a.active {
  color: var(--color-brand-700);
  background: var(--color-brand-050);
}

.st-icon,
.bs-icon,
.ud-ico {
  display: none;
}

.drawer-nav {
  border-radius: 0;
  box-shadow: var(--shadow-float);
}

.drawer-link {
  min-height: 44px;
  padding: 10px var(--space-2);
  border-radius: var(--radius-control);
  color: var(--color-ink-700);
}

.drawer-link:hover {
  color: var(--color-ink-950);
  background: var(--color-surface-100);
}

/* Buttons and controls */
.btn,
button.btn,
input[type="submit"].btn,
.search-btn,
.banner-search button,
.hero-search button,
.page-hero-search button,
.task-hero-search button,
.task-hero-publish {
  min-height: var(--control-height);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  font-size: var(--font-small);
  font-weight: 600;
  line-height: 1.5;
  transition:
    color var(--transition-product),
    background-color var(--transition-product),
    border-color var(--transition-product),
    opacity var(--transition-product);
}

.btn-primary,
button.btn-primary,
.search-btn,
.banner-search button,
.hero-search button,
.page-hero-search button,
.task-hero-search button,
.task-hero-publish.solid {
  border: 1px solid var(--color-brand-600);
  color: #fff;
  background: var(--color-brand-600);
  box-shadow: none;
}

.btn-primary:hover,
button.btn-primary:hover,
.search-btn:hover,
.banner-search button:hover,
.hero-search button:hover,
.page-hero-search button:hover,
.task-hero-search button:hover,
.task-hero-publish.solid:hover {
  border-color: var(--color-brand-700);
  color: #fff;
  background: var(--color-brand-700);
  box-shadow: none;
}

.btn-outline,
.btn-secondary,
.task-hero-publish {
  border: 1px solid var(--color-line-200);
  color: var(--color-ink-700);
  background: var(--color-surface-000);
  box-shadow: none;
}

.btn-outline:hover,
.btn-secondary:hover,
.task-hero-publish:hover {
  border-color: #c8c8c5;
  color: var(--color-ink-950);
  background: var(--color-surface-050);
  box-shadow: none;
}

.btn:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  min-height: var(--control-height);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-control);
  color: var(--color-ink-950);
  background: var(--color-surface-000);
  box-shadow: none;
  transition: border-color var(--transition-product), box-shadow var(--transition-product);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-brand-600);
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 81, 44, .10);
}

input::placeholder,
textarea::placeholder {
  color: #a3a3a3;
}

label,
.form-label {
  color: var(--color-ink-700);
  font-weight: 600;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-brand-600);
}

.form-group {
  margin-bottom: var(--space-3);
}

.form-help,
.help-text,
.field-help,
.form-hint {
  color: var(--color-ink-500);
  font-size: var(--font-caption);
  line-height: 1.65;
}

/* Heroes and page rhythm */
.section {
  padding-block: var(--space-8);
}

.section + .section {
  border-top: 1px solid var(--color-line-100);
}

.section-title {
  margin-bottom: var(--space-3);
}

.section-title h2 {
  font-size: 24px;
  line-height: 32px;
}

.section-title a {
  color: var(--color-ink-500);
}

.page-hero,
.task-hero,
.ct-hero {
  min-height: 240px;
  padding: var(--space-8) var(--space-4);
  color: #fff;
  background: #202020;
}

.market-hero {
  box-sizing: border-box;
  height: 280px;
  min-height: 280px;
  padding: var(--space-8) var(--space-4);
}

.page-hero h1,
.market-hero h1,
.task-hero h1,
.ct-hero h1 {
  color: #fff;
  font-size: 40px;
  line-height: 48px;
}

.page-hero p,
.market-hero p,
.task-hero p,
.ct-hero p {
  color: rgba(255, 255, 255, .68);
}

.banner-carousel {
  height: min(460px, 56vw);
  min-height: 360px;
  background: #202020;
}

.banner-overlay {
  background: rgba(0, 0, 0, .42);
}

.banner-text {
  max-width: none;
  padding-inline: var(--page-gutter);
}

.banner-text h2 {
  max-width: 720px;
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.16;
  text-shadow: none;
}

.banner-text p {
  color: rgba(255, 255, 255, .78);
}

.banner-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(23, 23, 23, .28);
}

.banner-dot {
  width: 8px;
  height: 4px;
}

.banner-dot.is-active {
  width: 24px;
}

.banner-search,
.hero-search,
.hero-search-full,
.page-hero-search,
.task-hero-search {
  border: 1px solid rgba(23, 23, 23, .12);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}

.hero-search-full {
  margin-top: var(--space-3);
}

/* Header notification count */
.notify-bell > .icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.notify-bell .notify-badge {
  position: static;
  flex: 0 0 auto;
  transform: translateY(-6px);
}

/* Segmented home search */
.banner-search .bs-type-trigger,
.hero-search-full .search-type-trigger {
  border-radius: calc(var(--radius-card) - 1px) 0 0
    calc(var(--radius-card) - 1px);
}

.banner-search > input[type="text"][name="q"],
.hero-search-full > input[type="text"][name="q"] {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.banner-search > input[type="text"][name="q"]:focus,
.hero-search-full > input[type="text"][name="q"]:focus {
  border: 0;
  box-shadow: none;
}

.banner-search > button[type="submit"],
.hero-search-full > button[type="submit"] {
  border: 0;
  border-radius: 0 calc(var(--radius-card) - 1px)
    calc(var(--radius-card) - 1px) 0;
}

.banner-search > button[type="submit"]:hover,
.hero-search-full > button[type="submit"]:hover {
  transform: none;
}

/* Cards, lists, and data */
.grid {
  gap: var(--space-2);
}

.card,
.upload-card,
.help-card,
.contest-card,
.task-card,
.creator-card,
.news-card,
.detail-panel,
.user-content,
.user-side,
.form-page,
.upload-form,
.admin-like-card {
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-card);
  background: var(--color-surface-000);
  box-shadow: none;
}

.card {
  transition: border-color var(--transition-product),
    background-color var(--transition-product);
}

.card:hover,
.upload-card:hover,
.help-card:hover,
.contest-card:hover,
.task-card:hover,
.creator-card:hover,
.news-card:hover {
  border-color: #c8c8c5;
  background: var(--color-surface-050);
  box-shadow: none;
}

.card-body {
  padding: var(--space-2);
}

.card-title {
  color: var(--color-ink-950);
  font-size: 14px;
  font-weight: 600;
}

.card-meta {
  gap: var(--space-1);
  color: var(--color-ink-500);
  font-variant-numeric: tabular-nums;
}

.cat-strip {
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.cat-card {
  padding: var(--space-2);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-card);
  background: var(--color-surface-000);
  box-shadow: none;
}

.cat-card:hover {
  border-color: #c8c8c5;
  color: var(--color-ink-950);
  background: var(--color-surface-050);
  box-shadow: none;
}

.cat-card:hover .desc {
  color: var(--color-ink-500);
}

.filter-chip,
.tag,
.detail-tags a,
.status-badge,
.badge,
.pill {
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-control);
  color: var(--color-ink-700);
  background: var(--color-surface-000);
  box-shadow: none;
}

.filter-chip:hover,
.detail-tags a:hover {
  border-color: #c8c8c5;
  color: var(--color-ink-950);
  background: var(--color-surface-100);
  box-shadow: none;
}

.filter-chip.active,
.tag.active {
  border-color: #ffd6ca;
  color: var(--color-brand-700);
  background: var(--color-brand-050);
  box-shadow: none;
}

.ai-content-label {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-control);
  background: rgba(23, 23, 23, .88);
  box-shadow: none;
}

.ai-content-label::before {
  content: "AI";
  color: #fff;
  font-size: 9px;
  letter-spacing: .06em;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th {
  color: var(--color-ink-500);
  background: var(--color-surface-050);
  font-size: var(--font-caption);
  font-weight: 600;
  letter-spacing: .02em;
  text-align: left;
}

th,
td {
  min-height: 48px;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-line-100);
}

tbody tr:hover {
  background: var(--color-surface-050);
}

/* Forms, upload, authentication, account and commerce */
.form-page {
  max-width: 480px;
  margin: var(--space-8) auto;
  padding: var(--space-4);
}

.upload-form {
  max-width: 800px;
  padding: var(--space-6);
}

.upload-drop {
  min-height: 208px;
  padding: var(--space-4);
  border: 1px dashed #c8c8c5;
  border-radius: var(--radius-card);
  background: var(--color-surface-050);
}

.upload-drop:hover,
.upload-drop.dragover {
  border-color: var(--color-brand-600);
  background: var(--color-brand-050);
}

.upload-drop .file-name {
  border-radius: var(--radius-control);
}

.upload-page,
.account-page,
.order-page,
.cart-page,
.support-page,
.enterprise-page {
  background: var(--color-surface-050);
}

.user-layout {
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-8);
}

.user-side,
.user-content {
  padding: var(--space-3);
}

.user-side a {
  min-height: 40px;
  border-radius: var(--radius-control);
}

.user-side a:hover {
  color: var(--color-ink-950);
  background: var(--color-surface-100);
}

.user-side a.active {
  color: var(--color-brand-700);
  background: var(--color-brand-050);
}

.point-card,
.summary-card,
.stat-card {
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-card);
  background: var(--color-surface-000);
  box-shadow: none;
}

.modal,
.modal-content,
.dialog,
.popup {
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-panel);
  background: var(--color-surface-000);
  box-shadow: var(--shadow-float);
}

/* Upload drop icon */
.upload-drop .ico {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  background: var(--color-brand-600);
  font-size: 0;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 40px 40px;
  mask-size: 40px 40px;
}

.upload-drop.has-file .ico {
  background: var(--color-positive-600);
}

/* Account identity surfaces */
.acc-card {
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.acc-form input,
.acc-form textarea,
.avatar-upload-btn {
  min-height: var(--control-height);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
}

.role-badge,
.acc-body-header > div > span {
  border: 1px solid var(--color-line-200) !important;
  border-radius: var(--radius-control) !important;
  color: var(--color-ink-700) !important;
  background: var(--color-surface-100) !important;
  box-shadow: none !important;
}

.acc-body-header > div > span {
  filter: grayscale(1);
}

.avatar-ring span {
  font-size: 0;
}

.avatar-ring span::before {
  display: block;
  width: 32px;
  height: 32px;
  background: var(--color-ink-500);
  content: "";
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E")
    center / 32px 32px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E")
    center / 32px 32px no-repeat;
}

/* Asset and editorial detail */
.detail-layout,
.contest-layout,
.task-detail-layout {
  gap: var(--space-4);
}

.detail-sidebar,
.contest-sidebar,
.task-sidebar {
  top: 88px;
}

.detail-panel,
.contest-sidebar-card,
.task-sidebar-card {
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-card);
  background: var(--color-surface-000);
  box-shadow: none;
}

.asset-viewer,
.detail-media {
  background: #202020;
}

.surface-callout {
  padding: var(--space-4);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-card);
  background: var(--color-surface-050);
}

.editorial-hero {
  padding: var(--space-12) 0;
  color: #fff;
  background: #202020;
  text-align: center;
}

.editorial-hero h1,
.editorial-hero h2 {
  color: #fff;
}

.help-card-index {
  border-color: #ffd6ca;
  color: var(--color-brand-700);
  background: var(--color-brand-050);
}

.news-page-wrap {
  max-width: 1120px;
}

.contest-banner--placeholder {
  background: #202020;
}

.contest-banner__mask {
  background: rgba(0, 0, 0, .40);
}

.contest-banner__title {
  color: #fff;
}

/* Feedback */
.toast {
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-card);
  background: var(--color-surface-000);
  box-shadow: var(--shadow-float);
}

.toast-success {
  border-left-color: var(--color-positive-600);
}

.toast-error {
  border-left-color: var(--color-danger-600);
}

.empty-state {
  padding: var(--space-8) var(--space-3);
  color: var(--color-ink-500);
  text-align: center;
}

.notify-title,
.empty-state-icon,
.empty-state > .icon {
  filter: grayscale(1);
}

.pagination a,
.pagination span {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-control);
  background: var(--color-surface-000);
}

.pagination .active {
  border-color: var(--color-brand-600);
  color: #fff;
  background: var(--color-brand-600);
}

/* Footer */
.site-footer {
  color: #b8b8b5;
  background: #202020;
}

.footer-grid {
  gap: var(--space-6);
  padding-block: 28px;
}

.site-footer h4 {
  color: #fff;
  font-size: var(--font-small);
  letter-spacing: .02em;
}

.site-footer a,
.footer-item-text {
  color: #b8b8b5;
}

.site-footer a:hover {
  color: #fff;
}

.footer-bottom {
  border-color: rgba(255, 255, 255, .10);
  font-size: var(--font-caption);
}

/* Quiet, consistent utility surfaces */
* {
  scrollbar-color: #c8c8c5 transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  background: #c8c8c5;
  background-clip: padding-box;
}

.toast {
  animation: none;
}

.ai-video-hero {
  border: 1px solid #303030;
  background: #202020 !important;
  box-shadow: none;
}

#progress-bar {
  background: var(--color-brand-600) !important;
  transition: width var(--transition-product) !important;
}

.kw-letter-btn,
.kw-tag {
  border-radius: var(--radius-control) !important;
  background: var(--color-surface-000) !important;
}

.kw-letter-btn:hover,
.kw-tag:hover {
  border-color: #c8c8c5 !important;
  background: var(--color-surface-100) !important;
}

.kw-section > div:first-child > span:first-child {
  background: var(--color-ink-950) !important;
}

/* Mobile navigation */
.mobile-bottom-nav {
  border-top: 1px solid var(--color-line-200);
  background: rgba(255, 255, 255, .98);
  box-shadow: none;
}

.mbn-item {
  color: var(--color-ink-500);
}

.mbn-item.active {
  color: var(--color-brand-600);
}

@media (max-width: 1024px) {
  .container {
    padding-inline: var(--space-3);
  }

  .primary-nav {
    gap: var(--space-2);
  }

  .section {
    padding-block: var(--space-6);
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 20px;
  }

  .container {
    padding-inline: var(--space-2);
  }

  .site-main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .header-inner {
    height: 56px;
  }

  .site-header {
    min-height: 56px;
  }

  .logo-mark,
  .drawer-logo-mark {
    font-size: 16px;
  }

  .section {
    padding-block: var(--space-4);
  }

  .section-title {
    margin-bottom: var(--space-2);
  }

  .section-title h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .page-hero,
  .task-hero,
  .ct-hero {
    min-height: 184px;
    padding: var(--space-6) var(--space-2);
  }

  .market-hero {
    height: 240px;
    min-height: 240px;
    padding: var(--space-6) var(--space-4);
  }

  .page-hero h1,
  .market-hero h1,
  .task-hero h1,
  .ct-hero h1 {
    font-size: 30px;
    line-height: 38px;
  }

  .banner-carousel {
    min-height: 360px;
  }

  .banner-text {
    padding-inline: var(--space-2);
  }

  .banner-text h2 {
    font-size: 32px;
  }

  .grid {
    gap: var(--space-1);
  }

  .upload-form,
  .form-page,
  .user-content,
  .user-side {
    padding: var(--space-2);
  }

  .upload-form {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .detail-layout,
  .contest-layout,
  .task-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .detail-actions,
  .form-actions,
  .action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .detail-actions > *,
  .form-actions > *,
  .action-row > * {
    min-height: 44px;
  }

  .modal,
  .modal-content,
  .dialog,
  .popup {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 480px) {
  .cat-strip {
    padding-bottom: var(--space-1);
  }

  .card-body {
    padding: var(--space-1);
  }

  .card-title {
    font-size: var(--font-small);
  }

  .btn,
  button.btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}