:root {
  --bg: #f5f6f8;
  --bg-gradient: linear-gradient(180deg, #f8f9fb 0%, #f3f5f8 100%);
  --surface: #ffffff;
  --surface-soft: #fbfbfc;
  --surface-muted: #f1f3f6;
  --surface-elevated: rgba(255, 255, 255, 0.94);

  --text: #111318;
  --text-soft: #667085;
  --text-faint: #8a94a6;

  --line: #e5e7eb;
  --line-strong: #d4d8df;
  --line-dark: #c4cad4;

  --accent: #1f2937;
  --accent-soft: #eef1f5;

  --success: #446452;
  --success-bg: #f4faf6;
  --error: #8a565c;
  --error-bg: #fcf7f8;
  --info: #53657a;
  --info-bg: #f5f8fb;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 6px 18px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 16px 40px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 28px 70px rgba(16, 24, 40, 0.14);

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --container: 1280px;
  --header-height: 56px;
  --transition-fast: 160ms ease;
  --transition: 220ms ease;

  /* unified state tokens */
  --state-dim: 0.45;
  --state-muted: 0.6;
  --state-soft: 0.82;
  --state-solid: 0.96;

  --surface-alpha-soft: rgba(255, 255, 255, 0.86);
  --surface-alpha-mid: rgba(255, 255, 255, 0.94);
  --surface-alpha-strong: rgba(255, 255, 255, 0.98);

  --chip-bg: rgba(248, 250, 252, 0.96);
  --chip-bg-completed: rgba(245, 247, 250, 0.96);

  --overlay-soft: rgba(15, 23, 42, 0.16);
  --overlay-mid: rgba(15, 23, 42, 0.22);
  --overlay-strong: rgba(15, 23, 42, 0.34);

  --ui-black-03: rgba(17, 19, 24, 0.03);
  --ui-black-04: rgba(17, 19, 24, 0.04);
  --ui-black-08: rgba(17, 19, 24, 0.08);

  --ui-white-85: rgba(255, 255, 255, 0.85);
  --ui-white-94: rgba(255, 255, 255, 0.94);

  --border-soft-80: rgba(196, 202, 212, 0.8);
}

* {
  box-sizing: border-box;
}

html.scroll-locked,
body.scroll-locked {
  overflow: hidden !important;
}

body.scroll-locked {
  touch-action: none;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-gradient);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  min-height: 100vh;
  width: 100%;
}

img,
video {
  max-width: 100%;
  display: block;
}

button,
input,
textarea {
  font: inherit;
}

button {
  appearance: none;
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
  font-size: 24px;
  line-height: 1;
}

.page-shell {
  min-height: 100vh;
  padding: var(--space-6) var(--space-6) var(--space-12);
  transition: filter 220ms ease;
  overflow-x: clip;
}

.page-shell.is-blurred {
  filter: blur(6px);
}

