:root{
            --bg:#f7f8fb; --card:#fff; --accent:#2563eb; --muted:#6b7280;
            --gap:1rem; --radius:10px;
        }
        *{box-sizing:border-box}
         body{
            margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
            background:var(--bg); color:#111; line-height:1.45;
            padding:2rem;
        } 
        .site{
            max-width:75%; margin:0 auto;
        }

        header.site-header{
            background:linear-gradient(90deg, #fff 0%, #fbfdff 100%);
            border-radius:var(--radius);
            padding:0.75rem 1.5rem;
            box-shadow:0 6px 20px rgba(20,30,60,0.06);
            margin-bottom:1rem;
            display:flex;
            flex-direction:column;
            gap:0.5rem;
            position:relative;
        }
        
        /* Header login button - top right corner */
        .header-login-btn{
            position:absolute;
            top:0.75rem;
            right:1.5rem;
            background:transparent;
            border:0;
            color:var(--muted);
            padding:.4rem .75rem;
            border-radius:6px;
            cursor:pointer;
            font-size:.9rem;
            transition:all .15s ease;
        }
        .header-login-btn:hover{
            color:var(--accent);
            background:#f1f6ff;
        }
        .header-login-btn:focus{
            outline:2px solid var(--accent);
            outline-offset:2px;
            color:var(--accent);
        }
        
        header .title{
            display:flex; 
            align-items:flex-start;
            flex-direction:column;
            gap:0.5rem;
        }
      

        header .title .Logo{
            display:flex;
            align-items:flex-end;
            gap:.75rem;
            height: 50px;
        }
        header .title .Logo img{
            height:50px;
            width: auto;
            border-radius:6px;
            object-fit:contain;
            display: block;
        }

       

        h1{font-size:1.5rem; margin:0; letter-spacing:-0.02em}
        p.tagline{
            margin: 0;
            font-size:1.1rem;
            font-weight:600;
            color:#111;
            white-space:nowrap;
            line-height:1;
            padding-bottom:2px;
        }

        /* Social subheader */
        .socials{
            display:flex; gap:.5rem; align-items:center; 
            flex-wrap:wrap;
            margin-left:0;
        }
        .socials a{
            display:inline-flex; gap:.4rem; align-items:center; text-decoration:none;
            background:transparent; color:var(--muted); padding:.35rem .5rem; border-radius:6px;
            transition:all .15s ease; font-size:.85rem;
        }
        .socials a:hover{background:#f1f6ff; color:var(--accent); transform:translateY(-1px)}
        .socials .small{font-size:.8rem}

        /* Page layout: two columns */
        .layout{
            display:grid;
            grid-template-columns: 400px 1fr; /* Sidebar spotlight */
            gap:var(--gap);
            margin-top:1.25rem;
        }
        @media (max-width:880px){
            .layout{
                display: flex;
                flex-direction: column;
                gap: var(--gap);
            }
            .site{max-width:100%;}
            header .title{flex-direction:column; text-align:center;}
            header .title .Logo{flex-direction:column; height:auto;}
            header .title .Logo img{height:60px;}
            .socials{justify-content:center;}
            p.tagline{font-size:1rem;}
            .sidebar { width: 100%; min-width: unset; margin-top: 1.5rem; height: auto !important; }
        }

        .card{
            background:var(--card); 
            padding:1rem; 
            border-radius:10px; 
            box-shadow:0 6px 20px rgba(20,30,60,0.04); 
            
        }
        .main{
            justify-items: center;
            align-items: center;
            width:100%;
        }

        .sidebar .section{margin-bottom:.8rem}
        .small{font-size:.85rem; color:var(--muted)}
        
        .hours
        {
            margin:.25rem 0; 
            color:#444; 
            font-weight:500;
            align-content:center; 
            justify-content: center;
            justify-items: center;
        }
        .hours .parking {text-align: center;}
        .address{
            font-weight:625; 
            margin:.25rem 0 0.25rem; 
            text-align: center;
        }
        .iconsvg{width:18px;height:18px;display:inline-block;vertical-align:middle}

        /* Sidebar Spotlight styles (final mockup) */
        .info-sidebar{
            background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%);
            border-radius: 12px;
            padding: 1.25rem;
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
            border: 2px solid #93c5fd;
            height: fit-content;
        }
            /* Final mockup alignment: Usage note */
            .usage-note{
                background: #eff6ff;
                border: 2px solid #2563eb;
                border-left: 6px solid #2563eb;
                border-radius: 10px;
                padding: 1.25rem 1.5rem;
                margin: 0 auto 1.1rem auto;
                box-shadow: 0 4px 12px rgba(37,99,235,0.10);
                max-width: 1200px;
            }
            .usage-note strong{ color:#1e40af; font-weight:700; }
            .usage-note ul{ margin-left: 1.5rem; margin-top: 0.5rem; }
            .usage-note li{ color:#1e3a8a; margin:0.4rem 0; font-size:0.95rem; }

            /* Final mockup alignment: Hours list */
            .hours-list{ list-style:none; padding:0; margin:0; }
            .hours-list li{ padding:0.5rem 0; border-bottom:1px solid #f1f5f9; font-size:0.95rem; display:flex; justify-content:space-between; gap:1rem; }
            .hours-list li:last-child{ border-bottom:none; }
            .day{ font-weight:600; color:#334155; }
            .time{ color:#64748b; font-size:0.9rem; }
        .info-section{
            background: var(--card);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 0.75rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .info-section:last-child{ margin-bottom: 0; }
        .info-section-header{
            display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem;
            color: var(--accent); font-weight:700; font-size:1.05rem;
        }
        .info-icon{ font-size:1.2rem; }
        .parking-note{ margin-top:0.5rem; padding:0.6rem; background:#f0fdf4; border-left:3px solid #10b981; border-radius:4px; font-size:0.9rem; color:#065f46; }
        .address a{ color:#1e40af; text-decoration: underline; }
        .address a:hover{ color: var(--accent); }

        .main-content{ padding: 1rem; }

        /* Toast notifications */
        .toast-container{
            position:fixed;
            right:1rem;
            bottom:1rem;
            display:flex;
            flex-direction:column;
            gap:0.5rem;
            z-index:9999;
        }
        .toast{
            min-width:220px;
            max-width:360px;
            background:#fff;
            color:#111;
            padding:0.75rem 0.75rem 0.75rem 1rem;
            border-radius:8px;
            box-shadow:0 6px 20px rgba(10,20,40,0.12);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:0.75rem;
            transform-origin:100% 100%;
            transition:transform .25s ease, opacity .25s ease;
        }
        .toast.hide{opacity:0; transform:translateY(8px) scale(.98)}
        .toast .toast-message{flex:1; padding-right:0.5rem}
        .toast .toast-close{background:transparent;border:0;color:inherit;font-size:1.1rem;cursor:pointer}
        .toast.success{border-left:4px solid #16a34a}
        .toast.error{border-left:4px solid #dc2626}
        .toast.info{border-left:4px solid #2563eb}

        /* Auth verify spinner */
        .auth-spinner{width:16px;height:16px;border:2px solid #e5e7eb;border-top-color:var(--accent);border-radius:50%;display:inline-block;vertical-align:middle;margin-left:.5rem;animation:auth-spin .8s linear infinite}
        @keyframes auth-spin{to{transform:rotate(360deg)}}

        /* Subtle auth status dot (e.g., network retry) */
        .auth-status-dot{width:8px;height:8px;border-radius:50%;background:#9ca3af;display:inline-block;vertical-align:middle;margin-left:.5rem}
        .auth-status-dot.error{background:#f59e0b}

        /* Modernized navigation */
        .site-header .site-nav{
            display:flex;
            align-items:center;
            gap:.75rem;
            flex-wrap:wrap;
            border-top:1px solid #e5e7eb;
            padding-top:0.75rem;
        }
        .site-header .site-nav a{
            display:inline-flex;
            align-items:center;
            gap:.4rem;
            padding:.5rem .75rem;
            border-radius:6px;
            color:var(--muted);
            text-decoration:none;
            transition:all .15s ease;
            font-size:.95rem;
        }
        .site-header .site-nav a:hover{
            background:#f1f6ff;
            color:var(--accent);
        }
        .site-header .site-nav a.active{
            background:#eef3ff;
            color:var(--accent);
            font-weight:600;
        }
        
    /* Inlaid Analytics Card Styles */
    .analytics-inlaid-card {
        background: var(--card);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(20,30,60,0.10);
        padding: 2rem 2.5rem 1.5rem 2.5rem;
        margin: 2rem 0 1.5rem 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }
    .analytics-inlaid-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--accent);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .analytics-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 2rem;
    }
    @media (max-width: 700px) {
        .analytics-inlaid-card {
            padding: 1rem;
        }
        .analytics-metrics {
            grid-template-columns: 1fr;
        }
    }
    .metric {
        background: #f7f8fb;
        border-radius: 8px;
        padding: 1rem 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        box-shadow: 0 2px 8px rgba(20,30,60,0.04);
    }
    .metric-label {
        font-size: 1rem;
        color: var(--muted);
        font-weight: 500;
    }
    .metric-value {
        font-size: 1.25rem;
        font-weight: 600;
        color: #111;
    }
    .refresh-info {
        font-size: 0.95rem;
        color: var(--muted);
        text-align: right;
        margin-top: 0.5rem;
    }

        /* Admin login modal (used globally) */
        .admin-login-modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.4);
            z-index: 40;
        }

        .admin-login-card {
            background: var(--card);
            padding: 1rem;
            border-radius: 8px;
            width: 320px;
            max-width: 90vw;
            box-shadow: 0 12px 30px rgba(20,30,60,0.12);
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .admin-login-card h3 {
            margin: 0 0 0.5rem 0;
        }

        .admin-login-card input {
            padding: 0.6rem;
            border-radius: 6px;
            border: 1px solid #ddd;
            font-size: 1rem;
        }

        .admin-login-card .error {
            color: #dc2626;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }

        /* Buttons (used globally) */
        .btn-primary {
            background: transparent;
            color: var(--accent);
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.2s ease;
        }

        .btn-primary:hover {
            text-decoration: underline;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #6b7280;
            color: white;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-secondary:hover {
            background: #4b5563;
        }

        .btn-danger {
            background: #dc2626;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-danger:hover {
            background: #b91c1c;
        }