:root {
    --bg: #f5efe2;
    --panel: rgba(255, 252, 246, 0.92);
    --ink: #1d1a17;
    --muted: #65594a;
    --accent: #9e5d2f;
    --accent-dark: #6c3a16;
    --line: rgba(36, 28, 20, 0.12);
    --success: #2f6c44;
    --shadow: 0 16px 45px rgba(42, 23, 8, 0.12);
    --radius: 22px;
    --radius-sm: 14px;
    --font-head: Georgia, "Times New Roman", serif;
    --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --bg-top: #f8f1e4;
    --bg-bottom: #efe7d7;
    --bg-radial-a: rgba(158, 93, 47, 0.12);
    --bg-radial-b: rgba(108, 58, 22, 0.18);
    --surface-border: rgba(255, 255, 255, 0.55);
    --hero-grad-a: rgba(255, 250, 240, 0.95);
    --hero-grad-b: rgba(232, 214, 181, 0.92);
    --hero-accent-a: rgba(158, 93, 47, 0.12);
    --hero-accent-b: rgba(108, 58, 22, 0.18);
    --hero-glow: rgba(158, 93, 47, 0.32);
    --switch-bg: rgba(255, 255, 255, 0.52);
    --modal-backdrop: rgba(24, 18, 13, 0.58);
    --modal-panel: rgba(255, 252, 246, 0.96);
    --scanner-grad-a: rgba(255, 255, 255, 0.72);
    --scanner-grad-b: rgba(235, 223, 203, 0.72);
    --scanner-line-a: rgba(158, 93, 47, 0.04);
    --scanner-line-b: rgba(108, 58, 22, 0.02);
    --scanner-overlay: rgba(24, 18, 13, 0.12);
    --video-bg: #1b1713;
    --input-bg: rgba(255, 255, 255, 0.88);
    --chip-bg: rgba(255, 255, 255, 0.75);
    --button-secondary-bg: #efe3cc;
    --button-ghost-bg: rgba(255, 255, 255, 0.66);
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-alt-bg: rgba(255, 255, 255, 0.88);
    --wishlist-bg-a: rgba(255, 249, 237, 0.96);
    --wishlist-bg-b: rgba(252, 241, 220, 0.92);
    --accent-soft: rgba(158, 93, 47, 0.24);
    --accent-strong: rgba(158, 93, 47, 0.7);
    --accent-ring: rgba(158, 93, 47, 0.18);
    --product-image-top: #fff;
    --product-image-bottom: #f7f0e1;
    --card-glass: rgba(255, 255, 255, 0.9);
    --auth-link: var(--accent-dark);
    --admin-editor-bg: rgba(255, 255, 255, 0.72);
    --session-banner-bg: rgba(255, 255, 255, 0.78);
    --scroll-top-bg: rgba(119, 74, 36, 0.9);
    --scroll-top-shadow: rgba(44, 23, 8, 0.22);
    --star-idle: #c7b8a1;
    --toast-error-bg: rgba(140, 32, 32, 0.96);
    --toast-bg: rgba(47, 108, 68, 0.96);
    --toast-shadow: rgba(26, 31, 22, 0.24);
    --success-soft: rgba(47, 108, 68, 0.12);
    --success-soft-strong: rgba(47, 108, 68, 0.13);
    --scroll-border: rgba(255, 255, 255, 0.38);
}

body[data-theme="forest"] {
    --bg: #e8f0e5;
    --panel: rgba(247, 252, 247, 0.92);
    --ink: #18231b;
    --muted: #536557;
    --accent: #3f6b47;
    --accent-dark: #294431;
    --line: rgba(33, 51, 38, 0.12);
    --success: #275c3a;
    --shadow: 0 16px 45px rgba(18, 39, 24, 0.12);
    --bg-top: #eef6ea;
    --bg-bottom: #dde7da;
    --bg-radial-a: rgba(63, 107, 71, 0.12);
    --bg-radial-b: rgba(36, 82, 54, 0.18);
    --hero-grad-a: rgba(248, 253, 246, 0.95);
    --hero-grad-b: rgba(214, 231, 214, 0.92);
    --hero-accent-a: rgba(63, 107, 71, 0.12);
    --hero-accent-b: rgba(36, 82, 54, 0.18);
    --hero-glow: rgba(63, 107, 71, 0.32);
    --scanner-line-a: rgba(63, 107, 71, 0.04);
    --scanner-line-b: rgba(36, 82, 54, 0.02);
    --button-secondary-bg: #dcead8;
    --wishlist-bg-a: rgba(241, 249, 240, 0.96);
    --wishlist-bg-b: rgba(229, 240, 225, 0.92);
    --accent-soft: rgba(63, 107, 71, 0.24);
    --accent-strong: rgba(63, 107, 71, 0.7);
    --accent-ring: rgba(63, 107, 71, 0.18);
    --product-image-bottom: #eef5eb;
    --scroll-top-bg: rgba(46, 88, 58, 0.92);
    --scroll-top-shadow: rgba(20, 44, 29, 0.22);
    --star-idle: #adc1b0;
}