.topbar,
.content,
.detail-layout {
  max-width: var(--container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

.topbar {
  margin-bottom: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 720px);
  gap: var(--space-6);
  align-items: center;
}

.topbar-detail {
  margin-bottom: var(--space-6);
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.brand-link {
  text-decoration: none;
}

.brand-link:hover {
  opacity: 0.92;
}

.brand-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-text {
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

.searchbar {
  flex: 1 1 340px;
  min-width: 0;
  height: var(--header-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: none;
}

.searchbar:focus-within {
  border-color: var(--line-dark);
  box-shadow: 0 0 0 4px var(--ui-black-04);
}

.searchbar input {
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 var(--space-5);
  color: var(--text);
  min-width: 0;
}

.searchbar input::placeholder {
  color: var(--text-faint);
}

.searchbar button {
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.searchbar button:hover {
  background: var(--ui-black-03);
  color: var(--text);
}

.auth-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.header-auth-btn {
  height: 42px;
  min-width: 42px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text);
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

button.header-auth-btn {
  font: inherit;
}

.menu-btn,
.icon-btn,
.media-close-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.menu-btn:hover,
.icon-btn:hover,
.media-close-btn:hover {
  background: var(--surface);
  border-color: var(--line);
}

.menu-btn {
  width: var(--header-height);
  height: var(--header-height);
  border-radius: 18px;
  font-size: 1.2rem;
  flex: 0 0 auto;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.mobile-only {
  display: none;
}

/* --------------------------------------------------
   ADMIN SWITCH
-------------------------------------------------- */

.admin-switch {
  min-height: 42px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-pill);
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--text);
  cursor: pointer;
  width: auto;
  flex: 0 0 auto;
}

.admin-switch input {
  appearance: none;
  margin: 0;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: #d8dde5;
  position: relative;
  transition: background-color var(--transition-fast);
  cursor: pointer;
  flex: 0 0 auto;
}

.admin-switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  transition: transform var(--transition-fast);
}

.admin-switch input:checked {
  background: #1f2937;
}

.admin-switch input:checked::before {
  transform: translateX(16px);
}

/* --------------------------------------------------
   OVERVIEW / CARDS
-------------------------------------------------- */

.overview-info,
.search-result-info,
.breadcrumbs {
  color: var(--text-soft);
}

.overview-info {
  min-height: 24px;
  margin-bottom: var(--space-4);
}

.content-overview {
  display: grid;
  gap: var(--space-7);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.category-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.category-card.dimmed {
  opacity: var(--state-dim);
}

.category-card-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: none;
  display: grid;
  place-items: center;
  border: none;
  position: relative;
}

.category-card-media::before {
  content: "category";
  font-family: "Material Symbols Outlined";
  font-size: 72px;
  line-height: 1;
  color: #c0c8d4;
  font-weight: 200;
}

.category-card-media img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card-media.has-image::before {
  display: none;
}

.category-card-media.has-image img {
  display: block;
}

.category-card-title {
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.02em;
}

.category-card-meta {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.category-card-add {
  border: 1px dashed var(--line-dark);
  background: none;
  cursor: pointer;
  text-align: left;
}

.category-card-media-add {
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.category-card-media-add::before {
  display: none;
}

.category-card-media-add .material-symbols-outlined {
  font-size: 40px;
}

/* --------------------------------------------------
   BREADCRUMBS / DETAIL LAYOUT
-------------------------------------------------- */

.detail-top-row {
  margin-bottom: var(--space-10);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
}

.breadcrumbs a {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumbs a:hover {
  color: #3f4b5c;
}

.breadcrumb-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumbs .sep {
  color: var(--text-faint);
}

.detail-main-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.desktop-sidebar {
  display: block;
}

.sidebar-nav {
  min-width: 0;
}

.sidebar-nav-inner {
  border: none;
  border-radius: var(--radius-lg);
  background: none;
  padding: var(--space-5);
  position: sticky;
  top: 24px;
}

.sidebar-title {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.instruction-panel {
  min-width: 0;
}

.instruction-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.instruction-title {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  min-width: 0;
}

.search-result-info {
  font-size: 0.95rem;
  white-space: nowrap;
}

/* --------------------------------------------------
   TREE NAV
-------------------------------------------------- */

.drawer-tree {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  overflow: visible;
}

.tree-product {
  padding: 2px 0 8px;
  opacity: var(--state-muted);
  transition: opacity var(--transition-fast);
}

.tree-product.is-active {
  opacity: 1;
}

.tree-product-header {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 12px 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  position: relative;
  min-width: 0;
}

.tree-product-header::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: var(--text-faint);
  flex: 0 0 auto;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.tree-product.is-active .tree-product-header::after {
  transform: rotate(180deg);
  color: var(--text);
}

.tree-product-header > span:first-child {
  min-width: 0;
}

.tree-product-header .admin-tree-actions {
  margin-left: auto;
}

.tree-instruction-list {
  display: grid;
  gap: 6px;
  padding-left: var(--space-4);
  margin-top: 4px;
  overflow: hidden;
  height: 0;
  min-width: 0;
}

.tree-instruction-btn {
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: #4b5565;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast),
    opacity var(--transition-fast);
  min-width: 0;
}

.tree-instruction-btn:hover {
  color: var(--text);
  background: #f7f9fb;
  opacity: 1;
}

.tree-instruction-btn.active {
  border: 1px solid var(--line-dark);
  color: var(--text);
  font-weight: 600;
  background: none;
}

.tree-instruction-add {
  margin-bottom: 6px;
}

/* --------------------------------------------------
   STEPS
-------------------------------------------------- */

.steps-list {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.step-card {
  position: relative;
  border: 1px dashed var(--line-dark);
  border-radius: 22px;
  background: none;
  opacity: var(--state-soft);
  transition:
    opacity var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    background-color var(--transition-fast);
  min-width: 0;
  max-width: 100%;
}

.step-card.is-active {
  opacity: 1;
  border: 1px solid var(--line-dark);
  background: none;
}

.step-card.is-completed {
  opacity: var(--state-solid);
  background: none;
}

body.admin-mode .step-card,
body.admin-mode .step-header {
  cursor: default;
}

.step-header {
  width: 100%;
  min-height: 82px;
  background: transparent;
  text-align: left;
  padding: 0 22px;
  cursor: pointer;
  display: grid;
  align-items: center;
  column-gap: 14px;
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.step-header > * {
  min-width: 0;
}

body.admin-mode .step-header {
  grid-template-columns: minmax(0, 1fr) auto 24px;
}

body:not(.admin-mode) .step-header {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.step-header h3 {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
  padding: 22px 0;
  grid-column: 1;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.step-card.is-completed .step-header h3 {
  color: #3f4a59;
}

body:not(.admin-mode) .step-header::after {
  content: none;
}

body.admin-mode .step-card.is-active .step-header::after {
  color: var(--text-faint);
}

.step-drag-handle {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  color: var(--text-faint);
  font-size: 22px;
  line-height: 1;
  cursor: grab;
  user-select: none;
}

.step-drag-handle:active {
  cursor: grabbing;
}

.admin-step-actions-inline {
  grid-column: 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.admin-step-actions-inline .admin-icon-btn {
  position: static;
  background: none;
}

.step-actions-inline {
  grid-column: 2;
  justify-self: end;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  flex: 0 1 auto;
  padding-left: 8px;
  min-width: 0;
  max-width: 100%;
}

.step-actions-inline .admin-icon-btn {
  position: static;
  background: none;
}

.step-body {
  overflow: hidden;
  height: 0;
  min-width: 0;
  max-width: 100%;
}

.step-body-inner {
  padding: 0 22px 22px;
  min-width: 0;
  max-width: 100%;
}

.step-body p {
  margin: 0;
  line-height: 1.72;
  color: #394150;
  max-width: 92ch;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.step-material-inline {
  margin-top: 20px;
  min-width: 0;
}

.step-material-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}

.step-material-heading .material-symbols-outlined {
  display: block;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  transform: translateY(-1px);
}

.step-material-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}



.step-card.is-completed .step-material-chip {
  background: var(--chip-bg-completed);
  color: #4e5968;
}

.admin-material-editor {
  display: grid;
  gap: 12px;
}

.admin-material-editor-head {
  font-size: 0.94rem;
  color: var(--text-soft);
}

.admin-material-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-material-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--ui-white-94);
  padding: 0 14px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-material-input:focus {
  border-color: var(--line-dark);
  box-shadow: 0 0 0 4px var(--ui-black-04);
}

.admin-material-add-btn {
  min-width: 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
}

.admin-material-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-material-chip, .step-material-chip {
  min-height: 36px;
  padding: 0 10px 0 14px;
  border-radius: 999px;
  border: none;
  background-color: #111827;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-material-chip-remove {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}


.admin-material-chip-remove .material-symbols-outlined {
  font-size: 16px;
}

.step-card.is-completed .step-material-text {
  color: #4e5968;
}

.step-card.is-completed .step-body p {
  color: #4e5968;
}

.step-media-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.step-media-thumb {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  min-height: 180px;
  position: relative;
  padding: 0;
  background: none;
  box-shadow: var(--shadow-xs);
  min-width: 0;
  max-width: 100%;
}

.step-media-thumb:hover {
  border-color: var(--line-dark);
}

.step-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-media-thumb .video-badge {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--line-dark);
  border-radius: 999px;
}

.video-thumb-fallback {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
  background: var(--chip-bg);
}

.video-thumb-fallback .material-symbols-outlined {
  font-size: 56px;
  line-height: 1;
  color: #9aa4b2;
}

.step-media-thumb .video-badge .material-symbols-outlined {
  font-size: 30px;
  line-height: 1;
}

body.admin-mode .step-card .admin-icon-btn,
body.admin-mode .step-card .step-media-thumb {
  cursor: pointer;
}

.steps-list.is-step-sort-mode {
  gap: 16px;
}

.step-card-ghost {
  opacity: var(--state-dim);
}

.step-card-chosen {
  border: 1px solid var(--line-dark);
}

.step-card-drag {
  transform: rotate(0.35deg);
}

.is-step-sorting .step-header,
.is-step-sorting .step-card {
  cursor: grabbing;
}

.step-note-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f3df8d;
  color: #5e4a06;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  z-index: 3;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(94, 74, 6, 0.08);
  max-width: calc(100% - 40px);
}

.step-notes-wrap {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  min-width: 0;
}

.step-note-card {
  border: 1px solid #eadf9a;
  background: #fffbea;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: var(--space-4);
  min-width: 0;
  max-width: 100%;
}

.step-note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: #6b5a12;
  font-size: 0.9rem;
  min-width: 0;
}

.step-note-text {
  margin: 0;
  color: #4f4a2a;
  line-height: 1.6;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.step-progress-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #9aa4b2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 999px;
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.step-progress-btn:hover {
  color: #6f7b8b;
}

.step-progress-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ui-black-08);
}

.step-progress-btn .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.step-progress-btn.is-completed {
  color: #1f2937;
}

.step-progress-btn.is-completed .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* --------------------------------------------------
   DRAWERS / MODALS
-------------------------------------------------- */

.drawer-backdrop,
.admin-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-soft);
  backdrop-filter: blur(4px);
}

.drawer-backdrop {
  z-index: 90;
}

.admin-drawer-backdrop {
  z-index: 190;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-dark);
}

.drawer-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.drawer .drawer-tree {
  padding: var(--space-4);
  overflow: auto;
}

.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(620px, 100vw);
  height: 100vh;
  background: #fff;
  box-shadow: -20px 0 60px rgba(16, 24, 40, 0.14);
  transform: translateX(100%);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.admin-drawer-header {
  position: relative;
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line-dark);
}

.admin-drawer-header > div {
  width: 100%;
  text-align: center;
}

.admin-drawer-header .icon-btn {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
}

.admin-drawer-title {
  margin: 0;
  text-align: left;
}

.admin-drawer-header > div p,
.admin-drawer-header > div .admin-drawer-eyebrow {
  margin: 0;
}

.admin-drawer-eyebrow {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.admin-drawer-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.admin-drawer-body {
  padding: var(--space-5);
  overflow: auto;
  display: grid;
  gap: var(--space-5);
}

.media-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.media-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-strong);
  backdrop-filter: blur(8px);
}

.media-modal-dialog {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--surface-alpha-strong);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--shadow-lg);
  border-radius: 20px;
  padding: var(--space-4);
}

