:root { --sb-w:300px; --sb-bg:#0c141c; --sb-hover:#10263a; --sb-text:#e8f6ff; --sb-accent:#00cccc; --sb-border:rgba(255,255,255,0.08); }
.template-component-menu-responsive.template-state-open { position:fixed !important; top:0; left:0; bottom:0; width:var(--sb-w) !important; max-width:var(--sb-w) !important; background:var(--sb-bg) !important; border-right:1px solid var(--sb-border); z-index:1000; box-shadow:0 16px 48px rgba(0,0,0,0.45); overflow:hidden; }
.template-component-menu-responsive.template-state-open > ul { width:100%; height:calc(100vh - 20px); overflow-y:auto; overflow-x:hidden; margin:0; padding:8px 10px 16px; background:transparent !important; }
.template-component-menu-responsive.template-state-open img { display:block; max-width:85%; height:auto; margin:18px auto 20px; }
.template-component-menu-responsive.template-state-open > ul > li { list-style:none; margin:4px 6px; padding-bottom:25px; }
.template-component-menu-responsive.template-state-open > ul > li > a { display:flex !important; align-items:center; gap:10px; padding:12px 16px !important; border-radius:10px; background:transparent !important; color:var(--sb-text) !important; font-weight:500; text-transform:none; transition:background .25s, color .25s, transform .25s; }
.template-component-menu-responsive.template-state-open > ul > li > a:hover, .template-component-menu-responsive.template-state-open > ul > li > a:focus { background:var(--sb-hover) !important; color:var(--sb-accent) !important; transform:translateX(4px); outline:none; }
.template-component-menu-responsive.template-state-open > ul > li > a i, .template-component-menu-responsive.template-state-open > ul > li > a .icon, .template-component-menu-responsive.template-state-open > ul > li > a svg { width:18px; min-width:18px; text-align:center; opacity:.95; fill:currentColor; }
.template-component-menu-responsive.template-state-open ul ul { margin:4px 0 8px 24px; padding:6px 8px; background:rgba(255,255,255,0.04); border-radius:8px; }
.template-component-menu-responsive.template-state-open ul ul li a { display:flex; align-items:center; padding:10px 12px !important; border-radius:8px; color:#cfe9ff !important; transition:background .25s, color .25s, transform .25s; }
.template-component-menu-responsive.template-state-open ul ul li a:hover { background:rgba(0,204,204,0.08) !important; color:var(--sb-accent) !important; transform:translateX(3px); }
.template-component-menu-responsive.template-state-open > ul > li.is-active > a, .template-component-menu-responsive.template-state-open > ul > li > a.is-active { background:linear-gradient(90deg,#0f3a55,#145e83) !important; color:var(--sb-accent) !important; box-shadow:0 8px 20px rgba(0,204,204,0.15); }
.template-component-menu-responsive li .caret, .template-component-menu-responsive li .chevron, .template-component-menu-responsive li .template-state-indicator, .template-component-menu-responsive li .template-component-decorator, .template-component-menu-responsive li .template-component-line, .template-component-menu-responsive li::before, .template-component-menu-responsive li::after, .template-component-menu-responsive li a::before, .template-component-menu-responsive li a::after, .template-component-menu-responsive ul ul::before, .template-component-menu-responsive ul ul::after { display:none !important; content:none !important; }
@supports selector(:has(a)){ .template-component-menu-responsive.template-state-open > ul > li:not(:has(a)) { display:none !important; } }
.template-component-menu-responsive.template-state-open a:focus-visible { outline:2px solid var(--sb-accent); outline-offset:2px; border-radius:8px; }
body.sidebar-open::before { content:""; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:900; }
body.sidebar-open .with-sidebar { padding-left:var(--sb-w); transition:padding .35s; }
@media (max-width:1024px){ body.sidebar-open .with-sidebar { padding-left:0; } }
.flexnav .touch-button { display:none; }
.template-component-menu-responsive.template-state-open img { display:block; width:auto; max-width:70%; max-height:120px; height:auto; margin:20px auto 25px; object-fit:contain; }
.template-component-menu-responsive.template-state-open > ul > li:first-child { display:flex; justify-content:center; align-items:center; padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:10px; }
.template-component-menu-responsive.template-state-open { padding-top:10px; }
.template-component-menu-responsive.template-state-open > ul { overflow-y:auto; padding-bottom:50px; padding-top:230px; }
.flexnav, .flexnav li { overflow:visible !important; }
.flexnav li { float:none !important; width:auto !important; }
.flexnav li > ul { display:block !important; position:static !important; top:auto !important; left:auto !important; margin:6px 0 8px 20px !important; width:auto !important; opacity:1 !important; visibility:visible !important; max-height:none !important; }
.flexnav ul li ul li a { background:#004d99 !important; }
.flexnav ul li ul li ul li a { background:#0059b3 !important; }
.flexnav li ul.open { position:static !important; opacity:1 !important; visibility:visible !important; }
@media (min-width:800px){ .flexnav li > ul { position:static !important; margin-left:20px !important; } }
.flexnav li ul li a { display:block; padding:8px 15px; }
.fa-blue { color:#00ccff; }
.fa-green { color:#66ff99; }
.fa-yellow { color:#ffcc00; }
.fa-orange { color:#ff9966; }
.fa-pink { color:#ff66cc; }
.fa-cyan { color:#66ccff; }
.fa-gold { color:#ffbf00; }
.fa-turquoise { color:#00cccc; }
.template-component-menu-responsive a:hover i.fa-solid { transform:scale(1.2); filter:drop-shadow(0 0 4px rgba(0,230,230,0.4)); }
.template-component-menu-responsive ul.flexnav li ul { margin:12px 0 16px 24px; padding:8px 0; background:rgba(255,255,255,0.04); border-left:2px solid var(--sb-border); border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.25); }
.template-component-menu-responsive ul.flexnav li ul li { margin-bottom:6px; }
.template-component-menu-responsive ul.flexnav li ul li:last-child { margin-bottom:0; }
.template-component-menu-responsive ul.flexnav li ul li a { padding:9px 16px; border-radius:8px; background:rgba(0,0,0,0.12); transition:all .25s ease; }
.template-component-menu-responsive ul.flexnav li ul li a:hover { background:rgba(0,204,204,0.1); color:var(--sb-accent); transform:translateX(4px); }
.template-component-menu-responsive ul.flexnav li ul::before { content:""; display:block; height:1px; background:rgba(255,255,255,0.05); margin-bottom:8px; }