body[data-theme="navy"] {
    --bg: #e6ebf2;
    --panel: rgba(248, 251, 255, 0.92);
    --ink: #172132;
    --muted: #566279;
    --accent: #355c8a;
    --accent-dark: #213b5a;
    --line: rgba(28, 43, 72, 0.12);
    --success: #2d6e60;
    --shadow: 0 16px 45px rgba(22, 35, 60, 0.12);
    --bg-top: #eef3f9;
    --bg-bottom: #dbe3ee;
    --bg-radial-a: rgba(53, 92, 138, 0.12);
    --bg-radial-b: rgba(33, 59, 90, 0.18);
    --hero-grad-a: rgba(247, 250, 255, 0.95);
    --hero-grad-b: rgba(214, 225, 239, 0.92);
    --hero-accent-a: rgba(53, 92, 138, 0.12);
    --hero-accent-b: rgba(33, 59, 90, 0.18);
    --hero-glow: rgba(53, 92, 138, 0.32);
    --scanner-line-a: rgba(53, 92, 138, 0.04);
    --scanner-line-b: rgba(33, 59, 90, 0.02);
    --button-secondary-bg: #dce6f1;
    --wishlist-bg-a: rgba(240, 245, 251, 0.96);
    --wishlist-bg-b: rgba(226, 234, 244, 0.92);
    --accent-soft: rgba(53, 92, 138, 0.24);
    --accent-strong: rgba(53, 92, 138, 0.7);
    --accent-ring: rgba(53, 92, 138, 0.18);
    --product-image-bottom: #edf2f8;
    --scroll-top-bg: rgba(44, 74, 116, 0.92);
    --scroll-top-shadow: rgba(22, 35, 60, 0.22);
    --star-idle: #b8c3d6;
}

body[data-theme="burgundy"] {
    --bg: #f2e7ea;
    --panel: rgba(255, 249, 250, 0.92);
    --ink: #28171c;
    --muted: #72505a;
    --accent: #8a4156;
    --accent-dark: #5d2938;
    --line: rgba(66, 33, 43, 0.12);
    --success: #2f6c44;
    --shadow: 0 16px 45px rgba(52, 24, 32, 0.12);
    --bg-top: #f8eef1;
    --bg-bottom: #eadde1;
    --bg-radial-a: rgba(138, 65, 86, 0.12);
    --bg-radial-b: rgba(93, 41, 56, 0.18);
    --hero-grad-a: rgba(255, 248, 250, 0.95);
    --hero-grad-b: rgba(239, 216, 223, 0.92);
    --hero-accent-a: rgba(138, 65, 86, 0.12);
    --hero-accent-b: rgba(93, 41, 56, 0.18);
    --hero-glow: rgba(138, 65, 86, 0.32);
    --scanner-line-a: rgba(138, 65, 86, 0.04);
    --scanner-line-b: rgba(93, 41, 56, 0.02);
    --button-secondary-bg: #efdde2;
    --wishlist-bg-a: rgba(252, 243, 245, 0.96);
    --wishlist-bg-b: rgba(244, 229, 233, 0.92);
    --accent-soft: rgba(138, 65, 86, 0.24);
    --accent-strong: rgba(138, 65, 86, 0.7);
    --accent-ring: rgba(138, 65, 86, 0.18);
    --product-image-bottom: #f8eef1;
    --scroll-top-bg: rgba(116, 47, 67, 0.92);
    --scroll-top-shadow: rgba(52, 24, 32, 0.22);
    --star-idle: #d2b5be;
}