.media-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--text);
  background: var(--ui-white-85);
  margin-left: auto;
  display: block;
  border: none;
}

.media-viewer {
  margin-top: var(--space-3);
}

.media-viewer img,
.media-viewer video {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

.media-caption {
  margin: var(--space-4) 0 0;
  color: var(--text-soft);
  display: none;
}

/* --------------------------------------------------
   EMPTY / MARK
-------------------------------------------------- */

.empty-state {
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  background: var(--surface-alpha-soft);
}

.empty-state h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.2rem;
}

.empty-state p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.6;
}

mark {
  background: #fef3c7;
  padding: 0 2px;
  border-radius: 4px;
}

/* --------------------------------------------------
   ADMIN UI
-------------------------------------------------- */

.admin-add-card {
  margin-bottom: var(--space-6);
}

.admin-add-tile,
.admin-add-row {
  width: 100%;
  min-height: 60px;
  border: 1px dashed var(--line-dark);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.admin-add-tile:hover,
.admin-add-row:hover {
  border-color: #b9c2cf;
}

.admin-inline-add {
  margin-bottom: var(--space-5);
}

.admin-add-row.is-compact {
  min-height: 46px;
  border-radius: 12px;
  font-size: 0.94rem;
  justify-content: flex-start;
  padding: 0 14px;
}

.admin-card-actions,
.admin-step-actions,
.admin-panel-actions,
.admin-tree-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-card-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.is-admin-card {
  position: relative;
}

.admin-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  color: var(--text-soft);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

.admin-icon-btn:hover {
  color: var(--text);
}

.admin-icon-btn.is-danger,
.admin-inline-icon.is-danger {
  color: #9b4f56;
}

.admin-inline-icon {
  font-size: 24px;
  cursor: pointer;
  opacity: var(--state-muted);
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.admin-inline-icon:hover {
  opacity: 1;
}

.admin-panel-actions {
  margin-top: 12px;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.admin-inline-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--ui-white-85);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.admin-inline-btn.is-danger {
  color: #975056;
}

body:not(.admin-mode) .admin-add-card,
body:not(.admin-mode) .admin-inline-add,
body:not(.admin-mode) .admin-panel-actions,
body:not(.admin-mode) .admin-card-actions,
body:not(.admin-mode) .admin-step-actions,
body:not(.admin-mode) .admin-tree-actions,
body:not(.admin-mode) .tree-instruction-add {
  display: none !important;
}

/* --------------------------------------------------
   FORMS
-------------------------------------------------- */

.admin-form {
  display: grid;
  gap: var(--space-5);
}

.admin-form-section {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: none;
}

.admin-form-section h3 {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
  font-weight: 600;
}

.admin-form-grid {
  display: grid;
  gap: var(--space-4);
}

.admin-form-field {
  display: grid;
  gap: 8px;
}

.admin-form-field span {
  font-size: 0.94rem;
  color: var(--text-soft);
}

.admin-form-field input,
.admin-form-field textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--ui-white-94);
  padding: 12px 14px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-form-field input:focus,
.admin-form-field textarea:focus {
  border-color: var(--line-dark);
  box-shadow: 0 0 0 4px var(--ui-black-04);
}

.admin-form-field textarea {
  resize: vertical;
  min-height: 100px;
}

.admin-step-list {
  display: grid;
  gap: var(--space-4);
}

.admin-step-item {
  border: none;
  border-radius: 14px;
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.84);
}

