/* Silver Smoke - Phase 1 Stylesheet */
/* Golden Age of Caricature - Aesthetic System */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=IM+Fell+DW+Pica:ital@0;1&family=IM+Fell+English:ital@0;1&display=swap');

:root {
    /* Palette - Muted Earthy Tones */
    --color-paper: #F5EFE0;
    /* Cream parchment */
    --color-ink: #1A1411;
    /* Deep brownish black */
    --color-ink-faded: #3e362e;
    --color-sepia: #8B7355;
    --color-sepia-light: #C4A882;
    --color-slate-blue: #4a5d6b;
    --color-olive: #556b2f;
    --color-dull-red: #8b3a3a;
    --color-ochre: #b8860b;

    /* Typography */
    --font-headers: 'Cinzel Decorative', cursive;
    /* Or IM Fell English SC if Cinzel is too clean */
    --font-heading-main: 'IM Fell DW Pica', serif;
    --font-heading-alt: 'IM Fell English', serif;
    --font-accent: 'IM Fell French Canon', serif;
    --font-body: 'Crimson Text', 'Lora', serif;
    
    /* Texture */
    --texture-paper: url('../assets/images/paper_texture.png');

    /* Effects */
    --shadow-ink: 2px 2px 0px rgba(26, 21, 16, 0.2);

    /* ========================================================================
       KNOWLEDGE BASE DESIGN SYSTEM (Phase 1: Foundation)
       ======================================================================== */

    /* === Tobacco-Themed Color Palette === */
    
    /* Wrapper Colors (Primary Accents) */
    --kb-wrapper-claro: #D4A574;      /* Light Connecticut */
    --kb-wrapper-colorado: #8B5A2B;   /* Colorado */
    --kb-wrapper-maduro: #3D2314;     /* Maduro */
    --kb-wrapper-oscuro: #2A1810;     /* Oscuro */
    
    /* Neutral Colors (Ash, Paper, Cedar) */
    --kb-ash-light: #F5F3EF;
    --kb-ash-base: #E8E4DD;
    --kb-ash-dark: #C4B8A8;
    --kb-cedar: #8B7355;
    
    /* Semantic Colors */
    --kb-success: #4A6741;            /* Leaf green */
    --kb-warning: #C9A961;            /* Band gold */
    --kb-error: #A63D29;              /* Band red */
    --kb-info: #5C7A9E;               /* Steel blue */
    
    /* Text Colors (Contrast-Optimized - WCAG AAA) */
    --kb-text-primary: #2D2420;       /* 14.5:1 contrast on white */
    --kb-text-secondary: #5C4F44;     /* 7.2:1 contrast on white */
    --kb-text-muted: #7A6B5F;         /* 4.6:1 contrast on white */
    --kb-text-inverse: #FAF8F5;       /* For dark backgrounds */
    
    /* Border Colors */
    --kb-border-light: #D4C8B8;       /* Decorative only */
    --kb-border-base: #A89888;        /* 3.1:1 - minimum for interactive */
    --kb-border-dark: #6B5D52;        /* 5.2:1 - good for active states */
    
    /* Background Colors */
    --kb-bg-primary: #FAF8F5;         /* Paper */
    --kb-bg-secondary: #F5F3EF;       /* Ash light */
    --kb-bg-tertiary: #E8E4DD;        /* Ash base */

    /* === Typography System (Using Existing Site Fonts) === */
    
    /* Font Families (Knowledge Base Specific - Using Existing Site Fonts) */
    --kb-font-heading: 'IM Fell English', serif;  /* Existing --font-heading-main */
    --kb-font-body: 'IM Fell DW Pica', serif;     /* Existing --font-body */
    --kb-font-mono: 'Consolas', 'Courier New', monospace;  /* Monospace fallback */
    
    /* Font Sizes (Type Scale) */
    --kb-text-xs: 0.875rem;      /* 14px - metadata, captions */
    --kb-text-sm: 1rem;          /* 16px - body text minimum */
    --kb-text-base: 1.125rem;    /* 18px - comfortable reading */
    --kb-text-lg: 1.25rem;       /* 20px - lead paragraphs */
    --kb-text-xl: 1.5rem;        /* 24px - H3 */
    --kb-text-2xl: 1.875rem;     /* 30px - H2 */
    --kb-text-3xl: 2.5rem;       /* 40px - H1 */
    
    /* Font Weights */
    --kb-weight-normal: 400;
    --kb-weight-medium: 500;
    --kb-weight-semibold: 600;
    --kb-weight-bold: 700;
    
    /* Line Heights */
    --kb-leading-tight: 1.25;    /* Headings */
    --kb-leading-normal: 1.6;    /* Body text */
    --kb-leading-relaxed: 1.75;  /* Extended reading */
    
    /* Letter Spacing */
    --kb-tracking-tight: -0.01em;
    --kb-tracking-normal: 0;
    --kb-tracking-wide: 0.05em;

    /* === Spacing System (8px base unit) === */
    --kb-space-1: 0.25rem;   /* 4px */
    --kb-space-2: 0.5rem;    /* 8px */
    --kb-space-3: 0.75rem;   /* 12px */
    --kb-space-4: 1rem;      /* 16px */
    --kb-space-5: 1.25rem;   /* 20px */
    --kb-space-6: 1.5rem;    /* 24px */
    --kb-space-8: 2rem;      /* 32px */
    --kb-space-10: 2.5rem;   /* 40px */
    --kb-space-12: 3rem;     /* 48px */
    --kb-space-16: 4rem;     /* 64px */

    /* === Border Radius Scale === */
    --kb-radius-none: 0;
    --kb-radius-sm: 0.25rem;   /* 4px */
    --kb-radius-md: 0.5rem;    /* 8px */
    --kb-radius-lg: 0.75rem;   /* 12px */
    --kb-radius-full: 9999px;

    /* === Shadow Scale === */
    --kb-shadow-xs: 0 1px 2px rgba(45, 36, 32, 0.05);
    --kb-shadow-sm: 0 1px 3px rgba(45, 36, 32, 0.08);
    --kb-shadow-md: 0 4px 6px rgba(45, 36, 32, 0.1);
    --kb-shadow-lg: 0 8px 16px rgba(45, 36, 32, 0.12);
    --kb-shadow-xl: 0 16px 32px rgba(45, 36, 32, 0.15);

    /* === Transitions === */
    --kb-transition-fast: 150ms ease-out;
    --kb-transition-base: 200ms ease-out;
    --kb-transition-slow: 300ms ease-out;

    /* === Z-Index Scale === */
    --kb-z-base: 1;
    --kb-z-dropdown: 100;
    --kb-z-sticky: 200;
    --kb-z-modal: 1000;
    --kb-z-toast: 1100;

    /* === Decorative Elements (Vintage/Golden Age Flair) === */
    
    /* Ornamental Dividers */
    --kb-divider-ornamental: '❧';  /* Floral heart ornament */
    --kb-divider-section: '·';      /* Center dot */
    --kb-divider-subtle: '—';       /* Em dash */
    
    /* Vintage Border Styles */
    --kb-border-vintage-double: 3px double var(--kb-border-base);
    --kb-border-vintage-dotted: 2px dotted var(--kb-border-dark);
    --kb-border-vintage-groove: 3px groove var(--kb-border-base);
    
    /* Decorative Shadows (Vintage feel) */
    --kb-shadow-vintage: 3px 3px 0px rgba(45, 36, 32, 0.15);
    --kb-shadow-vintage-inset: inset 2px 2px 4px rgba(45, 36, 32, 0.08);
    
    /* Cigar Band-Inspired Accents */
    --kb-band-gold: linear-gradient(135deg, #C9A961 0%, #E8D5A3 50%, #C9A961 100%);
    --kb-band-red: linear-gradient(135deg, #A63D29 0%, #D95742 50%, #A63D29 100%);
    --kb-band-emboss: 0 1px 0 rgba(255,255,255,0.3), inset 0 1px 0 rgba(0,0,0,0.1);
    
    /* Asymmetric Offsets (Intentional non-uniformity) */
    --kb-offset-subtle: 2px;
    --kb-offset-noticeable: 6px;
    --kb-offset-dramatic: 12px;
}

* {
    box-sizing: border-box;
}

/* Hide scrollbars globally while maintaining scroll functionality */
* {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

*::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Block background scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-paper);
    /* Paper texture at 70% opacity */
    background-image: url('../assets/images/paper_texture.png');
    background-size: 500px;
    background-repeat: repeat;
    background-attachment: fixed;
    position: relative;
}

/* Overlay to achieve 30% opacity on the texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-paper);
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;
}

/* Global Filter Overlay for that "Printed" look */
/* Note: This might be too heavy for the whole body, applying selectively */

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading-main);
    font-weight: 400;
    /* Vintage type is rarely bold in the modern sense */
    margin-top: 0;
    margin-bottom: 0.5em;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    color: var(--color-ink);
}

h1 {
    font-size: 2.5rem;
    text-align: center;
    border-bottom: 2px solid var(--color-ink);
    padding-bottom: 10px;
    margin-bottom: 20px;
    /* Apply wobble to headers */
    filter: url(#ink-wiggle-text);
}

/* Components */

/* The "Wobbly" Container - mimics a hand-drawn panel */
.panel {
    border: 2px solid var(--color-ink);
    padding: 20px;
    margin: 20px 0;
    position: relative;
    background-color: var(--color-paper);
}

/* Apply the SVG squiggly filter to borders */
.ink-border {
    filter: url(#ink-wiggle-border);
}

/* Buttons that look like stamped ink or cut paper */
.btn-vintage {
    background: transparent;
    border: 2px solid var(--color-ink);
    color: var(--color-ink);
    font-family: var(--font-heading-main);
    font-size: 1.2rem;
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    filter: url(#ink-wiggle-border);
    margin: auto;
}

.btn-vintage:hover {
    background-color: var(--color-ink);
    color: var(--color-paper);
    /* Remove filter on hover for a "pop" effect? or keep it? Keeping it ensures immersion. */
}

.btn-primary {
    border-color: var(--color-dull-red);
    color: var(--color-dull-red);
}

.btn-primary:hover {
    background-color: var(--color-dull-red);
}

/* Inputs - Underline style only */
input[type="text"],
input[type="number"],
select,
textarea {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-ink);
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-ink);
    padding: 5px;
    width: 100%;
    outline: none;
    filter: url(#ink-wiggle-text);
}


/* Layout for the Style Guide */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2rem;
    }
}

/* --- App Shell & Layout --- */

body {
    overflow-x: hidden;
    background-color: var(--color-paper);
    min-height: 100vh;
    padding-bottom: 0;
}

/* Hide SVG filter definitions (they were taking up visual space) */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.app-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 15px 30px;
    /* Halved top padding (10px) and added to bottom (30px) for better balance */
}

/* --- Simple Text Navigation (Mobile) --- */

.top-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    font-family: 'Crimson Text', serif;
}

/* Mobile: Improve top nav spacing */
@media (max-width: 600px) {
    .top-nav {
        gap: 5px;
        margin-bottom: 15px;
    }

    .top-nav .nav-link {
        font-size: 0.8rem;
    }
}

.top-nav .nav-link {
    color: #1A1411;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}

.top-nav .nav-link:hover {
    opacity: 0.7;
}

.top-nav .nav-link.active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.top-nav .nav-divider {
    color: #1A1411;
    font-size: 0.9rem;
}

/* --- Header with Logo --- */

.main-header {
    text-align: center;
    padding: 5px 0 5px;
    /* Minimal top padding */
    margin-bottom: 10px;
    /* Reduced margin */
    background: transparent;
    position: relative;
}

/* Mobile: Reduce header spacing */
@media (max-width: 600px) {
    .main-header {
        margin-bottom: 8px;
    }

    .header-logo {
        width: 200px;
    }

    .header-title {
        font-size: 1.2rem;
    }
}

.header-logo {
    width: 280px;
    /* Significantly enlarged */
    height: auto;
    display: block;
    margin: 0 auto 8px;
    /* Reduced bottom margin */
}

.header-divider {
    width: 100px;
    height: 1px;
    background-color: #1A1411;
    margin: 0 auto 5px;
    /* Reduced margin */
    opacity: 0.3;
}

.header-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #1A1411;
    margin: 0;
    border: none;
    padding-bottom: 8px;
    /* Reduced padding */
    text-align: center;
}

.status-indicator {
    font-family: 'Lora', serif;
    font-size: 0.7rem;
    margin-top: 10px;
    color: var(--color-dull-red);
    transition: opacity 1s ease;
}

/* --- Desktop Navigation Bar --- */

.desktop-nav {
    display: none;
    /* Hidden on mobile */
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid #1A1411;
    margin-bottom: 30px;
}

.desktop-nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.desktop-nav .nav-link {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    color: #1A1411;
    text-decoration: none;
    transition: opacity 0.2s;
}

.desktop-nav .nav-link:hover {
    opacity: 0.7;
}

.desktop-nav .nav-link.active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.desktop-nav .nav-bullet {
    color: #1A1411;
}

.btn-add-desktop {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 0.85rem;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    padding: 10px 20px;
    background: linear-gradient(135deg, #F5EFE0 0%, #EDE7D9 100%);
    border: 2px solid #1A1411;
    color: #1A1411;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    box-shadow:
        0 0 0 1px #1A1411,
        inset 0 1px 2px rgba(245, 239, 224, 0.8),
        0 2px 4px rgba(26, 20, 17, 0.2);
}

.btn-add-desktop::before {
    content: '✦';
    font-size: 0.7rem;
    margin-right: 4px;
    color: #704214;
}

.btn-add-desktop:hover {
    background: linear-gradient(135deg, #EDE7D9 0%, #E8DCC8 100%);
    box-shadow:
        0 0 0 1px #704214,
        inset 0 1px 2px rgba(245, 239, 224, 0.9),
        0 3px 6px rgba(26, 20, 17, 0.25);
    border-color: #704214;
    color: #704214;
}

.search-icon {
    display: none;
}

/* --- Humidor Grid & Cards --- */

.humidor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns on mobile */
    gap: 15px;
    margin-bottom: 80px;
}

/* ========================================================================
   COLLECTION TABLE LAYOUT
   ======================================================================== */

.collection-table-container {
    margin-bottom: 80px;
    overflow-x: auto;
    border: 2px solid var(--color-sepia);
    position: relative;
}

/* Inner border for vintage effect (sepia inlay) */
.collection-table-container::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid var(--color-sepia-light);
    pointer-events: none;
    z-index: 1;
}

.collection-table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    box-shadow:
        0 0 0 1.5px rgba(26, 20, 17, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: var(--font-body);
    position: relative;
    z-index: 2;
}

.collection-table thead {
    background-color: var(--color-ink);
    color: var(--color-paper);
}

.collection-table th {
    padding: 12px 8px;
    text-align: left;
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    letter-spacing: 0.05em;
    font-weight: 400;
    border-bottom: 1px solid var(--color-ink-faded);
}

.collection-table td {
    padding: 10px 8px;
    font-size: 0.95rem;
    color: var(--kb-text-primary);
    text-align: left;
}

/* Column widths - NEW ORDER (6 columns after merge) */
.collection-table th.col-name {
    width: 25%;
    opacity: 0.8;
}

.collection-table th.col-image {
    width: 18%;
}

.collection-table th.col-brand {
    width: 20%;
}

.collection-table th.col-profile {
    width: 16%;
}

.collection-table th.col-size-shape {
    width: 13.91%;
}

.collection-table th.col-qty {
    width: 8.75%;
}

.collection-table tbody tr {
    border-bottom: 1px solid var(--kb-border-light);
    cursor: pointer;
    transition: background-color 0.2s ease;
    height: 60px;  /* Increased from default */
}

.collection-table tbody tr:hover {
    background-color: rgba(139, 115, 85, 0.1);
}

.collection-table tbody tr:last-child {
    border-bottom: none;
}

.collection-table td {
    padding: 10px 8px;
    font-size: 0.95rem;
    color: var(--kb-text-primary);
}

.collection-table td.col-image {
    text-align: left;
    padding-left: 8px;
    padding-right: 8px;
}

.collection-table .cigar-thumb {
    display: block;
    height: auto;
    width: 180%;  /* Original width - scaling handled by JS */
    max-width: none;  /* Allow scaling beyond natural width */
    opacity: 0.85;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
    transition: all 0.3s ease;
}

/* Wiggle animation for cigar images on hover */
@keyframes cigarWiggle {
    0% {
        transform: rotate(180deg);
    }
    25% {
        transform: rotate(180deg) scale(1.08) rotate(3deg);
    }
    50% {
        transform: rotate(180deg) scale(1.08) rotate(-2deg);
    }
    75% {
        transform: rotate(180deg) scale(1.08) rotate(1deg);
    }
    100% {
        transform: rotate(180deg) scale(1.08) rotate(0deg);
    }
}

.collection-table .cigar-thumb:hover {
    opacity: 1;
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.25));
    /* Use animation instead of transform to work with inline styles from JS */
    animation: cigarWiggle 0.4s ease-in-out forwards;
}