body[data-theme="slate"] {
    --bg: #e9ecef;
    --panel: rgba(251, 252, 253, 0.92);
    --ink: #1e242c;
    --muted: #5f6976;
    --accent: #5d7488;
    --accent-dark: #3f5160;
    --line: rgba(38, 49, 60, 0.12);
    --success: #38665b;
    --shadow: 0 16px 45px rgba(32, 41, 52, 0.12);
    --bg-top: #f1f4f6;
    --bg-bottom: #dde2e7;
    --bg-radial-a: rgba(93, 116, 136, 0.12);
    --bg-radial-b: rgba(63, 81, 96, 0.18);
    --hero-grad-a: rgba(252, 253, 254, 0.95);
    --hero-grad-b: rgba(221, 228, 234, 0.92);
    --hero-accent-a: rgba(93, 116, 136, 0.12);
    --hero-accent-b: rgba(63, 81, 96, 0.18);
    --hero-glow: rgba(93, 116, 136, 0.32);
    --scanner-line-a: rgba(93, 116, 136, 0.04);
    --scanner-line-b: rgba(63, 81, 96, 0.02);
    --button-secondary-bg: #e0e6ea;
    --wishlist-bg-a: rgba(244, 247, 249, 0.96);
    --wishlist-bg-b: rgba(230, 235, 239, 0.92);
    --accent-soft: rgba(93, 116, 136, 0.24);
    --accent-strong: rgba(93, 116, 136, 0.7);
    --accent-ring: rgba(93, 116, 136, 0.18);
    --product-image-bottom: #eef2f5;
    --scroll-top-bg: rgba(80, 100, 117, 0.92);
    --scroll-top-shadow: rgba(32, 41, 52, 0.22);
    --star-idle: #bcc6ce;
}

body[data-theme="copper"] {
    --bg: #f3e7df;
    --panel: rgba(255, 249, 246, 0.92);
    --ink: #2b1c16;
    --muted: #7a594d;
    --accent: #b5653d;
    --accent-dark: #7f4426;
    --line: rgba(77, 47, 34, 0.12);
    --success: #3d7254;
    --shadow: 0 16px 45px rgba(63, 34, 20, 0.12);
    --bg-top: #f9efe8;
    --bg-bottom: #eadbd0;
    --bg-radial-a: rgba(181, 101, 61, 0.12);
    --bg-radial-b: rgba(127, 68, 38, 0.18);
    --hero-grad-a: rgba(255, 250, 247, 0.95);
    --hero-grad-b: rgba(238, 218, 204, 0.92);
    --hero-accent-a: rgba(181, 101, 61, 0.12);
    --hero-accent-b: rgba(127, 68, 38, 0.18);
    --hero-glow: rgba(181, 101, 61, 0.32);
    --scanner-line-a: rgba(181, 101, 61, 0.04);
    --scanner-line-b: rgba(127, 68, 38, 0.02);
    --button-secondary-bg: #f1ddd0;
    --wishlist-bg-a: rgba(253, 245, 240, 0.96);
    --wishlist-bg-b: rgba(246, 232, 223, 0.92);
    --accent-soft: rgba(181, 101, 61, 0.24);
    --accent-strong: rgba(181, 101, 61, 0.7);
    --accent-ring: rgba(181, 101, 61, 0.18);
    --product-image-bottom: #f7ebe4;
    --scroll-top-bg: rgba(144, 82, 49, 0.92);
    --scroll-top-shadow: rgba(63, 34, 20, 0.22);
    --star-idle: #d3b3a5;
}

body[data-theme="olive"] {
    --bg: #eef0e2;
    --panel: rgba(252, 253, 247, 0.92);
    --ink: #242817;
    --muted: #6d7350;
    --accent: #7b8b3e;
    --accent-dark: #55602c;
    --line: rgba(62, 69, 33, 0.12);
    --success: #466643;
    --shadow: 0 16px 45px rgba(43, 50, 22, 0.12);
    --bg-top: #f5f7eb;
    --bg-bottom: #e2e6d1;
    --bg-radial-a: rgba(123, 139, 62, 0.12);
    --bg-radial-b: rgba(85, 96, 44, 0.18);
    --hero-grad-a: rgba(253, 254, 249, 0.95);
    --hero-grad-b: rgba(227, 234, 205, 0.92);
    --hero-accent-a: rgba(123, 139, 62, 0.12);
    --hero-accent-b: rgba(85, 96, 44, 0.18);
    --hero-glow: rgba(123, 139, 62, 0.32);
    --scanner-line-a: rgba(123, 139, 62, 0.04);
    --scanner-line-b: rgba(85, 96, 44, 0.02);
    --button-secondary-bg: #e8ecd2;
    --wishlist-bg-a: rgba(248, 251, 239, 0.96);
    --wishlist-bg-b: rgba(236, 241, 220, 0.92);
    --accent-soft: rgba(123, 139, 62, 0.24);
    --accent-strong: rgba(123, 139, 62, 0.7);
    --accent-ring: rgba(123, 139, 62, 0.18);
    --product-image-bottom: #f2f5e5;
    --scroll-top-bg: rgba(100, 114, 49, 0.92);
    --scroll-top-shadow: rgba(43, 50, 22, 0.22);
    --star-idle: #c8cfaa;
}