.admin-step-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-step-item-head h4 {
  margin: 0;
  font-size: 0.98rem;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.admin-primary-btn,
.admin-secondary-btn,
.admin-danger-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.admin-primary-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #111827;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.admin-secondary-btn {
  border: none;
  background: none;
  color: var(--text);
}

.admin-danger-btn {
  border: none;
  background: none;
  color: #8f4c53;
}

.admin-form-message {
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.95rem;
}

.admin-form-message.is-error {
  background: var(--error-bg);
  border: 1px solid #f2d9dc;
  color: var(--error);
}

.admin-form-message.is-success {
  background: var(--success-bg);
  border: 1px solid #d7eadf;
  color: var(--success);
}

/* --------------------------------------------------
   MEDIA DROPZONE
-------------------------------------------------- */

.admin-step-media-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.admin-step-media-item {
  border: none;
  border-radius: 16px;
  background: none;
}

.admin-step-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-step-media-head h5 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--text-soft);
}

.admin-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-file-hint {
  margin: 6px 0 0;
  font-size: 0.86rem;
  color: var(--text-soft);
  line-height: 1.45;
}

.file-dropzone {
  position: relative;
  border: 1px dashed #c9d1d9;
  border-radius: 16px;
  background: #fff;
  min-height: 132px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.file-dropzone:hover {
  border-color: #b9c3cd;
  background: #fcfcfd;
}

.file-dropzone-inner {
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}

.file-dropzone .material-symbols-outlined {
  font-size: 30px;
  color: #97a1ac;
}

.file-dropzone-title {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--text);
}

