@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Italiana&display=swap");

:root {
    --text: #191a18;
    --muted: #696961;
    --line: rgba(25, 26, 24, 0.16);
    --soft: #f4f0e8;
    --panel: #fbf9f4;
    --danger: #975950;
    --dark: #191a18;
    --ivory: #f4f0e8;
    --paper: #fbf9f4;
    --gold: #a88754;
    --gold-dark: #806338;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--text);
    font-family: "DM Sans", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    background: var(--ivory);
    overflow: hidden;
}

button {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.designer-shell {
    display: grid;
    grid-template-rows: minmax(300px, 1fr) clamp(180px, 32vh, 370px);
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
}

.designer-shell.has-layout-resizer {
    grid-template-rows: minmax(300px, 1fr) 14px clamp(180px, 32vh, 370px);
}

body.is-resizing-layout,
body.is-resizing-layout * {
    cursor: ns-resize !important;
    user-select: none;
}

.stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}

.layout-resize-handle {
    position: relative;
    z-index: 8;
    display: grid;
    place-items: center;
    min-height: 14px;
    border-top: 1px solid #e5e8ee;
    border-bottom: 1px solid #e5e8ee;
    background: #ffffff;
    cursor: ns-resize;
    touch-action: none;
}

.layout-resize-handle::before {
    content: "";
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: #d6dbe4;
    transition: height 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.layout-resize-handle:hover::before,
.layout-resize-handle:focus-visible::before,
.layout-resize-handle.is-dragging::before {
    height: 4px;
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(226, 34, 42, 0.08);
}

.layout-resize-handle:focus-visible {
    outline: 2px solid rgba(226, 34, 42, 0.28);
    outline-offset: -2px;
}

.topbar {
    position: absolute;
    z-index: 5;
    inset: 12px 16px auto 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.ghost-button,
.summary {
    pointer-events: auto;
    border: 1px solid #d8dce3;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 22px rgba(16, 24, 40, 0.08);
}

.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    color: #2d3440;
    text-decoration: none;
}

.summary {
    display: flex;
    gap: 16px;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    color: #4b5563;
    font-size: 14px;
}

.summary span {
    white-space: nowrap;
}

.summary strong {
    color: var(--text);
}

.summary em {
    margin-left: 3px;
    color: var(--muted);
    font-style: normal;
}

.workbench {
    display: grid;
    place-items: center;
    min-height: 100%;
    padding: 52px 20px 58px;
}

.plate {
    position: relative;
    width: min(52vh, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #eceef2;
    box-shadow:
        inset 0 0 0 10px rgba(20, 24, 32, 0.025),
        0 18px 70px rgba(20, 24, 32, 0.08);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.bracelet-track {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--track-diameter, 44) * 1px);
    height: calc(var(--track-diameter, 44) * 1px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px dashed #d9dde4;
    transition:
        width 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
        height 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bracelet {
    position: absolute;
    inset: 0;
    touch-action: none;
}

.bracelet.is-rotating-bracelet {
    cursor: grabbing;
}

.bracelet.is-ring-mode.is-rotating-bracelet .bead,
.bracelet.is-ring-mode .bead.is-rotating {
    transition: none;
}

.bracelet.is-ring-mode.is-rotating-bracelet .bead-visual,
.bracelet.is-ring-mode .bead.is-rotating .bead-visual {
    transition: none;
}

.bracelet.is-ring-mode .bead {
    transition:
        left 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
        top 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bracelet.is-scatter-mode .bead {
    transition: filter 160ms ease, outline-color 160ms ease;
}

.empty-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    transform: translate(-50%, -50%);
    color: #a2a9b4;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    pointer-events: none;
}

.bead {
    position: absolute;
    left: calc(var(--x) * 1px);
    top: calc(var(--y) * 1px);
    width: calc(var(--display-width, 44) * 1px);
    height: calc(var(--display-height, 44) * 1px);
    padding: 0;
    border: 0;
    border-radius: 0;
    transform:
        translate(-50%, -50%)
        translateY(var(--lift, 0px))
        scale(var(--scale, 1));
    background: transparent;
    overflow: visible;
    cursor: grab;
    touch-action: none;
    isolation: isolate;
    -webkit-user-select: none;
    will-change: left, top, transform;
}

.bead.is-pendant {
    z-index: 2;
    transform:
        translateY(var(--lift, 0px))
        scale(var(--scale, 1));
}

.bead.is-overlapping-accessory {
    z-index: 1;
}

.bead::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        -2px 5px 6px rgba(78, 64, 43, 0.32),
        -8px 16px 23px rgba(110, 91, 59, 0.18);
    content: "";
    pointer-events: none;
}

.bead-visual {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    transform: rotate(calc(var(--rotation) * 1deg));
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bead.is-pendant .bead-visual {
    transform-origin:
        calc(var(--pendant-anchor-x, 50) * 1px)
        calc(var(--pendant-anchor-y, 0) * 1px);
}

.bead:not(.has-image) .bead-visual {
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9) 0 9%, transparent 10%),
        radial-gradient(circle at 68% 74%, rgba(120, 28, 58, 0.18), transparent 36%),
        var(--color);
}

.bead.has-image {
    box-shadow: none;
    filter:
        drop-shadow(-2px 5px 4px rgba(78, 64, 43, 0.28))
        drop-shadow(-6px 12px 12px rgba(110, 91, 59, 0.12));
}

.bead.has-image::before {
    display: none;
}

.bead img {
    position: absolute;
    left: calc(var(--image-left, 0) * 1px);
    top: calc(var(--image-top, 0) * 1px);
    width: calc(var(--image-width, var(--display-width, 44)) * 1px);
    height: calc(var(--image-height, var(--display-height, 44)) * 1px);
    display: block;
    border-radius: 0;
    object-fit: contain;
    pointer-events: none;
}

.bead.is-selected {
    --lift: -5px;
    --scale: 1.12;
    z-index: 3;
}

.bead.is-selected::before {
    box-shadow:
        -3px 10px 10px rgba(82, 69, 47, 0.2),
        -9px 21px 24px rgba(112, 94, 62, 0.11);
}

.bead.is-dragging {
    --lift: 0px;
    --scale: 1.15;
    cursor: grabbing;
    box-shadow:
        0 22px 34px rgba(15, 23, 42, 0.28),
        0 10px 16px rgba(15, 23, 42, 0.18),
        0 1px 3px rgba(255, 255, 255, 0.55) inset;
    z-index: 5;
}

.bead.is-drag-source {
    opacity: 0;
}

.bead.bead-drag-proxy {
    position: fixed;
    left: calc(var(--proxy-x, 0) * 1px);
    top: calc(var(--proxy-y, 0) * 1px);
    z-index: 30;
    opacity: 1;
    pointer-events: none;
    transition: none;
}

.bead.has-image.is-dragging,
.bead.has-image.is-rotating {
    box-shadow: none;
    filter: none;
}

.bead.is-rotating {
    --lift: -8px;
    --scale: 1.15;
    cursor: crosshair;
    box-shadow:
        0 22px 34px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(148, 163, 184, 0.22),
        0 1px 3px rgba(255, 255, 255, 0.55) inset;
}

.actions {
    position: absolute;
    z-index: 5;
    left: 16px;
    right: 16px;
    bottom: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.actions .dark-button {
    margin-left: 0;
}

.icon-button,
.primary-button,
.dark-button,
.finish-button {
    height: 42px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
}

.icon-button {
    width: 42px;
    border: 1px solid #dce1e8;
    background: #ffffff;
    color: #222833;
    font-size: 20px;
}

.primary-button {
    padding: 0 22px;
    background: var(--danger);
    color: #ffffff;
    font-weight: 700;
}

.dark-button {
    padding: 0 24px;
    background: var(--dark);
    color: #ffffff;
    font-weight: 700;
}

.finish-button {
    padding: 0 24px;
    border: 1px solid #dce1e8;
    background: #ffffff;
    color: #222833;
}

.status {
    display: flex;
    align-items: center;
    min-width: 220px;
    max-width: 420px;
    height: 42px;
    margin-left: auto;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid #e3e6ec;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #5b6573;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.07);
}

.status.is-warning {
    border-color: rgba(151, 89, 80, 0.46);
    background: rgba(255, 248, 245, 0.96);
    color: #8f4f46;
    box-shadow: 0 8px 22px rgba(151, 89, 80, 0.12);
}

.catalog {
    position: relative;
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: #fafbfc;
}

.catalog-content {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.catalog-discovery {
    display: grid;
    grid-template-columns: minmax(260px, 430px) auto 1fr;
    gap: 10px;
    align-items: center;
    min-height: 64px;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(25, 26, 24, 0.1);
    background: rgba(251, 249, 244, 0.94);
}

.catalog-search {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(25, 26, 24, 0.15);
    border-radius: 7px;
    background: #fbf9f4;
    color: var(--muted);
}

.catalog-search > span {
    font-family: Georgia, serif;
    font-size: 23px;
    transform: translateY(-1px);
}

.catalog-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.tag-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(25, 26, 24, 0.15);
    border-radius: 7px;
    background: #fbf9f4;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.tag-filter-toggle[aria-expanded="true"] {
    border-color: var(--gold);
    background: rgba(168, 135, 84, 0.11);
    color: var(--gold-dark);
}

.tag-filter-toggle span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-size: 10px;
}

.catalog-result-summary {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    text-align: right;
}

.active-tag-filters {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 8px 24px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(25, 26, 24, 0.08);
    background: rgba(244, 240, 232, 0.6);
}

.active-tag-filters[hidden] {
    display: none;
}

.active-tag-filters button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid rgba(168, 135, 84, 0.35);
    border-radius: 999px;
    background: #fbf9f4;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.active-tag-filters b {
    font-size: 14px;
    font-weight: 400;
}