body[data-theme="ocean"] {
    --bg: #e2eef0;
    --panel: rgba(246, 252, 252, 0.92);
    --ink: #16272b;
    --muted: #4f7178;
    --accent: #2f8794;
    --accent-dark: #1e5e67;
    --line: rgba(29, 64, 71, 0.12);
    --success: #2f6b5d;
    --shadow: 0 16px 45px rgba(19, 47, 52, 0.12);
    --bg-top: #ebf6f7;
    --bg-bottom: #d2e3e6;
    --bg-radial-a: rgba(47, 135, 148, 0.12);
    --bg-radial-b: rgba(30, 94, 103, 0.18);
    --hero-grad-a: rgba(248, 253, 253, 0.95);
    --hero-grad-b: rgba(207, 232, 235, 0.92);
    --hero-accent-a: rgba(47, 135, 148, 0.12);
    --hero-accent-b: rgba(30, 94, 103, 0.18);
    --hero-glow: rgba(47, 135, 148, 0.32);
    --scanner-line-a: rgba(47, 135, 148, 0.04);
    --scanner-line-b: rgba(30, 94, 103, 0.02);
    --button-secondary-bg: #d6ecee;
    --wishlist-bg-a: rgba(239, 249, 250, 0.96);
    --wishlist-bg-b: rgba(224, 241, 243, 0.92);
    --accent-soft: rgba(47, 135, 148, 0.24);
    --accent-strong: rgba(47, 135, 148, 0.7);
    --accent-ring: rgba(47, 135, 148, 0.18);
    --product-image-bottom: #e7f3f4;
    --scroll-top-bg: rgba(37, 108, 118, 0.92);
    --scroll-top-shadow: rgba(19, 47, 52, 0.22);
    --star-idle: #a8c9ce;
}

body[data-theme="plum"] {
    --bg: #efe5f1;
    --panel: rgba(252, 248, 253, 0.92);
    --ink: #26182b;
    --muted: #6f5678;
    --accent: #87509a;
    --accent-dark: #5c3569;
    --line: rgba(60, 37, 69, 0.12);
    --success: #3f6b5a;
    --shadow: 0 16px 45px rgba(41, 23, 49, 0.12);
    --bg-top: #f6eef7;
    --bg-bottom: #e3d7e7;
    --bg-radial-a: rgba(135, 80, 154, 0.12);
    --bg-radial-b: rgba(92, 53, 105, 0.18);
    --hero-grad-a: rgba(253, 249, 254, 0.95);
    --hero-grad-b: rgba(228, 212, 234, 0.92);
    --hero-accent-a: rgba(135, 80, 154, 0.12);
    --hero-accent-b: rgba(92, 53, 105, 0.18);
    --hero-glow: rgba(135, 80, 154, 0.32);
    --scanner-line-a: rgba(135, 80, 154, 0.04);
    --scanner-line-b: rgba(92, 53, 105, 0.02);
    --button-secondary-bg: #eadcf0;
    --wishlist-bg-a: rgba(249, 242, 251, 0.96);
    --wishlist-bg-b: rgba(239, 227, 243, 0.92);
    --accent-soft: rgba(135, 80, 154, 0.24);
    --accent-strong: rgba(135, 80, 154, 0.7);
    --accent-ring: rgba(135, 80, 154, 0.18);
    --product-image-bottom: #f2eaf5;
    --scroll-top-bg: rgba(109, 63, 125, 0.92);
    --scroll-top-shadow: rgba(41, 23, 49, 0.22);
    --star-idle: #ccb6d5;
}

