/* ======================================================
   NOLAWI DIGITAL HUB — Brand Identity & Design System
   Ethiopian Heritage Palette: Coffee Brown & Ethiopian Gold
   ======================================================
   Tokens:
     Coffee Brown (Primary):       #4A2E1F
     Ethiopian Gold (Accent):      #C89B3C (Hover: #FCCA66, Dark: #7B5900)
     Warm Cream (Page Canvas):     #F7F3ED
     Deep Roast (Dark Surfaces):   #251E1A (or #32190C)
     Charcoal Ink (Typography):    #2B2420
     Card Surface White:           #FFFFFF
     Neutral Border:               #EBE8E2
     Success Green:                #15803D (Bg: #DCFCE7)
   ====================================================== */

/* ── 1. Section & Global Design System Tokens ── */
:root {
    /* Brand Colors */
    --brand-primary:        #4A2E1F;
    --brand-gold:           #C89B3C;
    --brand-gold-hover:     #FCCA66;
    --brand-gold-dark:      #7B5900;
    --brand-cream:          #F7F3ED;
    --brand-dark-roast:     #251E1A;
    --brand-charcoal:       #2B2420;
    --brand-neutral-border: #EBE8E2;

    /* Canvas / Surface tokens */
    --canvas-bg:            #F7F3ED;
    --surface-bg:           #FFFFFF;
    --surface-container:    #FFFFFF;
    --surface-container-low:#F7F3ED;
    --surface-container-high:#EBE8E2;
    --surface-container-highest:#DFDAD3;

    /* Section tokens */
    --section-bg:           #FFFFFF;
    --section-icon-bg:      #F5EFE6;
    --section-icon-color:   #4A2E1F;
    --section-text:         #2B2420;
    --section-muted:        #6E625B;
    --section-svg-bg:       #F7F3ED;
    --section-svg-ring:     #C89B3C;
    --section-svg-accent:   #4A2E1F;
    --section-svg-glow:     rgba(200, 155, 60, 0.15);
    --section-svg-text:     #4A2E1F;
    --section-svg-bar-bg:   #EBE8E2;

    /* Primary & Secondary Palette */
    --primary-color:        #4A2E1F;
    --on-primary:           #FFFFFF;
    --secondary-color:      #C89B3C;
    --on-secondary:         #251E1A;
    --tertiary-color:       #251E1A;
    --text-color:           #2B2420;
    --text-muted:           #6E625B;
    --border-color:         #EBE8E2;
    --border-neutral:       #EBE8E2;
    --border-color-alt:     #C89B3C;

    /* Header & Sidebar */
    --header-bg:            #FFFFFF;
    --sidebar-bg:           #251E1A;
    --primary-container-bg: #F5EFE6;
    --primary-container-text: #2B2420;

    /* Action Buttons */
    --btn-primary-bg:       #4A2E1F;
    --btn-primary-text:     #FFFFFF;
    --btn-highlight-bg:     #C89B3C;
    --btn-highlight-text:   #251E1A;
    --btn-secondary-bg:     #EBE8E2;
    --btn-secondary-text:   #2B2420;

    /* Badge / Status tokens */
    --badge-success-bg:     #DCFCE7;
    --badge-success-text:   #15803D;
    --badge-warn-bg:        #FEF3C7;
    --badge-warn-text:      #92400E;
    --badge-danger-bg:      #FEE2E2;
    --badge-danger-text:    #991B1B;
    --badge-gold-bg:        #FDF6E2;
    --badge-gold-text:      #7B5900;
}

html.dark {
    /* Canvas / Surface tokens */
    --canvas-bg:            #1C1613;
    --surface-bg:           #251E1A;
    --surface-container:    #2E2521;
    --surface-container-low:#221B17;
    --surface-container-high:#3B302B;
    --surface-container-highest:#4A3C36;

    /* Section tokens */
    --section-bg:           #251E1A;
    --section-icon-bg:      #382C26;
    --section-icon-color:   #C89B3C;
    --section-text:         #F7F3ED;
    --section-muted:        #C7BEB7;
    --section-svg-bg:       #1C1613;
    --section-svg-ring:     #7B5900;
    --section-svg-accent:   #C89B3C;
    --section-svg-glow:     rgba(200, 155, 60, 0.25);
    --section-svg-text:     #FCCA66;
    --section-svg-bar-bg:   #382C26;

    /* Primary & Secondary Palette */
    --primary-color:        #C89B3C;
    --on-primary:           #251E1A;
    --secondary-color:      #FCCA66;
    --on-secondary:         #251E1A;
    --tertiary-color:       #4A2E1F;
    --text-color:           #F7F3ED;
    --text-muted:           #C7BEB7;
    --border-color:         #3B302B;
    --border-neutral:       #3B302B;
    --border-color-alt:     #C89B3C;

    /* Header & Sidebar */
    --header-bg:            #251E1A;
    --sidebar-bg:           #1C1613;
    --primary-container-bg: #382C26;
    --primary-container-text: #F7F3ED;

    /* Action Buttons */
    --btn-primary-bg:       #C89B3C;
    --btn-primary-text:     #251E1A;
    --btn-highlight-bg:     #FCCA66;
    --btn-highlight-text:   #251E1A;
    --btn-secondary-bg:     #382C26;
    --btn-secondary-text:   #F7F3ED;

    /* Badge / Status tokens */
    --badge-success-bg:     rgba(21, 128, 61, 0.2);
    --badge-success-text:   #86EFAC;
    --badge-warn-bg:        rgba(200, 155, 60, 0.2);
    --badge-warn-text:      #FCCA66;
    --badge-danger-bg:      rgba(239, 68, 68, 0.2);
    --badge-danger-text:    #FCA5A5;
    --badge-gold-bg:        rgba(200, 155, 60, 0.2);
    --badge-gold-text:      #FCCA66;
}

