/* ===========================
   Layout: Topbar, Sidebar, Main, Overlay
   =========================== */

/* Top Bar */
.top-bar {
    display: flex; align-items: center; justify-content: space-between;
    background-color: var(--white); padding: 1rem 2rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 50;
}
.logo { font-size: 1rem; font-weight: 800; color: #64748b; letter-spacing: -0.025em; white-space: nowrap; }
.search-container { flex: 1; max-width: 800px; margin: 0 1rem; position: relative; display: flex; align-items: center; }
.search-icon-svg { position: absolute; left: 1.2rem; color: #94a3b8; pointer-events: none; width: 18px; height: 18px; z-index: 2; }
.search-bar { width: 100%; padding: 0.75rem 1.5rem 0.75rem 3rem; border-radius: 9999px; border: 2px solid transparent; background-color: #f1f5f9; font-size: 0.95rem; color: #1e293b; outline: none; transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.search-bar:focus { background-color: #ffffff; border-color: var(--primary-orange); box-shadow: 0 0 0 4px rgba(249,115,22,0.15); }
body.dark-mode .search-bar { background-color: #334155; color: #f8fafc; }
body.dark-mode .search-bar:focus { background-color: #1e293b; border-color: var(--primary-orange); box-shadow: 0 0 0 4px rgba(249,115,22,0.25); }
.hamburger { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-dark); padding: 0.5rem; }

/* Sidebar */
.sidebar {
    position: fixed; top: 0; right: 0; width: 350px; height: 100vh;
    background-color: var(--sidebar-bg);
    -webkit-transform: translateX(110%);
    transform: translateX(110%);
    -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 120; padding: 2rem; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top-left-radius: 24px; border-bottom-left-radius: 24px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}
.sidebar.open { -webkit-transform: translateX(0); transform: translateX(0); box-shadow: -8px 0 40px rgba(0,0,0,0.15); }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 1rem; }
body.dark-mode .sidebar-header { border-color: #334155; }
.close-sidebar { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-light); }
.sidebar-section-label { font-size: 0.75rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; margin: 1.5rem 0 0.5rem 0; }
.sidebar-btn-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.sidebar-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 9999px;
    font-weight: 600; font-size: 0.85rem; color: var(--text-dark);
    cursor: pointer; transition: all 0.2s ease; width: auto;
}
body.dark-mode .sidebar-btn { background: #334155; border-color: #475569; }
.sidebar-btn:hover { background: #e2e8f0; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
body.dark-mode .sidebar-btn:hover { background: #1e293b; }
.sidebar-btn.active-mode { background-color: #fff7ed; color: var(--primary-orange); border-color: var(--primary-orange); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(252,128,25,0.15); }
body.dark-mode .sidebar-btn.active-mode { background-color: rgba(252,128,25,0.1); border-color: var(--primary-orange); }
.sidebar-logout-btn { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.8rem 1rem; background: rgba(239,68,68,0.1); color: #ef4444; border: none; border-radius: 8px; cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: all 0.2s; margin-top: 0.5rem; justify-content: center; }
.sidebar-logout-btn:hover { background: rgba(239,68,68,0.2); }
.sidebar-clear-btn { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.8rem 1rem; background: var(--primary-orange); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 0.95rem; font-weight: 700; transition: all 0.2s ease; margin-top: 2rem; justify-content: center; box-shadow: 0 4px 12px rgba(252,128,25,0.35); }
.sidebar-clear-btn:hover { background: #e06c11; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(252,128,25,0.45); }
.sidebar-clear-btn:active { transform: translateY(0); }

/* Overlay */
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1); z-index: 90; }
.overlay.active { opacity: 1; pointer-events: auto; }

/* Main Content */
.main-content { padding: 2rem; max-width: 1400px; margin: 0 auto; }
.major-category-section { margin-bottom: 3.5rem; position: relative; }
.major-category-header { font-size: 1.25rem; font-weight: 800; color: var(--text-dark); margin-bottom: 1.5rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
body.dark-mode .major-category-header { border-color: #334155; }
.loader { text-align: center; padding: 4rem; font-size: 1.2rem; color: var(--text-light); font-weight: 600; }