/* =====================================================
   DRiPS — Theme System (Light / Dark)
   Dark is default (defined per-page inline CSS).
   This file adds CSS variables + light theme overrides.
   ===================================================== */

/* ── CSS Variables (theme-aware) ── */
:root {
    --copper: #C9CDD6;
    --copper-h: #C9CDD6;
    --bg: #1E1E1E;
    --surface: #2D2D2D;
    --surface-alt: #383838;
    --text: #ECECEC;
    --text-2: rgba(240,240,240,0.60);
    --text-3: rgba(240,240,240,0.42);
    --text-4: rgba(240,240,240,0.26);
    --border: rgba(240,240,240,0.08);
    --border-m: rgba(240,240,240,0.13);
    --opt-bg: #383838;
}

[data-theme="light"] {
    --copper: #8B5A10;
    --copper-h: #7A4F0E;
    --bg: #F2E9DC;
    --surface: #FCF8F2;
    --surface-alt: #E6D9C8;
    --text: #1E1A15;
    --text-2: rgba(30,26,21,0.74);
    --text-3: rgba(30,26,21,0.58);
    --text-4: rgba(30,26,21,0.42);
    --border: rgba(30,26,21,0.09);
    --border-m: rgba(30,26,21,0.15);
    --opt-bg: #E6D9C8;
}

/* ── Global theme overrides (cover hardcoded inline styles) ── */
body { background: var(--bg) !important; color: var(--text) !important; }
.recipe-card, .article-card, .water-card, .machine-card,
.tool-card, .card, .form-section,
.section:not(.filament-section) { background: var(--surface) !important; }

/* ── Theme Toggle Button ── */
.theme-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
    width: 34px; height: 34px;
    border-radius: 8px; cursor: pointer;
    font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--copper); color: var(--copper); }

[data-theme="light"] .theme-toggle {
    border-color: rgba(28,26,24,0.15);
    color: rgba(28,26,24,0.55);
}
[data-theme="light"] .theme-toggle:hover {
    border-color: var(--copper);
    color: var(--copper);
}


/* ============================================================
   LIGHT THEME OVERRIDES
   All rules prefixed with [data-theme="light"]
   ============================================================ */

/* ── Global ── */
[data-theme="light"] body {
    background: #F2E9DC !important;
    color: #1E1A15 !important;
}