/* ── 2. Global Icon Standard ── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}
.icon-sm  { font-size: 20px !important; }
.icon-xs  { font-size: 16px !important; }
.icon-lg  { font-size: 48px !important; }
.icon-filled { font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48 !important; }

/* ── 3. Icon Container Standard ── */
.nw-icon-wrap {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--section-icon-bg);
    box-shadow: 0 2px 8px var(--section-svg-glow);
}
.nw-icon-wrap .material-symbols-outlined {
    font-size: 36px;
    color: var(--section-icon-color);
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
.nw-icon-wrap-sm {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--section-icon-bg);
}
.nw-icon-wrap-sm .material-symbols-outlined {
    font-size: 22px;
    color: var(--section-icon-color);
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

/* ── 4. Typography Standards (Charcoal Ink & High Contrast) ── */
body {
    background-color: var(--canvas-bg) !important;
    color: var(--text-color) !important;
    font-family: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: var(--section-text) !important;
    letter-spacing: -0.02em;
}
h1 { font-size: 2.5rem; line-height: 1.15; }
h2 { font-size: 1.75rem; line-height: 1.25; }
h3 { font-size: 1.25rem; line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.4; }

.nw-card-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.25 !important;
    color: var(--section-text) !important;
}
.nw-section-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--section-text);
}
.nw-section-sub {
    font-size: 14px;
    font-weight: 600;
    color: var(--section-muted);
    line-height: 1.6;
}
.nw-card-body {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
    color: var(--section-muted) !important;
}

/* Light mode text contrast enforcement */
html:not(.dark) body,
html:not(.dark) p,
html:not(.dark) span:not(.material-symbols-outlined):not([class*="text-white"]):not([class*="text-gold"]):not([class*="text-amber"]),
html:not(.dark) li,
html:not(.dark) label,
html:not(.dark) td,
html:not(.dark) th {
    color: #2B2420;
}
html:not(.dark) .text-muted,
html:not(.dark) .text-muted-custom,
html:not(.dark) .text-on-surface-variant {
    color: #6E625B !important;
}

