:root{
    /* ===============================
       Core theme (admin editable)
       =============================== */
    --bg: #0b1220;
    --surface: #0f172a;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --border: #1e293b;
    --radius: 12px;

    /* ===============================
       Layout
       =============================== */
    --site-padding: 20px;

    /* ===============================
       Branding / Logo
       =============================== */
    --brand-color: #e5e7eb;
    --logo-style: text; /* text | box | underline */

    /* ===============================
       Fonts
       =============================== */
    --font-body: system-ui, -apple-system, Segoe UI, sans-serif;
    --font-heading: system-ui, -apple-system, Segoe UI, sans-serif;
    --font-nav: system-ui, -apple-system, Segoe UI, sans-serif;

    /* ===============================
       Header (independent surface)
       =============================== */
    --header-bg: var(--surface);
    --header-text: var(--text);
    --header-border: var(--border);

    /* ===============================
       Navigation buttons
       =============================== */
    --nav-bg: transparent;
    --nav-text: var(--muted);
    --nav-hover-bg: rgba(59,130,246,0.15);
    --nav-hover-text: var(--text);
    --nav-radius: 8px;
    --nav-pad-x: 10px;
    --nav-pad-y: 6px;

    /* ===============================
       Buttons (global)
       =============================== */
    --button-bg: var(--primary);
    --button-text: #ffffff;
    --button-hover: var(--primary-hover);
    --button-radius: 10px;
}

/* ===============================
   Reset
   =============================== */
*{
    box-sizing:border-box;
}

/* ===============================
   Base
   =============================== */
body{
    margin:0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
}

a{
    color: var(--primary);
    text-decoration:none;
}

a:hover{
    color: var(--primary-hover);
}

/* ===============================
   Header
   =============================== */
.site-header{
    background: var(--header-bg);
    color: var(--header-text);
    border-bottom: 1px solid var(--header-border);
}

.header-inner{
    max-width:1100px;
    margin:0 auto;
    padding:16px var(--site-padding);

    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* ===============================
   Site Brand / Logo
   =============================== */
.site-brand a{
    display:flex;
    align-items:center;
    gap:8px;

    font-size:1.15rem;
    font-weight:600;
    font-family: var(--font-heading);
    color: var(--brand-color);
    position:relative;
}

.brand-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Logo styles */
:root[style*="--logo-style:text"] .site-brand a{
    padding:0;
}

:root[style*="--logo-style:box"] .site-brand a{
    padding:6px 12px;
    border-radius: var(--radius);
    background: rgba(59,130,246,0.15);
}

:root[style*="--logo-style:underline"] .site-brand a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:2px;
    background: var(--primary);
}

/* ===============================
   Navigation / Menu Buttons
   =============================== */
.site-nav{
    display:flex;
    align-items:center;
    gap:14px;
}

.site-nav a{
    font-family: var(--font-nav);
    font-size:0.95rem;

    color: var(--nav-text);
    background: var(--nav-bg);

    padding: var(--nav-pad-y) var(--nav-pad-x);
    border-radius: var(--nav-radius);

    display:flex;
    align-items:center;
    gap:6px;

    transition: background .15s ease, color .15s ease;
}

.site-nav a:hover{
    background: var(--nav-hover-bg);
    color: var(--nav-hover-text);
}

/* ===============================
   Admin Login (inherits nav styles)
   =============================== */
.admin-login{
    background: var(--button-bg);
    color: var(--button-text);
    border-radius: var(--button-radius);
}

.admin-login:hover{
    background: var(--button-hover);
    color: var(--button-text);
}

/* ===============================
   CSS Icon (Lock + others)
   =============================== */
.icon-lock{
    width:12px;
    height:12px;
    border:2px solid currentColor;
    border-radius:3px;
    position:relative;
    display:inline-block;
}

.icon-lock::before{
    content:'';
    position:absolute;
    width:6px;
    height:6px;
    border:2px solid currentColor;
    border-bottom:none;
    border-radius:6px 6px 0 0;
    top:-7px;
    left:1px;
}

/* ===============================
   Page Content
   =============================== */
.page,
main{
    max-width:1100px;
    margin:40px auto;
    padding:0 var(--site-padding);
}

/* Headings */
h1, h2, h3, h4, h5, h6{
    font-family: var(--font-heading);
    color: var(--text);
}

/* ===============================
   Mobile
   =============================== */
@media (max-width:640px){
    .header-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .site-nav{
        gap:10px;
        flex-wrap:wrap;
    }
}