.tag-filter-panel {
    max-height: min(390px, 55vh);
    overflow: auto;
    border-bottom: 1px solid rgba(25, 26, 24, 0.12);
    background: #fbf9f4;
    box-shadow: 0 18px 35px rgba(74, 58, 33, 0.09);
}

.tag-filter-panel[hidden] {
    display: none;
}

.tag-filter-panel > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 24px 12px;
}

.tag-filter-panel > header p {
    margin: 0 0 4px;
    color: var(--gold-dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.tag-filter-panel > header h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", Georgia, serif;
    color: var(--text);
    font-size: 25px;
    font-weight: 400;
}

.tag-filter-panel > header button {
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
}

.tag-filter-groups {
    display: grid;
    gap: 0;
}

.tag-filter-group {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 18px;
    padding: 12px 24px;
    border-top: 1px solid rgba(25, 26, 24, 0.07);
}

.tag-filter-group h3 {
    margin: 7px 0 0;
    color: var(--text);
    font-size: 11px;
}

.tag-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag-filter-options button {
    min-height: 29px;
    padding: 5px 10px;
    border: 1px solid rgba(25, 26, 24, 0.13);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
}

.tag-filter-options button[aria-pressed="true"] {
    border-color: var(--gold);
    background: var(--gold);
    color: #fff;
}

.tag-filter-disclaimer {
    margin: 0;
    padding: 13px 24px 16px;
    border-top: 1px solid rgba(25, 26, 24, 0.07);
    color: var(--muted);
    font-size: 9px;
    line-height: 1.6;
}

.catalog-empty {
    position: absolute;
    inset: 64px 0 0;
    z-index: 1;
    display: grid;
    place-content: center;
    gap: 7px;
    background: #f8f5ef;
    color: var(--muted);
    text-align: center;
}

.catalog-empty[hidden] {
    display: none;
}

.catalog-empty strong {
    color: var(--text);
    font-family: "Songti SC", "STSong", Georgia, serif;
    font-size: 24px;
    font-weight: 400;
}

.catalog-empty span {
    font-size: 11px;
}

.delete-drop-hint {
    position: absolute;
    z-index: 4;
    inset: 10px 16px;
    display: grid;
    place-items: center;
    border: 2px dashed rgba(226, 34, 42, 0.46);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--danger);
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition:
        opacity 160ms ease,
        transform 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

.delete-drop-hint span {
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

.catalog.is-delete-armed .delete-drop-hint {
    opacity: 1;
    transform: translateY(0);
}

.catalog.is-delete-hot .delete-drop-hint {
    border-color: var(--danger);
    background: rgba(226, 34, 42, 0.08);
}

.catalog.is-delete-armed .bead-grid {
    filter: saturate(0.72);
}

.category-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    height: 100%;
    padding: 18px 10px 18px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-right: 1px solid #e7e9ee;
    background: #ffffff;
}

.category-filter::-webkit-scrollbar {
    width: 8px;
}

.category-filter::-webkit-scrollbar-track {
    background: transparent;
}

.category-filter::-webkit-scrollbar-thumb {
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #c8ced8;
}

.category-filter::-webkit-scrollbar-thumb:hover {
    background: #aeb6c4;
}

.category-filter-button {
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid #dce1e8;
    border-radius: 8px;
    background: #ffffff;
    color: #344054;
    font-weight: 700;
    text-align: center;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.category-filter-button[aria-pressed="true"] {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.bead-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 16px;
    align-items: start;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    padding: 18px 24px 24px;
}

.bead-card-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 20px;
}

.bead-card-tags span {
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(168, 135, 84, 0.1);
    color: var(--gold-dark);
    font-size: 9px;
    line-height: 1.2;
}

.bead-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto;
    min-height: 232px;
    border: 1px solid #e8ebf0;
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* Author styles set bead cards to grid, so explicitly preserve the hidden state
   used by catalog filtering instead of relying on the browser default rule. */
.bead-card[hidden] {
    display: none !important;
}

.designer-shell {
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

body.order-summary-open .designer-shell {
    filter: blur(6px);
    opacity: 0.72;
    transform: scale(0.995);
    pointer-events: none;
    user-select: none;
}

.order-summary-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(244, 246, 248, 0.44);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 180ms ease;
}

.order-summary-overlay[hidden] {
    display: none;
}

.order-summary-overlay.is-visible {
    opacity: 1;
}

.order-summary-frame {
    width: min(780px, calc(100vw - 32px));
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2);
}

@media (max-width: 640px) {
    .order-summary-overlay {
        padding: 8px;
    }

    .order-summary-frame {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
        border-radius: 10px;
    }
}

.bead-card-main {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 10px 8px 6px;
    border: 0;
    background: transparent;
    color: inherit;
}

.bead-preview-frame {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
}

.bead-card:hover {
    transform: translateY(-2px);
    border-color: #cfd5df;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.bead-sample {
    position: relative;
    width: calc(var(--sample-width, 66) * 1px);
    height: calc(var(--sample-height, 66) * 1px);
    overflow: hidden;
    filter: drop-shadow(0 8px 10px rgba(15, 23, 42, 0.14));
}

.bead-size-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 8px 12px;
}