.file-dropzone-subtitle {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.file-dropzone-meta {
  font-size: 0.82rem;
  color: var(--text-faint);
}

/* --------------------------------------------------
   CONFIRM / SNACKBAR / BUSY
-------------------------------------------------- */

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 20px;
}

.confirm-modal.hidden {
  display: none !important;
}

.confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-mid);
  backdrop-filter: blur(6px);
}

.confirm-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 32px));
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 22px 22px 18px;
}

.confirm-modal-header h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 600;
}

.confirm-modal-body {
  margin-top: 12px;
}

.confirm-modal-body p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.6;
}

.confirm-modal-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.app-snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 280;
  width: min(560px, calc(100vw - 28px));
}

.app-snackbar.hidden {
  display: none !important;
}

.app-snackbar-inner {
  background: #111827;
  color: #ffffff;
  border: 1px solid #111827;
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.18);
  font-size: 0.96rem;
  line-height: 1.45;
}

.app-snackbar.is-success .app-snackbar-inner,
.app-snackbar.is-error .app-snackbar-inner,
.app-snackbar.is-info .app-snackbar-inner {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
  text-align: center;
}

.app-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(6px);
  padding: 20px;
}

.app-busy-overlay.hidden {
  display: none !important;
}

.app-busy-card {
  width: min(320px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 22px 20px 18px;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.app-busy-card p {
  margin: 0;
  color: var(--text-soft);
  text-align: center;
}

.app-busy-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(17, 19, 24, 0.08);
  border-top-color: #111;
  animation: appBusySpin 0.8s linear infinite;
}

@keyframes appBusySpin {
  to {
    transform: rotate(360deg);
  }
}

.admin-primary-btn.is-loading,
.admin-secondary-btn.is-loading,
.admin-danger-btn.is-loading {
  pointer-events: none;
  opacity: 0.78;
}

.admin-file-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f4f6f8;
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1;
}