.collection-table td.col-brand {
    color: var(--kb-text-secondary);
    font-size: 0.95rem;
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.collection-table td.col-name {
    font-family: var(--font-heading-alt);
    font-style: italic;
    color: var(--kb-text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding-left: 13px;
    font-size: 1.05rem;
}

.collection-table td.col-profile {
    color: var(--kb-text-secondary);
    font-size: 0.95rem;
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    letter-spacing: 0.03em;
    font-weight: 500;
}

/* Merged Size & Shape column styles */
.collection-table td.col-size-shape {
    text-align: left;
    color: var(--kb-text-secondary);
    font-size: 0.90rem;
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.collection-table .shape-display {
    font-weight: 500;
    color: var(--kb-text-secondary);
    margin-bottom: 0.25rem;
    font-family: 0.95rem;
    font-variant: small-caps;
    letter-spacing: 0.03em;
}

.collection-table .size-display {
    color: var(--kb-text-muted);
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    letter-spacing: 0.03em;
    font-size: 1.00rem;
}

.collection-table td.col-qty {
    text-align: left;
    font-weight: 500;
    color: var(--kb-text-secondary);
    font-variant: small-caps;
    font-family: var(--font-heading-main);
    letter-spacing: 0.03em;
    font-size: 1.05rem;
}

/* Collection Table Responsive Styles */

/* Mobile: Hide less important columns and adjust font sizes */
@media (max-width: 600px) {
    .collection-table {
        font-size: 0.85rem;
    }

    .collection-table th,
    .collection-table td {
        padding: 8px 4px;
        text-align: left;
    }

    .collection-table th.col-name,
    .collection-table td.col-name {
        width: 20%;
    }

    .collection-table th.col-image,
    .collection-table td.col-image {
        width: 35%;
    }

    .collection-table th.col-brand,
    .collection-table td.col-brand {
        width: 15%;
    }

    .collection-table th.col-profile,
    .collection-table td.col-profile {
        width: 10%;
    }

    .collection-table th.col-size-shape,
    .collection-table td.col-size-shape {
        width: 10%;
    }

    .collection-table th.col-qty,
    .collection-table td.col-qty {
        width: 10%;
    }
}

/* Extra small mobile: Further adjustments */
@media (max-width: 400px) {
    .collection-table {
        font-size: 0.8rem;
    }

    .collection-table th,
    .collection-table td {
        padding: 6px 3px;
    }

    .collection-table th.col-image,
    .collection-table td.col-image {
        width: 60px;
        padding: 6px 2px;
    }

    .cigar-thumb {
        width: 40px;
    }

    .collection-table th.col-profile,
    .collection-table td.col-profile {
        width: 15%;  /* Keep profile visible on very small screens */
    }
}

.cigar-card {
    background-color: var(--color-paper);
    border: 2px solid #1A1411;
    box-shadow:
        0 0 0 1.5px rgba(26, 20, 17, 0.25),
        /* More pronounced outer line */
        0 2px 4px rgba(0, 0, 0, 0.1),
        /* Subtle drop shadow */
        inset 0 1px 3px rgba(0, 0, 0, 0.08);
    /* Enhanced embossed effect */
    padding: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 134px;
    overflow: hidden;
}

/* Paper texture overlay */
.cigar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/paper_texture.png');
    background-size: cover;
    opacity: 0.08;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
}

/* Ensure content appears above texture */
.cigar-card>* {
    position: relative;
    z-index: 1;
}

.cigar-card:hover {
    transform: translateY(-3px);
    box-shadow:
        3px 6px 12px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(26, 20, 17, 0.15);
}

.cigar-card:active {
    transform: translateY(-1px);
}

.cigar-card.expanded {
    grid-column: 1 / -1;
    min-height: 320px;
    background-color: var(--color-paper);
    transform: none !important;
    border-width: 4px;
    /* Slightly thicker border for expanded state */
}


.card-brand {
    font-family: 'IM Fell DW Pica', serif;
    font-weight: 400;
    font-size: 1.05rem;
    margin-bottom: 1px;
    margin-top: -55px;
    /* Reduced gap above */
    color: #1A1411;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    text-align: center;
    width: 100%;
}

.card-name {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 0.9rem;
    font-style: normal;
    margin-bottom: 1px;
    color: #3D2817;
    text-align: center;
    width: 100%;
    font-variant: small-caps;
}

.card-meta {
    font-family: 'Lora', serif;
    font-size: 0.7rem;
    color: #57493C;
    margin-bottom: 1px;
    line-height: 1.5;
    text-align: center;
    width: 100%;
}

.card-qty {
    font-family: 'IM Fell DW Pica', serif;
    font-weight: 400;
    font-size: 0.65rem;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    color: #57493C;
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: transparent;
    padding: 0;
    border: none;
    opacity: 0.7;
    z-index: 10;
    pointer-events: none;
}

.card-details {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 2px dashed #3D2817;
    /* Sepia ink dashed line */
    font-size: 0.9rem;
}

.card-details.hidden {
    display: none;
}

/* --- Navigation & FAB --- */

.fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;

    /* Cream parchment background */
    background: radial-gradient(circle, #F5EFE0 0%, #E8DCC8 100%);

    /* Black ink border */
    border: 4px solid #1A1411;

    /* Plus symbol */
    color: #1A1411;
    font-size: 2.5rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Embossed stamp effect */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15);

    z-index: 100;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

/* Mobile: Adjust FAB size and position */
@media (max-width: 600px) {
    .fab {
        width: 60px;
        height: 60px;
        bottom: 75px;
        right: 15px;
        font-size: 2rem;
    }
}

.fab:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.7);
}

.fab:active {
    transform: scale(0.95);
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0;
}

/* --- Footer Banner (Page Bottom Ornament) --- */

.page-bottom-ornament {
    position: relative;
    /* NOT fixed - flows with page content */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    /* Further reduced */
    margin-top: 40px;
    margin-bottom: 15px;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.footer-pattern {
    position: absolute;
    height: 100%;
    background-repeat: repeat-x;
    background-size: auto 30px;
    /* Further reduced */
    background-position: center;
}

.footer-left-pattern {
    background-image: url('../assets/images/banner-footer-left.png');
    left: 0;
    right: 50%;
}

.footer-right-pattern {
    background-image: url('../assets/images/banner-footer-right.png');
    left: 50%;
    right: 0;
}

.footer-center {
    position: relative;
    z-index: 2;
    background-image: url('../assets/images/banner-footer-center.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 135px;
    /* Further reduced */
    height: 30px;
    /* Further reduced */
    flex-shrink: 0;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #E8DCC8;
    /* Slightly darker parchment for nav background */
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 3px solid #1A1411;
    /* Black ink border */
    z-index: 99;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
    background: linear-gradient(180deg, #F5EFE0 0%, #E8DCC8 100%);
    border: 3px solid #1A1411;
    border-bottom: none;
    /* Tab effect */
    border-radius: 8px 8px 0 0;

    font-family: 'Crimson Text', serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #1A1411;

    padding: 12px 32px 14px;
    cursor: pointer;
    transition: all 0.2s ease;

    /* Embossed effect */
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08);
}

/* Mobile: Improve bottom nav */
@media (max-width: 600px) {
    .bottom-nav {
        height: 60px;
    }

    .nav-item {
        font-size: 0.85rem;
        padding: 10px 20px 12px;
    }
}

.nav-item:hover {
    background: #F5EFE0;
    transform: translateY(-2px);
}

.nav-item.active {
    background: #FFFEF8;
    /* Brighter cream */
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* --- Modals --- */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 21, 16, 0.8);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Mobile: Reduce modal padding for full-width experience */
@media (max-width: 600px) {
    .modal {
        padding: 0;
    }
}

.modal:not(.hidden) {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--color-paper);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-image: url('../assets/images/paper_texture.png');
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-ink);
    padding-bottom: 10px;
}

.modal-header h2 {
    margin: 0;
    border: none;
    font-size: 1.5rem;
}

.btn-close {
    background: none;
    border: none;
    font-family: var(--font-header-alt);
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-ink);
}

/* Red italic accent text utility class */
.text-accent {
    font-family: var(--font-heading-main);
    font-style: italic;
    color: var(--color-dull-red);
}

/* --- Add Cigar Modal Specific Styles --- */

/* Modal header with vintage styling */
#add-cigar-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 3px double var(--color-sepia);
    background: rgba(255, 255, 255, 0.3);
    position: relative;
}

/* Inner border effect for modal header */
#add-cigar-modal .modal-header::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid var(--color-sepia-light);
    pointer-events: none;
}

#add-cigar-modal .modal-title {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 1.6rem;
    color: var(--color-ink);
    margin: 0;
    letter-spacing: 0.08em;
}

#add-cigar-modal .modal-close {
    font-family: var(--font-heading-main);
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid var(--color-sepia);
    color: var(--color-ink);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 4px;
}

#add-cigar-modal .modal-close::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid var(--color-sepia-light);
    pointer-events: none;
    border-radius: 2px;
}

#add-cigar-modal .modal-close:hover {
    background: var(--color-dull-red);
    border-color: var(--color-dull-red);
    color: var(--color-paper);
}

/* Modal body with vintage paper styling */
#add-cigar-modal .modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    background: rgba(245, 239, 224, 0.5);
}

/* Search input wrapper */
.search-input-wrapper {
    margin-bottom: 1.5rem;
}

.search-input-wrapper .input-label {
    display: block;
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 0.95rem;
    color: var(--color-ink);
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.search-input-wrapper .form-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid var(--color-sepia);
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-ink);
    outline: none;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.search-input-wrapper .form-input::placeholder {
    color: var(--color-sepia);
    opacity: 0.6;
    font-style: italic;
}

.search-input-wrapper .form-input:focus {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--color-dull-red);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(139, 58, 58, 0.1);
}

/* Input hint text */
.input-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--color-sepia);
    font-style: italic;
    opacity: 0.7;
}

/* Enhanced empty state for search results */
.empty-search-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-sepia);
}

.empty-search-state .empty-icon {
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-search-state .empty-title {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 1.3rem;
    color: var(--color-ink);
    margin: 0 0 0.5rem 0;
}

.empty-search-state .empty-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-sepia);
    margin: 0;
    line-height: 1.5;
}

/* Enhanced search results list */
#add-cigar-modal .search-results-list {
    flex: 1;
    overflow-y: visible;
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* Enhanced search item styling */
.search-item {
    background-color: var(--color-paper);
    border: 2px solid var(--color-sepia);
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    margin-bottom: 12px;
    border-radius: 4px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 3px rgba(255, 255, 255, 0.5);
}

/* Inner border effect for search items */
.search-item::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid var(--color-sepia-light);
    pointer-events: none;
    border-radius: 2px;
    z-index: 1;
}

/* Paper texture overlay */
.search-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/paper_texture.png');
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
    border-radius: 2px;
}

/* Ensure content appears above texture */
.search-item > * {
    position: relative;
    z-index: 2;
}

.search-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-dull-red);
    box-shadow:
        0 4px 12px rgba(139, 58, 58, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.6);
}

.search-item:hover::before {
    border-color: rgba(139, 58, 58, 0.4);
}

.search-item-brand {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-ink);
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

.search-item-name {
    font-family: var(--font-heading-alt);
    font-size: 0.95rem;
    color: var(--color-slate-blue);
    font-style: italic;
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
    #add-cigar-modal .modal-header {
        padding: 1.25rem 1.5rem;
    }
    
    #add-cigar-modal .modal-title {
        font-size: 1.3rem;
    }
    
    #add-cigar-modal .modal-body {
        padding: 1.5rem;
    }
    
    .search-input-wrapper .form-input {
        font-size: 1rem;
        padding: 12px 14px;
    }
    
    .empty-search-state {
        padding: 30px 15px;
    }
    
    .empty-search-state .empty-icon {
        font-size: 2.5rem;
    }
    
    .empty-search-state .empty-title {
        font-size: 1.1rem;
    }
}

/* Collection Modal Styles */
.modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 20, 17, 0.7);
    backdrop-filter: blur(2px);
}

.modal-container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    max-height: 85vh;
    background: var(--color-paper);
    background-image: var(--texture-paper);
    border: 4px double var(--color-sepia);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-container--small {
    max-width: 500px;
}

.modal-title {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 1.8rem;
    color: var(--color-ink);
    margin: 0;
}

.modal-close {
    font-family: var(--font-heading-main);
    font-size: 2rem;
    background: none;
    border: none;
    color: var(--color-ink);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--color-dull-red);
}

.modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 1.5rem 2rem;
    border-top: 2px solid var(--color-sepia);
    background: rgba(139, 115, 85, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* ========================================================================
   VARIANT MODAL STYLES
   ======================================================================== */

/* Variant modal header with vintage styling */
#variant-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 3px double var(--color-sepia);
    background: rgba(255, 255, 255, 0.3);
    position: relative;
}

/* Inner border effect for variant modal header */
#variant-modal .modal-header::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid var(--color-sepia-light);
    pointer-events: none;
}

#variant-modal .modal-title {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 1.6rem;
    color: var(--color-ink);
    margin: 0;
    letter-spacing: 0.08em;
}

#variant-modal .modal-close {
    font-family: var(--font-heading-main);
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid var(--color-sepia);
    color: var(--color-ink);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 4px;
}

#variant-modal .modal-close::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid var(--color-sepia-light);
    pointer-events: none;
    border-radius: 2px;
}

#variant-modal .modal-close:hover {
    background: var(--color-dull-red);
    border-color: var(--color-dull-red);
    color: var(--color-paper);
}

/* Variant modal body with vintage paper styling */
#variant-modal .modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    background: rgba(245, 239, 224, 0.5);
}

/* Base name styling for variant modal */
.variant-base-name {
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
    color: var(--color-sepia);
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-sepia-light);
    border-radius: 4px;
    font-size: 0.95rem;
}

/* Form row for two-column layout */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Form group styling */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group .input-label {
    display: block;
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 0.9rem;
    color: var(--color-ink);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.form-group .form-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid var(--color-sepia);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-ink);
    outline: none;
    transition: all 0.2s ease;
    border-radius: 2px;
}

.form-group .form-input::placeholder {
    color: var(--color-sepia);
    opacity: 0.6;
    font-style: italic;
}

.form-group .form-input:focus {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--color-dull-red);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(139, 58, 58, 0.1);
}

.form-group .form-input--small {
    width: 80px;
}

/* Mobile responsive adjustments for variant modal */
@media (max-width: 600px) {
    #variant-modal .modal-header {
        padding: 1.25rem 1.5rem;
    }
    
    #variant-modal .modal-title {
        font-size: 1.3rem;
    }
    
    #variant-modal .modal-body {
        padding: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Collection grid */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
}

.collection-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--color-sepia-light);
    background: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.collection-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.collection-item-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* 95% container fill for largest, uniform scale for all */
    max-width: 95%;
    aspect-ratio: 3 / 1;
}

.collection-item-name {
    font-family: var(--font-heading-alt);
    font-variant: small-caps;
    font-size: 0.85rem;
    color: var(--color-ink);
    margin-top: 0.75rem;
    text-align: center;
}

.collection-empty {
    text-align: center;
    padding: 3rem;
    font-family: var(--font-heading-alt);
    font-variant: small-caps;
    font-size: 1.1rem;
    color: var(--color-sepia);
}

/* Vintage button style */
.btn-vintage {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 1rem;
    padding: 0.75rem 2rem;
    background: transparent;
    border: 2px solid var(--color-ink);
    color: var(--color-ink);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-vintage:hover {
    background: var(--color-ink);
    color: var(--color-paper);
}

.btn-vintage--primary {
    background: var(--color-sepia);
    color: var(--color-paper);
    border-color: var(--color-sepia);
}

.btn-vintage--primary:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
}

/* Navigation hover states with .text-accent */
.nav-link:hover {
    font-family: var(--font-body);
    color: var(--color-dull-red);
}

/* ========================================================================
   ENHANCED SEARCH RESULTS STYLES
   ======================================================================== */

/* --- Search Results --- */

.search-results-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 15px;
    padding-top: 10px;
}

/* Enhanced search result item with details and actions */
.search-result-item {
    background-color: var(--color-paper);
    border: 2px solid var(--color-sepia);
    padding: 16px 18px;
    transition: all 0.25s ease;
    position: relative;
    margin-bottom: 12px;
    border-radius: 4px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 3px rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

/* Inner border effect for search result items */
.search-result-item::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid var(--color-sepia-light);
    pointer-events: none;
    border-radius: 2px;
    z-index: 1;
}

/* Paper texture overlay */
.search-result-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/paper_texture.png');
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
    border-radius: 2px;
}

/* Ensure content appears above texture */
.search-result-item > * {
    position: relative;
    z-index: 2;
}

.search-result-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-dull-red);
    box-shadow:
        0 4px 12px rgba(139, 58, 58, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.6);
}

.search-result-item:hover::before {
    border-color: rgba(139, 58, 58, 0.4);
}

/* Search result header with brand and name */
.search-result-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

/* Header row wrapper for brand/name and create variant link */
.search-result-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Container for brand and name */
.search-result-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0; /* Allows text truncation */
}

.search-result-brand {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-ink);
    letter-spacing: 0.05em;
}

.search-result-name {
    font-family: var(--font-heading-alt);
    font-size: 0.95rem;
    color: var(--color-slate-blue);
    font-style: italic;
}

/* Create variant link - unobtrusive italic red text */
.search-result-create-variant {
    font-family: var(--font-heading-alt);
    font-size: 0.8rem;
    color: var(--color-dull-red);
    font-style: italic;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    opacity: 0.7;
    margin-left: auto;
    white-space: nowrap;
}

.search-result-create-variant:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Search result details grid */
.search-result-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
    margin-bottom: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-sepia-light);
}

.search-result-detail {
    display: flex;
    flex-direction: column;
}

.search-result-detail-label {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 0.7rem;
    color: var(--color-sepia);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.search-result-detail-value {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-ink);
}

/* Search result actions with quantity input and add button */
.search-result-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-sepia-light);
}

.search-result-qty-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-result-qty-label {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 0.75rem;
    color: var(--color-sepia);
    letter-spacing: 0.05em;
}

.search-result-qty-input {
    width: 60px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid var(--color-sepia);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-ink);
    text-align: center;
    border-radius: 2px;
    outline: none;
    transition: all 0.2s ease;
}

.search-result-qty-input:focus {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--color-dull-red);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(139, 58, 58, 0.1);
}

.search-result-add-btn {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    background: transparent;
    border: 2px solid var(--color-ink);
    color: var(--color-ink);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 2px;
    white-space: nowrap;
}

