* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--text); background: var(--bg); font-family: var(--font-sans); transition: background-color 180ms ease; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 46%, transparent); outline-offset: 2px; }

body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 12%, var(--bg-glow), transparent 32%), radial-gradient(circle at 86% 88%, rgba(119, 187, 255, .12), transparent 28%); }
:root[data-background="image"] body { background: #e8a8cb url('/assets/2026-macbook-neo-blush.png') center / cover fixed no-repeat; }
:root[data-background="image"] body::before { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); }
:root[data-background="plain"] body { background: #fff; }
:root[data-background="plain"] body::before { background: none; }
.app-shell, .auth-shell { position: relative; z-index: 1; width: 100%; height: 100dvh; min-height: 520px; padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.app-header { flex: 0 0 auto; min-height: 64px; display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); align-items: center; gap: 16px; padding: 10px 12px 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-panel); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.brand-area, .auth-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #fff; border-radius: 13px; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 26%, transparent); }
.brand-copy { min-width: 0; display: grid; gap: 3px; }
.brand-copy strong { color: var(--text-strong); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-copy span { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-nav { display: inline-flex; justify-self: center; align-items: center; gap: 4px; max-width: 100%; padding: 4px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-control) 72%, transparent); }
.nav-item { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); color: var(--text-muted); background: transparent; white-space: nowrap; transition: background var(--ease), color var(--ease), box-shadow var(--ease); }
.nav-item:hover, .nav-item:focus-visible { color: var(--text-strong); background: var(--accent-soft); }
.nav-item.is-active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.button, .icon-button { border: 1px solid var(--border); color: var(--text); background: var(--surface-control); box-shadow: var(--shadow-control); backdrop-filter: var(--blur); transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease); }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border-radius: var(--radius-control); }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 13px; position: relative; }
.icon-button--circle { width: 42px; height: 42px; border-radius: 50%; border-color: color-mix(in srgb, var(--border-strong) 42%, var(--border)); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); box-shadow: var(--shadow-icon-glass), inset 0 1px 0 var(--highlight-icon-glass); }
.icon-button--circle:hover { box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.button:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 13%, transparent); }
.icon-button:hover { transform: translateY(-2px) scale(1.08); border-color: var(--border-strong); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 13%, transparent); }
.button:active { transform: scale(.98); }
.icon-button:active { transform: scale(.92); }
.button--glass { border-color: color-mix(in srgb, var(--border-strong) 42%, var(--border)); color: var(--text); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); box-shadow: var(--shadow-icon-glass), inset 0 1px 0 var(--highlight-icon-glass); }
.button--glass:hover { transform: translateY(-2px) scale(1.08); border-color: var(--border-strong); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 13%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.button--glass:active { transform: scale(.92); }
.button--primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.button--danger { color: #fff; border-color: transparent; background: var(--danger); }
.button--ghost { min-height: 32px; padding: 0 10px; color: var(--accent); background: transparent; box-shadow: none; }
.icon { display: block; }
.tooltip-portal { position: fixed; z-index: 60; pointer-events: none; width: max-content; max-width: min(240px, calc(100vw - 16px)); padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 7px; color: var(--text); background: var(--surface-modal); box-shadow: var(--shadow-control); font-size: 11px; font-weight: 600; line-height: 1.35; text-align: center; white-space: normal; -webkit-user-select: none; user-select: none; transform: translate(-50%, -100%); }
.tooltip-portal::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); background: var(--surface-modal); transform: translateX(-50%) rotate(45deg); }
.tooltip-portal[data-placement='below'] { transform: translate(-50%, 0); }
.tooltip-portal[data-placement='below']::after { top: -5px; bottom: auto; border-right: 0; border-bottom: 0; border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border-strong); }

.app-content { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 18px 34px; }
.page { min-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.page-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.page-heading__title-wrap { display: flex; align-items: center; gap: 10px; }
.page-heading h1 { margin: 0; color: var(--text-strong); font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; }
.page-heading__icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--border); border-radius: 12px; background: var(--accent-soft); }
.empty-panel { flex: 1 1 auto; min-height: 360px; display: grid; place-items: center; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-panel); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.empty-state { display: grid; justify-items: center; gap: 8px; max-width: 360px; text-align: center; }
.empty-state__icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--border); border-radius: 18px; background: var(--accent-soft); }
.empty-state__title { margin: 2px 0 0; color: var(--text-strong); font-weight: 700; }
.empty-state__hint { margin: 0; color: var(--text-muted); font-size: 13px; }
.watermark { position: fixed; z-index: 2; right: 24px; bottom: 15px; pointer-events: none; color: var(--text-muted); opacity: .5; font-size: 12px; letter-spacing: .08em; }