/* ── Site Header (light) ── */
[data-theme="light"] .site-header {
    background: #F5EDE3;
    border-bottom-color: rgba(30,26,21,0.1);
}
[data-theme="light"] .hamburger { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .hamburger span { background: rgba(0,0,0,0.55); }

/* ── Nav Dropdown (light) ── */
[data-theme="light"] .nav-dropdown { background: #FCF8F2; border-color: rgba(30,26,21,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .nd-user-card { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .nd-user-card:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .nd-avatar { background: linear-gradient(135deg, #8B5A10, #7A4F0E); }
[data-theme="light"] .nd-user-email { color: rgba(28,26,24,0.38); }
[data-theme="light"] .nd-link { color: rgba(28,26,24,0.62); }
[data-theme="light"] .nd-link:hover { background: rgba(0,0,0,0.04); color: #1C1A18; }
[data-theme="light"] .nd-link.active { color: #8B5A10; background: rgba(139,90,16,0.08); }
[data-theme="light"] .nd-sep-label { color: rgba(30,26,21,0.35); }
[data-theme="light"] .nd-separator::before, [data-theme="light"] .nd-separator::after { background: rgba(0,0,0,0.08); }
[data-theme="light"] .nd-footer { border-top-color: rgba(0,0,0,0.07); }
[data-theme="light"] .nd-theme-btn { background: rgba(0,0,0,0.04); color: rgba(28,26,24,0.6); }
[data-theme="light"] .nd-theme-btn:hover { background: rgba(0,0,0,0.07); color: #1C1A18; }
[data-theme="light"] .nd-logout-btn { background: rgba(220,38,38,0.06); color: rgba(220,38,38,0.75); }
[data-theme="light"] .nd-logout-btn:hover { background: rgba(220,38,38,0.11); color: #DC2626; }
[data-theme="light"] .nd-login-btn { background: #8B5A10; }
[data-theme="light"] .nd-login-btn:hover { background: #7A4F0E; }

/* ── Recipe Grid / Index Pages ── */
[data-theme="light"] .recipe-card {
    background: #FCF8F2 !important;
    border-color: rgba(30,26,21,0.1) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
[data-theme="light"] .recipe-card:hover {
    border-color: rgba(139,90,16,0.38) !important;
}
[data-theme="light"] .card-thumb-placeholder {
    background: linear-gradient(135deg, #EDE5D8, #F5EDE3);
    color: rgba(139,90,16,0.3);
}
[data-theme="light"] .card-title { color: #1C1A18; }
[data-theme="light"] .stat-item { color: rgba(28,26,24,0.50); }
[data-theme="light"] .stat-item strong { color: #1C1A18; }
[data-theme="light"] .card-footer {
    border-top-color: rgba(28,26,24,0.07);
    color: rgba(28,26,24,0.35);
}
[data-theme="light"] .equip-name { color: rgba(28,26,24,0.50); }
[data-theme="light"] .card-meta { color: rgba(28,26,24,0.50); }
[data-theme="light"] .card-meta strong { color: #1C1A18; }

/* ── Filters (Index Pages) ── */
[data-theme="light"] .filter-select {
    background: #FCF8F2;
    border-color: rgba(28,26,24,0.14);
    color: #1C1A18;
}
[data-theme="light"] .filter-select option { background: #F5EFE8; }
[data-theme="light"] .filter-select:focus { border-color: #8B5A10; }
[data-theme="light"] .filter-btn { background: #8B5A10; }
[data-theme="light"] .filter-btn:hover { background: #7A4F0E; }
[data-theme="light"] .filter-reset { color: rgba(28,26,24,0.40); }
[data-theme="light"] .filter-reset:hover { color: #1C1A18; }

/* ── Page Header (Index) ── */
[data-theme="light"] .page-subtitle { color: rgba(28,26,24,0.45); }

/* ── Empty State ── */
[data-theme="light"] .empty-state { color: rgba(28,26,24,0.25); }
[data-theme="light"] .empty-mini { color: rgba(28,26,24,0.25); }

/* ── Pagination ── */
[data-theme="light"] .pagination-wrap a {
    background: #FCF8F2;
    border-color: rgba(28,26,24,0.12);
    color: #1C1A18;
}
[data-theme="light"] .pagination-wrap a:hover {
    border-color: #8B5A10;
    color: #8B5A10;
}
[data-theme="light"] .pagination-wrap span[aria-current="page"] > span {
    background: #8B5A10;
    border-color: #8B5A10;
    color: #fff;
}

/* ── Show Page: Back Link ── */
[data-theme="light"] .back-link { color: rgba(28,26,24,0.48); }
[data-theme="light"] .back-link:hover { color: #8B5A10; }

/* ── Show Page: Hero ── */
[data-theme="light"] .hero-placeholder {
    background: linear-gradient(135deg, #EDE0CE, #F5EFE8);
    color: rgba(139,90,16,0.3);
}
[data-theme="light"] .recipe-meta { color: rgba(28,26,24,0.42); }
[data-theme="light"] .recipe-meta span { color: rgba(28,26,24,0.65); }

/* ── Show Page: Sections ── */
[data-theme="light"] .section:not(.filament-section) {
    background: #FCF8F2 !important;
    border-color: rgba(30,26,21,0.1) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
[data-theme="light"] .section-title { color: #8B5A10; }
[data-theme="light"] .param-box {
    background: rgba(30,26,21,0.05);
    border-color: rgba(30,26,21,0.09);
}
[data-theme="light"] .param-label { color: rgba(28,26,24,0.42); }
[data-theme="light"] .param-unit { color: rgba(28,26,24,0.42); }
[data-theme="light"] .param-dash { color: rgba(28,26,24,0.22); }
[data-theme="light"] .info-label { color: rgba(28,26,24,0.42); }
[data-theme="light"] .equip-card {
    background: rgba(30,26,21,0.05);
    border-color: rgba(30,26,21,0.09);
}
[data-theme="light"] .equip-type { color: #8B5A10; }
[data-theme="light"] .equip-brand { color: rgba(28,26,24,0.38); }
[data-theme="light"] .notes-text { color: rgba(28,26,24,0.68); }

/* ── Show Page: Stats Bar ── */
[data-theme="light"] .stat-pill { color: rgba(28,26,24,0.42); }

/* ── Show Page: Favorite Button ── */
[data-theme="light"] .fav-btn {
    background: rgba(28,26,24,0.04);
    border-color: rgba(28,26,24,0.14);
    color: rgba(28,26,24,0.62);
}
[data-theme="light"] .fav-btn:hover { border-color: #e05; color: #c00; }
[data-theme="light"] .fav-btn.favorited {
    background: rgba(220,20,60,0.08);
    border-color: rgba(220,20,60,0.3);
    color: #c00;
}

/* ── Show Page: Comments ── */
[data-theme="light"] .comment-item { border-bottom-color: rgba(28,26,24,0.07); }
[data-theme="light"] .comment-date { color: rgba(28,26,24,0.35); }
[data-theme="light"] .comment-body { color: rgba(28,26,24,0.72); }
[data-theme="light"] .comment-form { border-top-color: rgba(28,26,24,0.07); }
[data-theme="light"] .comment-textarea {
    background: #F5EDE3;
    border-color: rgba(30,26,21,0.15);
    color: #1E1A15;
}
[data-theme="light"] .comment-textarea:focus { border-color: #8B5A10; }
[data-theme="light"] .comment-submit { background: #8B5A10; }
[data-theme="light"] .comment-submit:hover { background: #7A4F0E; }
[data-theme="light"] .comment-login-prompt { color: rgba(28,26,24,0.42); }
[data-theme="light"] .comment-login-prompt a { color: #8B5A10; }
[data-theme="light"] .no-comments { color: rgba(28,26,24,0.30); }

/* ── Homepage: Hero ── */
[data-theme="light"] .hero::before {
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(139,90,16,0.10) 0%, transparent 70%);
}
[data-theme="light"] .hero-eyebrow {
    color: #8B5A10;
    border-color: rgba(139,90,16,0.28);
    background: rgba(139,90,16,0.07);
}
[data-theme="light"] .hero-title { color: #1C1A18; }
[data-theme="light"] .hero-title span { color: #8B5A10; }
[data-theme="light"] .hero-desc { color: rgba(28,26,24,0.52); }
[data-theme="light"] .btn-primary { background: #8B5A10; }
[data-theme="light"] .btn-primary:hover { background: #7A4F0E; }
[data-theme="light"] .btn-secondary {
    background: rgba(28,26,24,0.06);
    color: rgba(28,26,24,0.72);
    border-color: rgba(28,26,24,0.14);
}
[data-theme="light"] .btn-secondary:hover {
    background: rgba(28,26,24,0.1);
    border-color: rgba(28,26,24,0.22);
}

/* ── Homepage: Stats Bar ── */
[data-theme="light"] .stats-bar {
    background: rgba(30,26,21,0.05);
    border-top-color: rgba(30,26,21,0.09);
    border-bottom-color: rgba(30,26,21,0.09);
}
[data-theme="light"] .stat-num { color: #8B5A10; }
[data-theme="light"] .stat-label { color: rgba(28,26,24,0.40); }

/* ── Homepage: Sections ── */
[data-theme="light"] .section-title::before { background: #8B5A10; }
[data-theme="light"] .section-link { color: rgba(28,26,24,0.38); }
[data-theme="light"] .section-link:hover { color: #8B5A10; }
[data-theme="light"] .divider { border-top-color: rgba(28,26,24,0.07); }

/* ── Homepage: Tools ── */
[data-theme="light"] .tool-card {
    background: #FCF8F2 !important;
    border-color: rgba(30,26,21,0.1) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
[data-theme="light"] .tool-card:hover { border-color: rgba(139,90,16,0.32); }
[data-theme="light"] .tool-desc { color: rgba(28,26,24,0.42); }

/* ── Homepage: Footer ── */
[data-theme="light"] .site-footer {
    border-top-color: rgba(28,26,24,0.07);
    color: rgba(28,26,24,0.30);
}

/* ── Auth Pages ── */
[data-theme="light"] .page-wrap { background: #F2E9DC; }
[data-theme="light"] .card {
    background: #FCF8F2 !important;
    border-color: rgba(30,26,21,0.1) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}
[data-theme="light"] .card-subtitle { color: rgba(30,26,21,0.48); }
[data-theme="light"] .form-label { color: rgba(30,26,21,0.62); }
[data-theme="light"] .form-input {
    background: #F5EDE3;
    border-color: rgba(30,26,21,0.14);
    color: #1E1A15;
}
[data-theme="light"] .form-input:focus { border-color: #8B5A10; }
[data-theme="light"] .form-check { color: rgba(28,26,24,0.52); }
[data-theme="light"] .form-input.error { border-color: #EF4444; }
[data-theme="light"] .btn-primary { background: #8B5A10; }
[data-theme="light"] .btn-primary:hover { background: #7A4F0E; }
[data-theme="light"] .card-footer { color: rgba(28,26,24,0.42); }
[data-theme="light"] .card-footer a { color: #8B5A10; }

/* ── Grinder Converter (Tool Pages) ── */
[data-theme="light"] .card-title { color: #8B5A10; border-bottom-color: rgba(139,90,16,0.15); }
[data-theme="light"] .field label { color: rgba(30,26,21,0.55); }
[data-theme="light"] .field select,
[data-theme="light"] .field input {
    background: #EAE0D4;
    border-color: rgba(30,26,21,0.15);
    color: #1E1A15;
}
[data-theme="light"] .field select option { background: #F2E9DC; }
[data-theme="light"] .field select:focus,
[data-theme="light"] .field input:focus { border-color: #8B5A10; }
[data-theme="light"] .micron-display {
    background: rgba(139,90,16,0.07);
    border-color: rgba(139,90,16,0.2);
}
[data-theme="light"] .click-display {
    background: rgba(30,26,21,0.04);
    border-color: rgba(30,26,21,0.1);
}
[data-theme="light"] .click-number { color: #1E1A15; }
[data-theme="light"] .click-label { color: rgba(30,26,21,0.38); }
[data-theme="light"] .setting-strip {
    background: rgba(30,26,21,0.04);
    border-color: rgba(30,26,21,0.08);
    color: rgba(30,26,21,0.48);
}
[data-theme="light"] .setting-num { color: #1E1A15; }
[data-theme="light"] .calc-result {
    background: rgba(30,26,21,0.04);
    border-color: rgba(30,26,21,0.08);
    color: rgba(30,26,21,0.52);
}
[data-theme="light"] .btn {
    background: rgba(139,90,16,0.12);
    border-color: rgba(139,90,16,0.35);
    color: #8B5A10;
}
[data-theme="light"] .btn:hover { background: rgba(139,90,16,0.2); }
[data-theme="light"] .tag-grind { color: #8B5A10; }
[data-theme="light"] .tag-brew { color: #3A7A62; }
[data-theme="light"] .tag-roast {
    background: rgba(28,26,24,0.06);
    color: rgba(28,26,24,0.60);
    border-color: rgba(28,26,24,0.12);
}
[data-theme="light"] #rotationDisplay { color: rgba(139,90,16,0.85); }

/* =====================================================
   DRiPS — Site Header + Nav Dropdown
   ===================================================== */

/* ── Header Bar ── */
.site-header {
    background: #1E1E1E;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 0 20px;
    position: sticky; top: 0; z-index: 1000;
}
.header-inner {
    max-width: 1200px; margin: 0 auto;
    height: 68px; display: flex; align-items: center;
    justify-content: center; position: relative;
}
.header-logo {
    display: flex; align-items: center; text-decoration: none;
}
.header-logo img {
    height: 56px; width: auto;
}
.header-logo .logo-light { display: none; }
.header-logo .logo-dark  { display: block; }
[data-theme="light"] .header-logo .logo-dark  { display: none; }
[data-theme="light"] .header-logo .logo-light { display: block; }

/* ── Hamburger ── */
.hamburger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; cursor: pointer;
    width: 38px; height: 38px; align-items: center; justify-content: center; flex-shrink: 0;
    position: absolute; left: 0;
}
.hamburger span {
    display: block; width: 18px; height: 2px;
    background: rgba(255,255,255,0.85); border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Nav Dropdown Panel ── */
.nav-overlay {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

.nav-dropdown {
    position: fixed;
    top: 68px; left: 16px; right: auto;
    width: 280px;
    background: #2D2D2D;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    z-index: 1002;
    overflow: hidden;
    transform: translateY(-8px) scale(0.97);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.22s, opacity 0.22s, visibility 0.22s;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
}
.nav-dropdown.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* User card inside dropdown */
.nd-user-card {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
    text-decoration: none; color: inherit;
    transition: background 0.15s;
}
.nd-user-card:hover { background: rgba(255,255,255,0.04); }
.nd-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #C9CDD6, #8B5A10);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.nd-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.nd-user-name { font-size: 14px; font-weight: 600; }
.nd-user-email { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }

/* Nav links */
.nd-nav { padding: 8px 0; }
.nd-link {
    display: block; padding: 11px 18px;
    color: rgba(255,255,255,0.65); font-size: 14px; text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.nd-link:hover { background: rgba(255,255,255,0.05); color: #E5E5E5; }
.nd-link.active { color: #C9CDD6; background: rgba(201,205,214,0.07); }

/* Separator */
.nd-separator {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px 4px; margin-top: 4px;
}
.nd-sep-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.9px;
    text-transform: uppercase; color: rgba(255,255,255,0.30);
    white-space: nowrap;
}
.nd-separator::before, .nd-separator::after {
    content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07);
}
.nd-separator:not(:has(.nd-sep-label))::after { display: none; }

/* Footer of dropdown */
.nd-footer {
    padding: 8px 10px 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex; gap: 8px; flex-wrap: wrap;
}
.nd-theme-btn, .nd-logout-btn {
    flex: 1; min-width: 100px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 12px; border-radius: 8px; font-size: 13px; cursor: pointer;
    font-family: 'Tajawal', sans-serif; border: none; transition: background 0.15s;
}
.nd-theme-btn { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); }
.nd-theme-btn:hover { background: rgba(255,255,255,0.09); color: #E5E5E5; }
.nd-logout-btn { background: rgba(239,68,68,0.08); color: rgba(239,68,68,0.7); }
.nd-logout-btn:hover { background: rgba(239,68,68,0.14); color: #F87171; }
.nd-login-btn {
    flex: 1; display: block; text-align: center;
    background: #C9CDD6; color: #fff; padding: 10px;
    border-radius: 8px; font-size: 13px; text-decoration: none;
    transition: background 0.2s;
}
.nd-login-btn:hover { background: #C9CDD6; }

/* Mobile: full-width dropdown */
@media (max-width: 600px) {
    .nav-dropdown { right: 8px; left: 8px; width: auto; }
}

/* Footer */
.site-footer-outer {
    background: #2D2D2D;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: auto;
}
.site-footer-dynamic {
    padding: 40px 24px 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 32px 24px;
    margin-bottom: 36px;
}
.footer-col { display: flex; flex-direction: column; }
.footer-col-title {
    font-size: 12px;
    font-weight: 700;
    color: #C9CDD6;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201,205,214,0.2);
}
.footer-col-links { display: flex; flex-direction: column; gap: 10px; }
.footer-link {
    color: rgba(255,255,255,0.45);
    font-size: 13.5px;
    text-decoration: none;
    transition: color 0.18s, padding-right 0.18s;
}
.footer-link:hover { color: #C9CDD6; padding-right: 4px; }
.footer-col-social { display: flex; flex-direction: column; gap: 8px; }
.footer-social-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.45);
    text-decoration: none; font-size: 13.5px;
    padding: 7px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
    transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.footer-social-link:hover { color: #C9CDD6; background: rgba(201,205,214,0.07); border-color: rgba(201,205,214,0.25); }
.footer-social-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.social-label { font-size: 13px; }
.footer-col-ads { display: flex; flex-direction: column; gap: 12px; }
.footer-ad-link { display: block; }
.footer-ad-img { width: 100%; max-height: 80px; object-fit: contain; border-radius: 8px; opacity: 0.8; transition: opacity 0.2s; }
.footer-ad-img:hover { opacity: 1; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 20px; text-align: center; }
.footer-copy { color: rgba(255,255,255,0.2); font-size: 12px; }
@media (max-width: 600px) { .footer-columns { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }
@media (max-width: 360px) { .footer-columns { grid-template-columns: 1fr; } }
[data-theme="light"] .footer-col-title { color: #8B5A10; border-bottom-color: rgba(139,90,16,0.2); }
[data-theme="light"] .footer-link { color: rgba(28,26,24,0.45); }
[data-theme="light"] .footer-link:hover { color: #8B5A10; }
[data-theme="light"] .footer-social-link { color: rgba(28,26,24,0.5); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .footer-social-link:hover { color: #8B5A10; background: rgba(139,90,16,0.06); border-color: rgba(139,90,16,0.2); }
[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.07); }
[data-theme="light"] .footer-copy { color: rgba(0,0,0,0.22); }
[data-theme="light"] .site-footer-outer { background: #E6D9C8; border-top-color: rgba(30,26,21,0.1); }

/* ── Submit Forms (light theme) ── */
[data-theme="light"] .form-section {
    background: #FCF8F2 !important;
    border-color: rgba(139,90,16,0.18);
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
[data-theme="light"] .section-title { color: #8B5A10; }
[data-theme="light"] .page-title { color: #78350F; }
[data-theme="light"] .page-sub { color: rgba(120,53,15,0.5); }
[data-theme="light"] .back-link { color: rgba(120,53,15,0.45); }
[data-theme="light"] .back-link:hover { color: #8B5A10; }
[data-theme="light"] .form-label,
[data-theme="light"] label { color: rgba(28,26,24,0.65); }
[data-theme="light"] .form-input,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="file"],
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #F5EDE3;
    border-color: rgba(139,90,16,0.2);
    color: #1E1A15;
}
[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="number"]:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus { border-color: #8B5A10; outline: none; }
[data-theme="light"] select option { background: #fff; color: #1C1A18; }
[data-theme="light"] .step-row,
[data-theme="light"] .ingredient-row {
    background: #E6D9C8;
    border-color: rgba(139,90,16,0.18);
}
[data-theme="light"] .btn-add-step,
[data-theme="light"] .btn-add-ingredient {
    background: rgba(139,90,16,0.07);
    border-color: rgba(139,90,16,0.25);
    color: #8B5A10;
}
[data-theme="light"] .btn-add-step:hover,
[data-theme="light"] .btn-add-ingredient:hover { background: rgba(139,90,16,0.13); }
[data-theme="light"] .btn-submit { background: #8B5A10; }
[data-theme="light"] .btn-submit:hover { background: #7A4F0E; }
[data-theme="light"] .submit-success-banner {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.22);
    color: #15803D;
}
[data-theme="light"] .btn-add-recipe {
    color: #8B5A10;
    background: rgba(139,90,16,0.08);
    border-color: rgba(139,90,16,0.3);
}
[data-theme="light"] .btn-add-recipe:hover { background: rgba(139,90,16,0.15); border-color: #8B5A10; }

/* ══════════════════════════════════════════
   Star Rating Widget
   ══════════════════════════════════════════ */
.star-widget { margin: 8px 0; }
.star-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.star-btn {
    background: none; border: none; cursor: pointer;
    font-size: 22px; color: rgba(255,255,255,0.2);
    padding: 2px 3px; line-height: 1; transition: color 0.15s, transform 0.1s;
}
.star-btn.filled { color: #F59E0B; }
.star-btn:not(:disabled):hover { color: #F59E0B; transform: scale(1.15); }
.star-btn:disabled { cursor: default; }
.star-avg { font-size: 13px; color: rgba(255,255,255,0.45); margin-right: 6px; display: flex; align-items: center; gap: 4px; }
.avg-num  { font-size: 15px; font-weight: 700; color: #F59E0B; }
.avg-count { color: rgba(255,255,255,0.30); font-size: 12px; }

[data-theme="light"] .star-btn { color: rgba(30,26,21,0.18); }
[data-theme="light"] .star-btn.filled { color: #D97706; }
[data-theme="light"] .star-btn:not(:disabled):hover { color: #D97706; }
[data-theme="light"] .star-avg { color: rgba(30,26,21,0.50); }
[data-theme="light"] .avg-num  { color: #D97706; }
[data-theme="light"] .avg-count { color: rgba(30,26,21,0.35); }

.star-hint { font-size: 12px; color: rgba(255,255,255,0.35); }
.star-hint a { color: #C9CDD6; }
[data-theme="light"] .star-hint { color: rgba(30,26,21,0.45); }
[data-theme="light"] .star-hint a { color: #8B5A10; }

/* ══════════════════════════════════════════
   Level Badge
   ══════════════════════════════════════════ */
.level-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 600; border-width: 1px; border-style: solid;
}

/* ══════════════════════════════════════════
   Author byline (shared: recipe/article show)
   صورة + اسم + رتبة + أوسمة (تصنيف/مستوى)
   ══════════════════════════════════════════ */
/* صندوق يجمع العنوان + الكاتب معاً في صفحات العرض */
.entry-header {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border-m);
    border-radius: 14px; padding: 20px 22px; margin-bottom: 22px;
}
.entry-header > h1 { margin-bottom: 0; }
.entry-header__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.entry-header__divider { height: 1px; background: var(--border); margin: 16px 0; }

/* شريط التفاعل: مشاهدات/مفضلة/مشاركة + التقييم — سطر واحد موسّط بعرض الصفحة */
.engagement-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 10px 20px; flex-wrap: wrap; margin: 0 0 26px;
}
.entry-header__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 16px; flex-wrap: wrap;
}
.entry-header__date { font-size: 13px; color: var(--text-3); white-space: nowrap; }

.author-byline {
    display: inline-flex; align-items: center; gap: 13px; max-width: 100%;
    text-decoration: none; vertical-align: middle;
}
.author-byline__avatar {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: linear-gradient(135deg, #C9CDD6, #8B5A10);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 800; color: #fff;
}
.author-byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-byline__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.author-byline__name {
    font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.2;
}
.author-byline:hover .author-byline__name { text-decoration: underline; }
.author-byline__role {
    font-size: 11px; font-weight: 700; color: var(--copper);
    letter-spacing: .4px; text-transform: uppercase;
}
.author-byline__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ══════════════════════════════════════════
   Unified transparent action buttons (both themes)
   Applies the soft-copper outline style site-wide.
   Excludes: social-login, danger (.btn-remove), tabs,
   pills, favorites, stars, pagination — they keep their
   semantic colors.
   ══════════════════════════════════════════ */
.btn-add, .filter-btn, .btn-primary, .btn,
.btn-submit, .btn-save, .btn-edit, .btn-share,
.btn-add-step, .btn-add-row, .comment-submit {
    background: transparent !important;
    border: 1px solid rgba(201,205,214,0.25) !important;
    color: #C9CDD6 !important;
}
.btn-add:hover, .filter-btn:hover, .btn-primary:hover, .btn:hover,
.btn-submit:hover, .btn-save:hover, .btn-edit:hover, .btn-share:hover,
.btn-add-step:hover, .btn-add-row:hover, .comment-submit:hover {
    background: rgba(201,205,214,0.08) !important;
    border-color: rgba(201,205,214,0.45) !important;
    color: #C9CDD6 !important;
}

[data-theme="light"] .btn-add, [data-theme="light"] .filter-btn,
[data-theme="light"] .btn-primary, [data-theme="light"] .btn,
[data-theme="light"] .btn-submit, [data-theme="light"] .btn-save,
[data-theme="light"] .btn-edit, [data-theme="light"] .btn-share,
[data-theme="light"] .btn-add-step, [data-theme="light"] .btn-add-row,
[data-theme="light"] .comment-submit {
    background: transparent !important;
    border-color: rgba(139,90,16,0.30) !important;
    color: #8B5A10 !important;
}
[data-theme="light"] .btn-add:hover, [data-theme="light"] .filter-btn:hover,
[data-theme="light"] .btn-primary:hover, [data-theme="light"] .btn:hover,
[data-theme="light"] .btn-submit:hover, [data-theme="light"] .btn-save:hover,
[data-theme="light"] .btn-edit:hover, [data-theme="light"] .btn-share:hover,
[data-theme="light"] .btn-add-step:hover, [data-theme="light"] .btn-add-row:hover,
[data-theme="light"] .comment-submit:hover {
    background: rgba(139,90,16,0.08) !important;
    border-color: rgba(139,90,16,0.50) !important;
    color: #8B5A10 !important;
}

/* ══════════════════════════════════════════
   Dark theme refinement — neutral cool look
   (lines, card/field borders, text, header icons)
   Scoped to [data-theme="dark"] so light is untouched.
   ══════════════════════════════════════════ */

/* Divider lines (shared class; theme-aware via --border:
   dark ≈ rgba(240,240,240,0.08), light ≈ rgba(30,26,21,0.09)) */
.hero-divider { height: 1px; background: var(--border); }

/* Body text color is set via --text (see :root / light overrides),
   since `body{color:var(--text)!important}` governs it. */

/* Main page/hero/article titles (small accent labels like
   .section-title / .card-title keep their copper accents) */
[data-theme="dark"] .page-title,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .article-title { color: #F5F5F5; }

/* Card / field / box borders (all pages). Accent chips —
   .badge-*, .tag, roast pills, step-number rings, and
   hover/focus states — keep their copper on purpose. */
[data-theme="dark"] .recipe-card,
[data-theme="dark"] .article-card,
[data-theme="dark"] .water-card,
[data-theme="dark"] .machine-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .card,
[data-theme="dark"] .form-section,
[data-theme="dark"] .section,
[data-theme="dark"] .param-box,
[data-theme="dark"] .equip-card,
[data-theme="dark"] .key-stat,
[data-theme="dark"] .scaler,
[data-theme="dark"] .conv-source,
[data-theme="dark"] .conv-result,
[data-theme="dark"] .hero-img,
[data-theme="dark"] .result-row,
[data-theme="dark"] .result-box,
[data-theme="dark"] .setting-strip,
[data-theme="dark"] .calc-result,
[data-theme="dark"] .click-display,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .filter-select,
[data-theme="dark"] .conv-select,
[data-theme="dark"] .scaler-input,
[data-theme="dark"] .clicks-num-input,
[data-theme="dark"] .comment-textarea { border-color: rgba(255,255,255,0.10); }

/* Separator hairlines (border-top/bottom) on all pages */
[data-theme="dark"] .section-title { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .card-title { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .page-hero { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .comment-item { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .comment-form { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .shot-step { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .card-footer { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ingredients-table th,
[data-theme="dark"] .ingredients-table td { border-bottom-color: rgba(255,255,255,0.08); }

/* Header icons (hamburger) */
[data-theme="dark"] .hamburger span { background: rgba(255,255,255,0.85); }

/* ══════════════════════════════════════════
   Light theme — readability boost
   Raises contrast of faint secondary/meta text that was
   hard to read on light backgrounds. Uses !important to
   beat per-page inline [data-theme="light"] rules.
   Accent labels (.section-title, .card-title, copper links)
   keep their colors — not targeted here.
   ══════════════════════════════════════════ */

/* Content / descriptive text → clearly readable */
[data-theme="light"] .recipe-desc,
[data-theme="light"] .hero-desc,
[data-theme="light"] .tool-desc,
[data-theme="light"] .notes-text,
[data-theme="light"] .comment-body,
[data-theme="light"] .recipe-meta span,
[data-theme="light"] .info-value,
[data-theme="light"] .param-value {
    color: rgba(30,26,21,0.78) !important;
}

/* Meta / labels / hints → readable but secondary */
[data-theme="light"] .card-meta,
[data-theme="light"] .card-footer,
[data-theme="light"] .stat-item,
[data-theme="light"] .equip-name,
[data-theme="light"] .recipe-author-line,
[data-theme="light"] .recipe-meta,
[data-theme="light"] .page-sub,
[data-theme="light"] .page-subtitle,
[data-theme="light"] .card-subtitle,
[data-theme="light"] .param-label,
[data-theme="light"] .param-unit,
[data-theme="light"] .info-label,
[data-theme="light"] .stat-pill,
[data-theme="light"] .star-avg,
[data-theme="light"] .star-hint,
[data-theme="light"] .comment-date,
[data-theme="light"] .section-link,
[data-theme="light"] .filter-reset,
[data-theme="light"] .back-link,
[data-theme="light"] .equip-brand,
[data-theme="light"] .stat-label,
[data-theme="light"] .tool-eyebrow,
[data-theme="light"] .comment-login-prompt {
    color: rgba(30,26,21,0.60) !important;
}

/* Empty/placeholder text → a touch stronger than before */
[data-theme="light"] .empty-state,
[data-theme="light"] .empty-mini,
[data-theme="light"] .no-comments {
    color: rgba(30,26,21,0.42) !important;
}

/* ══════════════════════════════════════════
   Recipe badges — unified & theme-aware (site-wide)
   One readable accent for roast levels, water brew-methods
   and category chips, on EVERY page (homepage, listings,
   recipe show pages incl. water). Overrides per-page
   hardcoded colors (pale gold, white-on-light, etc.) that
   were invisible or inconsistent — especially in light mode.
   ══════════════════════════════════════════ */
.badge-light, .badge-medium, .badge-dark,
.badge-method-filter, .badge-method-espresso, .badge-method-both,
.badge-method-arabic, .badge-method-cold_brew,
.badge-cat, .badge-category {
    background: rgba(201,205,214,0.12) !important;
    color: #C9CDD6 !important;
    border: 1px solid rgba(201,205,214,0.25) !important;
}
[data-theme="light"] .badge-light,
[data-theme="light"] .badge-medium,
[data-theme="light"] .badge-dark,
[data-theme="light"] .badge-method-filter,
[data-theme="light"] .badge-method-espresso,
[data-theme="light"] .badge-method-both,
[data-theme="light"] .badge-method-arabic,
[data-theme="light"] .badge-method-cold_brew,
[data-theme="light"] .badge-cat,
[data-theme="light"] .badge-category {
    background: rgba(139,90,16,0.10) !important;
    color: #8B5A10 !important;
    border-color: rgba(139,90,16,0.30) !important;
}

/* ══════════════════════════════════════════
   "Open water recipe" link button — used on espresso /
   pour-over show pages when the water is a site recipe
   (ماء معدّل). Theme-aware (dark + light).
   ══════════════════════════════════════════ */
.water-recipe-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-top: 4px;
}
.water-recipe-name { font-weight: 700; }
.water-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border-radius: 8px;
    background: rgba(201,205,214,0.10);
    border: 1px solid rgba(201,205,214,0.28);
    color: #C9CDD6; font-size: 13px; font-weight: 600;
    text-decoration: none; transition: background .2s, border-color .2s;
}
.water-link:hover {
    background: rgba(201,205,214,0.18);
    border-color: rgba(201,205,214,0.5);
}
.water-link svg { width: 15px; height: 15px; flex-shrink: 0; }
[data-theme="light"] .water-link {
    background: rgba(139,90,16,0.08);
    border-color: rgba(139,90,16,0.30);
    color: #8B5A10;
}
[data-theme="light"] .water-link:hover {
    background: rgba(139,90,16,0.15);
    border-color: #8B5A10;
}

/* ──────────────────────────────────────────────
   قائمة منسدلة مدموج فيها البحث (searchable-select.js)
   ────────────────────────────────────────────── */
.ss-wrap { position: relative; }
select.ss-native {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; margin: 0;
}
.ss-control {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; cursor: pointer; text-align: start;
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ss-wrap.ss-open .ss-control { border-color: var(--copper) !important; }
.ss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-label.ss-placeholder { opacity: 0.55; }
.ss-caret { flex-shrink: 0; opacity: 0.55; font-size: 0.85em; transition: transform 0.15s; }
.ss-wrap.ss-open .ss-caret { transform: rotate(180deg); }

.ss-panel {
    position: absolute; z-index: 1000; top: calc(100% + 4px); left: 0; right: 0;
    display: flex; flex-direction: column; max-height: 300px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border-m); border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.35);
}
.ss-panel[hidden] { display: none; }
.ss-search {
    width: 100%; padding: 8px 10px; margin-bottom: 6px;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border-m); border-radius: 7px;
    font-family: inherit; font-size: 14px;
}
.ss-search:focus { outline: none; border-color: var(--copper); }
.ss-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.ss-opt {
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    color: var(--text); font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-opt:hover, .ss-opt.ss-active { background: var(--surface-alt); }
.ss-opt.ss-selected { color: var(--copper); font-weight: 600; }
.ss-empty { padding: 10px; text-align: center; color: var(--text-3); font-size: 13px; }