.search-result-add-btn:hover {
    background: var(--color-ink);
    color: var(--color-paper);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.search-result-add-btn:active {
    transform: translateY(0);
}

/* Custom variant button styling */
.search-result-custom {
    background: rgba(139, 115, 85, 0.15);
    border-color: var(--color-sepia);
    border-style: dashed;
}

.search-result-custom .search-result-brand {
    color: var(--color-dull-red);
}

.search-result-custom:hover {
    background: rgba(139, 115, 85, 0.25);
    border-color: var(--color-dull-red);
}

/* Legacy search-item styles for backward compatibility */
.search-item {
    background-color: var(--color-paper);
    border: 2px solid #1A1411;
    box-shadow:
        0 0 0 1.5px rgba(26, 20, 17, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    margin-bottom: 10px;
    border-radius: 2px;
}

/* Paper texture overlay */
.search-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/paper_texture.png');
    background-size: cover;
    opacity: 0.08;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
}

/* Ensure content appears above texture */
.search-item > * {
    position: relative;
    z-index: 1;
}

.search-item:hover {
    transform: translateY(-2px);
    box-shadow:
        3px 6px 12px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(26, 20, 17, 0.15);
}

.search-item-brand {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-weight: 400;
    font-size: 1rem;
}

.search-item-name {
    font-family: var(--font-heading-alt);
    font-size: 0.9rem;
    color: var(--color-slate-blue);
}

.empty-search-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-sepia);
}

.empty-search-state .empty-icon {
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-search-state .empty-title {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 1.3rem;
    color: var(--color-ink);
    margin: 0 0 0.5rem 0;
}

.empty-search-state .empty-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-sepia);
    margin: 0;
    line-height: 1.5;
}

/* Mobile responsive adjustments for search results */
@media (max-width: 600px) {
    .search-result-item {
        padding: 14px 16px;
    }
    
    .search-result-details {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .search-result-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .search-result-qty-wrapper {
        justify-content: space-between;
    }
    
    .search-result-qty-input {
        width: 70px;
    }
    
    .search-result-add-btn {
        width: 100%;
        text-align: center;
    }
}

/* --- Management Controls --- */

.btn-text {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--color-slate-blue);
    text-decoration: underline;
    font-size: 0.8rem;
    transition: color 0.2s;
}

#clear-reference {
    text-align: left;
}

#btn-clear-form {
    text-align: center;
}

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

.btn-qty-adj {
    font-size: 1.3rem;
    padding: 0 5px;
    cursor: pointer;
    color: var(--color-sepia);
    background: none;
    border: none;
    transition: transform 0.1s;
}

.btn-qty-adj:hover {
    transform: scale(1.2);
    color: var(--color-ink);
}

.btn-remove-specimen {
    border-color: var(--color-dull-red) !important;
    color: var(--color-dull-red) !important;
}

.btn-remove-specimen:hover {
    background-color: var(--color-dull-red) !important;
    color: var(--color-paper) !important;
}

/* --- Cigar Visual Images --- */

.cigar-visual {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
    /* Vertical display */
    width: 45px;
    /* Reduced by 10% from 50px - visual height when rotated */
    height: 164px;
    /* Reduced by 10% from 182px - visual width when rotated */
    max-height: none;
    margin: -50px auto 0;
    /* Eliminated vertical margins to remove dead space */
    flex-shrink: 0;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.15));
}

.cigar-card.expanded .cigar-visual {
    width: 80px;
    /* Even larger in expanded view */
    height: 250px;
    transform: rotate(180deg);
    /* Vertical display in modal */
}

/* Cigar vitola image mappings - Base images */
.cigar-belicoso {
    background-image: url('../assets/cigars/belicoso.png');
}

.cigar-campana {
    background-image: url('../assets/cigars/campana.png');
}

.cigar-churchill {
    background-image: url('../assets/cigars/churchill.png');
}

.cigar-cigarillo {
    background-image: url('../assets/cigars/panatela.png'); /* Fallback: cigarillo not available */
}

.cigar-corona {
    background-image: url('../assets/cigars/corona.png');
}

.cigar-corona-gorda {
    background-image: url('../assets/cigars/corona-gorda.png');
}

.cigar-culebra {
    background-image: url('../assets/cigars/culebra.png');
}

.cigar-diadema {
    background-image: url('../assets/cigars/diadema.png');
}

.cigar-double-corona {
    background-image: url('../assets/cigars/double-corona.png');
}

.cigar-gordo {
    background-image: url('../assets/cigars/gordo.png');
}

.cigar-gran-corona {
    background-image: url('../assets/cigars/gran-corona.png');
}

.cigar-lancero {
    background-image: url('../assets/cigars/lancero.png');
}

.cigar-lonsdale {
    background-image: url('../assets/cigars/lonsdale.png');
}

.cigar-panatela {
    background-image: url('../assets/cigars/panatela.png');
}

.cigar-perfecto {
    background-image: url('../assets/cigars/perfecto.png');
}

.cigar-perla {
    background-image: url('../assets/cigars/perla.png');
}

.cigar-petit-belicoso {
    background-image: url('../assets/cigars/petit-belicoso.png');
}

.cigar-petit-corona {
    background-image: url('../assets/cigars/petit-corona.png');
}

.cigar-presidente {
    background-image: url('../assets/cigars/gran-corona.png'); /* Fallback: presidente not available */
}

.cigar-pyramid {
    background-image: url('../assets/cigars/pyramid.png');
}

.cigar-robusto {
    background-image: url('../assets/cigars/robusto.png');
}

.cigar-salomon {
    background-image: url('../assets/cigars/salomon.png');
}

.cigar-toro {
    background-image: url('../assets/cigars/toro.png');
}

.cigar-torpedo {
    background-image: url('../assets/cigars/torpedo.png');
}

/* Profile-specific dark variants for full/medium-full profiles */
.cigar-belicoso-dark,
.cigar-belicoso.profile-dark {
    background-image: url('../assets/cigars/belicoso-dark.png');
}

.cigar-campana-dark,
.cigar-campana.profile-dark {
    background-image: url('../assets/cigars/campana-dark.png');
}

.cigar-churchill-dark,
.cigar-churchill.profile-dark {
    background-image: url('../assets/cigars/churchill-dark.png');
}

.cigar-corona-dark,
.cigar-corona.profile-dark {
    background-image: url('../assets/cigars/corona-dark.png');
}

.cigar-corona-gorda-dark,
.cigar-corona-gorda.profile-dark {
    background-image: url('../assets/cigars/corona-gorda-dark.png');
}

.cigar-culebra-dark,
.cigar-culebra.profile-dark {
    background-image: url('../assets/cigars/culebra-dark.png');
}

.cigar-diadema-dark,
.cigar-diadema.profile-dark {
    background-image: url('../assets/cigars/diadema-dark.png');
}

.cigar-double-corona-dark,
.cigar-double-corona.profile-dark {
    background-image: url('../assets/cigars/double-corona-dark.png');
}

.cigar-gordo-dark,
.cigar-gordo.profile-dark {
    background-image: url('../assets/cigars/gordo-dark.png');
}

.cigar-gran-corona-dark,
.cigar-gran-corona.profile-dark {
    background-image: url('../assets/cigars/gran-corona-dark.png');
}

.cigar-lancero-dark,
.cigar-lancero.profile-dark {
    background-image: url('../assets/cigars/lancero-dark.png');
}

.cigar-lonsdale-dark,
.cigar-lonsdale.profile-dark {
    background-image: url('../assets/cigars/lonsdale-dark.png');
}

.cigar-panatela-dark,
.cigar-panatela.profile-dark {
    background-image: url('../assets/cigars/panatela-dark.png');
}

.cigar-perfecto-dark,
.cigar-perfecto.profile-dark {
    background-image: url('../assets/cigars/perfecto-dark.png');
}

.cigar-perla-dark,
.cigar-perla.profile-dark {
    background-image: url('../assets/cigars/perla-dark.png');
}

.cigar-petit-belicoso-dark,
.cigar-petit-belicoso.profile-dark {
    background-image: url('../assets/cigars/petit-belicoso-dark.png');
}

.cigar-petit-corona-dark,
.cigar-petit-corona.profile-dark {
    background-image: url('../assets/cigars/petit-corona-dark.png');
}

.cigar-pyramid-dark,
.cigar-pyramid.profile-dark {
    background-image: url('../assets/cigars/pyramid-dark.png');
}

.cigar-robusto-dark,
.cigar-robusto.profile-dark {
    background-image: url('../assets/cigars/robusto-dark.png');
}

.cigar-salomon-dark,
.cigar-salomon.profile-dark {
    background-image: url('../assets/cigars/salomon-dark.png');
}

.cigar-toro-dark,
.cigar-toro.profile-dark {
    background-image: url('../assets/cigars/toro-dark.png');
}

.cigar-torpedo-dark,
.cigar-torpedo.profile-dark {
    background-image: url('../assets/cigars/torpedo-dark.png');
}

/* Profile-specific light variants for mild/mild-medium profiles */
.cigar-belicoso-light,
.cigar-belicoso.profile-light {
    background-image: url('../assets/cigars/belicoso-light.png');
}

.cigar-campana-light,
.cigar-campana.profile-light {
    background-image: url('../assets/cigars/campana-light.png');
}

.cigar-churchill-light,
.cigar-churchill.profile-light {
    background-image: url('../assets/cigars/churchill-light.png');
}

.cigar-corona-light,
.cigar-corona.profile-light {
    background-image: url('../assets/cigars/corona-light.png');
}

.cigar-corona-gorda-light,
.cigar-corona-gorda.profile-light {
    background-image: url('../assets/cigars/corona-gorda-light.png');
}

.cigar-culebra-light,
.cigar-culebra.profile-light {
    background-image: url('../assets/cigars/culebra-light.png');
}

.cigar-diadema-light,
.cigar-diadema.profile-light {
    background-image: url('../assets/cigars/diadema-light.png');
}

.cigar-double-corona-light,
.cigar-double-corona.profile-light {
    background-image: url('../assets/cigars/double-corona-light.png');
}

.cigar-gordo-light,
.cigar-gordo.profile-light {
    background-image: url('../assets/cigars/gordo-light.png');
}

.cigar-gran-corona-light,
.cigar-gran-corona.profile-light {
    background-image: url('../assets/cigars/gran-corona-light.png');
}

.cigar-lancero-light,
.cigar-lancero.profile-light {
    background-image: url('../assets/cigars/lancero-light.png');
}

.cigar-lonsdale-light,
.cigar-lonsdale.profile-light {
    background-image: url('../assets/cigars/lonsdale-light.png');
}

.cigar-panatela-light,
.cigar-panatela.profile-light {
    background-image: url('../assets/cigars/panatela-light.png');
}

.cigar-perfecto-light,
.cigar-perfecto.profile-light {
    background-image: url('../assets/cigars/perfecto-light.png');
}

.cigar-perla-light,
.cigar-perla.profile-light {
    background-image: url('../assets/cigars/perla-light.png');
}

.cigar-petit-belicoso-light,
.cigar-petit-belicoso.profile-light {
    background-image: url('../assets/cigars/petit-belicoso-light.png');
}

.cigar-petit-corona-light,
.cigar-petit-corona.profile-light {
    background-image: url('../assets/cigars/petit-corona-light.png');
}

.cigar-pyramid-light,
.cigar-pyramid.profile-light {
    background-image: url('../assets/cigars/pyramid-light.png');
}

.cigar-robusto-light,
.cigar-robusto.profile-light {
    background-image: url('../assets/cigars/robusto-light.png');
}

.cigar-salomon-light,
.cigar-salomon.profile-light {
    background-image: url('../assets/cigars/salomon-light.png');
}

.cigar-toro-light,
.cigar-toro.profile-light {
    background-image: url('../assets/cigars/toro-light.png');
}

.cigar-torpedo-light,
.cigar-torpedo.profile-light {
    background-image: url('../assets/cigars/torpedo-light.png');
}

/* --- Specimen Certificate Modal --- */

.certificate-container {
    background-color: var(--color-paper);
    max-width: 700px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 0;
}

.certificate-border {
    border: 3px solid #1A1411;
    padding: 30px;
    position: relative;

    /* Refined embossed effect - softer than before */
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(26, 20, 17, 0.1),
        inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

/* Mobile: Full-screen modal */
@media (max-width: 750px) {
    .certificate-container {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .certificate-border {
        border-width: 2px;
        padding: 20px;
        min-height: 100vh;
    }
}

.btn-close-certificate {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: 2px solid #1A1411;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #1A1411;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.btn-close-certificate:hover {
    background: #1A1411;
    color: #F5EFE0;
    transform: rotate(90deg);
}



/* Centered Identity Section */
.certificate-identity {
    text-align: center;
    margin-bottom: 10px;
    /* Reduced from 20px */
    padding: 10px 0;
    /* Reduced from 15px */
    border-bottom: 1px solid rgba(26, 20, 17, 0.2);
}

.cigar-brand {
    font-family: 'IM Fell English', serif;
    font-size: 1.8rem;
    font-weight: 400;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    color: #1A1411;
    margin-bottom: 8px;
    text-transform: lowercase;
    /* Force lowercase so small-caps displays properly instead of ALL CAPS */
}

.cigar-name {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 1.4rem;
    font-weight: 400;
    font-variant: small-caps;
    color: #3D2817;
    margin-bottom: 5px;
}

.cigar-vitola {
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #57493C;
}

/* Hero Cigar Display (Larger) */
.certificate-cigar-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    height: 250px;
    overflow: visible;
}

.cigar-visual-large {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 180px;
    height: 280px;
    transform: rotate(-90deg);
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.25));
}

/* Detail modal cigar image */
.detail-cigar-image {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    transform: rotate(180deg);
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.25));
}

/* Vertical cigar display for Concierge recommendations */
.cigar-visual-vertical {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Default dimensions - will be overridden by JavaScript */
    width: 65px;
    height: 280px;
    transform: rotate(-90deg) !important;
    /* 90 degrees counterclockwise for vertical display */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

/* Quantity Tracker */
.quantity-tracker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    margin-bottom: 20px;
    border-top: 1px solid rgba(26, 20, 17, 0.15);
    border-bottom: 1px solid rgba(26, 20, 17, 0.15);
}

.qty-label {
    font-family: 'Lora', serif;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #57493C;
    margin-bottom: 4px;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: 1.5px solid #1A1411;
    background: transparent;
    color: #1A1411;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-family: 'Crimson Text', serif;
}

.qty-btn:hover {
    background: rgba(26, 20, 17, 0.05);
    border-color: #704214;
    color: #704214;
}

.qty-display {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 1.3rem;
    font-weight: 400;
    font-variant: small-caps;
    color: #1A1411;
}

/* Simplified Specifications */
.certificate-specs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    border-bottom: 1px dotted rgba(26, 20, 17, 0.2);
}

.spec-label {
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #57493C;
}

.spec-value {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #1A1411;
}

/* Decorative Divider with Quantity Controls */
.notes-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0 10px 0;
    height: 90px;
    /* Increased by 50% from 60px */
    gap: 20px;
    padding: 0 20px;
    position: relative;
}

/* Quantity Buttons Flanking Divider */
.qty-btn-divider {
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-ink-faded);
    background: transparent;
    color: var(--color-ink);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    border-radius: 2px;
    position: absolute;
    /* Aligned to the center between the stock # and the divider */
    top: 75%;
    transform: translateY(-50%);
}

/* Position + button on left */
#qty-plus {
    left: 20px;
}

/* Position - button on right */
#qty-minus {
    right: 20px;
}

.qty-btn-divider:hover {
    background: rgba(112, 66, 20, 0.15);
    border-color: var(--color-sepia);
    color: var(--color-sepia);
    transform: translateY(-50%) scale(1.05);
}

.qty-btn-divider:active {
    transform: translateY(-50%) scale(0.95);
}

/* Centered Quantity Display Below Divider */
.qty-display-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 20px;
}

.qty-number {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 1.3rem;
    color: var(--color-ink);
    font-weight: 600;
}

.qty-label-small {
    font-family: var(--font-heading-main);
    font-variant: small-caps;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--color-muted-brown);
    opacity: 0.7;
}



.divider-ornament {
    width: 100%;
    height: 90px;
    /* Increased by 50% from 60px */
    /* Divider Options - Switch between opt-01, opt-02, or opt-03 */
    background-image: url('../assets/images/dividers/opt-02.png');
    /* Option 1: Clean, elegant, good asymmetry, frayed ends */
    /* background-image: url('../assets/images/dividers/opt-01.png'); */
    /* Option 2: Beautiful smoke wisps, strong smoldering aesthetic (DEFAULT) */
    /* background-image: url('../assets/images/dividers/opt-02.png'); */
    /* Option 3: Most elaborate, prominent smoke, strongest duality */
    /* background-image: url('../assets/images/dividers/opt-03.png'); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* No chromakey filter needed - background already removed */
}

/* Personal Notes */
.certificate-notes {
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(26, 20, 17, 0.2);
}

.notes-header {
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #57493C;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.notes-content {
    font-family: 'Crimson Text', serif;
    font-size: 0.95rem;
    font-style: italic;
    color: #3D2817;
    line-height: 1.6;
}