.image-card-section { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-panel); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.image-card-section__title { margin: 0; color: var(--text-strong); font-size: 16px; }
.image-card-section__hint { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.image-card-grid { display: grid; grid-template-columns: repeat(2, minmax(206px, 300px)); align-items: start; gap: 20px; }
.cards-showcase-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.cards-showcase-grid .image-card-section, .cards-showcase-grid .video-card-section { min-width: 0; align-content: start; }
.image-card { min-width: 0; overflow: visible; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface-icon-glass) 72%, transparent); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.image-card--portrait { width: min(214px, 100%); }
.image-card__media { position: relative; width: 100%; overflow: hidden; border-radius: calc(var(--radius-card) - 2px); background: color-mix(in srgb, var(--surface-control) 72%, transparent); aspect-ratio: 9 / 16; transform-origin: center; transition: transform 160ms cubic-bezier(.22, .61, .36, 1); }
.image-card__media--empty { background: #fff; }
.image-card--landscape .image-card__media { aspect-ratio: 16 / 9; }
.image-card__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
@media (hover: hover) and (pointer: fine) {
  .image-card__media:hover { z-index: 1; transform: scale(1.02); }
}
.image-card__footer { display: grid; gap: 8px; padding: 8px 4px 4px; }
.image-card__meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.image-card__title { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--text-strong); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.image-card__details { min-width: 0; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.image-card__detail { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--border-strong) 58%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-icon-glass) 78%, transparent); box-shadow: 0 4px 10px color-mix(in srgb, var(--shadow-icon-glass) 42%, transparent), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: blur(12px) saturate(135%); }
.image-card__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.image-card__actions .icon-button { flex: 0 0 42px; width: 42px; height: 42px; }

.video-card-section { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-panel); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.video-card-section__title { margin: 0; color: var(--text-strong); font-size: 16px; }
.video-card-section__hint { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.video-card-grid { display: grid; grid-template-columns: repeat(2, minmax(206px, 300px)); align-items: start; gap: 20px; }
.video-card { min-width: 0; overflow: visible; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface-icon-glass) 72%, transparent); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.video-card--portrait { width: min(214px, 100%); }
.video-card__media { position: relative; width: 100%; overflow: hidden; border-radius: calc(var(--radius-card) - 2px); background: color-mix(in srgb, var(--surface-control) 72%, transparent); aspect-ratio: 9 / 16; transform-origin: center; transition: transform 160ms cubic-bezier(.22, .61, .36, 1); }
.video-card__media--empty { background: #fff; }
.video-card--landscape .video-card__media { aspect-ratio: 16 / 9; }
.video-card__thumbnail { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
@media (hover: hover) and (pointer: fine) {
  .video-card__media:hover { z-index: 1; transform: scale(1.02); }
}
.video-card__footer { display: grid; gap: 8px; padding: 8px 4px 4px; }
.video-card__meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.video-card__title { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--text-strong); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.video-card__details { min-width: 0; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.video-card__detail { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--border-strong) 58%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-icon-glass) 78%, transparent); box-shadow: 0 4px 10px color-mix(in srgb, var(--shadow-icon-glass) 42%, transparent), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: blur(12px) saturate(135%); }
.video-card__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.video-card__actions .icon-button { flex: 0 0 42px; width: 42px; height: 42px; }

