.app{display:flex;min-height:100vh}
.sidebar{flex:0 0 248px; width:248px; background:var(--menu-bg, var(--surface)); border-inline-end:1px solid var(--border); padding:16px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:60;}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px; position:relative}
.brand-logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:linear-gradient(135deg,var(--primary),#7c5cf7); color:#fff; box-shadow:0 6px 16px rgba(47,111,237,.35); flex-shrink:0;overflow:hidden;}
.brand-logo img{width:100%;height:100%;object-fit:contain;background:#fff;display:block;}
.brand-title{font-weight:700;font-size:15px}
.brand-sub{font-size:11px;color:var(--muted)}
.sidebar-close{display:none;position:absolute; top:8px; inset-inline-start:8px;width:36px; height:36px; border-radius:10px;border:0; background:var(--surface-2); color:var(--muted);cursor:pointer; font-size:18px; align-items:center; justify-content:center;}
.sidebar-close:hover{background:var(--red-soft); color:var(--red)}

.nav{display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:0;background:transparent;cursor:pointer;text-align:right;width:100%;transition:.18s;color:var(--text);font-weight:500;}
.nav-item:hover{background:var(--menu-hover, var(--surface-2))}
.nav-item.active{background:var(--menu-active-bg, var(--primary-soft));color:var(--menu-active-text, var(--primary));font-weight:600}
.nav-item .ni{font-size:17px;width:22px;text-align:center;flex-shrink:0}
.side-sep{height:1px;background:var(--border);margin:12px 6px}
.side-foot{margin-top:12px}
.side-label{font-size:10.5px; color:var(--muted); padding:8px 12px 4px; font-weight:600; text-transform:uppercase; letter-spacing:.5px}

.side-group-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;border:0;background:transparent;cursor:pointer;text-align:right;font-weight:700;font-size:13px;color:var(--text);transition:.18s;font-family:inherit;}
.side-group-toggle:hover{ background:var(--surface-2); }
.side-group-toggle .sgt-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0;}
.side-group-toggle .sgt-text{ flex:1; min-width:0; }
.side-group-toggle .sgt-arrow{font-size:12px;color:var(--muted);transition:transform .25s ease;flex-shrink:0;line-height:1;}
.side-group-toggle[aria-expanded="false"] .sgt-arrow{transform:rotate(-90deg);}
.side-group-toggle.open{ background:transparent; }
.side-subgroup{overflow:hidden;max-height:400px;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, margin .2s ease;margin-bottom:4px;}
.side-subgroup.collapsed{max-height:0;opacity:0;margin-bottom:0;}
.side-subgroup .nav{ padding-inline-start:14px; }
.nav-item.nav-sub{font-size:13px;padding:9px 12px;position:relative;}
.nav-item.nav-sub::before{content:'';position:absolute;inset-inline-start:-8px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--border);transition:.18s;}
.nav-item.nav-sub.active::before{background:var(--primary);width:6px;height:6px;}
.side-subgroup .nav-item.nav-sub{ padding-inline-start:18px; }

.main{flex:1;min-width:0;display:flex;flex-direction:column; overflow-x:hidden}
.topbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border);padding:10px 18px;display:flex;align-items:center;gap:10px;}
.topbar-controls{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.topbar-controls > *{border-radius:var(--topbar-control-radius,12px)}
.topbar-controls .btn,.topbar-controls .month-picker-btn,.topbar-controls .user-chip{background:var(--topbar-control-bg,var(--surface));color:var(--topbar-control-text,var(--text));border-color:var(--topbar-control-border,var(--border))}
.topbar-controls .btn:hover,.topbar-controls .month-picker-btn:hover,.topbar-controls .user-chip:hover{background:var(--topbar-control-hover-bg,var(--surface-2));color:var(--topbar-control-hover-text,var(--text))}
.topbar h1{font-size:16px;margin:0;font-weight:700;white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.content{padding:18px;display:flex;flex-direction:column;gap:16px;max-width:1400px;width:100%;margin:0 auto}

.hamburger{display:none;border:0;background:transparent;cursor:pointer;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;flex-shrink:0;color:var(--text);transition:.15s;}
.hamburger:hover{background:var(--surface-2)}
.hamburger svg{width:24px; height:24px; display:block}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;display:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .25s ease;}
.overlay.open{display:block; opacity:1}

.user-chip{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:24px;padding:4px 12px 4px 4px;border:1px solid var(--border);cursor:pointer;transition:.16s; max-width:200px}
.user-chip:hover{background:var(--primary-soft); border-color:var(--primary)}
.user-chip .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#7c5cf7);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;overflow:hidden;flex-shrink:0}
.user-chip .av img{width:100%;height:100%;object-fit:cover;display:block}
.user-chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.site-footer{margin-top:auto;background:var(--surface);border-top:1px solid var(--border);padding:22px 18px 16px;display:none;}
.site-footer.visible{ display:block; }
.site-footer-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;align-items:start;}
.site-footer-section{ min-width:0; }
.site-footer-section .sf-label{font-size:11.5px;color:var(--muted);margin-bottom:6px;font-weight:600;display:flex;align-items:center;gap:6px;}
.site-footer-section .sf-value{font-size:13px;color:var(--text);word-break:break-word;line-height:1.9;}
.site-footer-section .sf-value a{color:var(--primary);text-decoration:none;transition:.15s;}
.site-footer-section .sf-value a:hover{ text-decoration:underline; }
.site-footer-copy{max-width:1400px;margin:16px auto 0;padding-top:14px;border-top:1px dashed var(--border);text-align:center;font-size:12px;color:var(--muted);line-height:1.8;}
.site-footer-copy b{ color:var(--text); }
/* CMS navigation customization */
.sidebar > .nav, #customMenuNav{display:flex;flex-direction:column;gap:var(--custom-menu-gap,6px)}
.sidebar .nav-item{border-radius:var(--custom-menu-radius,12px);padding:var(--custom-menu-padding,10px 12px)}
.sidebar .nav-item:hover{background:var(--menu-hover-bg,var(--surface-2));color:var(--menu-hover-text,var(--text))}
#customMenuNav:empty{display:none}