:root{
    --header-h:60px;
    --footer-h:40px;
    --nav-h:56px;
}
*{box-sizing:border-box;font-family:Arial, sans-serif;}
body,html{height:100%;margin:0;padding:0;}
.site-header{
    position:fixed;top:0;left:0;right:0;height:var(--header-h);
    background:#222;color:#fff;display:flex;align-items:center;padding:0 16px;z-index:10;
}
.header-inner .brand{font-weight:700;}
.site-nav{
    position:fixed;left:0;right:0;top:var(--header-h);height:var(--nav-h);
    background:#fff;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;z-index:9;
}
.nav-left{display:flex;gap:8px;align-items:center;}
.nav-right{display:flex;gap:8px;align-items:center;}
.nav-text{font-weight:600;margin-right:8px;}
.nav-btn{background:#007bff;color:#fff;border:0;padding:6px 10px;border-radius:4px;cursor:pointer;}
.auth-btn{background:#333;color:#fff;border:0;padding:6px 10px;border-radius:4px;cursor:pointer;}
.center-space{
    position:fixed;
    top:calc(var(--header-h) + var(--nav-h));
    bottom:var(--footer-h);
    left:0;right:0;
    overflow:auto;
    padding:20px;
    background:#fafafa;
}
.site-footer{
    position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);background:#222;color:#fff;display:flex;align-items:center;justify-content:center;
}
.sample-box{padding:30px;border-radius:8px;border:1px dashed #ccc;}
.modal{display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:100;}
.modal[aria-hidden="false"]{display:flex;}
.modal-content{background:#fff;padding:20px;border-radius:6px;min-width:280px;max-width:420px;position:relative;}
.modal-content .close{position:absolute;right:8px;top:6px;font-size:20px;cursor:pointer;}
.error{color:#b00020;margin-top:8px;}
@media (max-width:600px){
    .nav-left{flex-wrap:wrap;}
    .nav-btn{padding:6px;}
}