:root{--one-eighth-w: 12.5%;--one-eighth-h: 12.5vh;--sidebar-min: 240px;--sidebar-max: 320px;--header-min: 56px;--header-max: 128px;--gap: 0px;--sidebar-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);--drawer-width: 85vw;--header-height-desktop: clamp(var(--header-min), var(--one-eighth-h), var(--header-max));--header-height-mobile: clamp(var(--header-min), 9vh, var(--header-max));--sidebar-width: clamp(var(--sidebar-min), var(--one-eighth-w), var(--sidebar-max))}.app{min-height:100dvh;width:100%;display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:clamp(var(--header-min),var(--one-eighth-h),var(--header-max)) 1fr auto;grid-template-areas:"header header" "sidebar main" "footer footer";gap:var(--gap);padding-top:var(--header-height-desktop)}.content-inner{padding:0}.sidebar{grid-area:sidebar;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--sidebar-bg)}.header{grid-area:header;position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-height-desktop)}.app-header{background:var(--sidebar-bg);border:0;box-shadow:none}.app-header .header-inner{background:transparent}.main{grid-area:main;min-width:0}@media (min-width: 768px){.main{padding-right:12px}}.footer{grid-area:footer}.header .header-inner{height:100%;display:flex;align-items:center;padding:0 12px;gap:8px}.header .header-inner .header-slot{flex:1 1 auto;display:block}.sidebar-toggle{display:none;align-items:center;justify-content:center;background:none;border:0;font-size:22px;line-height:1;padding:8px}.sidebar-close{display:none}.sidebar-close button{border:0;background:none;font-size:22px;padding:6px;line-height:1}@media (max-width: 767.98px){html,body{height:100%;overflow:hidden}.app{grid-template-columns:1fr;grid-template-rows:clamp(var(--header-min),9vh,var(--header-max)) 1fr auto;grid-template-areas:"header" "main" "footer";padding-top:var(--header-height-mobile);height:100dvh;min-height:100dvh;overflow:hidden}.header{height:var(--header-height-mobile)}.sidebar{display:none}.sidebar.open{padding-top:0}.sidebar-toggle{display:inline-block}.sidebar.open{display:block;position:fixed;inset:0 auto 0 0;width:var(--drawer-width);max-width:420px;background:#fff;z-index:40;box-shadow:2px 0 16px #0003;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.sidebar-backdrop{position:fixed;inset:0;background:#00000059;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:30;border:0}.sidebar-backdrop.show{opacity:1;pointer-events:auto}.sidebar-close{display:flex;justify-content:flex-end;padding:8px;position:sticky;top:0;background:inherit;z-index:1}.sidebar-close button{border:0;background:none;font-size:22px;padding:6px;line-height:1}.sidebar-toggle{display:inline-flex}.main{min-height:0;max-height:calc(100dvh - var(--header-height-mobile));overflow-y:auto;overflow-x:hidden;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 32px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}}@media (max-width: 360px){.main{overflow-x:hidden}}.app-page{padding-bottom:42px}.app-footer{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);background:transparent;border-top:0;padding:6px 10px;font-size:12px;line-height:1.4;color:#666;text-align:center;z-index:1000}[data-theme=dark] .app-footer{background:transparent;border-top-color:transparent;color:#94a3b8}@media (min-width: 768px){.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);padding-left:12px;padding-right:12px;padding-top:0;transform:translate(0);transition:transform .2s ease;background:var(--sidebar-bg)}.header .mode-picker,.header .topnav{display:none!important}.sidebar .sidebar-group{padding-left:0!important;padding-right:0!important;padding-top:0;font-size:10px}.sidebar .sidebar-link{margin-left:0;margin-right:0;padding-left:0!important;padding-top:4px;padding-bottom:4px;font-size:13px;line-height:1.2;gap:8px;border-radius:10px}.sidebar .label{font-size:13px}.main{position:fixed;top:var(--header-height-desktop);left:var(--sidebar-width);right:0;bottom:0;padding-right:12px;overflow:auto;-webkit-overflow-scrolling:touch}.header{left:var(--sidebar-width);background:var(--sidebar-bg);border-bottom:0;box-shadow:none}}