:root{--glow:rgba(37,99,235,.34);--glass:rgba(255,255,255,.44);--depth-edge:rgba(15,23,42,.18)}
[data-theme="macos"],[data-theme="github"],[data-theme="obsidian"],[data-theme="oled"]{--glass:rgba(255,255,255,.045);--depth-edge:rgba(0,0,0,.62)}
body{background-image:radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--primary) 28%,transparent) 0,transparent 30%),radial-gradient(circle at 12% 86%,color-mix(in srgb,var(--success) 18%,transparent) 0,transparent 32%),linear-gradient(145deg,color-mix(in srgb,var(--bg) 88%,#020617),var(--bg));background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px;transform:perspective(720px) rotateX(64deg) scale(1.45) translateY(18%);transform-origin:center bottom;mask-image:linear-gradient(to bottom,transparent 10%,#000 100%)}
.sidebar,.main-content,.mobile-topbar,.apk-download,.theme-toggle,#auth-overlay{position:relative}
.sidebar{background:color-mix(in srgb,var(--sidebar-bg) 84%,transparent);backdrop-filter:blur(24px) saturate(145%);border-right-color:color-mix(in srgb,var(--primary) 32%,var(--border));box-shadow:18px 0 45px rgba(0,0,0,.2),inset -1px 0 rgba(255,255,255,.1)}
.sidebar-brand{perspective:700px}.brand-logo{filter:drop-shadow(0 14px 16px rgba(0,0,0,.32));transform:translateZ(18px)}.sidebar-header{text-shadow:0 0 22px var(--glow),0 3px 0 color-mix(in srgb,var(--primary) 55%,#000)}
.nav-item{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--glass),transparent);border-color:color-mix(in srgb,var(--border) 75%,transparent);box-shadow:0 7px 0 color-mix(in srgb,var(--depth-edge) 72%,transparent),0 12px 22px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.14);transform:translateY(0);margin-bottom:3px}
.nav-item:hover{transform:translateY(-3px) translateX(4px);box-shadow:0 10px 0 color-mix(in srgb,var(--depth-edge) 68%,transparent),0 18px 28px rgba(0,0,0,.2)}.nav-item:active{transform:translateY(5px);box-shadow:0 2px 0 var(--depth-edge)}
.nav-item.active{border-color:rgba(255,255,255,.34);box-shadow:0 8px 0 color-mix(in srgb,var(--primary) 55%,#020617),0 16px 30px var(--glow),inset 0 1px rgba(255,255,255,.45)}
.main-content{perspective:1400px}.dashboard-heading-row{padding:18px 20px;border:1px solid color-mix(in srgb,var(--primary) 34%,var(--border));border-radius:22px;background:linear-gradient(135deg,var(--glass),transparent);backdrop-filter:blur(18px);box-shadow:0 16px 0 color-mix(in srgb,var(--depth-edge) 55%,transparent),0 28px 54px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.14);transform:translateZ(16px)}
.header h1{font-size:clamp(1.55rem,3vw,2.25rem);text-shadow:0 0 25px var(--glow),0 4px 0 color-mix(in srgb,var(--primary) 42%,#000)}
.kpi-card,.panel,.calendar-panel,.chart-panel,.table-container,.contact-card,.targets-card{position:relative;overflow:hidden;backdrop-filter:blur(18px) saturate(135%);background:linear-gradient(145deg,color-mix(in srgb,var(--card-bg) 90%,white 5%),color-mix(in srgb,var(--card-bg) 88%,transparent));border-color:color-mix(in srgb,var(--primary) 22%,var(--border));box-shadow:0 14px 0 color-mix(in srgb,var(--depth-edge) 55%,transparent),0 28px 50px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.17);transform-style:preserve-3d}
.kpi-card::before,.panel::before,.calendar-panel::before,.chart-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 28%,transparent 72%,color-mix(in srgb,var(--primary) 10%,transparent))}
.kpi-card{min-height:150px;transform:translateZ(20px) rotateX(1deg)}.kpi-card:hover{transform:translateY(-8px) rotateX(3deg) rotateY(-2deg) scale(1.015);box-shadow:0 20px 0 color-mix(in srgb,var(--depth-edge) 50%,transparent),0 38px 65px rgba(0,0,0,.25),0 0 34px var(--glow)}
.kpi-value{transform:translateZ(28px);text-shadow:0 0 24px var(--glow),0 4px 0 color-mix(in srgb,var(--primary) 36%,transparent)}.progress-wrapper{height:12px;border:1px solid color-mix(in srgb,var(--border) 72%,transparent)}.progress-fill{background:linear-gradient(90deg,var(--success),var(--primary),#67e8f9);box-shadow:0 0 18px color-mix(in srgb,var(--primary) 70%,transparent),inset 0 2px rgba(255,255,255,.5)}
.topic-row{margin:10px 12px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:16px;background:linear-gradient(145deg,var(--glass),transparent);box-shadow:0 7px 0 color-mix(in srgb,var(--depth-edge) 45%,transparent),0 13px 22px rgba(0,0,0,.12);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.topic-row:hover{transform:translateY(-4px) scale(1.003);border-color:var(--primary);box-shadow:0 11px 0 color-mix(in srgb,var(--depth-edge) 45%,transparent),0 20px 32px rgba(0,0,0,.2),0 0 20px var(--glow)}
.syllabus-section-title{margin:22px 12px 8px;border:1px solid color-mix(in srgb,var(--primary) 42%,var(--border));border-radius:14px;background:linear-gradient(110deg,color-mix(in srgb,var(--primary) 22%,var(--card-bg)),var(--glass));box-shadow:0 8px 0 color-mix(in srgb,var(--depth-edge) 45%,transparent),0 15px 24px rgba(0,0,0,.15)}
button,select,input,textarea{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}button:hover,select:hover{transform:translateY(-2px)}button:active{transform:translateY(3px) scale(.99)}
.auth-card{transform-style:preserve-3d;animation:card-arrive .55s cubic-bezier(.2,.75,.2,1) both;box-shadow:0 22px 0 color-mix(in srgb,var(--depth-edge) 65%,transparent),0 50px 90px rgba(0,0,0,.5),0 0 60px var(--glow)}.auth-card>*{transform:translateZ(18px)}
@keyframes card-arrive{from{opacity:0;transform:translateY(34px) rotateX(-8deg) scale(.95)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@media(max-width:700px){body::before{opacity:.12;background-size:28px 28px}.main-content{perspective:none}.dashboard-heading-row,.kpi-card,.panel,.calendar-panel,.chart-panel,.table-container,.contact-card,.targets-card{box-shadow:0 9px 0 color-mix(in srgb,var(--depth-edge) 48%,transparent),0 18px 30px rgba(0,0,0,.16)}.kpi-card{min-height:132px;transform:none}.kpi-card:hover,.topic-row:hover{transform:translateY(-2px)}.topic-row{margin:9px 6px}}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{height:100dvh;min-height:100dvh}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url("the-mirror-logo.png") center 58%/min(46vw,560px) auto no-repeat;opacity:.055;filter:grayscale(.12) saturate(1.25) drop-shadow(0 0 34px var(--glow))}
.sidebar,.main-content,.mobile-topbar{z-index:1}.main-content{width:calc(100% - 300px);max-width:calc(100vw - 300px);min-width:0}.app-view,.dashboard-heading-row,.kpi-grid,.charts-grid,.dashboard-grid,.calendar-panel,.table-container,.panel,.chart-panel{width:100%;max-width:100%;min-width:0}
#auth-overlay{position:fixed;inset:0;width:100%;height:100dvh}.auth-card{max-width:min(440px,calc(100vw - 32px))}
canvas,img,svg{max-width:100%}.canvas-container{max-width:100%;overflow:hidden}.topic-row>*{min-width:0}.t-title{overflow-wrap:anywhere}
@media(max-width:700px){
  body::after{background-size:min(74vw,360px);background-position:center 52%;opacity:.045}
  .main-content{width:100%;max-width:100vw;padding:14px 10px max(26px,env(safe-area-inset-bottom));overflow-x:hidden}
  .mobile-topbar{width:100%;max-width:100vw;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .dashboard-heading-row{padding:14px 12px;transform:none}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .kpi-card{padding:12px 10px;min-height:118px}.kpi-title{font-size:.72rem;line-height:1.25}.kpi-value{font-size:1.45rem;transform:none}
  .calendar-panel,.chart-panel,.panel,.table-container,.contact-card,.targets-card{padding:12px 10px}
  .calendar-grid{gap:2px}.cal-day{padding:3px;min-width:0}.topic-row{grid-template-columns:minmax(0,1fr);margin:8px 2px;padding:12px 10px}.topic-row>*{grid-column:1/-1!important}
  .auth-card{width:100%;max-width:calc(100vw - 24px);padding:20px 16px;transform:none}.auth-card>*{transform:none}
  .modal-card{width:100%;max-width:calc(100vw - 24px)}
}
@media(max-width:390px){.kpi-grid{grid-template-columns:1fr}.dashboard-heading-row{gap:12px}.header h1{font-size:1.25rem}.subject-filter-control{width:100%}.mobile-brand{font-size:.9rem}.mobile-apk-download{padding:0 9px}}
.apk-download{position:fixed!important;top:max(18px,env(safe-area-inset-top))!important;right:max(18px,env(safe-area-inset-right))!important;left:auto!important;z-index:1200!important}
@media(min-width:701px){.theme-toggle{display:grid!important;place-items:center;position:fixed!important;top:max(18px,env(safe-area-inset-top))!important;right:max(184px,calc(env(safe-area-inset-right) + 184px))!important;left:auto!important;z-index:1201!important}}
@media(max-width:700px){.mobile-menu-btn{order:1}.mobile-brand{order:2}.mobile-sync{order:3;margin-left:auto}.mobile-theme-toggle{display:grid!important;place-items:center;order:4;flex:0 0 42px}.mobile-apk-download{order:5;margin-left:0;margin-right:0;flex:0 0 auto}.mobile-topbar{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}