/* Action Buttons (Stamp Style) */
.certificate-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-certificate-stamp {
    font-family: 'Crimson Text', serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 20px;
    background: transparent;
    border: 3px solid #1A1411;
    color: #1A1411;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    min-width: 150px;

    /* Stamp emboss effect */
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.btn-certificate-stamp:hover {
    background: #1A1411;
    color: #F5EFE0;
    transform: translateY(-2px);
    box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.btn-certificate-stamp:active {
    transform: translateY(0);
}

.btn-certificate-remove {
    border-color: #8b3a3a;
    color: #8b3a3a;
}

.btn-certificate-remove:hover {
    background: #8b3a3a;
    color: #F5EFE0;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 600px) {
    .certificate-actions {
        flex-direction: column;
    }

    .btn-certificate-stamp {
        width: 100%;
    }

    .cigar-visual-large {
        width: 1827px !important;
        height: 315px !important;
    }

    /* Mobile: Improve certificate modal spacing */
    @media (max-width: 600px) {
        .certificate-container {
            width: 100%;
            max-width: 100%;
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
        }

        .certificate-border {
            padding: 15px;
            min-height: 100vh;
        }

        .certificate-cigar-display {
            height: 100px;
        }

        .certificate-identity {
            padding: 8px 0;
        }

        .certificate-specs {
            margin-bottom: 15px;
        }

        .quantity-tracker {
            margin-bottom: 15px;
        }

        .notes-divider {
            height: 60px;
        }
    }
}

/* --- Responsive Breakpoints --- */

/* Tablet (adjusted for scrollbar during testing) */
@media (min-width: 750px) {
    .humidor-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns */
        gap: 18px;
    }

    .cigar-card {
        height: 173px;
        overflow: hidden;
    }

    .cigar-visual {
        width: 60px;
        /* Visual height when rotated */
        height: 283px;
        /* Visual width when rotated - 80% of tablet card width (measured: 354px) */
    }

    .header-logo {
        width: 200px;
        /* Increased for tablet */
    }

    .header-title {
        font-size: 1.8rem;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .app-container {
        max-width: 1400px;
        padding: 20px 40px;
    }

    /* Hide mobile nav, show desktop nav */
    .top-nav {
        display: none;
    }

    .desktop-nav {
        display: flex;
    }

    /* Larger header */
    .header-logo {
        width: 280px;
        /* Significantly enlarged */
    }

    .header-divider {
        width: 140px;
    }

    .header-title {
        font-size: 2.2rem;
        letter-spacing: 0.2em;
    }

    /* 4 column grid */
    .humidor-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .cigar-card {
        height: 200px;
        overflow: hidden;
    }

    .cigar-visual {
        width: 60px;
        /* Visual height when rotated */
        height: 209px;
        /* Visual width when rotated - 80% of desktop card width (~261px) */
    }

    .card-brand {
        font-size: 1.3rem;
    }

    .card-name {
        font-size: 0.95rem;
    }

    .card-meta {
        font-size: 0.8rem;
    }

    /* Hide FAB on desktop */
    .fab {
        display: none;
    }

    /* --- Concierge View Styles --- */

    /* View Sections */
    .view-section {
        display: block;
    }

    .view-section.hidden {
        display: none;
    }

    /* Concierge Form */
    .concierge-form {
        max-width: 600px;
        margin: 0 auto 30px;
        padding: 25px;
        background-color: var(--color-paper);
    }

    .form-title {
        font-family: 'IM Fell English', serif;
        font-size: 1.8rem;
        font-variant: small-caps;
        text-align: center;
        margin: 0 0 8px 0;
        color: var(--color-ink);
        border-bottom: 2px solid var(--color-sepia);
        padding-bottom: 10px;
    }

    .form-subtitle {
        font-family: 'Crimson Text', serif;
        font-style: italic;
        text-align: center;
        color: var(--color-sepia);
        margin: 0 0 20px 0;
        font-size: 1rem;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .input-label {
        font-family: 'Lora', serif;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #57493C;
        font-size: 0.85rem;
        display: block;
        margin-bottom: 8px;
    }

    /* Autocomplete */
    .autocomplete-container {
        position: relative;
    }

    .autocomplete-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #F5EFE0;
        border: 2px solid var(--color-ink);
        max-height: 200px;
        overflow-y: auto;
        z-index: 100;
        margin-top: 2px;
    }

    .autocomplete-results.hidden {
        display: none;
    }

    .autocomplete-item {
        padding: 10px 15px;
        cursor: pointer;
        border-bottom: 1px solid rgba(26, 20, 17, 0.1);
        transition: background 0.2s;
    }

    .autocomplete-item:hover {
        background-color: rgba(112, 66, 20, 0.15);
    }

    .autocomplete-item-brand {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 0.9rem;
        color: var(--color-ink);
    }

    .autocomplete-item-name {
        font-family: 'Crimson Text', serif;
        font-size: 0.8rem;
        color: var(--color-slate-blue);
    }

    /* Option Buttons */
    .option-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .option-btn {
        flex: 1;
        min-width: 100px;
        padding: 12px 15px;
        background: rgba(255, 255, 255, 0.3);
        border: 2px solid var(--color-sepia);
        color: var(--color-ink);
        font-family: var(--font-heading-alt);
        font-variant: small-caps;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        position: relative;
    }

    .option-btn:hover {
        background-color: rgba(139, 115, 85, 0.2);
        border-color: var(--color-sepia-light);
        transform: translateY(-2px);
    }

    .option-btn.selected {
        background-color: var(--color-sepia);
        color: var(--color-paper);
        border-color: var(--color-sepia);
        transform: scale(0.95);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .option-icon {
        font-size: 1.5rem;
    }

    .option-label {
        font-variant: small-caps;
        letter-spacing: 0.05em;
        font-size: 0.85rem;
    }

    /* Form Actions */
    .form-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px dashed var(--color-sepia);
    }

    /* Ribbon Button */
    .btn-ribbon {
        font-family: 'IM Fell English', serif;
        font-size: 1.2rem;
        font-variant: small-caps;
        letter-spacing: 0.1em;
        padding: 15px 40px;
        background: linear-gradient(135deg, #8b3a3a 0%, #6b2a2a 100%);
        color: #F5EFE0;
        border: none;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 2px rgba(255, 255, 255, 0.2);
    }

    .btn-ribbon::before,
    .btn-ribbon::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
    }

    .btn-ribbon::before {
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 15px 10px 15px 0;
        border-color: transparent #6b2a2a transparent transparent;
    }

    .btn-ribbon::after {
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 15px 0 15px 10px;
        border-color: transparent transparent transparent #6b2a2a;
    }

    .btn-ribbon:hover {
        background: linear-gradient(135deg, #a04a4a 0%, #8b3a3a 100%);
        transform: translateY(-3px);
        box-shadow:
            0 6px 12px rgba(0, 0, 0, 0.25),
            inset 0 1px 2px rgba(255, 255, 255, 0.2);
    }

    .btn-ribbon:active {
        transform: translateY(-1px);
    }

    /* Concierge Results - vintage overhaul */
    .concierge-results {
        max-width: 700px;
        margin: 30px auto;
        /* padding: 30px; */
        /* background: rgba(255, 255, 255, 0.5); */
        /* border: 3px double var(--color-sepia); */
        /* position: relative;*/
    }

    .concierge-results::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .concierge-results.hidden {
        display: none;
    }

    /* Recommendation Card - vintage styling */
    .recommendation-card {
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 25px;
        margin-bottom: 30px;
        position: relative;
        overflow: visible;
    }

    .recommendation-card::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .recommendation-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid var(--color-sepia);
        overflow: visible;
    }

    .recommendation-label {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.1rem;
        color: var(--color-ink);
        letter-spacing: 0.1em;
    }

    .fit-badge {
        font-family: 'Crimson Text', serif;
        font-weight: 700;
        font-size: 1.3rem;
        color: #704214;
        background: transparent;
        border: 2px solid #704214;
        padding: 5px 15px;
        border-radius: 20px;
        position: relative;
        cursor: help;
        display: inline-block;
    }

    /* Fit Breakdown Tooltip */
    .fit-tooltip {
        position: absolute;
        top: calc(100% + 8px);
        right: -10px;
        width: 280px;
        background: #F5EFE0;
        border: 2px solid #704214;
        padding: 15px;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        font-family: 'Crimson Text', serif;
        pointer-events: none;
    }

    .fit-badge:hover .fit-tooltip {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Add arrow to tooltip */
    .fit-tooltip::before {
        content: '';
        position: absolute;
        top: -8px;
        right: 20px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #704214;
    }

    .fit-tooltip::after {
        content: '';
        position: absolute;
        top: -5px;
        right: 21px;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #F5EFE0;
    }

    .fit-tooltip-title {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 1rem;
        color: var(--color-ink);
        margin: 0 0 12px 0;
        padding-bottom: 8px;
        border-bottom: 1px dashed #704214;
    }

    .fit-breakdown-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        font-size: 0.85rem;
    }

    .fit-breakdown-label {
        color: #57493C;
        font-style: italic;
    }

    .fit-breakdown-value {
        font-weight: 600;
        color: var(--color-ink);
    }

    .fit-breakdown-total {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(112, 66, 20, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 700;
        font-size: 0.95rem;
        color: #704214;
    }

    .recommendation-content {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 25px;
        align-items: start;
    }

    .recommendation-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(26, 20, 17, 0.15);
        min-height: 400px;
        /* Defined height so percentage heights on child elements work */
    }

    .recommendation-details {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .rec-brand {
        font-family: 'IM Fell English', serif;
        font-size: 1.6rem;
        font-variant: small-caps;
        letter-spacing: 0.1em;
        color: var(--color-ink);
        margin: 0;
    }

    .rec-name {
        font-family: 'IM Fell DW Pica', serif;
        font-size: 1.2rem;
        font-weight: 400;
        color: #3D2817;
        margin: 0;
    }

    .rec-vitola {
        font-family: 'Lora', serif;
        font-size: 0.95rem;
        color: #57493C;
        margin: 0;
    }

    .rec-specs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin: 15px 0;
    }

    .rec-spec-item {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 8px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(26, 20, 17, 0.1);
    }

    .rec-spec-label {
        font-family: 'Lora', serif;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #57493C;
    }

    .rec-spec-value {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--color-ink);
    }

    /* Also Consider Section */
    .also-consider {
        margin-bottom: 25px;
    }

    .section-title {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 1.3rem;
        text-align: center;
        color: var(--color-ink);
        margin: 0 0 20px 0;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--color-sepia);
    }

    .alternatives-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    .alternative-card {
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 15px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: relative;
    }

    .alternative-card::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .alternative-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .alt-brand {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 0.9rem;
        color: var(--color-ink);
        text-align: center;
    }

    .alt-name {
        font-family: 'IM Fell DW Pica', serif;
        font-size: 0.8rem;
        color: #3D2817;
        text-align: center;
    }

    .alt-fit {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 0.85rem;
        color: #704214;
    }

    /* Alternative visual container - enlarge cigar images by 25% */
    .alternative-visual {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 0;
    }

    .alternative-visual .cigar-visual {
        width: 68px;  /* 50% larger than default 45px */
        height: 168px; /* 50% larger than default 164px */
        transform: rotate(-35deg);
        margin: -30px;
    }

    /* Alternative info container - consistent text styling */
    .alternative-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: center;
        width: 100%;
    }

    .alternative-brand {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        color: var(--color-ink);
        margin: 0;
    }

    .alternative-name {
        font-family: 'IM Fell DW Pica', serif;
        font-size: 0.8rem;
        font-weight: 400;
        color: #3D2817;
        margin: 0;
    }

    .alternative-vitola {
        font-family: 'Lora', serif;
        font-size: 0.75rem;
        color: #57493C;
        margin: 0;
    }

    .alternative-fit {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 0.85rem;
        color: #704214;
        margin: 4px 0 0 0;
    }

    /* Alternative "Log Session" buttons - style to match main recommendation button */
    .btn-swap-alternative {
        /* Base vintage button styles */
        background: transparent;
        border: 2px solid var(--color-dull-red);
        color: var(--color-dull-red);
        font-family: var(--font-heading-main);
        font-size: 1rem;
        padding: 8px 16px;
        cursor: pointer;
        text-transform: uppercase;
        position: relative;
        transition: all 0.2s ease;
        filter: url(#ink-wiggle-border);
        margin: 5px;
        /* Smaller size for alternative cards */
        width: 100%;
    }

    .btn-swap-alternative:hover {
        background-color: var(--color-dull-red);
        color: #F5F0E6; /* Light parchment color on hover */
    }

    /* Results Actions */
    .results-actions {
        display: flex;
        justify-content: center;
        margin-top: 25px;
    }

    /* Responsive */
    @media (max-width: 600px) {
        .recommendation-content {
            grid-template-columns: 1fr;
        }

        .rec-specs {
            grid-template-columns: 1fr;
        }

        .option-buttons {
            flex-direction: column;
        }

        .option-btn {
            min-width: 100%;
            flex-direction: row;
            justify-content: flex-start;
            gap: 15px;
            padding: 10px 20px;
        }

        .btn-ribbon::before,
        .btn-ribbon::after {
            display: none;
        }

        .btn-ribbon {
            padding: 12px 30px;
        }
    }

    /* Hide FAB on Concierge view */
    #concierge-view ~ .fab {
        display: none !important;
    }

    /* --- Dashboard Styles --- */

    .dashboard-section {
        margin-bottom: 40px;
    }

    /* Vintage decorative divider for between sections */
    .vintage-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px 0;
        gap: 15px;
        color: var(--color-sepia);
    }

    .vintage-divider::before,
    .vintage-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--color-sepia), transparent);
        max-width: 100px;
    }

    .vintage-divider .ornament {
        font-family: var(--font-accent);
        font-size: 1.2rem;
        color: var(--color-sepia-light);
    }

    .section-title {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.8rem;
        font-weight: 400;
        text-align: center;
        color: var(--color-ink);
        margin: 0 0 20px 0;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--color-sepia);
        position: relative;
    }

    /* Section title with red italic accent */
    .section-title .accent {
        font-family: var(--font-body);
        font-style: italic;
        color: var(--color-dull-red);
        font-variant: normal;
    }

    .panel-subtitle {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.1rem;
        font-weight: 400;
        color: var(--color-ink);
        margin: 0 0 15px 0;
        padding-bottom: 8px;
        border-bottom: 1px dashed var(--color-sepia);
    }

    /* Overview Cards */
    .overview-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Mobile: Stack overview cards */
    @media (max-width: 600px) {
        .overview-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }

    .overview-card {
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 20px;
        text-align: center;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        position: relative;
    }

    /* Inner border for vintage effect */
    .overview-card::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .overview-label {
        font-family: var(--font-heading-alt);
        font-variant: small-caps;
        font-size: 0.85rem;
        letter-spacing: 0.08em;
        color: var(--color-sepia);
    }

    .overview-value {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 2rem;
        font-weight: 400;
        color: var(--color-ink);
    }

    /* Apply .text-accent to overview values for emphasis */
    .overview-value.accented {
        font-family: var(--font-body);
        font-style: italic;
        color: var(--color-dull-red);
    }

    /* Recent Activity */
    .recent-activity-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .activity-item {
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 15px 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        position: relative;
        transition: all 0.2s ease;
    }

    .activity-item:hover {
        background: rgba(255, 255, 255, 0.7);
        border-color: var(--color-sepia-light);
        transform: translateX(3px);
    }

    /* Inner border for vintage effect */
    .activity-item::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .activity-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .activity-cigar {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.1rem;
        font-weight: 400;
        color: var(--color-ink);
    }

    .activity-meta {
        font-family: var(--font-body);
        font-size: 0.85rem;
        color: var(--color-sepia);
        font-style: italic;
    }

    .activity-rating {
        font-family: var(--font-heading-alt);
        font-variant: small-caps;
        font-weight: 400;
        font-size: 1.2rem;
        color: var(--color-dull-red);
        background: rgba(139, 58, 58, 0.1);
        padding: 6px 12px;
        border: 1px solid var(--color-sepia-light);
        min-width: 45px;
        text-align: center;
    }

    /* Top Cigars */
    .top-cigars-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Mobile: Stack top cigars grid */
    @media (max-width: 600px) {
        .top-cigars-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }

    .top-cigars-panel {
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 20px;
        position: relative;
    }

    /* Inner border for vintage effect */
    .top-cigars-panel::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .top-cigars-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .top-cigar-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid var(--color-sepia-light);
        transition: all 0.2s ease;
    }

    .top-cigar-item:hover {
        background: rgba(255, 255, 255, 0.5);
        border-color: var(--color-sepia);
    }

    .top-cigar-name {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 0.95rem;
        font-weight: 400;
        color: var(--color-ink);
    }

    .top-cigar-count {
        font-family: var(--font-heading-alt);
        font-variant: small-caps;
        font-weight: 400;
        font-size: 0.9rem;
        color: var(--color-dull-red);
    }

    /* Charts */
    .chart-panel {
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 20px;
        margin-bottom: 20px;
        position: relative;
    }

    /* Inner border for vintage effect */
    .chart-panel::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .distributions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Mobile: Stack distributions grid */
    @media (max-width: 600px) {
        .distributions-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }

    /* Vertical Bar Chart */
    .bar-chart {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        gap: 8px;
        height: 150px;
        padding: 10px 0;
        border-bottom: 2px solid var(--color-sepia);
    }

    .bar-chart.vertical {
        flex-direction: row;
    }

    .bar-chart.horizontal {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 6px;
    }

    .chart-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        transition: all 0.3s ease;
    }

    .chart-bar.vertical {
        width: 100%;
        max-width: 40px;
    }

    .chart-bar.horizontal {
        display: grid;
        grid-template-columns: 120px 1fr 30px;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .bar-container {
        width: 100%;
        height: 24px;
        position: relative;
    }

    .bar-fill {
        background: linear-gradient(180deg, var(--color-sepia) 0%, var(--color-sepia-light) 100%);
        border: 1px solid var(--color-ink);
        transition: height 0.3s ease, width 0.3s ease;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }

    .chart-bar.vertical .bar-fill {
        width: 100%;
        border-radius: 2px 2px 0 0;
    }

    .chart-bar.horizontal .bar-fill {
        height: 100%;
        border-radius: 2px 0 0 2px;
        min-width: 4px;
    }

    /* Horizontal Bar Chart Row (JS-generated structure) */
    .bar-chart-row {
        display: grid;
        grid-template-columns: minmax(100px, auto) 1fr 30px;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 6px 0;
    }

    .bar-track {
        width: 100%;
        height: 24px;
        background: rgba(210, 180, 140, 0.15);
        border: 1px solid var(--color-sepia-light);
        border-radius: 2px;
        position: relative;
        overflow: hidden;
    }

    .bar-chart-row .bar-fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        /* Width set inline via JS style attribute */
        background: linear-gradient(90deg,
            var(--color-sepia) 0%,
            var(--color-sepia-light) 100%);
        border: none;
        border-right: 1px solid var(--color-ink);
        border-radius: 2px 0 0 2px;
        transition: width 0.5s ease-out;
    }

    .bar-chart-row .bar-label {
        font-family: var(--font-heading-alt);
        font-variant: small-caps;
        font-size: 0.85rem;
        color: var(--color-ink);
        text-align: left;
        line-height: 1.2;
        padding-right: 4px;
    }

    .bar-chart-row .bar-value {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--color-ink);
        text-align: right;
    }

    /* Bar chart row hover effects */
    .bar-chart-row:hover {
        background: rgba(139, 115, 85, 0.1);
        border-radius: 4px;
        padding-left: 8px;
        padding-right: 8px;
        transition: background 0.2s ease, padding 0.2s ease;
    }

    .bar-chart-row:hover .bar-fill {
        filter: brightness(1.1);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Bar animation on load */
    @keyframes barGrow {
        from {
            width: 0%;
        }
    }

    .bar-fill {
        animation: barGrow 0.6s ease-out forwards;
    }

    /* Responsive adjustments for bar charts */
    @media (max-width: 600px) {
        .bar-chart-row {
            grid-template-columns: minmax(80px, auto) 1fr 25px;
            gap: 6px;
        }

        .bar-chart-row .bar-label {
            font-size: 0.75rem;
        }

        .bar-chart-row .bar-value {
            font-size: 0.8rem;
        }

        .bar-track {
            height: 20px;
        }
    
        /* Normalized bar chart - equal length bars */
        .bar-fill-normalized {
            width: 100% !important;
            position: relative;
            opacity: 0.85;
            transition: opacity 0.2s ease;
        }
    
        /* Data diversity indicator - opacity based on count */
        .bar-fill-normalized[data-count="1"] { opacity: 0.4; }
        .bar-fill-normalized[data-count="2"] { opacity: 0.5; }
        .bar-fill-normalized[data-count="3"] { opacity: 0.6; }
        .bar-fill-normalized[data-count="4"] { opacity: 0.7; }
        .bar-fill-normalized[data-count="5"] { opacity: 0.85; }
    
        /* Count badge for normalized bars */
        .bar-badge {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-family: var(--font-heading-main);
            font-size: 0.9rem;
            color: var(--color-ink);
            font-weight: 600;
            pointer-events: none;
        }
    }

    .bar-label {
        font-family: var(--font-heading-alt);
        font-variant: small-caps;
        font-size: 0.75rem;
        color: var(--color-sepia);
        text-align: left;
        line-height: 1.2;
        align-self: center;
    }

    .chart-bar.vertical .bar-label {
        margin-top: 4px;
        text-align: center;
    }

    .bar-value {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-weight: 400;
        font-size: 0.8rem;
        color: var(--color-ink);
        text-align: right;
    }

    .chart-bar.vertical .bar-value {
        margin-bottom: 2px;
        text-align: center;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 25px;
        font-style: italic;
        color: var(--color-sepia);
        opacity: 0.8;
    }

    .empty-state p {
        font-family: var(--font-body);
        font-style: italic;
        margin: 5px 0;
    }

    .empty-state p {
        margin: 5px 0;
    }

    .empty-state.hidden {
        display: none;
    }

    /* Dashboard Responsive */
    @media (min-width: 750px) {
        .overview-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .top-cigars-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
        }

        .distributions-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
        }

        .overview-value {
            font-size: 2.5rem;
        }
    }

    @media (min-width: 992px) {
        .overview-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .top-cigars-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .distributions-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .bar-chart {
            height: 180px;
        }
    }

    /* Hide FAB on Dashboard view */
    #dashboard-view ~ .fab {
        display: none !important;
    }

    /* ==========================================================================
       PROFILE HUMIDOR
       ========================================================================== */

    .profile-humidor {
        margin-top: 2rem;
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 1.5rem;
        position: relative;
    }

    /* Inner border for vintage effect - matches overview-card */
    .profile-humidor::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .humidor-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .humidor-header .panel-subtitle {
        font-family: var(--font-heading-main);
        font-size: 1.1rem;
        font-weight: 400;
        font-variant: small-caps;
        letter-spacing: 0.08em;
        color: var(--color-ink);
        margin: 0;
    }

    .humidor-shelf {
        display: flex;
        flex-direction: column;
    }

    .profile-shelf-row {
        display: grid;
        grid-template-columns: 120px 1fr auto;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        background: transparent;
        border: none;
        border-radius: 0;
        transition: all 0.2s ease;
    }

    .profile-shelf-row:not(:last-child) {
        border-bottom: 1px solid rgba(26, 20, 17, 0.1);
    }

    .profile-shelf-row:hover {
        background: rgba(139, 115, 85, 0.08);
        transform: translateX(4px);
    }

    .profile-label {
        font-family: var(--font-heading-alt);
        font-size: 0.95rem;
        font-weight: 500;
        font-variant: small-caps;
        letter-spacing: 0.05em;
        color: var(--color-ink);
    }

    .profile-cigars {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        max-width: 100%;
    }

    .cigar-icon {
        width: 40px;
        height: auto;
        opacity: 0.85;
        transition: all 0.3s ease;
        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
        transform: rotate(-35deg);
    }

    .cigar-icon:hover {
        transform: scale(1.15) rotate(2deg);
        opacity: 1;
        filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.25));
    }

    .profile-count {
        font-family: var(--font-heading-main);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-dull-red);
        background: rgba(139, 58, 58, 0.1);
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        min-width: 40px;
        text-align: center;
    }

    .profile-overflow {
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-style: italic;
        color: var(--color-sepia);
        margin-left: 0.25rem;
    }

    /* Empty state */
    .profile-humidor .empty-state {
        text-align: center;
        padding: 2rem;
        color: var(--color-sepia);
        font-family: var(--font-body);
        font-style: italic;
    }

    /* Responsive */
    @media (max-width: 600px) {
        .profile-shelf-row {
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }
        
        .profile-label {
            text-align: center;
            border-bottom: 1px dashed var(--color-sepia-light);
            padding-bottom: 0.5rem;
        }
        
        .profile-cigars {
            justify-content: center;
        }
        
        .profile-count {
            align-self: center;
        }
        
        .cigar-icon {
            width: 32px;
        }
    }

    /* --- Archives View Styles --- */

    .archives-section {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
    }

    .view-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .view-header .section-title {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 2.5rem;
        font-weight: 400;
        color: var(--color-ink);
        margin-bottom: 10px;
    }

    .archives-controls {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }

    .archives-list {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .archive-item {
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 20px;
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
    }

    /* Inner border for vintage effect */
    .archive-item::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .archive-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(26, 20, 17, 0.15);
        background: rgba(255, 255, 255, 0.7);
    }

    .archive-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--color-sepia-light);
    }

    .archive-cigar {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.3rem;
        font-weight: 400;
        color: var(--color-ink);
    }

    .archive-date {
        font-family: var(--font-heading-alt);
        font-variant: small-caps;
        font-size: 0.9rem;
        color: var(--color-sepia);
    }

    .archive-rating {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .archive-rating-value {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.5rem;
        font-weight: 400;
        color: var(--color-dull-red);
    }

    .archive-rating-stars {
        color: var(--color-sepia);
        font-size: 1rem;
    }

    .archive-details {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--color-sepia);
        font-style: italic;
    }

    .archive-detail-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .archive-detail-item::before {
        content: '•';
        color: var(--color-sepia-light);
    }

    .archive-notes {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed var(--color-sepia-light);
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--color-ink);
        font-style: italic;
    }

    /* Archives Responsive */
    @media (max-width: 600px) {
        .archives-list {
            gap: 15px;
        }

        .archive-item {
            padding: 15px;
        }

        .archive-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .archive-cigar {
            font-size: 1.1rem;
        }
    }

    /* --- Session History Styles --- */

    .history-filter-section {
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        padding: 20px;
        margin-bottom: 20px;
        position: relative;
    }

    .history-filter-section::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .history-filter-section .section-title {
        margin-bottom: 20px;
    }

    .filter-row {
        margin-bottom: 15px;
    }

    .filter-row-multi {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    .filter-group {
        flex: 1;
        min-width: 120px;
    }

    .filter-group select {
        width: 100%;
        cursor: pointer;
    }

    /* Session List */
    .history-sessions-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 30px;
    }

    .session-card {
        background-color: var(--color-paper);
        border: 2px solid #1A1411;
        padding: 15px;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

    .session-card:hover {
        transform: translateY(-2px);
        box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.15);
    }

    .session-card-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .session-card-cigar {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 1.1rem;
        color: #1A1411;
        font-weight: 600;
    }

    .session-card-meta {
        font-family: 'Lora', serif;
        font-size: 0.8rem;
        color: #57493C;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .session-card-date {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .session-card-date::before {
        content: '📅';
        font-size: 0.9rem;
    }

    .session-card-notes {
        font-family: 'Crimson Text', serif;
        font-size: 0.85rem;
        color: #3D2817;
        font-style: italic;
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .session-card-rating {
        font-family: 'Crimson Text', serif;
        font-weight: 700;
        font-size: 1.2rem;
        color: #704214;
        background: rgba(112, 66, 20, 0.1);
        padding: 8px 15px;
        border: 2px solid #704214;
        border-radius: 4px;
        min-width: 60px;
        text-align: center;
        flex-shrink: 0;
    }

    /* Session Detail Modal */
    .session-detail-content {
        max-width: 600px;
        max-height: 85vh;
        overflow-y: auto;
    }

    .session-detail-info {
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px dashed var(--color-sepia);
        margin-bottom: 15px;
    }

    .session-detail-cigar-name {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 1.6rem;
        color: var(--color-ink);
        margin-bottom: 8px;
    }

    .session-detail-date {
        font-family: 'Lora', serif;
        font-size: 0.95rem;
        color: #57493C;
    }

    .session-detail-rating {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        padding: 15px;
        background: rgba(112, 66, 20, 0.08);
        border: 1px solid rgba(112, 66, 20, 0.3);
        margin-bottom: 15px;
    }

    .rating-label {
        font-family: 'Lora', serif;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #57493C;
    }

    .rating-value {
        font-family: 'Crimson Text', serif;
        font-weight: 700;
        font-size: 1.5rem;
        color: #704214;
    }

    .session-detail-notes {
        margin-bottom: 20px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(26, 20, 17, 0.2);
    }

    .session-detail-actions {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Hide FAB on History view */
    #history-view ~ .fab {
        display: none !important;
    }

    /* ========================================================================
       RESEARCH KNOWLEDGE BASE - VISUAL REDESIGN
       Three-Column Layout (GitBook-Inspired with Vintage Flair)
       ======================================================================== */
    
    /* === Research Layout: Three-Column with Asymmetric Flair === */
    .research-layout {
        display: grid;
        grid-template-columns: 280px 1fr 240px;
        gap: 0;
        min-height: calc(100vh - 200px);
        max-width: 1440px;
        margin: 0 auto;
        position: relative;
    }

    /* Intentional asymmetric offset for visual interest */
    .research-layout::before {
        content: '';
        position: absolute;
        top: var(--kb-space-4);
        left: calc(280px + var(--kb-offset-noticeable));
        width: 1px;
        height: calc(100% - var(--kb-space-8));
        background: linear-gradient(
            to bottom,
            transparent,
            var(--kb-border-base) 10%,
            var(--kb-border-base) 90%,
            transparent
        );
        opacity: 0.5;
    }
    
    /* Tablet: Two columns (hide TOC sidebar) */
    @media (max-width: 1200px) {
        .research-layout {
            grid-template-columns: 260px 1fr;
        }
        
        .kb-toc-sidebar {
            display: none;
        }
        
        .research-layout::before {
            left: calc(260px + var(--kb-offset-noticeable));
        }
    }

    /* Mobile: Single column with overlay navigation */
    @media (max-width: 768px) {
        .research-layout {
            grid-template-columns: 1fr;
            display: block;
        }
        
        .research-layout::before {
            display: none;
        }
    }

    /* === Left Sidebar: Navigation === */
    .research-nav {
        background-color: var(--kb-ash-light);
        border-right: 1px solid var(--kb-border-light);
        padding: var(--kb-space-6);
        height: calc(100vh - 200px);
        position: sticky;
        top: var(--kb-space-4);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--kb-border-base) transparent;
    }

    /* Desktop: Fixed positioning */
    @media (min-width: 1201px) {
        .research-nav {
            align-self: start;
        }
    }

    /* Mobile: Fixed off-canvas with slide animation */
    @media (max-width: 768px) {
        .research-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            height: 100vh;
            z-index: var(--kb-z-modal);
            transform: translateX(-100%);
            transition: transform var(--kb-transition-slow);
            box-shadow: var(--kb-shadow-xl);
        }
        
        .research-nav.is-open {
            transform: translateX(0);
        }
    }

    /* Research Search Section */
    .research-search-section {
        background-color: transparent;
        padding: 20px;
        margin-bottom: 20px;
    }

    .search-input-wrapper {
        position: relative;
    }

    #research-search {
        width: 100%;
        padding: 12px 15px;
        font-family: var(--font-body);
        font-size: 1rem;
    }

    /* === Category Headers (Uppercase, Compact) === */
    .research-category-title {
        font-family: var(--kb-font-body);
        font-size: var(--kb-text-xs);
        font-weight: var(--kb-weight-semibold);
        text-transform: uppercase;
        letter-spacing: var(--kb-tracking-wide);
        color: var(--kb-wrapper-colorado);
        margin: var(--kb-space-6) 0 var(--kb-space-3) 0;
        padding-bottom: var(--kb-space-2);
        border-bottom: 1px solid var(--kb-border-light);
    }

    /* First category shouldn't have top margin */
    .research-category:first-child .research-category-title {
        margin-top: 0;
    }

    /* === Topic Buttons (Better Touch Targets) === */
    .research-topic-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: var(--kb-space-2) var(--kb-space-3);
        margin-bottom: var(--kb-space-1);
        background: transparent;
        border: none;
        border-radius: var(--kb-radius-sm);
        font-family: var(--kb-font-body);
        font-size: var(--kb-text-sm);
        font-weight: var(--kb-weight-normal);
        color: var(--kb-text-secondary);
        text-align: left;
        cursor: pointer;
        transition: all var(--kb-transition-fast);
        min-height: 44px; /* WCAG minimum touch target */
    }

    /* Hover state */
    .research-topic-link:hover {
        background-color: var(--kb-ash-base);
        color: var(--kb-text-primary);
    }

    /* Active state */
    .research-topic-link.active {
        background-color: var(--kb-wrapper-colorado);
        color: var(--kb-text-inverse);
        font-weight: var(--kb-weight-semibold);
        padding-left: var(--kb-space-4); /* Visual indicator */
        box-shadow: var(--kb-shadow-sm);
    }

    /* Focus state */
    .research-topic-link:focus-visible {
        outline: 3px solid var(--kb-wrapper-colorado);
        outline-offset: 2px;
    }

    /* Search Results */
    .research-search-results {
        padding: 10px 0;
    }

    .research-search-title {
        font-family: 'Crimson Text', serif;
        font-variant: small-caps;
        font-size: 1.05rem;
        color: #1a1510;
        margin-bottom: 15px;
    }

    .research-results-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .research-no-results {
        text-align: center;
        padding: 30px 20px;
        font-style: italic;
        color: var(--color-sepia);
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
    }

    /* === Mobile Menu Toggle Button === */
    .kb-mobile-menu-toggle {
        display: none; /* Hidden on desktop */
        align-items: center;
        gap: var(--kb-space-2);
        padding: var(--kb-space-2) var(--kb-space-3);
        background-color: var(--kb-bg-primary);
        border: 1px solid var(--kb-border-base);
        border-radius: var(--kb-radius-md);
        font-family: var(--kb-font-body);
        font-size: var(--kb-text-sm);
        font-weight: var(--kb-weight-medium);
        color: var(--kb-text-primary);
        cursor: pointer;
        transition: all var(--kb-transition-base);
        min-height: 44px;
    }

    .kb-mobile-menu-toggle:hover {
        background-color: var(--kb-bg-secondary);
        border-color: var(--kb-border-dark);
    }

    .kb-mobile-menu-toggle:focus-visible {
        outline: 3px solid var(--kb-wrapper-colorado);
        outline-offset: 2px;
    }

    @media (max-width: 768px) {
        .kb-mobile-menu-toggle {
            display: flex;
        }
    }

    /* === Overlay Backdrop === */
    .kb-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(45, 36, 32, 0.5);
        z-index: var(--kb-z-sticky);
        opacity: 0;
        transition: opacity var(--kb-transition-slow);
    }

    .kb-overlay.is-visible {
        display: block;
        opacity: 1;
    }

    /* ========================================================================
       RESEARCH CONTENT - ARTICLE LAYOUT WITH VISUAL HIERARCHY
       ======================================================================== */

    /* === Research Content Area === */
    .research-content {
        background-color: transparent;
        border: none;
        padding: var(--kb-space-8);
        overflow-y: auto;
        max-width: 65ch; /* Optimal reading width */
        margin: 0 auto;
    }

    /* === Article Heading Hierarchy === */
    .research-article-title {
        font-family: var(--kb-font-heading);
        font-size: var(--kb-text-3xl);
        font-weight: var(--kb-weight-bold);
        line-height: var(--kb-leading-tight);
        color: var(--kb-text-primary);
        margin-bottom: var(--kb-space-6);
    }

    .research-article-content h2,
    .research-section-heading {
        font-family: var(--kb-font-heading);
        font-size: var(--kb-text-2xl);
        font-weight: var(--kb-weight-semibold);
        line-height: var(--kb-leading-tight);
        color: var(--kb-text-primary);
        margin-top: var(--kb-space-10);
        margin-bottom: var(--kb-space-4);
        padding-bottom: var(--kb-space-2);
        border-bottom: 2px solid var(--kb-border-light);
    }

    /* First H2 gets decorative accent (asymmetric) */
    .research-article-content > h2:first-of-type {
        position: relative;
        padding-left: var(--kb-space-6);
    }

    .research-article-content > h2:first-of-type::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--kb-band-gold);
        border-radius: var(--kb-radius-sm);
        box-shadow: var(--kb-band-emboss);
    }

    .research-article-content h3 {
        font-family: var(--kb-font-heading);
        font-size: var(--kb-text-xl);
        font-weight: var(--kb-weight-semibold);
        line-height: var(--kb-leading-tight);
        color: var(--kb-text-primary);
        margin-top: var(--kb-space-8);
        margin-bottom: var(--kb-space-3);
    }

    .research-article-content h4 {
        font-family: var(--kb-font-body);
        font-size: var(--kb-text-lg);
        font-weight: var(--kb-weight-semibold);
        line-height: var(--kb-leading-normal);
        color: var(--kb-text-primary);
        margin-top: var(--kb-space-6);
        margin-bottom: var(--kb-space-2);
    }

    /* === Citation Numbers (Subtle Superscript) === */
    .citation-count,
    [data-citation] {
        font-size: 0.75rem;
        font-weight: var(--kb-weight-normal);
        color: var(--kb-text-muted);
        vertical-align: super;
        margin-left: 2px;
        text-decoration: none;
        cursor: help;
        transition: color var(--kb-transition-fast);
    }

    .citation-count:hover,
    [data-citation]:hover {
        color: var(--kb-wrapper-colorado);
        text-decoration: underline;
        text-decoration-style: dotted;
    }

    /* Citation in heading should be even smaller */
    .research-section-heading .citation-count,
    h2 .citation-count,
    h3 .citation-count {
        font-size: 0.65rem;
        color: var(--kb-text-muted);
        opacity: 0.7;
    }

    /* === Ornamental Dividers (Vintage Flair) === */
    .kb-divider {
        display: flex;
        align-items: center;
        gap: var(--kb-space-3);
        margin: var(--kb-space-8) 0;
        color: var(--kb-border-dark);
        font-size: 1.2rem;
    }

    .kb-divider::before,
    .kb-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            var(--kb-border-base) 20%,
            var(--kb-border-base) 80%,
            transparent
        );
    }

    /* Floral ornament variant */
    .kb-divider-ornamental::before {
        content: var(--kb-divider-ornamental);
        flex: 0 0 auto;
        font-size: 1.5rem;
        color: var(--kb-wrapper-colorado);
    }

    .kb-divider-ornamental::after {
        content: var(--kb-divider-ornamental);
        flex: 0 0 auto;
        font-size: 1.5rem;
        color: var(--kb-wrapper-colorado);
        transform: scaleX(-1); /* Mirror the ornament */
    }

    /* Wikipedia-style article header */
    .research-article-header {
        border-bottom: 1px solid rgba(26, 21, 16, 0.1);
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
    }

    .research-topic-header {
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: none;
    }

    .research-header-controls {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }

    .btn-expand-all,
    .btn-collapse-all {
        font-family: 'Crimson Text', serif;
        font-size: 0.95rem;
        padding: 8px 14px;
        background: transparent;
        border: none;
        color: var(--color-sepia);
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 0;
        text-decoration: underline;
    }

    .btn-expand-all:hover,
    .btn-collapse-all:hover {
        background: transparent;
        color: var(--color-ink);
    }

    .btn-expand-all:focus,
    .btn-collapse-all:focus {
        outline: none;
        text-decoration: underline;
    }

    .research-article-title {
        font-family: var(--font-heading-main);
        font-size: 1.75rem;
        font-weight: 600;
        margin: 0 0 16px 0;
        color: var(--color-ink);
        border-bottom: none;
    }

    .research-topic-title {
        font-family: 'Crimson Text', serif;
        font-size: 1.8rem;
        font-variant: small-caps;
        color: #1a1510;
        margin: 0 0 10px 0;
    }

    .research-article-abstract {
        font-family: 'Crimson Text', serif;
        font-size: 1.15rem;
        line-height: 1.7;
        color: #2a2520;
        margin: 0 0 12px 0;
    }

    .research-topic-abstract {
        font-family: 'Crimson Text', serif;
        font-style: italic;
        color: #3e362e;
        margin: 0 0 10px 0;
        line-height: 1.7;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .research-article-target,
    .research-article-context {
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
        color: var(--color-sepia);
        margin: 0 0 8px 0;
    }

    .research-topic-target {
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
        color: var(--color-olive);
    }

    /* Main article content wrapper */
    .research-article-content {
        max-width: 90ch;
        /* Optimal reading width for articles */
        line-height: 1.75;
    }

    /* Wikipedia-style article sections */
    .research-article-section {
        margin-bottom: 2.5rem;
        padding-bottom: 2.5rem;
        border-bottom: 1px solid rgba(26, 21, 16, 0.1);
    }

    .research-section {
        margin-bottom: 2rem;
        border: none;
        background: none;
    }

    .research-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .research-section-toggle {
        width: 100%;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: background 0.2s ease;
    }

    .research-section-toggle:hover {
        background: transparent;
    }

    .research-section-toggle:hover .research-section-heading {
        color: var(--color-sepia);
    }

    .research-section-toggle:focus {
        outline: none;
    }

    .research-section-toggle:focus .research-section-heading {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 2px;
    }

    .toggle-icon {
        font-size: 0.75rem;
        transition: transform 0.2s ease;
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--color-sepia);
    }

    .toggle-title {
        flex: 1;
        text-align: left;
    }

    /* Wikipedia-style h3 heading */
    .research-section-heading {
        font-family: var(--font-heading-main);
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--color-ink);
        flex: 1;
        margin: 0;
        padding: 0;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0.8em;
        margin-top: 1.5em;
    }

    .research-section-content {
        padding: 0;
        border-top: none;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        margin-top: 0.5em;
    }

    .research-section-content.collapsed {
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }

    /* Flowing paragraph content */
    .research-paragraph {
        font-family: 'Crimson Text', serif;
        font-size: 1.125rem;
        line-height: 1.75;
        color: #2a2520;
        margin: 0 0 16px 0;
        text-align: left;
        hyphens: auto;
    }

    .research-paragraph:last-child {
        margin-bottom: 0;
    }

    /* Inline term styling for label:value pairs */
    .inline-term {
        font-variant: small-caps;
        font-weight: 600;
        color: var(--color-sepia);
        letter-spacing: 0.05em;
    }

    /* Clean bullet lists without box styling */
    .research-bullet-list {
        margin: 1em 0;
        padding-left: 2em;
        list-style-type: disc;
        font-family: 'Crimson Text', serif;
        font-size: 1.05rem;
        line-height: 1.8;
        color: #1a1510;
    }

    .research-bullet-list:last-child {
        margin-bottom: 0;
    }

    .research-bullet-list li {
        margin-bottom: 0.5em;
        padding-left: 0.25em;
    }

    .research-bullet-list li:last-child {
        margin-bottom: 0;
    }

    /* Definition list for term/description pairs */
    .research-definition-list {
        margin: 1em 0;
        display: grid;
        gap: 0.75em;
    }

    .research-definition-term {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--color-sepia);
        margin: 0;
    }

    .research-definition-desc {
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
        line-height: 1.7;
        color: #1a1510;
        margin: 0 0 0 1em;
        padding-left: 0;
    }

    /* Blockquote for nested/side content */
    .research-blockquote {
        margin: 12px 0;
        padding: 12px 0;
        border-left: none;
        background: transparent;
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
        line-height: 1.7;
        color: #2a2520;
        font-style: italic;
    }

    /* Research text content */
    .research-text-content {
        font-family: 'Crimson Text', serif;
        font-size: 1.05rem;
        line-height: 1.8;
        color: #1a1510;
        margin: 0 0 16px 0;
    }

    .research-text-content:last-child {
        margin-bottom: 0;
    }

    /* Research empty state */
    .research-empty {
        font-style: italic;
        color: var(--color-sepia);
        opacity: 0.7;
        font-size: 1rem;
    }

    /* Legacy styles - deprecated but kept for compatibility */
    .research-item {
        margin-bottom: 16px;
        border: none;
        background: none;
        padding: 0;
    }

    .item-field {
        margin-bottom: 12px;
        border: none;
        background: none;
        padding: 0;
    }

    .item-label {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 0.95rem;
        color: #3e362e;
    }

    .item-value {
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
        color: #1a1510;
    }

    .item-value-empty {
        font-family: 'Crimson Text', serif;
        font-style: italic;
        font-size: 0.95rem;
        color: var(--color-sepia);
        opacity: 0.7;
    }

    .item-list {
        margin: 6px 0 0 0;
        padding-left: 22px;
    }

    .item-list li {
        margin-bottom: 6px;
        line-height: 1.7;
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
        color: #1a1510;
    }

    .research-value-list {
        margin: 6px 0 0 0;
        padding-left: 20px;
        list-style-type: disc;
    }

    .research-value-list li {
        margin-bottom: 6px;
        line-height: 1.7;
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
        color: #1a1510;
    }

    .research-nested {
        margin-top: 8px;
        padding-left: 15px;
        border-left: none;
    }

    .nested-item {
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: none;
    }

    .nested-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .nested-label {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 0.95rem;
        text-transform: uppercase;
        color: #3e362e;
        display: block;
        margin-bottom: 4px;
    }

    .nested-value {
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
        color: #1a1510;
    }

    .nested-list {
        margin: 4px 0 0 0;
        padding-left: 18px;
        list-style-type: circle;
    }

    .nested-list li {
        margin-bottom: 4px;
        line-height: 1.7;
        font-family: 'Crimson Text', serif;
        font-size: 1rem;
    }

    .research-dl {
        margin: 0;
        padding: 15px 0;
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 15px 20px;
        align-items: start;
    }

    .research-dl dt {
        font-family: 'Crimson Text', serif;
        font-variant: small-caps;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--color-sepia);
        margin: 0;
        padding: 4px 0;
        letter-spacing: 0.05em;
    }

    .research-dl dd {
        margin: 0;
        padding: 4px 0;
        line-height: 1.7;
        color: #1a1510;
    }

    /* Mobile: stack definition lists */
    @media (max-width: 600px) {
        .research-dl {
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .research-dl dt {
            color: var(--color-sepia);
        }

        .research-dl dd {
            padding-left: 15px;
        }

        .research-paragraph,
        .research-bullet-list,
        .research-text-content {
            font-size: 1rem;
            text-align: left;
        }
    }

    /* Cross References */
    .research-cross-references {
        margin-top: 30px;
        padding: 0;
        background: transparent;
        border: none;
    }

    .research-cross-ref-title {
        font-family: 'Crimson Text', serif;
        font-variant: small-caps;
        font-size: 1.05rem;
        color: var(--color-sepia);
        margin: 0 0 15px 0;
    }

    .research-cross-ref-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .research-cross-ref-list li {
        margin: 0;
    }

    .research-cross-ref-link {
        background: transparent;
        border: none;
        color: var(--color-sepia);
        font-family: 'Crimson Text', serif;
        font-size: 0.95rem;
        padding: 4px 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-variant: small-caps;
        text-decoration: underline;
    }

    .research-cross-ref-link:hover {
        background: transparent;
        color: var(--color-ink);
    }

    .research-cross-ref-link:focus {
        outline: none;
        text-decoration: underline;
    }

    /* Hide FAB on Research view */
    #research-view ~ .fab {
        display: none !important;
    }

    /* Search highlight styling */
    .search-highlight {
        background-color: rgba(255, 215, 0, 0.4);
        color: var(--color-ink);
        font-weight: 600;
        padding: 0 2px;
        border-radius: 2px;
    }

    /* ========================================================================
       ADDITIONAL CONTENT TYPOGRAPHY & INTERACTIVE ELEMENTS
       ======================================================================== */

    /* === Content Section Cards with Vintage Borders === */
    .kb-section-card {
        background-color: var(--kb-bg-primary);
        border: var(--kb-border-vintage-double);
        border-radius: var(--kb-radius-md);
        padding: var(--kb-space-6);
        margin-bottom: var(--kb-space-6);
        box-shadow: var(--kb-shadow-vintage);
        position: relative;
        transition: box-shadow var(--kb-transition-base);
    }

    .kb-section-card:hover {
        box-shadow: 0 4px 8px rgba(45, 36, 32, 0.15);
    }

    /* Asymmetric accent corner (vintage flair) */
    .kb-section-card::before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(var(--kb-space-4) + var(--kb-offset-subtle));
        height: calc(var(--kb-space-4) + var(--kb-offset-subtle));
        border-top: 3px solid var(--kb-wrapper-colorado);
        border-left: 3px solid var(--kb-wrapper-colorado);
        border-radius: var(--kb-radius-sm) 0 0 0;
    }

    /* === Links with External Indicators === */
    .kb-link,
    .research-article-content a {
        color: var(--kb-wrapper-colorado);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
        transition: all var(--kb-transition-fast);
        position: relative;
        display: inline;
    }

    .kb-link:hover,
    .research-article-content a:hover {
        color: var(--kb-wrapper-maduro);
        text-decoration-thickness: 2px;
    }

    /* External link indicator */
    .kb-link[href^="http"]:not([href*="192.168.8.166"])::after,
    .research-article-content a[href^="http"]:not([href*="192.168.8.166"])::after {
        content: '↗';
        font-size: 0.8em;
        margin-left: 0.2em;
        vertical-align: super;
        opacity: 0.7;
    }

    /* Cross-reference links */
    .kb-link--cross-ref {
        font-family: var(--kb-font-body);
        font-size: var(--kb-text-sm);
        font-variant: small-caps;
        color: var(--kb-wrapper-colorado);
        background: transparent;
        border: none;
        padding: 4px 8px;
        cursor: pointer;
        transition: all var(--kb-transition-fast);
        text-decoration: underline;
    }

    .kb-link--cross-ref:hover {
        color: var(--kb-wrapper-maduro);
        background: rgba(139, 90, 43, 0.05);
    }

    /* === Code & Monospace Styling === */
    .kb-code,
    code,
    .research-article-content code {
        font-family: var(--kb-font-mono);
        font-size: 0.9em;
        background-color: var(--kb-ash-tertiary);
        color: var(--kb-text-primary);
        padding: 0.15em 0.4em;
        border-radius: var(--kb-radius-sm);
        border: 1px solid var(--kb-border-light);
        display: inline;
        line-height: 1.4;
    }

    .kb-code-block,
    pre,
    .research-article-content pre {
        font-family: var(--kb-font-mono);
        font-size: var(--kb-text-sm);
        background-color: var(--kb-ash-tertiary);
        color: var(--kb-text-primary);
        padding: var(--kb-space-4);
        border-radius: var(--kb-radius-md);
        border: 1px solid var(--kb-border-base);
        overflow-x: auto;
        line-height: 1.6;
        margin: var(--kb-space-4) 0;
    }

    .kb-code-block code,
    pre code,
    .research-article-content pre code {
        background: none;
        padding: 0;
        border: none;
        font-size: inherit;
    }

    /* === Additional Typography === */
    /* Emphasis */
    .research-article-content em,
    .research-article-content i {
        font-style: italic;
        color: var(--kb-text-secondary);
    }

    .research-article-content strong,
    .research-article-content b {
        font-weight: var(--kb-weight-semibold);
        color: var(--kb-text-primary);
    }

    /* Strong emphasis combo */
    .research-article-content em strong,
    .research-article-content strong em,
    .research-article-content i b,
    .research-article-content b i {
        font-style: italic;
        font-weight: var(--kb-weight-bold);
        color: var(--kb-wrapper-colorado);
    }

    /* === Enhanced Blockquotes with Left Border === */
    .kb-blockquote,
    blockquote,
    .research-article-content blockquote {
        margin: var(--kb-space-6) 0;
        padding: var(--kb-space-4) var(--kb-space-6);
        background-color: var(--kb-bg-secondary);
        border-left: 4px solid var(--kb-wrapper-colorado);
        border-radius: 0 var(--kb-radius-md) var(--kb-radius-md) 0;
        font-style: italic;
        color: var(--kb-text-secondary);
        position: relative;
    }

    /* Decorative quote mark */
    .kb-blockquote::before,
    .research-article-content blockquote::before {
        content: '"';
        position: absolute;
        top: var(--kb-space-2);
        left: var(--kb-space-3);
        font-family: var(--kb-font-heading);
        font-size: 3rem;
        color: var(--kb-border-base);
        opacity: 0.5;
        line-height: 1;
    }

    .kb-blockquote p,
    .research-article-content blockquote p {
        margin: 0;
        padding-left: var(--kb-space-8);
    }

    /* === Nested Lists === */
    .research-bullet-list ul,
    .research-bullet-list ol {
        margin: 0.5em 0 0.5em 1.5em;
    }

    .research-bullet-list li {
        margin-bottom: 0.5em;
    }

    /* Numbered list variant */
    .kb-ordered-list,
    .research-article-content ol {
        margin: 1em 0;
        padding-left: 2em;
        list-style-type: decimal;
        font-family: var(--kb-font-body);
        font-size: var(--kb-text-base);
        line-height: var(--kb-leading-normal);
        color: var(--kb-text-primary);
    }

    .kb-ordered-list li,
    .research-article-content ol li {
        margin-bottom: 0.5em;
        padding-left: 0.25em;
    }

    /* ========================================================================
       ACCESSIBILITY: SKIP LINKS & ENHANCED FOCUS STATES
       ======================================================================== */

    /* === Skip Links === */
    .kb-skip-link {
        position: fixed;
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--kb-text-primary);
        color: var(--kb-bg-primary);
        padding: var(--kb-space-3) var(--kb-space-6);
        border-radius: 0 0 var(--kb-radius-md) var(--kb-radius-md);
        font-family: var(--kb-font-body);
        font-size: var(--kb-text-base);
        font-weight: var(--kb-weight-semibold);
        text-decoration: none;
        z-index: var(--kb-z-toast);
        transition: top var(--kb-transition-base);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .kb-skip-link:focus {
        top: 0;
        outline: 3px solid var(--kb-wrapper-colorado);
        outline-offset: -3px;
    }

    /* === Enhanced Focus States === */
    /* Global focus visible styles for keyboard navigation */
    :focus-visible {
        outline: 3px solid var(--kb-wrapper-colorado);
        outline-offset: 2px;
        border-radius: var(--kb-radius-sm);
    }

    /* Research content specific focus */
    .research-topic-link:focus-visible {
        outline: 3px solid var(--kb-wrapper-colorado);
        outline-offset: 2px;
        border-radius: var(--kb-radius-sm);
    }

    .research-section-toggle:focus-visible {
        outline: 3px solid var(--kb-wrapper-colorado);
        outline-offset: 2px;
        border-radius: var(--kb-radius-sm);
    }

    .kb-link:focus-visible,
    .research-article-content a:focus-visible {
        outline: 3px solid var(--kb-wrapper-colorado);
        outline-offset: 2px;
        text-decoration-thickness: 2px;
        border-radius: var(--kb-radius-sm);
    }

    /* ========================================================================
       MOBILE-SPECIFIC RESPONSIVE ADJUSTMENTS
       ======================================================================== */

    /* Mobile: Adjust content padding */
    @media (max-width: 768px) {
        .research-content {
            padding: var(--kb-space-4) var(--kb-space-4);
        }

        .research-article-title {
            font-size: var(--kb-text-2xl);
        }

        .research-article-content h2 {
            font-size: var(--kb-text-xl);
        }

        .research-article-content h3 {
            font-size: var(--kb-text-lg);
        }

        .kb-section-card {
            padding: var(--kb-space-4);
            margin-bottom: var(--kb-space-4);
        }

        /* Ensure touch targets meet minimum size */
        .research-topic-link,
        .kb-mobile-menu-toggle,
        .kb-link,
        .research-section-toggle,
        .research-cross-ref-link {
            min-height: 44px;
            min-width: 44px;
        }

        /* Increase tap targets for smaller interactive elements */
        .citation-count {
            display: inline-block;
            min-width: 44px;
            min-height: 44px;
            line-height: 44px;
            text-align: center;
        }

        /* Mobile: Adjust search input */
        #research-search {
            font-size: 16px; /* Prevent iOS zoom */
            padding: 12px 16px;
        }

        /* Mobile: Scrollable research nav */
        .research-nav {
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        /* Mobile: Adjust content spacing */
        .research-article-section {
            margin-bottom: var(--kb-space-6);
            padding-bottom: var(--kb-space-6);
        }

        .research-section-heading {
            font-size: var(--kb-text-base);
        }

        .research-paragraph {
            font-size: var(--kb-text-sm);
        }

        /* Mobile: Blockquote adjustments */
        .kb-blockquote,
        blockquote {
            padding: var(--kb-space-3) var(--kb-space-4);
        }

        .kb-blockquote p,
        blockquote p {
            padding-left: var(--kb-space-6);
        }

        /* Mobile: Code block overflow */
        .kb-code-block,
        pre {
            font-size: var(--kb-text-xs);
            padding: var(--kb-space-3);
            overflow-x: scroll;
        }
    }

    /* Small mobile: Further adjustments */
    @media (max-width: 480px) {
        .research-article-title {
            font-size: var(--kb-text-xl);
        }

        .kb-section-card::before {
            width: var(--kb-space-3);
            height: var(--kb-space-3);
        }
    }

    /* Responsive */
    @media (max-width: 600px) {
        .filter-row-multi {
            flex-direction: column;
            gap: 10px;
        }

        .filter-group {
            width: 100%;
        }

        .session-card {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .session-card-rating {
            align-self: flex-end;
        }

        .session-detail-actions {
            flex-direction: column;
        }

        .session-detail-actions .btn-vintage {
            width: 100%;
        }
    }

    /* --- Session Logger Modal Styles --- */

    /* Session Cigar Name Display */
    .session-cigar-name {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.5rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: 24px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.6);
        border: 3px double var(--color-sepia);
        color: var(--color-ink);
        position: relative;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Inner border for vintage effect */
    .session-cigar-name::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    /* Rating Input Group */
    .rating-input-group {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.4);
        border: 2px solid var(--color-sepia);
        position: relative;
    }

    /* Inner border for rating group */
    .rating-input-group::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    /* Toggle Button for Detailed Ratings */
    .btn-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 14px 20px;
        margin-bottom: 20px;
        background: rgba(255, 255, 255, 0.4);
        border: 3px double var(--color-sepia);
        color: var(--color-ink);
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Inner border for toggle button */
    .btn-toggle::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .btn-toggle:hover {
        background: rgba(139, 58, 58, 0.15);
        border-color: var(--color-dull-red);
        color: var(--color-dull-red);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .btn-toggle:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .btn-toggle #detailed-ratings-icon {
        transition: transform 0.3s ease;
        display: inline-block;
        font-size: 0.9em;
    }

    .btn-toggle.expanded #detailed-ratings-icon {
        transform: rotate(90deg);
    }

    /* Detailed Ratings Section */
    .detailed-ratings-section {
        background: rgba(255, 255, 255, 0.4);
        border: 3px double var(--color-sepia);
        padding: 24px;
        margin-bottom: 24px;
        position: relative;
        transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, margin 0.4s ease;
        overflow: hidden;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* Inner border for vintage effect */
    .detailed-ratings-section::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .detailed-ratings-section.collapsed {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        margin-bottom: 0;
    }

    .detailed-ratings-section.expanded {
        max-height: 1000px;
        opacity: 1;
    }

    /* Individual Rating Groups */
    .detailed-rating-group {
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 2px dashed var(--color-sepia-light);
    }

    .detailed-rating-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .detailed-rating-group .input-label {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-ink);
        margin-bottom: 12px;
    }

    /* Rating Sliders */
    .rating-slider {
        flex-grow: 1;
        -webkit-appearance: none;
        appearance: none;
        height: 10px;
        background: rgba(139, 115, 85, 0.4);
        border: 2px solid var(--color-sepia);
        border-radius: 5px;
        outline: none;
        cursor: pointer;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .rating-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        background: var(--color-dull-red);
        border: 4px solid var(--color-paper);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 3px 6px rgba(26, 20, 17, 0.4);
        transition: all 0.2s ease;
    }

    .rating-slider::-webkit-slider-thumb:hover {
        transform: scale(1.15);
        background: var(--color-ink);
    }

    .rating-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        background: var(--color-dull-red);
        border: 4px solid var(--color-paper);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 3px 6px rgba(26, 20, 17, 0.4);
        transition: all 0.2s ease;
    }

    .rating-slider::-moz-range-thumb:hover {
        transform: scale(1.15);
        background: var(--color-ink);
    }

    .rating-slider::-webkit-slider-runnable-track {
        height: 10px;
        background: rgba(139, 115, 85, 0.4);
        border: 2px solid var(--color-sepia);
        border-radius: 5px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .rating-slider::-moz-range-track {
        height: 10px;
        background: rgba(139, 115, 85, 0.4);
        border: 2px solid var(--color-sepia);
        border-radius: 5px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .rating-value {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--color-dull-red);
        min-width: 50px;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .rating-hint {
        font-family: var(--font-body);
        font-style: italic;
        font-size: 0.9rem;
        color: var(--color-sepia);
        margin-top: 10px;
        margin-bottom: 18px;
        text-align: center;
    }

    /* Tags Sections */
    .tags-section {
        margin-bottom: 24px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.4);
        border: 3px double var(--color-sepia);
        position: relative;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* Inner border for vintage effect */
    .tags-section::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .tags-section .input-label {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-ink);
        margin-bottom: 15px;
        display: block;
    }

    .tags-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Tag Checkboxes */
    .tag-checkbox {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        padding: 4px 6px;
        border: 2px solid var(--color-sepia);
        background: rgba(255, 255, 255, 0.4);
        transition: all 0.3s ease;
        position: relative;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Inner border for vintage effect */
    .tag-checkbox::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .tag-checkbox:hover {
        background: rgba(139, 58, 58, 0.15);
        border-color: var(--color-sepia);
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    }

    .tag-checkbox input[type="checkbox"] {
        display: none;
    }

    .tag-checkbox span {
        font-family: var(--font-body);
        font-size: 0.95rem;
        color: var(--color-ink);
        font-style: italic;
        transition: color 0.3s ease, font-weight 0.3s ease;
    }

    .tag-checkbox input[type="checkbox"]:checked + span {
        color: var(--color-dull-red);
        font-weight: 600;
    }

    .tag-checkbox:has(input:checked) {
        background: rgba(139, 58, 58, 0.2);
        border-color: var(--color-dull-red);
        box-shadow: 0 2px 4px rgba(139, 58, 58, 0.3);
    }

    /* Form Textarea */
    .form-textarea {
        width: 100%;
        padding: 15px;
        background: rgba(255, 255, 255, 0.5);
        border: 3px double var(--color-sepia);
        font-family: var(--font-body);
        font-size: 1rem;
        color: var(--color-ink);
        resize: vertical;
        transition: all 0.3s ease;
        position: relative;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Inner border for vintage effect */
    .form-textarea::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    .form-textarea:focus {
        outline: none;
        border-color: var(--color-dull-red);
        background: rgba(255, 255, 255, 0.7);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(139, 58, 58, 0.1);
    }

    .form-textarea::placeholder {
        color: var(--color-sepia);
        font-style: italic;
    }

    /* Responsive for tags */
    @media (min-width: 600px) {
        .tags-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* --- Session Detail Modal Detailed Ratings --- */

    /* Detailed Ratings Grid */
    .session-detail-detailed-ratings {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(26, 20, 17, 0.1);
        padding: 15px;
        margin-bottom: 15px;
    }

    .session-detail-detailed-ratings.hidden {
        display: none;
    }

    .detailed-ratings-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .detailed-rating-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(26, 20, 17, 0.08);
    }

    .detailed-rating-label {
        font-family: 'Lora', serif;
        font-size: 0.85rem;
        color: #57493C;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .detailed-rating-value {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 1rem;
        color: var(--color-ink);
    }

    /* Session Detail Tags */
    .session-detail-tags {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(26, 20, 17, 0.1);
        padding: 12px 15px;
        margin-bottom: 15px;
    }

    .session-detail-tags.hidden {
        display: none;
    }

    .tags-display {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tags-display .tag-item {
        display: inline-block;
        background: rgba(112, 66, 20, 0.1);
        border: 1px solid rgba(112, 66, 20, 0.3);
        color: var(--color-sepia);
        font-family: 'Crimson Text', serif;
        font-size: 0.8rem;
        font-style: italic;
        padding: 4px 10px;
        border-radius: 2px;
    }

    /* Responsive for detailed ratings grid */
    @media (min-width: 600px) {
        .detailed-ratings-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* --- People View Styles --- */

    /* People Section */
    .people-section {
        margin-bottom: 40px;
    }

    .people-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 30px;
    }

    /* Mobile: Stack people grid */
    @media (max-width: 600px) {
        .people-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }

    /* Humidor Section */
    .humidor-section {
        margin-bottom: 20px;
    }

    /* Concierge Section - vintage overhaul */
    .concierge-section {
        margin-bottom: 20px;
        text-align: center;
        max-width: 800px;
        margin: 0 auto 30px;
    }

    .concierge-section .section-title {
        font-family: var(--font-heading-main);
        font-variant: small-caps;
        font-size: 2rem;
        font-weight: 400;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--color-sepia);
    }

    .concierge-section .form-subtitle {
        margin-top: 5px;
        font-family: var(--font-body);
        font-style: italic;
        color: var(--color-dull-red);
    }

    /* Concierge Form - vintage overhaul */
    .concierge-form {
        max-width: 700px;
        margin: 0 auto 30px;
        padding: 30px;
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid var(--color-sepia);
        position: relative;
    }

    .concierge-form::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border: 1px solid var(--color-sepia-light);
        pointer-events: none;
    }

    /* History Section */
    .history-section {
        margin-bottom: 20px;
    }

    /* Research Header Section */
    .research-header-section {
        margin-bottom: 20px;
    }

    /* Research Content Section */
    .research-section {
        margin-bottom: 20px;
    }

    /* Person Card */
    .person-card {
        background-color: var(--color-paper);
        border: 2px solid #1A1411;
        box-shadow:
            0 0 0 1.5px rgba(26, 20, 17, 0.25),
            0 2px 4px rgba(0, 0, 0, 0.1),
            inset 0 1px 3px rgba(0, 0, 0, 0.08);
        padding: 15px;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 140px;
    }

    .person-card:hover {
        transform: translateY(-3px);
        box-shadow:
            3px 6px 12px rgba(0, 0, 0, 0.2),
            inset 0 0 0 1px rgba(26, 20, 17, 0.15);
    }

    .person-card:active {
        transform: translateY(-1px);
    }

    .person-name {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 1.2rem;
        color: var(--color-ink);
        margin-bottom: 8px;
        text-align: center;
    }

    .person-sessions-count {
        font-family: 'Crimson Text', serif;
        font-size: 0.85rem;
        color: var(--color-sepia);
        margin-bottom: 6px;
    }

    .person-avg-rating {
        font-family: 'Crimson Text', serif;
        font-weight: 700;
        font-size: 1rem;
        color: #704214;
        background: rgba(112, 66, 20, 0.1);
        padding: 4px 12px;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    .person-favorite {
        font-family: 'Lora', serif;
        font-size: 0.8rem;
        color: #57493C;
        font-style: italic;
        text-align: center;
    }

    /* Person Modal Styles */
    .palate-section {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(26, 20, 17, 0.15);
        padding: 15px;
        margin-bottom: 20px;
    }

    .palate-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 10px;
    }

    .palate-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .palate-label {
        font-family: 'Lora', serif;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #57493C;
    }

    .palate-value {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--color-ink);
    }

    /* Person Detail Modal */
    .person-detail-info {
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px dashed var(--color-sepia);
        margin-bottom: 15px;
    }

    .person-detail-name {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 1.6rem;
        color: var(--color-ink);
        margin-bottom: 8px;
    }

    .person-detail-notes {
        font-family: 'Crimson Text', serif;
        font-style: italic;
        color: #3D2817;
        line-height: 1.5;
    }

    .person-palate-section {
        margin-bottom: 20px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(26, 20, 17, 0.15);
    }

    .person-stats-section {
        margin-bottom: 20px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(26, 20, 17, 0.15);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(26, 20, 17, 0.08);
    }

    .stat-label {
        font-family: 'Lora', serif;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #57493C;
    }

    .stat-value {
        font-family: 'Crimson Text', serif;
        font-weight: 700;
        font-size: 1.3rem;
        color: var(--color-ink);
    }

    .person-favorites-section {
        margin-bottom: 20px;
    }

    .favorites-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .favorite-item {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(26, 20, 17, 0.1);
        padding: 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .favorite-name {
        font-family: 'IM Fell DW Pica', serif;
        font-variant: small-caps;
        font-size: 0.9rem;
        color: var(--color-ink);
        flex: 1;
    }

    .favorite-count {
        font-family: 'Crimson Text', serif;
        font-weight: 600;
        font-size: 0.85rem;
        color: #704214;
        background: rgba(112, 66, 20, 0.1);
        padding: 3px 8px;
        border-radius: 3px;
    }

    .person-sessions-section {
        margin-bottom: 20px;
    }

    .person-sessions-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 200px;
        overflow-y: auto;
    }

    .person-session-item {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(26, 20, 17, 0.1);
        padding: 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .person-session-cigar {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 0.9rem;
        color: var(--color-ink);
        flex: 1;
    }

    .person-session-rating {
        font-family: 'Crimson Text', serif;
        font-weight: 700;
        font-size: 1rem;
        color: #704214;
    }

    .person-detail-actions {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Hide FAB on People view */
    #people-view ~ .fab {
        display: none !important;
    }

    /* Responsive for People view */
    @media (min-width: 750px) {
        .people-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
    }

    @media (min-width: 992px) {
        .people-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .person-detail-actions {
            flex-direction: row;
        }
    }

    @media (max-width: 600px) {
        .palate-grid {
            grid-template-columns: 1fr;
        }

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

        .person-detail-actions {
            flex-direction: column;
        }

        .person-detail-actions .btn-vintage {
            width: 100%;
        }
    }

    /* --- Settings View Styles --- */

    .settings-section {
        max-width: 800px;
        margin: 0 auto 30px;
    }

    .settings-card {
        background-color: var(--color-paper);
        border: 2px solid #1A1411;
        padding: 25px;
        margin-bottom: 20px;
    }

    .settings-card-title {
        font-family: 'IM Fell English', serif;
        font-variant: small-caps;
        font-size: 1.3rem;
        color: var(--color-ink);
        margin: 0 0 20px 0;
        padding-bottom: 15px;
        border-bottom: 1px dashed var(--color-sepia);
    }

    .settings-subsection {
        margin-bottom: 25px;
    }

    .settings-subsection-title {
        font-family: 'Lora', serif;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-slate-blue);
        margin: 0 0 15px 0;
    }

    .settings-description {
        font-family: 'Crimson Text', serif;
        font-style: italic;
        color: var(--color-sepia);
        margin: 0 0 10px 0;
        font-size: 0.9rem;
    }

    .settings-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
    }

    .settings-divider {
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--color-sepia) 50%, transparent 100%);
        margin: 25px 0;
        border: none;
    }

    /* Import/Export specific styles */
    .import-file-section {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(26, 20, 17, 0.1);
    }

    .import-file-section input[type="file"] {
        display: none;
    }

    .selected-file-name {
        font-family: 'Crimson Text', serif;
        font-style: italic;
        color: var(--color-sepia);
        font-size: 0.9rem;
    }

    .import-preview-section {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(26, 20, 17, 0.1);
        padding: 15px;
        margin-bottom: 15px;
    }

    .import-preview-section.hidden {
        display: none;
    }

    .import-preview-title {
        font-family: 'Lora', serif;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-ink);
        margin: 0 0 10px 0;
    }

    .import-preview-content {
        max-height: 200px;
        overflow-y: auto;
        font-family: 'Crimson Text', serif;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .preview-item {
        padding: 8px 0;
        border-bottom: 1px dotted rgba(26, 20, 17, 0.15);
    }

    .preview-item:last-child {
        border-bottom: none;
    }

    .preview-item-label {
        font-weight: 600;
        color: var(--color-slate-blue);
        margin-right: 10px;
    }

    .preview-item-value {
        color: var(--color-ink);
    }

    .import-mode-section {
        margin-bottom: 20px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(26, 20, 17, 0.1);
    }

    .import-mode-label {
        font-family: 'Lora', serif;
        font-weight: 600;
        display: block;
        margin-bottom: 10px;
        color: var(--color-ink);
    }

    .import-mode-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .import-mode-option {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Crimson Text', serif;
        font-size: 0.95rem;
        cursor: pointer;
    }

    .import-mode-option input[type="radio"] {
        cursor: pointer;
    }

    .import-mode-option span {
        color: var(--color-ink);
    }

    .import-warning {
        font-family: 'Crimson Text', serif;
        font-size: 0.85rem;
        color: #8b3a3a;
        margin-top: 10px;
        padding: 10px;
        background: rgba(139, 58, 58, 0.1);
        border-left: 3px solid #8b3a3a;
        line-height: 1.4;
    }

    .import-warning.hidden {
        display: none;
    }

    /* Hide FAB on Settings view */
    #settings-view ~ .fab {
        display: none !important;
    }
}