.bead-size-button {
    min-width: 42px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid #d8dde6;
    border-radius: 7px;
    background: #ffffff;
    color: #475467;
    font-size: 12px;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.bead-size-button:hover {
    border-color: #f08f94;
}

.bead-size-button[aria-pressed="true"] {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
    font-weight: 700;
}

.bead-sample img {
    position: absolute;
    left: calc(var(--image-left, 0) * 1px);
    top: calc(var(--image-top, 0) * 1px);
    width: calc(var(--image-width, var(--sample-width, 66)) * 1px);
    height: calc(var(--image-height, var(--sample-height, 66)) * 1px);
    display: block;
    object-fit: contain;
}

.bead-name {
    margin-top: 2px;
    padding: 0 10px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.25;
    text-align: center;
    word-break: keep-all;
}

/* English material names are often two or three lines long. Keep every card in
   the same grid row aligned and reserve consistent text/tag space so an
   individual card cannot grow into the row below. */
html[data-cirava-language="en"] .bead-grid {
    align-items: stretch;
}

html[data-cirava-language="en"] .bead-card {
    grid-template-rows: minmax(min-content, 1fr) max-content max-content;
    align-content: stretch;
    min-height: 236px;
}

html[data-cirava-language="en"] .bead-name {
    display: grid;
    min-height: 2.4em;
    align-items: end;
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: normal;
}

html[data-cirava-language="en"] .bead-card-tags {
    width: calc(100% - 12px);
    min-height: 20px;
    max-height: 20px;
    align-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

html[data-cirava-language="en"] .bead-card-tags span {
    flex: 0 0 auto;
    padding-right: 5px;
    padding-left: 5px;
    white-space: nowrap;
}

html[data-cirava-language="en"] .bead-size-options {
    min-height: 32px;
    margin-bottom: 6px;
}

html[data-cirava-language="en"] .bead-stock-hint:empty {
    display: none;
}

.bead-meta {
    color: #5b6573;
    font-size: 13px;
}

@media (max-width: 900px) {
    .designer-shell {
        grid-template-rows: minmax(280px, 1fr) clamp(180px, 36vh, 340px);
    }

    .designer-shell.has-layout-resizer {
        grid-template-rows: minmax(280px, 1fr) 14px clamp(180px, 36vh, 340px);
    }

    .workbench {
        padding: 50px 14px 58px;
    }

    .plate {
        width: min(70vw, 430px);
    }

    .bead-grid {
        grid-template-columns: repeat(3, minmax(112px, 1fr));
        padding-inline: 14px;
    }

    .catalog {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .category-filter {
        padding: 14px 8px;
    }

    .actions {
        left: 10px;
        right: 10px;
    }

    .status {
        order: -1;
        flex-basis: 100%;
        max-width: none;
        margin-left: 0;
    }

    .primary-button,
    .dark-button,
    .finish-button {
        padding: 0 13px;
    }
}

@media (max-width: 560px) {
    .designer-shell {
        grid-template-rows: minmax(260px, 1fr) clamp(170px, 36vh, 292px);
    }

    .designer-shell.has-layout-resizer {
        grid-template-rows: minmax(260px, 1fr) 14px clamp(170px, 36vh, 292px);
    }

    .topbar {
        inset: 8px 8px auto;
    }

    .summary {
        gap: 8px;
        padding: 0 10px;
        font-size: 12px;
    }

    .workbench {
        padding: 50px 10px 58px;
    }

    .plate {
        width: min(54vw, 208px);
    }

    .actions {
        gap: 6px;
    }

    .icon-button,
    .primary-button,
    .dark-button,
    .finish-button {
        height: 38px;
    }

    .icon-button {
        width: 38px;
    }

    .primary-button,
    .dark-button,
    .finish-button {
        flex: 1 1 88px;
        padding: 0 9px;
        font-size: 13px;
    }

    .status {
        min-width: 0;
        height: 36px;
        font-size: 12px;
    }

    .bead-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 12px;
    }

    .catalog {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .category-filter {
        gap: 6px;
        padding: 12px 6px;
    }

    .category-filter-button {
        min-height: 38px;
        padding: 0 6px;
        font-size: 12px;
    }
}

@media (max-height: 640px) {
    .designer-shell {
        grid-template-rows: minmax(0, 1fr) clamp(136px, 30vh, 210px);
    }

    .designer-shell.has-layout-resizer {
        grid-template-rows: minmax(0, 1fr) 14px clamp(136px, 30vh, 210px);
    }

    .workbench {
        padding-top: 44px;
        padding-bottom: 52px;
    }

    .plate {
        width: min(42vh, 380px);
    }

    .bead-grid {
        gap: 10px;
        padding: 10px 16px 16px;
    }

    .bead-card {
        min-height: 128px;
    }

    .category-filter {
        gap: 6px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ONEVEI workbench visual system */
.designer-shell {
    --workbench-bg: #f4f0e8;
    --workbench-light: rgba(255, 255, 255, 0.72);
    --workbench-shadow: rgba(108, 90, 55, 0.14);
    --tray-fill: rgba(255, 253, 247, 0.76);
    --tray-rim: rgba(161, 137, 91, 0.28);
    --tray-shadow: rgba(76, 59, 33, 0.18);
    background: var(--workbench-bg);
}

.designer-shell[data-workbench-theme="linen"] {
    --workbench-bg: #e9e3d9;
    --workbench-light: rgba(255, 255, 255, 0.5);
    --workbench-shadow: rgba(92, 82, 67, 0.18);
    --tray-fill: rgba(253, 253, 249, 0.42);
    --tray-rim: rgba(255, 255, 255, 0.78);
    --tray-shadow: rgba(91, 83, 72, 0.18);
}

.stage {
    isolation: isolate;
    border-bottom-color: rgba(25, 26, 24, 0.12);
    background: var(--workbench-bg);
}

.stage::before,
.stage::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
}

.stage::before {
    background:
        radial-gradient(circle at 14% 18%, var(--workbench-light), transparent 28%),
        radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.36), transparent 24%),
        linear-gradient(125deg, transparent 0 20%, rgba(168, 135, 84, 0.05) 20.2% 20.6%, transparent 21% 100%);
}

.stage::after {
    opacity: 0.42;
    background-image: repeating-linear-gradient(90deg, rgba(92, 76, 51, 0.025) 0 1px, transparent 1px 5px);
    mix-blend-mode: multiply;
}

.designer-shell[data-workbench-theme="linen"] .stage::after {
    opacity: 0.7;
    background-image:
        repeating-linear-gradient(90deg, rgba(83, 74, 63, 0.045) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 5px);
}

.layout-resize-handle {
    border-color: rgba(25, 26, 24, 0.12);
    background: var(--paper);
}

.layout-resize-handle::before {
    height: 2px;
    background: rgba(168, 135, 84, 0.42);
}

.layout-resize-handle:hover::before,
.layout-resize-handle:focus-visible::before,
.layout-resize-handle.is-dragging::before {
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(168, 135, 84, 0.12);
}

.topbar {
    inset: 16px 24px auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.brand-back,
.studio-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}

.studio-tools { justify-content: flex-end; }

.guide-toggle,
.user-guide {
    position: absolute;
    z-index: 4;
}

.guide-toggle {
    top: 92px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(25, 26, 24, 0.15);
    border-radius: 9px;
    background: rgba(251, 249, 244, 0.86);
    box-shadow: 0 10px 26px rgba(74, 58, 33, 0.1);
    color: var(--text);
    font-size: 12px;
    backdrop-filter: blur(10px);
}

.guide-toggle span {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.user-guide {
    top: 88px;
    bottom: 76px;
    left: 24px;
    display: flex;
    flex-direction: column;
    width: clamp(280px, 20vw, 340px);
    padding: 20px;
    border: 1px solid rgba(25, 26, 24, 0.14);
    border-radius: 14px;
    background: rgba(251, 249, 244, 0.92);
    box-shadow: 0 22px 48px rgba(74, 58, 33, 0.14);
    color: var(--text);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-100% - 28px));
    transition: transform 260ms var(--ease), opacity 180ms ease;
    backdrop-filter: blur(12px);
}

.user-guide.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.guide-header,
.guide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.guide-eyebrow,
.guide-index {
    margin: 0;
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.guide-header h2 {
    margin: 4px 0 0;
    font-family: "Italiana", "Times New Roman", serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.guide-dismiss,
.guide-previous,
.guide-next,
.guide-step {
    background: transparent;
    color: var(--muted);
    font-size: 12px;
}

.guide-dismiss {
    padding: 6px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.guide-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 20px 0 18px;
    overflow: hidden;
    border: 1px solid rgba(25, 26, 24, 0.12);
    border-radius: 9px;
}

.guide-step {
    display: grid;
    min-height: 48px;
    place-content: center;
    gap: 2px;
    border-right: 1px solid rgba(25, 26, 24, 0.12);
    transition: background-color 180ms ease, color 180ms ease;
}

.guide-step:last-child { border-right: 0; }
.guide-step strong { color: inherit; font-size: 12px; }
.guide-step span { font-size: 10px; }
.guide-step.is-active { background: var(--gold); color: #fff; }

.guide-panels {
    flex: 1;
    min-height: 0;
    padding-right: 4px;
    overflow-y: auto;
}
.guide-panel { animation: guide-panel-in 200ms var(--ease); }
.guide-panel h3 { margin: 8px 0 10px; color: var(--text); font-size: 18px; font-weight: 600; }
.guide-panel > p:not(.guide-index) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.measurement-guide-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    margin: 2px 0 12px;
    padding: 0 10px 0 12px;
    border: 1px solid rgba(168, 135, 84, .45);
    border-radius: 7px;
    background: rgba(168, 135, 84, .06);
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 600;
}

.bead-favorite-button {
    position: absolute;
    z-index: 2;
    top: 11px;
    right: 11px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(112, 100, 80, 0.58);
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.bead-favorite-button svg {
    width: 19px;
    height: 19px;
    overflow: visible;
}

.bead-favorite-button path {
    fill: transparent;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
    transition: fill 160ms ease, stroke 160ms ease;
}

.bead-favorite-button:hover {
    color: var(--gold-dark);
    background: rgba(168, 135, 84, 0.1);
    transform: translateY(-1px);
}

.bead-favorite-button[aria-pressed="true"] {
    background: rgba(168, 135, 84, 0.12);
    color: var(--gold-dark);
}

.bead-favorite-button[aria-pressed="true"] path {
    fill: currentColor;
    stroke-width: 1.25;
}

.bead-size-options.is-fixed-component {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 600;
}

.measurement-guide-trigger i { font-style: normal; font-size: 16px; font-weight: 400; }
.measurement-guide-trigger:hover { border-color: var(--gold); background: rgba(168, 135, 84, .12); }

.guide-tip {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding: 11px 12px;
    border-left: 2px solid var(--gold);
    background: rgba(168, 135, 84, 0.08);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.guide-tip strong { color: var(--gold-dark); font-size: 11px; }

.guide-footer {
    flex: 0 0 auto;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(25, 26, 24, 0.1);
}

.guide-previous,
.guide-next {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 7px;
}

.guide-previous:disabled { cursor: default; opacity: 0.38; }
.guide-next { background: var(--gold); color: #fff; font-weight: 600; }

.guide-toggle:hover,
.guide-dismiss:hover,
.guide-step:hover:not(.is-active),
.guide-previous:not(:disabled):hover { color: var(--text); }
.guide-next:hover { background: var(--gold-dark); }

@keyframes guide-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.measurement-guide-open {
    overflow: hidden;
    touch-action: none;
}

.measurement-guide-open .catalog,
.measurement-guide-open .topbar,
.measurement-guide-open .user-guide,
.measurement-guide-open .actions {
    pointer-events: none;
}

.measurement-guide-open .measurement-guide-dialog {
    display: grid;
    pointer-events: auto;
}

.measurement-guide-open .measurement-guide-card,
.measurement-guide-open .measurement-guide-backdrop,
.measurement-guide-open .measurement-guide-close,
.measurement-guide-open .measurement-guide-tab,
.measurement-guide-open .measurement-guide-footer button {
    pointer-events: auto;
}

.measurement-guide-open .measurement-guide-dialog[hidden] {
    display: none;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-panel[hidden] {
    display: none;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-panel.is-active {
    display: flex;
}

.measurement-guide-open .measurement-guide-dialog.is-visible .measurement-guide-panel.is-active {
    animation: measurement-panel-in 260ms var(--ease);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-panel {
    overflow: auto;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-sidebar {
    overflow: auto;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-stage {
    overflow: hidden;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-card {
    overflow: hidden;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-backdrop {
    inset: 0;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer button:hover {
    transform: translateY(-1px);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.measurement-guide-open .measurement-guide-dialog .measurement-table-wrap th,
.measurement-guide-open .measurement-guide-dialog .measurement-table-wrap td {
    white-space: nowrap;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-card {
    opacity: 0;
    transform: translateY(16px) scale(.985);
}

.measurement-guide-open .measurement-guide-dialog.is-visible .measurement-guide-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-backdrop {
    opacity: 0;
}

.measurement-guide-open .measurement-guide-dialog.is-visible .measurement-guide-backdrop {
    opacity: 1;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-card,
.measurement-guide-open .measurement-guide-dialog .measurement-guide-backdrop {
    transition: opacity 180ms ease, transform 240ms var(--ease);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-backdrop {
    transition: opacity 180ms ease;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-tab:hover,
.measurement-guide-open .measurement-guide-dialog .measurement-guide-tab.is-active {
    color: var(--gold-dark);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-tab.is-active {
    background: rgba(168, 135, 84, .09);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer button:hover {
    background: var(--gold-dark);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-close:hover {
    color: var(--gold-dark);
    background: rgba(168, 135, 84, .1);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-tab.is-active b {
    color: var(--gold-dark);
}

.measurement-guide-open .measurement-guide-dialog .measurement-fit-note dl,
.measurement-guide-open .measurement-guide-dialog .measurement-method-layout ol,
.measurement-guide-open .measurement-guide-dialog .measurement-panel-note {
    margin-bottom: 0;
}

.measurement-guide-open .measurement-guide-dialog .measurement-bead-figures figure {
    margin: 0;
}

.measurement-guide-open .measurement-guide-dialog .measurement-table-wrap table {
    width: 100%;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-kicker {
    white-space: nowrap;
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-card { z-index: 1; }
.measurement-guide-open .measurement-guide-dialog .measurement-guide-close { z-index: 2; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer { z-index: 1; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-card { position: relative; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-close { position: absolute; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer { position: relative; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-panel { min-height: 0; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-stage { min-width: 0; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-sidebar { min-width: 0; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer { min-width: 0; }

.measurement-guide-open .measurement-guide-dialog .measurement-method-layout,
.measurement-guide-open .measurement-guide-dialog .measurement-bead-figures,
.measurement-guide-open .measurement-guide-dialog .measurement-table-wrap,
.measurement-guide-open .measurement-guide-dialog .measurement-panel-heading,
.measurement-guide-open .measurement-guide-dialog .measurement-fit-note { min-width: 0; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer span { min-width: 0; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer button { flex: 0 0 auto; }

.measurement-guide-open .measurement-guide-dialog .measurement-method-layout figure,
.measurement-guide-open .measurement-guide-dialog .measurement-method-layout ol,
.measurement-guide-open .measurement-guide-dialog .measurement-bead-figures figure { min-width: 0; }

.measurement-guide-open .measurement-guide-dialog .measurement-table-wrap { overflow-x: auto; }

.measurement-guide-open .measurement-guide-dialog .measurement-reference-panel,
.measurement-guide-open .measurement-guide-dialog .measurement-beads-panel,
.measurement-guide-open .measurement-guide-dialog .measurement-method-layout { overflow: auto; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-card { display: grid; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-sidebar,
.measurement-guide-open .measurement-guide-dialog .measurement-guide-stage { display: flex; flex-direction: column; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-panel { flex: 1; flex-direction: column; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer { display: flex; align-items: center; justify-content: space-between; }

.measurement-guide-open .measurement-guide-dialog .measurement-method-layout,
.measurement-guide-open .measurement-guide-dialog .measurement-bead-figures,
.measurement-guide-open .measurement-guide-dialog .measurement-guide-tabs { display: grid; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-tab { display: flex; align-items: center; }

.measurement-guide-open .measurement-guide-dialog .measurement-fit-note dl,
.measurement-guide-open .measurement-guide-dialog .measurement-fit-note dl div,
.measurement-guide-open .measurement-guide-dialog .measurement-method-layout li,
.measurement-guide-open .measurement-guide-dialog .measurement-bead-figures figure,
.measurement-guide-open .measurement-guide-dialog .measurement-panel-heading { display: grid; }

.measurement-guide-open .measurement-guide-dialog .measurement-method-layout figure { display: grid; place-items: center; }

.measurement-guide-open .measurement-guide-dialog .measurement-bead-figures figcaption { display: flex; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-tab b { flex: 0 0 auto; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-tab { white-space: nowrap; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-footer button i { font-style: normal; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-card {
    grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
    width: min(980px, calc(100% - 48px));
    height: min(620px, calc(100% - 44px));
    border: 1px solid rgba(25, 26, 24, .16);
    background: #fbf9f4;
    box-shadow: 0 32px 90px rgba(48, 38, 22, .26);
}

.measurement-guide-open .measurement-guide-dialog .measurement-guide-sidebar { padding: 34px 30px 26px; background: var(--soft); }

@keyframes measurement-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .measurement-guide-card { grid-template-columns: 1fr; width: min(560px, calc(100% - 24px)); height: min(720px, calc(100% - 24px)); }
    .measurement-guide-sidebar { display: block; padding: 22px 22px 0; overflow: visible; }
    .measurement-guide-sidebar h2,
    .measurement-fit-note { display: none; }
    .measurement-guide-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 17px; border: 1px solid rgba(25, 26, 24, .14); }
    .measurement-guide-tab { justify-content: center; min-height: 48px; padding: 6px; border-right: 1px solid rgba(25, 26, 24, .12); border-bottom: 0; text-align: center; }
    .measurement-guide-tab:last-child { border-right: 0; }
    .measurement-guide-tab b { display: none; }
    .measurement-guide-tab span { font-family: inherit; font-size: 10px; white-space: normal; }
    .measurement-guide-stage { padding: 24px 22px 16px; }
    .measurement-panel-heading { grid-template-columns: 1fr; row-gap: 8px; }
    .measurement-panel-heading h3 { font-size: 36px; }
    .measurement-method-layout { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
    .measurement-method-layout figure { min-height: 160px; max-height: 220px; }
    .measurement-method-layout ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .measurement-method-layout li { grid-template-columns: 1fr; gap: 5px; padding: 9px 8px; border-right: 1px solid rgba(25, 26, 24, .1); }
    .measurement-method-layout li:last-child { border-right: 0; }
    .measurement-method-layout li span { font-size: 10px; }
    .measurement-guide-footer span { display: none; }
    .measurement-guide-footer { justify-content: flex-end; }
    .measurement-bead-figures { gap: 10px; }
}

@media (max-height: 680px) and (min-width: 761px) {
    .measurement-guide-card { height: calc(100% - 20px); }
    .measurement-guide-sidebar { padding: 22px 24px 18px; }
    .measurement-guide-sidebar h2 { margin-top: 14px; font-size: 45px; }
    .measurement-fit-note { margin-top: 16px; }
    .measurement-fit-note h3 { font-size: 24px; }
    .measurement-guide-tab { min-height: 34px; }
    .measurement-guide-stage { padding: 30px 38px 14px; }
    .measurement-method-layout figure { min-height: 170px; }
    .measurement-method-layout li { padding: 9px 0; }
}

.measurement-guide-dialog { position: absolute; z-index: 20; display: none; inset: 0; place-items: center; }
.measurement-guide-dialog[hidden] { display: none; }
.measurement-guide-backdrop { position: absolute; inset: 0; background: transparent; }
.measurement-guide-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr); width: min(980px, calc(100% - 48px)); height: min(620px, calc(100% - 44px)); border: 1px solid rgba(25, 26, 24, .14); border-radius: 14px; background: var(--panel); box-shadow: 0 22px 48px rgba(74, 58, 33, .18); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity 180ms ease, transform 240ms var(--ease); }
.measurement-guide-dialog.is-visible .measurement-guide-card { opacity: 1; transform: translateY(0) scale(1); }
.measurement-guide-backdrop { opacity: 0; transition: opacity 180ms ease; }
.measurement-guide-dialog.is-visible .measurement-guide-backdrop { opacity: 1; }

.measurement-guide-open .measurement-guide-dialog { display: grid; }

.measurement-guide-open .measurement-guide-dialog .measurement-guide-sidebar,
.measurement-guide-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 34px 30px 26px; background: var(--soft); overflow: auto; }
.measurement-guide-kicker { margin: 0; color: var(--gold-dark); font-size: 10px; font-weight: 600; letter-spacing: .18em; white-space: nowrap; }
.measurement-guide-sidebar h2 { margin: 22px 0 0; color: var(--text); font-family: "Italiana", "Times New Roman", serif; font-size: clamp(42px, 4.8vw, 66px); font-weight: 400; line-height: .88; }
.measurement-fit-note { min-width: 0; margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(25, 26, 24, .16); }
.measurement-fit-note > p { margin: 0; color: var(--gold-dark); font-size: 10px; font-weight: 600; letter-spacing: .15em; }
.measurement-fit-note h3 { margin: 8px 0 7px; font-family: "Italiana", "Times New Roman", serif; font-size: 28px; font-weight: 400; line-height: 1; }
.measurement-fit-note > span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.measurement-fit-note dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.measurement-fit-note dl div { display: grid; gap: 3px; }
.measurement-fit-note dt { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.measurement-fit-note dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.measurement-guide-tabs { display: grid; min-width: 0; gap: 0; margin-top: auto; border-top: 1px solid rgba(25, 26, 24, .16); }
.measurement-guide-tab { display: flex; align-items: center; min-width: 0; gap: 12px; min-height: 42px; padding: 0 10px 0 0; border-bottom: 1px solid rgba(25, 26, 24, .13); background: transparent; color: var(--text); text-align: left; transition: color 160ms ease, background-color 160ms ease; }
.measurement-guide-tab:last-child { border-bottom: 0; }
.measurement-guide-tab b { flex: 0 0 auto; color: var(--gold); font-size: 10px; font-weight: 500; letter-spacing: .1em; }
.measurement-guide-tab span { min-width: 0; overflow: hidden; font-family: "Italiana", "Times New Roman", serif; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.measurement-guide-tab:hover,
.measurement-guide-tab.is-active { background: rgba(168, 135, 84, .09); color: var(--gold-dark); }
.measurement-guide-tab.is-active b { color: var(--gold-dark); }

.measurement-guide-stage { display: flex; flex-direction: column; min-width: 0; padding: 50px 52px 18px; background: rgba(251, 249, 244, .72); overflow: hidden; }
.measurement-guide-close { position: absolute; z-index: 2; top: 14px; right: 16px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: transparent; color: var(--text); font-family: Arial, sans-serif; font-size: 25px; line-height: 1; transition: color 160ms ease, background-color 160ms ease; }
.measurement-guide-close:hover { color: var(--gold-dark); background: rgba(168, 135, 84, .1); }
.measurement-guide-panel { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: auto; }
.measurement-guide-panel.is-active { display: flex; animation: measurement-panel-in 260ms var(--ease); }
.measurement-panel-heading { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(160px, .42fr); column-gap: 24px; align-items: end; }
.measurement-panel-heading p { grid-column: 1 / -1; margin: 0 0 4px; color: var(--gold-dark); font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.measurement-panel-heading h3 { margin: 0; font-family: "Italiana", "Times New Roman", serif; font-size: clamp(34px, 4vw, 54px); font-weight: 400; letter-spacing: .01em; line-height: .92; }
.measurement-panel-heading > span { padding-bottom: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.measurement-method-layout { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr); gap: 30px; align-items: center; flex: 1; margin-top: 20px; overflow: auto; }
.measurement-method-layout figure { display: grid; min-width: 0; min-height: 230px; margin: 0; place-items: center; background: rgba(244, 240, 232, .52); }
.measurement-method-layout img { width: 100%; height: 100%; max-height: 290px; object-fit: contain; }
.measurement-method-layout ol { min-width: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(25, 26, 24, .13); }
.measurement-method-layout li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(25, 26, 24, .13); }
.measurement-method-layout li b { color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: .1em; }
.measurement-method-layout li span { color: var(--muted); font-size: 12px; line-height: 1.48; }
.measurement-panel-note { min-width: 0; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(25, 26, 24, .13); color: var(--muted); font-size: 11px; line-height: 1.5; }
.measurement-guide-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(25, 26, 24, .13); color: var(--muted); font-size: 11px; line-height: 1.4; }
.measurement-guide-footer span { min-width: 0; }
.measurement-guide-footer button { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border-radius: 7px; background: var(--gold); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color 160ms ease, transform 160ms ease; }
.measurement-guide-footer button i { font-style: normal; }
.measurement-guide-footer button:hover { background: var(--gold-dark); transform: translateY(-1px); }
.measurement-table-wrap { min-width: 0; flex: 1; margin-top: 22px; overflow-x: auto; border: 1px solid rgba(25, 26, 24, .14); }
.measurement-table-wrap table { width: 100%; border-collapse: collapse; color: var(--muted); font-size: 11px; text-align: center; }
.measurement-table-wrap th,
.measurement-table-wrap td { padding: 13px 12px; border-right: 1px solid rgba(25, 26, 24, .1); border-bottom: 1px solid rgba(25, 26, 24, .1); white-space: nowrap; }
.measurement-table-wrap th { color: var(--text); font-size: 10px; font-weight: 600; }
.measurement-table-wrap tr:last-child th,
.measurement-table-wrap tr:last-child td { border-bottom: 0; }
.measurement-table-wrap th:last-child,
.measurement-table-wrap td:last-child { border-right: 0; }
.measurement-bead-figures { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; flex: 1; margin-top: 20px; overflow: auto; }
.measurement-bead-figures figure { display: grid; min-width: 0; grid-template-rows: minmax(0, 1fr) auto; margin: 0; background: rgba(244, 240, 232, .46); }
.measurement-bead-figures img { width: 100%; min-height: 0; height: 100%; max-height: 255px; object-fit: cover; object-position: right center; }
.measurement-bead-figures figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(25, 26, 24, .1); }
.measurement-bead-figures strong { color: var(--gold-dark); font-size: 10px; letter-spacing: .12em; }
.measurement-bead-figures span { color: var(--muted); font-size: 11px; }
.measurement-guide-tab:focus-visible,
.measurement-guide-close:focus-visible,
.measurement-guide-footer button:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

.studio-wordmark {
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.23em;
}

.studio-title {
    margin: 0;
    color: var(--text);
    font-family: "Italiana", "Times New Roman", serif;
    font-size: clamp(15px, 1.35vw, 20px);
    letter-spacing: 0.27em;
}

.ghost-button,
.summary,
.theme-toggle {
    border-color: rgba(25, 26, 24, 0.15);
    border-radius: 9px;
    background: rgba(251, 249, 244, 0.78);
    color: var(--text);
    box-shadow: 0 10px 26px rgba(74, 58, 33, 0.08);
    backdrop-filter: blur(10px);
}

.ghost-button {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 13px;
    font-size: 12px;
    transition: transform 180ms var(--ease), background-color 180ms ease;
}

.theme-toggle:hover,
.ghost-button:hover,
.summary:hover { transform: translateY(-1px); background: var(--paper); }
.theme-toggle-icon { color: var(--gold); font-size: 18px; line-height: 1; }

.summary-wrap { position: relative; pointer-events: auto; }
.summary-controls { display: flex; align-items: center; gap: 8px; }

.summary {
    min-height: 38px;
    padding: 0 13px;
    color: var(--muted);
    font-size: 12px;
    transition: transform 180ms var(--ease), background-color 180ms ease;
}

.summary strong { color: var(--text); font-weight: 600; }
.summary em { color: var(--muted); }
.summary b { color: var(--muted); font-weight: 400; }
.summary.is-limit {
    border-color: rgba(151, 89, 80, 0.44);
    background: rgba(255, 248, 245, 0.9);
}
.summary.is-limit strong,
.summary.is-limit em,
.summary.is-limit b { color: #8f4f46; }
.price-summary-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0;
    border: 1px solid rgba(25, 26, 24, 0.15);
    border-radius: 9px;
    background: rgba(251, 249, 244, 0.78);
    box-shadow: 0 6px 22px rgba(16, 24, 40, 0.08);
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition: transform 180ms var(--ease), background-color 180ms ease;
}

.price-summary-toggle strong { color: var(--text); font-weight: 600; }
.price-summary-toggle > span { padding: 0 13px; }
.price-summary-total { border-left: 1px solid rgba(25, 26, 24, 0.12); }
.price-summary-toggle:hover { transform: translateY(-1px); background: var(--paper); }

.size-popover {
    position: absolute;
    z-index: 10;
    top: calc(100% + 10px);
    right: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(25, 26, 24, 0.16);
    border-radius: 12px;
    background: rgba(251, 249, 244, 0.98);
    box-shadow: 0 20px 44px rgba(49, 39, 24, 0.18);
    color: var(--muted);
}

.popover-kicker,
.price-popover-header strong {
    margin: 0 0 12px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 600;
}

.price-popover {
    position: absolute;
    z-index: 10;
    top: calc(100% + 10px);
    right: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(25, 26, 24, 0.16);
    border-radius: 12px;
    background: rgba(251, 249, 244, 0.98);
    box-shadow: 0 20px 44px rgba(49, 39, 24, 0.18);
    color: var(--muted);
}

.price-popover-header,
.price-popover-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.price-popover-header { padding-bottom: 12px; border-bottom: 1px solid rgba(25, 26, 24, 0.1); }
.price-popover-header strong { margin: 0; }
.price-popover-header span { color: var(--muted); font-size: 13px; }
.price-line-items { max-height: min(292px, 42vh); overflow: auto; }

.price-line-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(25, 26, 24, 0.08);
}

.price-line-thumb {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
}

.price-line-thumb img { max-width: 38px; max-height: 38px; object-fit: contain; }
.price-line-details { display: grid; min-width: 0; gap: 3px; }
.price-line-details strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.price-line-details span { color: var(--muted); font-size: 12px; }
.price-line-subtotal { color: var(--text); font-size: 13px; white-space: nowrap; }
.price-summary-empty { margin: 18px 0; color: var(--muted); font-size: 13px; text-align: center; }
.price-popover-total { padding-top: 13px; font-size: 13px; }
.price-popover-total strong { color: var(--gold-dark); font-size: 16px; }

.popover-collapse {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 34px;
    margin: 14px 0 -8px;
    padding: 7px 0 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: rgba(128, 99, 56, 0.78);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    transition: color 160ms ease, letter-spacing 160ms ease;
}

.popover-collapse::before {
    position: absolute;
    top: 0;
    right: 12px;
    left: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 135, 84, 0.25) 18%, rgba(168, 135, 84, 0.25) 82%, transparent);
    content: "";
}

.popover-collapse:hover {
    color: var(--gold-dark);
    letter-spacing: 0.16em;
}

.popover-collapse:focus-visible {
    outline: 2px solid var(--gold-dark);
    outline-offset: 2px;
}

.wrist-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
}

.wrist-input-control {
    display: inline-flex;
    align-items: center;
    min-width: 112px;
    border: 1px solid rgba(25, 26, 24, 0.16);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.62);
}

.wrist-input-control input {
    width: 72px;
    min-height: 30px;
    padding: 0 4px 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    text-align: right;
}

.wrist-input-control input::placeholder { color: #a9a49b; font-weight: 400; }
.wrist-input-control em { padding-right: 10px; color: var(--muted); font-size: 12px; font-style: normal; }
.wrist-input-hint { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.popover-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 0;
    border-top: 1px solid rgba(25, 26, 24, 0.1);
    color: var(--muted);
    font-size: 13px;
}

.popover-row strong { color: var(--text); font-weight: 600; text-align: right; }
.fit-hint { margin: 14px 0 5px; color: var(--text); font-size: 13px; }
.fit-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.workbench {
    position: relative;
    z-index: 1;
    overscroll-behavior: contain;
}

.plate {
    --plate-visual-scale: 0.82;
    border: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.plate::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 1px solid var(--tray-rim);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.9), transparent 29%),
        var(--tray-fill);
    box-shadow:
        inset 0 0 0 11px rgba(255, 255, 255, 0.26),
        inset 0 -12px 22px rgba(128, 105, 67, 0.055),
        0 25px 52px var(--tray-shadow);
    content: "";
    pointer-events: none;
    transform: scale(var(--plate-visual-scale));
    transition: transform 260ms var(--ease), background 260ms ease, box-shadow 260ms ease;
}

.designer-shell[data-workbench-theme="linen"] .plate::before {
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.68), transparent 27%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(224, 220, 210, 0.23));
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.48),
        inset 0 -15px 28px rgba(86, 79, 68, 0.08),
        0 24px 50px var(--tray-shadow);
}

.bracelet-track { border-color: rgba(168, 135, 84, 0.48); }
.bracelet { z-index: 2; }
.bracelet-track { z-index: 1; }

.plate-logo {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    color: rgba(25, 26, 24, 0.75);
    font-family: "Italiana", "Times New Roman", serif;
    font-size: clamp(19px, 2.1vw, 30px);
    letter-spacing: 0.18em;
    line-height: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.plate .empty-hint {
    top: calc(50% + 34px);
}

.empty-hint { color: #857b6c; font-size: 13px; }

.actions { bottom: 14px; }

.icon-button,
.primary-button,
.dark-button,
.finish-button,
.status {
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(74, 58, 33, 0.1);
}

.icon-button {
    border-color: rgba(25, 26, 24, 0.16);
    background: rgba(251, 249, 244, 0.92);
    color: var(--text);
    font-size: 18px;
}

.action-tool-group {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid rgba(25, 26, 24, 0.16);
    border-radius: 8px;
    background: rgba(251, 249, 244, 0.92);
    box-shadow: 0 8px 20px rgba(74, 58, 33, 0.1);
}

.action-tool-group .icon-button {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.action-tool-group .icon-button + .icon-button {
    border-left: 1px solid rgba(25, 26, 24, 0.16);
}

.action-tool-group .icon-button:hover {
    background: rgba(168, 135, 84, 0.12);
}

.primary-button {
    border: 1px solid rgba(25, 26, 24, 0.22);
    background: rgba(251, 249, 244, 0.96);
    color: var(--text);
    font-weight: 600;
}

.dark-button { background: #716a5d; color: #fff; font-weight: 600; }
.finish-button { border-color: #191a18; background: #191a18; color: #fff; font-weight: 600; }

.status {
    border-color: rgba(25, 26, 24, 0.13);
    background: rgba(251, 249, 244, 0.88);
    color: var(--muted);
}

.catalog { background: #f8f5ef; }
.category-filter { border-right-color: rgba(25, 26, 24, 0.11); background: rgba(251, 249, 244, 0.8); }
.category-filter button { border-color: rgba(25, 26, 24, 0.14); background: rgba(251, 249, 244, 0.72); color: var(--text); }
.category-filter button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #fff; }
.bead-card { border-color: rgba(25, 26, 24, 0.1); background: rgba(251, 249, 244, 0.9); box-shadow: 0 8px 24px rgba(74, 58, 33, 0.07); }
.bead-card:hover { border-color: rgba(168, 135, 84, 0.55); box-shadow: 0 14px 30px rgba(74, 58, 33, 0.12); }
.bead-name { color: var(--text); font-weight: 600; }
.bead-hot-tag { display:inline-flex; width:max-content; margin:-1px auto 1px; padding:3px 5px; background:rgba(168,135,84,.15); color:var(--gold-dark); font-size:8px; font-weight:700; letter-spacing:.12em; }
.bead-size-options {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 16px);
    margin: 4px auto 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(25, 26, 24, 0.15);
    border-radius: 7px;
    background: #fbf9f4;
}
.bead-size-button {
    min-width: 37px;
    padding: 0 5px;
    border: 0;
    border-radius: 0;
    background: #fbf9f4;
    color: var(--muted);
}
.bead-size-button + .bead-size-button { border-left: 1px solid rgba(25, 26, 24, 0.15); }
.bead-size-button:hover { background: rgba(168, 135, 84, 0.12); }
.bead-size-button[aria-pressed="true"] { border-color: transparent; background: var(--gold); color: #fff; }
.bead-size-button:disabled { color: #b6afa4; cursor: not-allowed; text-decoration: line-through; }
.bead-card.is-sold-out { opacity: .52; }
.bead-card.is-sold-out .bead-card-main { cursor: not-allowed; }
.bead-grid.is-bracelet-limit .bead-card-main { cursor: not-allowed; }
.bead-stock-hint { display:block; min-height:13px; margin:-5px 0 10px; color:#a14d40; font-size:10px; font-weight:600; letter-spacing:.06em; text-align:center; }
.delete-drop-hint { border-color: rgba(151, 89, 80, 0.5); background: rgba(251, 249, 244, 0.95); color: var(--danger); }
.catalog.is-delete-hot .delete-drop-hint { border-color: var(--danger); background: rgba(151, 89, 80, 0.08); }

.share-tool-button {
    height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(25, 26, 24, 0.16);
    border-radius: 8px;
    background: rgba(251, 249, 244, 0.92);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(74, 58, 33, 0.08);
}
.share-tool-button:hover { border-color: var(--gold); color: var(--gold-dark); }
.natural-stone-note {
    flex: 1 1 360px;
    max-width: 640px;
    min-width: 260px;
    margin: 0 8px;
    color: #756d62;
    font-size: 12px;
    line-height: 1.5;
}
.design-code-dialog {
    width: min(620px, calc(100vw - 32px));
    padding: 44px;
    border: 1px solid rgba(25, 26, 24, .2);
    border-radius: 2px;
    background: #fbf9f4;
    color: #191a18;
    box-shadow: 0 35px 90px rgba(25, 26, 24, .28);
}
.design-code-dialog::backdrop { background: rgba(25, 26, 24, .42); backdrop-filter: blur(5px); }
.design-code-dialog h2 { margin: 8px 0 18px; font-family: "Italiana", Georgia, serif; font-size: 44px; font-weight: 400; line-height: .98; }
.design-code-dialog>p:not(.design-code-kicker):not(.design-code-status) { color: #696961; font-size: 14px; line-height: 1.75; }
.design-code-close { position: absolute; top: 18px; right: 20px; width: 38px; height: 38px; border: 0; background: transparent; color: #191a18; font-size: 30px; }
.design-code-kicker { margin: 0; color: #806338; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.share-code-output { margin: 28px 0 20px; padding: 22px; border: 1px solid rgba(168, 135, 84, .38); background: #f4f0e8; text-align: center; }
.share-code-output span { display: block; margin-bottom: 10px; color: #806338; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.share-code-output strong { font-family: "DM Sans", "Segoe UI", sans-serif; font-size: clamp(22px, 5vw, 34px); letter-spacing: .08em; }
.design-code-status { min-height: 22px; margin: 16px 0; color: #806338; font-size: 13px; line-height: 1.5; }
.design-code-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.design-code-actions button,.design-code-dialog form button,.import-code-preview button { min-height: 44px; padding: 0 17px; border: 1px solid rgba(25, 26, 24, .18); background: transparent; color: #191a18; font-size: 12px; font-weight: 700; }
.design-code-actions button:disabled { opacity: .38; cursor: not-allowed; }
.design-code-actions .design-code-primary,.design-code-dialog form .design-code-primary,.import-code-preview .design-code-primary { border-color: #191a18; background: #191a18; color: #fff; }
.design-code-dialog form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 25px; }
.design-code-dialog form label { grid-column: 1/-1; color: #806338; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.design-code-dialog form input { min-height: 48px; padding: 0 14px; border: 1px solid rgba(25, 26, 24, .18); background: #fffdfa; color: #191a18; font: 600 16px "DM Sans", "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.import-code-preview { margin-top: 24px; padding: 22px; border-top: 1px solid rgba(25, 26, 24, .14); background: rgba(244, 240, 232, .48); }
.import-code-preview h3 { margin: 7px 0; font: 400 30px "Italiana", Georgia, serif; }
.import-code-preview>p:not(.design-code-kicker) { margin: 0 0 18px; color: #696961; font-size: 13px; }

.save-design-dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 42px 44px 36px;
    border: 1px solid rgba(25, 26, 24, .16);
    border-radius: 2px;
    background: #fbf9f4;
    color: #191a18;
    box-shadow: 0 35px 90px rgba(25, 26, 24, .28);
}
.save-design-dialog::backdrop { background: rgba(25, 26, 24, .42); backdrop-filter: blur(5px); }
.save-design-close { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; border: 0; background: transparent; color: #191a18; font-size: 29px; cursor: pointer; }
.save-design-mark { display: grid; width: 42px; height: 42px; margin-bottom: 22px; place-items: center; border: 1px solid rgba(128, 99, 56, .42); border-radius: 50%; color: #806338; font-size: 20px; }
.save-design-dialog h2 { margin: 8px 0 16px; font-family: "Italiana", Georgia, serif; font-size: 48px; font-weight: 400; line-height: .98; }
.save-design-dialog > p:not(.design-code-kicker) { max-width: 410px; margin: 0; color: #696961; font-size: 14px; line-height: 1.75; }
.save-design-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.save-design-actions a,
.save-design-actions button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid rgba(25, 26, 24, .2); background: transparent; color: #191a18; font: 700 12px "DM Sans", "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; }
.save-design-actions .save-design-primary { border-color: #191a18; background: #191a18; color: #fff; }
.save-design-actions a:focus-visible,
.save-design-actions button:focus-visible,
.save-design-close:focus-visible { outline: 2px solid #806338; outline-offset: 3px; }

@media (max-width: 720px) {
    .topbar { inset: 10px 12px auto; grid-template-columns: 1fr auto; }
    .studio-title { display: none; }
    .studio-wordmark { display: none; }
    .theme-toggle { width: 38px; padding: 0; justify-content: center; }
    .theme-toggle span:last-child { display: none; }
    .summary { padding: 0 10px; font-size: 11px; }
    .price-summary-toggle > span { padding: 0 10px; font-size: 11px; }
    .summary b { display: none; }
    .ghost-button { padding: 0 12px; }
    .size-popover { right: 0; }
    .guide-toggle { top: 70px; left: 14px; }
    .share-tool-button { padding: 0 10px; font-size: 10px; }
    .design-code-dialog,
    .save-design-dialog { padding: 36px 24px 28px; }
    .design-code-dialog h2 { font-size: 36px; }
    .save-design-dialog h2 { font-size: 40px; }
    .design-code-dialog form { grid-template-columns: 1fr; }
    .save-design-actions { flex-direction: column; }
    .save-design-actions a,
    .save-design-actions button { width: 100%; }
    .user-guide {
        top: 66px;
        left: 14px;
        width: min(320px, calc(100% - 28px));
        height: min(390px, calc(100% - 132px));
    }
}

@media (max-width: 560px) {
    .topbar { inset: 8px 8px auto; }
    .ghost-button { height: 36px; font-size: 12px; }
    .summary { min-height: 36px; }
    .summary-length i { display: none; }
    .studio-tools { gap: 6px; }
    .user-guide { padding: 16px; }
    .guide-header h2 { font-size: 21px; }
    .guide-steps { margin: 15px 0; }
    .guide-panel h3 { font-size: 16px; }
    .plate::before { --plate-visual-scale: min(var(--plate-visual-scale), 0.92); }
}

@media (max-height: 800px) and (min-width: 721px) {
    .user-guide { padding: 12px; }
    .guide-eyebrow { display: none; }
    .guide-header h2 { margin-top: 0; font-size: 20px; }
    .guide-steps { margin: 10px 0; }
    .guide-step { min-height: 40px; }
    .guide-panel h3 { margin: 4px 0 7px; font-size: 16px; }
    .guide-panel > p:not(.guide-index) { font-size: 12px; line-height: 1.6; }
    .guide-tip { margin-top: 10px; padding: 8px 10px; font-size: 11px; }
    .guide-footer { margin-top: 10px; padding-top: 10px; }
}