.admin-file-chip .material-symbols-outlined {
  font-size: 16px;
  color: var(--text-faint);
}

.copy-modal-content {
  display: grid;
  gap: 14px;
}

.copy-modal-text {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.6;
}

.copy-modal-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: none;
  cursor: pointer;
}

.copy-modal-switch-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.copy-modal-switch-copy strong {
  font-size: 0.96rem;
  color: var(--text);
}

.copy-modal-switch-copy span {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.45;
}

.copy-modal-switch {
  position: relative;
  width: 46px;
  height: 28px;
  flex: 0 0 auto;
}

.copy-modal-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.copy-modal-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d8dde5;
  transition: background-color var(--transition-fast);
}

.copy-modal-switch-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  transition: transform var(--transition-fast);
}

.copy-modal-switch input:checked + .copy-modal-switch-slider {
  background: #1f2937;
}

.copy-modal-switch input:checked + .copy-modal-switch-slider::before {
  transform: translateX(18px);
}

.instruction-progress {
  position: relative;
  width: 100%;
  height: 12px;
  margin: 10px 0 14px;
  border-radius: 999px;
  background: #ebebeb;
  overflow: hidden;
}

.instruction-progress.hidden {
  display: none;
}

.instruction-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #1f2937;
  transition: width 220ms ease;
}

/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media (max-width: 1200px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .detail-main-grid {
    grid-template-columns: 1fr;
  }

  .desktop-sidebar {
    display: none;
  }

  .mobile-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .admin-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 85%;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -20px 60px rgba(16, 24, 40, 0.14);
  }

  .admin-drawer-header {
    padding: 18px 18px 12px;
  }

  .admin-drawer-body {
    padding: 16px 18px 24px;
  }
}

@media (max-width: 920px) {
  .topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .searchbar {
    width: 100%;
    flex: 1 1 100%;
  }

  .header-mobile-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .auth-actions {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px;
  }

  .mobile-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .instruction-panel-header {
    flex-direction: column;
    align-items: start;
  }

  .search-result-info {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .page-shell {
    padding: 16px 14px 28px;
  }

  .brand-logo {
    width: 46px;
    height: 46px;
  }

  .brand-text {
    font-size: 1.2rem;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .step-media-grid {
    grid-template-columns: 1fr;
  }

  .searchbar,
  .menu-btn {
    height: 52px;
  }

  .header-auth-btn,
  .admin-switch {
    min-height: 40px;
  }

  .auth-actions {
    gap: 8px;
  }

  .admin-switch {
    width: auto;
    justify-content: flex-end;
    padding-right: 10px;
    flex: 0 0 auto;
  }

  .admin-switch span:last-child {
    display: none;
  }

  .menu-btn {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }

  .step-header {
    min-height: 74px;
    padding: 0 16px;
    column-gap: 10px;
  }

  body.admin-mode .step-header {
    grid-template-columns: minmax(0, 1fr) auto 24px;
  }

  body:not(.admin-mode) .step-header {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .step-header h3 {
    padding: 18px 0;
    font-size: 1rem;
  }

  .step-actions-inline {
    gap: 6px;
    padding-left: 6px;
  }

  .step-progress-btn {
    width: 30px;
    height: 30px;
  }

  .step-progress-btn .material-symbols-outlined {
    font-size: 22px;
  }

  .step-body-inner {
    padding: 0 16px 18px;
  }

  .step-note-card {
    padding: 14px 16px;
  }

  .step-note-meta {
    flex-wrap: wrap;
  }

  .empty-state {
    padding: 24px 18px;
  }

  .confirm-modal {
    align-items: end;
    padding: 0;
  }

  .confirm-modal-dialog {
    width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 20px 18px 18px;
  }

  .confirm-modal-actions {
    flex-direction: column-reverse;
  }

  .confirm-modal-actions button {
    width: 100%;
  }

  .app-snackbar {
    bottom: 14px;
    width: calc(100vw - 20px);
  }

  .app-snackbar-inner {
    border-radius: 14px;
    padding: 13px 15px;
  }
}

.header-mobile-actions {
  display: contents;
}