body[data-theme="charcoal"] {
    --bg: #e5e6e8;
    --panel: rgba(249, 250, 251, 0.92);
    --ink: #202225;
    --muted: #62676e;
    --accent: #6b737d;
    --accent-dark: #464c54;
    --line: rgba(45, 49, 54, 0.12);
    --success: #3c6558;
    --shadow: 0 16px 45px rgba(34, 36, 40, 0.12);
    --bg-top: #eff0f2;
    --bg-bottom: #d9dde1;
    --bg-radial-a: rgba(107, 115, 125, 0.12);
    --bg-radial-b: rgba(70, 76, 84, 0.18);
    --hero-grad-a: rgba(252, 253, 254, 0.95);
    --hero-grad-b: rgba(223, 227, 232, 0.92);
    --hero-accent-a: rgba(107, 115, 125, 0.12);
    --hero-accent-b: rgba(70, 76, 84, 0.18);
    --hero-glow: rgba(107, 115, 125, 0.32);
    --scanner-line-a: rgba(107, 115, 125, 0.04);
    --scanner-line-b: rgba(70, 76, 84, 0.02);
    --button-secondary-bg: #e2e5e8;
    --wishlist-bg-a: rgba(245, 247, 248, 0.96);
    --wishlist-bg-b: rgba(231, 235, 238, 0.92);
    --accent-soft: rgba(107, 115, 125, 0.24);
    --accent-strong: rgba(107, 115, 125, 0.7);
    --accent-ring: rgba(107, 115, 125, 0.18);
    --product-image-bottom: #edf0f2;
    --scroll-top-bg: rgba(86, 92, 101, 0.92);
    --scroll-top-shadow: rgba(34, 36, 40, 0.22);
    --star-idle: #c2c7cc;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(circle at top left, var(--bg-radial-a), transparent 34%),
        radial-gradient(circle at bottom right, var(--bg-radial-b), transparent 28%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 42%, var(--bg-bottom) 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

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

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 14px 42px;
}

.hero,
.panel {
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 14px 16px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, var(--hero-grad-a), var(--hero-grad-b)),
        linear-gradient(90deg, var(--hero-accent-a), var(--hero-accent-b));
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto -6% -30% 35%;
    height: 160px;
    background: linear-gradient(90deg, transparent, var(--hero-glow));
    transform: rotate(-8deg);
    pointer-events: none;
}

.hero__top,
.hero__content,
.panel__header,
.search-row,
.filter-row,
.inline-actions,
.admin-actions,
.product-head,
.meta,
.badge-row,
.tasting-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
}

.inline-actions--compact {
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.brand__logo {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 16px;
}

.brand__eyebrow {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.brand h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-head);
}

.brand h1 {
    font-size: clamp(1.6rem, 4vw, 3rem);
}

.hero__content {
    margin-top: 10px;
}

.hero__content p {
    max-width: 700px;
    margin: 0;
    line-height: 1.35;
    color: var(--muted);
    font-size: 0.95rem;
}

.tabs,
.lang-switch {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: var(--switch-bg);
}

.lang-switch__button,
.button,
.chip,
.tabs a,
.star-row button {
    border: 0;
    cursor: pointer;
    transition: 160ms ease;
}

.lang-switch__button,
.tabs a {
    padding: 8px 12px;
    border-radius: 999px;
    background: transparent;
    font-weight: 700;
    min-width: 0;
    font-size: 0.92rem;
}

.lang-switch__button--icon {
    min-width: 44px;
    padding-inline: 10px;
}

.lang-switch__icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.lang-switch__button.is-active,
.tabs a.is-active,
.button,
.chip.is-active,
.star-row button.is-selected {
    background: var(--accent);
    color: #fff;
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.panel {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 14px;
}

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

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

.modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid var(--surface-border);
    background: var(--modal-panel);
    box-shadow: var(--shadow);
}

.modal__header {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.scanner-frame {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, var(--scanner-grad-a), var(--scanner-grad-b)),
        repeating-linear-gradient(
            0deg,
            var(--scanner-line-a),
            var(--scanner-line-a) 10px,
            var(--scanner-line-b) 10px,
            var(--scanner-line-b) 20px
        );
}

.scanner-frame::after {
    content: "";
    position: absolute;
    inset: 16% 12%;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 18px;
    box-shadow: 0 0 0 999px var(--scanner-overlay);
    pointer-events: none;
}