/* ==========================================================================
   CODEX STYLES
   Refactored from Research with markdown content support
   ========================================================================== */

/* === Codex Layout: Three-Column with Vintage Flair === */
.codex-layout {
    display: grid;
    grid-template-columns: 25% 1fr;  /* Updated from 260px 1fr */
    gap: var(--kb-space-6);
    padding: var(--kb-space-8);
    padding-top: 0;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Desktop layout adjustment */
@media (min-width: 1201px) {
    .codex-layout {
        display: grid;
        grid-template-columns: 25% 1fr;
        gap: 40px;
    }

    .codex-nav {
        align-self: start;
        position: sticky;  /* Float within viewport */
        top: 20px;
    }
}

/* Tablet: Two-column layout */
@media (max-width: 1024px) {
    .codex-layout {
        grid-template-columns: 240px 1fr;
        gap: var(--kb-space-5);
        padding: var(--kb-space-6);
    }
}

/* Mobile: Single-column with overlay nav */
@media (max-width: 768px) {
    .codex-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    .codex-layout::before {
        display: none;
    }
}

/* === Mobile Header === */
.codex-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: var(--kb-space-4);
    background-color: var(--kb-bg-primary);
    border-bottom: 2px solid var(--kb-border-base);
    position: sticky;
    top: 0;
    z-index: var(--kb-z-sticky);
}