/* ── 5. Product & Item Cards Standard (Pure White Elevated Surfaces) ── */
.isomorphic-card,
.premium-card,
.titanium-edge,
.nw-card,
.product-card,
.step-card {
    background: var(--section-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 1.25rem !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html:not(.dark) .isomorphic-card,
html:not(.dark) .premium-card,
html:not(.dark) .titanium-edge,
html:not(.dark) .nw-card,
html:not(.dark) .product-card,
html:not(.dark) .step-card {
    background: #FFFFFF !important;
    border-color: #EBE8E2 !important;
    box-shadow: 0 4px 16px rgba(74, 46, 31, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

html.dark .isomorphic-card,
html.dark .premium-card,
html.dark .titanium-edge,
html.dark .nw-card,
html.dark .product-card,
html.dark .step-card {
    background: #251E1A !important;
    border-color: #3B302B !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Card hover elevations */
@media (min-width: 1024px) {
    .isomorphic-card:hover,
    .premium-card:hover,
    .titanium-edge:hover,
    .nw-card:hover,
    .product-card:hover,
    .step-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 28px rgba(74, 46, 31, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
        border-color: #C89B3C !important;
    }
}

/* ── 6. Price Tags Standard (Ethiopian Gold Accent) ── */
.price-tag,
.product-price,
.nw-price-gold,
[class*="price_gold"],
[data-price] {
    color: #C89B3C !important;
    font-weight: 800 !important;
}
.gold-text {
    color: #C89B3C !important;
}
.gold-bg {
    background-color: #C89B3C !important;
}
.gold-border {
    border-color: #C89B3C !important;
}

/* ── 7. Action Button Design Standard ── */

/* Primary Action Buttons */
.btn-primary,
.nw-btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: #4A2E1F !important;
    color: #FFFFFF !important;
    border: 1.5px solid #4A2E1F !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(74, 46, 31, 0.15) !important;
}
.btn-primary .material-symbols-outlined,
.nw-btn-primary .material-symbols-outlined {
    color: #C89B3C !important;
}
.btn-primary:hover,
.nw-btn-primary:hover {
    background-color: #382317 !important;
    border-color: #C89B3C !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(74, 46, 31, 0.25) !important;
}

/* Highlight / CTA Buttons (Gold CTA) */
.btn-highlight,
.btn-cta-gold,
.nw-btn-highlight,
[class*="pricing_growth_btn"] {
    background-color: #C89B3C !important;
    color: #251E1A !important;
    border: 1.5px solid #C89B3C !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(200, 155, 60, 0.25) !important;
}
.btn-highlight:hover,
.btn-cta-gold:hover,
.nw-btn-highlight:hover,
[class*="pricing_growth_btn"]:hover {
    background-color: #FCCA66 !important;
    border-color: #FCCA66 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(200, 155, 60, 0.4) !important;
}

/* Secondary / Cancel Buttons */
.btn-secondary,
.btn-cancel,
.nw-btn-secondary,
[class*="pricing_starter_btn"] {
    background-color: #EBE8E2 !important;
    color: #2B2420 !important;
    border: 1.5px solid #EBE8E2 !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
html.dark .btn-secondary,
html.dark .btn-cancel,
html.dark .nw-btn-secondary {
    background-color: #382C26 !important;
    color: #F7F3ED !important;
    border-color: #3B302B !important;
}
.btn-secondary:hover,
.btn-cancel:hover,
.nw-btn-secondary:hover {
    background-color: #DFDAD3 !important;
    border-color: #C89B3C !important;
    transform: translateY(-1px) !important;
}
html.dark .btn-secondary:hover,
html.dark .btn-cancel:hover,
html.dark .nw-btn-secondary:hover {
    background-color: #4A3C36 !important;
    border-color: #C89B3C !important;
}

/* Outline style buttons */
.btn-outline {
    background: transparent !important;
    border: 1.5px solid #4A2E1F !important;
    color: #4A2E1F !important;
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
html.dark .btn-outline {
    border-color: #C89B3C !important;
    color: #C89B3C !important;
}
.btn-outline:hover {
    background: rgba(200, 155, 60, 0.08) !important;
    border-color: #C89B3C !important;
}

/* ── 8. Sidebar & Navigation Standard (Deep Roast #251E1A) ── */
.sidebar,
aside.sidebar,
nav.sidebar,
#sidebar {
    background-color: #251E1A !important;
    border-right: 1px solid #3B302B !important;
}
.sidebar a,
aside.sidebar a,
nav.sidebar a {
    color: #C7BEB7 !important;
    transition: all 0.2s ease !important;
}
.sidebar a:hover,
aside.sidebar a:hover,
nav.sidebar a:hover {
    color: #FCCA66 !important;
    background: rgba(200, 155, 60, 0.08) !important;
}

/* Active Nav Item */
.sidebar a.active,
.sidebar a.nav-active,
aside.sidebar a.active,
.sidebar [aria-current="page"] {
    background-color: rgba(200, 155, 60, 0.15) !important;
    color: #FCCA66 !important;
    border-left: 3px solid #C89B3C !important;
    font-weight: 800 !important;
}
.sidebar a.active .material-symbols-outlined,
aside.sidebar a.active .material-symbols-outlined {
    color: #C89B3C !important;
}

/* Header & Top Bar */
header,
#nw-header,
.top-bar {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
html:not(.dark) header,
html:not(.dark) #nw-header {
    background: #FFFFFF !important;
    border-bottom-color: #EBE8E2 !important;
}
html.dark header,
html.dark #nw-header {
    background: #251E1A !important;
    border-bottom-color: #3B302B !important;
}

/* Brand Logo Text */
#nav-brand-title,
h1#nav-brand-title {
    font-weight: 800 !important;
    color: var(--primary-color) !important;
}
html:not(.dark) #nav-brand-title {
    color: #4A2E1F !important;
}
html.dark #nav-brand-title {
    color: #FCCA66 !important;
}

/* ── 9. Header Selection Tabs (No blocky outlines) ── */
.auth-tab,
[role="tab"] {
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}
.auth-tab.active,
[role="tab"][aria-selected="true"] {
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    color: var(--primary-color) !important;
    border-bottom: 2px solid #C89B3C !important;
}
.auth-tab:not(.active),
[role="tab"][aria-selected="false"] {
    transform: scale(0.95) !important;
    font-weight: 600 !important;
    opacity: 0.6 !important;
}

/* ── 10. Form Inputs & Password Toggles ── */
input,
select,
textarea {
    border-radius: 0.75rem !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.9rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
}
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background: #FFFFFF !important;
    color: #2B2420 !important;
    border-color: #EBE8E2 !important;
}
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: #4A2E1F !important;
    box-shadow: 0 0 0 3px rgba(74, 46, 31, 0.1) !important;
}