.scanner-video {
    width: 100%;
    min-height: 250px;
    object-fit: cover;
    background: var(--video-bg);
}

.panel--sticky {
    position: sticky;
    top: 10px;
    z-index: 10;
}

.grid-two,
.cards,
.stats-grid {
    display: grid;
    gap: 12px;
}

.cards {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.cards--single {
    grid-template-columns: 1fr;
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.field {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 180px;
}

.field--compact {
    flex: 0 1 180px;
}

.field--honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.filter-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 260px;
    min-width: 0;
}

.field span,
.checkbox span,
.muted {
    color: var(--muted);
}

.muted {
    line-height: 1.3;
}

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

input,
select,
textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--ink);
}

textarea {
    min-height: 78px;
    resize: vertical;
}

.checkbox,
.pill,
.badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--chip-bg);
    font-weight: 600;
}

.checkbox {
    font-size: 0.84rem;
}

.badge,
.pill {
    padding: 7px 10px;
    font-size: 0.82rem;
}

.checkbox--filter {
    flex: 0 0 auto;
    align-self: end;
}

.badge--exclusive {
    background: var(--success-soft);
    color: var(--success);
}

.button {
    padding: 8px 14px;
}

.button--compact {
    padding: 6px 10px;
    font-size: 0.82rem;
}

.button--secondary {
    background: var(--button-secondary-bg);
    color: var(--accent-dark);
}

.button--ghost {
    background: var(--button-ghost-bg);
    color: var(--accent-dark);
    border: 1px solid var(--line);
}

.chips,
.stack {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.card,
.stat-card,
.top-item {
    display: grid;
    gap: 7px;
    padding: 11px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--card-bg);
}

.top-item--link {
    text-decoration: none;
    color: inherit;
}

.profile-sections {
    display: grid;
    gap: 18px;
}

.profile-section {
    display: grid;
    gap: 10px;
}

.mini-cards {
    display: grid;
    gap: 8px;
}

.mini-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 11px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--card-alt-bg);
    text-decoration: none;
    color: inherit;
}

.mini-card--tasted {
    background: linear-gradient(180deg, var(--wishlist-bg-a), var(--wishlist-bg-b));
    border-color: var(--accent-soft);
}

.mini-card__main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mini-card__eyebrow,
.mini-card__meta,
.mini-card__link {
    font-size: 0.82rem;
    color: var(--muted);
}

.mini-card__title {
    line-height: 1.12;
}

.mini-card__side {
    display: grid;
    justify-items: end;
    gap: 5px;
    text-align: right;
}

.badge--tiny {
    padding: 3px 7px;
    font-size: 0.74rem;
}

@media (max-width: 560px) {
    .mini-card {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mini-card__side {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        text-align: left;
    }
}

.card--link {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.card--focus {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 2px var(--accent-ring), var(--shadow);
}

.card--wishlist {
    background: linear-gradient(180deg, var(--wishlist-bg-a), var(--wishlist-bg-b));
    border-color: var(--accent-soft);
}

.product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 9px;
    align-items: start;
}

.product-layout--no-image {
    grid-template-columns: 1fr;
}

.product-media {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.product-image {
    width: 84px;
    height: 148px;
    object-fit: contain;
    object-position: center;
    justify-self: end;
    align-self: start;
    padding: 8px 6px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--product-image-top), var(--product-image-bottom));
}

.wb-link {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card-glass);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wb-link img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.hint {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.25;
}

.filter-row--admin-image {
    align-items: start;
}

.admin-image-preview {
    min-width: 120px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card-glass);
    display: grid;
    gap: 8px;
    justify-items: center;
}

.admin-image-preview__label {
    font-size: 0.82rem;
    color: var(--muted);
}

.admin-image-preview img {
    width: 88px;
    height: 132px;
    object-fit: contain;
    object-position: center;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--product-image-top), var(--product-image-bottom));
}

.auth-panel {
    padding-top: 12px;
}

.auth-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px;
}

.auth-switcher__link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--auth-link);
    font: inherit;
    font-size: 0.88rem;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.82;
}

.auth-switcher__link.is-active {
    text-decoration: none;
    font-weight: 700;
    opacity: 1;
}

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

.password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.password-toggle {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--accent-dark);
    font: inherit;
    cursor: pointer;
}