.codex-mobile-menu-toggle {
    display: flex;
    align-items: center;
    gap: var(--kb-space-2);
    padding: var(--kb-space-2) var(--kb-space-3);
    background: transparent;
    border: 2px solid var(--kb-border-base);
    border-radius: var(--kb-radius-sm);
    cursor: pointer;
    font-family: var(--kb-font-body);
    font-size: var(--kb-text-base);
    color: var(--kb-text-primary);
    transition: all var(--kb-transition-base);
}

.codex-mobile-menu-toggle:hover {
    background-color: var(--kb-bg-tertiary);
    border-color: var(--kb-border-dark);
}

.codex-mobile-menu-toggle:focus-visible {
    outline: 3px solid var(--kb-wrapper-colorado);
    outline-offset: 2px;
}

.codex-menu-icon {
    font-size: var(--kb-text-xl);
    line-height: 1;
}

.codex-header-title {
    font-family: var(--kb-font-heading);
    font-size: var(--kb-text-lg);
    font-weight: var(--kb-weight-semibold);
    margin: 0;
    color: var(--kb-text-primary);
}

@media (max-width: 768px) {
    .codex-mobile-header {
        display: flex;
    }
}

/* === Overlay Backdrop === */
.codex-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(45, 36, 32, 0.5);
    z-index: var(--kb-z-modal);
    opacity: 0;
    transition: opacity var(--kb-transition-base);
}

