:root{
    --accent: #e65500;
    --accent-strong: #d14300;
    --accent-soft: rgba(230,85,0,0.12);
    --bg-dark: #0f0f10;
    --panel-dark: #181818;
    --text-dark: #111;
    --text-light: #f3f3f3;
    --muted: #bdbdbd;
    --radius: 14px;
    --ease-smooth: cubic-bezier(.2,.9,.25,1);
}

/* reset */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background: linear-gradient(180deg,var(--bg-dark), #0b0b0c);
    color: var(--text-light);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding: 20px;
    transition: background 450ms var(--ease-smooth), color 350ms var(--ease-smooth);
}

/* header */
.top-bar{
    position: relative;
    z-index: 300; /* keep header above menu so hamburger is clickable */
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background: linear-gradient(180deg,var(--accent), var(--accent-strong));
    padding: 10px 18px;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: background 350ms var(--ease-smooth), box-shadow 350ms var(--ease-smooth);
}

/* left - menu button */
.left-section { display:flex; align-items:center; min-width:40px; }

.menu-button{
    border: none;
    background: none;
    padding: 6px;
    border-radius: 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: transform 220ms var(--ease-smooth), background 220ms var(--ease-smooth);
}

.menu-button:focus { outline: 2px solid rgba(255,255,255,0.12); outline-offset: 2px; }

.menu-icon{
    width: 30px;
    height: 30px;
    display:block;
    filter: invert(100%); /* white in dark mode */
    transition: transform 300ms var(--ease-smooth), filter 300ms var(--ease-smooth), opacity 250ms var(--ease-smooth);
}

/* center logo area */
.center-section{
    display:flex;
    align-items:center;
    gap:12px;
    margin: 0 auto;
    pointer-events:none;
}