.component-section { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-panel); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.component-section--compact { display: block; padding: 14px 16px; background: color-mix(in srgb, var(--surface-icon-glass) 55%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: blur(24px) saturate(160%); }
.concept-workspace { width: 100%; max-width: 100%; display: grid; grid-template-columns: minmax(190px, .85fr) minmax(210px, 1fr) minmax(320px, 2.3fr); min-height: 276px; overflow: visible; border: 1px solid var(--border); border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface-icon-glass) 48%, transparent); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.concept-workspace > section { min-width: 0; padding: 15px; border-right: 1px solid var(--border); }
.concept-workspace > section:last-child { border-right: 0; }
.concept-workspace h2 { margin: 0 0 11px; color: var(--text-strong); font-size: 14px; }
.concept-workspace__style-list { display: grid; gap: 8px; max-height: 228px; padding: 10px 14px 28px; margin: -8px -10px -20px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent; }
.concept-workspace__style { width: 100%; justify-content: flex-start; }
.concept-workspace__style.is-selected, .concept-image-editor__choices .is-selected { border-color: var(--border-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-control); }
.concept-workspace__image-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px; }
.concept-workspace__preview { display: grid; place-items: center; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #fff; color: var(--text-muted); }
.concept-workspace__preview img { width: 100%; height: 100%; object-fit: contain; }
.concept-workspace__empty-image { font-size: 42px; opacity: .68; }
.concept-workspace__image-panel .button { justify-content: center; min-height: 36px; }
.concept-workspace__idea-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.concept-workspace__idea { width: 100%; min-height: 210px; resize: vertical; padding: 14px; border: 1px solid var(--border); border-radius: 18px; color: var(--text-strong); background: color-mix(in srgb, var(--surface-control) 66%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); font: inherit; font-size: 16px; line-height: 1.65; }
.concept-workspace__idea:focus { border-color: var(--border-strong); outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.modal.modal--concept-image-editor { width: min(1360px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); }
.modal--concept-image-editor .modal__body { flex: 1 1 auto; overflow: hidden; }
.concept-image-editor { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 20px; height: 100%; min-height: 0; }
.concept-image-editor__stage { position: relative; width: 100%; min-height: 0; align-self: center; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; touch-action: none; user-select: none; cursor: crosshair; }
.concept-image-editor__rectangle { position: absolute; box-sizing: border-box; border-style: solid; pointer-events: none; }
.concept-image-editor__text { position: absolute; color: #18243a; transform: translate(-50%, -50%); cursor: move; touch-action: none; white-space: pre; }
.concept-image-editor__text:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.concept-image-editor__tools { display: grid; align-content: start; gap: 8px; min-width: 0; overflow: visible; padding: 8px 12px 24px; margin: -8px -12px -24px; }
.concept-image-editor__tools strong { color: var(--text); font-size: 13px; }
.concept-image-editor__stroke-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.concept-image-editor__stroke-value { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.concept-image-editor__tools .slider-control { width: 100%; }
.concept-image-editor__choices { display: flex; gap: 7px; flex-wrap: wrap; }
.concept-image-editor__choices .icon-button.is-selected { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.concept-image-editor__choices .button { min-height: 34px; padding: 6px 9px; }
.concept-image-editor__text-input { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: 12px; color: var(--text-strong); background: color-mix(in srgb, var(--surface-control) 70%, transparent); font: inherit; }
.concept-image-editor__tools .select-control { width: 100%; }
.styles-showcase-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.styles-showcase-grid .component-section { min-width: 0; align-content: start; }
.modal-catalog-section { gap: 20px; }
.modal-catalog-section__intro { display: grid; gap: 6px; }
.modal-catalog-section__intro h2 { margin: 0; color: var(--text-strong); font-size: 16px; }
.modal-catalog-section__hint { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.modal-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.modal-catalog-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface-icon-glass) 58%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); }
.modal-catalog-card__icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--accent); border: 1px solid var(--border); border-radius: 14px; background: var(--accent-soft); }
.modal-catalog-card__title { margin: 2px 0 0; color: var(--text-strong); font-size: 15px; }
.modal-catalog-card__description { min-height: 44px; margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.65; }
.modal-catalog-card__structure { display: flex; align-items: center; min-height: 26px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--border-strong) 58%, transparent); border-radius: 9px; color: var(--text); background: color-mix(in srgb, var(--surface-icon-glass) 72%, transparent); font-size: 11px; }
.modal-catalog-card__status { min-height: 18px; margin: 0; color: var(--text-muted); font-size: 11px; }
.modal-catalog-card .button { margin-top: auto; }
.mapping-editor-section__title, .entry-box-section__title { margin: 0; color: var(--text-strong); font-size: 16px; }
.icon-strip { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-x: auto; padding: 14px 16px 18px; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent; }
.icon-strip .icon-button { flex: 0 0 44px; animation: icon-button-enter 360ms cubic-bezier(.22, .61, .36, 1) backwards; }
.button-strip { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-x: auto; padding: 14px 16px 18px; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent; }
.button-strip .button { flex: 0 0 auto; animation: icon-button-enter 360ms cubic-bezier(.22, .61, .36, 1) backwards; }
.button-strip .button, .button-strip .button * { -webkit-user-select: none; user-select: none; }
.button-strip .button--glass { min-height: 38px; padding: 0 13px; gap: 7px; border-radius: 15px; font-size: 13px; line-height: 1; }
.switch-strip { display: flex; align-items: center; gap: 18px; min-width: 0; overflow-x: auto; padding: 14px 16px 18px; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent; }
.switch-control { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 36px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text); background: color-mix(in srgb, var(--surface-icon-glass) 55%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); cursor: pointer; user-select: none; transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease); }
.switch-control__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-control__track { width: 36px; height: 20px; flex: 0 0 36px; position: relative; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); box-shadow: var(--shadow-icon-glass), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); }
.switch-control__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--border-strong) 44%, var(--border)); border-radius: 50%; background: var(--surface-modal); box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 16%, transparent); transition: transform var(--ease), background var(--ease), border-color var(--ease); }
.switch-control__label { color: var(--text); font-size: 12px; white-space: nowrap; }
.switch-strip .switch-control { animation: icon-button-enter 360ms cubic-bezier(.22, .61, .36, 1) backwards; }
.switch-control:hover { transform: translateY(-2px) scale(1.08); border-color: var(--border-strong); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.switch-control:active { transform: scale(.92); }
.switch-control:hover .switch-control__track { border-color: var(--border-strong); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.switch-control__input:focus-visible + .switch-control__track { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 2px; }
.switch-control__input:checked + .switch-control__track { border-color: var(--switch-on); background: var(--switch-on); }
.switch-control__input:checked + .switch-control__track .switch-control__thumb { transform: translateX(16px); border-color: var(--switch-on-thumb); background: var(--switch-on-thumb); box-shadow: 0 3px 8px rgba(0, 0, 0, .22); }
.select-strip { display: flex; align-items: center; gap: 18px; min-width: 0; overflow-x: auto; padding: 14px 16px 18px; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent; }
.select-control { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text); background: color-mix(in srgb, var(--surface-icon-glass) 55%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease); animation: icon-button-enter 360ms cubic-bezier(.22, .61, .36, 1) backwards; }
.select-control, .select-control *, .select-menu, .select-menu * { -webkit-user-select: none; user-select: none; }
.select-control__trigger { width: 100%; min-height: 34px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border: 0; border-radius: inherit; color: inherit; background: transparent; cursor: pointer; white-space: nowrap; }
.select-control__label { font-size: 12px; }
.select-control__chevron { display: grid; place-items: center; transition: transform var(--ease); }
.select-control[data-open='true'] { border-color: var(--border-strong); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.select-control[data-open='true'] .select-control__chevron { transform: rotate(180deg); }
.select-control:hover { transform: translateY(-1px) scale(1.02); border-color: var(--border-strong); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.select-control:active { transform: scale(.98); }
.select-menu { position: fixed; z-index: 55; display: grid; gap: 3px; padding: 6px; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: color-mix(in srgb, var(--surface-icon-glass) 55%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); transform-origin: top left; animation: select-menu-in 160ms cubic-bezier(.22, .61, .36, 1); }
.select-menu[data-placement='above'] { transform-origin: bottom left; }
.select-menu__option { min-height: 32px; display: flex; align-items: center; padding: 0 11px; border: 1px solid transparent; border-radius: 10px; color: var(--text); background: transparent; font-size: 12px; text-align: left; white-space: nowrap; transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease); transform-origin: left center; }
.select-menu__option:hover, .select-menu__option:focus-visible { color: var(--text-strong); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); border-color: var(--border); box-shadow: inset 0 1px 0 var(--highlight-icon-glass); transform: scale(1.04); }
.select-menu__option.is-selected { color: var(--text-strong); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); border-color: var(--border); box-shadow: inset 0 1px 0 var(--highlight-icon-glass); }
.select-menu__option.is-selected { box-shadow: inset 0 0 0 1px var(--border); }