.codex-overlay.is-visible {
    display: block;
    opacity: 1;
}

/* === Navigation Sidebar === */
.codex-nav {
    overflow: visible; 
    position: sticky;  /* Changed from static */
    top: 20px;
    max-height: calc(100vh - 40px);
    width: 90%;
    min-width: 150px;
    align-self: start;  /* Stick to top when scrolling */
    z-index: 100;  /* Ensure proper layering */
}

@media (max-width: 768px) {
    .codex-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: calc(var(--kb-z-modal) + 1);
        transform: translateX(-100%);
        transition: transform var(--kb-transition-base);
        border-radius: 0;
        border: none;
        border-right: 2px solid var(--kb-border-base);
        max-height: 100vh;
    }

    .codex-nav.is-open {
        transform: translateX(0);
    }
}

/* === Navigation Content === */
.codex-nav-content {
    display: flex;
    flex-direction: column;
    gap: var(--kb-space-4);
}

.codex-nav-title {
    font-family: var(--kb-font-heading);
    font-size: var(--kb-text-base);
    font-weight: var(--kb-weight-semibold);
    color: var(--kb-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--kb-tracking-wide);
    margin: 0;
    padding-bottom: var(--kb-space-3);
    border-bottom: 2px solid var(--kb-border-light);
}