html.dark input,
html.dark select,
html.dark textarea {
    background: #1C1613 !important;
    color: #F7F3ED !important;
    border-color: #3B302B !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #C89B3C !important;
    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.15) !important;
}

/* Password field toggles: completely transparent */
.password-toggle-btn,
button.password-toggle,
[onclick*="togglePassword"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: #6E625B !important;
    box-shadow: none !important;
}
.password-toggle-btn:hover,
[onclick*="togglePassword"]:hover {
    color: #C89B3C !important;
}

/* ── 11. Badges Standard ── */
.nw-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.nw-badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.nw-badge-warn    { background: var(--badge-warn-bg);    color: var(--badge-warn-text);    }
.nw-badge-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  }
.nw-badge-primary { background: #F5EFE6; color: #4A2E1F; }
.nw-badge-gold    { background: #FDF6E2; color: #7B5900; }

/* ── 12. Bottom Navigation — Ethiopian Gold Active System ── */
nav.fixed.bottom-0 {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid #EBE8E2 !important;
}
html.dark nav.fixed.bottom-0 {
    background: rgba(37, 30, 26, 0.95) !important;
    border-top-color: #3B302B !important;
}
nav.fixed.bottom-0 a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    color: #6E625B !important;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 2px;
}
html.dark nav.fixed.bottom-0 a {
    color: #C7BEB7 !important;
}
nav.fixed.bottom-0 a.nlw-nav-active,
nav.fixed.bottom-0 a.active {
    transform: translateY(-3px) !important;
    color: #4A2E1F !important;
}
html.dark nav.fixed.bottom-0 a.nlw-nav-active,
html.dark nav.fixed.bottom-0 a.active {
    color: #FCCA66 !important;
}
nav.fixed.bottom-0 a.nlw-nav-active .material-symbols-outlined,
nav.fixed.bottom-0 a.active .material-symbols-outlined {
    color: #C89B3C !important;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24 !important;
}
.nlw-nav-underline {
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 2.5px !important;
    background: #C89B3C !important;
    border-radius: 2px !important;
}

/* ── 13. High-Contrast Modal Standard ── */
.nlw-theme-modal {
    border-radius: 2rem !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 25px 50px -12px rgba(74, 46, 31, 0.25) !important;
    background-color: var(--surface-bg) !important;
}
html:not(.dark) .nlw-theme-modal {
    background-color: #FFFFFF !important;
    color: #2B2420 !important;
}
html.dark .nlw-theme-modal {
    background-color: #251E1A !important;
    color: #F7F3ED !important;
}
.nlw-modal-title {
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: var(--section-text) !important;
}
.nlw-modal-desc {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--section-muted) !important;
}

/* ── 14. Rich Golden & Coffee Typography & Aesthetic Highlights ── */
.text-gold, .gold-text {
    color: #C89B3C !important;
}
.text-coffee, .coffee-text {
    color: #4A2E1F !important;
}
.bg-coffee {
    background-color: #4A2E1F !important;
    color: #FFFFFF !important;
}
.bg-gold {
    background-color: #C89B3C !important;
    color: #251E1A !important;
}
.border-gold {
    border-color: #C89B3C !important;
}
.border-coffee {
    border-color: #4A2E1F !important;
}

.gold-gradient-text {
    background: linear-gradient(135deg, #C89B3C 0%, #7B5900 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}
.coffee-gradient-text {
    background: linear-gradient(135deg, #4A2E1F 0%, #251E1A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

.gold-badge {
    background: #FDF6E2 !important;
    color: #7B5900 !important;
    border: 1px solid #C89B3C !important;
    font-weight: 800 !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.75rem !important;
}
.coffee-badge {
    background: #F5EFE6 !important;
    color: #4A2E1F !important;
    border: 1px solid #4A2E1F !important;
    font-weight: 800 !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.75rem !important;
}

.gold-glow {
    box-shadow: 0 0 20px rgba(200, 155, 60, 0.35) !important;
}
.coffee-glow {
    box-shadow: 0 0 20px rgba(74, 46, 31, 0.25) !important;
}

.gold-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #C89B3C, transparent);
    width: 100%;
    margin: 1.5rem 0;
}

/* ── 15. Scrollbar & Selection ── */
::selection {
    background: rgba(200, 155, 60, 0.25);
    color: #2B2420;
}
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(74, 46, 31, 0.2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(200, 155, 60, 0.5); }