@keyframes icon-button-enter {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes select-menu-in {
  from { opacity: 0; transform: translateY(-3px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.select-menu[data-placement='above'] { animation-name: select-menu-in-above; }
@keyframes select-menu-in-above {
  from { opacity: 0; transform: translateY(3px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes search-placeholder-char-bounce {
  0%, 100% { transform: translateY(0); }
  28% { transform: translateY(-3px); }
  52% { transform: translateY(0); }
  70% { transform: translateY(-1px); }
}
.search-strip { display: flex; align-items: center; min-width: 0; padding: 14px 16px 18px; }
.search-box { position: relative; width: min(360px, 100%); min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--text); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); cursor: text; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease), background var(--ease); animation: icon-button-enter 360ms cubic-bezier(.22, .61, .36, 1) backwards; }
.search-box:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.search-box:focus-within { transform: translateY(-1px) scale(1.01); border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-icon-glass) 76%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 12px 26px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.search-box__icon { display: grid; place-items: center; flex: 0 0 18px; color: var(--text-muted); transition: color var(--ease), transform var(--ease); }
.search-box:focus-within .search-box__icon { color: var(--text-strong); transform: scale(1.06); }
.search-box__placeholder { position: absolute; left: 40px; right: 13px; display: flex; overflow: hidden; color: var(--text-muted); font-size: 13px; line-height: 1; pointer-events: none; user-select: none; white-space: nowrap; text-overflow: ellipsis; transition: opacity var(--ease), transform var(--ease); }
.search-box__placeholder-char { display: inline-block; flex: 0 0 auto; }
.search-box:hover:not(:focus-within) .search-box__placeholder-char { animation: search-placeholder-char-bounce 620ms cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--char-index) * 45ms); }
.search-box:focus-within .search-box__placeholder, .search-box[data-has-value='true'] .search-box__placeholder { opacity: 0; }
.search-box__input { min-width: 0; flex: 1 1 auto; height: 38px; padding: 0; border: 0; outline: 0; color: var(--text-strong); background: transparent; font-size: 13px; }
.search-box__input::placeholder { color: transparent; }
.search-box__input::-webkit-search-cancel-button { cursor: pointer; }
.pagination-strip { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 14px 16px 18px; }
.pagination { display: grid; grid-template-columns: 36px minmax(86px, auto) 36px; align-items: center; gap: 12px; width: max-content; animation: icon-button-enter 360ms cubic-bezier(.22, .61, .36, 1) backwards; }
.pagination__button { width: 36px; height: 36px; }
.pagination__button:disabled { cursor: not-allowed; transform: none; box-shadow: var(--shadow-icon-glass); }
.pagination__select { width: 86px; min-width: 86px; height: 36px; min-height: 36px; }
.pagination__select .select-control__trigger { width: 100%; justify-content: space-between; }
.slider-strip { display: flex; align-items: center; min-width: 0; padding: 14px 16px 18px; }
.slider-control { position: relative; width: min(280px, 100%); min-height: 40px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--text); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); cursor: grab; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease), background var(--ease); animation: icon-button-enter 360ms cubic-bezier(.22, .61, .36, 1) backwards; }
.slider-control:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.slider-control:focus-within { transform: translateY(-1px) scale(1.01); border-color: var(--border-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 12px 26px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.slider-control:active { cursor: grabbing; }
.slider-control__track { position: relative; width: 100%; height: 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); box-shadow: inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); }
.slider-control__fill { position: absolute; inset: 0 auto 0 0; width: var(--slider-progress, 50%); border-radius: inherit; background: var(--slider-fill); transition: width 120ms cubic-bezier(.22, .61, .36, 1); }
.slider-control__thumb { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--switch-on-thumb); box-shadow: 0 4px 10px rgba(0, 0, 0, .22); pointer-events: none; transform: translate(-50%, -50%); transition: left 120ms cubic-bezier(.22, .61, .36, 1), transform var(--ease), box-shadow var(--ease); }
.slider-control:hover .slider-control__thumb { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.slider-control__value-tooltip { position: absolute; bottom: calc(100% + 8px); left: 14px; z-index: 2; min-width: 26px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text); background: color-mix(in srgb, var(--surface-icon-glass) 78%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: var(--blur); font-size: 11px; font-weight: 700; line-height: 1; text-align: center; pointer-events: none; -webkit-user-select: none; user-select: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--ease), transform var(--ease), left 120ms cubic-bezier(.22, .61, .36, 1); }
.slider-control__value-tooltip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface-icon-glass) 78%, transparent); transform: translateX(-50%) rotate(45deg); }
.slider-control:hover .slider-control__value-tooltip, .slider-control:focus-within .slider-control__value-tooltip, .slider-control[data-dragging='true'] .slider-control__value-tooltip { opacity: 1; transform: translate(-50%, 0); }
.slider-control__input { position: absolute; left: 14px; right: 14px; width: auto; height: 100%; margin: 0; opacity: 0; cursor: inherit; }