/* === Navigation List === */
.codex-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kb-space-2);
}

.codex-nav-item {
    margin: 0;
}

.codex-nav-link {
    width: 100%;
    max-width: 100%;
    text-align: left;
    padding: var(--kb-space-3) var(--kb-space-4);
    background: transparent;
    border: none;
    border-radius: var(--kb-radius-sm);
    font-family: var(--kb-font-body);
    font-size: var(--kb-text-sm);
    color: var(--kb-text-primary);
    cursor: pointer;
    transition: all var(--kb-transition-fast);
    display: flex;
    align-items: center;
    min-height: 44px; /* Touch target */
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

.codex-nav-link:hover {
    background-color: transparent;
    color: var(--kb-text-primary);
}

.codex-nav-link[aria-current="true"] {
    background-color: rgba(139, 90, 43, 0.15);
    color: var(--kb-text-primary);
    font-weight: var(--kb-weight-medium);
}

.codex-nav-link:focus-visible {
    outline: 3px solid var(--kb-wrapper-colorado);
    outline-offset: 2px;
}

/* === Main Content Area === */
.codex-content {
    background-color: transparent;
    padding-top: 0;
    min-height: 60vh;
    width: 100%;
    max-width: 95ch;
}

@media (max-width: 768px) {
    .codex-content {
        padding: var(--kb-space-4);
        max-width: 100%;
    }
}

/* === Codex Main Header === */
.codex-main-header {
    text-align: center;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 2px solid var(--kb-border-dark);
}

.codex-main-title {
    font-family: var(--font-headers);
    font-size: 3rem;
    font-weight: var(--kb-weight-bold);
    color: var(--color-ink);
    margin: 0 0 var(--kb-space-6) 0;
    line-height: var(--leading-tight);
}

.codex-main-subtitle {
    font-family: var(--kb-font-heading);
    font-size: var(--kb-text-lg);
    font-style: italic;
    color: var(--kb-text-secondary);
    margin: 0 0 var(--kb-space-6) 0;
}

@media (max-width: 768px) {
    .codex-main-header {
        margin-bottom: var(--kb-space-8);
        padding-bottom: var(--kb-space-6);
    }

    .codex-main-title {
        font-size: var(--kb-text-2xl);
    }

    .codex-main-subtitle {
        font-size: var(--kb-text-base);
    }
}

/* === Article Container === */
.codex-article {
    margin-top: 20px;
}

/* === Article Header === */
.codex-article-header {
    text-align: center;
    margin-bottom: var(--kb-space-10);
    padding-bottom: var(--kb-space-8);
    border-bottom: 1px solid var(--kb-border-light);
    position: relative;
}

.codex-section-divider {
    display: block;
    width: 120px;
    height: auto;
    margin: 0 auto var(--kb-space-6);
    opacity: 0.8;
}

.codex-article-title {
    font-family: var(--kb-font-heading);
    font-size: var(--kb-text-3xl);
    font-weight: var(--kb-weight-bold);
    color: var(--kb-text-primary);
    margin: 0;
    line-height: var(--leading-tight);
}

@media (max-width: 768px) {
    .codex-article-title {
        font-size: var(--kb-text-2xl);
    }
}

/* === Article Content === */
.codex-article-content {
    font-family: var(--kb-font-body);
    font-size: var(--kb-text-base);
    line-height: var(--leading-relaxed);
    color: var(--kb-text-primary);
}

.codex-article-content > *:first-child {
    margin-top: 0;
}

.codex-article-content > *:last-child {
    margin-bottom: 0;
}

/* === Markdown Element Styles === */

/* Headings */
.codex-article-content h3 {
    font-family: var(--kb-font-heading);
    font-size: var(--kb-text-xl);
    font-weight: var(--kb-weight-semibold);
    color: var(--kb-text-primary);
    margin-top: var(--kb-space-8);
    margin-bottom: var(--kb-space-4);
    line-height: var(--leading-tight);
}

.codex-article-content h4 {
    font-family: var(--kb-font-body);
    font-size: var(--kb-text-lg);
    font-weight: var(--kb-weight-semibold);
    color: var(--kb-text-secondary);
    margin-top: var(--kb-space-6);
    margin-bottom: var(--kb-space-3);
}

.codex-article-content h5,
.codex-article-content h6 {
    font-family: var(--kb-font-body);
    font-size: var(--kb-text-base);
    font-weight: var(--kb-weight-medium);
    color: var(--kb-text-secondary);
    margin-top: var(--kb-space-5);
    margin-bottom: var(--kb-space-2);
}

/* Paragraphs */
.codex-article-content p {
    margin-top: 0;
    margin-bottom: var(--kb-space-5);
}

/* Links */
.codex-article-content a {
    color: var(--kb-wrapper-colorado);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--kb-transition-fast);
}

.codex-article-content a:hover {
    color: var(--kb-wrapper-maduro);
    text-decoration-thickness: 2px;
}

.codex-article-content a:focus-visible {
    outline: 3px solid var(--kb-wrapper-colorado);
    outline-offset: 2px;
    border-radius: var(--kb-radius-sm);
}

/* External links indicator */
.codex-article-content a[href^="http"]:not([href*="silver-smoke"])::after {
    content: '↗';
    font-size: 0.8em;
    margin-left: 0.2em;
    opacity: 0.7;
}

/* Strong/Bold */
.codex-article-content strong,
.codex-article-content b {
    font-weight: var(--kb-weight-semibold);
    color: var(--kb-text-primary);
}

/* Emphasis/Italic */
.codex-article-content em,
.codex-article-content i {
    font-style: italic;
}

/* Lists */
.codex-article-content ul,
.codex-article-content ol {
    margin: var(--kb-space-5) 0;
    padding-left: var(--kb-space-8);
}

.codex-article-content li {
    margin-bottom: var(--kb-space-2);
}

.codex-article-content li:last-child {
    margin-bottom: 0;
}

.codex-article-content ul ul,
.codex-article-content ol ol,
.codex-article-content ul ol,
.codex-article-content ol ul {
    margin: var(--kb-space-3) 0;
}

/* Blockquotes */
.codex-article-content blockquote {
    margin: var(--kb-space-6) 0;
    padding: var(--kb-space-5) var(--kb-space-6);
    background-color: var(--kb-bg-secondary);
    border-left: 4px solid var(--kb-wrapper-colorado);
    border-radius: 0 var(--kb-radius-sm) var(--kb-radius-sm) 0;
    font-style: italic;
    color: var(--kb-text-secondary);
}

.codex-article-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Code */
.codex-article-content code {
    font-family: var(--kb-font-mono);
    font-size: 0.9em;
    background-color: var(--kb-bg-tertiary);
    padding: 0.2em 0.4em;
    border-radius: var(--kb-radius-sm);
    color: var(--kb-text-primary);
}

.codex-article-content pre {
    background-color: var(--kb-bg-tertiary);
    border: 1px solid var(--kb-border-light);
    border-radius: var(--kb-radius-md);
    padding: var(--kb-space-4);
    overflow-x: auto;
    margin: var(--kb-space-6) 0;
}

.codex-article-content pre code {
    background: none;
    padding: 0;
    font-size: var(--kb-text-sm);
}

/* Horizontal Rules */
.codex-article-content hr {
    border: none;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        var(--kb-border-base) 20%,
        var(--kb-border-base) 80%,
        transparent
    );
    margin: var(--kb-space-10) 0;
}

/* Tables (if markdown contains tables) */
.codex-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--kb-space-6) 0;
    font-size: var(--kb-text-sm);
}

.codex-article-content th,
.codex-article-content td {
    padding: var(--kb-space-3) var(--kb-space-4);
    text-align: left;
    border-bottom: 1px solid var(--kb-border-light);
}

.codex-article-content th {
    font-family: var(--kb-font-heading);
    font-weight: var(--kb-weight-semibold);
    background-color: var(--kb-bg-secondary);
    color: var(--kb-text-primary);
}

.codex-article-content tr:hover {
    background-color: var(--kb-bg-secondary);
}

/* === Error State === */
.codex-error {
    text-align: center;
    padding: var(--kb-space-10);
    color: var(--kb-error);
}

.codex-error p {
    font-family: var(--kb-font-body);
    font-size: var(--kb-text-lg);
    margin: 0;
}

/* === Mobile Responsive Adjustments === */
@media (max-width: 768px) {
    .codex-article-content h3 {
        font-size: var(--kb-text-lg);
        margin-top: var(--kb-space-6);
    }

    .codex-article-content h4 {
        font-size: var(--kb-text-base);
        margin-top: var(--kb-space-5);
    }

    .codex-article-content p {
        font-size: var(--kb-text-sm);
        margin-bottom: var(--kb-space-4);
    }

    .codex-article-content ul,
    .codex-article-content ol {
        padding-left: var(--kb-space-6);
        margin: var(--kb-space-4) 0;
    }

    .codex-article-content blockquote {
        padding: var(--kb-space-4);
        margin: var(--kb-space-5) 0;
    }
}

/* ========================================
   MOBILE RESPONSIVE - VINTAGE REFACTOR
   ======================================== */
@media (max-width: 768px) {
    /* Landing page mobile adjustments */
    .landing-logo {
        width: 80%;
        max-width: 300px;
    }
    
    .landing-subtitle {
        font-size: 0.9rem;
        margin-top: -15px;
        margin-bottom: 30px;
    }
    
    .landing-enter {
        font-size: 1.2rem;
        padding: 12px 30px;
    }
    
    /* Dashboard mobile adjustments */
    .dashboard-view {
        padding: 1rem;
    }
    
    .dashboard-hero {
        padding: 2rem 1rem;
    }
    
    .dashboard-hero h1 {
        font-size: 1.8rem;
    }
    
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    /* Modal mobile adjustments */
    .modal-container {
        width: 95%;
        max-height: 90vh;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
    
    .modal-title {
        font-size: 1.4rem;
    }
    
    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 1rem;
    }
    
    /* Session form mobile */
    .modal-container--small {
        width: 95%;
    }
    
    /* Archives mobile */
    .archives-view {
        padding: 1rem;
    }
    
    .view-header h1 {
        font-size: 1.8rem;
    }
    
    .archive-item {
        padding: 1rem;
    }
    
    /* Concierge mobile */
    .concierge-section {
        padding: 1rem;
    }
    
    .concierge-form {
        padding: 1.5rem;
    }
    
    .concierge-results {
        padding: 1.5rem;
    }
    
    .option-btn {
        min-width: 80px;
        padding: 10px 8px;
        font-size: 0.8rem;
    }
    
    .option-icon {
        font-size: 1.2rem;
    }
    
    /* Codex mobile adjustments */
    .codex-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .codex-card {
        padding: 1rem;
    }
    
    /* Navigation mobile adjustments */
    .top-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    
    .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .desktop-nav {
        display: none;
    }
    
    /* History view mobile */
    .history-view {
        padding: 1rem;
    }
    
    .history-filter-section {
        padding: 1rem;
    }
    
    .filter-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .filter-group {
        width: 100%;
    }
    
    /* Session card mobile */
    .session-card {
        padding: 1rem;
    }
    
    /* Button adjustments for touch targets */
    .btn-vintage {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
    }
    
    .btn-ribbon {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

/* === Print Styles === */
@media print {
    .codex-mobile-header,
    .codex-nav,
    .codex-overlay {
        display: none !important;
    }

    .codex-layout {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .codex-article {
        max-width: 100%;
    }

    .codex-article-content a {
        color: var(--kb-text-primary);
        text-decoration: underline;
    }

    .codex-article-content a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
    }
}