.panel__header--tight {
    margin-bottom: 8px;
}

.admin-manage {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 14px;
}

.admin-section {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card-bg);
    overflow: hidden;
}

.admin-section__summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-section__summary::-webkit-details-marker {
    display: none;
}

.admin-section__summary::after {
    content: "+";
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-dark);
    background: var(--button-ghost-bg);
    flex: 0 0 auto;
}

.admin-section[open] .admin-section__summary::after {
    content: "−";
}

.admin-section__body {
    padding: 0 14px 14px;
    display: grid;
    gap: 14px;
    border-top: 1px solid var(--line);
}

.admin-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.admin-editor-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.admin-catalog-tabs {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-editor {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--admin-editor-bg);
}

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

.admin-list__item {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--card-bg);
}

.star-row {
    display: inline-flex;
    gap: 2px;
}

.product-flags {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
}

.product-flags .checkbox {
    padding: 6px 8px;
    gap: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.tasting-panel {
    display: grid;
    gap: 8px;
}

.tasting-actions .button.button--secondary {
    padding: 3px 7px;
    font-size: 0.68rem;
    line-height: 1;
    min-height: 0;
}

.star-row button {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--star-idle);
    font-size: 1rem;
    line-height: 1;
}

.star-row button:hover {
    color: var(--accent);
}

.status-banner {
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--success-soft-strong);
    color: var(--success);
}

.toast {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    min-width: min(320px, calc(100vw - 32px));
    max-width: min(520px, calc(100vw - 32px));
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--toast-bg);
    color: #fff;
    box-shadow: 0 14px 34px var(--toast-shadow);
    z-index: 55;
    text-align: center;
}

.toast--error {
    background: var(--toast-error-bg);
}

.filter-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.filter-panel__actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.session-banner {
    padding: 8px 10px;
    border-radius: 14px;
    background: var(--session-banner-bg);
    border: 1px solid var(--line);
    color: var(--accent-dark);
    font-weight: 600;
}

.site-footer {
    display: grid;
    gap: 4px;
    margin-top: 14px;
    padding: 0 4px 16px;
}

.report-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
}

.footer-copy {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--muted);
}

.footer-copy a {
    text-decoration: underline;
}

.scroll-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--scroll-border);
    background: var(--scroll-top-bg);
    color: #fff;
    box-shadow: 0 10px 24px var(--scroll-top-shadow);
    z-index: 40;
}

.auth-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.auth-panel {
    display: grid;
    gap: 8px;
}

.auth-form + .auth-form {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.auth-form .button {
    width: 100%;
    justify-content: center;
}

.account-actions {
    display: grid;
    gap: 10px;
}

#delete-account-form .inline-actions {
    gap: 8px;
}

.panel__header p {
    margin: 0;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.card h3 {
    line-height: 1.16;
}

.product-head h3,
.product-head .muted,
.meta,
.badge-row,
.card p,
.card .muted {
    line-height: 1.1;
}

.product-head .muted {
    margin: 0 0 2px;
}

.meta,
.badge-row {
    gap: 6px;
}

@media (max-width: 680px) {
    .app-shell {
        padding: 12px 12px 28px;
    }

    .hero,
    .panel {
        padding: 14px;
        border-radius: 18px;
    }

    .tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
        border-radius: 18px;
    }

    .tabs a {
        min-width: 0;
        padding: 8px 6px;
        font-size: 0.86rem;
        text-align: center;
        white-space: normal;
        line-height: 1.15;
    }

    .product-image {
        width: 76px;
        height: 138px;
        padding: 8px 5px;
    }

    .filter-panel__top {
        align-items: start;
        flex-direction: column;
    }

    .search-row,
    .filter-row,
    .panel__header,
    .inline-actions,
    .admin-actions {
        align-items: stretch;
    }

    .report-actions {
        width: 100%;
    }

    .report-actions .button {
        flex: 1 1 0;
        justify-content: center;
    }

    .field--compact {
        flex: 1 1 calc(50% - 8px);
    }

    .filter-pair {
        flex: 1 1 100%;
    }

    .scroll-top {
        right: 12px;
        bottom: 12px;
        width: 36px;
        height: 36px;
    }

    .toast {
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        min-width: calc(100vw - 24px);
    }

    .hero {
        padding: 12px;
    }

    .panel {
        padding: 12px;
    }
}