.mapping-editor { width: min(100%, 720px); min-width: 0; min-height: 420px; display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); overflow: visible; border: 1px solid var(--border); border-radius: calc(var(--radius-panel) + 2px); background: color-mix(in srgb, var(--surface-panel) 56%, transparent); box-shadow: var(--shadow-panel); backdrop-filter: blur(24px) saturate(155%); }
.mapping-editor__sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px; border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-top-left-radius: inherit; border-bottom-left-radius: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0; overflow: visible; background: color-mix(in srgb, var(--surface-panel) 34%, transparent); backdrop-filter: blur(20px) saturate(145%); }
.mapping-editor__add { width: calc(100% - 16px); min-height: 38px; justify-content: flex-start; margin: 0 8px 8px; padding: 0 13px; border-radius: 20px; font-size: 13px; }
.mapping-editor__list { min-width: 0; min-height: 0; display: grid; align-content: start; gap: 8px; overflow: auto; padding: 8px 8px 28px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent; }
.mapping-editor__item { width: 100%; min-width: 0; min-height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 3px; border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--surface-icon-glass) 44%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-control) 52%, transparent), inset 0 1px 0 color-mix(in srgb, var(--highlight-icon-glass) 72%, transparent); backdrop-filter: blur(18px) saturate(145%); transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.mapping-editor__item:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 11%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.mapping-editor__item.is-active { border-color: var(--border-strong); background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface-icon-glass)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 13%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.mapping-editor__item-select { min-width: 0; min-height: 30px; overflow: hidden; padding: 0 11px; border: 0; border-radius: 17px; color: var(--text); background: transparent; font-size: 13px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.mapping-editor__item-select:hover, .mapping-editor__item-select:focus, .mapping-editor__item.is-active .mapping-editor__item-select { color: var(--text-strong); background: transparent; }
.mapping-editor__item-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent); outline-offset: -2px; }
.mapping-editor__item-actions { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 30px; flex: 0 0 auto; }
.mapping-editor__item-actions .icon-button { width: 30px; height: 30px; border-radius: 50%; }
.mapping-editor__editor { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 10px; }
.mapping-editor__textarea { flex: 1 1 auto; width: 100%; min-height: 320px; resize: none; padding: 14px; border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: calc(var(--radius-card) + 2px); color: var(--text-strong); background: color-mix(in srgb, var(--surface-control) 58%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--highlight-icon-glass) 72%, transparent), 0 8px 22px color-mix(in srgb, var(--shadow-control) 56%, transparent); backdrop-filter: blur(18px) saturate(145%); font: inherit; font-size: 14px; line-height: 1.65; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); }
.mapping-editor__textarea:hover { border-color: var(--border-strong); }
.mapping-editor__textarea:focus { border-color: var(--border-strong); outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 11%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.mapping-editor__textarea:disabled { cursor: not-allowed; opacity: .62; }

.entry-box { width: min(100%, 720px); min-width: 0; height: 420px; min-height: 0; max-height: 420px; display: flex; flex-direction: column; overflow: visible; border: 1px solid var(--border); border-radius: calc(var(--radius-panel) + 2px); background: color-mix(in srgb, var(--surface-panel) 56%, transparent); box-shadow: var(--shadow-panel); backdrop-filter: blur(24px) saturate(155%); }
.entry-box__header { flex: 0 0 auto; display: flex; align-items: center; min-height: 52px; padding: 14px 18px 8px; }
.entry-box__title { margin: 0; color: var(--text-strong); font-size: 17px; }
.entry-box__body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 10px 10px; }
.entry-box__add { width: calc(100% - 16px); min-height: 38px; flex: 0 0 auto; justify-content: flex-start; margin: 0 8px 8px; padding: 0 13px; border-radius: 20px; font-size: 13px; }
.entry-box__add:hover { transform: translateY(-1px) scale(1.015); }
.entry-box__list { min-width: 0; min-height: 0; flex: 1 1 auto; display: grid; align-content: start; gap: 8px; overflow: auto; padding: 8px 8px 28px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent; }
.entry-box__item { width: 100%; min-width: 0; min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--surface-icon-glass) 44%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-control) 52%, transparent), inset 0 1px 0 color-mix(in srgb, var(--highlight-icon-glass) 72%, transparent); backdrop-filter: blur(18px) saturate(145%); transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.entry-box__item:hover { transform: translateY(-1px) scale(1.005); border-color: var(--border-strong); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 11%, transparent), inset 0 1px 0 var(--highlight-icon-glass); }
.entry-box__item-content { min-width: 0; display: grid; gap: 4px; }
.entry-box__item-title, .entry-box__item-summary { min-width: 0; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.entry-box__item-title { color: var(--text-strong); font-size: 15px; line-height: 1.25; }
.entry-box__item-summary { color: var(--text-muted); font-size: 12px; line-height: 1.3; }
.entry-box__item-actions { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 30px; flex: 0 0 auto; }
.entry-box__item-actions .icon-button { width: 30px; height: 30px; border-radius: 50%; }

.auth-shell { align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: min(430px, 100%); padding: 30px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface-panel); box-shadow: var(--shadow-panel); backdrop-filter: var(--blur); }
.auth-brand { margin-bottom: 28px; }
.auth-brand h1 { margin: 0; color: var(--text-strong); font-size: 17px; }
.auth-brand p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.auth-copy { display: grid; gap: 6px; margin-bottom: 20px; }
.auth-copy h2 { margin: 0; color: var(--text-strong); font-size: 24px; }
.auth-copy p { margin: 0; color: var(--text-muted); font-size: 13px; }
.auth-form { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field__label { color: var(--text); font-size: 13px; font-weight: 600; }
.input { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text-strong); background: var(--surface-control); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.input:focus { border-color: var(--border-strong); outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.form-message { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px; }
.auth-form .button { width: 100%; min-height: 46px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(9, 18, 31, .34); backdrop-filter: blur(8px); }
.modal { width: min(560px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 24px; background: var(--surface-modal); box-shadow: var(--shadow-modal); }
.modal--confirm { background: color-mix(in srgb, var(--surface-modal) 58%, transparent); backdrop-filter: var(--blur); }
.modal--rename { background: color-mix(in srgb, var(--surface-modal) 58%, transparent); backdrop-filter: var(--blur); }
.modal--input { width: min(1120px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); background: color-mix(in srgb, var(--surface-modal) 58%, transparent); backdrop-filter: var(--blur); }
.modal--input .modal__body { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; }
.modal--preset-input { width: min(1120px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); background: color-mix(in srgb, var(--surface-modal) 58%, transparent); backdrop-filter: var(--blur); }
.modal--preset-input .modal__body { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; }
.modal--preset-manager { width: min(1120px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); background: color-mix(in srgb, var(--surface-modal) 58%, transparent); backdrop-filter: var(--blur); }
.modal--preset-manager .modal__body { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; }
.modal--profile { width: min(760px, calc(100vw - 32px)); background: color-mix(in srgb, var(--surface-modal) 58%, transparent); backdrop-filter: var(--blur); }
.modal--profile .modal__body { background: color-mix(in srgb, var(--surface-panel) 28%, transparent); }
.modal--image-preview { position: relative; width: min(1382px, calc(100vw - 32px), calc((100dvh - 32px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: calc(100dvh - 32px); background: color-mix(in srgb, var(--surface-modal) 62%, transparent); backdrop-filter: var(--blur); }
.modal--image-preview .modal__header { position: absolute; z-index: 2; inset: 0 0 auto; pointer-events: none; border-bottom: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--surface-modal) 82%, transparent), transparent); }
.modal--image-preview .modal__header .modal__title, .modal--image-preview .modal__header .icon-button { pointer-events: auto; }
.modal--image-preview .modal__title { min-width: 0; max-width: calc(100% - 58px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal--image-preview .modal__body { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 0; }
.modal--image-preview .modal__footer { display: none; }
.image-preview-modal__content { flex: 0 0 auto; width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 9; }
.image-preview-modal__viewport { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; contain: paint; outline: 0; background: color-mix(in srgb, var(--surface-control) 52%, transparent); touch-action: none; cursor: grab; }
.image-preview-modal__viewport:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.image-preview-modal__image { --image-preview-zoom: 1; --image-preview-pan-x: 0px; --image-preview-pan-y: 0px; position: absolute; top: 50%; left: 50%; display: block; max-width: none; max-height: none; transform: translate3d(calc(-50% + var(--image-preview-pan-x)), calc(-50% + var(--image-preview-pan-y)), 0) scale(var(--image-preview-zoom)); transform-origin: center; user-select: none; pointer-events: none; cursor: grab; transition: transform 120ms ease; }
.image-preview-modal__viewport.is-dragging, .image-preview-modal__viewport.is-dragging .image-preview-modal__image { cursor: grabbing; }
.image-preview-modal__viewport.is-dragging .image-preview-modal__image { transition: none; }
.modal--video-preview { position: relative; width: min(1382px, calc(100vw - 32px), calc((100dvh - 32px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: calc(100dvh - 32px); background: color-mix(in srgb, var(--surface-modal) 62%, transparent); backdrop-filter: var(--blur); }
.modal--video-preview .modal__header { position: absolute; z-index: 2; inset: 0 0 auto; pointer-events: none; border-bottom: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--surface-modal) 82%, transparent), transparent); }
.modal--video-preview .modal__header .modal__title, .modal--video-preview .modal__header .icon-button { pointer-events: auto; }
.modal--video-preview .modal__title { min-width: 0; max-width: calc(100% - 58px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal--video-preview .modal__body { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 0; }
.modal--video-preview .modal__footer { display: none; }
.video-preview-modal__content { flex: 0 0 auto; width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 9; }
.video-preview-modal__viewport { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; contain: paint; outline: 0; background: color-mix(in srgb, var(--surface-control) 52%, transparent); }
.video-preview-modal__viewport:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.video-preview-modal__video { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; background: transparent; }
.modal__header, .modal__footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.modal__header { border-bottom: 1px solid var(--border); }
.modal__footer { justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); }
.modal__title { margin: 0; color: var(--text-strong); font-size: 18px; }
.modal__body { min-height: 0; overflow: auto; padding: 20px; }
.confirm-modal__content { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; }
.confirm-modal__icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); background: color-mix(in srgb, var(--surface-icon-glass) 68%, transparent); box-shadow: var(--shadow-icon-glass), inset 0 1px 0 var(--highlight-icon-glass); }
.confirm-modal__message { margin: 8px 0 0; color: var(--text); font-size: 13px; line-height: 1.6; }
.rename-modal__content { display: grid; gap: 9px; }
.rename-modal__label { color: var(--text); font-size: 13px; font-weight: 600; }
.rename-modal__input { min-height: 44px; background: color-mix(in srgb, var(--surface-control) 68%, transparent); backdrop-filter: blur(18px) saturate(145%); }
.rename-modal__message { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px; line-height: 1.5; }
.input-modal__content { flex: 1 1 auto; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; min-height: 0; }
.input-modal__label { color: var(--text); font-size: 13px; font-weight: 600; }
.input-modal__input { width: 100%; height: 100%; min-height: 0; padding: 14px; resize: none; overflow: auto; line-height: 1.65; background: color-mix(in srgb, var(--surface-control) 68%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: blur(18px) saturate(145%); }
.preset-input-modal__content { flex: 1 1 auto; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 9px; min-height: 0; }
.preset-input-modal__label { color: var(--text); font-size: 13px; font-weight: 600; }
.preset-input-modal__content .select-control { width: min(100%, 360px); }
.preset-input-modal__input { width: 100%; height: 100%; min-height: 0; padding: 14px; resize: none; overflow: auto; line-height: 1.65; background: color-mix(in srgb, var(--surface-control) 68%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: blur(18px) saturate(145%); }
.preset-manager-modal__content { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.preset-manager-modal__content .mapping-editor { width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; }
.profile-modal__form { display: grid; grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); gap: 18px; min-height: 244px; }
.profile-modal__avatar-panel { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: color-mix(in srgb, var(--surface-icon-glass) 56%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: blur(18px) saturate(145%); }
.profile-modal__avatar-preview { width: min(100%, 164px); height: auto; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 20px; object-fit: cover; background: var(--surface-control); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); }
.profile-modal__avatar-panel .button { width: 100%; }
.profile-modal__fields { display: grid; grid-template-rows: minmax(96px, 1fr) minmax(96px, 1fr) auto; gap: 14px; min-width: 0; }
.profile-modal__field-panel { align-content: start; padding: 15px; border: 1px solid var(--border); border-radius: 20px; background: color-mix(in srgb, var(--surface-icon-glass) 48%, transparent); box-shadow: var(--shadow-control), inset 0 1px 0 var(--highlight-icon-glass); backdrop-filter: blur(18px) saturate(145%); }
.profile-modal__file { display: none; }
.profile-modal__message { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px; line-height: 1.5; }
.toast { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 13px; color: var(--text-strong); background: var(--surface-modal); box-shadow: var(--shadow-modal); backdrop-filter: var(--blur); font-size: 13px; }
.toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }

@media (max-width: 980px) {
  .app-header { grid-template-columns: minmax(160px, 1fr) auto; }
  .app-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: flex-start; }
  .header-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 1120px) {
  .styles-showcase-grid { grid-template-columns: minmax(0, 1fr); }
  .cards-showcase-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .concept-workspace { grid-template-columns: minmax(0, 1fr); }
  .concept-workspace > section { border-right: 0; border-bottom: 1px solid var(--border); }
  .concept-workspace > section:last-child { border-bottom: 0; }
  .concept-workspace__style-list { max-height: 196px; }
  .concept-workspace__preview { width: min(100%, 420px); }
}
@media (max-width: 760px) {
  .mapping-editor { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mapping-editor__sidebar { border-right: 0; border-bottom: 1px solid var(--border); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .mapping-editor__list { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding-bottom: 28px; }
  .mapping-editor__item { min-width: min(230px, calc(100vw - 58px)); }
  .mapping-editor__editor { min-height: 360px; }
  .mapping-editor__textarea { min-height: 280px; }
  .entry-box { height: 320px; max-height: 320px; }
  .profile-modal__form { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .profile-modal__avatar-panel { flex-direction: row; justify-content: flex-start; min-height: 112px; }
  .profile-modal__avatar-preview { width: 80px; flex: 0 0 80px; }
  .profile-modal__avatar-panel .button { width: auto; flex: 1 1 auto; }
  .modal--input { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .modal--preset-input { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .modal--preset-manager { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
}
@media (pointer: coarse) {
  .mapping-editor__add { min-height: 50px; }
  .mapping-editor__item { min-height: 50px; }
  .mapping-editor__item-select { min-height: 42px; }
  .mapping-editor__item-actions { min-height: 42px; }
  .mapping-editor__item-actions .icon-button { width: 42px; height: 42px; }
  .entry-box__item { min-height: 82px; }
  .entry-box__item-actions { min-height: 42px; }
  .entry-box__item-actions .icon-button { width: 42px; height: 42px; }
}
@media (max-width: 620px) {
  .app-shell { padding: 10px 10px 16px; gap: 10px; }
  .app-header { padding: 8px; border-radius: 18px; }
  .brand-copy strong { font-size: 12px; }
  .brand-copy span { display: none; }
  .nav-item { padding: 0 11px; font-size: 12px; }
  .app-content { padding: 14px 14px 30px; }
  .empty-panel { min-height: 300px; }
  .image-card-section { padding: 14px; }
  .image-card-grid { grid-template-columns: minmax(0, 1fr); }
  .video-card-section { padding: 14px; }
  .video-card-grid { grid-template-columns: minmax(0, 1fr); }
  .component-section { padding: 14px; }
  .modal-catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .watermark { right: 12px; bottom: 9px; }
  .modal-backdrop { padding: 8px; }
  .modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .modal--image-preview { width: min(calc(100vw - 16px), calc((100dvh - 16px) * 16 / 9)); max-height: calc(100dvh - 16px); }
  .modal--video-preview { width: min(calc(100vw - 16px), calc((100dvh - 16px) * 16 / 9)); max-height: calc(100dvh - 16px); }
  .modal__footer { flex-wrap: wrap; }
  .modal__footer .button { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}