@charset "utf-8";

/* Main Nav */
.main-nav { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 20px; background:var(--layout-max-lv1); border-bottom:1px solid var(--layout-min-lv3); backdrop-filter:var(--layout-blur); -webkit-backdrop-filter:var(--layout-blur); z-index:10; }

/* App Title */
.app-title { font-size:1.1rem; font-weight:700; }

/* Toggle Button */
.toggle-btn { position:relative; width:48px; height:28px; background:var(--layout-min-lv2); border-radius:20px; cursor:pointer; transition:background var(--motion-duration) var(--motion); }
.toggle-btn:active {box-shadow: 0 0 0 transparent, inset 0 2px 7px var(--layout-min-lv1);}
.toggle-btn.active { background:var(--color-main-lv1); box-shadow:var(--color-shadow-lv3); }
.toggle-circle { position:absolute; top:2px; left:2px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; background:var(--color-white); border-radius:50%; box-shadow:var(--dark-shadow-lv2); transition:transform var(--motion-duration) var(--motion); }
.toggle-btn.active .toggle-circle { transform:translateX(20px); }
.toggle-circle i { font-size:.8rem; color:var(--text-lv3); }
.toggle-btn.active .toggle-circle i { color:var(--color-main-lv1); }

/* Sub Nav */
.sub-nav-wrapper { flex-shrink:0; max-height:0; overflow:hidden; background:var(--layout-max-lv3); border-bottom:1px solid rgba(0,0,0,0); opacity:0; transform:translateY(-10px); transition:var(--motion-all); }
.sub-nav-wrapper.is-visible { max-height:70px; opacity:1; transform:translateY(0); border-bottom:1px solid var(--layout-min-lv3); }

.sub-nav-scroll { display:flex; align-items:center; gap:12px; height:100%; padding:0 20px; overflow-x:auto; overflow-y:hidden; cursor:grab; scrollbar-width:none; }
.sub-nav-scroll::-webkit-scrollbar { display:none; }

.sub-pill-container { position:relative; margin:15px 0; }
.sub-pill-container .btn { padding:0 33px 0 15px; }
.sub-pill-container:hover .btn { background:var(--color-main-lv1); color:var(--color-white); }
.sub-pill-container:hover .sub-delete { opacity:1; color:var(--color-white); }

.sub-delete { position:absolute; top:17px; right:5px; width:25px; height:25px; color:var(--text-lv3); font-size:18px; opacity:0.5; cursor:pointer; transform:translateY(-50%); transition:var(--motion-all); }
.sub-delete i { display:block; pointer-events:none; }

/* Tab Nav */
.tab-nav { position:sticky; top:0; min-width:300px; padding:12px; z-index:20; }
.tabs { position:relative; display:flex; gap:8px; padding:6px; background:var(--bg-transparent); border:1px solid var(--layout-max-lv3); border-radius:16px; box-shadow:var(--dark-shadow-lv2); backdrop-filter:var(--layout-blur); -webkit-backdrop-filter:var(--layout-blur); }
.tabs .tab { position:relative; z-index:2; flex:1; padding:7px 0; border-radius:12px; color:var(--text-lv2); font-size:0.9rem; font-weight:700; text-align:center; cursor:pointer; transition:var(--motion-all); }
.tabs .tab.active { color:var(--color-white); }
.tabs .tab-indicator { position:absolute; top:6px; left:0; width:0; height:calc(100% - 12px); background:var(--color-main-lv1); border-radius:12px; box-shadow:var(--color-shadow-lv1), var(--color-shadow-lv2), inset 0 2px 0 var(--layout-max-lv3); transition:var(--motion-all); z-index:1; pointer-events:none; }

/* Bottom Main Tabs */
.bottom-main-tabs { position:absolute; bottom:0; left:0; display:flex; align-items:center; justify-content:space-around; width:100%; padding:17px; background:var(--layout-max-lv1); border-top:1px solid var(--layout-max-lv2); box-shadow:0 -10px 30px var(--layout-min-lv3); backdrop-filter:var(--layout-blur); -webkit-backdrop-filter:var(--layout-blur); z-index:50; }

.bottom-main-tabs::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--layout-max-lv1) 50%, rgba(255,255,255,0) 100%); opacity:0.7; }

.bottom-main-tabs .m-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1; height:100%; background:transparent; color:var(--text-lv2); cursor:pointer; transition:var(--motion-all); }
.bottom-main-tabs .m-tab i { display:block; font-size:1.2rem; filter:drop-shadow(0 0 0 rgba(0,0,0,0)); transition:transform 0.3s ease, filter 0.3s ease; }
.bottom-main-tabs .m-tab span { font-size:0.75rem; font-weight:600; letter-spacing:-0.2px; opacity:0.8; }

.bottom-main-tabs .m-tab.active { color:var(--color-main-lv1); }
.bottom-main-tabs .m-tab.active i { transform:translateY(-2px); filter:drop-shadow(var(--color-shadow-lv3)); }
.bottom-main-tabs .m-tab.active span { font-weight:700; opacity:1; }

.bottom-main-tabs .m-tab:hover:not(.active) i { transform:translateY(-2px); }
.bottom-main-tabs .m-tab:active i { transform:scale(0.9); }

/* Taskbar */
.taskbar-container { position:sticky; bottom:0; left:0; right:0; margin-bottom:40px; background:transparent; align-self:flex-end; z-index:100; }

.taskbar { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; scrollbar-width:none; }
.taskbar::-webkit-scrollbar { display:none; }

.taskbar .btn i { color:var(--color-main-lv1); }
.taskbar .btn:hover i { color:var(--color-white); }