.logo-container{
    background: white;
    padding: 5px;
    border-radius: 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.logo{ width:42px; height:42px; display:block; object-fit:contain; }

/* title text */
.title-text{
    pointer-events:auto;
    font-weight:700;
    color:#fff;
    font-size:20px;
    letter-spacing:0.6px;
    text-shadow: 0 3px 10px rgba(0,0,0,0.35);
}

/* right - toggle */
.right-section{ display:flex; align-items:center; min-width:64px; justify-content:flex-end; }

.toggle-switch{ display:inline-flex; align-items:center; }
.toggle-switch input{ display:none; }

/* slider wrapper - IMPORTANT: position:relative for pseudo-element */
.slider{
    position: relative;
    width:64px;
    height:34px;
    border-radius:999px;
    background: rgba(255,255,255,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px;
    cursor:pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: background 350ms var(--ease-smooth), transform 220ms var(--ease-smooth);
    color: #e6b86a; /* icon color */
}

/* the sliding circle is achieved via pseudo-element on .slider */
.slider::before{
    content:"";
    position:absolute;
    left:6px;
    width:26px;
    height:26px;
    background:#fff;
    border-radius:50%;
    transform: translateX(0);
    transition: transform 350ms var(--ease-smooth), background 350ms var(--ease-smooth);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* inline svg inside slider */
.toggle-svg{
    width:18px;
    height:18px;
    opacity:1;
    transition: transform 450ms var(--ease-smooth), opacity 300ms var(--ease-smooth), fill 350ms var(--ease-smooth);
    z-index:2;
    pointer-events:none;
    fill: currentColor;
}

/* checked state */
input:checked + .slider { background: rgba(230,85,0,0.18); color: #fff; }
input:checked + .slider::before { transform: translateX(28px); background: var(--accent); }
input:checked + .slider .toggle-svg { transform: rotate(180deg); }

/* main content */
.content{
    margin-top:28px;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    background: linear-gradient(180deg,var(--panel-dark), #151515);
    border-radius: 12px;
    padding: 26px;
    border: 1px solid rgba(230,85,0,0.12);
    box-shadow: 0 10px 40px rgba(0,0,0,0.45);
    transition: transform 420ms var(--ease-smooth), background 350ms var(--ease-smooth), color 350ms var(--ease-smooth);
}

.content h1{ font-size:28px; margin-bottom:10px; color:var(--text-light); }
.content p{ color:var(--muted); line-height:1.6; margin-bottom:18px; }

/* small cards */
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:8px; }
.card{
    background: linear-gradient(180deg,#161616, #1b1b1b);
    border-radius:12px;
    padding:14px;
    border: 1px solid rgba(255,255,255,0.02);
    transition: transform 300ms var(--ease-smooth), box-shadow 300ms var(--ease-smooth);
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,0.55); }
.card h2{ font-size:16px; margin-bottom:8px; color:var(--text-light); }
.card p{ font-size:14px; color:var(--muted); }

/* SIDE MENU */
.side-menu{
    --width: 260px;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--width);
    height: 100vh;
    background: linear-gradient(180deg,var(--accent), #ea6a15);
    transform: translateX(-102%); /* hidden by default */
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    padding: 74px 18px 24px 18px;
    box-shadow: 8px 0 30px rgba(0,0,0,0.38);
    transition: transform 420ms var(--ease-smooth), box-shadow 420ms var(--ease-smooth);
    z-index: 200; /* below header so menu button remains clickable */
    will-change: transform;
}

/* active */
.side-menu.active{ transform: translateX(0); }

/* overlay (dimming area) */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease-smooth);
    z-index: 190; /* below header and menu so header keeps being interactive */
}
.menu-open .overlay{ opacity:1; pointer-events:auto; }

/* menu list */
.side-menu ul{ list-style:none; display:flex; flex-direction:column; gap:12px; padding:0; margin:0; }
.side-menu ul li{
    transform: translateX(-12px);
    opacity: 0;
    transition: transform 380ms var(--ease-smooth), opacity 300ms var(--ease-smooth);
}

/* staggered delays when menu active */
.side-menu.active ul li{ transform: translateX(0); opacity:1; }
.side-menu.active ul li:nth-child(1){ transition-delay: 0.06s; }
.side-menu.active ul li:nth-child(2){ transition-delay: 0.12s; }
.side-menu.active ul li:nth-child(3){ transition-delay: 0.18s; }
.side-menu.active ul li:nth-child(4){ transition-delay: 0.24s; }
.side-menu.active ul li:nth-child(5){ transition-delay: 0.30s; }
.side-menu.active ul li:nth-child(6){ transition-delay: 0.36s; }
.side-menu.active ul li:nth-child(7){ transition-delay: 0.42s; }

.side-menu a{
    display:block;
    padding:12px 12px;
    border-radius:8px;
    color: #fff;
    font-weight:700;
    text-decoration:none;
    letter-spacing:0.2px;
    transition: background 260ms var(--ease-smooth), transform 200ms var(--ease-smooth);
}
.side-menu a:hover{ background: rgba(255,255,255,0.08); transform: translateX(6px); }

/* LIGHT MODE - override key variables & colors for readability */
body.light-mode{
    --bg-dark: #fafafa;
    --panel-dark: #ffffff;
    --text-light: #1b1b1b;
    background: linear-gradient(180deg,#f8f8f8,#f4f4f4);
    color: var(--text-light);
}
body.light-mode .top-bar{
    background: linear-gradient(180deg,#ff8a33,#ff7b12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
body.light-mode .menu-icon{ filter: invert(0%); }
body.light-mode .slider { background: rgba(0,0,0,0.06); color: #d96f2a; }
body.light-mode .slider::before { background: #fff; }
body.light-mode .content{ background: linear-gradient(180deg,#ffffff,#fbfbfb); border-color: rgba(230,85,0,0.14); color: var(--text-dark); }
body.light-mode .card h2, body.light-mode .card p { color: var(--text-dark); }
body.light-mode .side-menu{ background: linear-gradient(180deg,#ff9b33,#ff8a33); }
body.light-mode .side-menu a{ color:#111; background: rgba(255,255,255,0.04); }

/* responsive tweaks */
@media (max-width:720px){
    .center-section { margin:0; gap:8px; }
    .title-text{ font-size:18px }
    .side-menu{ --width: 84%; }
    .slider{ width:56px; height:30px; }
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce){
    * { transition: none !important; animation: none !important; }
}