/* ===== retained cascade: notesmart-startup-v31.css ===== */
/* KiSmart startup overlay V28 */
html.ks-booting,html.ks-booting body{min-height:100%;}
#notesmart-startup-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px;background:#f5faf7;color:#173526;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;transition:opacity .22s ease,visibility .22s ease;}
#notesmart-startup-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.ns-startup-card{width:min(92vw,430px);text-align:center;background:rgba(255,255,255,.96);border:1px solid #d8e6dd;border-radius:24px;padding:28px 24px;box-shadow:0 20px 60px rgba(22,70,45,.10);}
.ns-startup-logo{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0 auto 16px;border-radius:18px;background:#087a4b;color:#fff;font-weight:800;font-size:22px;box-shadow:0 12px 28px rgba(8,122,75,.20);}
.ns-startup-spinner{width:34px;height:34px;margin:0 auto 16px;border:4px solid rgba(8,122,75,.17);border-top-color:#087a4b;border-radius:999px;animation:ns-spin .8s linear infinite;}
.ns-startup-card h1{margin:0;font-size:21px;line-height:1.25}.ns-startup-card p{margin:9px 0 0;color:#607268;font-size:14px;line-height:1.55}.ns-startup-detail{margin-top:14px!important;padding:10px 12px;border-radius:12px;background:#f7f8f7;color:#6b7280!important;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;text-align:left}.ns-startup-retry{width:100%;min-height:44px;margin-top:16px;border:0;border-radius:14px;background:#087a4b;color:#fff;font-weight:750;font-size:14px;cursor:pointer}.ns-startup-retry[hidden],.ns-startup-detail[hidden]{display:none}.is-delayed .ns-startup-spinner{border-top-color:#d97706}.is-delayed .ns-startup-logo{background:#9a6700}@keyframes ns-spin{to{transform:rotate(360deg)}}
@media(max-width:640px){.ns-startup-card{padding:24px 20px;border-radius:22px}.ns-startup-card h1{font-size:19px}}
@media(prefers-reduced-motion:reduce){.ns-startup-spinner{animation-duration:1.6s}}


/* ===== retained cascade: notesmart-v49-app.css ===== */
/* NOTESMART V47 active CSS bundle: V46 foundation + unified elegant interface. */
/* NOTESMART V45 active CSS bundle. Source order is preserved exactly. */

/* ===== SOURCE: assets/v76/index-CbjSEj5T.css ===== */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-red-950:oklch(25.8% .092 26.042);--color-orange-50:oklch(98% .016 73.684);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-400:oklch(75% .183 55.934);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-600:oklch(64.6% .222 41.116);--color-orange-700:oklch(55.3% .195 38.402);--color-orange-800:oklch(47% .157 37.304);--color-orange-900:oklch(40.8% .123 38.172);--color-orange-950:oklch(26.6% .079 36.259);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-amber-950:oklch(27.9% .077 45.635);--color-green-100:oklch(96.2% .044 156.743);--color-green-300:oklch(87.1% .15 154.449);--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-emerald-950:oklch(26.2% .051 172.552);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-100:oklch(95.1% .026 236.824);--color-sky-200:oklch(90.1% .058 230.902);--color-sky-300:oklch(82.8% .111 230.318);--color-sky-400:oklch(74.6% .16 232.661);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-600:oklch(58.8% .158 241.966);--color-sky-700:oklch(50% .134 242.749);--color-sky-900:oklch(39.1% .09 240.876);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-blue-950:oklch(28.2% .091 267.935);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-950:oklch(25.7% .09 281.288);--color-violet-50:oklch(96.9% .016 293.756);--color-violet-100:oklch(94.3% .029 294.588);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-300:oklch(81.1% .111 293.571);--color-violet-500:oklch(60.6% .25 292.717);--color-violet-700:oklch(49.1% .27 292.581);--color-violet-800:oklch(43.2% .232 292.759);--color-violet-900:oklch(38% .189 293.745);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-rose-50:oklch(96.9% .015 12.422);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-950:oklch(27.1% .105 12.094);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-700:oklch(37% .013 285.805);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-md:12px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-border:var(--border)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--color-border)}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}body{background-color:var(--color-background);color:var(--color-foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent;overflow-x:hidden}img,svg,video,canvas,audio,iframe,embed,object{max-width:100%}@media screen and (max-width:640px){p,span,li,td,th,pre,code,a{overflow-wrap:anywhere;word-break:break-word}}input,select,textarea{font-size:16px}@media(min-width:768px){input,select,textarea{font-size:14px}}button,[role=button],a.btn,nav button,nav a{touch-action:manipulation}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-x-3{inset-inline:calc(var(--spacing) * 3)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.-top-12{top:calc(var(--spacing) * -12)}.top-0{top:calc(var(--spacing) * 0)}.top-1{top:calc(var(--spacing) * 1)}.top-1\.5{top:calc(var(--spacing) * 1.5)}.top-1\/2{top:50%}.top-3\.5{top:calc(var(--spacing) * 3.5)}.top-4{top:calc(var(--spacing) * 4)}.top-12{top:calc(var(--spacing) * 12)}.top-\[1px\]{top:1px}.top-\[50\%\]{top:50%}.top-\[60\%\]{top:60%}.top-full{top:100%}.-right-12{right:calc(var(--spacing) * -12)}.right-0{right:calc(var(--spacing) * 0)}.right-1{right:calc(var(--spacing) * 1)}.right-1\.5{right:calc(var(--spacing) * 1.5)}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.right-5{right:calc(var(--spacing) * 5)}.-bottom-12{bottom:calc(var(--spacing) * -12)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-20{bottom:calc(var(--spacing) * 20)}.-left-12{left:calc(var(--spacing) * -12)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-2\.5{left:calc(var(--spacing) * 2.5)}.left-3{left:calc(var(--spacing) * 3)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-2{grid-column:span 2/span 2}.col-span-full{grid-column:1/-1}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-3\.5{margin-inline:calc(var(--spacing) * 3.5)}.mx-auto{margin-inline:auto}.my-0\.5{margin-block:calc(var(--spacing) * .5)}.my-1{margin-block:calc(var(--spacing) * 1)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-24{margin-top:calc(var(--spacing) * 24)}.mt-\[2px\]{margin-top:2px}.mt-auto{margin-top:auto}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-auto{margin-right:auto}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.-ml-2{margin-left:calc(var(--spacing) * -2)}.-ml-4{margin-left:calc(var(--spacing) * -4)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-6{margin-left:calc(var(--spacing) * 6)}.ml-auto{margin-left:auto}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.size-\(--cell-size\){width:var(--cell-size);height:var(--cell-size)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.h-\(--cell-size\){height:var(--cell-size)}.h-1{height:calc(var(--spacing) * 1)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-32{height:calc(var(--spacing) * 32)}.h-\[1px\]{height:1px}.h-\[var\(--radix-navigation-menu-viewport-height\)\]{height:var(--radix-navigation-menu-viewport-height)}.h-\[var\(--radix-select-trigger-height\)\]{height:var(--radix-select-trigger-height)}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-svh{height:100svh}.max-h-\(--radix-context-menu-content-available-height\){max-height:var(--radix-context-menu-content-available-height)}.max-h-\(--radix-select-content-available-height\){max-height:var(--radix-select-content-available-height)}.max-h-32{max-height:calc(var(--spacing) * 32)}.max-h-40{max-height:calc(var(--spacing) * 40)}.max-h-48{max-height:calc(var(--spacing) * 48)}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-72{max-height:calc(var(--spacing) * 72)}.max-h-80{max-height:calc(var(--spacing) * 80)}.max-h-\[50vh\]{max-height:50vh}.max-h-\[85vh\]{max-height:85vh}.max-h-\[90vh\]{max-height:90vh}.max-h-\[120px\]{max-height:120px}.max-h-\[300px\]{max-height:300px}.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\]{max-height:var(--radix-dropdown-menu-content-available-height)}.max-h-full{max-height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-\[1\.25rem\]{min-height:1.25rem}.min-h-\[56px\]{min-height:56px}.min-h-\[60px\]{min-height:60px}.min-h-\[60vh\]{min-height:60vh}.min-h-\[110px\]{min-height:110px}.min-h-\[112px\]{min-height:112px}.min-h-\[160px\]{min-height:160px}.min-h-screen{min-height:100vh}.min-h-svh{min-height:100svh}.w-\(--cell-size\){width:var(--cell-size)}.w-\(--sidebar-width\){width:var(--sidebar-width)}.w-0{width:calc(var(--spacing) * 0)}.w-1{width:calc(var(--spacing) * 1)}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-2{width:calc(var(--spacing) * 2)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-2\/3{width:66.6667%}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-36{width:calc(var(--spacing) * 36)}.w-40{width:calc(var(--spacing) * 40)}.w-44{width:calc(var(--spacing) * 44)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-\[1px\]{width:1px}.w-\[100px\]{width:100px}.w-\[140px\]{width:140px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-\(--skeleton-width\){max-width:var(--skeleton-width)}.max-w-2xl{max-width:var(--container-2xl)}.max-w-\[8rem\]{max-width:8rem}.max-w-\[14rem\]{max-width:14rem}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-max{max-width:max-content}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-\(--cell-size\){min-width:var(--cell-size)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-8{min-width:calc(var(--spacing) * 8)}.min-w-9{min-width:calc(var(--spacing) * 9)}.min-w-10{min-width:calc(var(--spacing) * 10)}.min-w-\[2rem\]{min-width:2rem}.min-w-\[7rem\]{min-width:7rem}.min-w-\[8rem\]{min-width:8rem}.min-w-\[12rem\]{min-width:12rem}.min-w-\[56px\]{min-width:56px}.min-w-\[64px\]{min-width:64px}.min-w-\[900px\]{min-width:900px}.min-w-\[var\(--radix-select-trigger-width\)\]{min-width:var(--radix-select-trigger-width)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.origin-\(--radix-context-menu-content-transform-origin\){transform-origin:var(--radix-context-menu-content-transform-origin)}.origin-\(--radix-dropdown-menu-content-transform-origin\){transform-origin:var(--radix-dropdown-menu-content-transform-origin)}.origin-\(--radix-hover-card-content-transform-origin\){transform-origin:var(--radix-hover-card-content-transform-origin)}.origin-\(--radix-menubar-content-transform-origin\){transform-origin:var(--radix-menubar-content-transform-origin)}.origin-\(--radix-popover-content-transform-origin\){transform-origin:var(--radix-popover-content-transform-origin)}.origin-\(--radix-select-content-transform-origin\){transform-origin:var(--radix-select-content-transform-origin)}.origin-\(--radix-tooltip-content-transform-origin\){transform-origin:var(--radix-tooltip-content-transform-origin)}.origin-top-right{transform-origin:100% 0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-px{--tw-translate-x:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-px{--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-0{rotate:0deg}.rotate-45{rotate:45deg}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-caret-blink{animation:1.25s ease-out infinite caret-blink}.animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize-y{resize:vertical}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.break-inside-avoid{break-inside:avoid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-4{column-gap:calc(var(--spacing) * 4)}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)))}.gap-y-1{row-gap:calc(var(--spacing) * 1)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--border)}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:calc(var(--radius) + 8px)}.rounded-\[2px\]{border-radius:2px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.rounded-t-\[10px\]{border-top-left-radius:10px;border-top-right-radius:10px}.rounded-l-md{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.rounded-tl-sm{border-top-left-radius:calc(var(--radius) - 4px)}.rounded-r-md{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-4{border-bottom-style:var(--tw-border-style);border-bottom-width:4px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-double{--tw-border-style:double;border-style:double}.border-\(--color-border\){border-color:var(--color-border)}.border-amber-200{border-color:var(--color-amber-200)}.border-amber-300{border-color:var(--color-amber-300)}.border-amber-400{border-color:var(--color-amber-400)}.border-amber-400\/40{border-color:#fcbb0066}@supports (color:color-mix(in lab,red,red)){.border-amber-400\/40{border-color:color-mix(in oklab,var(--color-amber-400) 40%,transparent)}}.border-amber-400\/50{border-color:#fcbb0080}@supports (color:color-mix(in lab,red,red)){.border-amber-400\/50{border-color:color-mix(in oklab,var(--color-amber-400) 50%,transparent)}}.border-amber-500{border-color:var(--color-amber-500)}.border-amber-500\/30{border-color:#f99c004d}@supports (color:color-mix(in lab,red,red)){.border-amber-500\/30{border-color:color-mix(in oklab,var(--color-amber-500) 30%,transparent)}}.border-amber-500\/40{border-color:#f99c0066}@supports (color:color-mix(in lab,red,red)){.border-amber-500\/40{border-color:color-mix(in oklab,var(--color-amber-500) 40%,transparent)}}.border-black{border-color:var(--color-black)}.border-black\/40{border-color:#0006}@supports (color:color-mix(in lab,red,red)){.border-black\/40{border-color:color-mix(in oklab,var(--color-black) 40%,transparent)}}.border-blue-200{border-color:var(--color-blue-200)}.border-blue-300{border-color:var(--color-blue-300)}.border-blue-300\/50{border-color:#90c5ff80}@supports (color:color-mix(in lab,red,red)){.border-blue-300\/50{border-color:color-mix(in oklab,var(--color-blue-300) 50%,transparent)}}.border-border,.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab,red,red)){.border-border\/50{border-color:color-mix(in oklab,var(--border) 50%,transparent)}}.border-border\/60{border-color:var(--border)}@supports (color:color-mix(in lab,red,red)){.border-border\/60{border-color:color-mix(in oklab,var(--border) 60%,transparent)}}.border-destructive\/30{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.border-destructive\/30{border-color:color-mix(in oklab,var(--destructive) 30%,transparent)}}.border-destructive\/40{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.border-destructive\/40{border-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}.border-destructive\/50{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.border-destructive\/50{border-color:color-mix(in oklab,var(--destructive) 50%,transparent)}}.border-emerald-200{border-color:var(--color-emerald-200)}.border-emerald-300{border-color:var(--color-emerald-300)}.border-emerald-400\/40{border-color:#00d29466}@supports (color:color-mix(in lab,red,red)){.border-emerald-400\/40{border-color:color-mix(in oklab,var(--color-emerald-400) 40%,transparent)}}.border-emerald-400\/50{border-color:#00d29480}@supports (color:color-mix(in lab,red,red)){.border-emerald-400\/50{border-color:color-mix(in oklab,var(--color-emerald-400) 50%,transparent)}}.border-emerald-500{border-color:var(--color-emerald-500)}.border-emerald-500\/40{border-color:#00bb7f66}@supports (color:color-mix(in lab,red,red)){.border-emerald-500\/40{border-color:color-mix(in oklab,var(--color-emerald-500) 40%,transparent)}}.border-foreground{border-color:var(--foreground)}.border-indigo-300{border-color:var(--color-indigo-300)}.border-input{border-color:var(--input)}.border-muted{border-color:var(--muted)}.border-muted-foreground\/40{border-color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.border-muted-foreground\/40{border-color:color-mix(in oklab,var(--muted-foreground) 40%,transparent)}}.border-orange-200{border-color:var(--color-orange-200)}.border-orange-300{border-color:var(--color-orange-300)}.border-primary,.border-primary\/30{border-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.border-primary\/30{border-color:color-mix(in oklab,var(--primary) 30%,transparent)}}.border-primary\/50{border-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.border-primary\/50{border-color:color-mix(in oklab,var(--primary) 50%,transparent)}}.border-purple-500{border-color:var(--color-purple-500)}.border-red-200{border-color:var(--color-red-200)}.border-red-300{border-color:var(--color-red-300)}.border-rose-300{border-color:var(--color-rose-300)}.border-rose-400{border-color:var(--color-rose-400)}.border-rose-500\/40{border-color:#ff235766}@supports (color:color-mix(in lab,red,red)){.border-rose-500\/40{border-color:color-mix(in oklab,var(--color-rose-500) 40%,transparent)}}.border-sidebar-border{border-color:var(--sidebar-border)}.border-sky-300{border-color:var(--color-sky-300)}.border-sky-500{border-color:var(--color-sky-500)}.border-slate-300{border-color:var(--color-slate-300)}.border-transparent{border-color:#0000}.border-violet-200{border-color:var(--color-violet-200)}.border-t-primary{border-top-color:var(--primary)}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-\(--color-bg\){background-color:var(--color-bg)}.bg-accent{background-color:var(--accent)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-50\/50{background-color:#fffbeb80}@supports (color:color-mix(in lab,red,red)){.bg-amber-50\/50{background-color:color-mix(in oklab,var(--color-amber-50) 50%,transparent)}}.bg-amber-50\/60{background-color:#fffbeb99}@supports (color:color-mix(in lab,red,red)){.bg-amber-50\/60{background-color:color-mix(in oklab,var(--color-amber-50) 60%,transparent)}}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-100\/80{background-color:#fef3c6cc}@supports (color:color-mix(in lab,red,red)){.bg-amber-100\/80{background-color:color-mix(in oklab,var(--color-amber-100) 80%,transparent)}}.bg-amber-500{background-color:var(--color-amber-500)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\/10{background-color:color-mix(in oklab,var(--color-amber-500) 10%,transparent)}}.bg-amber-500\/15{background-color:#f99c0026}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\/15{background-color:color-mix(in oklab,var(--color-amber-500) 15%,transparent)}}.bg-background,.bg-background\/40{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/40{background-color:color-mix(in oklab,var(--background) 40%,transparent)}}.bg-background\/60{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/60{background-color:color-mix(in oklab,var(--background) 60%,transparent)}}.bg-background\/85{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/85{background-color:color-mix(in oklab,var(--background) 85%,transparent)}}.bg-background\/95{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/95{background-color:color-mix(in oklab,var(--background) 95%,transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--color-black) 80%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-border{background-color:var(--border)}.bg-card,.bg-card\/50{background-color:var(--card)}@supports (color:color-mix(in lab,red,red)){.bg-card\/50{background-color:color-mix(in oklab,var(--card) 50%,transparent)}}.bg-card\/60{background-color:var(--card)}@supports (color:color-mix(in lab,red,red)){.bg-card\/60{background-color:color-mix(in oklab,var(--card) 60%,transparent)}}.bg-card\/95{background-color:var(--card)}@supports (color:color-mix(in lab,red,red)){.bg-card\/95{background-color:color-mix(in oklab,var(--card) 95%,transparent)}}.bg-destructive,.bg-destructive\/5{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/5{background-color:color-mix(in oklab,var(--destructive) 5%,transparent)}}.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/10{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}}.bg-destructive\/15{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/15{background-color:color-mix(in oklab,var(--destructive) 15%,transparent)}}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-50\/50{background-color:#ecfdf580}@supports (color:color-mix(in lab,red,red)){.bg-emerald-50\/50{background-color:color-mix(in oklab,var(--color-emerald-50) 50%,transparent)}}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-500\/5{background-color:#00bb7f0d}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/5{background-color:color-mix(in oklab,var(--color-emerald-500) 5%,transparent)}}.bg-emerald-500\/15{background-color:#00bb7f26}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/15{background-color:color-mix(in oklab,var(--color-emerald-500) 15%,transparent)}}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-foreground{background-color:var(--foreground)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-green-100{background-color:var(--color-green-100)}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-muted{background-color:var(--muted)}.bg-muted-foreground\/40{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.bg-muted-foreground\/40{background-color:color-mix(in oklab,var(--muted-foreground) 40%,transparent)}}.bg-muted\/10{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/10{background-color:color-mix(in oklab,var(--muted) 10%,transparent)}}.bg-muted\/20{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/20{background-color:color-mix(in oklab,var(--muted) 20%,transparent)}}.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/30{background-color:color-mix(in oklab,var(--muted) 30%,transparent)}}.bg-muted\/40{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/40{background-color:color-mix(in oklab,var(--muted) 40%,transparent)}}.bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/50{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}.bg-muted\/60{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/60{background-color:color-mix(in oklab,var(--muted) 60%,transparent)}}.bg-orange-50{background-color:var(--color-orange-50)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-orange-500{background-color:var(--color-orange-500)}.bg-popover{background-color:var(--popover)}.bg-primary,.bg-primary\/5{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/5{background-color:color-mix(in oklab,var(--primary) 5%,transparent)}}.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/10{background-color:color-mix(in oklab,var(--primary) 10%,transparent)}}.bg-primary\/15{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/15{background-color:color-mix(in oklab,var(--primary) 15%,transparent)}}.bg-primary\/20{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/20{background-color:color-mix(in oklab,var(--primary) 20%,transparent)}}.bg-red-50{background-color:var(--color-red-50)}.bg-red-50\/50{background-color:#fef2f280}@supports (color:color-mix(in lab,red,red)){.bg-red-50\/50{background-color:color-mix(in oklab,var(--color-red-50) 50%,transparent)}}.bg-red-100{background-color:var(--color-red-100)}.bg-red-600{background-color:var(--color-red-600)}.bg-rose-50{background-color:var(--color-rose-50)}.bg-rose-100{background-color:var(--color-rose-100)}.bg-rose-200{background-color:var(--color-rose-200)}.bg-secondary{background-color:var(--secondary)}.bg-sidebar{background-color:var(--sidebar)}.bg-sidebar-border{background-color:var(--sidebar-border)}.bg-sky-50{background-color:var(--color-sky-50)}.bg-sky-100{background-color:var(--color-sky-100)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-transparent{background-color:#0000}.bg-violet-50{background-color:var(--color-violet-50)}.bg-violet-100{background-color:var(--color-violet-100)}.bg-white{background-color:var(--color-white)}.bg-white\/15{background-color:#ffffff26}@supports (color:color-mix(in lab,red,red)){.bg-white\/15{background-color:color-mix(in oklab,var(--color-white) 15%,transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab,red,red)){.bg-white\/20{background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.bg-zinc-200{background-color:var(--color-zinc-200)}.fill-current{fill:currentColor}.fill-primary{fill:var(--primary)}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing) * 0)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-\[1px\]{padding:1px}.px-\(--cell-size\){padding-inline:var(--cell-size)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-2\.5{padding-right:calc(var(--spacing) * 2.5)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pb-28{padding-bottom:calc(var(--spacing) * 28)}.pb-\[calc\(80px\+env\(safe-area-inset-bottom\)\)\]{padding-bottom:calc(80px + env(safe-area-inset-bottom))}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.pl-8{padding-left:calc(var(--spacing) * 8)}.pl-9{padding-left:calc(var(--spacing) * 9)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.align-top{vertical-align:top}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[8px\]{font-size:8px}.text-\[9pt\]{font-size:9pt}.text-\[9px\]{font-size:9px}.text-\[10\.5px\]{font-size:10.5px}.text-\[10pt\]{font-size:10pt}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12pt\]{font-size:12pt}.text-\[12px\]{font-size:12px}.text-\[14pt\]{font-size:14pt}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.3em\]{--tw-tracking:.3em;letter-spacing:.3em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent-foreground{color:var(--accent-foreground)}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-amber-800\/80{color:#953d00cc}@supports (color:color-mix(in lab,red,red)){.text-amber-800\/80{color:color-mix(in oklab,var(--color-amber-800) 80%,transparent)}}.text-amber-900{color:var(--color-amber-900)}.text-amber-950{color:var(--color-amber-950)}.text-black{color:var(--color-black)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-card-foreground{color:var(--card-foreground)}.text-current{color:currentColor}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-emerald-50{color:var(--color-emerald-50)}.text-emerald-50\/90{color:#ecfdf5e6}@supports (color:color-mix(in lab,red,red)){.text-emerald-50\/90{color:color-mix(in oklab,var(--color-emerald-50) 90%,transparent)}}.text-emerald-600{color:var(--color-emerald-600)}.text-emerald-700{color:var(--color-emerald-700)}.text-emerald-800{color:var(--color-emerald-800)}.text-emerald-900{color:var(--color-emerald-900)}.text-emerald-950{color:var(--color-emerald-950)}.text-foreground,.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab,red,red)){.text-foreground\/80{color:color-mix(in oklab,var(--foreground) 80%,transparent)}}.text-green-700{color:var(--color-green-700)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-muted-foreground,.text-muted-foreground\/40{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/40{color:color-mix(in oklab,var(--muted-foreground) 40%,transparent)}}.text-orange-600{color:var(--color-orange-600)}.text-orange-700{color:var(--color-orange-700)}.text-orange-800{color:var(--color-orange-800)}.text-orange-900{color:var(--color-orange-900)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground,.text-primary-foreground\/80{color:var(--primary-foreground)}@supports (color:color-mix(in lab,red,red)){.text-primary-foreground\/80{color:color-mix(in oklab,var(--primary-foreground) 80%,transparent)}}.text-purple-600{color:var(--color-purple-600)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-rose-600{color:var(--color-rose-600)}.text-rose-700{color:var(--color-rose-700)}.text-rose-800{color:var(--color-rose-800)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-sidebar-foreground,.text-sidebar-foreground\/70{color:var(--sidebar-foreground)}@supports (color:color-mix(in lab,red,red)){.text-sidebar-foreground\/70{color:color-mix(in oklab,var(--sidebar-foreground) 70%,transparent)}}.text-sky-600{color:var(--color-sky-600)}.text-sky-700{color:var(--color-sky-700)}.text-sky-900{color:var(--color-sky-900)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-violet-700{color:var(--color-violet-700)}.text-violet-800{color:var(--color-violet-800)}.text-white{color:var(--color-white)}.text-zinc-700{color:var(--color-zinc-700)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline{text-decoration-line:underline}.decoration-dotted{text-decoration-style:dotted}.underline-offset-4{text-underline-offset:4px}.accent-foreground{accent-color:var(--foreground)}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_0_1px_var\(--sidebar-border\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-border));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--shadow-soft\)\]{--tw-shadow:var(--shadow-soft);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-black\/20{--tw-shadow-color:#0003}@supports (color:color-mix(in lab,red,red)){.shadow-black\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-primary\/30{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.shadow-primary\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-background{--tw-ring-color:var(--background)}.ring-emerald-500\/40{--tw-ring-color:#00bb7f66}@supports (color:color-mix(in lab,red,red)){.ring-emerald-500\/40{--tw-ring-color:color-mix(in oklab, var(--color-emerald-500) 40%, transparent)}}.ring-primary{--tw-ring-color:var(--primary)}.ring-ring{--tw-ring-color:var(--ring)}.ring-sidebar-ring{--tw-ring-color:var(--sidebar-ring)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[margin\,opacity\]{transition-property:margin,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-1000{--tw-duration:1s;transition-duration:1s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.fade-in-0{--tw-enter-opacity:0}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.zoom-in-95{--tw-enter-scale:.95}.\[--cell-size\:2rem\]{--cell-size:2rem}.group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *){opacity:1}@media(hover:hover){.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *){opacity:1}}.group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar=menu-action]) *){padding-right:calc(var(--spacing) * 8)}.group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible=icon] *){margin-top:calc(var(--spacing) * -8)}.group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible=icon] *){display:none}.group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--spacing) * 8)!important;height:calc(var(--spacing) * 8)!important}.group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible=icon] *){width:var(--sidebar-width-icon)}.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + 1rem)}.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + 1rem + 2px)}.group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible=icon] *){overflow:hidden}.group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible=icon] *){padding:calc(var(--spacing) * 0)!important}.group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible=icon] *){padding:calc(var(--spacing) * 2)!important}.group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible=icon] *){opacity:0}.group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *){right:calc(var(--sidebar-width) * -1)}.group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *){left:calc(var(--sidebar-width) * -1)}.group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible=offcanvas] *){width:calc(var(--spacing) * 0)}.group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible=offcanvas] *){--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused=true] *){position:relative}.group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused=true] *){z-index:10}.group-data-\[focused\=true\]\/day\:border-ring:is(:where(.group\/day)[data-focused=true] *){border-color:var(--ring)}.group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused=true] *){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side=left] *){right:calc(var(--spacing) * -4)}.group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side=left] *){border-right-style:var(--tw-border-style);border-right-width:1px}.group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side=right] *){left:calc(var(--spacing) * 0)}.group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side=right] *){rotate:180deg}.group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side=right] *){border-left-style:var(--tw-border-style);border-left-width:1px}.group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state=open] *){rotate:180deg}.group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant=floating] *){border-radius:var(--radius)}.group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant=floating] *){border-style:var(--tw-border-style);border-width:1px}.group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.group)[data-variant=floating] *){border-color:var(--sidebar-border)}.group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant=floating] *){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.group-\[\.toast\]\:bg-muted:is(:where(.group).toast *){background-color:var(--muted)}.group-\[\.toast\]\:bg-primary:is(:where(.group).toast *){background-color:var(--primary)}.group-\[\.toast\]\:text-muted-foreground:is(:where(.group).toast *){color:var(--muted-foreground)}.group-\[\.toast\]\:text-primary-foreground:is(:where(.group).toast *){color:var(--primary-foreground)}.group-\[\.toaster\]\:border-border:is(:where(.group).toaster *){border-color:var(--border)}.group-\[\.toaster\]\:bg-background:is(:where(.group).toaster *){background-color:var(--background)}.group-\[\.toaster\]\:text-foreground:is(:where(.group).toaster *){color:var(--foreground)}.group-\[\.toaster\]\:shadow-lg:is(:where(.group).toaster *){--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(hover:hover){.peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button):hover~*){color:var(--sidebar-accent-foreground)}}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button)[data-active=true]~*){color:var(--sidebar-accent-foreground)}.peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size=default]~*){top:calc(var(--spacing) * 1.5)}.peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size=lg]~*){top:calc(var(--spacing) * 2.5)}.peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size=sm]~*){top:calc(var(--spacing) * 1)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--foreground)}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-inset-2:after{content:var(--tw-content);inset:calc(var(--spacing) * -2)}.after\:inset-y-0:after{content:var(--tw-content);inset-block:calc(var(--spacing) * 0)}.after\:left-1\/2:after{content:var(--tw-content);left:50%}.after\:w-1:after{content:var(--tw-content);width:calc(var(--spacing) * 1)}.after\:w-\[2px\]:after{content:var(--tw-content);width:2px}.after\:-translate-x-1\/2:after{content:var(--tw-content);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible=offcanvas] *):after{content:var(--tw-content);left:100%}.first\:rounded-l-md:first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.first\:border-l:first-child{border-left-style:var(--tw-border-style);border-left-width:1px}.last\:rounded-r-md:last-child{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media(hover:hover){.hover\:border-primary\/40:hover{border-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:border-primary\/40:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent)}}.hover\:bg-accent:hover,.hover\:bg-accent\/40:hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/40:hover{background-color:color-mix(in oklab,var(--accent) 40%,transparent)}}.hover\:bg-accent\/50:hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}.hover\:bg-amber-100:hover{background-color:var(--color-amber-100)}.hover\:bg-blue-100:hover{background-color:var(--color-blue-100)}.hover\:bg-destructive\/10:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/10:hover{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}}.hover\:bg-destructive\/20:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/20:hover{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}.hover\:bg-destructive\/80:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/80:hover{background-color:color-mix(in oklab,var(--destructive) 80%,transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}.hover\:bg-emerald-100:hover{background-color:var(--color-emerald-100)}.hover\:bg-emerald-700:hover{background-color:var(--color-emerald-700)}.hover\:bg-muted:hover,.hover\:bg-muted\/30:hover{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted\/30:hover{background-color:color-mix(in oklab,var(--muted) 30%,transparent)}}.hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}.hover\:bg-muted\/60:hover{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted\/60:hover{background-color:color-mix(in oklab,var(--muted) 60%,transparent)}}.hover\:bg-primary\/5:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/5:hover{background-color:color-mix(in oklab,var(--primary) 5%,transparent)}}.hover\:bg-primary\/15:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/15:hover{background-color:color-mix(in oklab,var(--primary) 15%,transparent)}}.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab,var(--primary) 80%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}.hover\:bg-rose-100:hover{background-color:var(--color-rose-100)}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}.hover\:bg-sidebar-accent:hover{background-color:var(--sidebar-accent)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-destructive:hover{color:var(--destructive)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.hover\:text-primary\/80:hover{color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:text-primary\/80:hover{color:color-mix(in oklab,var(--primary) 80%,transparent)}}.hover\:text-sidebar-accent-foreground:hover{color:var(--sidebar-accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-accent));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:is(:where(.group)[data-collapsible=offcanvas] *):hover{background-color:var(--sidebar)}.hover\:after\:bg-sidebar-border:hover:after{content:var(--tw-content);background-color:var(--sidebar-border)}}.focus\:bg-accent:focus{background-color:var(--accent)}.focus\:text-accent-foreground:focus{color:var(--accent-foreground)}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-primary:focus-visible{--tw-ring-color:var(--primary)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-sidebar-ring:focus-visible{--tw-ring-color:var(--sidebar-ring)}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-background:focus-visible{--tw-ring-offset-color:var(--background)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:bg-accent\/60:active{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.active\:bg-accent\/60:active{background-color:color-mix(in oklab,var(--accent) 60%,transparent)}}.active\:bg-sidebar-accent:active{background-color:var(--sidebar-accent)}.active\:text-sidebar-accent-foreground:active{color:var(--sidebar-accent-foreground)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.has-focus\:border-ring:has(:focus){border-color:var(--ring)}.has-focus\:ring-\[3px\]:has(:focus){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.has-focus\:ring-ring\/50:has(:focus){--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.has-focus\:ring-ring\/50:has(:focus){--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.has-\[\:disabled\]\:opacity-50:has(:disabled){opacity:.5}.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]){background-color:var(--sidebar)}.aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.aria-selected\:text-muted-foreground[aria-selected=true]{color:var(--muted-foreground)}.data-\[active\=true\]\:bg-sidebar-accent[data-active=true]{background-color:var(--sidebar-accent)}.data-\[active\=true\]\:font-medium[data-active=true]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true]{color:var(--sidebar-accent-foreground)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end]{--tw-enter-translate-x:calc(52*var(--spacing))}.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start]{--tw-enter-translate-x:calc(52*var(--spacing)*-1)}.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end]{--tw-exit-translate-x:calc(52*var(--spacing))}.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start]{--tw-exit-translate-x:calc(52*var(--spacing)*-1)}.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[motion\^\=from-\]\:fade-in[data-motion^=from-]{--tw-enter-opacity:0}.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[motion\^\=to-\]\:fade-out[data-motion^=to-]{--tw-exit-opacity:0}.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction=vertical]{height:1px}.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction=vertical]{width:100%}.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction=vertical]{flex-direction:column}.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);left:calc(var(--spacing) * 0)}.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after{content:var(--tw-content);height:calc(var(--spacing) * 1)}.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after{content:var(--tw-content);width:100%}.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[placeholder\]\:text-muted-foreground[data-placeholder]{color:var(--muted-foreground)}.data-\[range-end\=true\]\:rounded-md[data-range-end=true]{border-radius:calc(var(--radius) - 2px)}.data-\[range-end\=true\]\:bg-primary[data-range-end=true]{background-color:var(--primary)}.data-\[range-end\=true\]\:text-primary-foreground[data-range-end=true]{color:var(--primary-foreground)}.data-\[range-middle\=true\]\:rounded-none[data-range-middle=true]{border-radius:0}.data-\[range-middle\=true\]\:bg-accent[data-range-middle=true]{background-color:var(--accent)}.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle=true]{color:var(--accent-foreground)}.data-\[range-start\=true\]\:rounded-md[data-range-start=true]{border-radius:calc(var(--radius) - 2px)}.data-\[range-start\=true\]\:bg-primary[data-range-start=true]{background-color:var(--primary)}.data-\[range-start\=true\]\:text-primary-foreground[data-range-start=true]{color:var(--primary-foreground)}.data-\[selected-single\=true\]\:bg-primary[data-selected-single=true]{background-color:var(--primary)}.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single=true]{color:var(--primary-foreground)}.data-\[selected\=true\]\:rounded-none[data-selected=true]{border-radius:0}.data-\[selected\=true\]\:bg-accent[data-selected=true]{background-color:var(--accent)}.data-\[selected\=true\]\:text-accent-foreground[data-selected=true]{color:var(--accent-foreground)}.data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{--tw-translate-y:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.data-\[side\=left\]\:-translate-x-1[data-side=left]{--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.data-\[side\=right\]\:translate-x-1[data-side=right]{--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.data-\[side\=top\]\:-translate-y-1[data-side=top]{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.data-\[state\=active\]\:bg-background[data-state=active]{background-color:var(--background)}.data-\[state\=active\]\:text-foreground[data-state=active]{color:var(--foreground)}.data-\[state\=active\]\:shadow[data-state=active]{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.data-\[state\=checked\]\:translate-x-4[data-state=checked]{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:var(--primary-foreground)}.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:duration-300[data-state=closed]{--tw-duration:.3s;transition-duration:.3s}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y:100%}.data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x:-100%}.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed]{--tw-exit-translate-x: -50% }.data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{--tw-exit-translate-x:100%}.data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y:-100%}.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed]{--tw-exit-translate-y: -48% }.data-\[state\=hidden\]\:animate-out[data-state=hidden]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=hidden\]\:fade-out[data-state=hidden]{--tw-exit-opacity:0}.data-\[state\=on\]\:bg-accent[data-state=on]{background-color:var(--accent)}.data-\[state\=on\]\:text-accent-foreground[data-state=on]{color:var(--accent-foreground)}.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:bg-accent[data-state=open],.data-\[state\=open\]\:bg-accent\/50[data-state=open]{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.data-\[state\=open\]\:bg-accent\/50[data-state=open]{background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}.data-\[state\=open\]\:bg-secondary[data-state=open]{background-color:var(--secondary)}.data-\[state\=open\]\:text-accent-foreground[data-state=open]{color:var(--accent-foreground)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--muted-foreground)}.data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.data-\[state\=open\]\:duration-500[data-state=open]{--tw-duration:.5s;transition-duration:.5s}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:zoom-in-90[data-state=open]{--tw-enter-scale:.9}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y:100%}.data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x:-100%}.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open]{--tw-enter-translate-x: -50% }.data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x:100%}.data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y:-100%}.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open]{--tw-enter-translate-y: -48% }@media(hover:hover){.data-\[state\=open\]\:hover\:bg-accent[data-state=open]:hover{background-color:var(--accent)}.data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state=open]:hover{background-color:var(--sidebar-accent)}.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state=open]:hover{color:var(--sidebar-accent-foreground)}}.data-\[state\=open\]\:focus\:bg-accent[data-state=open]:focus{background-color:var(--accent)}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{background-color:var(--input)}.data-\[state\=visible\]\:animate-in[data-state=visible]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=visible\]\:fade-in[data-state=visible]{--tw-enter-opacity:0}@media(prefers-reduced-motion:reduce){.motion-reduce\:animate-none{animation:none}}@media(min-width:40rem){.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-4{grid-column:span 4/span 4}.sm\:mt-0{margin-top:calc(var(--spacing) * 0)}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:w-\[170px\]{width:170px}.sm\:w-auto{width:auto}.sm\:max-w-sm{max-width:var(--container-sm)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.sm\:grid-cols-\[200px_1fr\]{grid-template-columns:200px 1fr}.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:justify-end{justify-content:flex-end}.sm\:gap-2{gap:calc(var(--spacing) * 2)}.sm\:gap-2\.5{gap:calc(var(--spacing) * 2.5)}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius)}.sm\:p-4{padding:calc(var(--spacing) * 4)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:pb-0{padding-bottom:calc(var(--spacing) * 0)}.sm\:text-left{text-align:left}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:48rem){.md\:absolute{position:absolute}.md\:bottom-4{bottom:calc(var(--spacing) * 4)}.md\:col-span-7{grid-column:span 7/span 7}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:table-cell{display:table-cell}.md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{width:var(--radix-navigation-menu-viewport-width)}.md\:w-auto{width:auto}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:flex-col{flex-direction:column}.md\:flex-row{flex-direction:row}.md\:pb-6{padding-bottom:calc(var(--spacing) * 6)}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.md\:opacity-0{opacity:0}.md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant=inset]~*){margin:calc(var(--spacing) * 2)}.md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant=inset]~*){margin-left:calc(var(--spacing) * 0)}.md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant=inset]~*){border-radius:calc(var(--radius) + 4px)}.md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant=inset]~*){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state=collapsed]~*):is(:where(.peer)[data-variant=inset]~*){margin-left:calc(var(--spacing) * 2)}}.after\:md\:hidden:after{content:var(--tw-content)}@media(min-width:48rem){.after\:md\:hidden:after{display:none}}@media(min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:80rem){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.dark\:border-amber-500\/30:is(.dark *){border-color:#f99c004d}@supports (color:color-mix(in lab,red,red)){.dark\:border-amber-500\/30:is(.dark *){border-color:color-mix(in oklab,var(--color-amber-500) 30%,transparent)}}.dark\:border-amber-500\/40:is(.dark *){border-color:#f99c0066}@supports (color:color-mix(in lab,red,red)){.dark\:border-amber-500\/40:is(.dark *){border-color:color-mix(in oklab,var(--color-amber-500) 40%,transparent)}}.dark\:border-amber-800:is(.dark *){border-color:var(--color-amber-800)}.dark\:border-amber-900:is(.dark *){border-color:var(--color-amber-900)}.dark\:border-blue-800:is(.dark *){border-color:var(--color-blue-800)}.dark\:border-destructive:is(.dark *){border-color:var(--destructive)}.dark\:border-emerald-800:is(.dark *){border-color:var(--color-emerald-800)}.dark\:border-emerald-900:is(.dark *){border-color:var(--color-emerald-900)}.dark\:border-orange-800:is(.dark *){border-color:var(--color-orange-800)}.dark\:border-red-800:is(.dark *){border-color:var(--color-red-800)}.dark\:border-red-900:is(.dark *){border-color:var(--color-red-900)}.dark\:border-rose-500\/40:is(.dark *){border-color:#ff235766}@supports (color:color-mix(in lab,red,red)){.dark\:border-rose-500\/40:is(.dark *){border-color:color-mix(in oklab,var(--color-rose-500) 40%,transparent)}}.dark\:border-rose-500\/50:is(.dark *){border-color:#ff235780}@supports (color:color-mix(in lab,red,red)){.dark\:border-rose-500\/50:is(.dark *){border-color:color-mix(in oklab,var(--color-rose-500) 50%,transparent)}}.dark\:border-violet-800:is(.dark *){border-color:var(--color-violet-800)}.dark\:bg-amber-500\/10:is(.dark *){background-color:#f99c001a}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-500\/10:is(.dark *){background-color:color-mix(in oklab,var(--color-amber-500) 10%,transparent)}}.dark\:bg-amber-500\/15:is(.dark *){background-color:#f99c0026}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-500\/15:is(.dark *){background-color:color-mix(in oklab,var(--color-amber-500) 15%,transparent)}}.dark\:bg-amber-900\/20:is(.dark *){background-color:#7b330633}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-900\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-amber-900) 20%,transparent)}}.dark\:bg-amber-900\/30:is(.dark *){background-color:#7b33064d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-900\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-amber-900) 30%,transparent)}}.dark\:bg-amber-900\/40:is(.dark *){background-color:#7b330666}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-900\/40:is(.dark *){background-color:color-mix(in oklab,var(--color-amber-900) 40%,transparent)}}.dark\:bg-amber-950\/20:is(.dark *){background-color:#46190133}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-950\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-amber-950) 20%,transparent)}}.dark\:bg-amber-950\/30:is(.dark *){background-color:#4619014d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-950\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-amber-950) 30%,transparent)}}.dark\:bg-amber-950\/40:is(.dark *){background-color:#46190166}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-950\/40:is(.dark *){background-color:color-mix(in oklab,var(--color-amber-950) 40%,transparent)}}.dark\:bg-blue-900\/20:is(.dark *){background-color:#1c398e33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-blue-900\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-blue-900) 20%,transparent)}}.dark\:bg-blue-900\/30:is(.dark *){background-color:#1c398e4d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-blue-900\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-blue-900) 30%,transparent)}}.dark\:bg-blue-950\/30:is(.dark *){background-color:#1624564d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-blue-950\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-blue-950) 30%,transparent)}}.dark\:bg-emerald-500\/15:is(.dark *){background-color:#00bb7f26}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-500\/15:is(.dark *){background-color:color-mix(in oklab,var(--color-emerald-500) 15%,transparent)}}.dark\:bg-emerald-700:is(.dark *){background-color:var(--color-emerald-700)}.dark\:bg-emerald-900\/20:is(.dark *){background-color:#004e3b33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-900\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-emerald-900) 20%,transparent)}}.dark\:bg-emerald-900\/30:is(.dark *){background-color:#004e3b4d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-900\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-emerald-900) 30%,transparent)}}.dark\:bg-emerald-900\/40:is(.dark *){background-color:#004e3b66}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-900\/40:is(.dark *){background-color:color-mix(in oklab,var(--color-emerald-900) 40%,transparent)}}.dark\:bg-emerald-950\/20:is(.dark *){background-color:#002c2233}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-950\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-emerald-950) 20%,transparent)}}.dark\:bg-emerald-950\/30:is(.dark *){background-color:#002c224d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-950\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-emerald-950) 30%,transparent)}}.dark\:bg-emerald-950\/40:is(.dark *){background-color:#002c2266}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-950\/40:is(.dark *){background-color:color-mix(in oklab,var(--color-emerald-950) 40%,transparent)}}.dark\:bg-green-500\/15:is(.dark *){background-color:#00c75826}@supports (color:color-mix(in lab,red,red)){.dark\:bg-green-500\/15:is(.dark *){background-color:color-mix(in oklab,var(--color-green-500) 15%,transparent)}}.dark\:bg-indigo-500\/15:is(.dark *){background-color:#625fff26}@supports (color:color-mix(in lab,red,red)){.dark\:bg-indigo-500\/15:is(.dark *){background-color:color-mix(in oklab,var(--color-indigo-500) 15%,transparent)}}.dark\:bg-indigo-950\/20:is(.dark *){background-color:#1e1a4d33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-indigo-950\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-indigo-950) 20%,transparent)}}.dark\:bg-orange-900\/20:is(.dark *){background-color:#7e2a0c33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-orange-900\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-orange-900) 20%,transparent)}}.dark\:bg-orange-900\/30:is(.dark *){background-color:#7e2a0c4d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-orange-900\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-orange-900) 30%,transparent)}}.dark\:bg-orange-950\/20:is(.dark *){background-color:#44130633}@supports (color:color-mix(in lab,red,red)){.dark\:bg-orange-950\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-orange-950) 20%,transparent)}}.dark\:bg-orange-950\/30:is(.dark *){background-color:#4413064d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-orange-950\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-orange-950) 30%,transparent)}}.dark\:bg-red-500\/15:is(.dark *){background-color:#fb2c3626}@supports (color:color-mix(in lab,red,red)){.dark\:bg-red-500\/15:is(.dark *){background-color:color-mix(in oklab,var(--color-red-500) 15%,transparent)}}.dark\:bg-red-900\/20:is(.dark *){background-color:#82181a33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-red-900\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-red-900) 20%,transparent)}}.dark\:bg-red-900\/30:is(.dark *){background-color:#82181a4d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-red-900\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-red-900) 30%,transparent)}}.dark\:bg-red-950\/20:is(.dark *){background-color:#46080933}@supports (color:color-mix(in lab,red,red)){.dark\:bg-red-950\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-red-950) 20%,transparent)}}.dark\:bg-red-950\/30:is(.dark *){background-color:#4608094d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-red-950\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-red-950) 30%,transparent)}}.dark\:bg-rose-500\/10:is(.dark *){background-color:#ff23571a}@supports (color:color-mix(in lab,red,red)){.dark\:bg-rose-500\/10:is(.dark *){background-color:color-mix(in oklab,var(--color-rose-500) 10%,transparent)}}.dark\:bg-rose-500\/15:is(.dark *){background-color:#ff235726}@supports (color:color-mix(in lab,red,red)){.dark\:bg-rose-500\/15:is(.dark *){background-color:color-mix(in oklab,var(--color-rose-500) 15%,transparent)}}.dark\:bg-rose-950\/40:is(.dark *){background-color:#4d021866}@supports (color:color-mix(in lab,red,red)){.dark\:bg-rose-950\/40:is(.dark *){background-color:color-mix(in oklab,var(--color-rose-950) 40%,transparent)}}.dark\:bg-sky-500\/15:is(.dark *){background-color:#00a5ef26}@supports (color:color-mix(in lab,red,red)){.dark\:bg-sky-500\/15:is(.dark *){background-color:color-mix(in oklab,var(--color-sky-500) 15%,transparent)}}.dark\:bg-sky-900\/30:is(.dark *){background-color:#024a704d}@supports (color:color-mix(in lab,red,red)){.dark\:bg-sky-900\/30:is(.dark *){background-color:color-mix(in oklab,var(--color-sky-900) 30%,transparent)}}.dark\:bg-violet-500\/15:is(.dark *){background-color:#8d54ff26}@supports (color:color-mix(in lab,red,red)){.dark\:bg-violet-500\/15:is(.dark *){background-color:color-mix(in oklab,var(--color-violet-500) 15%,transparent)}}.dark\:bg-violet-900\/20:is(.dark *){background-color:#4d179a33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-violet-900\/20:is(.dark *){background-color:color-mix(in oklab,var(--color-violet-900) 20%,transparent)}}.dark\:text-amber-200:is(.dark *){color:var(--color-amber-200)}.dark\:text-amber-300:is(.dark *){color:var(--color-amber-300)}.dark\:text-amber-400:is(.dark *){color:var(--color-amber-400)}.dark\:text-blue-200:is(.dark *){color:var(--color-blue-200)}.dark\:text-emerald-200:is(.dark *){color:var(--color-emerald-200)}.dark\:text-emerald-300:is(.dark *){color:var(--color-emerald-300)}.dark\:text-emerald-400:is(.dark *){color:var(--color-emerald-400)}.dark\:text-green-300:is(.dark *){color:var(--color-green-300)}.dark\:text-indigo-300:is(.dark *){color:var(--color-indigo-300)}.dark\:text-indigo-400:is(.dark *){color:var(--color-indigo-400)}.dark\:text-orange-100:is(.dark *){color:var(--color-orange-100)}.dark\:text-orange-200:is(.dark *){color:var(--color-orange-200)}.dark\:text-orange-400:is(.dark *){color:var(--color-orange-400)}.dark\:text-red-200:is(.dark *){color:var(--color-red-200)}.dark\:text-red-300:is(.dark *){color:var(--color-red-300)}.dark\:text-red-400:is(.dark *){color:var(--color-red-400)}.dark\:text-rose-200:is(.dark *){color:var(--color-rose-200)}.dark\:text-rose-300:is(.dark *){color:var(--color-rose-300)}.dark\:text-rose-400:is(.dark *){color:var(--color-rose-400)}.dark\:text-sky-200:is(.dark *){color:var(--color-sky-200)}.dark\:text-sky-300:is(.dark *){color:var(--color-sky-300)}.dark\:text-sky-400:is(.dark *){color:var(--color-sky-400)}.dark\:text-slate-300:is(.dark *){color:var(--color-slate-300)}.dark\:text-violet-200:is(.dark *){color:var(--color-violet-200)}.dark\:text-violet-300:is(.dark *){color:var(--color-violet-300)}@media(hover:hover){.dark\:hover\:bg-blue-900\/30:is(.dark *):hover{background-color:#1c398e4d}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-blue-900\/30:is(.dark *):hover{background-color:color-mix(in oklab,var(--color-blue-900) 30%,transparent)}}.dark\:hover\:bg-emerald-900\/30:is(.dark *):hover{background-color:#004e3b4d}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-emerald-900\/30:is(.dark *):hover{background-color:color-mix(in oklab,var(--color-emerald-900) 30%,transparent)}}}@media print{.print\:block{display:block}.print\:hidden{display:none}}.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"]{stroke:var(--border)}@supports (color:color-mix(in lab,red,red)){.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"]{stroke:color-mix(in oklab,var(--border) 50%,transparent)}}.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor{stroke:var(--border)}.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"]{stroke:#0000}.\[\&_\.recharts-layer\]\:outline-none .recharts-layer{--tw-outline-style:none;outline-style:none}.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"]{stroke:var(--border)}.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector,.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"]{stroke:var(--border)}.\[\&_\.recharts-sector\]\:outline-none .recharts-sector{--tw-outline-style:none;outline-style:none}.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"]{stroke:#0000}.\[\&_\.recharts-surface\]\:outline-none .recharts-surface{--tw-outline-style:none;outline-style:none}.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{padding-block:calc(var(--spacing) * 1.5)}.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{color:var(--muted-foreground)}.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group]{padding-top:calc(var(--spacing) * 0)}.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{height:calc(var(--spacing) * 5)}.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{width:calc(var(--spacing) * 5)}.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{height:calc(var(--spacing) * 12)}.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{padding-block:calc(var(--spacing) * 3)}.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{height:calc(var(--spacing) * 5)}.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{width:calc(var(--spacing) * 5)}.\[\&_p\]\:leading-relaxed p{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--spacing) * 0)}:is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *) *):is(.rdp-button_next>svg),:is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *) *):is(.rdp-button_previous>svg){rotate:180deg}.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{--tw-translate-y:2px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>button\]\:hidden>button{display:none}.\[\&\>span\]\:line-clamp-1>span{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\[\&\>span\]\:text-xs>span{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&\>span\]\:opacity-70>span{opacity:.7}.\[\&\>span\:last-child\]\:truncate>span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing) * 4)}.\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>svg\]\:h-2\.5>svg{height:calc(var(--spacing) * 2.5)}.\[\&\>svg\]\:h-3>svg{height:calc(var(--spacing) * 3)}.\[\&\>svg\]\:h-3\.5>svg{height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:w-2\.5>svg{width:calc(var(--spacing) * 2.5)}.\[\&\>svg\]\:w-3>svg{width:calc(var(--spacing) * 3)}.\[\&\>svg\]\:w-3\.5>svg{width:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.\[\&\>svg\]\:text-destructive>svg{color:var(--destructive)}.\[\&\>svg\]\:text-foreground>svg{color:var(--foreground)}.\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.\[\&\>svg\]\:text-sidebar-accent-foreground>svg{color:var(--sidebar-accent-foreground)}.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>svg\~\*\]\:pl-7>svg~*{padding-left:calc(var(--spacing) * 7)}.\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{rotate:90deg}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{right:calc(var(--spacing) * -2)}[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize,[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize{cursor:e-resize}[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{left:calc(var(--spacing) * -2)}[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent,[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent{background-color:#0000}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:.875rem;--background:oklch(99% .005 150);--foreground:oklch(18% .02 160);--card:oklch(100% 0 0);--card-foreground:oklch(18% .02 160);--popover:oklch(100% 0 0);--popover-foreground:oklch(18% .02 160);--primary:oklch(46% .12 155);--primary-foreground:oklch(99% .01 150);--primary-soft:oklch(94% .04 155);--secondary:oklch(96% .015 150);--secondary-foreground:oklch(22% .04 160);--muted:oklch(96% .01 150);--muted-foreground:oklch(50% .02 160);--accent:oklch(93% .05 155);--accent-foreground:oklch(22% .06 160);--destructive:oklch(60% .22 27);--destructive-foreground:oklch(99% .01 150);--border:oklch(92% .01 150);--input:oklch(92% .01 150);--ring:oklch(55% .1 155);--gradient-hero:linear-gradient(135deg, oklch(46% .12 155), oklch(60% .13 165));--shadow-soft:0 10px 30px -12px oklab(46% -.108757 .0507142/.22);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.4% .003 247.858);--sidebar-foreground:oklch(12.9% .042 264.695);--sidebar-primary:oklch(20.8% .042 265.755);--sidebar-primary-foreground:oklch(98.4% .003 247.858);--sidebar-accent:oklch(96.8% .007 247.896);--sidebar-accent-foreground:oklch(20.8% .042 265.755);--sidebar-border:oklch(92.9% .013 255.508);--sidebar-ring:oklch(70.4% .04 256.788)}.dark{--background:oklch(12.9% .042 264.695);--foreground:oklch(98.4% .003 247.858);--card:oklch(20.8% .042 265.755);--card-foreground:oklch(98.4% .003 247.858);--popover:oklch(20.8% .042 265.755);--popover-foreground:oklch(98.4% .003 247.858);--primary:oklch(92.9% .013 255.508);--primary-foreground:oklch(20.8% .042 265.755);--secondary:oklch(27.9% .041 260.031);--secondary-foreground:oklch(98.4% .003 247.858);--muted:oklch(27.9% .041 260.031);--muted-foreground:oklch(70.4% .04 256.788);--accent:oklch(27.9% .041 260.031);--accent-foreground:oklch(98.4% .003 247.858);--destructive:oklch(70.4% .191 22.216);--destructive-foreground:oklch(98.4% .003 247.858);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.1% .027 264.364);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.8% .042 265.755);--sidebar-foreground:oklch(98.4% .003 247.858);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.4% .003 247.858);--sidebar-accent:oklch(27.9% .041 260.031);--sidebar-accent-foreground:oklch(98.4% .003 247.858);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.1% .027 264.364)}@keyframes ns-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.ns-fade-in{animation:.22s ease-out both ns-fade-in}@keyframes ns-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.ns-skeleton{background:linear-gradient(90deg,var(--muted) 0%,var(--muted) 50%,var(--muted) 100%)}@supports (color:color-mix(in lab,red,red)){.ns-skeleton{background:linear-gradient(90deg,color-mix(in oklab,var(--muted) 70%,transparent),color-mix(in oklab,var(--muted) 40%,transparent),color-mix(in oklab,var(--muted) 70%,transparent))}}.ns-skeleton{background-size:200% 100%;animation:1.4s ease-in-out infinite ns-shimmer}.ns-toast{font-size:.875rem}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ns-fade-in,.ns-skeleton{animation:none!important}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}html.notesmart-reduced-motion *,html.notesmart-reduced-motion :before,html.notesmart-reduced-motion :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}button:not(:disabled):active,[role=button]:not([aria-disabled=true]):active,.ns-press:active{transform:scale(.98)}button,[role=button],.ns-press{transition:transform .12s,box-shadow .2s,background-color .15s}html.notesmart-reduced-motion button,html.notesmart-reduced-motion [role=button],html.notesmart-reduced-motion .ns-press{transform:none!important}@media print{body:not(.printing-laporan):not(.printing-roster) nav,body:not(.printing-laporan):not(.printing-roster) aside,body:not(.printing-laporan):not(.printing-roster) footer,body:not(.printing-laporan):not(.printing-roster) header.sticky,body:not(.printing-laporan):not(.printing-roster) .ns-no-print,body:not(.printing-laporan):not(.printing-roster) button,body:not(.printing-laporan):not(.printing-roster) .print-hide{display:none!important}table{page-break-inside:auto}tr{page-break-inside:avoid;page-break-after:auto}.break-inside-avoid{break-inside:avoid}body.printing-roster{color:#000!important;background:#fff!important;margin:0!important;padding:0!important}body.printing-roster *{visibility:hidden!important}body.printing-roster #roster-print-area,body.printing-roster #roster-print-area *{visibility:visible!important}body.printing-roster #roster-print-area{width:100%!important;box-shadow:none!important;color:#000!important;background:#fff!important;border:none!important;border-radius:0!important;padding:10mm!important;position:absolute!important;top:0!important;left:0!important;overflow:visible!important}@page{size:A4 landscape;margin:8mm}body.printing-laporan{color:#000!important;background:#fff!important;margin:0!important;padding:0!important}body.printing-laporan *{visibility:hidden!important}body.printing-laporan #laporan-print-area,body.printing-laporan #laporan-print-area *{visibility:visible!important}body.printing-laporan #laporan-print-area{width:100%!important;box-shadow:none!important;color:#000!important;background:#fff!important;border:none!important;border-radius:0!important;padding:12mm!important;position:absolute!important;top:0!important;left:0!important;overflow:visible!important}body.printing-laporan .ns-no-print,body.printing-laporan button:not(.allow-print),body.printing-laporan nav,body.printing-laporan aside,body.printing-laporan .print-hide{display:none!important}body.printing-laporan{font-family:Arial,Helvetica,sans-serif!important}body.printing-laporan #laporan-print-area{color:#000!important}body.printing-laporan #laporan-print-area .report-print-header{margin-bottom:8mm}body.printing-laporan #laporan-print-area table{border-collapse:collapse;width:100%;font-size:9.5pt}body.printing-laporan #laporan-print-area thead{display:table-header-group}body.printing-laporan #laporan-print-area tr{break-inside:avoid;page-break-inside:avoid}body.printing-laporan #laporan-print-area th,body.printing-laporan #laporan-print-area td{vertical-align:top;border:1px solid #555!important;padding:3px 5px!important}body.printing-laporan #laporan-print-area th{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#eee!important}body.printing-laporan #laporan-print-area .rounded-xl,body.printing-laporan #laporan-print-area .rounded-lg{border-radius:0!important}@page{size:A4 portrait;margin:12mm}}html{scroll-behavior:smooth}body{overscroll-behavior-y:none;overflow-x:hidden}#main-scrollable-area,.ns-scroll-smooth{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}*{-webkit-tap-highlight-color:transparent}@media print{body.printing-roster-matrix{background:#fff!important}body.printing-roster-matrix .roster-landscape-print{width:100%;font-size:8pt}body.printing-roster-matrix .roster-landscape-print table{table-layout:fixed;border-collapse:collapse;width:100%}body.printing-roster-matrix .roster-landscape-print th,body.printing-roster-matrix .roster-landscape-print td{text-align:center;vertical-align:middle;word-break:normal;overflow-wrap:normal;border:1px solid #111!important;padding:2px 3px!important}body.printing-roster-matrix .roster-landscape-print .subject-cell{white-space:normal;line-height:1.1}body.printing-roster-matrix #roster-print-area{color:#000!important}@page{size:A4 landscape;margin:8mm}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0}}@keyframes caret-blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}

/* KiSmart hotfix 2026-05-04: restore vertical scrolling on every page */
html,body,#root{height:100%;min-height:100%;overflow-x:hidden!important;}
body{overflow-y:auto!important;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
#main-scrollable-area{min-height:0!important;overflow-y:auto!important;overscroll-behavior-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
@media (max-width:767px){#main-scrollable-area{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;}}


/* === NOTESMART TAHAP 4: POLISH DASHBOARD GURU & MOBILE STABILITY ===
   Perubahan ini sengaja bersifat additive agar aman terhadap bundle React yang sudah berjalan.
   Fokus: tidak ada horizontal scroll, sentuhan lebih nyaman, kartu roster/jurnal stabil,
   tombol aksi tidak bertumpuk berantakan, dan area bawah tidak tertutup bottom navigation. */
:root{--ns-touch:44px;--ns-bottom-safe:calc(env(safe-area-inset-bottom,0px) + 88px)}
html,body,#root{min-height:100%;max-width:100%;overflow-x:hidden}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}
button,a,[role="button"],input,select,textarea{touch-action:manipulation}
button,[role="button"]{min-height:var(--ns-touch)}
input,select,textarea{font-size:16px}
main,.app-shell,.page-shell{max-width:100vw;overflow-x:hidden}
.pb-safe,.safe-bottom{padding-bottom:var(--ns-bottom-safe)!important}
.shadow-sm,.shadow,.shadow-md{will-change:auto}

@media (max-width: 768px){
  body{padding-bottom:env(safe-area-inset-bottom,0px)}
  .container{width:100%;max-width:100%;padding-left:1rem;padding-right:1rem}
  table{max-width:100%;}
  .overflow-x-auto{-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .grid{min-width:0}
  .grid>*{min-width:0}
  .rounded-2xl,.rounded-xl{scroll-margin-bottom:96px}
  form .grid{gap:.75rem!important}
  form button[type="submit"],form button[type="button"]{min-height:46px;border-radius:14px}
  form textarea{min-height:96px;line-height:1.45}
  /* Jurnal / Roster guru: kartu dibuat ringan, tidak terlalu rapat, dan stabil saat data berubah */
  section.rounded-2xl,section.rounded-xl,div.rounded-2xl,div.rounded-xl{max-width:100%}
  [class*="grid-cols-5"]{grid-template-columns:repeat(1,minmax(0,1fr))!important}
  [class*="grid-cols-4"]{grid-template-columns:repeat(1,minmax(0,1fr))!important}
  [class*="grid-cols-3"]{grid-template-columns:repeat(1,minmax(0,1fr))!important}
  [class*="grid-cols-2"]{grid-template-columns:repeat(1,minmax(0,1fr))!important}
  .sm\:grid-cols-2,.sm\:grid-cols-3,.sm\:grid-cols-4{grid-template-columns:repeat(1,minmax(0,1fr))!important}
  .flex.flex-col.gap-2.sm\:flex-row{align-items:stretch!important}
  .bottom-0,nav[class*="fixed"]{backdrop-filter:saturate(1.2) blur(12px)}
}

@media (min-width: 769px){
  .notesmart-stage-card{transition:transform .18s ease,box-shadow .18s ease}
  .notesmart-stage-card:hover{transform:translateY(-1px)}
}

@media print{
  html,body,#root{overflow:visible!important;max-width:none!important}
  body{padding-bottom:0!important}
  button,nav,[data-print-hide="true"]{display:none!important}
  .overflow-x-auto{overflow:visible!important}
}


/* === NOTESMART TAHAP 5: POLISH DASHBOARD ADMIN & MASTER DATA ===
   Fokus: halaman admin/master data/pengaturan/roster tidak melebar di HP,
   tombol aksi sejajar, dialog nyaman, dan tabel tetap terbaca sebagai kartu mobile.
   Bersifat additive agar aman terhadap bundle React produksi. */
:root{--ns-admin-radius:18px;--ns-admin-gap:.75rem}
.notesmart-admin-table{box-shadow:0 10px 30px rgba(15,23,42,.04)}
.notesmart-admin-table-scroll{overscroll-behavior-x:contain}
.notesmart-admin-actions{white-space:nowrap;gap:.35rem!important}
.notesmart-admin-action{min-width:38px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent}
.notesmart-admin-primary-action{min-height:42px;border-radius:14px}
.notesmart-admin-search input{min-height:42px;border-radius:14px}
.notesmart-admin-dialog{border-radius:22px!important}

@media (max-width:768px){
  /* Header halaman admin: judul tidak memotong layout dan tombol tidak turun satu-satu terlalu jauh. */
  .notesmart-admin-search{width:100%;max-width:100%!important}
  .notesmart-admin-primary-action{width:100%;justify-content:center}
  .notesmart-admin-dialog{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;padding:1rem!important}

  /* DataTable admin diubah menjadi kartu mobile agar tidak bergantung horizontal scroll. */
  .notesmart-admin-table{border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
  .notesmart-admin-table-scroll{overflow:visible!important}
  .notesmart-admin-data-table{display:block;width:100%!important;border-collapse:separate!important;border-spacing:0 .75rem!important}
  .notesmart-admin-data-table thead{display:none!important}
  .notesmart-admin-data-table tbody{display:block;width:100%}
  .notesmart-admin-data-table tr{display:block;width:100%;border:1px solid hsl(var(--border));border-radius:var(--ns-admin-radius);background:hsl(var(--card));box-shadow:0 8px 24px rgba(15,23,42,.06);padding:.65rem .75rem;margin-bottom:.75rem}
  .notesmart-admin-data-table td{display:flex!important;width:100%;align-items:flex-start;justify-content:space-between;gap:.75rem;border:0!important;padding:.45rem 0!important;text-align:right!important;word-break:break-word;white-space:normal}
  .notesmart-admin-data-table td:before{content:"Data";flex:0 0 42%;max-width:42%;text-align:left;color:hsl(var(--muted-foreground));font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .notesmart-admin-data-table td:first-child{padding-top:.15rem!important;font-weight:700;color:hsl(var(--foreground))}
  .notesmart-admin-data-table td:last-child{border-top:1px dashed hsl(var(--border))!important;margin-top:.25rem;padding-top:.65rem!important;justify-content:flex-end;text-align:right!important}
  .notesmart-admin-data-table td:last-child:before{content:"Aksi";align-self:center}
  .notesmart-admin-actions{width:100%;justify-content:flex-end!important;flex-wrap:nowrap!important}
  .notesmart-admin-action{min-width:42px;min-height:38px;border-radius:12px;background:hsl(var(--muted)/.45)}

  /* Master data dan pengaturan: grid/form tidak memaksa layar melebar. */
  [class*="app.settings"], form, fieldset{max-width:100%}
  form .grid, .notesmart-admin-dialog .grid{grid-template-columns:repeat(1,minmax(0,1fr))!important}
  input,select,textarea{max-width:100%}
  .overflow-x-auto table{min-width:max-content}
}

@media (min-width:769px){
  .notesmart-admin-data-table th,.notesmart-admin-data-table td{vertical-align:middle}
  .notesmart-admin-data-table tbody tr:hover{background:hsl(var(--muted)/.25)}
}

@media print{
  .notesmart-admin-table{box-shadow:none!important;border:1px solid #ddd!important;background:white!important}
  .notesmart-admin-data-table{display:table!important;width:100%!important;border-collapse:collapse!important}
  .notesmart-admin-data-table thead{display:table-header-group!important}
  .notesmart-admin-data-table tbody{display:table-row-group!important}
  .notesmart-admin-data-table tr{display:table-row!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important}
  .notesmart-admin-data-table td{display:table-cell!important;text-align:left!important;border:1px solid #ddd!important;padding:6px!important}
  .notesmart-admin-data-table td:before{display:none!important;content:""!important}
}


/* === NOTESMART TAHAP 8: POLISH GLOBAL, ANTI WHITE-SCREEN, MOBILE SMOOTH ===
   Fokus: pengalaman aplikasi terasa seperti Android app profesional, tanpa horizontal scroll,
   loading/error state lebih manusiawi, tombol nyaman disentuh, dan hasil print tetap bersih. */
:root{
  --ns-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ns-touch: 44px;
  --ns-card-soft-shadow: 0 14px 36px rgba(15,23,42,.07);
}
html{width:100%;max-width:100%;overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body,#root{min-height:100vh;width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-y:none;background:hsl(var(--background))}
*{min-width:0;-webkit-tap-highlight-color:transparent}
img,svg,video,canvas,iframe{max-width:100%}
button,a,[role="button"],input,select,textarea{touch-action:manipulation}
button,[role="button"]{min-height:var(--ns-touch)}
input,select,textarea{font-size:16px}
input:disabled,select:disabled,textarea:disabled,button:disabled{opacity:.72;cursor:not-allowed}
main,section,article,aside,header,footer,.container{max-width:100%}
.overflow-x-auto{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.rounded-xl,.rounded-2xl,.rounded-3xl{overflow-wrap:anywhere}
.shadow-sm,.shadow,.shadow-md{box-shadow:var(--ns-card-soft-shadow)}
[data-state="open"],.fixed,.sticky{max-width:100vw}

/* Loading, skeleton, dan empty/error state dibuat tenang agar tidak bergetar/flicker. */
.animate-pulse{animation-duration:1.35s!important}
.animate-spin{animation-duration:.9s!important}
[aria-busy="true"]{cursor:progress}
.skeleton,.notesmart-skeleton,[class*="Skeleton"]{border-radius:16px!important}
.text-destructive,.text-red-500,.text-red-600{overflow-wrap:anywhere}

/* Bottom navigation dan area bawah: konten tidak tertutup tombol/menu fixed. */
body{padding-bottom:calc(72px + var(--ns-safe-bottom))}
nav.fixed.bottom-0,footer.fixed.bottom-0,[class*="bottom-0"]{padding-bottom:var(--ns-safe-bottom);transform:translateZ(0);backface-visibility:hidden}

/* Dialog/sheet/popover: aman pada layar kecil dan iPhone. */
[role="dialog"],[data-radix-popper-content-wrapper]{max-width:calc(100vw - 20px)!important}
[role="dialog"]{max-height:calc(100dvh - 24px);overflow:auto;-webkit-overflow-scrolling:touch}

/* Toast/notifikasi tidak boleh menutup pekerjaan terlalu lama di tengah layar. */
[data-sonner-toaster],.toaster,.toast-container{max-width:calc(100vw - 24px)!important;z-index:9999!important}
[data-sonner-toast],.toast{border-radius:16px!important;box-shadow:0 16px 42px rgba(15,23,42,.12)!important}

/* Tabel tetap terbaca, tapi tidak merusak layout mobile. */
table{max-width:100%;border-collapse:collapse}
th,td{overflow-wrap:anywhere}

@media (max-width:768px){
  body{padding-left:0;padding-right:0}
  .container{padding-left:1rem!important;padding-right:1rem!important}
  h1{font-size:clamp(1.35rem,6vw,1.9rem)!important;line-height:1.18!important}
  h2{font-size:clamp(1.15rem,5vw,1.55rem)!important;line-height:1.22!important}
  p,li,label,td,th{line-height:1.48}
  .gap-6{gap:1rem!important}.gap-5{gap:.9rem!important}.gap-4{gap:.8rem!important}
  .p-8{padding:1.25rem!important}.p-6{padding:1rem!important}.px-6{padding-left:1rem!important;padding-right:1rem!important}
  .min-h-screen{min-height:100dvh!important}
  .h-screen{height:100dvh!important}
  .max-w-screen,.w-screen{max-width:100vw!important;width:100%!important}
  [class*="translate-x"],[class*="-translate-x"]{will-change:transform}
  .fixed.inset-0{width:100vw;max-width:100vw}
  /* Form panjang seperti jurnal/admin: tombol submit tetap mudah dijangkau. */
  form button[type="submit"],form button:not([type]){min-height:46px}
  textarea{min-height:104px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

@media print{
  html,body,#root{background:#fff!important;color:#000!important;overflow:visible!important;width:auto!important;max-width:none!important;padding:0!important}
  body{font-family:"Times New Roman",Times,serif!important}
  .fixed,.sticky,nav,aside,button,[role="button"],[data-print-hide="true"],[data-sonner-toaster],.toaster,.toast-container{display:none!important}
  table{width:100%!important;page-break-inside:auto;border-collapse:collapse!important}
  tr{page-break-inside:avoid;page-break-after:auto}
  th,td{border:1px solid #222!important;padding:6px!important;color:#000!important;background:#fff!important}
}


/* === HOTFIX MOBILE TABLE & ROSTER TABS ===
   Memperbaiki tabel master data yang sempit di HP: NIS/nama/kelas/status tidak lagi pecah vertikal.
   Memperbaiki tab Roster Reguler/Jadwal Khusus/Generator/Cetak agar tidak saling menindih. */
@media (max-width: 1024px){
  .notesmart-admin-table{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .notesmart-admin-table-scroll{
    overflow:visible!important;
    width:100%!important;
  }
  .notesmart-admin-data-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }
  .notesmart-admin-data-table thead{
    display:none!important;
  }
  .notesmart-admin-data-table tbody{
    display:block!important;
    width:100%!important;
  }
  .notesmart-admin-data-table tr{
    display:block!important;
    width:100%!important;
    margin:0 0 .85rem 0!important;
    padding:.85rem!important;
    border:1px solid hsl(var(--border))!important;
    border-radius:20px!important;
    background:hsl(var(--card))!important;
    box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
  }
  .notesmart-admin-data-table td{
    display:grid!important;
    grid-template-columns:minmax(86px,32%) minmax(0,1fr)!important;
    align-items:flex-start!important;
    gap:.65rem!important;
    width:100%!important;
    padding:.46rem 0!important;
    border:0!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    font-size:.95rem!important;
    line-height:1.35!important;
  }
  .notesmart-admin-data-table td::before{
    content:attr(data-label)!important;
    width:auto!important;
    max-width:none!important;
    flex:none!important;
    color:hsl(var(--muted-foreground))!important;
    font-size:.7rem!important;
    font-weight:800!important;
    line-height:1.2!important;
    text-transform:uppercase!important;
    letter-spacing:.045em!important;
    text-align:left!important;
    padding-top:.15rem!important;
  }
  .notesmart-admin-data-table td:last-child{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    border-top:1px dashed hsl(var(--border))!important;
    margin-top:.35rem!important;
    padding-top:.75rem!important;
  }
  .notesmart-admin-data-table td:last-child::before{
    content:"Aksi"!important;
    margin-right:auto!important;
  }
  .notesmart-admin-data-table td > *,
  .notesmart-admin-data-table td span,
  .notesmart-admin-data-table td button,
  .notesmart-admin-data-table td [class*="badge"],
  .notesmart-admin-data-table td [class*="Badge"],
  .notesmart-admin-data-table td .inline-flex{
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }
  .notesmart-admin-data-table td [class*="rounded-full"],
  .notesmart-admin-data-table td button[aria-label],
  .notesmart-admin-actions button{
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
  .notesmart-admin-actions{
    width:auto!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:.35rem!important;
    justify-content:flex-end!important;
  }
  .notesmart-admin-action{
    min-width:42px!important;
    min-height:42px!important;
  }
}

@media (max-width: 768px){
  /* Tab utama roster: jangan 4 kolom sempit, ubah menjadi 2 baris agar teks tidak bertumpuk. */
  [role="tablist"].grid-cols-4,
  .grid.grid-cols-4[role="tablist"]{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    height:auto!important;
    gap:.35rem!important;
    padding:.35rem!important;
  }
  [role="tablist"].grid-cols-4 [role="tab"],
  .grid.grid-cols-4[role="tablist"] [role="tab"]{
    min-height:42px!important;
    white-space:normal!important;
    line-height:1.15!important;
    padding-left:.5rem!important;
    padding-right:.5rem!important;
  }

  /* Tombol hari pada roster tetap bisa digeser, tetapi tidak memaksa layout melebar. */
  .flex.gap-1.overflow-x-auto.rounded-xl.border{
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin;
  }
  .flex.gap-1.overflow-x-auto.rounded-xl.border > button{
    flex:0 0 auto!important;
    min-width:76px!important;
    white-space:nowrap!important;
  }

  /* Ukuran teks tabel master data dibuat proporsional di layar kecil. */
  .notesmart-admin-data-table td{
    grid-template-columns:minmax(78px,30%) minmax(0,1fr)!important;
    font-size:.94rem!important;
  }
}


/* HOTFIX JURNAL MODE & GURU PENGGANTI - 2026-05-12
   Merapikan toggle Otomatis/Manual dan memastikan area guru pengganti nyaman di layar HP. */
.ns-journal-mode-tabs{display:block;position:relative;z-index:1;margin-bottom:.35rem}
.ns-journal-mode-list{height:auto!important;min-height:3.25rem;padding:.35rem;align-items:stretch;gap:.35rem;overflow:visible;border-radius:1.25rem}
.ns-journal-mode-trigger{min-height:2.6rem;height:auto!important;white-space:normal!important;line-height:1.2;text-align:center;border-radius:1rem;padding:.55rem .7rem;display:flex;align-items:center;justify-content:center;word-break:normal;overflow-wrap:normal}
@media (max-width:480px){
  .ns-journal-mode-list{grid-template-columns:1fr!important;min-height:0;padding:.4rem}
  .ns-journal-mode-trigger{width:100%;min-height:2.75rem;font-size:.95rem}
}
@media (max-width:640px){
  [data-radix-collection-item].ns-journal-mode-trigger{white-space:normal!important}
  .ns-journal-mode-tabs + p{margin-top:.55rem!important;line-height:1.45!important;position:relative;z-index:0;clear:both}
}


/* HOTFIX: Jurnal mode selector tanpa tumpuk di mobile */
.ns-journal-mode-custom{position:relative!important;z-index:1!important;height:auto!important;min-height:0!important;overflow:visible!important;align-items:stretch!important}
.ns-journal-mode-button{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:hsl(var(--muted-foreground));border-radius:1rem;min-height:3rem;width:100%;padding:.8rem .9rem;font-size:.95rem;font-weight:800;line-height:1.25;text-align:center;display:flex;align-items:center;justify-content:center;white-space:normal;word-break:normal;overflow-wrap:break-word;box-shadow:none;transition:background-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease}
.ns-journal-mode-button.is-active{background:hsl(var(--background));color:hsl(var(--foreground));box-shadow:0 10px 24px rgba(15,23,42,.10),0 1px 3px rgba(15,23,42,.08)}
.ns-journal-mode-button:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}
.ns-journal-mode-note{display:block!important;position:relative!important;z-index:0!important;clear:both!important;max-width:100%!important;margin-top:.75rem!important;padding-top:0!important}
@media (max-width: 480px){.ns-journal-mode-custom{grid-template-columns:1fr!important;gap:.45rem!important;padding:.45rem!important}.ns-journal-mode-button{min-height:2.95rem;font-size:.92rem;padding:.75rem .65rem}.ns-journal-mode-note{font-size:.82rem!important;line-height:1.55!important}}

/* ===== SOURCE: assets/v76/mobile-fix.css ===== */
/* KiSmart - Mobile UI overrides v10 - TOUCH EFFECTS & BUTTON COLORS
   Fokus: Profesional, Rapi, Smooth, Touch-Sensitive, Button Colors
   =========================================================== */

/* ===========================================================
   0. CSS VARIABLES - Design System
   =========================================================== */
:root {
  /* Easing curves */
  --ns-ease: cubic-bezier(.25, .1, .25, 1);
  --ns-ease-out: cubic-bezier(0, 0, .2, 1);
  --ns-ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Timing */
  --ns-instant: 50ms;
  --ns-fast: 120ms;
  --ns-med: 200ms;
  --ns-slow: 300ms;

  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Colors - Status */
  --color-success: #22c55e;
  --color-success-light: color-mix(in oklab, #22c55e 15%, transparent);
  --color-success-dark: #15803d;

  --color-warning: #f59e0b;
  --color-warning-light: color-mix(in oklab, #f59e0b 15%, transparent);
  --color-warning-dark: #b45309;

  --color-danger: #ef4444;
  --color-danger-light: color-mix(in oklab, #ef4444 15%, transparent);
  --color-danger-dark: #dc2626;

  --color-info: #3b82f6;
  --color-info-light: color-mix(in oklab, #3b82f6 12%, transparent);
  --color-info-dark: #2563eb;

  --color-purple: #8b5cf6;
  --color-purple-light: color-mix(in oklab, #8b5cf6 12%, transparent);

  /* Primary green (KiSmart theme) */
  --color-primary: #1f7a4d;
  --color-primary-light: color-mix(in oklab, #1f7a4d 10%, transparent);
  --color-primary-hover: color-mix(in oklab, #1f7a4d 15%, transparent);
  --color-primary-active: color-mix(in oklab, #1f7a4d 20%, transparent);

  /* Neutral */
  --color-neutral: #6b7280;
  --color-neutral-light: color-mix(in oklab, #6b7280 10%, transparent);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  scroll-behavior: smooth;
}

/* ===========================================================
   1. GLOBAL RESET
   =========================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html, body, #root {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
  min-height: unset !important;
  height: auto !important;
}

#root {
  overscroll-behavior: contain;
  min-height: unset !important;
}

/* ===========================================================
   2. CORE INTERACTIVE - Touch & Pointer
   =========================================================== */
button,
a,
input,
select,
textarea,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"],
[role="combobox"],
[class*="clickable"],
[class*="selectable"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition:
    background-color var(--ns-fast) var(--ns-ease-out),
    border-color var(--ns-fast) var(--ns-ease-out),
    color var(--ns-fast) var(--ns-ease-out),
    box-shadow var(--ns-fast) var(--ns-ease-out),
    transform var(--ns-instant) var(--ns-ease-out),
    opacity var(--ns-fast) var(--ns-ease-out);
}

/* ===========================================================
   3. BUTTON VARIANTS - Professional Colors
   =========================================================== */

/* --- PRIMARY: Save, Add, Submit, Approve, Apply, Login --- */
.btn-primary,
button[type="submit"]:not([class*="outline"]):not([class*="ghost"]),
.btn-save,
.btn-add,
.btn-submit,
.btn-approve,
.btn-apply,
.btn-login,
.btn-generate,
.btn-create,
[class*="btn-primary"],
[class*="bg-emerald"],
[class*="bg-green"] {
  background: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.btn-primary:hover,
button[type="submit"]:hover:not([class*="outline"]):not([class*="ghost"]),
.btn-save:hover,
.btn-add:hover,
.btn-submit:hover,
.btn-approve:hover,
.btn-apply:hover,
.btn-login:hover,
.btn-generate:hover,
.btn-create:hover {
  background: var(--color-success-dark) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active,
button[type="submit"]:active:not([class*="outline"]):not([class*="ghost"]) {
  transform: scale(0.98) translateY(0) !important;
  opacity: 0.9 !important;
}

/* --- SECONDARY: Cancel, Back, Close, Reset Light --- */
.btn-secondary,
.btn-outline,
.btn-cancel,
.btn-back,
.btn-close,
.btn-reset-light,
.btn-neutral,
button[type="button"]:not([class*="primary"]):not([class*="danger"]):not([class*="warning"]):not([class*="info"]),
[class*="btn-outline"],
[class*="btn-secondary"],
[class*="border-gray"],
[class*="border-muted"] {
  background: white !important;
  color: var(--color-neutral) !important;
  border-color: #d1d5db !important;
  font-weight: 500 !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-cancel:hover,
.btn-back:hover,
.btn-close:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
}

.btn-secondary:active,
.btn-outline:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- INFO: View, Detail, Preview, Info --- */
.btn-info,
.btn-view,
.btn-detail,
.btn-preview,
.btn-show,
.btn-info-action,
[class*="btn-info"],
[class*="btn-blue"],
.bg-blue,
.bg-info {
  background: var(--color-info) !important;
  color: white !important;
  border-color: var(--color-info) !important;
}

.btn-info:hover,
.btn-view:hover,
.btn-detail:hover,
.btn-preview:hover {
  background: var(--color-info-dark) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-1px) !important;
}

.btn-info:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- WARNING: Edit, Revise, Modify, Update --- */
.btn-warning,
.btn-edit,
.btn-revise,
.btn-modify,
.btn-update,
.btn-revision,
.btn-change,
.bg-amber,
.bg-yellow,
.bg-warning,
[class*="btn-warning"],
[class*="btn-edit"],
[class*="btn-orange"] {
  background: var(--color-warning-light) !important;
  color: var(--color-warning-dark) !important;
  border-color: var(--color-warning) !important;
  font-weight: 600 !important;
}

.btn-warning:hover,
.btn-edit:hover,
.btn-revise:hover,
.btn-modify:hover,
.btn-update:hover {
  background: var(--color-warning) !important;
  color: white !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-warning:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- DANGER: Delete, Reject, Cancel Large, Reset Big --- */
.btn-danger,
.btn-delete,
.btn-reject,
.btn-remove,
.btn-reset,
.btn-cancel-strong,
.btn-destroy,
.bg-red,
.bg-destructive,
.bg-danger,
[class*="btn-danger"],
[class*="btn-red"],
[class*="btn-delete"] {
  background: var(--color-danger) !important;
  color: white !important;
  border-color: var(--color-danger) !important;
  font-weight: 600 !important;
}

.btn-danger:hover,
.btn-delete:hover,
.btn-reject:hover {
  background: var(--color-danger-dark) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.btn-danger:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- SUCCESS: Present, Complete, Active, Approve --- */
.btn-success,
.btn-complete,
.btn-active,
.btn-enable,
.btn-confirm,
.bg-green-light,
.bg-success-light,
[class*="btn-success"],
[class*="btn-green"] {
  background: var(--color-success-light) !important;
  color: var(--color-success-dark) !important;
  border-color: var(--color-success) !important;
  font-weight: 600 !important;
}

.btn-success:hover,
.btn-complete:hover,
.btn-active:hover {
  background: var(--color-success) !important;
  color: white !important;
}

.btn-success:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* --- GHOST: Minimal style buttons --- */
.btn-ghost,
.btn-link,
button.ghost,
[class*="btn-ghost"],
[class*="btn-link"] {
  background: transparent !important;
  color: var(--color-neutral) !important;
  border-color: transparent !important;
  font-weight: 500 !important;
}

.btn-ghost:hover {
  background: var(--color-neutral-light) !important;
  color: #374151 !important;
}

/* --- NEUTRAL: Refresh, Filter, Reload --- */
.btn-neutral,
.btn-refresh,
.btn-filter,
.btn-reload,
.btn-refetch,
button[class*="bg-gray"],
button[class*="bg-muted"],
.bg-gray-light {
  background: var(--color-neutral-light) !important;
  color: var(--color-neutral) !important;
  border-color: #d1d5db !important;
}

.btn-neutral:hover,
.btn-refresh:hover,
.btn-filter:hover {
  background: #e5e7eb !important;
  color: #374151 !important;
}

/* ===========================================================
   4. TOUCH EFFECTS - All Interactive Elements
   =========================================================== */

/* Active/Tap effect - all clickables */
button:active,
a:active,
[role="button"]:active,
[role="tab"]:active {
  transform: scale(0.98) translateY(0) !important;
  opacity: 0.88 !important;
  transition: transform var(--ns-instant) var(--ns-ease-out), opacity var(--ns-instant) !important;
}

/* Hover effect - desktop only */
@media (hover: hover) {
  button:hover:not(:disabled),
  a:hover:not(:disabled),
  [role="button"]:hover:not(:disabled) {
    transform: translateY(-1px) !important;
  }

  .btn-primary:hover:not(:disabled),
  .btn-info:hover:not(:disabled),
  .btn-danger:hover:not(:disabled),
  .btn-success:hover:not(:disabled),
  .btn-warning:hover:not(:disabled) {
    box-shadow: var(--shadow-md) !important;
  }
}

/* Disabled state */
button:disabled,
button[disabled],
[aria-disabled="true"],
.is-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Focus visible - accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* ===========================================================
   5. RIPPLE EFFECT - Subtle Touch
   =========================================================== */
button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), currentColor 0%, transparent 70%);
  opacity: 0;
  transition: opacity 60ms;
  pointer-events: none;
}

button:active::after {
  opacity: 0.06;
  transition: opacity 0ms;
}

button {
  position: relative;
  overflow: hidden;
}

/* ===========================================================
   6. MENU & NAVIGATION - Touch Optimized
   =========================================================== */

/* Sidebar menu - desktop */
aside nav a,
aside nav button,
aside nav [role="menuitem"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  margin: 2px 8px !important;
  border-radius: var(--radius-md) !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}

aside nav a:hover,
aside nav button:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

aside nav a[aria-current="page"],
aside nav a.active,
aside nav button[aria-current="page"] {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--color-primary) !important;
}

aside nav a:active,
aside nav button:active {
  transform: scale(0.98) !important;
  opacity: 0.85 !important;
}

/* Bottom navigation - mobile */
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] {
  background: white !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
}

nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] a,
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 56px !important;
  padding: 6px 8px !important;
  color: #9ca3af !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] a:active,
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] button:active {
  transform: scale(0.95) translateY(-2px) !important;
  background: var(--color-primary-light) !important;
}

nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] a[aria-current="page"],
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] button[aria-current="page"] {
  color: var(--color-primary) !important;
}

nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] a[aria-current="page"]::before,
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] button[aria-current="page"]::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

/* ===========================================================
   7. TABS - Smooth & Touch-Friendly
   =========================================================== */
[role="tablist"],
.ns-tabs,
[class*="tab-container"],
.tabs-container {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px !important;
}

[role="tablist"]::-webkit-scrollbar {
  display: none;
}

[role="tab"],
.ns-tab,
[class*="tab-item"] {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  color: var(--color-neutral) !important;
  background: transparent !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

[role="tab"]:hover,
.ns-tab:hover {
  background: var(--color-neutral-light) !important;
  color: #374151 !important;
}

[role="tab"]:active,
.ns-tab:active {
  transform: scale(0.97) !important;
}

[role="tab"][aria-selected="true"],
.ns-tab.active,
[class*="tab-item"].active {
  background: var(--color-primary) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ===========================================================
   8. CARDS - Hover & Touch Effects
   =========================================================== */
.card,
section.rounded-xl,
section.rounded-2xl,
div.rounded-xl,
div.rounded-2xl {
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

@media (hover: hover) {
  .card:hover,
  section.rounded-xl:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
  }
}

.card:active,
section.rounded-xl:active {
  transform: scale(0.995) !important;
}

/* Card clickable items */
.card[class*="clickable"],
.card[class*="selectable"],
.card[data-clickable="true"] {
  cursor: pointer;
}

.card[class*="clickable"]:hover {
  border-color: var(--color-primary-light) !important;
}

/* ===========================================================
   9. FORM INPUTS - Focus & Touch
   =========================================================== */
input,
select,
textarea {
  min-height: 44px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-md) !important;
  font-size: 16px !important;
  border: 1px solid #d1d5db !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
  outline: none !important;
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 40px !important;
}

/* ===========================================================
   10. BADGES & STATUS - Color Variants
   =========================================================== */

/* Status badges */
.badge,
[class*="badge"],
.tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  gap: 4px !important;
}

/* Success/Present/Active */
.badge-success,
.badge-hadir,
.badge-present,
.badge-active,
.status-success,
.status-hadir,
.status-present,
.status-active {
  background: var(--color-success-light) !important;
  color: var(--color-success-dark) !important;
}

/* Warning/Edit/Revise */
.badge-warning,
.badge-edit,
.badge-revise,
.badge-menunggu,
.status-warning,
.status-edit,
.status-revise,
.status-menunggu {
  background: var(--color-warning-light) !important;
  color: var(--color-warning-dark) !important;
}

/* Danger/Delete/Reject/Absent */
.badge-danger,
.badge-error,
.badge-alfa,
.badge-delete,
.badge-tolak,
.badge-gagal,
.status-danger,
.status-alfa,
.status-delete,
.status-tolak {
  background: var(--color-danger-light) !important;
  color: var(--color-danger-dark) !important;
}

/* Info/View/Detail */
.badge-info,
.badge-view,
.badge-detail,
.status-info,
.status-view,
.status-detail {
  background: var(--color-info-light) !important;
  color: var(--color-info-dark) !important;
}

/* Purple/Dispensation */
.badge-purple,
.badge-dispensasi,
.badge-special,
.status-purple {
  background: var(--color-purple-light) !important;
  color: var(--color-purple) !important;
}

/* Neutral/Inactive/Pending */
.badge-neutral,
.badge-pending,
.badge-inactive,
.status-neutral,
.status-pending,
.status-inactive {
  background: var(--color-neutral-light) !important;
  color: var(--color-neutral) !important;
}

/* ===========================================================
   11. ABSENCE STATUS BUTTONS - Color Coded
   =========================================================== */

/* Present (H) */
button[aria-label*="Hadir"],
button[aria-label*="Set Hadir"],
.status-h,
.btn-status-hadir {
  background: var(--color-success-light) !important;
  color: var(--color-success-dark) !important;
  border-color: var(--color-success) !important;
}

button[aria-label*="Hadir"]:hover,
button[aria-label*="Set Hadir"]:hover {
  background: var(--color-success) !important;
  color: white !important;
}

/* Sick (S) */
button[aria-label*="Sakit"],
button[aria-label*="Set Sakit"],
.status-s,
.btn-status-sakit {
  background: var(--color-warning-light) !important;
  color: var(--color-warning-dark) !important;
  border-color: var(--color-warning) !important;
}

button[aria-label*="Sakit"]:hover {
  background: var(--color-warning) !important;
  color: white !important;
}

/* Permission (I) */
button[aria-label*="Izin"],
button[aria-label*="Set Izin"],
.status-i,
.btn-status-izin {
  background: var(--color-info-light) !important;
  color: var(--color-info-dark) !important;
  border-color: var(--color-info) !important;
}

button[aria-label*="Izin"]:hover {
  background: var(--color-info) !important;
  color: white !important;
}

/* Absent (A) */
button[aria-label*="Alfa"],
button[aria-label*="Set Alfa"],
.status-a,
.btn-status-alfa {
  background: var(--color-danger-light) !important;
  color: var(--color-danger-dark) !important;
  border-color: var(--color-danger) !important;
}

button[aria-label*="Alfa"]:hover {
  background: var(--color-danger) !important;
  color: white !important;
}

/* Dispensation (D) */
button[aria-label*="Dispensasi"],
button[aria-label*="Set Dispensasi"],
.status-d,
.btn-status-dispensasi {
  background: var(--color-purple-light) !important;
  color: var(--color-purple) !important;
  border-color: var(--color-purple) !important;
}

button[aria-label*="Dispensasi"]:hover {
  background: var(--color-purple) !important;
  color: white !important;
}

/* Absence status buttons common styles */
button[aria-label^="Set "] {
  height: 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-width: 1.5px !important;
  transition: all var(--ns-fast) var(--ns-ease-out) !important;
}

button[aria-label^="Set "]:active {
  transform: scale(0.95) !important;
}

/* Absence buttons container */
div:has(> button[aria-label^="Set "]) {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

/* ===========================================================
   12. TABLES - Hover & Focus
   =========================================================== */
table tbody tr {
  transition: background-color var(--ns-fast) var(--ns-ease-out) !important;
}

table tbody tr:hover {
  background: var(--color-primary-light) !important;
}

table tbody tr:active {
  background: var(--color-primary-hover) !important;
}

/* Table action buttons */
table button,
table a[role="button"] {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: var(--radius-sm) !important;
}

/* ===========================================================
   13. MODALS - Smooth Animation
   =========================================================== */
[role="dialog"] {
  border-radius: var(--radius-xl) !important;
  animation: modalIn var(--ns-slow) var(--ns-ease-out) forwards !important;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

[role="dialog"] header,
[role="dialog"] footer {
  padding: 16px !important;
}

[role="dialog"] footer {
  border-top: 1px solid #e5e7eb !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

/* ===========================================================
   14. DROPDOWNS - Smooth Reveal
   =========================================================== */
[data-radix-popper-content-wrapper],
[data-dropdown-content],
[class*="dropdown-menu"] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: dropdownIn var(--ns-med) var(--ns-ease-out) forwards !important;
  z-index: 9999 !important;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-radix-popper-content-wrapper] [role="menuitem"],
[data-radix-popper-content-wrapper] [role="option"] {
  min-height: 44px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-md) !important;
}

[data-radix-popper-content-wrapper] [role="menuitem"]:hover,
[data-radix-popper-content-wrapper] [role="option"]:hover {
  background: var(--color-primary-light) !important;
}

/* ===========================================================
   15. PAGE STRUCTURE - No Extra Space
   =========================================================== */
main,
[class*="content-area"],
.page-content {
  min-height: unset !important;
  height: auto !important;
}

@media (max-width: 640px) {
  main,
  [class*="content-area"],
  .page-content {
    padding: 12px !important;
  }
}

@media (min-width: 641px) {
  main,
  [class*="content-area"],
  .page-content {
    padding: 16px !important;
    max-width: 900px;
    margin: 0 auto;
  }
}

/* Bottom nav safe area */
@media (max-width: 640px) {
  body:has(nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"]) main,
  body:has(nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"]) [class*="content-area"] {
    padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 72px) !important;
  }
}

/* ===========================================================
   16. SKELETON LOADING - Smooth Pulse
   =========================================================== */
.animate-pulse,
.skeleton {
  border-radius: var(--radius-md) !important;
  background: linear-gradient(
    90deg,
    #e8ede9 30%,
    #f0f3f1 50%,
    #e8ede9 70%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeletonPulse 1.5s ease-in-out infinite !important;
}

@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

button:has(.animate-spin) {
  opacity: 0.8 !important;
  pointer-events: none !important;
}

/* ===========================================================
   17. PAGE TRANSITIONS - Smooth Navigation
   =========================================================== */
main,
.page-content,
[class*="page-view"] {
  animation: pageIn var(--ns-med) var(--ns-ease-out) forwards !important;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================================
   18. TOAST NOTIFICATIONS
   =========================================================== */
[data-sonner-toast],
[data-toast] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: toastIn var(--ns-med) var(--ns-ease-out) forwards !important;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===========================================================
   19. CUSTOM SCROLLBAR - Subtle
   =========================================================== */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.25) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.4) !important;
}

/* ===========================================================
   20. EMPTY STATES - Compact
   =========================================================== */
.empty-state,
[class*="empty-state"] {
  padding: 24px 16px !important;
  text-align: center !important;
}

.empty-state svg,
[class*="empty-state"] svg {
  width: 48px !important;
  height: 48px !important;
  opacity: 0.35 !important;
  margin-bottom: 12px !important;
}

.empty-state p,
[class*="empty-state"] p {
  font-size: 13px !important;
  color: var(--color-neutral) !important;
  margin: 0 !important;
}

/* ===========================================================
   21. ACTION BUTTONS - Grid Layout
   =========================================================== */
.action-buttons,
.button-group,
.ns-actions,
[class*="actions-container"],
.button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.action-buttons button,
.button-group button,
.ns-actions button,
[class*="actions-container"] button {
  flex: 1 1 auto !important;
  min-width: 80px !important;
}

/* ===========================================================
   22. FILTER BAR - Compact
   =========================================================== */
.filter-bar,
.search-bar,
[class*="filter-bar"],
[class*="toolbar"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* ===========================================================
   23. STAT CARDS - Grid
   =========================================================== */
.stats-grid,
.stat-grid,
[class*="stats-container"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 640px) {
  .stats-grid,
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.stat-card,
[class*="stat-card"] {
  padding: 14px !important;
  text-align: center !important;
}

/* ===========================================================
   24. ERROR PANELS - Hidden
   =========================================================== */
section[role="alert"]:has([class*="text-destructive"]),
div[role="alert"]:has([class*="text-destructive"]),
div.min-h-\[80vh\]:has([class*="text-destructive"]),
div.min-h-screen:has([role="alert"]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===========================================================
   25. LOGIN PAGE - Centered
   =========================================================== */
body.notesmart-login,
html.notesmart-login {
  min-height: 100vh !important;
  height: 100vh !important;
}

body.notesmart-login main,
body.notesmart-login #root > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 16px !important;
}

/* ===========================================================
   26. JOURNAL MODE TOGGLE - Grid
   =========================================================== */
.ns-journal-mode-custom,
.ns-mode-toggle,
[class*="mode-toggle"] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-neutral-light) !important;
}

.ns-journal-mode-button,
.ns-mode-toggle button {
  min-height: 44px !important;
}

/* ===========================================================
   27. REDUCED MOTION - Accessibility
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================
   28. RADIO & CHECKBOX
   =========================================================== */
input[type="radio"],
input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--color-primary) !important;
  cursor: pointer !important;
}

/* ===========================================================
   29. WORD WRAP - Mobile Safe
   =========================================================== */
@media (max-width: 640px) {
  button, a, nav *, h1, h2, h3, h4, h5, h6,
  [role="tab"], [role="menuitem"], [role="button"] {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
  }

  section.rounded-xl *,
  .card * {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
}

/* ===========================================================
   30. HEADER - Clean & Compact
   =========================================================== */
header {
  padding-top: env(safe-area-inset-top, 0px) !important;
  background: white !important;
  border-bottom: 1px solid #e5e7eb !important;
}

header > div {
  padding: 12px 14px !important;
}

/* ===========================================================
   31. PREVENT HORIZONTAL OVERFLOW
   =========================================================== */
html, body, #root {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* ===========================================================
   32. ACCOUNT DROPDOWN - Width Fix
   =========================================================== */
header [role="menu"],
[role="menu"].w-64 {
  width: 240px !important;
  min-width: 240px !important;
}

/* ===========================================================
   33. VOICE RECORDING UI
   =========================================================== */
[data-voice-btn] {
  cursor: pointer !important;
  touch-action: manipulation !important;
}

[data-voice-btn]:active {
  transform: scale(0.95) !important;
  opacity: 0.9 !important;
}

[data-recording-indicator] {
  animation: voicePulse 1.5s ease-in-out infinite !important;
}

@keyframes voicePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}

/* ===========================================================
   34. EXTRA ATTENDANCE FIELDS
   =========================================================== */
.ns-extra-fields {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #d1d5db;
}

.ns-extra-row > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-neutral);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ns-extra-row input,
.ns-extra-row textarea {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-md);
  font-size: 14px;
}

/* ===========================================================
   35. FINAL RESET - No Lingering Space
   =========================================================== */
main > *:last-child,
.page-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Tinggi shell aplikasi tidak lagi diubah melalui selector atribut global.
   Override lama merusak flex scrolling pada PC/laptop. */
/* Prevent iOS zoom on input */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}


/* Shell utama dikelola oleh notesmart-desktop-stability-v5.css. */

/* ===== SOURCE: assets/v76/notesmart-ui-audit-polish.css ===== */
/* ===========================================================
   KiSmart UI Audit Polish v1.0.0 - 2026-05-30
   Tujuan: merapikan tampilan global tanpa mengubah logika aplikasi.
   Area: login, dashboard, kartu, form, tabel, dialog, bottom nav,
   mobile/desktop, print, dan aksesibilitas sentuhan.
   =========================================================== */

:root {
  --ns-primary: #1f7a4d;
  --ns-primary-strong: #126b47;
  --ns-primary-soft: #e9f6ef;
  --ns-ink: #123524;
  --ns-muted: #64756b;
  --ns-border: #d7e5dc;
  --ns-border-strong: #bfd3c7;
  --ns-card: #ffffff;
  --ns-page: #f4f8f6;
  --ns-warning: #b45309;
  --ns-danger: #be123c;
  --ns-success: #047857;
  --ns-info: #0369a1;
  --ns-radius-sm: 10px;
  --ns-radius: 16px;
  --ns-radius-lg: 22px;
  --ns-shadow-sm: 0 8px 20px rgba(15, 23, 42, .055);
  --ns-shadow: 0 16px 38px rgba(15, 23, 42, .075);
  --ns-shadow-strong: 0 22px 58px rgba(15, 23, 42, .12);
  --ns-header-h: 62px;
  --ns-bottom-nav-h: 78px;
}

html,
body,
#root {
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(31, 122, 77, .09), transparent 34rem),
    linear-gradient(180deg, #f8fbf9 0%, var(--ns-page) 100%) !important;
  color: var(--foreground, var(--ns-ink));
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.005em;
}

/* Containment hanya dinonaktifkan pada lapisan yang memang harus keluar dari
   batas paint/layout. Jangan mematikan containment pada seluruh dokumen karena
   daftar absensi yang panjang memerlukan optimasi browser. */
header,
nav,
aside,
[role="dialog"],
[data-radix-popper-content-wrapper],
.fixed,
.sticky {
  contain: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Scroll halus, tetapi tidak memaksa semua container menjadi kaku. */
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto,
[data-radix-scroll-area-viewport],
.notesmart-admin-table-scroll,
[class*="table-scroll"] {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(31,122,77,.35) transparent;
}

.overflow-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
[data-radix-scroll-area-viewport]::-webkit-scrollbar,
.notesmart-admin-table-scroll::-webkit-scrollbar,
[class*="table-scroll"]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.overflow-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb,
[data-radix-scroll-area-viewport]::-webkit-scrollbar-thumb,
.notesmart-admin-table-scroll::-webkit-scrollbar-thumb,
[class*="table-scroll"]::-webkit-scrollbar-thumb {
  background: rgba(31,122,77,.28);
  border-radius: 999px;
}

/* ===========================================================
   Layout dasar aplikasi
   =========================================================== */
/* Hanya shell aplikasi utama yang memenuhi viewport. Toast/notification yang
   dirender sebagai <section> langsung di bawah #root tidak boleh memperoleh
   tinggi satu layar karena akan menciptakan ruang kosong vertikal. */
#root > div {
  min-height: 100vh;
  min-height: 100dvh;
}
#root > section[role="status"],
#root > section[aria-live] {
  min-height: 0 !important;
  height: auto;
}

main,
[class*="min-h-screen"] {
  min-width: 0;
}

/* Header/topbar lebih rapi dan tidak memotong dropdown akun. */
header {
  isolation: isolate;
  z-index: 40;
  background: color-mix(in oklab, var(--background, #fff) 92%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: color-mix(in oklab, var(--ns-border) 82%, transparent) !important;
}

header h1,
header h2,
header p,
header span {
  min-width: 0;
}

/* Area halaman umum: beri ruang aman untuk nav bawah dan safe-area HP. */
main[class*="px-"],
div[class*="px-4"][class*="py-4"],
section[class*="px-4"][class*="py-4"] {
  padding-bottom: max(96px, calc(var(--ns-bottom-nav-h) + 28px + env(safe-area-inset-bottom, 0px))) !important;
}

/* Jangan beri margin bawah besar pada setiap nested list; hanya kontainer utama. */
.space-y-4 > *:last-child {
  margin-bottom: 0 !important;
}
#root > div .space-y-4:last-child,
#root > main .space-y-4:last-child {
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

/* ===========================================================
   Kartu, panel, empty/error/loading state
   =========================================================== */
.rounded-xl.border,
.rounded-lg.border,
.rounded-md.border,
[class*="rounded-xl"][class*="border"],
[class*="rounded-lg"][class*="border"],
[role="status"].rounded-xl,
[role="alert"],
.ns-teacher-card,
.ns-teacher-panel {
  border-color: var(--ns-border) !important;
  background: color-mix(in oklab, var(--card, #fff) 96%, white) !important;
  box-shadow: var(--ns-shadow-sm) !important;
}

.rounded-xl.border,
[class*="rounded-xl"][class*="border"],
.ns-teacher-panel {
  border-radius: var(--ns-radius-lg) !important;
}

.rounded-lg.border,
[class*="rounded-lg"][class*="border"],
.ns-teacher-card,
.ns-teacher-row {
  border-radius: var(--ns-radius) !important;
}

.rounded-xl.border:hover,
.rounded-lg.border:hover,
.ns-teacher-card:hover,
.ns-teacher-row:hover {
  box-shadow: var(--ns-shadow) !important;
  border-color: var(--ns-border-strong) !important;
}

[role="status"],
[aria-busy="true"],
.skeleton,
[class*="animate-pulse"] {
  border-radius: var(--ns-radius) !important;
}

[role="alert"] {
  border-left: 4px solid var(--ns-danger) !important;
  background: #fff7f8 !important;
}

/* Judul dan teks kecil lebih terbaca. */
h1,
h2,
h3 {
  color: var(--foreground, var(--ns-ink));
  letter-spacing: -.02em;
}

.text-xs,
.text-\[11px\],
small {
  line-height: 1.45 !important;
}

.text-muted-foreground,
[class*="text-muted"] {
  color: var(--muted-foreground, var(--ns-muted)) !important;
}

/* ===========================================================
   Tombol dan aksi
   =========================================================== */
button,
a[role="button"],
[role="button"] {
  min-height: 40px;
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: -.005em;
}

button:not(:disabled):hover,
a[role="button"]:not(:disabled):hover,
[role="button"]:not(:disabled):hover {
  transform: translateY(-1px);
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58 !important;
}

/* Baris aksi dalam kartu jangan saling tabrakan atau terpotong. */
.rounded-xl.border div:has(> button),
.rounded-lg.border div:has(> button),
section:has(> div button) > div:has(button) {
  min-width: 0;
}

.rounded-xl.border button,
.rounded-lg.border button {
  white-space: normal !important;
  text-overflow: unset !important;
}

/* ===========================================================
   Form, input, select, textarea
   =========================================================== */
input,
select,
textarea,
[role="combobox"],
[data-radix-select-trigger] {
  border-color: var(--ns-border) !important;
  border-radius: 13px !important;
  background-color: var(--background, #fff) !important;
  color: var(--foreground, var(--ns-ink)) !important;
  min-height: 42px;
}

textarea {
  min-height: 92px;
  line-height: 1.55 !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in oklab, var(--muted-foreground, var(--ns-muted)) 68%, white) !important;
}

label {
  color: var(--foreground, var(--ns-ink));
}

[role="combobox"] span,
[data-radix-select-trigger] span {
  color: inherit !important;
  min-width: 0;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Dropdown/popover harus berada di atas header dan bottom nav. */
[data-radix-popper-content-wrapper],
[data-radix-select-content],
[role="menu"],
[role="listbox"] {
  z-index: 99999 !important;
}

[data-radix-select-content],
[role="listbox"],
[role="menu"] {
  border-radius: 16px !important;
  border: 1px solid var(--ns-border) !important;
  box-shadow: var(--ns-shadow-strong) !important;
  overflow: hidden !important;
}

[role="option"],
[role="menuitem"] {
  min-height: 42px !important;
}

/* ===========================================================
   Tabel dan laporan
   =========================================================== */
table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: 13px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef7f2 !important;
  color: var(--ns-ink) !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--ns-border-strong) !important;
}

th,
td {
  vertical-align: middle;
  border-color: var(--ns-border) !important;
}

tbody tr:hover td {
  background: rgba(31, 122, 77, .035) !important;
}

.notesmart-admin-table-scroll,
[class*="table-scroll"],
.rounded-xl.border:has(table),
.rounded-lg.border:has(table) {
  overflow: auto !important;
  max-width: 100%;
}

/* ===========================================================
   Tab, filter, badge status
   =========================================================== */
[role="tablist"] {
  background: rgba(31, 122, 77, .075) !important;
  border: 1px solid rgba(31, 122, 77, .12) !important;
  border-radius: 16px !important;
  padding: 5px !important;
}

[role="tab"] {
  border-radius: 12px !important;
  min-height: 38px !important;
}

[role="tab"][data-state="active"],
[aria-selected="true"] {
  background: #fff !important;
  color: var(--ns-primary-strong) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}

[class*="badge"],
.rounded-full {
  font-weight: 800;
  letter-spacing: -.005em;
}

/* Status absensi agar seragam meskipun class asal berbeda-beda. */
[class*="hadir"],
[class*="success"],
.ns-status-done { color: #166534 !important; }
[class*="sakit"],
[class*="izin"],
[class*="warning"],
.ns-status-draft { color: #92400e !important; }
[class*="alfa"],
[class*="bolos"],
[class*="danger"],
.ns-status-attention { color: #be123c !important; }

/* ===========================================================
   Bottom navigation mobile
   =========================================================== */
nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] {
  left: 10px !important;
  right: 10px !important;
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  min-height: 64px;
  border: 1px solid rgba(31, 122, 77, .16) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18) !important;
  padding: 7px 8px !important;
  z-index: 70 !important;
}

nav[aria-label="Navigasi utama"] a,
nav[aria-label="Navigasi utama"] button {
  min-height: 50px !important;
  border-radius: 16px !important;
  gap: 3px !important;
}

nav[aria-label="Navigasi utama"] svg {
  width: 20px !important;
  height: 20px !important;
}

nav[aria-label="Navigasi utama"] span,
nav[aria-label="Navigasi utama"] p {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* ===========================================================
   Login dan halaman kosong
   =========================================================== */
body:has(input#teacher_code) main,
body:has(input#username) main,
body:has(input#password) main {
  background:
    radial-gradient(circle at 18% 12%, rgba(31,122,77,.16), transparent 22rem),
    radial-gradient(circle at 90% 8%, rgba(3,105,161,.11), transparent 20rem),
    linear-gradient(180deg, #f7fbf8, #eef6f1) !important;
}

body:has(input#teacher_code) form,
body:has(input#username) form,
body:has(input#password) form {
  border-radius: 24px !important;
  box-shadow: var(--ns-shadow-strong) !important;
}

/* ===========================================================
   Dashboard guru khusus
   =========================================================== */
.ns-teacher-dashboard {
  max-width: 1160px;
  margin: 0 auto;
}

.ns-teacher-hero {
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.22), transparent 16rem),
    linear-gradient(135deg, #126b47 0%, #1f7a4d 52%, #2f8f68 100%) !important;
  box-shadow: 0 20px 58px rgba(18,107,71,.24) !important;
}

.ns-teacher-actions a,
.ns-teacher-row {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.ns-teacher-actions a:hover,
.ns-teacher-row:hover {
  transform: translateY(-1px);
}

/* ===========================================================
   Mobile detail polish
   =========================================================== */
@media (max-width: 760px) {
  :root { --ns-bottom-nav-h: 86px; }

  body {
    font-size: 14px;
  }

  h1 { font-size: clamp(1.35rem, 6vw, 1.8rem) !important; }
  h2 { font-size: clamp(1.05rem, 4.7vw, 1.35rem) !important; }

  header {
    min-height: var(--ns-header-h);
  }

  main[class*="px-"],
  div[class*="px-4"][class*="py-4"],
  section[class*="px-4"][class*="py-4"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 14px !important;
  }

  .rounded-xl.border,
  [class*="rounded-xl"][class*="border"] {
    border-radius: 20px !important;
  }

  .rounded-lg.border,
  [class*="rounded-lg"][class*="border"] {
    border-radius: 16px !important;
  }

  input,
  select,
  textarea,
  button,
  [role="button"],
  [role="combobox"] {
    font-size: 16px !important;
  }

  /* Grid kartu otomatis turun ke 1 kolom bila terlalu sempit. */
  .grid[class*="grid-cols-2"],
  .grid[class*="grid-cols-3"],
  .grid[class*="grid-cols-4"] {
    gap: 10px !important;
  }

  /* Baris filter/tombol atas menjadi wrap rapi. */
  .flex:has(> button):not(nav *),
  .flex:has(> [role="combobox"]):not(nav *) {
    flex-wrap: wrap;
  }

  .flex:has(> button) > button:not(nav *),
  .flex:has(> a[role="button"]) > a[role="button"]:not(nav *) {
    flex: 1 1 auto;
  }

  /* Dialog tidak menabrak pinggir layar. */
  [role="dialog"][data-state="open"] {
    width: min(100vw - 18px, 560px) !important;
    max-height: min(88vh, 760px) !important;
    overflow: auto !important;
    border-radius: 22px !important;
  }

  table {
    min-width: 620px;
  }

  /* Tabel presensi/rekap tetap bisa discroll, bukan merusak lebar layar. */
  .rounded-xl.border:has(table),
  .rounded-lg.border:has(table) {
    -webkit-overflow-scrolling: touch;
  }

  .ns-teacher-hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 148px;
    padding: 20px !important;
  }

  .ns-teacher-grid,
  .ns-teacher-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  main[class*="px-"],
  div[class*="px-4"][class*="py-4"],
  section[class*="px-4"][class*="py-4"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ns-teacher-grid,
  .ns-teacher-actions,
  .grid[class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }

  nav[aria-label="Navigasi utama"] span,
  nav[aria-label="Navigasi utama"] p {
    font-size: 10px !important;
  }
}

/* ===========================================================
   Print: laporan bersih, tanpa nav/header fixed/shadow berlebihan
   =========================================================== */
@media print {
  html,
  body,
  #root {
    background: #fff !important;
  }

  nav[aria-label="Navigasi utama"],
  button,
  [role="button"],
  .no-print {
    display: none !important;
  }

  header {
    position: static !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .rounded-xl.border,
  .rounded-lg.border,
  [class*="rounded-xl"][class*="border"],
  [class*="rounded-lg"][class*="border"] {
    box-shadow: none !important;
    border-color: #999 !important;
  }

  table {
    min-width: 0 !important;
    font-size: 11px !important;
  }

  thead th {
    position: static !important;
    background: #f1f5f9 !important;
  }
}


/* V43 Tahap 1 — shell, nav bawah, dan viewport keyboard. */
@media (max-width: 767px) {
  nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"]:has(ul:empty) {
    display: none !important;
  }

  html.ks-manual-form-open nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"],
  html.ks-overlay-open nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"],
  html.ks-virtual-keyboard-open nav[aria-label="Navigasi utama"][class*="fixed"][class*="bottom-0"] {
    display: none !important;
  }

  html.ks-manual-form-open #main-scrollable-area,
  html.ks-overlay-open #main-scrollable-area,
  html.ks-virtual-keyboard-open #main-scrollable-area {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ===== SOURCE: assets/v76/jurnal-mode-colors.css ===== */
/* ===========================================================
   KiSmart - Jurnal Mode Colors Fix v1.0.0
   Tanggal: 2026-05-30

   Perbaikan untuk:
   1. Mode Otomatis: warna hijau/emerald saat aktif
   2. Mode Manual: warna biru/indigo saat aktif
   3. Perbedaan warna yang jelas antara mode aktif dan tidak aktif
   4. Efek sentuhan profesional (150-200ms transition)

   =========================================================== */

:root {
  /* Jurnal mode colors */
  --mode-otomatis: #1f7a4d;
  --mode-otomatis-bg: rgba(31, 122, 77, 0.1);
  --mode-otomatis-bg-active: rgba(31, 122, 77, 0.2);
  --mode-otomatis-border: rgba(31, 122, 77, 0.4);

  --mode-manual: #4f46e5;
  --mode-manual-bg: rgba(79, 70, 229, 0.1);
  --mode-manual-bg-active: rgba(79, 70, 229, 0.2);
  --mode-manual-border: rgba(79, 70, 229, 0.4);

  --mode-inactive: #6b7280;
  --mode-inactive-bg: #f9fafb;
  --mode-inactive-border: #e5e7eb;
}

/* ===========================================================
   1. MODE BUTTON BASE STYLES
   =========================================================== */

/* Base button for mode selection */
button[class*="mode"],
button[data-mode],
.MODE_BUTTON,
.mode-btn,
.mode-selector button,
[role="tab"][data-mode],
.segment-control button,
.toggle-mode button {
  transition: all 150ms ease !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  min-height: 40px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 2px solid transparent !important;
  background: var(--mode-inactive-bg) !important;
  color: var(--mode-inactive) !important;
}

/* ===========================================================
   2. OTOMATIS MODE - Emerald/Green
   =========================================================== */

/* Otomatis active state */
button[class*="mode"]:active,
button[data-mode="otomatis"],
button[data-mode="otomatis"]:active,
.MODE_BUTTON.OTOMATIS.active,
.mode-btn.otomatis.active,
.mode-btn.otomatis[data-state="active"],
button[data-value="OTOMATIS"].active,
button.mode-otomatis.active,
.mode-selector button.otomatis.active,
.segment-control button:first-child.active,
[role="tab"]:contains("Otomatis").active,
button:has(span:contains("Otomatis")).active {
  background: var(--mode-otomatis-bg-active) !important;
  border-color: var(--mode-otomatis) !important;
  color: var(--mode-otomatis) !important;
  box-shadow: 0 2px 8px rgba(31, 122, 77, 0.25) !important;
  transform: scale(0.98) !important;
}

/* Otomatis not active but clickable */
button[class*="mode"]:not([data-mode="manual"]),
button[data-mode="otomatis"]:not(.active),
.mode-btn.otomatis:not(.active) {
  background: var(--mode-otomatis-bg) !important;
  border-color: var(--mode-otomatis-border) !important;
  color: var(--mode-otomatis) !important;
}

button[class*="mode"]:not([data-mode="manual"]):hover {
  background: var(--mode-otomatis-bg-active) !important;
  transform: translateY(-1px) !important;
}

/* ===========================================================
   3. MANUAL MODE - Indigo/Blue
   =========================================================== */

/* Manual active state */
button[class*="mode"]:active,
button[data-mode="manual"],
button[data-mode="manual"]:active,
.MODE_BUTTON.MANUAL.active,
.mode-btn.manual.active,
.mode-btn.manual[data-state="active"],
button[data-value="MANUAL"].active,
button.mode-manual.active,
.mode-selector button.manual.active,
.segment-control button:last-child.active,
[role="tab"]:contains("Manual").active,
button:has(span:contains("Manual")).active {
  background: var(--mode-manual-bg-active) !important;
  border-color: var(--mode-manual) !important;
  color: var(--mode-manual) !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25) !important;
  transform: scale(0.98) !important;
}

/* Manual not active but clickable */
button[data-mode="manual"]:not(.active),
.mode-btn.manual:not(.active) {
  background: var(--mode-manual-bg) !important;
  border-color: var(--mode-manual-border) !important;
  color: var(--mode-manual) !important;
}

button[data-mode="manual"]:not(.active):hover {
  background: var(--mode-manual-bg-active) !important;
  transform: translateY(-1px) !important;
}

/* ===========================================================
   4. RADIO/SELECT MODE SELECTOR
   =========================================================== */

/* Radio group style for mode selection */
[role="radiogroup"] button,
[role="radiogroup"] [role="radio"] {
  transition: all 150ms ease !important;
  cursor: pointer !important;
}

/* Otomatis radio checked */
[role="radiogroup"] [role="radio"][data-checked="true"]:not([data-value="manual"]),
[role="radiogroup"] button[aria-checked="true"]:not([data-value="manual"]),
.radio-option.otomatis.checked {
  background: var(--mode-otomatis-bg-active) !important;
  border-color: var(--mode-otomatis) !important;
  color: var(--mode-otomatis) !important;
}

/* Manual radio checked */
[role="radiogroup"] [role="radio"][data-checked="true"][data-value="manual"],
[role="radiogroup"] button[aria-checked="true"][data-value="manual"],
.radio-option.manual.checked {
  background: var(--mode-manual-bg-active) !important;
  border-color: var(--mode-manual) !important;
  color: var(--mode-manual) !important;
}

/* ===========================================================
   5. BADGE/INDICATOR FOR ACTIVE MODE
   =========================================================== */

/* Badge showing current mode */
[class*="mode-badge"],
[data-mode-badge],
.mode-indicator {
  transition: all 150ms ease !important;
}

/* Badge Otomatis active */
.mode-badge.otomatis,
.mode-indicator.otomatis {
  background: var(--mode-otomatis-bg) !important;
  color: var(--mode-otomatis) !important;
  border-color: var(--mode-otomatis-border) !important;
}

/* Badge Manual active */
.mode-badge.manual,
.mode-indicator.manual {
  background: var(--mode-manual-bg) !important;
  color: var(--mode-manual) !important;
  border-color: var(--mode-manual-border) !important;
}

/* ===========================================================
   6. CONTENT AREA DIFFERENTIATION
   =========================================================== */

/* Otomatis mode content container */
[data-mode="otomatis"] + *,
.mode-otomatis-content,
.otomatis-form {
  border-left: 3px solid var(--mode-otomatis) !important;
  background: linear-gradient(to right, rgba(31, 122, 77, 0.03), transparent) !important;
}

/* Manual mode content container */
[data-mode="manual"] + *,
.mode-manual-content,
.manual-form {
  border-left: 3px solid var(--mode-manual) !important;
  background: linear-gradient(to right, rgba(79, 70, 229, 0.03), transparent) !important;
}

/* ===========================================================
   7. HOVER EFFECTS
   =========================================================== */

button[class*="mode"]:hover,
.mode-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

button[class*="mode"]:active {
  transform: scale(0.98) !important;
}

/* ===========================================================
   8. DESKTOP SIZING
   =========================================================== */
@media (min-width: 1024px) {
  button[class*="mode"],
  .mode-btn {
    padding: 10px 20px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }
}

/* ===========================================================
   9. MOBILE SIZING
   =========================================================== */
@media (max-width: 767px) {
  button[class*="mode"],
  .mode-btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-height: 48px !important;
    /* Prevent double-tap zoom */
    touch-action: manipulation !important;
  }
}

/* ===========================================================
   10. SPECIFIC SELECTORS - Handle different markup
   =========================================================== */

/* Label-based selection */
button:has(span:contains("Otomatis")):not(:has(span:contains("Manual"))) {
  background: var(--mode-otomatis-bg) !important;
  color: var(--mode-otomatis) !important;
}

button:has(span:contains("Manual")):not(:has(span:contains("Otomatis"))) {
  background: var(--mode-manual-bg) !important;
  color: var(--mode-manual) !important;
}

/* Active state via class */
button.mode-active:not([data-mode="manual"]) {
  background: var(--mode-otomatis-bg-active) !important;
  border-color: var(--mode-otomatis) !important;
  color: var(--mode-otomatis) !important;
}

button.mode-active[data-mode="manual"] {
  background: var(--mode-manual-bg-active) !important;
  border-color: var(--mode-manual) !important;
  color: var(--mode-manual) !important;
}

/* ===========================================================
   11. ALTERNATIVE MODE NAMING
   =========================================================== */

/* NORMAL = Otomatis */
button[data-value="NORMAL"],
button[data-mode="normal"],
.mode-btn.normal {
  background: var(--mode-otomatis-bg) !important;
  border-color: var(--mode-otomatis-border) !important;
  color: var(--mode-otomatis) !important;
}

button[data-value="NORMAL"].active,
button[data-mode="normal"].active,
.mode-btn.normal.active {
  background: var(--mode-otomatis-bg-active) !important;
  border-color: var(--mode-otomatis) !important;
  color: var(--mode-otomatis) !important;
}

/* PENGGANTI / PIJAM = Manual */
button[data-value="PENGGANTI"],
button[data-value="PIKET"],
button[data-mode="pengganti"],
button[data-mode="piket"],
.mode-btn.pengganti,
.mode-btn.piket {
  background: var(--mode-manual-bg) !important;
  border-color: var(--mode-manual-border) !important;
  color: var(--mode-manual) !important;
}

button[data-value="PENGGANTI"].active,
button[data-value="PIKET"].active {
  background: var(--mode-manual-bg-active) !important;
  border-color: var(--mode-manual) !important;
  color: var(--mode-manual) !important;
}

/* ===========================================================
   12. TAB STYLE MODE SELECTORS
   =========================================================== */

/* Tab group for mode selection */
[role="tablist"]:has(button:contains("Otomatis")):has(button:contains("Manual")) {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border-radius: 12px !important;
}

/* Tab in mode selector */
[role="tablist"] button:contains("Otomatis"):active {
  background: var(--mode-otomatis-bg-active) !important;
  color: var(--mode-otomatis) !important;
}

[role="tablist"] button:contains("Manual"):active {
  background: var(--mode-manual-bg-active) !important;
  color: var(--mode-manual) !important;
}

/* ===========================================================
   13. TOUCH FEEDBACK - Active/Pressed
   =========================================================== */

/* Touch down effect */
@media (hover: none) {
  button[class*="mode"]:active {
    transform: scale(0.96) !important;
    transition: transform 50ms ease !important;
  }
}

/* ===========================================================
   14. FOCUS STATES (accessibility)
   =========================================================== */

button[class*="mode"]:focus-visible,
.mode-btn:focus-visible {
  outline: 2px solid var(--mode-otomatis) !important;
  outline-offset: 2px !important;
}

button[data-mode="manual"]:focus-visible,
.mode-btn.manual:focus-visible {
  outline-color: var(--mode-manual) !important;
}

/* ===========================================================
   15. PRINT STYLES
   =========================================================== */
@media print {
  button[class*="mode"],
  .mode-btn {
    border: 1px solid #ccc !important;
    background: #f9f9f9 !important;
    color: #333 !important;
    box-shadow: none !important;
  }

  button.mode-active:not([data-mode="manual"]) {
    border-color: #1f7a4d !important;
  }

  button.mode-active[data-mode="manual"] {
    border-color: #4f46e5 !important;
  }
}

/* ===== SOURCE: assets/v76/notesmart-layout-fix-v4.css ===== */
/* ===========================================================
   KiSmart - Layout Fix v4 (2026-05-30)
   - Mode buttons (Otomatis / Manual) → 2-col grid + warna aktif jelas
   - Tombol kehadiran siswa (H S I A B D U) → 7-col grid rapi
   - Bottom nav lebih rapat ke bawah
   - Hilangkan kotak berlapis (double card padding)
   =========================================================== */

/* ---------- Bottom nav: rapat ke bawah ---------- */
nav.fixed.inset-x-0.bottom-0,
.bottom-nav,
[class*="bottom-nav"]{
  padding-bottom: 0 !important;
}
nav.fixed.inset-x-0.bottom-0 > *,
.bottom-nav > *{
  padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
}
nav.fixed.inset-x-0.bottom-0 a,
nav.fixed.inset-x-0.bottom-0 button{
  min-height: 52px !important;
}
/* Ruang aman nav hanya berlaku di HP; app-shell utama telah memiliki padding
   sendiri. Hindari menimpa semua <main> pada desktop dan halaman login. */
:root{
  --bottom-nav-h: 70px;
}
@media (max-width: 767px){
  #main-scrollable-area,
  main[data-page],
  .page-content[data-page]{
    padding-bottom: calc(var(--bottom-nav-h) + 24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---------- Mode selector: grid 2 kolom ---------- */
[data-ns-mode-group="1"]{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 6px !important;
  background: #f3f6f4 !important;
  border-radius: 14px !important;
}
[data-ns-mode-group="1"] > button{
  width: 100% !important;
  margin: 0 !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  background: #ffffff !important;
  color: #4b5563 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 150ms ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
[data-ns-mode-group="1"] > button[data-ns-active="otomatis"]{
  background: #1f7a4d !important;
  border-color: #1f7a4d !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(31,122,77,.28) !important;
}
[data-ns-mode-group="1"] > button[data-ns-active="manual"]{
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(79,70,229,.28) !important;
}

/* ---------- Tombol kehadiran siswa: grid 7 kolom ---------- */
[data-ns-att-group="1"]{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0,1fr)) !important;
  gap: 6px !important;
  margin: 10px 0 !important;
  width: 100% !important;
}
[data-ns-att-group="1"] > button{
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: 1.5px solid #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 120ms ease !important;
}
[data-ns-att-group="1"] > button:not([aria-pressed="true"]):not([data-att-active="1"]):not([data-ns-att-active="1"]){
  background: #ffffff !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
[data-ns-att-group="1"] > button[data-ns-att-active="1"]{
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(0.96) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.18) !important;
}
[data-ns-att-group="1"] > button[data-ns-att-active="1"][data-att="H"],
[data-ns-att-group="1"] > button[data-att-status="H"][aria-pressed="true"],
[data-ns-att-group="1"] > button[data-att-status="H"][data-att-active="1"]{ background:#1f7a4d !important; }
[data-ns-att-group="1"] > button[data-ns-att-active="1"][data-att="S"],
[data-ns-att-group="1"] > button[data-att-status="S"][aria-pressed="true"],
[data-ns-att-group="1"] > button[data-att-status="S"][data-att-active="1"]{ background:#d97706 !important; }
[data-ns-att-group="1"] > button[data-ns-att-active="1"][data-att="I"],
[data-ns-att-group="1"] > button[data-att-status="I"][aria-pressed="true"],
[data-ns-att-group="1"] > button[data-att-status="I"][data-att-active="1"]{ background:#2563eb !important; }
[data-ns-att-group="1"] > button[data-ns-att-active="1"][data-att="A"],
[data-ns-att-group="1"] > button[data-att-status="A"][aria-pressed="true"],
[data-ns-att-group="1"] > button[data-att-status="A"][data-att-active="1"]{ background:#dc2626 !important; }
[data-ns-att-group="1"] > button[data-ns-att-active="1"][data-att="B"],
[data-ns-att-group="1"] > button[data-att-status="B"][aria-pressed="true"],
[data-ns-att-group="1"] > button[data-att-status="B"][data-att-active="1"]{ background:#b91c1c !important; }
[data-ns-att-group="1"] > button[data-ns-att-active="1"][data-att="D"],
[data-ns-att-group="1"] > button[data-att-status="D"][aria-pressed="true"],
[data-ns-att-group="1"] > button[data-att-status="D"][data-att-active="1"]{ background:#7c3aed !important; }
[data-ns-att-group="1"] > button[data-ns-att-active="1"][data-att="U"],
[data-ns-att-group="1"] > button[data-att-status="U"][aria-pressed="true"],
[data-ns-att-group="1"] > button[data-att-status="U"][data-att-active="1"]{ background:#6b7280 !important; }

/* ---------- Hilangkan kotak berlapis: kurangi padding kartu dalam-kartu ---------- */
.rounded-2xl > .rounded-2xl,
.rounded-xl > .rounded-xl,
[class*="rounded-2"] > [class*="rounded-2"],
[class*="border"][class*="rounded"] > [class*="border"][class*="rounded"]{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Lebar konten mobile lebih efisien */
@media (max-width: 767px){
  main, .page-content, [data-page]{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .max-w-3xl, .max-w-2xl, .max-w-xl, .max-w-lg, .container{
    max-width: 100% !important;
  }
  /* Kartu utama: padding lebih kompak */
  .rounded-2xl, .rounded-xl{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ===== SOURCE: assets/v76/notesmart-report-hotfix.css ===== */
/* NoteSmart report polish + blank-state guard, 2026-06-15 */
.notesmart-tahap-9 [class*="laporan"],
.notesmart-tahap-9 .ns-print-table,
.notesmart-tahap-9 table {
  box-sizing: border-box;
}

.notesmart-tahap-9 .ns-print-table,
.notesmart-tahap-9 table.ns-print-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid hsl(var(--border, 214 32% 91%));
  border-radius: 14px;
  background: hsl(var(--card, 0 0% 100%));
}

.notesmart-tahap-9 .ns-print-table thead th,
.notesmart-tahap-9 table.ns-print-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f0f8f3;
  color: #123c27;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
}

.notesmart-tahap-9 .ns-print-table th,
.notesmart-tahap-9 .ns-print-table td {
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  padding: 10px 12px;
  vertical-align: top;
}

.notesmart-tahap-9 .ns-print-table tbody tr:nth-child(even) td {
  background: rgba(31, 122, 77, .035);
}

.notesmart-tahap-9 .ns-print-table tbody tr:hover td {
  background: rgba(31, 122, 77, .08);
}

.notesmart-tahap-9 .overflow-x-auto {
  scrollbar-width: thin;
  border-radius: 14px;
}

.notesmart-tahap-9 .ns-no-print.rounded-lg,
.notesmart-tahap-9 .ns-no-print.rounded-xl,
.notesmart-tahap-9 section.rounded-lg,
.notesmart-tahap-9 section.rounded-xl {
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.notesmart-tahap-9 [class*="border-dashed"][class*="text-center"] {
  background: linear-gradient(180deg, rgba(31,122,77,.055), rgba(255,255,255,.78));
  border-color: rgba(31,122,77,.22) !important;
  color: #506257;
}

@media (max-width: 768px) {
  .notesmart-tahap-9 .ns-print-table th,
  .notesmart-tahap-9 .ns-print-table td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .notesmart-tahap-9 .grid {
    gap: .75rem;
  }
}

@media print {
  .notesmart-tahap-9 .ns-no-print { display: none !important; }
  .notesmart-tahap-9 .ns-print-table {
    border-radius: 0;
    box-shadow: none;
    font-size: 11px;
  }
  .notesmart-tahap-9 .ns-print-table thead th {
    position: static;
    background: #eef5ef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===== SOURCE: assets/v76/notesmart-visual-polish-v3.css ===== */
/* KiSmart / NoteSmart visual polish v3 - 2026-06-15
   Fokus: merapikan login, tab Guru/Admin, input tidak tertutup ikon,
   tinggi halaman login tidak mubazir, dan konten admin tidak tertutup bottom nav. */

:root{
  --ks-green:#087a43;
  --ks-green-dark:#066a39;
  --ks-bg:#f6fbf8;
  --ks-border:#dcebe3;
  --ks-text:#101815;
  --ks-muted:#64746c;
}

html,body,#root{
  width:100%;
  min-height:100%;
  background:var(--ks-bg);
}

body{
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
body:has(#teacher_code),
body:has(#username),
body:has(#password){
  background:linear-gradient(180deg,#078246 0%,#079151 48%,#f6fbf8 48%,#f6fbf8 100%) !important;
}

/* Login container: jangan terlalu tinggi dan jangan menyisakan ruang kosong besar. */
#root > div:has(#teacher_code),
#root > div:has(#username),
#root > div:has(#password){
  min-height:100dvh !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:clamp(1.25rem,4vh,2.5rem) 1.05rem 2.5rem !important;
  background:linear-gradient(180deg,#078246 0%,#079151 54%,#f6fbf8 54%,#f6fbf8 100%) !important;
}

#root > div:has(#teacher_code) > div,
#root > div:has(#username) > div,
#root > div:has(#password) > div{
  width:100% !important;
  max-width:430px !important;
}

/* Card login dibuat lebih kompak dan profesional. */
#root div:has(> form #teacher_code),
#root div:has(> form #username),
#root div:has(> form #password){
  border-radius:24px !important;
  border:1px solid rgba(220,235,227,.95) !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 22px 55px rgba(7,70,43,.18) !important;
  padding:1.05rem !important;
}

@media (min-width:430px){
  #root div:has(> form #teacher_code),
  #root div:has(> form #username),
  #root div:has(> form #password){
    padding:1.25rem !important;
  }
}

/* Segmented Guru/Admin harus 1 baris, bukan bersusun. */
#root div:has(> form #teacher_code) > .mb-4.grid,
#root div:has(> form #username) > .mb-4.grid,
#root div:has(> form #password) > .mb-4.grid,
#root div:has(> form) .mb-4.grid.grid-cols-2{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:.45rem !important;
  padding:.38rem !important;
  border-radius:18px !important;
  background:#edf5ef !important;
  width:100% !important;
}

#root div:has(> form #teacher_code) > .mb-4.grid > button,
#root div:has(> form #username) > .mb-4.grid > button,
#root div:has(> form #password) > .mb-4.grid > button,
#root div:has(> form) .mb-4.grid.grid-cols-2 > button{
  width:100% !important;
  min-height:46px !important;
  height:46px !important;
  border:0 !important;
  border-radius:14px !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 .75rem !important;
  font-weight:800 !important;
  font-size:.95rem !important;
  line-height:1 !important;
  transform:none !important;
}

/* Login labels lebih jelas. */
label[for="teacher_code"],
label[for="username"],
label[for="password"]{
  display:block !important;
  margin-bottom:.45rem !important;
  color:var(--ks-text) !important;
  font-size:.92rem !important;
  font-weight:800 !important;
}

/* Input login: padding kiri diperbesar agar teks tidak tertutup ikon. */
#teacher_code,
#username,
#password{
  width:100% !important;
  height:54px !important;
  min-height:54px !important;
  border-radius:16px !important;
  border:1px solid var(--ks-border) !important;
  background:#fff !important;
  color:var(--ks-text) !important;
  font-size:16px !important;
  line-height:54px !important;
  padding-left:3.15rem !important;
  padding-right:1rem !important;
  box-shadow:0 6px 18px rgba(15,23,42,.04) inset, 0 1px 2px rgba(15,23,42,.04) !important;
}

#password{
  padding-right:3.5rem !important;
}

#teacher_code::placeholder,
#username::placeholder,
#password::placeholder{
  color:#89958f !important;
  opacity:1 !important;
}

#teacher_code:focus,
#username:focus,
#password:focus{
  outline:none !important;
  border-color:var(--ks-green) !important;
  box-shadow:0 0 0 4px rgba(8,122,67,.12), 0 8px 20px rgba(15,23,42,.06) !important;
}

/* Ikon kiri input: kecil, tidak menimpa teks. */
div.relative:has(> #teacher_code) > span[aria-hidden="true"],
div.relative:has(> #username) > span[aria-hidden="true"],
div.relative:has(> #password) > span[aria-hidden="true"]{
  position:absolute !important;
  left:1rem !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:1.25rem !important;
  height:1.25rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#6f7d76 !important;
  z-index:2 !important;
  pointer-events:none !important;
}

div.relative:has(> #teacher_code) > span[aria-hidden="true"] svg,
div.relative:has(> #username) > span[aria-hidden="true"] svg,
div.relative:has(> #password) > span[aria-hidden="true"] svg{
  width:1.15rem !important;
  height:1.15rem !important;
  stroke-width:2.2 !important;
}

/* Tombol mata password jangan menjadi bubble besar. */
div.relative:has(> #password) > span.absolute{
  right:.65rem !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:3 !important;
}

div.relative:has(> #password) > span.absolute > button,
div.relative:has(> #password) button[type="button"]{
  width:2.25rem !important;
  height:2.25rem !important;
  min-width:2.25rem !important;
  min-height:2.25rem !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#6f7d76 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
}

div.relative:has(> #password) button[type="button"]:hover,
div.relative:has(> #password) button[type="button"]:active{
  background:#edf5ef !important;
  transform:none !important;
}

form:has(#teacher_code),
form:has(#username),
form:has(#password){
  gap:.95rem !important;
}

form:has(#teacher_code) button[type="submit"],
form:has(#username) button[type="submit"],
form:has(#password) button[type="submit"]{
  width:100% !important;
  min-height:54px !important;
  border-radius:16px !important;
  background:var(--ks-green) !important;
  color:#fff !important;
  border:0 !important;
  font-size:1rem !important;
  font-weight:850 !important;
  box-shadow:0 14px 26px rgba(8,122,67,.20) !important;
}

form:has(#teacher_code) button[type="submit"]:hover,
form:has(#username) button[type="submit"]:hover,
form:has(#password) button[type="submit"]:hover{
  background:var(--ks-green-dark) !important;
  transform:translateY(-1px) !important;
}

/* Link kembali login tidak perlu memberi ruang kosong besar. */
#root > div:has(#teacher_code) p.mt-4,
#root > div:has(#username) p.mt-4,
#root > div:has(#password) p.mt-4{
  margin-top:.85rem !important;
}

/* =========================================================
   APP SHELL / ADMIN PAGES
   ========================================================= */
/* Konten tidak tertutup bottom navigation di webview/HP. */
main,
.app-shell,
.page-shell,
[class*="pb-safe"],
[class*="safe-bottom"]{
  padding-bottom:calc(108px + env(safe-area-inset-bottom,0px)) !important;
}

@media (max-width:768px){
  /* Jangan memaksa SEMUA grid 2 kolom menjadi 1 kolom. Tab kecil dan kontrol pilihan tetap 2 kolom. */
  .grid.grid-cols-2:not(form .grid):not(.notesmart-admin-data-table):not([class*="sm:grid-cols"]){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* Card menu admin lebih rapat dan tidak tertutup navbar. */
  a.rounded-2xl,
  button.rounded-2xl,
  div.rounded-2xl{
    max-width:100% !important;
  }
}

/* Header webview / app: konten jangan terlalu menempel. */
#root .space-y-6,
#root .space-y-5{
  scroll-margin-bottom:120px;
}

/* Kartu dashboard/hotfix tidak terlalu besar di HP. */
@media (max-width:480px){
  #root section,
  #root article{
    max-width:100%;
  }

  #root .text-3xl{font-size:1.7rem !important;line-height:1.18 !important;}
  #root .text-2xl{font-size:1.35rem !important;line-height:1.25 !important;}
}

/* ===== SOURCE: assets/v76/kismart-production-audit.css ===== */
/* KiSmart — consolidated production quality layer, 2026-07-18 */
:root{
  --ks-green:#197447;
  --ks-green-dark:#105d37;
  --ks-green-soft:#eaf6ef;
  --ks-ink:#173526;
  --ks-muted:#61756a;
  --ks-border:#d8e6dd;
  --ks-bg:#f5faf7;
  --ks-danger:#b42318;
  --ks-shadow:0 10px 30px rgba(22,74,47,.08);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-width:320px;overflow-x:hidden;background:var(--ks-bg);color:var(--ks-ink);text-rendering:optimizeLegibility}
img,svg,video,canvas{max-width:100%;height:auto}
button,a,input,select,textarea{touch-action:manipulation}
button,[role="button"],a{ -webkit-tap-highlight-color:transparent }
button:not(:disabled),[role="button"]:not([aria-disabled="true"]),a[href]{cursor:pointer}
button:disabled,[aria-disabled="true"]{cursor:not-allowed;opacity:.56}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(25,116,71,.28)!important;outline-offset:2px!important}
:where(input,select,textarea){max-width:100%;border-color:var(--ks-border)}
:where(input,select,textarea):focus{border-color:var(--ks-green)}
:where(table){border-collapse:separate;border-spacing:0}
.overflow-x-auto,[data-radix-scroll-area-viewport]{overscroll-behavior-inline:contain;scrollbar-gutter:stable}
.overflow-x-auto:focus-visible,[data-radix-scroll-area-viewport]:focus-visible{outline:2px solid rgba(25,116,71,.24);outline-offset:2px;border-radius:12px}
thead th{position:sticky;top:0;z-index:2;background:#f2f7f4}
tbody tr{transition:background-color .15s ease}
tbody tr:hover{background:rgba(234,246,239,.55)}
[role="dialog"]{max-width:min(94vw,760px)!important;max-height:min(90dvh,900px)!important;overflow:auto!important;overscroll-behavior:contain}
[data-radix-popper-content-wrapper]{max-width:calc(100vw - 16px)!important}
.ks-network-status{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:9999;max-width:calc(100vw - 28px);transform:translate(-50%,16px);opacity:0;pointer-events:none;border-radius:999px;padding:9px 14px;font-size:.78rem;font-weight:750;box-shadow:var(--ks-shadow);transition:.2s ease}
.ks-network-status.is-offline,.ks-network-status.is-online{transform:translate(-50%,0);opacity:1}
.ks-network-status.is-offline{background:#7a271a;color:#fff}
.ks-network-status.is-online{background:#155eef;color:#fff}
html.ks-login-page nav[aria-label="Navigasi utama"]{display:none!important}
html.ks-login-page body{background:linear-gradient(180deg,#087a45 0 45%,#f5faf7 45% 100%)}
.ks-teacher-pin-field label{display:block;color:var(--ks-ink);font-weight:750;margin-bottom:.4rem}
.ks-teacher-pin-field input{min-height:52px!important;border-radius:15px!important;background:#fff!important;font-size:16px!important}
#root main{min-width:0}
#root main :where(.rounded-xl,.rounded-2xl)[class*="border"]{border-color:var(--ks-border)}
#root main :where(.rounded-xl,.rounded-2xl)[class*="shadow"]{box-shadow:var(--ks-shadow)}
nav[aria-label="Navigasi utama"]{padding-bottom:max(.35rem,env(safe-area-inset-bottom,0px));backdrop-filter:saturate(135%) blur(14px)}
nav[aria-label="Navigasi utama"] a,nav[aria-label="Navigasi utama"] button{min-height:56px;min-width:52px}
@media (max-width:767px){
  body{font-size:15px}
  :where(input,select,textarea){font-size:16px!important}
  #root main{padding-left:max(.85rem,env(safe-area-inset-left,0px))!important;padding-right:max(.85rem,env(safe-area-inset-right,0px))!important}
  html.ks-app-page #root main{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important}
  #root h1{font-size:clamp(1.4rem,6vw,1.8rem);line-height:1.18}
  #root h2{font-size:clamp(1.15rem,5vw,1.42rem);line-height:1.25}
  #root .grid{min-width:0}
  #root button{min-height:42px}
  [role="dialog"]{width:calc(100vw - 20px)!important;border-radius:18px!important}
  table{min-width:max-content}
  th,td{white-space:nowrap}
  td :where(button,a){white-space:normal}
}
@media (min-width:768px){
  html.ks-app-page #root main{padding-bottom:2rem!important}
  .ks-network-status{bottom:24px}
  nav[aria-label="Navigasi utama"][class*="bottom-0"]{display:none!important}
}
@media (min-width:1280px){
  #root main>div{max-width:1440px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
@media print{
  nav,aside,header button,.no-print,.ks-network-status{display:none!important}
  body,#root,main{background:#fff!important;color:#000!important;overflow:visible!important}
  #root main{padding:0!important;margin:0!important;max-width:none!important}
  [class*="shadow"]{box-shadow:none!important}
  [class*="border"]{border-color:#aaa!important}
}

/* ===== SOURCE: assets/v76/notesmart-desktop-stability-v5.css ===== */
/* ================================================================
   KiSmart / NoteSmart Desktop Stability v5 — 2026-07-29
   Perbaikan terukur untuk shell, scroll, laporan, roster, dan tipografi.
   Tidak mengubah logika aplikasi atau komponen React.
   ================================================================ */
:root{
  --ks-content-max: 1440px;
  --ks-content-comfort: 1180px;
  --ks-page-gap: clamp(14px, 1.6vw, 26px);
  --ks-card-radius: 16px;
  --ks-soft-shadow: 0 8px 24px rgba(15, 23, 42, .055);
  --ks-hover-shadow: 0 14px 34px rgba(15, 23, 42, .09);
}

html, body, #root{
  width:100%;
  min-width:0;
  height:100%;
  min-height:100%;
}
html.ks-app-shell, html.ks-app-shell body{ overflow:hidden !important; }
html:not(.ks-app-shell) body{ overflow:auto; }

/* Shell React: sidebar/topbar tetap, isi halaman menjadi satu-satunya area scroll. */
html.ks-app-shell #root > div.flex.h-screen{
  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}
html.ks-app-shell #root > div.flex.h-screen > div.flex.min-w-0.flex-1.flex-col{
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}
#main-scrollable-area{
  display:block !important;
  flex:1 1 0% !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
#main-scrollable-area:focus-visible{
  outline:2px solid color-mix(in oklab, var(--primary, #1f7a4d) 65%, transparent);
  outline-offset:-2px;
}

/* Jangan paksa semua grid satu kolom menjadi empat kolom. */
@media (min-width:1024px){
  #main-scrollable-area > *{
    width:min(100%, var(--ks-content-max));
    margin-inline:auto;
  }
  #main-scrollable-area > .px-4,
  #main-scrollable-area > .sm\:px-6{
    padding-left:var(--ks-page-gap) !important;
    padding-right:var(--ks-page-gap) !important;
  }
  #main-scrollable-area .grid.grid-cols-1{
    grid-template-columns:minmax(0,1fr);
  }
  #main-scrollable-area .grid.grid-cols-1.sm\:grid-cols-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (min-width:1280px){
  #main-scrollable-area .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3{
    grid-template-columns:repeat(3,minmax(260px,1fr));
  }
}

/* Route-based content widths, injected by notesmart-stability-runtime-v5.js. */
@media (min-width:1024px){
  html[data-ks-route="dashboard"] #main-scrollable-area > *,
  html[data-ks-route="roster"] #main-scrollable-area > *,
  html[data-ks-route="laporan"] #main-scrollable-area > *,
  html[data-ks-route="laporan-pusat"] #main-scrollable-area > *{
    max-width:var(--ks-content-max) !important;
  }
  html[data-ks-route="jurnal"] #main-scrollable-area > *{
    max-width:var(--ks-content-comfort) !important;
  }
  html[data-ks-route="laporan"] #main-scrollable-area > div.space-y-4,
  html[data-ks-route="dashboard"] #main-scrollable-area > div.space-y-5,
  html[data-ks-route="jurnal"] #main-scrollable-area > div{
    width:100% !important;
  }
}

/* Pusat laporan: kartu tetap terbaca dan tidak pecah huruf demi huruf. */
html[data-ks-route="laporan"] #main-scrollable-area ul.ks-report-grid,
html[data-ks-route="laporan"] #main-scrollable-area ul.grid.grid-cols-1.gap-3.sm\:grid-cols-2.xl\:grid-cols-3{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%, 290px),1fr)) !important;
  gap:16px !important;
  align-items:stretch;
}
html[data-ks-route="laporan"] .ks-report-card,
html[data-ks-route="laporan"] ul.grid.grid-cols-1.gap-3.sm\:grid-cols-2.xl\:grid-cols-3 > li > button{
  min-width:0 !important;
  min-height:220px;
  padding:18px !important;
  border-radius:var(--ks-card-radius) !important;
  overflow:visible !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  box-shadow:var(--ks-soft-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
}
html[data-ks-route="laporan"] .ks-report-card:hover,
html[data-ks-route="laporan"] ul.grid.grid-cols-1.gap-3.sm\:grid-cols-2.xl\:grid-cols-3 > li > button:hover{
  transform:translateY(-2px);
  box-shadow:var(--ks-hover-shadow);
}
html[data-ks-route="laporan"] .ks-report-card p,
html[data-ks-route="laporan"] .ks-report-card span,
html[data-ks-route="laporan"] ul.grid.grid-cols-1.gap-3.sm\:grid-cols-2.xl\:grid-cols-3 p,
html[data-ks-route="laporan"] ul.grid.grid-cols-1.gap-3.sm\:grid-cols-2.xl\:grid-cols-3 span{
  min-width:0;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
}
html[data-ks-route="laporan"] .ks-report-card > div:first-child > div{
  min-width:0 !important;
}

/* Tabel roster/laporan: scroll horizontal pada wrapper, bukan memampatkan kolom. */
#main-scrollable-area .overflow-x-auto:has(table),
#main-scrollable-area .table-wrapper,
#main-scrollable-area .table-container{
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:visible !important;
  border-radius:14px;
  scrollbar-gutter:stable;
}
html[data-ks-route="roster"] #main-scrollable-area table,
html[data-ks-route="laporan"] #main-scrollable-area table{
  width:max-content !important;
  min-width:100% !important;
  table-layout:auto !important;
}
html[data-ks-route="roster"] #main-scrollable-area th,
html[data-ks-route="roster"] #main-scrollable-area td,
html[data-ks-route="laporan"] #main-scrollable-area th,
html[data-ks-route="laporan"] #main-scrollable-area td{
  max-width:none !important;
  padding:10px 12px !important;
  white-space:normal;
  word-break:normal !important;
  overflow-wrap:break-word;
}
html[data-ks-route="roster"] #main-scrollable-area thead th,
html[data-ks-route="laporan"] #main-scrollable-area thead th{
  position:sticky;
  top:0;
  z-index:4;
  white-space:nowrap;
}

/* Form tidak dipaksa max-width secara global. */
#main-scrollable-area form{ max-width:none !important; }
#main-scrollable-area label{ display:initial; margin-bottom:initial; }

/* Kartu hanya diberi efek, tanpa menimpa padding utilitas komponen. */
#main-scrollable-area .rounded-xl.border,
#main-scrollable-area .rounded-2xl.border{
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (hover:hover){
  #main-scrollable-area .rounded-xl.border:hover,
  #main-scrollable-area .rounded-2xl.border:hover{
    border-color:color-mix(in oklab, var(--primary, #1f7a4d) 28%, var(--border, #d7e5dc));
  }
}

/* Error state tetap dapat di-scroll pada layar pendek. */
#main-scrollable-area > .min-h-screen,
#main-scrollable-area > .min-h-\[80vh\],
#main-scrollable-area > .min-h-\[60vh\]{
  min-height:calc(100dvh - 64px) !important;
  height:auto !important;
}

@media (max-width:1023px){
  #main-scrollable-area{
    padding-bottom:max(84px, calc(68px + env(safe-area-inset-bottom))) !important;
  }
  html[data-ks-route="laporan"] #main-scrollable-area ul.ks-report-grid,
  html[data-ks-route="laporan"] #main-scrollable-area ul.grid.grid-cols-1.gap-3.sm\:grid-cols-2.xl\:grid-cols-3{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) !important;
  }
  html[data-ks-route="laporan"] .ks-report-card,
  html[data-ks-route="laporan"] ul.grid.grid-cols-1.gap-3.sm\:grid-cols-2.xl\:grid-cols-3 > li > button{
    min-height:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  #main-scrollable-area{scroll-behavior:auto;}
  html[data-ks-route="laporan"] .ks-report-card,
  html[data-ks-route="laporan"] ul.grid.grid-cols-1.gap-3.sm\:grid-cols-2.xl\:grid-cols-3 > li > button{
    transition:none !important;
  }
}

@media print{
  html,body,#root{height:auto !important;overflow:visible !important;}
  #main-scrollable-area{height:auto !important;overflow:visible !important;}
  #main-scrollable-area > *{max-width:none !important;width:100% !important;}
}

/* ===== SOURCE: assets/v76/kismart-login-fix-v7.css ===== */
/* KiSmart login repair v6 — 2026-07-29
   Memperbaiki login guru/admin, posisi ikon, tombol mata, dan tampilan HP. */

html.ks-login-page,
html.ks-login-page body,
html.ks-login-page #root{
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  background:#f4faf6;
}

html.ks-login-page body{
  overscroll-behavior-y:auto;
}

#root > .ks-login-shell{
  width:100%;
  min-height:100vh!important;
  min-height:100svh!important;
  padding:clamp(1rem,3.5vh,2.25rem) max(1rem,env(safe-area-inset-left,0px)) max(1.5rem,env(safe-area-inset-bottom,0px))!important;
  align-items:center!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(255,255,255,.18),transparent 17rem),
    radial-gradient(circle at 86% 16%,rgba(255,255,255,.10),transparent 15rem),
    linear-gradient(155deg,#087a43 0%,#079153 48%,#f5faf7 48.2%,#eef7f1 100%)!important;
  overflow:visible!important;
}

.ks-login-container{
  width:min(100%,430px)!important;
  margin:0 auto;
}

.ks-login-brand{
  margin-bottom:1rem!important;
}

.ks-login-brand h1{
  margin:0;
  color:#fff!important;
  font-size:clamp(1.85rem,7vw,2.25rem)!important;
  line-height:1.12!important;
  letter-spacing:-.025em;
  text-shadow:0 2px 10px rgba(0,0,0,.08);
}

.ks-login-brand p{
  margin:.35rem 0 0;
  color:rgba(255,255,255,.94)!important;
  font-size:clamp(.95rem,4vw,1.08rem)!important;
}

.ks-login-panel{
  width:100%;
  padding:clamp(1rem,4vw,1.3rem)!important;
  border:1px solid rgba(216,230,221,.94)!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 22px 58px rgba(7,78,44,.21)!important;
  backdrop-filter:blur(12px);
}

.ks-login-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  gap:.4rem!important;
  margin-bottom:1.15rem!important;
  padding:.38rem!important;
  border-radius:18px!important;
  background:#edf5ef!important;
}

.ks-login-tab{
  width:100%!important;
  min-height:48px!important;
  height:48px!important;
  padding:.65rem .75rem!important;
  border:0!important;
  border-radius:14px!important;
  font-size:1rem!important;
  line-height:1!important;
  transform:none!important;
}

.ks-login-tab[aria-selected="true"]{
  color:#173526!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(15,23,42,.07)!important;
}

.ks-login-form{
  display:flex!important;
  flex-direction:column!important;
  gap:1rem!important;
}

.ks-login-field{
  width:100%;
  margin:0!important;
}

.ks-login-label,
label[for="teacher_code"],
label[for="teacher_pin"],
label[for="username"],
label[for="password"]{
  display:block!important;
  margin:0!important;
  color:#15271e!important;
  font-size:.94rem!important;
  font-weight:800!important;
  line-height:1.3!important;
}

.ks-login-hint{
  color:#66776e!important;
  font-size:.72rem!important;
  line-height:1.25!important;
  text-align:right;
}

.ks-login-input-wrap{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
}

#teacher_code.ks-login-input,
#teacher_pin.ks-login-input,
#username.ks-login-input,
#password.ks-login-input{
  display:block!important;
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  padding-top:.75rem!important;
  padding-bottom:.75rem!important;
  padding-left:3.15rem!important;
  border:1px solid #d7e4dc!important;
  border-radius:17px!important;
  background:#fff!important;
  color:#14251c!important;
  font-size:16px!important;
  font-weight:500!important;
  line-height:1.35!important;
  letter-spacing:normal!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03),0 4px 14px rgba(15,23,42,.035)!important;
  appearance:none;
  -webkit-appearance:none;
}

#teacher_code.ks-login-input,
#username.ks-login-input{
  padding-right:1rem!important;
}

#teacher_pin.ks-login-input,
#password.ks-login-input{
  padding-right:3.75rem!important;
}

#teacher_code.ks-login-input::placeholder,
#teacher_pin.ks-login-input::placeholder,
#username.ks-login-input::placeholder,
#password.ks-login-input::placeholder{
  color:#849188!important;
  opacity:1!important;
  font-weight:400!important;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#teacher_code.ks-login-input:focus,
#teacher_pin.ks-login-input:focus,
#username.ks-login-input:focus,
#password.ks-login-input:focus{
  outline:none!important;
  border-color:#0b8249!important;
  box-shadow:0 0 0 4px rgba(11,130,73,.13),0 7px 20px rgba(15,23,42,.055)!important;
}

.ks-login-leading-icon{
  position:absolute!important;
  left:1rem!important;
  top:50%!important;
  z-index:2!important;
  display:flex!important;
  width:1.35rem!important;
  height:1.35rem!important;
  align-items:center!important;
  justify-content:center!important;
  color:#718178!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
}

.ks-login-leading-icon svg{
  width:1.22rem!important;
  height:1.22rem!important;
  max-width:none!important;
}

.ks-login-trailing{
  position:absolute!important;
  right:.42rem!important;
  top:50%!important;
  z-index:4!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translateY(-50%)!important;
}

.ks-password-toggle{
  display:inline-flex!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#687970!important;
  box-shadow:none!important;
  line-height:1!important;
  transform:none!important;
}

.ks-password-toggle:hover,
.ks-password-toggle:active{
  background:#edf5ef!important;
  color:#12663f!important;
  transform:none!important;
}

.ks-password-toggle svg{
  display:block!important;
  width:1.25rem!important;
  height:1.25rem!important;
  margin:0!important;
  max-width:none!important;
}

.ks-login-submit{
  width:100%!important;
  min-height:54px!important;
  height:54px!important;
  margin-top:.15rem!important;
  border:0!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#137a49,#1d8250)!important;
  color:#fff!important;
  font-size:1.04rem!important;
  font-weight:850!important;
  box-shadow:0 14px 27px rgba(13,115,67,.22)!important;
}

.ks-login-submit:hover:not(:disabled){
  background:linear-gradient(135deg,#0f6d40,#176f45)!important;
  transform:translateY(-1px)!important;
}

.ks-login-session-note{
  margin-top:1rem!important;
  color:#617168!important;
  font-size:.76rem!important;
  line-height:1.55!important;
}

@media (max-width:520px){
  #root > .ks-login-shell{
    min-height:100svh!important;
    align-items:flex-start!important;
    padding-top:max(1rem,env(safe-area-inset-top,0px))!important;
    padding-bottom:max(1.5rem,env(safe-area-inset-bottom,0px))!important;
    background:
      radial-gradient(circle at 16% 5%,rgba(255,255,255,.14),transparent 12rem),
      linear-gradient(180deg,#087f46 0%,#079151 43%,#f3faf5 43.2%,#eef7f1 100%)!important;
  }

  .ks-login-brand{
    margin-bottom:.9rem!important;
  }

  .ks-login-brand > div{
    width:54px!important;
    height:54px!important;
    margin-bottom:.65rem!important;
  }

  .ks-login-panel{
    padding:1rem!important;
    border-radius:24px!important;
  }

  .ks-login-form{
    gap:.9rem!important;
  }

  .ks-login-hint{
    max-width:58%;
  }
}

@media (max-width:370px){
  #root > .ks-login-shell{
    padding-left:.7rem!important;
    padding-right:.7rem!important;
  }

  .ks-login-panel{
    padding:.85rem!important;
  }

  .ks-login-tab{
    font-size:.93rem!important;
  }

  .ks-login-hint{
    display:none;
  }

  #teacher_code.ks-login-input,
  #teacher_pin.ks-login-input,
  #username.ks-login-input,
  #password.ks-login-input{
    padding-left:2.9rem!important;
  }
}

@media (min-width:768px){
  #root > .ks-login-shell{
    padding-bottom:2.25rem!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .ks-login-shell *,
  .ks-login-shell *::before,
  .ks-login-shell *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}

/* Override spesifik terhadap aturan visual lama yang memakai :has(#password). */
div.ks-login-input-wrap:has(> #password) > span.ks-login-trailing,
div.ks-login-input-wrap:has(> #teacher_pin) > span.ks-login-trailing{
  right:.42rem!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}

div.ks-login-input-wrap:has(> #password) button.ks-password-toggle,
div.ks-login-input-wrap:has(> #teacher_pin) button.ks-password-toggle{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:12px!important;
  background:transparent!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Tailwind modern memakai properti `translate`; reset agar ikon tidak bergeser dua kali. */
.ks-login-leading-icon,
.ks-login-trailing{
  translate:none!important;
}

div.ks-login-input-wrap.relative:has(> #password) > span.ks-login-trailing.absolute,
div.ks-login-input-wrap.relative:has(> #teacher_pin) > span.ks-login-trailing.absolute{
  right:.42rem!important;
  top:50%!important;
  translate:none!important;
  transform:translateY(-50%)!important;
}

div.ks-login-input-wrap.relative:has(> #password) > span.ks-login-trailing.absolute > button.ks-password-toggle,
div.ks-login-input-wrap.relative:has(> #teacher_pin) > span.ks-login-trailing.absolute > button.ks-password-toggle{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:12px!important;
  translate:none!important;
  transform:none!important;
}

.ks-login-field-head{
  display:flex!important;
  width:100%;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:.25rem .75rem!important;
}

@media (max-width:520px){
  .ks-login-field-head{
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:.18rem!important;
  }
  .ks-login-hint{
    width:100%;
    max-width:100%!important;
    text-align:left!important;
  }
}

/* Netralisasi aturan header/section umum agar identitas login tetap di atas latar hijau. */
.ks-login-container,
.ks-login-brand{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.ks-login-brand{
  padding:0!important;
  border-radius:0!important;
}

/* V7 login alignment hotfix */
.ks-login-input-wrap{
  position:relative!important;
}
#teacher_pin.ks-login-input,
#password.ks-login-input{
  padding-right:4.35rem!important;
}
.ks-login-trailing,
.ks-login-input-wrap > .ks-login-trailing,
.ks-login-input-wrap > span.ks-login-trailing{
  position:absolute!important;
  top:0!important;
  right:.72rem!important;
  bottom:0!important;
  z-index:5!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  height:100%!important;
  margin:0!important;
}
.ks-password-toggle,
.ks-login-trailing .ks-password-toggle{
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:0!important;
  margin:0!important;
}
.ks-password-toggle svg,
.ks-login-trailing .ks-password-toggle svg{
  width:1.28rem!important;
  height:1.28rem!important;
  display:block!important;
  flex:none!important;
}
@media (max-width: 520px){
  #teacher_code.ks-login-input,
  #teacher_pin.ks-login-input,
  #username.ks-login-input,
  #password.ks-login-input{
    height:56px!important;
    min-height:56px!important;
    font-size:16px!important;
  }
  #teacher_pin.ks-login-input,
  #password.ks-login-input{
    padding-right:4.5rem!important;
  }
  .ks-login-trailing,
  .ks-login-input-wrap > .ks-login-trailing,
  .ks-login-input-wrap > span.ks-login-trailing{
    right:.65rem!important;
  }
}

/* KiSmart login v7 — posisi tanda mata konsisten pada markup baru dan cache lama. */
#password,
#teacher_pin {
  padding-right: 4.25rem !important;
}

#password + span,
#teacher_pin + span,
.ks-login-input-wrap > .ks-login-trailing {
  position: absolute !important;
  top: 50% !important;
  right: .5rem !important;
  bottom: auto !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 8 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
}

#password + span > button,
#teacher_pin + span > button,
.ks-login-input-wrap > .ks-login-trailing > .ks-password-toggle {
  position: static !important;
  inset: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

#password + span svg,
#teacher_pin + span svg,
.ks-password-toggle svg {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 480px) {
  #password + span,
  #teacher_pin + span,
  .ks-login-input-wrap > .ks-login-trailing {
    right: .4rem !important;
  }
}

/* ===== SOURCE: assets/v76/kismart-login-alignment-v8.css ===== */
/* KiSmart login V8 — deterministic vertical alignment for all input icons.
   No top:50% / translateY centering is used, preventing double translation
   from utility classes or cached Tailwind rules. */
.ks-login-input-wrap {
  position: relative !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  line-height: normal !important;
}

#teacher_code.ks-login-input,
#teacher_pin.ks-login-input,
#username.ks-login-input,
#password.ks-login-input {
  position: relative !important;
  z-index: 1 !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
}

.ks-login-leading-icon,
.ks-login-input-wrap > .ks-login-leading-icon,
.ks-login-input-wrap > span.ks-login-leading-icon {
  position: absolute !important;
  inset-block: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 1rem !important;
  right: auto !important;
  z-index: 3 !important;
  display: flex !important;
  width: 1.35rem !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  transform: none !important;
  translate: none !important;
  pointer-events: none !important;
}

.ks-login-leading-icon svg,
.ks-login-input-wrap > .ks-login-leading-icon svg {
  position: static !important;
  display: block !important;
  width: 1.22rem !important;
  height: 1.22rem !important;
  min-width: 1.22rem !important;
  min-height: 1.22rem !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  transform: none !important;
  translate: none !important;
}

.ks-login-trailing,
.ks-login-input-wrap > .ks-login-trailing,
.ks-login-input-wrap > span.ks-login-trailing,
#password + span,
#teacher_pin + span {
  position: absolute !important;
  inset-block: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  right: .5rem !important;
  left: auto !important;
  z-index: 8 !important;
  display: flex !important;
  width: 44px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  transform: none !important;
  translate: none !important;
  pointer-events: auto !important;
}

.ks-password-toggle,
.ks-login-trailing > .ks-password-toggle,
#password + span > button,
#teacher_pin + span > button {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  translate: none !important;
}

.ks-password-toggle svg,
.ks-login-trailing .ks-password-toggle svg,
#password + span svg,
#teacher_pin + span svg {
  position: static !important;
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  transform: none !important;
  translate: none !important;
}

@media (max-width: 520px) {
  .ks-login-input-wrap {
    height: 56px !important;
    min-height: 56px !important;
  }

  #teacher_code.ks-login-input,
  #teacher_pin.ks-login-input,
  #username.ks-login-input,
  #password.ks-login-input {
    height: 56px !important;
    min-height: 56px !important;
  }

  .ks-login-trailing,
  .ks-login-input-wrap > .ks-login-trailing,
  .ks-login-input-wrap > span.ks-login-trailing,
  #password + span,
  #teacher_pin + span {
    right: .45rem !important;
  }
}

/* V10 cache-bust hardening: center icons by exact parent height even when older utility classes win. */
.ks-login-input-wrap > .ks-login-leading-icon,
.ks-login-input-wrap > span.ks-login-leading-icon,
.ks-login-input-wrap > .ks-login-trailing,
.ks-login-input-wrap > span.ks-login-trailing {
  top: 0 !important;
  bottom: 0 !important;
  transform: translateY(0) !important;
  align-self: stretch !important;
}
.ks-login-input-wrap > .ks-login-leading-icon > svg,
.ks-login-input-wrap > span.ks-login-leading-icon > svg,
.ks-login-input-wrap > .ks-login-trailing svg,
.ks-login-input-wrap > span.ks-login-trailing svg {
  vertical-align: middle !important;
}

/* ===== SOURCE: assets/v76/kismart-v14-critical-fixes.css ===== */
/* KiSmart v14 - penyimpanan jurnal/absensi dan visibilitas kontrol */
button,[role="button"],[role="combobox"]{-webkit-text-fill-color:currentColor!important;text-shadow:none!important}
button[data-att-status]{background:#fff!important;color:#4b5563!important;border:1.5px solid #d1d5db!important;box-shadow:none!important;opacity:1!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease!important}
button[data-att-status][data-att-active="1"],button[data-att-status][aria-pressed="true"]{color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:transparent!important;transform:scale(.96)!important;box-shadow:0 3px 9px rgba(15,23,42,.2)!important}
button[data-att-status="H"][data-att-active="1"],button[data-att-status="H"][aria-pressed="true"]{background:#15803d!important}
button[data-att-status="S"][data-att-active="1"],button[data-att-status="S"][aria-pressed="true"]{background:#d97706!important}
button[data-att-status="I"][data-att-active="1"],button[data-att-status="I"][aria-pressed="true"]{background:#2563eb!important}
button[data-att-status="A"][data-att-active="1"],button[data-att-status="A"][aria-pressed="true"]{background:#dc2626!important}
button[data-att-status="B"][data-att-active="1"],button[data-att-status="B"][aria-pressed="true"]{background:#9f1239!important}
button[data-att-status="D"][data-att-active="1"],button[data-att-status="D"][aria-pressed="true"]{background:#7c3aed!important}
button[data-att-status="U"][data-att-active="1"],button[data-att-status="U"][aria-pressed="true"]{background:#64748b!important}
button[data-att-status][data-att-active="0"]:hover{background:#f3f4f6!important;color:#111827!important}
button[class*="bg-primary"],[role="button"][class*="bg-primary"]{color:#fff!important;-webkit-text-fill-color:#fff!important}
button[class*="bg-white"],button[class*="bg-card"],button[class*="bg-background"],[role="button"][class*="bg-white"],[role="button"][class*="bg-card"],[role="combobox"]{color:var(--foreground,#111827)!important;-webkit-text-fill-color:currentColor!important}
[role="combobox"] span,button span{visibility:visible;opacity:1;-webkit-text-fill-color:currentColor}
input,textarea,select{color:var(--foreground,#111827)!important;-webkit-text-fill-color:currentColor!important}
input::placeholder,textarea::placeholder{color:var(--muted-foreground,#6b7280)!important;opacity:1!important}
button[class*="bg-destructive"]{color:#fff!important;-webkit-text-fill-color:#fff!important}
button[class*="outline"],button[class*="secondary"],button[class*="ghost"]{ -webkit-text-fill-color:currentColor!important }
.ks-visible-label{display:inline!important;visibility:visible!important;opacity:1!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;font-size:.875rem!important;line-height:1.2!important}
@media(max-width:767px){button[data-att-status]{min-width:38px!important;min-height:38px!important;padding:0!important;font-size:.82rem!important}}

/* ===== SOURCE: assets/v76/kismart-attendance-active-v15.css ===== */
/* KiSmart v15 — warna status absensi aktif yang konsisten */
html body button[data-att-status],
html body [data-ns-att-group="1"] > button[data-att] {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  border-color: #d1d5db !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body button[data-att-status][aria-pressed="true"],
html body button[data-att-status][data-att-active="1"],
html body [data-ns-att-group="1"] > button[data-att][data-ns-att-active="1"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
  background-image: none !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .22) !important;
  transform: scale(.96) !important;
}

html body button[data-att-status="H"][aria-pressed="true"],
html body button[data-att-status="H"][data-att-active="1"],
html body [data-ns-att-group="1"] > button[data-att="H"][data-ns-att-active="1"] {
  background-color: #15803d !important;
}
html body button[data-att-status="S"][aria-pressed="true"],
html body button[data-att-status="S"][data-att-active="1"],
html body [data-ns-att-group="1"] > button[data-att="S"][data-ns-att-active="1"] {
  background-color: #d97706 !important;
}
html body button[data-att-status="I"][aria-pressed="true"],
html body button[data-att-status="I"][data-att-active="1"],
html body [data-ns-att-group="1"] > button[data-att="I"][data-ns-att-active="1"] {
  background-color: #2563eb !important;
}
html body button[data-att-status="A"][aria-pressed="true"],
html body button[data-att-status="A"][data-att-active="1"],
html body [data-ns-att-group="1"] > button[data-att="A"][data-ns-att-active="1"] {
  background-color: #dc2626 !important;
}
html body button[data-att-status="B"][aria-pressed="true"],
html body button[data-att-status="B"][data-att-active="1"],
html body [data-ns-att-group="1"] > button[data-att="B"][data-ns-att-active="1"] {
  background-color: #9f1239 !important;
}
html body button[data-att-status="D"][aria-pressed="true"],
html body button[data-att-status="D"][data-att-active="1"],
html body [data-ns-att-group="1"] > button[data-att="D"][data-ns-att-active="1"] {
  background-color: #7c3aed !important;
}
html body button[data-att-status="U"][aria-pressed="true"],
html body button[data-att-status="U"][data-att-active="1"],
html body [data-ns-att-group="1"] > button[data-att="U"][data-ns-att-active="1"] {
  background-color: #64748b !important;
}

html body button[data-att-status]:focus-visible,
html body [data-ns-att-group="1"] > button[data-att]:focus-visible {
  outline: 3px solid rgba(31, 122, 77, .28) !important;
  outline-offset: 2px !important;
}

/* ===== SOURCE: assets/v76/kismart-v16-roster-attendance-ui.css ===== */
/* KiSmart V16 — roster guru, ruang absensi, header, dan keterbacaan kontrol */

/* Ringkasan absensi dibuat sebagai grid stabil agar label tidak saling menimpa. */
[data-kismart-attendance-summary="1"] {
  width: 100% !important;
  align-items: stretch !important;
}
[data-kismart-attendance-summary="1"] > * {
  min-width: 0 !important;
  min-height: 34px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
[data-kismart-attendance-summary="1"] > :nth-child(1) {
  background: #15803d !important; border-color: #15803d !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-summary="1"] > :nth-child(2) {
  background: #d97706 !important; border-color: #d97706 !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-summary="1"] > :nth-child(3) {
  background: #2563eb !important; border-color: #2563eb !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-summary="1"] > :nth-child(4) {
  background: #dc2626 !important; border-color: #dc2626 !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-summary="1"] > :nth-child(5) {
  background: #9f1239 !important; border-color: #9f1239 !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-summary="1"] > :nth-child(6) {
  background: #7c3aed !important; border-color: #7c3aed !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-summary="1"] > :nth-child(7) {
  background: #64748b !important; border-color: #64748b !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-summary="1"] > :nth-child(8) {
  background: #f8fafc !important; border-color: #cbd5e1 !important;
  color: #0f172a !important; -webkit-text-fill-color: #0f172a !important;
}

/* Daftar siswa dibuat lebih tinggi dan nyaman digulir. */
[data-kismart-attendance-list="1"] {
  width: 100% !important;
  min-height: 58dvh !important;
  max-height: 72dvh !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  background: #f8fbf9 !important;
}
[data-kismart-attendance-row="1"] {
  border: 1px solid #e3ebe6 !important;
  box-shadow: 0 5px 14px rgba(20, 72, 45, .06) !important;
}
[data-kismart-attendance-row="1"] p {
  color: #173526 !important;
  -webkit-text-fill-color: currentColor !important;
  overflow-wrap: anywhere !important;
}
[data-kismart-attendance-buttons="1"] {
  width: 100% !important;
}
[data-kismart-attendance-buttons="1"] > button {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 11px !important;
  font-size: .95rem !important;
}
[data-kismart-attendance-legend="1"] {
  margin-top: 8px !important;
  border: 1px solid #dbe7df !important;
  color: #52675b !important;
  -webkit-text-fill-color: currentColor !important;
  overflow-wrap: anywhere !important;
}

/* Judul halaman tidak lagi terpotong menjadi elipsis pada HP. */
#root h1 {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

/* Kontrol yang memiliki teks harus selalu terbaca. */
#root :where(button,[role="button"],[role="combobox"],a) {
  text-indent: 0 !important;
}
#root :where(button,[role="button"],[role="combobox"],a) > :where(span,strong,small) {
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}
[data-kismart-empty-control="1"] {
  display: none !important;
}

@media (max-width: 767px) {
  /* Saat form jurnal/absensi terbuka, bottom nav disembunyikan agar ruang tidak tertutup. */
  html.ks-attendance-dialog-open nav[aria-label="Navigasi utama"],
  html.ks-attendance-dialog-open .bottom-nav,
  html.ks-attendance-dialog-open [class*="bottom-nav"] {
    display: none !important;
  }

  [role="dialog"]:has([data-kismart-attendance-section="1"]) {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    border-radius: 22px !important;
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  [data-kismart-attendance-summary="1"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  [data-kismart-attendance-summary="1"] > * {
    font-size: .72rem !important;
    padding-inline: 7px !important;
  }
  [data-kismart-attendance-list="1"] {
    min-height: 62dvh !important;
    max-height: 76dvh !important;
    padding: 10px !important;
  }
  [data-kismart-attendance-row="1"] {
    padding: 13px !important;
  }
  [data-kismart-attendance-buttons="1"] {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding-left: 0 !important;
  }
  [data-kismart-attendance-buttons="1"] > button {
    min-height: 44px !important;
    padding: 0 !important;
    font-size: .9rem !important;
  }
}

@media (min-width: 768px) {
  [data-kismart-attendance-list="1"] {
    min-height: 420px !important;
    max-height: 620px !important;
  }
}

/* ===== SOURCE: assets/v76/kismart-v17-sync-attendance-ui.css ===== */
/* KiSmart V17 — sinkronisasi jurnal, absensi, dan keterbacaan UI */

/* Ringkasan status absensi: tidak boleh saling menumpuk atau terpotong. */
[data-kismart-attendance-summary="1"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  overflow: visible !important;
}
[data-kismart-attendance-summary="1"] > * {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 7px 8px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.2 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* Keterangan bawah: beri ruang yang cukup untuk membungkus alami. */
[data-kismart-attendance-legend="1"] {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  margin-top: 10px !important;
  border: 1px solid #d7e4dc !important;
  border-radius: 12px !important;
  background: #f5faf7 !important;
  color: #3f5749 !important;
  -webkit-text-fill-color: currentColor !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-spacing: 2px !important;
  line-height: 1.75 !important;
  font-size: 12px !important;
}
[data-kismart-attendance-legend="1"] > span {
  color: #173526 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Tombol absensi aktif. File ini dimuat terakhir agar tidak dikalahkan CSS lama. */
[data-kismart-attendance-buttons="1"] button[data-att-status] {
  color: #4b5563 !important;
  -webkit-text-fill-color: currentColor !important;
  background: #ffffff !important;
  border-color: #cfd5dc !important;
  opacity: 1 !important;
}
[data-kismart-attendance-buttons="1"] button[data-att-status="H"][aria-pressed="true"],
[data-kismart-attendance-buttons="1"] button[data-att-status="H"][data-att-active="1"] {
  background: #15803d !important; border-color: #15803d !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-buttons="1"] button[data-att-status="S"][aria-pressed="true"],
[data-kismart-attendance-buttons="1"] button[data-att-status="S"][data-att-active="1"] {
  background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-buttons="1"] button[data-att-status="I"][aria-pressed="true"],
[data-kismart-attendance-buttons="1"] button[data-att-status="I"][data-att-active="1"] {
  background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-buttons="1"] button[data-att-status="A"][aria-pressed="true"],
[data-kismart-attendance-buttons="1"] button[data-att-status="A"][data-att-active="1"] {
  background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
/* Bolos sengaja dibuat merah marun agar jelas berbeda dari Alfa. */
[data-kismart-attendance-buttons="1"] button[data-att-status="B"][aria-pressed="true"],
[data-kismart-attendance-buttons="1"] button[data-att-status="B"][data-att-active="1"],
[data-kismart-attendance-buttons="1"] button[data-att-status="B"][data-kismart-v17-active="1"] {
  background: #9f1239 !important; border-color: #881337 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: 0 7px 16px rgba(159, 18, 57, .28) !important;
}
[data-kismart-attendance-buttons="1"] button[data-att-status="D"][aria-pressed="true"],
[data-kismart-attendance-buttons="1"] button[data-att-status="D"][data-att-active="1"] {
  background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-buttons="1"] button[data-att-status="U"][aria-pressed="true"],
[data-kismart-attendance-buttons="1"] button[data-att-status="U"][data-att-active="1"] {
  background: #64748b !important; border-color: #64748b !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
[data-kismart-attendance-buttons="1"] button[data-att-active="1"],
[data-kismart-attendance-buttons="1"] button[aria-pressed="true"] {
  transform: translateY(-1px) !important;
  font-weight: 900 !important;
}

/* Ruang daftar siswa lebih lapang saat jurnal dibuka. */
[data-kismart-attendance-list="1"] {
  min-height: 66dvh !important;
  max-height: 78dvh !important;
  padding: 12px !important;
  scroll-padding: 16px !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
[data-kismart-attendance-row="1"] {
  padding: 14px !important;
  margin-bottom: 10px !important;
}

/* Kartu yang benar-benar kosong ditandai runtime dan disembunyikan. */
[data-kismart-v17-empty-card="1"],
[data-kismart-v17-empty-control="1"] {
  display: none !important;
}

/* Teks di kartu tidak boleh transparan atau tersembunyi oleh style lama. */
#root :where(article,section,[class*="rounded-"][class*="border"]) :where(h1,h2,h3,h4,h5,p,label,strong,small) {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Saat form absensi aktif, seluruh navigasi bawah disembunyikan. */
html.ks-v17-attendance-open #root nav[aria-label="Navigasi utama"],
html.ks-v17-attendance-open #root nav.fixed.bottom-0,
html.ks-v17-attendance-open #root nav[class*="bottom-0"] {
  display: none !important;
}
html.ks-v17-attendance-open #main-scrollable-area {
  padding-bottom: 12px !important;
}

@media (max-width: 420px) {
  [data-kismart-attendance-summary="1"] > * {
    font-size: 10.5px !important;
    padding-inline: 6px !important;
  }
  [data-kismart-attendance-buttons="1"] {
    gap: 4px !important;
  }
  [data-kismart-attendance-buttons="1"] > button {
    min-height: 48px !important;
    padding: 0 !important;
    font-size: 16px !important;
  }
}

@media (min-width: 640px) {
  [data-kismart-attendance-summary="1"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===== SOURCE: assets/v76/kismart-v18-critical.css ===== */
/* KiSmart V18 — critical UI, loaded last */
[data-kismart-attendance-summary="1"]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;align-items:stretch!important}
[data-kismart-attendance-summary="1"]>*{min-width:0!important;width:100%!important;margin:0!important;justify-content:center!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
[data-kismart-attendance-list="1"]{height:68dvh!important;min-height:520px!important;max-height:76dvh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
[data-kismart-attendance-legend="1"]{white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.6!important}
[data-att-status="B"][aria-pressed="true"],[data-att-status="B"][data-att-active="1"]{background:#9f1239!important;border-color:#881337!important;color:#fff!important}
[data-kismart-journal-dialog="1"]{width:calc(100vw - 8px)!important;max-width:48rem!important;height:calc(100dvh - 8px)!important;max-height:calc(100dvh - 8px)!important;padding-bottom:24px!important}
html.ks-journal-open nav[aria-label],html.ks-journal-open [data-bottom-navigation],body:has([data-kismart-journal-dialog="1"]) nav[aria-label]{display:none!important}
h1,h2,[data-page-title]{max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:normal!important}
.ks-visible-label{display:inline!important;margin-inline-start:8px!important;color:inherit!important;font:inherit!important}
@media(max-width:480px){[data-kismart-attendance-summary="1"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}[data-kismart-attendance-summary="1"]>*{font-size:11px!important;padding-inline:6px!important}[data-kismart-attendance-list="1"]{height:70dvh!important;min-height:540px!important}}

/* ===== SOURCE: assets/v76/kismart-v19-mobile-sync.css ===== */
/* KiSmart V19: perbaikan final dialog jurnal, kehadiran, dan navigasi mobile. */
[data-kismart-attendance-summary="1"]{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  overflow:visible!important
}
[data-kismart-attendance-summary="1"]>[data-att-summary-status],
[data-kismart-attendance-summary="1"]>*{
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  min-height:40px!important;
  height:auto!important;
  margin:0!important;
  padding:7px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.2!important;
  font-size:12px!important;
  font-weight:800!important;
  opacity:1!important;
  visibility:visible!important
}
[data-att-summary-status="H"]{background:#dcfce7!important;border-color:#86efac!important;color:#166534!important;-webkit-text-fill-color:#166534!important}
[data-att-summary-status="S"]{background:#fef3c7!important;border-color:#fbbf24!important;color:#92400e!important;-webkit-text-fill-color:#92400e!important}
[data-att-summary-status="I"]{background:#dbeafe!important;border-color:#60a5fa!important;color:#1e40af!important;-webkit-text-fill-color:#1e40af!important}
[data-att-summary-status="A"]{background:#fee2e2!important;border-color:#f87171!important;color:#991b1b!important;-webkit-text-fill-color:#991b1b!important}
[data-att-summary-status="B"]{background:#ffe4e6!important;border-color:#fb7185!important;color:#881337!important;-webkit-text-fill-color:#881337!important}
[data-att-summary-status="D"]{background:#ede9fe!important;border-color:#a78bfa!important;color:#5b21b6!important;-webkit-text-fill-color:#5b21b6!important}
[data-att-summary-status="U"]{background:#e2e8f0!important;border-color:#94a3b8!important;color:#334155!important;-webkit-text-fill-color:#334155!important}
[data-kismart-attendance-buttons="1"]{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:4px!important;
  width:100%!important;
  padding-left:0!important
}
[data-kismart-attendance-buttons="1"]>button{
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  padding:0!important;
  font-size:15px!important;
  border-radius:10px!important
}
[data-att-status="B"][aria-pressed="true"],
[data-att-status="B"][data-att-active="1"]{
  background:#9f1239!important;
  border-color:#881337!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  box-shadow:0 6px 14px rgba(159,18,57,.28)!important
}
[data-kismart-attendance-list="1"]{
  width:100%!important;
  height:min(52dvh,560px)!important;
  min-height:360px!important;
  max-height:560px!important;
  padding:10px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important
}
[data-kismart-attendance-row="1"]{margin:0 0 9px!important;padding:12px!important}
[data-kismart-attendance-legend="1"]{
  display:block!important;
  position:static!important;
  width:100%!important;
  min-height:auto!important;
  margin:10px 0 0!important;
  padding:10px 12px!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:break-word!important;
  line-height:1.55!important
}
html.ks-v19-journal-open #root nav[aria-label="Navigasi utama"],
html.ks-v19-journal-open #root nav[class*="bottom-0"],
html.ks-v19-journal-open #root [data-bottom-navigation]{
  display:none!important
}
[data-kismart-journal-dialog="1"]{
  padding-bottom:max(24px,env(safe-area-inset-bottom,0px))!important;
  scroll-padding-bottom:32px!important
}
.ks-android-update-link{border-color:#b7d8c4!important;background:#f2faf5!important}
.ks-android-update-badge{display:inline-flex;padding:2px 7px;border-radius:999px;background:#1f7a4d;color:#fff;font-size:10px;font-weight:800}
@media(max-width:420px){
  [data-kismart-attendance-summary="1"]>*{font-size:11px!important;padding-inline:5px!important}
  [data-kismart-attendance-buttons="1"]>button{min-height:44px!important;font-size:14px!important}
  [data-kismart-attendance-list="1"]{height:50dvh!important;min-height:330px!important}
}
@media(min-width:640px){
  [data-kismart-attendance-summary="1"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* ===== SOURCE: assets/v76/notesmart-main-site-back.css ===== */
#notesmart-main-site-nav {
  position: fixed;
  left: max(14px, env(safe-area-inset-left, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 65;
  display: flex;
  pointer-events: none;
}
#notesmart-main-site-nav a {
  pointer-events: auto;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 999px;
  background: #fff;
  padding: 9px 14px;
  color: #173526;
  font: 750 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
}
#notesmart-main-site-nav svg { width: 17px; height: 17px; flex: none; }
#notesmart-main-site-nav a:hover,
#notesmart-main-site-nav a:focus-visible {
  border-color: #1f7a4d;
  color: #155d3a;
  outline: 3px solid rgba(31, 122, 77, .18);
  outline-offset: 2px;
}

/* Halaman login sudah memiliki tautan kembali sendiri. */
html.ks-login-page #notesmart-main-site-nav { display: none !important; }

@media (max-width: 767px) {
  #notesmart-main-site-nav {
    left: max(10px, env(safe-area-inset-left, 0px));
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
  #notesmart-main-site-nav a {
    min-height: 42px;
    padding: 8px 12px;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .11);
  }
  html.ks-manual-form-open #notesmart-main-site-nav,
  html.ks-overlay-open #notesmart-main-site-nav,
  html.ks-virtual-keyboard-open #notesmart-main-site-nav {
    display: none !important;
  }
}
@media print {
  #notesmart-main-site-nav { display: none !important; }
}

/* ===== SOURCE: assets/v76/kismart-v27-journal-mobile.css ===== */
/* KiSmart V27 — koreksi final tata letak Jurnal pada HP.
   File ini wajib dimuat PALING AKHIR agar mengalahkan aturan global lama
   yang memaksa seluruh grid dua kolom menjadi satu kolom. */
:root{--ks-v27-bottom-nav-space:calc(132px + env(safe-area-inset-bottom,0px))}

/* Teks tambahan dari runtime aksesibilitas tidak boleh terlihat pada tombol ikon. */
button:has(svg)>.ks-visible-label,
a:has(svg)>.ks-visible-label,
[role="button"]:has(svg)>.ks-visible-label{display:none!important}

@media (max-width:767px){
  body.ns-journal-page{scroll-padding-bottom:var(--ks-v27-bottom-nav-space)!important}
  body.ns-journal-page #main-scrollable-area,
  body.ns-journal-page main{scroll-padding-bottom:var(--ks-v27-bottom-nav-space)!important}

  /* Header Jurnal lebih ringkas. */
  body.ns-journal-page .ns-journal-header>div:first-child{padding:14px 16px 8px!important}
  body.ns-journal-page .ns-journal-header>div:last-child{padding:0 14px 14px!important}
  body.ns-journal-page .ns-journal-header h1{font-size:1.55rem!important;line-height:1.15!important}
  body.ns-journal-page .ns-journal-header p{font-size:.84rem!important;line-height:1.35!important}

  /* Pemilih tanggal: panah — tanggal penuh — panah. */
  body.ns-journal-page .ns-date-navigator{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    min-height:62px!important;
    padding:7px!important;
    overflow:visible!important;
    border-radius:18px!important;
  }
  body.ns-journal-page .ns-date-navigator>button[aria-label="Hari sebelumnya"],
  body.ns-journal-page .ns-date-navigator>button[aria-label="Hari berikutnya"],
  body.ns-journal-page .ns-date-navigator>.ns-date-nav-arrow{
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    flex:none!important;
  }
  body.ns-journal-page .ns-date-navigator>button[aria-label="Hari sebelumnya"] svg,
  body.ns-journal-page .ns-date-navigator>button[aria-label="Hari berikutnya"] svg,
  body.ns-journal-page .ns-date-navigator>.ns-date-nav-arrow svg{
    width:20px!important;height:20px!important;flex:none!important
  }
  body.ns-journal-page .ns-date-navigator>button[aria-label="Pilih tanggal jurnal"],
  body.ns-journal-page .ns-date-navigator>.ns-date-nav-trigger{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:48px!important;
    height:auto!important;
    padding:5px 6px!important;
    margin:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.ns-journal-page .ns-date-navigator>.ns-date-nav-trigger>div:first-child,
  body.ns-journal-page .ns-date-navigator>button[aria-label="Pilih tanggal jurnal"]>div:first-child{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    justify-content:center!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  body.ns-journal-page .ns-date-navigator>.ns-date-nav-trigger>div:first-child>span,
  body.ns-journal-page .ns-date-navigator>button[aria-label="Pilih tanggal jurnal"]>div:first-child>span{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:.88rem!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.ns-journal-page .ns-date-navigator>.ns-date-nav-trigger>span:last-child,
  body.ns-journal-page .ns-date-navigator>button[aria-label="Pilih tanggal jurnal"]>span:last-child{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin-top:2px!important;
    font-size:.68rem!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Konten dan tombol Riwayat/Review. */
  body.ns-journal-page .ns-journal-content{
    padding:14px 14px var(--ks-v27-bottom-nav-space)!important;
    gap:12px!important;
  }
  body.ns-journal-page .ns-journal-content>div:first-child{gap:8px!important}
  body.ns-journal-page .ns-journal-content>div:first-child>a{flex:1 1 0!important;min-width:0!important}
  body.ns-journal-page .ns-journal-content>div:first-child>a>button{
    width:100%!important;min-height:42px!important;padding:0 12px!important
  }

  /* Empat ringkasan harus 2×2, bukan empat kartu vertikal. */
  body.ns-journal-page .ns-journal-summary{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
  }
  body.ns-journal-page .ns-journal-summary>div{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:68px!important;
    padding:10px 11px!important;
    border-radius:16px!important;
  }
  body.ns-journal-page .ns-journal-summary>div>div{min-width:0!important}
  body.ns-journal-page .ns-journal-summary .text-base{font-size:1rem!important}
  body.ns-journal-page .ns-journal-summary [class*="uppercase"]{
    font-size:.67rem!important;white-space:nowrap!important
  }

  /* Kartu mode, kelas, dan jadwal. */
  body.ns-journal-page .ns-journal-mode-card,
  body.ns-journal-page .ns-journal-class-picker,
  body.ns-journal-page .ns-journal-schedule-card{
    padding:14px!important;border-radius:18px!important
  }
  body.ns-journal-page .ns-journal-mode-custom{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:5px!important;
    border-radius:15px!important;
  }
  body.ns-journal-page .ns-journal-mode-button{
    width:auto!important;
    min-width:0!important;
    min-height:44px!important;
    height:auto!important;
    padding:8px 6px!important;
    border-radius:12px!important;
    font-size:.82rem!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  body.ns-journal-page .ns-journal-mode-note{
    margin-top:9px!important;font-size:.78rem!important;line-height:1.45!important
  }

  body.ns-journal-page .ns-journal-class-picker>.mt-1.flex{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    margin-top:6px!important;
  }
  body.ns-journal-page .ns-journal-class-picker>.mt-1.flex>button{
    width:42px!important;min-width:42px!important;max-width:42px!important;
    height:42px!important;min-height:42px!important;padding:0!important;
    display:grid!important;place-items:center!important;overflow:hidden!important
  }
  body.ns-journal-page .ns-journal-class-picker>.mt-1.flex>button svg{
    width:18px!important;height:18px!important;flex:none!important
  }
  body.ns-journal-page .ns-journal-class-picker>.mt-1.flex>div{
    min-width:0!important;max-width:100%!important;overflow:hidden!important
  }
  body.ns-journal-page .ns-journal-class-picker>.mt-1.flex>div p{
    margin:0!important;font-size:.9rem!important;line-height:1.25!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important
  }
  body.ns-journal-page .ns-journal-class-picker>p{
    margin-top:5px!important;font-size:.74rem!important;line-height:1.4!important
  }

  body.ns-journal-page .ns-journal-schedule-card>div:first-child{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:8px!important;
  }
  body.ns-journal-page .ns-journal-schedule-card>div:first-child>button{
    min-width:96px!important;min-height:42px!important;padding:0 12px!important
  }

  /* Footer tetap terlihat tanpa menutup kartu terakhir. */
  body.ns-journal-page nav[aria-label="Navigasi utama"]{z-index:70!important}
}

@media (max-width:360px){
  body.ns-journal-page .ns-date-navigator{
    grid-template-columns:36px minmax(0,1fr) 36px!important;gap:4px!important
  }
  body.ns-journal-page .ns-date-navigator>button[aria-label="Hari sebelumnya"],
  body.ns-journal-page .ns-date-navigator>button[aria-label="Hari berikutnya"],
  body.ns-journal-page .ns-date-navigator>.ns-date-nav-arrow{
    width:36px!important;min-width:36px!important;max-width:36px!important
  }
  body.ns-journal-page .ns-date-navigator>.ns-date-nav-trigger>div:first-child>span,
  body.ns-journal-page .ns-date-navigator>button[aria-label="Pilih tanggal jurnal"]>div:first-child>span{
    font-size:.8rem!important
  }
  body.ns-journal-page .ns-journal-mode-button{font-size:.76rem!important;padding-inline:4px!important}
  body.ns-journal-page .ns-journal-schedule-card>div:first-child{grid-template-columns:1fr!important}
  body.ns-journal-page .ns-journal-schedule-card>div:first-child>button{width:100%!important}
}

/* ===== SOURCE: assets/v76/kismart-v31-mobile-final.css ===== */
/* KiSmart V33 — lapisan responsif akhir.
   Dimuat paling akhir dan hanya mengoreksi overflow, footer, serta kepadatan layar kecil. */
html,body,#root{max-width:100%;min-width:0}
html,body{overflow-x:hidden}
#root *{min-width:0}
img,svg,canvas,video{max-width:100%}

@media (max-width:767px){
  :root{--ks-v31-nav-height:calc(92px + env(safe-area-inset-bottom,0px))}
  body{width:100%;overscroll-behavior-x:none}
  #root main,#main-scrollable-area{max-width:100%;overflow-x:hidden;scroll-padding-bottom:var(--ks-v31-nav-height)}
  #root main{padding-bottom:var(--ks-v31-nav-height)!important}

  /* Footer enam menu harus tetap satu baris dan tidak menimpa isi. */
  #root nav[aria-label="Navigasi utama"]{
    left:10px!important;right:10px!important;bottom:8px!important;
    width:auto!important;max-width:calc(100vw - 20px)!important;
    padding-bottom:env(safe-area-inset-bottom,0px)!important;
    border-radius:24px!important;overflow:hidden!important;z-index:80!important
  }
  #root nav[aria-label="Navigasi utama"] ul{
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;
    width:100%!important;gap:0!important;padding:6px 4px!important
  }
  #root nav[aria-label="Navigasi utama"] li{width:auto!important;min-width:0!important;max-width:none!important}
  #root nav[aria-label="Navigasi utama"] a,
  #root nav[aria-label="Navigasi utama"] button{
    width:100%!important;min-width:0!important;max-width:none!important;
    padding:5px 1px!important;gap:2px!important;font-size:.66rem!important;
    line-height:1.05!important;white-space:nowrap!important
  }
  #root nav[aria-label="Navigasi utama"] svg{width:21px!important;height:21px!important;flex:none!important}
  #root nav[aria-label="Navigasi utama"] span{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Semua kartu/grid utama harus mengikuti lebar layar. */
  #root main section,#root main article,#root main [class*="rounded-"]{max-width:100%}
  #root main .grid{min-width:0}
  #root main table{max-width:none}
  #root main [class*="overflow-x-auto"],#root main [class*="overflow-auto"]{-webkit-overflow-scrolling:touch}

  /* Header aplikasi tidak boleh mendorong konten melebar. */
  #root header{max-width:100%;overflow:hidden}
  #root header h1,#root header p{overflow-wrap:anywhere}

  /* Tombol aksi sejajar tetapi tetap dapat membungkus pada layar sempit. */
  #root main .flex{min-width:0}
  #root main button,#root main a{max-width:100%}
}

@media (max-width:380px){
  #root nav[aria-label="Navigasi utama"]{left:6px!important;right:6px!important;max-width:calc(100vw - 12px)!important}
  #root nav[aria-label="Navigasi utama"] a,
  #root nav[aria-label="Navigasi utama"] button{font-size:.6rem!important}
  #root nav[aria-label="Navigasi utama"] svg{width:19px!important;height:19px!important}
}

/* ===== SOURCE: assets/v76/kismart-v33-mobile-report.css ===== */
/* KiSmart V33 — footer HP, dropdown kelas, dan halaman laporan. */
@media (max-width:767px){
  :root{--ks-v33-nav-height:calc(92px + env(safe-area-inset-bottom,0px))}
  #root main,#main-scrollable-area{padding-bottom:var(--ks-v33-nav-height)!important;scroll-padding-bottom:var(--ks-v33-nav-height)!important}
  #root nav[aria-label="Navigasi utama"]{left:10px!important;right:10px!important;bottom:8px!important;width:auto!important;max-width:calc(100vw - 20px)!important;border-radius:24px!important;overflow:hidden!important}
  #root nav[aria-label="Navigasi utama"] ul{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;width:100%!important;gap:0!important;padding:6px 4px!important;justify-content:stretch!important}
  #root nav[aria-label="Navigasi utama"] li{display:block!important;width:auto!important;min-width:0!important;max-width:none!important;flex:initial!important}
  #root nav[aria-label="Navigasi utama"] a,#root nav[aria-label="Navigasi utama"] button{width:100%!important;min-width:0!important;max-width:none!important;padding:5px 1px!important;gap:2px!important;font-size:.64rem!important;line-height:1.05!important;white-space:nowrap!important}
  #root nav[aria-label="Navigasi utama"] svg{width:20px!important;height:20px!important;flex:none!important}
  #root nav[aria-label="Navigasi utama"] span{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  /* Filter laporan/absensi tidak boleh terdorong keluar layar. */
  #root main .flex.flex-col.gap-3{width:100%!important;max-width:100%!important}
  #root main [role="combobox"],#root main input[type="date"]{width:100%!important;max-width:100%!important;min-width:0!important}
}
/* Portal Radix berada di luar #root. Pastikan daftar kelas berukuran normal dan dapat digulir. */
[data-radix-popper-content-wrapper]{max-width:calc(100vw - 24px)!important;z-index:2147481000!important}
[role="listbox"]{width:var(--radix-select-trigger-width)!important;min-width:min(var(--radix-select-trigger-width),calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;max-height:min(60vh,20rem)!important;overflow:hidden!important}
[data-radix-select-viewport]{height:auto!important;min-height:44px!important;max-height:min(54vh,18rem)!important;min-width:min(var(--radix-select-trigger-width),calc(100vw - 24px))!important;overflow-y:auto!important;overflow-x:hidden!important;padding:4px!important}
[role="option"]{width:100%!important;min-height:44px!important;padding:10px 36px 10px 12px!important;white-space:normal!important;overflow-wrap:anywhere!important}

/* ===== SOURCE: assets/v76/kismart-v34-mobile-journal-report.css ===== */
/* KiSmart V34 — editor jurnal terkirim dan penyempurnaan tampilan HP */

/* DateNavigator dipakai bersama oleh Absensi, Jurnal Piket, dan halaman lain. */
.ns-date-navigator .ks-date-copy,
.ns-date-navigator .ks-date-full,
.ns-date-navigator .ks-date-weekday {
  min-width: 0;
  max-width: 100%;
}
.ns-date-navigator .ks-date-full {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: normal;
}

/* Kartu kategori laporan tidak boleh mendorong teks keluar batas. */
.ks-report-card,
.ks-report-card * {
  min-width: 0;
}
.ks-report-copy {
  overflow: hidden;
}
.ks-report-description {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 767px) {
  .ns-date-navigator {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 94px !important;
    padding: 8px !important;
  }

  .ns-date-navigator > button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }

  .ns-date-navigator > .ks-date-picker {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 4px !important;
    overflow: visible !important;
  }

  .ks-date-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .ks-date-copy {
    width: 100% !important;
    overflow: visible !important;
    text-align: left !important;
  }

  .ks-date-full {
    font-size: clamp(.86rem, 3.8vw, 1rem) !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .ks-date-weekday {
    margin-top: 3px !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  /* Absensi: tanggal satu baris penuh, kelas dan JP proporsional di bawahnya. */
  .ks-attendance-filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 106px !important;
    align-items: end !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .ks-attendance-filters > .ns-date-navigator {
    grid-column: 1 / -1 !important;
  }
  .ks-attendance-filters > div:nth-child(2) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ks-attendance-filters > div:nth-child(3) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Rekap: kelas penuh, rentang tanggal tetap terbaca dan tidak bertumpuk. */
  .ks-recap-filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .ks-recap-filters > div:first-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ks-recap-filters input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 10px !important;
    font-size: .82rem !important;
  }
  .ks-recap-filters > span {
    align-self: center !important;
    white-space: nowrap !important;
    padding-bottom: 2px !important;
  }

  /* Jurnal Piket: hindari pemenggalan per karakter pada teks status tugas. */
  .ks-picket-duty {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .ks-picket-duty-copy {
    width: 100% !important;
    min-width: 0 !important;
  }
  .ks-picket-duty-copy p {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
  }
  .ks-picket-duty > button {
    white-space: nowrap !important;
    min-width: 104px !important;
  }

  /* Laporan: ikon pencarian punya ruang sendiri dan isi kartu membungkus di kotak. */
  .ks-report-search {
    display: block !important;
    width: 100% !important;
  }
  .ks-report-search > svg {
    left: 14px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
  .ks-report-search input {
    width: 100% !important;
    padding-left: 46px !important;
    padding-right: 14px !important;
  }
  .ks-report-card {
    overflow: hidden !important;
    gap: 12px !important;
  }
  .ks-report-card > div:first-child {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 20px !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .ks-report-copy {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .ks-report-copy > p:first-child {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  .ks-report-description {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.42 !important;
  }

  /* Ruang aman supaya isi terakhir tidak tertutup footer navigasi. */
  #root main,
  #root [class*="pb-24"] {
    padding-bottom: max(7.5rem, calc(6rem + env(safe-area-inset-bottom))) !important;
  }
}

@media (max-width: 380px) {
  .ks-recap-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .ks-recap-filters > span {
    display: none !important;
  }
  .ks-picket-duty {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }
  .ks-picket-duty > button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* ===== SOURCE: assets/v76/kismart-v35-compact-ui.css ===== */
/* KiSmart V35 — tombol ringkas, kalender terbaca, dan pemanfaatan ruang HP */

/* Kalender jurnal: angka tanggal wajib kontras dan tetap terbaca. */
[data-slot="calendar"] {
  color: #17221b !important;
  -webkit-text-fill-color: currentColor !important;
  background: #ffffff !important;
}
[data-slot="calendar"] button[data-day] {
  color: #17221b !important;
  -webkit-text-fill-color: #17221b !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 650 !important;
}
[data-slot="calendar"] button[data-day][data-selected-single="true"],
[data-slot="calendar"] button[data-day][data-range-start="true"],
[data-slot="calendar"] button[data-day][data-range-end="true"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
[data-slot="calendar"] [aria-disabled="true"] button[data-day],
[data-slot="calendar"] button[data-day]:disabled {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: .58 !important;
}
[data-slot="calendar"] [class*="weekday"] {
  color: #52635a !important;
  -webkit-text-fill-color: #52635a !important;
  font-weight: 750 !important;
}

/* Ringkasan kehadiran dikendalikan tunggal oleh kismart-v42-attendance-fixed-row.css. */

/* Pilihan kegiatan: maksimum dua baris, bergerak horizontal bila item banyak. */
[data-kismart-activity-grid="1"] {
  display: grid !important;
  grid-template-rows: repeat(2, 32px) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px 1px 5px !important;
  margin-bottom: 6px !important;
  overscroll-behavior-inline: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}
[data-kismart-activity-grid="1"] > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  width: auto !important;
  min-width: max-content !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  /* Halaman menu dibuat dua kolom dan deskripsi sekunder disembunyikan. */
  body.ns-menu-page .ns-menu-content {
    gap: 12px !important;
    padding: 12px 12px max(7rem, calc(5.5rem + env(safe-area-inset-bottom))) !important;
  }
  body.ns-menu-page .ns-menu-profile {
    min-height: 62px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }
  body.ns-menu-page .ns-menu-profile > span:first-child {
    width: 38px !important;
    height: 38px !important;
  }
  body.ns-menu-page .ns-menu-section {
    margin: 0 !important;
  }
  body.ns-menu-page .ns-menu-section > h2 {
    margin: 0 0 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  body.ns-menu-page .ns-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body.ns-menu-page .ns-menu-item,
  body.ns-menu-page .ns-menu-grid .ks-android-update-link {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  body.ns-menu-page .ns-menu-icon,
  body.ns-menu-page .ns-menu-grid .ks-android-update-link > span:first-child {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }
  body.ns-menu-page .ns-menu-icon > svg {
    width: 17px !important;
    height: 17px !important;
  }
  body.ns-menu-page .ns-menu-copy {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.ns-menu-page .ns-menu-label,
  body.ns-menu-page .ns-menu-grid .ks-android-update-link .text-sm {
    display: block !important;
    font-size: 11.5px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
  }
  body.ns-menu-page .ns-menu-desc,
  body.ns-menu-page .ns-menu-grid .ks-android-update-link .text-xs,
  body.ns-menu-page .ks-android-update-badge {
    display: none !important;
  }
  body.ns-menu-page .ns-menu-content > .pt-2 {
    padding-top: 0 !important;
  }
  body.ns-menu-page .ns-menu-content > .pt-2 button {
    min-height: 42px !important;
    padding-block: 8px !important;
  }

  /* Mode jurnal dan navigator tanggal tidak lagi memakan tinggi berlebihan. */
  body.ns-journal-page .ns-journal-mode-card,
  body.ns-journal-page .ns-journal-class-picker {
    padding: 11px !important;
  }
  body.ns-journal-page .ns-journal-mode-custom {
    margin-top: 8px !important;
    gap: 5px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }
  body.ns-journal-page .ns-journal-mode-button {
    min-height: 38px !important;
    padding: 7px 8px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }
  body.ns-journal-page .ns-journal-mode-note {
    margin-top: 7px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  /* Dashboard manajemen: kartu dan akses cepat lebih pendek, tetap jelas. */
  body.ns-dashboard-page main {
    gap: 12px !important;
  }
  body.ns-dashboard-page main > section {
    border-radius: 14px !important;
  }
  body.ns-dashboard-page main > section.grid > article {
    min-height: 88px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  body.ns-dashboard-page main > section.grid > article p:nth-child(2) {
    margin-top: 2px !important;
    font-size: 1.25rem !important;
  }
  body.ns-dashboard-page main > section.grid > article p:nth-child(3) {
    margin-top: 2px !important;
    font-size: 10px !important;
  }
  body.ns-dashboard-page a[class*="min-h-12"] {
    min-height: 40px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 355px) {
  body.ns-menu-page .ns-menu-grid {
    gap: 6px !important;
  }
  body.ns-menu-page .ns-menu-item,
  body.ns-menu-page .ns-menu-grid .ks-android-update-link {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding-inline: 7px !important;
  }
  body.ns-menu-page .ns-menu-icon,
  body.ns-menu-page .ns-menu-grid .ks-android-update-link > span:first-child {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (min-width: 768px) {
  body.ns-menu-page .ns-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ===== SOURCE: assets/v76/kismart-v36-professional-compact.css ===== */
/*
 * KiSmart V36 — compact attendance and professional controls
 * Scope is intentionally limited to identified KiSmart components so existing
 * routes, click handlers, API calls, and form state remain untouched.
 */

:root {
  --ks-compact-gap: 4px;
  --ks-compact-radius: 10px;
  --ks-soft-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

/* --------------------------------------------------------------------------
   Jurnal: ringkasan kehadiran satu baris (H, S, I, A, B, D, U, Total)
   -------------------------------------------------------------------------- */
[data-kismart-attendance-summary="1"] {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: var(--ks-compact-gap) !important;
  width: 100% !important;
  align-items: stretch !important;
  overflow: visible !important;
}

[data-kismart-attendance-summary="1"] > *,
[data-kismart-attendance-summary="1"] > [data-att-summary-status],
[data-kismart-attendance-summary="1"] > [data-kismart-attendance-summary-total] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--ks-compact-radius) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

[data-kismart-attendance-summary="1"] .ks-att-summary-code,
[data-kismart-attendance-summary="1"] .ks-att-summary-count,
[data-kismart-attendance-summary="1"] .ks-att-summary-name {
  display: inline-block !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

[data-kismart-attendance-summary="1"] .ks-att-summary-code {
  font-weight: 900 !important;
}

[data-kismart-attendance-summary="1"] .ks-att-summary-name {
  display: none !important;
}

[data-kismart-attendance-summary="1"] .ks-att-summary-count {
  font-variant-numeric: tabular-nums !important;
  font-weight: 900 !important;
}

/* Keep each status recognisable through both colour and letter. */
[data-kismart-attendance-summary="1"] [data-att-summary-status="H"] { background: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; }
[data-kismart-attendance-summary="1"] [data-att-summary-status="S"] { background: #fef3c7 !important; border-color: #fbbf24 !important; color: #92400e !important; }
[data-kismart-attendance-summary="1"] [data-att-summary-status="I"] { background: #dbeafe !important; border-color: #60a5fa !important; color: #1e40af !important; }
[data-kismart-attendance-summary="1"] [data-att-summary-status="A"] { background: #fee2e2 !important; border-color: #f87171 !important; color: #991b1b !important; }
[data-kismart-attendance-summary="1"] [data-att-summary-status="B"] { background: #ffe4e6 !important; border-color: #fb7185 !important; color: #881337 !important; }
[data-kismart-attendance-summary="1"] [data-att-summary-status="D"] { background: #ede9fe !important; border-color: #a78bfa !important; color: #5b21b6 !important; }
[data-kismart-attendance-summary="1"] [data-att-summary-status="U"] { background: #e2e8f0 !important; border-color: #94a3b8 !important; color: #334155 !important; }
[data-kismart-attendance-summary-total="1"] { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; }

/* Per-student H/S/I/A/B/D/U controls remain one row but use less height. */
[data-kismart-attendance-buttons="1"] {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding-left: 0 !important;
}

[data-kismart-attendance-buttons="1"] > button {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  box-shadow: none !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

[data-kismart-attendance-buttons="1"] > button:active {
  transform: scale(.96) !important;
}

[data-kismart-attendance-buttons="1"] > button[data-att-active="1"],
[data-kismart-attendance-buttons="1"] > button[aria-pressed="true"] {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .16) !important;
}

[data-kismart-attendance-list="1"] {
  padding: 8px !important;
}

[data-kismart-attendance-list="1"] > [data-kismart-attendance-row="1"] {
  margin-bottom: 7px !important;
  padding: 10px !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .055) !important;
}

/* Activity template buttons: at most two compact rows, horizontal only if needed. */
[data-kismart-activity-grid="1"] {
  display: grid !important;
  grid-template-rows: repeat(2, 30px) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px 1px 4px !important;
  margin-bottom: 5px !important;
  overscroll-behavior-inline: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

[data-kismart-activity-grid="1"] > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: max-content !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

[data-kismart-activity-grid="1"] > *:active {
  transform: scale(.97) !important;
}

/* --------------------------------------------------------------------------
   Dashboard admin/guru: seven attendance indicators in one horizontal row.
   -------------------------------------------------------------------------- */
[data-kismart-dashboard-attendance-summary="1"] {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
}

[data-kismart-dashboard-attendance-summary="1"] > .ks-dashboard-attendance-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 3px !important;
  border: 1px solid rgba(148, 163, 184, .32) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

[data-kismart-dashboard-attendance-summary="1"] .ks-dashboard-attendance-code {
  display: inline !important;
  color: #475569 !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

[data-kismart-dashboard-attendance-summary="1"] .ks-dashboard-attendance-name {
  display: none !important;
}

[data-kismart-dashboard-attendance-summary="1"] .ks-dashboard-attendance-value {
  display: inline !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

[data-kismart-dashboard-attendance-summary="1"] > :nth-child(1) { background: #ecfdf5 !important; border-color: #a7f3d0 !important; }
[data-kismart-dashboard-attendance-summary="1"] > :nth-child(2) { background: #f0f9ff !important; border-color: #bae6fd !important; }
[data-kismart-dashboard-attendance-summary="1"] > :nth-child(3) { background: #fffbeb !important; border-color: #fde68a !important; }
[data-kismart-dashboard-attendance-summary="1"] > :nth-child(4) { background: #fff1f2 !important; border-color: #fecdd3 !important; }
[data-kismart-dashboard-attendance-summary="1"] > :nth-child(5) { background: #fff1f2 !important; border-color: #fda4af !important; }
[data-kismart-dashboard-attendance-summary="1"] > :nth-child(6) { background: #f5f3ff !important; border-color: #ddd6fe !important; }
[data-kismart-dashboard-attendance-summary="1"] > :nth-child(7) { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }

/* Larger screens can show full names while retaining a single row. */
@media (min-width: 640px) {
  [data-kismart-attendance-summary="1"] > *,
  [data-kismart-attendance-summary="1"] > [data-att-summary-status],
  [data-kismart-attendance-summary="1"] > [data-kismart-attendance-summary-total] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding-inline: 6px !important;
    font-size: 11px !important;
  }
  [data-kismart-attendance-summary="1"] .ks-att-summary-code {
    display: none !important;
  }
  [data-kismart-attendance-summary="1"] .ks-att-summary-name {
    display: inline !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  [data-kismart-dashboard-attendance-summary="1"] > .ks-dashboard-attendance-chip {
    height: 44px !important;
    min-height: 44px !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  [data-kismart-dashboard-attendance-summary="1"] .ks-dashboard-attendance-code {
    display: none !important;
  }
  [data-kismart-dashboard-attendance-summary="1"] .ks-dashboard-attendance-name {
    display: block !important;
    max-width: 100% !important;
    color: #64748b !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 359px) {
  [data-kismart-attendance-summary="1"] {
    gap: 3px !important;
  }
  [data-kismart-attendance-summary="1"] > *,
  [data-kismart-attendance-summary="1"] > [data-att-summary-status],
  [data-kismart-attendance-summary="1"] > [data-kismart-attendance-summary-total] {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding-inline: 1px !important;
    font-size: 9.5px !important;
    border-radius: 8px !important;
  }
  [data-kismart-dashboard-attendance-summary="1"] {
    gap: 3px !important;
  }
  [data-kismart-dashboard-attendance-summary="1"] > .ks-dashboard-attendance-chip {
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 1px !important;
    border-radius: 8px !important;
  }
  [data-kismart-dashboard-attendance-summary="1"] .ks-dashboard-attendance-code {
    font-size: 8.5px !important;
  }
  [data-kismart-dashboard-attendance-summary="1"] .ks-dashboard-attendance-value {
    font-size: 11.5px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-kismart-attendance-summary="1"] > *:hover,
  [data-kismart-attendance-summary="1"] > [data-att-summary-status]:hover,
  [data-kismart-attendance-summary="1"] > [data-kismart-attendance-summary-total]:hover,
  [data-kismart-dashboard-attendance-summary="1"] > .ks-dashboard-attendance-chip:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--ks-soft-shadow) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-kismart-attendance-summary="1"] > *,
  [data-kismart-attendance-summary="1"] > [data-att-summary-status],
  [data-kismart-attendance-summary="1"] > [data-kismart-attendance-summary-total],
  [data-kismart-attendance-buttons="1"] > button,
  [data-kismart-activity-grid="1"] > *,
  [data-kismart-dashboard-attendance-summary="1"] > * {
    transition: none !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Dashboard cards and quick links: compact, coloured, and consistent.
   -------------------------------------------------------------------------- */
[data-kismart-kpi-card="1"] {
  position: relative !important;
  min-height: 82px !important;
  padding: 11px 12px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

[data-kismart-kpi-card="1"]::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -18px -22px auto !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: .055 !important;
  pointer-events: none !important;
}

[data-kismart-kpi-card="1"] > p:first-child {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  letter-spacing: .045em !important;
}

[data-kismart-kpi-card="1"] > p:nth-child(2) {
  margin-top: 3px !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

[data-kismart-kpi-card="1"] > p:nth-child(3) {
  margin-top: 4px !important;
  font-size: 9.5px !important;
  line-height: 1.2 !important;
}

[data-kismart-quick-link="1"] {
  min-height: 38px !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .045) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease !important;
}

[data-kismart-quick-link="1"]:active {
  transform: scale(.975) !important;
}

@media (hover: hover) and (pointer: fine) {
  [data-kismart-kpi-card="1"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
  }
  [data-kismart-quick-link="1"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 16px rgba(15, 23, 42, .09) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-kismart-kpi-card="1"],
  [data-kismart-quick-link="1"] {
    transition: none !important;
    transform: none !important;
  }
}

/* Standalone Absensi Siswa uses the same compact one-row language. */
[data-kismart-standalone-attendance-summary="1"] {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
}
[data-kismart-standalone-attendance-summary="1"] > *,
[data-kismart-standalone-attendance-summary="1"] > [data-att-summary-status],
[data-kismart-standalone-attendance-summary="1"] > [data-kismart-attendance-summary-total] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
[data-kismart-standalone-attendance-summary="1"] .ks-att-summary-name { display: none !important; }
[data-kismart-standalone-attendance-summary="1"] .ks-att-summary-code,
[data-kismart-standalone-attendance-summary="1"] .ks-att-summary-count { display: inline !important; font-weight: 900 !important; }
[data-kismart-standalone-attendance-summary="1"] [data-att-summary-status="H"] { background: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; }
[data-kismart-standalone-attendance-summary="1"] [data-att-summary-status="S"] { background: #fef3c7 !important; border-color: #fbbf24 !important; color: #92400e !important; }
[data-kismart-standalone-attendance-summary="1"] [data-att-summary-status="I"] { background: #dbeafe !important; border-color: #60a5fa !important; color: #1e40af !important; }
[data-kismart-standalone-attendance-summary="1"] [data-att-summary-status="A"] { background: #fee2e2 !important; border-color: #f87171 !important; color: #991b1b !important; }
[data-kismart-standalone-attendance-summary="1"] [data-att-summary-status="B"] { background: #ffe4e6 !important; border-color: #fb7185 !important; color: #881337 !important; }
[data-kismart-standalone-attendance-summary="1"] [data-att-summary-status="D"] { background: #ede9fe !important; border-color: #a78bfa !important; color: #5b21b6 !important; }
[data-kismart-standalone-attendance-summary="1"] [data-att-summary-status="U"] { background: #e2e8f0 !important; border-color: #94a3b8 !important; color: #334155 !important; }
[data-kismart-standalone-attendance-buttons="1"] {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 224px !important;
}
[data-kismart-standalone-attendance-buttons="1"] > button {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
@media (min-width: 640px) {
  [data-kismart-standalone-attendance-summary="1"] .ks-att-summary-code { display: none !important; }
  [data-kismart-standalone-attendance-summary="1"] .ks-att-summary-name { display: inline !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  [data-kismart-standalone-attendance-summary="1"] > * { height: 36px !important; min-height: 36px !important; max-height: 36px !important; font-size: 10.5px !important; }
}

/* Laporan kehadiran: seven status cells stay in one row; total remains compact. */
[data-kismart-report-attendance-summary="1"] {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
}
[data-kismart-report-attendance-summary="1"] > .ks-report-attendance-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 3px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04) !important;
}
[data-kismart-report-attendance-summary="1"] .ks-report-attendance-code {
  display: inline !important;
  color: #475569 !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
[data-kismart-report-attendance-summary="1"] .ks-report-attendance-name {
  display: none !important;
}
[data-kismart-report-attendance-summary="1"] .ks-report-attendance-value {
  display: inline !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}
[data-kismart-report-attendance-summary="1"] > :nth-child(1) { background: #ecfdf5 !important; border-color: #a7f3d0 !important; }
[data-kismart-report-attendance-summary="1"] > :nth-child(2) { background: #fffbeb !important; border-color: #fde68a !important; }
[data-kismart-report-attendance-summary="1"] > :nth-child(3) { background: #eff6ff !important; border-color: #bfdbfe !important; }
[data-kismart-report-attendance-summary="1"] > :nth-child(4) { background: #fff1f2 !important; border-color: #fecdd3 !important; }
[data-kismart-report-attendance-summary="1"] > :nth-child(5) { background: #fff1f2 !important; border-color: #fda4af !important; }
[data-kismart-report-attendance-summary="1"] > :nth-child(6) { background: #f5f3ff !important; border-color: #ddd6fe !important; }
[data-kismart-report-attendance-summary="1"] > :nth-child(7) { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
[data-kismart-report-attendance-total="1"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
}
[data-kismart-report-attendance-total="1"] > p {
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}
@media (min-width: 640px) {
  [data-kismart-report-attendance-summary="1"] > .ks-report-attendance-chip {
    height: 42px !important;
    min-height: 42px !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  [data-kismart-report-attendance-summary="1"] .ks-report-attendance-code { display: none !important; }
  [data-kismart-report-attendance-summary="1"] .ks-report-attendance-name {
    display: block !important;
    max-width: 100% !important;
    color: #64748b !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ===== SOURCE: assets/v76/kismart-v37-performance.css ===== */
/*
 * KiSmart V37 — performance and native student evaluation fields.
 * Visual-only overrides. No API, routing, authorization, or save semantics.
 */

/* Native Nilai + Catatan fields shared by Jurnal and Absensi Siswa.
 * V44: controls remain compact, but text is readable and notes expand safely
 * while focused. This is visual only; values and React onChange remain intact. */
.ns-student-evaluation-grid {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2ebe5;
  scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}
.ns-eval-field {
  display: grid;
  grid-template-rows: auto minmax(42px, auto);
  align-content: start;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.ns-eval-field > span {
  min-width: 0;
  color: #42594c;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 800;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.ns-eval-field input,
.ns-eval-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #c8d8cf;
  border-radius: 10px;
  background: #fff;
  color: #173526;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, .025);
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.ns-eval-field input {
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ns-eval-field textarea {
  resize: none;
  overflow-y: hidden;
  overflow-x: hidden;
}
.ns-eval-field textarea:focus,
.ns-eval-field textarea.is-expanded {
  min-height: 70px;
  max-height: 120px;
  overflow-y: auto;
}
.ns-eval-field input:focus,
.ns-eval-field textarea:focus {
  outline: none;
  border-color: #1f7a4d;
  box-shadow: 0 0 0 3px rgba(31, 122, 77, .14);
  background: #fff;
}
.ns-eval-field input:invalid {
  border-color: #d14343;
}
.ns-eval-field input:disabled,
.ns-eval-field textarea:disabled {
  cursor: not-allowed;
  opacity: .72;
  background: #f3f6f4;
}
.ns-student-evaluation-grid:focus-within {
  border-top-color: #bdd5c7;
}

/* Student rows: lighter paint and fewer composited layers. */
[data-kismart-attendance-row="1"] {
  border: 1px solid #dde8e1 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .14s ease, background-color .14s ease !important;
  content-visibility: auto;
  contain-intrinsic-size: 210px;
}
[data-kismart-attendance-row="1"]:hover {
  box-shadow: none !important;
}
[data-kismart-attendance-buttons="1"] > button,
[data-kismart-standalone-attendance-buttons="1"] > button {
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease !important;
}
[data-kismart-attendance-buttons="1"] > button[data-att-active="1"],
[data-kismart-attendance-buttons="1"] > button[aria-pressed="true"],
[data-kismart-standalone-attendance-buttons="1"] > button[data-att-active="1"],
[data-kismart-standalone-attendance-buttons="1"] > button[aria-pressed="true"] {
  box-shadow: none !important;
  transform: none !important;
}

/* Sticky controls remain practical, but no expensive large shadow during scroll. */
body.ns-attendance-page .sticky,
body.ns-journal-page .sticky,
body.ns-journal-route .sticky {
  box-shadow: 0 -1px 8px rgba(15,23,42,.07) !important;
}

/* Fixed translucent blur is costly on Android WebView while content moves below it. */
body.ns-attendance-page header,
body.ns-journal-page header,
body.ns-journal-route header,
body.ns-attendance-recap-page header {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ns-attendance-page nav[aria-label="Navigasi utama"][class*="bottom-0"],
body.ns-journal-page nav[aria-label="Navigasi utama"][class*="bottom-0"],
body.ns-journal-route nav[aria-label="Navigasi utama"][class*="bottom-0"],
body.ns-attendance-recap-page nav[aria-label="Navigasi utama"][class*="bottom-0"] {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 -2px 12px rgba(15,23,42,.09) !important;
}

@media (max-width: 767px) {
  body.ns-attendance-page,
  body.ns-journal-page,
  body.ns-journal-route,
  body.ns-attendance-recap-page,
  body.ns-attendance-page #root,
  body.ns-journal-page #root,
  body.ns-journal-route #root,
  body.ns-attendance-recap-page #root {
    background: #f6faf8 !important;
  }

  /* One scroll surface only on the journal attendance section. Nested 68dvh
     scrolling was the primary source of touch-scroll contention on phones. */
  body.ns-journal-page [data-kismart-attendance-list="1"],
  body.ns-journal-route [data-kismart-attendance-list="1"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
    padding: 6px !important;
  }

  body.ns-attendance-page [data-kismart-attendance-row="1"] {
    gap: 7px !important;
    padding: 9px !important;
  }
  body.ns-attendance-page [data-kismart-standalone-attendance-buttons="1"] {
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 1px !important;
  }

  [data-kismart-attendance-list="1"] > [data-kismart-attendance-row="1"] {
    margin-bottom: 6px !important;
    padding: 9px !important;
  }

  /* Remove global card shadows from the long attendance list only. */
  body.ns-attendance-page [data-kismart-attendance-row="1"].rounded-xl,
  body.ns-journal-page [data-kismart-attendance-row="1"].rounded-xl,
  body.ns-journal-route [data-kismart-attendance-row="1"].rounded-xl {
    box-shadow: none !important;
  }

  .ns-student-evaluation-grid {
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-areas:
      "score positive"
      "negative negative";
    gap: 7px 8px;
    margin-top: 7px;
    padding-top: 8px;
  }
  .ns-eval-score { grid-area: score; }
  .ns-eval-field:nth-child(2) { grid-area: positive; }
  .ns-eval-field:nth-child(3) { grid-area: negative; }
  .ns-eval-field {
    grid-template-rows: auto minmax(42px, auto);
  }
  .ns-eval-field input,
  .ns-eval-field textarea {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 8px 9px;
    font-size: 12px;
    border-radius: 9px;
  }
  .ns-eval-field textarea:focus,
  .ns-eval-field textarea.is-expanded {
    min-height: 72px;
    max-height: 116px;
  }

  /* Avoid a persistent hover shadow after touch. */
  .rounded-xl.border:hover,
  .rounded-lg.border:hover,
  [class*="rounded-xl"][class*="border"]:hover,
  [class*="rounded-lg"][class*="border"]:hover {
    box-shadow: none !important;
  }
}

@media (max-width: 359px) {
  .ns-student-evaluation-grid {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 6px;
  }
  .ns-eval-field > span { font-size: 9.5px; }
  .ns-eval-field input,
  .ns-eval-field textarea { padding-inline: 7px; font-size: 11px; }
}

/* Long attendance and journal pages should follow the finger immediately. */
html, body, #root, #main-scrollable-area {
  scroll-behavior: auto;
}
[data-kismart-attendance-buttons="1"] > button,
[data-kismart-standalone-attendance-buttons="1"] > button {
  min-height: 40px;
  touch-action: manipulation;
}
[data-kismart-attendance-buttons="1"] > button[data-att-active="1"],
[data-kismart-attendance-buttons="1"] > button[aria-pressed="true"],
[data-kismart-standalone-attendance-buttons="1"] > button[data-att-active="1"],
[data-kismart-standalone-attendance-buttons="1"] > button[aria-pressed="true"] {
  outline: 2px solid rgba(15, 23, 42, .20) !important;
  outline-offset: 1px !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-kismart-attendance-row="1"],
  [data-kismart-attendance-buttons="1"] > button,
  [data-kismart-standalone-attendance-buttons="1"] > button {
    transition: none !important;
  }
}

/* ===== SOURCE: assets/v76/kismart-v38-attendance-checkbox.css ===== */
/*
 * KiSmart V44 — checkbox correction retained from V38.
 * Attendance summary layout is now owned only by V42, preventing old flex/grid
 * rules from competing with the approved one-row component.
 */
/*
 * Radix checkbox is rendered as a button. A legacy mobile rule makes every
 * direct flex-child button grow, which turned the checkbox into a large empty
 * rectangle. These declarations restore all app checkboxes to a visible,
 * touch-safe square without changing onCheckedChange or keyboard semantics.
 */
#root button[role="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-grid !important;
  place-content: center !important;
  flex: 0 0 22px !important;
  align-self: flex-start !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 2px solid #168052 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}

#root button[role="checkbox"]::after {
  display: none !important;
  content: none !important;
}

#root button[role="checkbox"][data-state="checked"],
#root button[role="checkbox"][aria-checked="true"] {
  background: #168052 !important;
  border-color: #126b45 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(22, 128, 82, .25) !important;
}

#root button[role="checkbox"] > span {
  display: grid !important;
  place-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
}

#root button[role="checkbox"] svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
}

#root button[role="checkbox"]:focus-visible {
  outline: 3px solid rgba(22, 128, 82, .22) !important;
  outline-offset: 2px !important;
}

#root button[role="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: .55 !important;
}


@media (prefers-reduced-motion: reduce) {
  #root button[role="checkbox"] { transition: none !important; }
}

/* ===== SOURCE: assets/v76/kismart-v42-attendance-fixed-row.css ===== */
/*
 * KiSmart V42 — ringkasan kehadiran pendek, delapan kolom, tanpa scroll.
 *
 * Perbaikan inti:
 * - komponen tidak lagi memakai class generik `.grid` yang pada form HP
 *   dipaksa menjadi satu kolom oleh CSS lama;
 * - selector khusus ini menang atas aturan V17–V41 tanpa mengubah state,
 *   event klik, nilai, catatan, jurnal, absensi, API, atau database.
 */

:root {
  --ks-v42-att-gap: 3px;
  --ks-v42-att-height: 34px;
  --ks-v42-att-radius: 9px;
  --ks-v42-att-font: 9.5px;
}

html body .ks-attendance-summary-row[data-kismart-attendance-summary="1"],
html body .ks-attendance-summary-row[data-kismart-standalone-attendance-summary="1"] {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-template-rows: var(--ks-v42-att-height) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: var(--ks-v42-att-gap) !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  block-size: var(--ks-v42-att-height) !important;
  min-block-size: var(--ks-v42-att-height) !important;
  max-block-size: var(--ks-v42-att-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  touch-action: pan-y !important;
  scroll-snap-type: none !important;
  contain: layout style !important;
}

html body .ks-attendance-summary-row[data-kismart-attendance-summary="1"] > *,
html body .ks-attendance-summary-row[data-kismart-standalone-attendance-summary="1"] > * {
  box-sizing: border-box !important;
  display: inline-flex !important;
  grid-column: auto !important;
  grid-row: auto !important;
  place-self: stretch !important;
  position: relative !important;
  float: none !important;
  flex: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  block-size: var(--ks-v42-att-height) !important;
  min-block-size: var(--ks-v42-att-height) !important;
  max-block-size: var(--ks-v42-att-height) !important;
  margin: 0 !important;
  padding: 0 1px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ks-v42-att-radius) !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: inherit !important;
  font-size: var(--ks-v42-att-font) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10) !important;
  scroll-snap-align: none !important;
}

html body .ks-attendance-summary-row .ks-att-summary-code,
html body .ks-attendance-summary-row .ks-att-summary-count {
  display: inline !important;
  min-width: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  line-height: 1 !important;
  opacity: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

/* HP: kode singkat agar delapan kartu terlihat bersamaan. */
html body .ks-attendance-summary-row .ks-att-summary-name {
  display: none !important;
}

html body .ks-attendance-summary-row [data-att-summary-status="H"] {
  background: #168a43 !important;
  border-color: #117238 !important;
}
html body .ks-attendance-summary-row [data-att-summary-status="S"] {
  background: #df7c00 !important;
  border-color: #c66e00 !important;
}
html body .ks-attendance-summary-row [data-att-summary-status="I"] {
  background: #2e67e8 !important;
  border-color: #2558c9 !important;
}
html body .ks-attendance-summary-row [data-att-summary-status="A"] {
  background: #df2528 !important;
  border-color: #c91e21 !important;
}
html body .ks-attendance-summary-row [data-att-summary-status="B"] {
  background: #a80f42 !important;
  border-color: #8f0d38 !important;
}
html body .ks-attendance-summary-row [data-att-summary-status="D"] {
  background: #7734e8 !important;
  border-color: #6427cc !important;
}
html body .ks-attendance-summary-row [data-att-summary-status="U"] {
  background: #66788f !important;
  border-color: #56677c !important;
}

html body .ks-attendance-summary-row > [data-kismart-attendance-summary-total="1"] {
  background: #fff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07) !important;
}
html body .ks-attendance-summary-row [data-kismart-attendance-summary-total="1"] .ks-att-summary-code {
  display: inline !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
html body .ks-attendance-summary-row [data-kismart-attendance-summary-total="1"] .ks-att-summary-name {
  display: none !important;
}
html body .ks-attendance-summary-row [data-kismart-attendance-summary-total="1"] .ks-att-summary-count {
  display: inline !important;
  font-weight: 900 !important;
}

@media (max-width: 359px) {
  :root {
    --ks-v42-att-gap: 2px;
    --ks-v42-att-height: 32px;
    --ks-v42-att-radius: 8px;
    --ks-v42-att-font: 8.5px;
  }
  html body .ks-attendance-summary-row [data-kismart-attendance-summary-total="1"] .ks-att-summary-code {
    font-size: 10px !important;
  }
}

/* Nama lengkap hanya ketika ruang benar-benar cukup. */
@media (min-width: 620px) {
  :root {
    --ks-v42-att-gap: 5px;
    --ks-v42-att-height: 40px;
    --ks-v42-att-radius: 11px;
    --ks-v42-att-font: 11px;
  }
  html body .ks-attendance-summary-row .ks-att-summary-code {
    display: none !important;
  }
  html body .ks-attendance-summary-row .ks-att-summary-name {
    display: inline !important;
    min-width: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font: inherit !important;
    line-height: 1 !important;
  }
  html body .ks-attendance-summary-row [data-kismart-attendance-summary-total="1"] .ks-att-summary-code {
    display: inline !important;
  }
  html body .ks-attendance-summary-row [data-kismart-attendance-summary-total="1"] .ks-att-summary-name {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .ks-attendance-summary-row > * {
    transition: none !important;
  }
}
/* NOTESMART V46 — status penyimpanan draft dan panel pemulihan lokal. */
#notesmart-local-draft-status {
  box-sizing: border-box;
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  max-width: min(92vw, 420px);
  padding: 9px 13px;
  border: 1px solid rgba(15, 118, 110, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
  color: #0f5132;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 140ms ease, transform 140ms ease;
}
#notesmart-local-draft-status.is-visible { opacity: 1; transform: translate(-50%, 0); }
#notesmart-local-draft-status[data-tone="warn"] { border-color: rgba(217, 119, 6, .35); color: #92400e; }
#notesmart-local-draft-status[data-tone="neutral"] { border-color: rgba(100, 116, 139, .3); color: #475569; }

#notesmart-draft-recovery {
  box-sizing: border-box;
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 2147482999;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 12px;
  width: min(calc(100vw - 18px), 620px);
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, .28);
  border-radius: 16px;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .22);
  color: #0f172a;
  transform: translateX(-50%);
}
.ns-draft-recovery__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 22px;
  font-weight: 800;
}
.ns-draft-recovery__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ns-draft-recovery__body strong { font-size: 13px; line-height: 1.3; }
.ns-draft-recovery__body span { color: #64748b; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.ns-draft-recovery__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.ns-draft-recovery__actions button {
  box-sizing: border-box;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ns-draft-recovery__actions button[data-action="restore"] { border-color: #2563eb; background: #2563eb; color: #fff; }
.ns-draft-recovery__actions button[data-action="delete"] { color: #b91c1c; }
.ns-draft-recovery__actions button:disabled { opacity: .6; cursor: wait; }

@media (min-width: 768px) {
  #notesmart-local-draft-status,
  #notesmart-draft-recovery {
  box-sizing: border-box; bottom: 18px; }
  #notesmart-draft-recovery {
  box-sizing: border-box; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .ns-draft-recovery__actions { grid-column: auto; flex-wrap: nowrap; }
}
@media (max-width: 359px) {
  #notesmart-draft-recovery {
  box-sizing: border-box; width: calc(100vw - 10px); padding: 10px; gap: 8px; border-radius: 14px; }
  .ns-draft-recovery__actions { justify-content: stretch; }
  .ns-draft-recovery__actions button {
  box-sizing: border-box; flex: 1 1 auto; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #notesmart-local-draft-status {
  box-sizing: border-box; transition: none; }
}


/* ===== V47 UNIFIED INTERFACE ===== */
/* ============================================================
   NOTESMART V47 — UNIFIED ELEGANT INTERFACE
   Tampilan seluruh modul aktif mengikuti bahasa visual Beranda Guru.
   Hanya lapisan presentasi; tidak mengubah struktur data atau handler.
   ============================================================ */

:root {
  --ns47-green-950: #0b3b29;
  --ns47-green-900: #10533a;
  --ns47-green-800: #126b47;
  --ns47-green-700: #187a50;
  --ns47-green-600: #218a5d;
  --ns47-green-100: #dff3e8;
  --ns47-green-50: #eff9f3;
  --ns47-blue-50: #eff7ff;
  --ns47-ink: #173126;
  --ns47-muted: #61736a;
  --ns47-line: #d8e5dd;
  --ns47-line-strong: #c4d8cc;
  --ns47-page: #f3f8f5;
  --ns47-card: #ffffff;
  --ns47-radius-sm: 12px;
  --ns47-radius: 16px;
  --ns47-radius-lg: 22px;
  --ns47-radius-xl: 28px;
  --ns47-shadow-xs: 0 2px 9px rgba(16, 83, 58, .045);
  --ns47-shadow-sm: 0 9px 26px rgba(15, 58, 42, .075);
  --ns47-shadow: 0 18px 46px rgba(15, 58, 42, .105);
  --ns47-shadow-float: 0 24px 70px rgba(10, 47, 33, .16);
  --ns47-content: 1240px;
  --ns47-ease: cubic-bezier(.22, .8, .25, 1);
}

html.notesmart-v47,
html.notesmart-v47 body,
html.notesmart-v47 #root {
  background:
    radial-gradient(circle at 0% 0%, rgba(33, 138, 93, .105), transparent 31rem),
    radial-gradient(circle at 100% 5%, rgba(3, 105, 161, .055), transparent 25rem),
    linear-gradient(180deg, #fafdfb 0%, var(--ns47-page) 58%, #eef6f1 100%) !important;
}

html.notesmart-v47 body {
  color: var(--ns47-ink);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

/* ---------- App shell ---------- */
html.notesmart-v47 #root > div[class*="h-screen"],
html.notesmart-v47 #root > div[class*="min-h-screen"] {
  background: transparent !important;
}

html.notesmart-v47 aside {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--ns47-line) !important;
  box-shadow: 12px 0 34px rgba(16, 83, 58, .035);
}

html.notesmart-v47 aside > div:first-child {
  border-bottom: 1px solid rgba(216, 229, 221, .72);
  margin-bottom: 8px;
}

html.notesmart-v47 aside nav a {
  min-height: 44px;
  border-radius: 14px !important;
  margin-block: 3px;
  transition: background-color .16s var(--ns47-ease), color .16s var(--ns47-ease), transform .16s var(--ns47-ease), box-shadow .16s var(--ns47-ease) !important;
}

html.notesmart-v47 aside nav a[aria-current="page"] {
  background: linear-gradient(135deg, var(--ns47-green-50), #e5f5ec) !important;
  color: var(--ns47-green-800) !important;
  box-shadow: inset 3px 0 0 var(--ns47-green-700), var(--ns47-shadow-xs);
}

html.notesmart-v47 aside nav a:not([aria-current="page"]):hover {
  background: #f2f7f4 !important;
  transform: translateX(2px);
}

html.notesmart-v47 #root > div > div > header,
html.notesmart-v47 header.sticky {
  min-height: 58px;
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(216,229,221,.88) !important;
  box-shadow: 0 7px 24px rgba(16,83,58,.045);
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

html.notesmart-v47 #main-scrollable-area {
  background: transparent !important;
  scroll-behavior: auto !important;
  overscroll-behavior-y: contain;
}

/* ---------- Page container and heading ---------- */
html.notesmart-v47 .ns-v47-page {
  width: min(100%, var(--ns47-content));
  margin-inline: auto;
}

html.notesmart-v47 .ns-v47-page-header,
html.notesmart-v47 #main-scrollable-area > .ns-v47-page > header,
html.notesmart-v47 #main-scrollable-area > header {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196, 216, 204, .9) !important;
  border-radius: var(--ns47-radius-lg) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(33,138,93,.14), transparent 15rem),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,249,244,.98)) !important;
  box-shadow: var(--ns47-shadow-sm) !important;
  padding: 18px 20px !important;
  margin: 16px 16px 0 !important;
}

html.notesmart-v47 .ns-v47-page-header::before,
html.notesmart-v47 #main-scrollable-area > .ns-v47-page > header::before,
html.notesmart-v47 #main-scrollable-area > header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--ns47-green-600), var(--ns47-green-800));
}

html.notesmart-v47 .ns-v47-page-header h1,
html.notesmart-v47 #main-scrollable-area > .ns-v47-page > header h1,
html.notesmart-v47 #main-scrollable-area > header h1 {
  color: var(--ns47-green-950) !important;
  font-size: clamp(1.22rem, 2.2vw, 1.72rem) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.032em !important;
}

html.notesmart-v47 .ns-v47-page-header p,
html.notesmart-v47 #main-scrollable-area > .ns-v47-page > header p,
html.notesmart-v47 #main-scrollable-area > header p {
  color: var(--ns47-muted) !important;
  max-width: 72ch;
  line-height: 1.45 !important;
}

html.notesmart-v47 .ns-v47-content {
  width: min(100%, var(--ns47-content));
  margin-inline: auto;
}

/* ---------- Unified cards ---------- */
html.notesmart-v47 .ns-v47-card,
html.notesmart-v47 body:not(.ns-dashboard-page) #main-scrollable-area section.rounded-xl.border,
html.notesmart-v47 body:not(.ns-dashboard-page) #main-scrollable-area section.rounded-2xl.border,
html.notesmart-v47 body:not(.ns-dashboard-page) #main-scrollable-area article.rounded-xl.border,
html.notesmart-v47 body:not(.ns-dashboard-page) #main-scrollable-area article.rounded-2xl.border {
  border-color: var(--ns47-line) !important;
  background: rgba(255,255,255,.965) !important;
  border-radius: var(--ns47-radius-lg) !important;
  box-shadow: var(--ns47-shadow-xs) !important;
}

html.notesmart-v47 .ns-v47-card {
  transition: border-color .18s var(--ns47-ease), box-shadow .18s var(--ns47-ease), transform .18s var(--ns47-ease);
}

@media (hover:hover) and (pointer:fine) {
  html.notesmart-v47 .ns-v47-card:hover,
  html.notesmart-v47 .ns-menu-item:hover {
    border-color: var(--ns47-line-strong) !important;
    box-shadow: var(--ns47-shadow-sm) !important;
    transform: translateY(-1px);
  }
}

html.notesmart-v47 .ns-v47-card > h2:first-child,
html.notesmart-v47 .ns-v47-card > h3:first-child,
html.notesmart-v47 .ns-v47-card > div:first-child h2,
html.notesmart-v47 .ns-v47-card > div:first-child h3 {
  color: var(--ns47-green-950) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}

/* Toolbar/filter panel follows the compact front-page filter. */
html.notesmart-v47 .ns-v47-toolbar {
  border-color: var(--ns47-line) !important;
  border-radius: var(--ns47-radius-lg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,251,248,.98)) !important;
  box-shadow: var(--ns47-shadow-xs) !important;
}

/* ---------- Statistics ---------- */
html.notesmart-v47 .ns-v47-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 104px !important;
  border: 1px solid var(--ns47-line) !important;
  border-radius: var(--ns47-radius-lg) !important;
  background: linear-gradient(145deg, #fff, #f8fcf9) !important;
  box-shadow: var(--ns47-shadow-xs) !important;
}

html.notesmart-v47 .ns-v47-stat-card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  right: -24px;
  bottom: -30px;
  border-radius: 999px;
  background: rgba(33,138,93,.075);
  pointer-events: none;
}

html.notesmart-v47 .ns-v47-stat-card p:first-of-type,
html.notesmart-v47 .ns-v47-stat-card [class*="text-2xl"],
html.notesmart-v47 .ns-v47-stat-card [class*="text-3xl"] {
  color: var(--ns47-green-950) !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
}

/* ---------- Buttons ---------- */
html.notesmart-v47 button,
html.notesmart-v47 a[role="button"],
html.notesmart-v47 [role="button"] {
  min-height: 42px;
  border-radius: 13px !important;
  font-weight: 700;
  transition: transform .14s var(--ns47-ease), box-shadow .14s var(--ns47-ease), background-color .14s var(--ns47-ease), border-color .14s var(--ns47-ease) !important;
}

html.notesmart-v47 button[class*="bg-primary"],
html.notesmart-v47 a[class*="bg-primary"],
html.notesmart-v47 [role="button"][class*="bg-primary"] {
  background: linear-gradient(135deg, var(--ns47-green-700), var(--ns47-green-800)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(18,107,71,.18);
}

html.notesmart-v47 button[class*="bg-primary"]:hover,
html.notesmart-v47 a[class*="bg-primary"]:hover {
  background: linear-gradient(135deg, var(--ns47-green-600), var(--ns47-green-800)) !important;
  box-shadow: 0 11px 25px rgba(18,107,71,.24);
}

html.notesmart-v47 button[class*="border"],
html.notesmart-v47 a[class*="border"] {
  border-color: var(--ns47-line) !important;
}

html.notesmart-v47 button:not(:disabled):active,
html.notesmart-v47 a[role="button"]:active {
  transform: translateY(0) scale(.985) !important;
}

/* Icon-only action buttons stay compact. */
html.notesmart-v47 button:has(> svg:only-child),
html.notesmart-v47 a:has(> svg:only-child) {
  min-width: 40px;
  padding-inline: 10px;
}

/* ---------- Form controls ---------- */
html.notesmart-v47 input:not([type="checkbox"]):not([type="radio"]),
html.notesmart-v47 select,
html.notesmart-v47 textarea,
html.notesmart-v47 [role="combobox"] {
  border: 1px solid var(--ns47-line) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: inset 0 1px 2px rgba(15,58,42,.025) !important;
}

html.notesmart-v47 input:not([type="checkbox"]):not([type="radio"]):hover,
html.notesmart-v47 select:hover,
html.notesmart-v47 textarea:hover,
html.notesmart-v47 [role="combobox"]:hover {
  border-color: var(--ns47-line-strong) !important;
}

html.notesmart-v47 input:not([type="checkbox"]):not([type="radio"]):focus,
html.notesmart-v47 select:focus,
html.notesmart-v47 textarea:focus,
html.notesmart-v47 [role="combobox"]:focus,
html.notesmart-v47 [role="combobox"][data-state="open"] {
  border-color: var(--ns47-green-600) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(33,138,93,.13) !important;
}

html.notesmart-v47 label > span:first-child,
html.notesmart-v47 label[class*="space-y"] > span:first-child {
  color: var(--ns47-ink) !important;
  font-weight: 700 !important;
}

html.notesmart-v47 input[type="checkbox"],
html.notesmart-v47 input[type="radio"] {
  accent-color: var(--ns47-green-700);
}

/* ---------- Tabs ---------- */
html.notesmart-v47 [role="tablist"],
html.notesmart-v47 .ns-v47-tabs {
  border: 1px solid var(--ns47-line) !important;
  border-radius: 15px !important;
  background: #edf6f0 !important;
  padding: 4px !important;
  box-shadow: inset 0 1px 2px rgba(15,58,42,.035);
}

html.notesmart-v47 [role="tab"],
html.notesmart-v47 .ns-v47-tabs > button {
  min-height: 38px !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

html.notesmart-v47 [role="tab"][data-state="active"],
html.notesmart-v47 [role="tab"][aria-selected="true"],
html.notesmart-v47 .ns-v47-tabs > button[class*="bg-primary"] {
  background: #fff !important;
  color: var(--ns47-green-800) !important;
  box-shadow: 0 5px 14px rgba(16,83,58,.09) !important;
}

/* ---------- Tables ---------- */
html.notesmart-v47 .ns-v47-table-wrap,
html.notesmart-v47 .notesmart-admin-table-scroll,
html.notesmart-v47 .rounded-xl.border:has(> table),
html.notesmart-v47 .rounded-2xl.border:has(> table),
html.notesmart-v47 .rounded-xl.border:has(> div > table),
html.notesmart-v47 .rounded-2xl.border:has(> div > table) {
  border: 1px solid var(--ns47-line) !important;
  border-radius: var(--ns47-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--ns47-shadow-xs) !important;
  overflow: auto !important;
}

html.notesmart-v47 table {
  background: #fff;
  border-collapse: separate !important;
  border-spacing: 0;
}

html.notesmart-v47 thead th {
  background: linear-gradient(180deg, #eff8f2, #e8f3ec) !important;
  color: var(--ns47-green-950) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .045em;
  border-color: var(--ns47-line) !important;
}

html.notesmart-v47 tbody td {
  border-color: #e7efe9 !important;
}

html.notesmart-v47 tbody tr:nth-child(even) td {
  background: rgba(244,248,246,.55);
}

html.notesmart-v47 tbody tr:hover td {
  background: #f0f8f3 !important;
}

/* ---------- Dialog, popover, menu ---------- */
html.notesmart-v47 [role="dialog"] {
  border: 1px solid var(--ns47-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: var(--ns47-shadow-float) !important;
}

html.notesmart-v47 [role="dialog"] > button[class*="absolute"] {
  border-radius: 999px !important;
  background: #f1f6f3 !important;
}

html.notesmart-v47 [role="menu"],
html.notesmart-v47 [role="listbox"],
html.notesmart-v47 [data-radix-select-content] {
  border: 1px solid var(--ns47-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--ns47-shadow) !important;
}

/* ---------- Menu page ---------- */
html.notesmart-v47 body.ns-menu-page .ns-menu-content {
  width: min(100%, var(--ns47-content));
  margin-inline: auto;
}

html.notesmart-v47 body.ns-menu-page .ns-menu-profile {
  position: relative;
  overflow: hidden;
  border-radius: var(--ns47-radius-lg) !important;
  border-color: rgba(196,216,204,.9) !important;
  background:
    radial-gradient(circle at 96% 8%, rgba(33,138,93,.15), transparent 13rem),
    linear-gradient(135deg, #fff, #eef8f2) !important;
  box-shadow: var(--ns47-shadow-sm) !important;
}

html.notesmart-v47 body.ns-menu-page .ns-menu-section {
  padding: 14px;
  border: 1px solid rgba(216,229,221,.8);
  border-radius: var(--ns47-radius-lg);
  background: rgba(255,255,255,.68);
}

html.notesmart-v47 body.ns-menu-page .ns-menu-section > h2 {
  margin: 0 0 10px 2px !important;
  color: var(--ns47-green-800) !important;
  letter-spacing: .055em !important;
}

html.notesmart-v47 body.ns-menu-page .ns-menu-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}

html.notesmart-v47 body.ns-menu-page .ns-menu-item {
  min-height: 78px;
  border-color: var(--ns47-line) !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: var(--ns47-shadow-xs);
}

html.notesmart-v47 body.ns-menu-page .ns-menu-icon {
  flex: 0 0 auto;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #e2f4e9, #f1f9f4) !important;
  color: var(--ns47-green-800) !important;
}

/* ---------- Roster, journal and attendance list rows ---------- */
html.notesmart-v47 .ns-v47-row,
html.notesmart-v47 [data-kismart-attendance-row="1"] {
  border-color: var(--ns47-line) !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: var(--ns47-shadow-xs) !important;
}

html.notesmart-v47 [data-kismart-attendance-row="1"]:focus-within,
html.notesmart-v47 .ns-v47-row:focus-within {
  border-color: rgba(33,138,93,.5) !important;
  box-shadow: 0 0 0 3px rgba(33,138,93,.09), var(--ns47-shadow-xs) !important;
}

/* ---------- Empty/error/loading ---------- */
html.notesmart-v47 .ns-v47-empty,
html.notesmart-v47 [class*="border-dashed"] {
  border-color: #bfd7c8 !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fbfefc, #f1f8f4) !important;
}

html.notesmart-v47 [role="alert"] {
  border-radius: 16px !important;
  box-shadow: var(--ns47-shadow-xs);
}

/* ---------- Mobile bottom navigation ---------- */
html.notesmart-v47 nav[aria-label="Navigasi utama"][class*="fixed"] {
  border-color: rgba(196,216,204,.95) !important;
  background: rgba(255,255,255,.965) !important;
  box-shadow: 0 16px 46px rgba(10,47,33,.18) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

html.notesmart-v47 nav[aria-label="Navigasi utama"] a[aria-current="page"] {
  background: #eff8f2;
  color: var(--ns47-green-800) !important;
}

/* ---------- Auxiliary/static page helpers ---------- */
html.notesmart-v47-static body {
  background:
    radial-gradient(circle at 0 0, rgba(33,138,93,.11), transparent 28rem),
    linear-gradient(180deg, #fafdfb, var(--ns47-page)) !important;
  color: var(--ns47-ink) !important;
}

html.notesmart-v47-static main,
html.notesmart-v47-static .container,
html.notesmart-v47-static .wrap,
html.notesmart-v47-static .shell {
  max-width: var(--ns47-content);
  margin-inline: auto;
}

html.notesmart-v47-static .card,
html.notesmart-v47-static section,
html.notesmart-v47-static article {
  border-color: var(--ns47-line) !important;
  border-radius: var(--ns47-radius-lg) !important;
  box-shadow: var(--ns47-shadow-sm) !important;
}

/* ---------- Login follows the same clean visual language ---------- */
html.notesmart-v47 body:has(input#teacher_code) form,
html.notesmart-v47 body:has(input#username) form,
html.notesmart-v47 body:has(input#password) form {
  border: 1px solid var(--ns47-line) !important;
  border-radius: var(--ns47-radius-xl) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: var(--ns47-shadow-float) !important;
}

html.notesmart-v47 body:has(input#teacher_code) main,
html.notesmart-v47 body:has(input#username) main,
html.notesmart-v47 body:has(input#password) main {
  background:
    radial-gradient(circle at 14% 8%, rgba(33,138,93,.15), transparent 24rem),
    radial-gradient(circle at 88% 12%, rgba(3,105,161,.08), transparent 20rem),
    linear-gradient(180deg, #fbfefc, #eef7f1) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  html.notesmart-v47 .ns-v47-page-header,
  html.notesmart-v47 #main-scrollable-area > .ns-v47-page > header,
  html.notesmart-v47 #main-scrollable-area > header {
    border-radius: 19px !important;
    margin: 12px 12px 0 !important;
    padding: 15px 16px !important;
  }

  html.notesmart-v47 .ns-v47-page-header > div:last-child,
  html.notesmart-v47 #main-scrollable-area > header > div:last-child {
    width: 100%;
  }

  html.notesmart-v47 .ns-v47-content,
  html.notesmart-v47 .ns-menu-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html.notesmart-v47 .ns-v47-card,
  html.notesmart-v47 .ns-v47-toolbar,
  html.notesmart-v47 .ns-v47-stat-card {
    border-radius: 18px !important;
  }

  html.notesmart-v47 body.ns-menu-page .ns-menu-section {
    padding: 10px;
    border-radius: 18px;
  }

  html.notesmart-v47 body.ns-menu-page .ns-menu-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html.notesmart-v47 body.ns-menu-page .ns-menu-item {
    min-height: 68px;
    padding: 11px !important;
  }

  html.notesmart-v47 table {
    font-size: 12px;
  }

  html.notesmart-v47 thead th {
    font-size: 10px !important;
  }

  html.notesmart-v47 [role="dialog"] {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 20px !important;
  }
}

@media (min-width: 768px) {
  html.notesmart-v47 .ns-v47-page-header,
  html.notesmart-v47 #main-scrollable-area > .ns-v47-page > header,
  html.notesmart-v47 #main-scrollable-area > header {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  html.notesmart-v47 .ns-v47-content,
  html.notesmart-v47 .ns-menu-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1180px) {
  html.notesmart-v47 .ns-v47-page-header,
  html.notesmart-v47 #main-scrollable-area > .ns-v47-page > header,
  html.notesmart-v47 #main-scrollable-area > header {
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(min(100%, var(--ns47-content)) - 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.notesmart-v47 *,
  html.notesmart-v47 *::before,
  html.notesmart-v47 *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  html.notesmart-v47,
  html.notesmart-v47 body,
  html.notesmart-v47 #root,
  html.notesmart-v47 #main-scrollable-area {
    background: #fff !important;
  }
  html.notesmart-v47 .ns-v47-card,
  html.notesmart-v47 .ns-v47-toolbar,
  html.notesmart-v47 .ns-v47-page-header {
    box-shadow: none !important;
  }
}


/* NOTESMART V48 — status antrean sinkronisasi offline */
#notesmart-offline-queue-status{
  position:fixed;
  left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));
  bottom:calc(76px + env(safe-area-inset-bottom));
  z-index:9995;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:680px;
  min-height:46px;
  margin-inline:auto;
  padding:9px 10px 9px 12px;
  border:1px solid rgba(30,122,77,.24);
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 12px 32px rgba(15,23,42,.16);
  color:#173f2b;
  font-size:12px;
  line-height:1.35;
  box-sizing:border-box;
}
#notesmart-offline-queue-status[hidden]{display:none!important}
#notesmart-offline-queue-status .ns-queue-dot{
  width:9px;height:9px;flex:0 0 9px;border-radius:999px;background:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.13)
}
#notesmart-offline-queue-status .ns-queue-message{min-width:0;flex:1;font-weight:650;overflow-wrap:anywhere}
#notesmart-offline-queue-status .ns-queue-sync{
  flex:0 0 auto;min-height:34px;padding:6px 11px;border:0;border-radius:10px;background:#1f7a4d;color:#fff;font:inherit;font-weight:750;cursor:pointer
}
#notesmart-offline-queue-status .ns-queue-sync:hover{background:#17623d}
#notesmart-offline-queue-status .ns-queue-sync:disabled{opacity:.58;cursor:wait}
#notesmart-offline-queue-status[data-state="syncing"] .ns-queue-dot{background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.13);animation:nsQueuePulse 1.1s ease-in-out infinite}
#notesmart-offline-queue-status[data-state="failed"]{border-color:rgba(185,28,28,.24);color:#7f1d1d}
#notesmart-offline-queue-status[data-state="failed"] .ns-queue-dot{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.13)}
#notesmart-offline-queue-status[data-state="offline"]{border-color:rgba(217,119,6,.26);color:#78350f}
#notesmart-offline-queue-status[data-state="synced"]{border-color:rgba(22,163,74,.26);color:#166534}
#notesmart-offline-queue-status[data-state="synced"] .ns-queue-dot{background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.13)}
@keyframes nsQueuePulse{50%{opacity:.42;transform:scale(.82)}}
@media (min-width:768px){#notesmart-offline-queue-status{bottom:18px;left:auto;right:18px;width:min(520px,calc(100vw - 36px));margin:0}}
@media (max-width:359px){#notesmart-offline-queue-status{left:8px;right:8px;gap:7px;padding-left:10px;font-size:11px}#notesmart-offline-queue-status .ns-queue-sync{padding-inline:8px}}
@media (prefers-reduced-motion:reduce){#notesmart-offline-queue-status .ns-queue-dot{animation:none!important}}

/* NOTESMART V49 — pengelola antrean dan status sinkronisasi tangguh */
#notesmart-offline-queue-status .ns-queue-actions{
  display:flex;align-items:center;gap:6px;flex:0 0 auto
}
#notesmart-offline-queue-status .ns-queue-manage{
  min-height:34px;padding:6px 10px;border:1px solid rgba(30,122,77,.22);border-radius:10px;background:#f3faf6;color:#17623d;font:inherit;font-weight:750;cursor:pointer
}
#notesmart-offline-queue-status .ns-queue-manage:hover{background:#e7f5ec}
#notesmart-offline-queue-status[data-state="auth"]{border-color:rgba(124,58,237,.24);color:#5b21b6}
#notesmart-offline-queue-status[data-state="auth"] .ns-queue-dot{background:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.13)}
#notesmart-offline-queue-status[data-state="review"]{border-color:rgba(190,24,93,.24);color:#831843}
#notesmart-offline-queue-status[data-state="review"] .ns-queue-dot{background:#be185d;box-shadow:0 0 0 4px rgba(190,24,93,.13)}

html.notesmart-queue-manager-open,
html.notesmart-queue-manager-open body{overflow:hidden!important}
#notesmart-queue-manager[hidden]{display:none!important}
#notesmart-queue-manager{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:14px;box-sizing:border-box}
#notesmart-queue-manager .ns-qm-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#notesmart-queue-manager .ns-qm-dialog{
  position:relative;z-index:1;width:min(760px,100%);max-height:min(86dvh,820px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #c8ddd0;border-radius:24px;background:#fff;box-shadow:0 26px 70px rgba(15,47,32,.28);color:#173f2b
}
#notesmart-queue-manager .ns-qm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 20px 14px;border-bottom:1px solid #e2eee6;background:linear-gradient(145deg,#fbfefc,#f1f8f4)}
#notesmart-queue-manager .ns-qm-eyebrow{margin:0 0 3px;color:#1f7a4d;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
#notesmart-queue-manager h2{margin:0;color:#123924;font-size:21px;line-height:1.2}
#notesmart-queue-manager .ns-qm-subtitle{margin:5px 0 0;color:#587163;font-size:12px;line-height:1.45}
#notesmart-queue-manager .ns-qm-close{flex:0 0 auto;width:38px;height:38px;border:1px solid #c8ddd0;border-radius:12px;background:#fff;color:#365746;font-size:24px;line-height:1;cursor:pointer}
#notesmart-queue-manager .ns-qm-close:hover{background:#edf7f1}
#notesmart-queue-manager .ns-qm-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px 8px}
#notesmart-queue-manager button{font-family:inherit}
#notesmart-queue-manager .ns-qm-primary,
#notesmart-queue-manager .ns-qm-secondary,
#notesmart-queue-manager .ns-qm-danger{min-height:38px;padding:8px 12px;border-radius:11px;font-size:12px;font-weight:800;cursor:pointer}
#notesmart-queue-manager .ns-qm-primary{border:1px solid #1f7a4d;background:#1f7a4d;color:#fff}
#notesmart-queue-manager .ns-qm-primary:hover{background:#17623d}
#notesmart-queue-manager .ns-qm-secondary{border:1px solid #bdd8c7;background:#f2faf5;color:#17623d}
#notesmart-queue-manager .ns-qm-secondary:hover{background:#e6f4eb}
#notesmart-queue-manager .ns-qm-danger{border:1px solid #fecaca;background:#fff7f7;color:#b91c1c}
#notesmart-queue-manager .ns-qm-danger:hover{background:#feecec}
#notesmart-queue-manager button:disabled{opacity:.48;cursor:not-allowed}
#notesmart-queue-manager .ns-qm-summary{padding:2px 20px 10px;color:#587163;font-size:12px;font-weight:650}
#notesmart-queue-manager .ns-qm-list{min-height:0;overflow:auto;padding:0 20px 16px;overscroll-behavior:contain}
#notesmart-queue-manager .ns-qm-item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:9px;padding:14px;border:1px solid #d6e6dc;border-radius:16px;background:#fff;box-shadow:0 5px 15px rgba(15,47,32,.055)}
#notesmart-queue-manager .ns-qm-item[data-status="failed"]{border-color:#fecaca;background:#fffafa}
#notesmart-queue-manager .ns-qm-item[data-status="auth_required"]{border-color:#ddd6fe;background:#fcfaff}
#notesmart-queue-manager .ns-qm-item[data-status="conflict"],
#notesmart-queue-manager .ns-qm-item[data-status="uncertain"]{border-color:#fbcfe8;background:#fffafd}
#notesmart-queue-manager .ns-qm-item-main{min-width:0;flex:1}
#notesmart-queue-manager .ns-qm-item-title{display:flex;align-items:center;gap:8px;min-width:0}
#notesmart-queue-manager .ns-qm-item-title strong{min-width:0;overflow-wrap:anywhere;color:#173f2b;font-size:13px}
#notesmart-queue-manager .ns-qm-kind{flex:0 0 auto;padding:3px 6px;border-radius:7px;background:#e7f5ec;color:#17623d;font-size:9px;font-weight:900;letter-spacing:.06em}
#notesmart-queue-manager .ns-qm-meta{margin:5px 0 0;color:#708278;font-size:11px}
#notesmart-queue-manager .ns-qm-state{margin:5px 0 0;color:#4b6356;font-size:11px;line-height:1.45;overflow-wrap:anywhere}
#notesmart-queue-manager .ns-qm-item-actions{display:flex;flex:0 0 auto;gap:6px;align-items:center}
#notesmart-queue-manager .ns-qm-empty{display:grid;gap:5px;margin-top:8px;padding:28px 18px;border:1px dashed #bdd8c7;border-radius:17px;background:#f7fcf9;text-align:center}
#notesmart-queue-manager .ns-qm-empty strong{color:#173f2b;font-size:14px}
#notesmart-queue-manager .ns-qm-empty span{color:#708278;font-size:12px}
#notesmart-queue-manager .ns-qm-foot{padding:10px 20px 15px;border-top:1px solid #e2eee6;background:#fbfefc}
#notesmart-queue-manager .ns-qm-foot p{margin:0;color:#708278;font-size:10px;line-height:1.4}

@media(max-width:600px){
  #notesmart-offline-queue-status{align-items:flex-start}
  #notesmart-offline-queue-status .ns-queue-actions{align-self:center}
  #notesmart-offline-queue-status .ns-queue-manage{padding-inline:8px}
  #notesmart-queue-manager{padding:0;align-items:end}
  #notesmart-queue-manager .ns-qm-dialog{width:100%;max-height:92dvh;border-radius:23px 23px 0 0;border-bottom:0}
  #notesmart-queue-manager .ns-qm-head{padding:17px 15px 12px}
  #notesmart-queue-manager .ns-qm-toolbar{padding:10px 15px 7px}
  #notesmart-queue-manager .ns-qm-summary{padding-inline:15px}
  #notesmart-queue-manager .ns-qm-list{padding:0 15px 14px}
  #notesmart-queue-manager .ns-qm-item{display:block;padding:12px}
  #notesmart-queue-manager .ns-qm-item-actions{margin-top:10px}
  #notesmart-queue-manager .ns-qm-item-actions button{flex:1}
  #notesmart-queue-manager .ns-qm-foot{padding:9px 15px calc(12px + env(safe-area-inset-bottom))}
}
@media(max-width:359px){
  #notesmart-offline-queue-status{flex-wrap:wrap}
  #notesmart-offline-queue-status .ns-queue-message{flex-basis:calc(100% - 20px)}
  #notesmart-offline-queue-status .ns-queue-actions{width:100%;justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){#notesmart-queue-manager .ns-qm-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}


/* ===== retained cascade: notesmart-v50-omi-smooth.css ===== */
/*
 * NoteSmart V50 — OMI Smooth Design System
 * Presentation-only override. No API, data, route, form, autosave, attendance,
 * roster, reporting, offline queue, or application logic is changed here.
 */

:root{
  --ns50-page:#f3f7f5;
  --ns50-page-2:#eaf3ef;
  --ns50-card:#fff;
  --ns50-card-soft:#f8fbf9;
  --ns50-ink:#14231e;
  --ns50-muted:#68766f;
  --ns50-line:#dbe5e0;
  --ns50-line-strong:#bfd1c8;
  --ns50-green:#086451;
  --ns50-green-2:#0a7a61;
  --ns50-green-dark:#123e34;
  --ns50-green-soft:#e9f4ef;
  --ns50-gold:#c99026;
  --ns50-blue:#176b87;
  --ns50-purple:#6a4b80;
  --ns50-danger:#b33c4b;
  --ns50-warning:#a9690b;
  --ns50-radius-xs:10px;
  --ns50-radius-sm:13px;
  --ns50-radius:18px;
  --ns50-radius-lg:24px;
  --ns50-radius-xl:30px;
  --ns50-shadow-xs:0 3px 12px rgba(18,62,52,.045);
  --ns50-shadow-sm:0 10px 28px rgba(18,62,52,.075);
  --ns50-shadow:0 18px 48px rgba(18,62,52,.105);
  --ns50-shadow-float:0 24px 72px rgba(18,62,52,.18);
  --ns50-ease:cubic-bezier(.22,1,.36,1);
  --ns50-ease-standard:cubic-bezier(.2,0,0,1);
  --ns50-fast:130ms;
  --ns50-medium:210ms;
  --ns50-slow:320ms;
  --ns50-content:1240px;
}

html.notesmart-v50{
  color-scheme:light;
  background:var(--ns50-page);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

html.notesmart-v50 body,
html.notesmart-v50 #root{
  min-height:100vh;
  min-height:100dvh;
  color:var(--ns50-ink);
  background:
    radial-gradient(circle at 8% -10%,rgba(8,100,81,.11),transparent 30rem),
    radial-gradient(circle at 96% 18%,rgba(201,144,38,.065),transparent 24rem),
    linear-gradient(180deg,#f9fbfa 0%,var(--ns50-page) 46%,var(--ns50-page-2) 100%) !important;
}

html.notesmart-v50 body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  letter-spacing:-.008em;
}

html.notesmart-v50 *,
html.notesmart-v50 *::before,
html.notesmart-v50 *::after{box-sizing:border-box}

html.notesmart-v50 :where(button,a,[role="button"],input,select,textarea,[role="combobox"]){
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

html.notesmart-v50 :where(img,svg,video,canvas,iframe){max-width:100%}
html.notesmart-v50 :where(h1,h2,h3,h4){color:var(--ns50-ink);letter-spacing:-.028em;text-wrap:balance}
html.notesmart-v50 :where(p,li,td,th,label,small){text-wrap:pretty}
html.notesmart-v50 :where(.text-muted-foreground,[class*="text-muted"]){color:var(--ns50-muted)!important}

/* Smooth scrolling without forcing expensive animation on every element. */
html.notesmart-v50 :where(.overflow-auto,.overflow-y-auto,.overflow-x-auto,[data-radix-scroll-area-viewport],#main-scrollable-area){
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(8,100,81,.28) transparent;
}
html.notesmart-v50 :where(.overflow-auto,.overflow-y-auto,.overflow-x-auto,[data-radix-scroll-area-viewport],#main-scrollable-area)::-webkit-scrollbar{width:7px;height:7px}
html.notesmart-v50 :where(.overflow-auto,.overflow-y-auto,.overflow-x-auto,[data-radix-scroll-area-viewport],#main-scrollable-area)::-webkit-scrollbar-thumb{background:rgba(8,100,81,.25);border-radius:999px}

/* ===== Main application shell ===== */
html.notesmart-v50 #root>div{
  background:transparent!important;
}

html.notesmart-v50 #main-scrollable-area{
  scroll-padding-top:76px;
  background:transparent!important;
  isolation:isolate;
}

html.notesmart-v50 #main-scrollable-area>.ns-v47-page,
html.notesmart-v50 #main-scrollable-area>.ns-v47-content{
  width:min(100%,var(--ns50-content));
  margin-inline:auto;
  animation:ns50-page-in var(--ns50-medium) var(--ns50-ease) both;
}

@keyframes ns50-page-in{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Top app bar: OMI-like, calmer, with low-cost blur. */
html.notesmart-v50 #root header.sticky,
html.notesmart-v50 #root header[class*="top-0"],
html.notesmart-v50 #root>div>div>header{
  min-height:64px!important;
  border-color:rgba(191,209,200,.72)!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 1px 0 rgba(18,62,52,.025)!important;
  transform:translateZ(0);
  backface-visibility:hidden;
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.notesmart-v50 #root header.sticky,
  html.notesmart-v50 #root header[class*="top-0"]{
    backdrop-filter:saturate(1.08) blur(14px)!important;
    -webkit-backdrop-filter:saturate(1.08) blur(14px)!important;
  }
}

html.notesmart-v50 #root header :where(.h-8.w-8,.h-9.w-9,.h-10.w-10):not(input){
  border-radius:13px!important;
}
html.notesmart-v50 #root header :where(.bg-primary,[class*="bg-primary"]):not([class*="soft"]){
  background:linear-gradient(145deg,var(--ns50-green),var(--ns50-green-dark))!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(8,100,81,.20)!important;
}

/* Desktop sidebar: compact, quiet and professional. */
html.notesmart-v50 #root [class*="w-64"][class*="border-r"]{
  width:248px!important;
  border-color:var(--ns50-line)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:8px 0 32px rgba(18,62,52,.035)!important;
}
html.notesmart-v50 #root [class*="w-64"][class*="border-r"] nav{padding-inline:11px!important}
html.notesmart-v50 #root [class*="w-64"][class*="border-r"] a,
html.notesmart-v50 #root [class*="w-64"][class*="border-r"] button{
  min-height:44px;
  border-radius:13px!important;
  transition:background-color var(--ns50-fast) var(--ns50-ease-standard),color var(--ns50-fast) var(--ns50-ease-standard),transform var(--ns50-fast) var(--ns50-ease)!important;
}
html.notesmart-v50 #root [class*="w-64"][class*="border-r"] a:hover{
  background:var(--ns50-green-soft)!important;
  color:var(--ns50-green-dark)!important;
  transform:translateX(2px);
}
html.notesmart-v50 #root [class*="w-64"][class*="border-r"] :where(a,button)[class*="bg-primary"]{
  background:linear-gradient(135deg,var(--ns50-green),var(--ns50-green-2))!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(8,100,81,.17)!important;
}

/* Bottom navigation: floating native-app dock. */
html.notesmart-v50 nav[aria-label="Navigasi utama"][class*="fixed"],
html.notesmart-v50 #root nav.fixed.bottom-0{
  left:10px!important;
  right:10px!important;
  bottom:max(9px,env(safe-area-inset-bottom,0px))!important;
  width:auto!important;
  border:1px solid rgba(191,209,200,.92)!important;
  border-radius:21px!important;
  background:rgba(255,255,255,.965)!important;
  box-shadow:0 16px 42px rgba(18,62,52,.16)!important;
  overflow:hidden;
  transform:translateZ(0);
}
html.notesmart-v50 nav[aria-label="Navigasi utama"] a,
html.notesmart-v50 nav[aria-label="Navigasi utama"] button{
  min-height:62px!important;
  border-radius:16px!important;
  transition:color var(--ns50-fast) ease,background-color var(--ns50-fast) ease,transform var(--ns50-fast) var(--ns50-ease)!important;
}
html.notesmart-v50 nav[aria-label="Navigasi utama"] :where(a,button):active{transform:scale(.96)!important}
html.notesmart-v50 nav[aria-label="Navigasi utama"] [class*="top-1"][class*="h-1"]{
  top:auto!important;
  bottom:3px!important;
  height:3px!important;
  border-radius:999px!important;
  background:var(--ns50-green)!important;
}

/* ===== Page headers ===== */
html.notesmart-v50 .ns-v47-page-header{
  border-bottom:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding-top:clamp(16px,3vw,28px)!important;
  padding-bottom:12px!important;
}
html.notesmart-v50 .ns-v47-page-header h1{
  font-size:clamp(1.45rem,4vw,2.25rem)!important;
  line-height:1.12!important;
  font-weight:850!important;
}
html.notesmart-v50 .ns-v47-page-header p{max-width:68ch;color:var(--ns50-muted)!important}

/* ===== Cards and panels ===== */
html.notesmart-v50 :where(.ns-v47-card,.ns-v47-row,.ns-v47-stat-card,.rounded-xl.border,.rounded-2xl.border,.rounded-lg.border,.bg-card.border){
  border-color:var(--ns50-line)!important;
  background:rgba(255,255,255,.975)!important;
  box-shadow:var(--ns50-shadow-xs)!important;
}
html.notesmart-v50 :where(.ns-v47-card,.rounded-xl.border,.rounded-2xl.border){border-radius:var(--ns50-radius-lg)!important}
html.notesmart-v50 :where(.ns-v47-row,.rounded-lg.border){border-radius:var(--ns50-radius)!important}

html.notesmart-v50 .ns-v47-card,
html.notesmart-v50 .ns-v47-row,
html.notesmart-v50 .ns-v47-stat-card{
  transition:border-color var(--ns50-medium) ease,box-shadow var(--ns50-medium) var(--ns50-ease),transform var(--ns50-medium) var(--ns50-ease)!important;
}
@media (hover:hover) and (pointer:fine){
  html.notesmart-v50 :where(.ns-v47-card,.ns-v47-row,.ns-v47-stat-card):hover{
    border-color:var(--ns50-line-strong)!important;
    box-shadow:var(--ns50-shadow-sm)!important;
    transform:translate3d(0,-2px,0);
  }
}

/* Dashboard statistic cards echo OMI subjects while staying restrained. */
html.notesmart-v50 .ns-v47-stat-card{
  min-height:100px!important;
  overflow:hidden;
  position:relative;
  background:linear-gradient(145deg,#fff,#f6faf8)!important;
}
html.notesmart-v50 .ns-v47-stat-card::after{
  content:"";
  position:absolute;
  right:-30px;
  bottom:-42px;
  width:104px;
  height:104px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(8,100,81,.105),rgba(8,100,81,0) 70%);
  pointer-events:none;
}
html.notesmart-v50 .ns-v47-stat-card :where([class*="text-2xl"],[class*="text-3xl"]){
  color:var(--ns50-green-dark)!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
}

/* Important green panels such as journal header keep a premium OMI hero tone. */
html.notesmart-v50 :where(.ns-journal-header,[class*="bg-emerald-600"],[class*="bg-primary"][class*="text-primary-foreground"]):not(button):not(a){
  background:linear-gradient(135deg,var(--ns50-green),var(--ns50-green-dark))!important;
  color:#fff!important;
  border-color:transparent!important;
}
html.notesmart-v50 .ns-journal-header{
  border-radius:0 0 var(--ns50-radius-lg) var(--ns50-radius-lg)!important;
  box-shadow:0 14px 34px rgba(18,62,52,.13)!important;
}
html.notesmart-v50 .ns-journal-header :where(h1,h2,h3,p,span){color:inherit!important}

/* Toolbars and filters */
html.notesmart-v50 :where(.ns-v47-toolbar,[class*="bg-muted"][class*="rounded"]){
  border-color:var(--ns50-line)!important;
  background:linear-gradient(135deg,#fff,#f5faf7)!important;
  border-radius:var(--ns50-radius)!important;
}

/* ===== Buttons ===== */
html.notesmart-v50 :where(button,a[role="button"],[role="button"]){
  min-height:42px;
  border-radius:var(--ns50-radius-sm)!important;
  font-weight:750;
  transition:transform var(--ns50-fast) var(--ns50-ease),box-shadow var(--ns50-fast) var(--ns50-ease),background-color var(--ns50-fast) ease,border-color var(--ns50-fast) ease,color var(--ns50-fast) ease!important;
}
html.notesmart-v50 :where(button,a[role="button"],[role="button"]):not(:disabled):active{transform:scale(.975)!important}
@media (hover:hover) and (pointer:fine){
  html.notesmart-v50 :where(button,a[role="button"],[role="button"]):not(:disabled):hover{transform:translate3d(0,-1px,0)}
}

html.notesmart-v50 :where(button,a,[role="button"])[class*="bg-primary"],
html.notesmart-v50 :where(button,a,[role="button"])[class*="bg-emerald-6"]{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--ns50-green),var(--ns50-green-2))!important;
  box-shadow:0 8px 20px rgba(8,100,81,.18)!important;
}
html.notesmart-v50 :where(button,a,[role="button"])[class*="outline"],
html.notesmart-v50 :where(button,a,[role="button"])[class*="border"]:not([class*="bg-primary"]){
  border-color:var(--ns50-line)!important;
}
html.notesmart-v50 button:disabled,
html.notesmart-v50 [aria-disabled="true"]{opacity:.56!important;box-shadow:none!important;transform:none!important}
html.notesmart-v50 button:has(>svg:only-child),
html.notesmart-v50 a:has(>svg:only-child){min-width:40px;padding-inline:10px}

/* ===== Form controls ===== */
html.notesmart-v50 :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea,[role="combobox"],[data-radix-select-trigger]){
  min-height:44px;
  border:1px solid var(--ns50-line)!important;
  border-radius:var(--ns50-radius-sm)!important;
  background:#fff!important;
  color:var(--ns50-ink)!important;
  box-shadow:inset 0 1px 2px rgba(18,62,52,.025)!important;
  transition:border-color var(--ns50-fast) ease,box-shadow var(--ns50-fast) ease,background-color var(--ns50-fast) ease!important;
}
html.notesmart-v50 textarea{min-height:100px;line-height:1.55}
html.notesmart-v50 :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea,[role="combobox"]):focus,
html.notesmart-v50 [role="combobox"][data-state="open"]{
  outline:0!important;
  border-color:var(--ns50-green)!important;
  box-shadow:0 0 0 4px rgba(8,100,81,.10)!important;
}
html.notesmart-v50 :where(input,textarea)::placeholder{color:#93a09a!important}
html.notesmart-v50 :where(input[type="checkbox"],input[type="radio"]){accent-color:var(--ns50-green)}
html.notesmart-v50 label{color:var(--ns50-ink);font-weight:650}

/* ===== Tabs and chips ===== */
html.notesmart-v50 :where([role="tablist"],.ns-v47-tabs){
  padding:4px!important;
  border:1px solid var(--ns50-line)!important;
  border-radius:15px!important;
  background:#eaf3ef!important;
  box-shadow:inset 0 1px 2px rgba(18,62,52,.03)!important;
}
html.notesmart-v50 :where([role="tab"],.ns-v47-tabs>button){
  min-height:38px!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
html.notesmart-v50 :where([role="tab"][aria-selected="true"],[role="tab"][data-state="active"],.ns-v47-tabs>button[class*="bg-primary"]){
  color:var(--ns50-green-dark)!important;
  background:#fff!important;
  box-shadow:0 5px 15px rgba(18,62,52,.085)!important;
}
html.notesmart-v50 :where([class*="badge"],.badge,[class*="rounded-full"]):not(button):not(a){
  border-color:rgba(191,209,200,.9)!important;
}

/* ===== Tables ===== */
html.notesmart-v50 :where(.ns-v47-table-wrap,.notesmart-admin-table-scroll,.rounded-xl.border:has(table),.rounded-2xl.border:has(table)){
  border:1px solid var(--ns50-line)!important;
  border-radius:var(--ns50-radius-lg)!important;
  background:#fff!important;
  box-shadow:var(--ns50-shadow-xs)!important;
  overflow:auto!important;
}
html.notesmart-v50 table{background:#fff;border-collapse:separate!important;border-spacing:0}
html.notesmart-v50 thead th{
  background:linear-gradient(180deg,#eff7f3,#e7f1ec)!important;
  color:var(--ns50-green-dark)!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.045em;
  text-transform:uppercase;
  border-color:var(--ns50-line)!important;
}
html.notesmart-v50 tbody td{border-color:#e8efeb!important}
html.notesmart-v50 tbody tr:nth-child(even) td{background:rgba(246,250,248,.72)}
@media (hover:hover) and (pointer:fine){html.notesmart-v50 tbody tr:hover td{background:#eef7f2!important}}

/* ===== Menus, popovers, dialogs and sheets ===== */
html.notesmart-v50 :where([role="dialog"],[role="menu"],[role="listbox"],[data-radix-select-content]){
  border:1px solid var(--ns50-line)!important;
  background:#fff!important;
  box-shadow:var(--ns50-shadow-float)!important;
}
html.notesmart-v50 [role="dialog"]{
  border-radius:var(--ns50-radius-lg)!important;
  animation:ns50-dialog-in var(--ns50-medium) var(--ns50-ease) both;
}
html.notesmart-v50 :where([role="menu"],[role="listbox"],[data-radix-select-content]){
  border-radius:16px!important;
  animation:ns50-menu-in 150ms var(--ns50-ease) both;
}
@keyframes ns50-dialog-in{from{opacity:0;transform:translate3d(0,10px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes ns50-menu-in{from{opacity:0;transform:translate3d(0,-5px,0) scale(.99)}to{opacity:1;transform:none}}
html.notesmart-v50 :where([role="option"],[role="menuitem"]){min-height:42px;border-radius:10px!important}

/* ===== Attendance and journal ===== */
html.notesmart-v50 [data-kismart-attendance-row="1"],
html.notesmart-v50 .ns-v47-row{
  background:#fff!important;
  border-color:var(--ns50-line)!important;
  box-shadow:var(--ns50-shadow-xs)!important;
}
html.notesmart-v50 [data-kismart-attendance-row="1"]:focus-within,
html.notesmart-v50 .ns-v47-row:focus-within{
  border-color:rgba(8,100,81,.48)!important;
  box-shadow:0 0 0 4px rgba(8,100,81,.085),var(--ns50-shadow-xs)!important;
}
html.notesmart-v50 .ns-journal-mode-card,
html.notesmart-v50 .ns-journal-class-picker{
  border-radius:var(--ns50-radius)!important;
  border-color:var(--ns50-line)!important;
  box-shadow:var(--ns50-shadow-xs)!important;
}
html.notesmart-v50 .ns-journal-mode-custom{background:#eaf3ef!important;border:1px solid var(--ns50-line)!important}
html.notesmart-v50 .ns-journal-mode-button{border-radius:12px!important}
html.notesmart-v50 .ns-journal-mode-button.is-active{
  background:#fff!important;
  color:var(--ns50-green-dark)!important;
  box-shadow:0 6px 16px rgba(18,62,52,.09)!important;
}

/* ===== Menu page ===== */
html.notesmart-v50 body.ns-menu-page .ns-menu-content{width:min(100%,1060px);margin-inline:auto}
html.notesmart-v50 body.ns-menu-page .ns-menu-profile{
  overflow:hidden;
  border:0!important;
  border-radius:var(--ns50-radius-xl)!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(241,202,115,.30),transparent 15rem),
    linear-gradient(135deg,var(--ns50-green),var(--ns50-green-dark))!important;
  box-shadow:0 22px 52px rgba(18,62,52,.20)!important;
}
html.notesmart-v50 body.ns-menu-page .ns-menu-profile :where(h1,h2,h3,p,span){color:inherit!important}
html.notesmart-v50 body.ns-menu-page .ns-menu-section{
  padding:14px!important;
  border:1px solid rgba(219,229,224,.88)!important;
  border-radius:var(--ns50-radius-lg)!important;
  background:rgba(255,255,255,.72)!important;
}
html.notesmart-v50 body.ns-menu-page .ns-menu-grid{gap:11px!important}
html.notesmart-v50 body.ns-menu-page .ns-menu-item{
  min-height:80px;
  border-color:var(--ns50-line)!important;
  border-radius:var(--ns50-radius)!important;
  background:#fff!important;
  box-shadow:var(--ns50-shadow-xs)!important;
}
html.notesmart-v50 body.ns-menu-page .ns-menu-icon{
  border-radius:14px!important;
  color:var(--ns50-green-dark)!important;
  background:linear-gradient(145deg,#dff0e7,#eff8f3)!important;
}

/* ===== Login ===== */
html.notesmart-v50 body.ns-v47-route-login,
html.notesmart-v50 body:not([data-ns-route]){
  background:
    radial-gradient(circle at 15% 0,rgba(8,100,81,.16),transparent 28rem),
    linear-gradient(180deg,#f9fbfa,#eaf3ef)!important;
}
html.notesmart-v50 body.ns-v47-route-login #root>div{
  background:transparent!important;
}
html.notesmart-v50 body.ns-v47-route-login #root :where(.rounded-xl.border,.rounded-2xl.border,.bg-card){
  border-color:var(--ns50-line)!important;
  border-radius:var(--ns50-radius-xl)!important;
  box-shadow:var(--ns50-shadow)!important;
}

/* ===== Empty/loading/error and toast ===== */
html.notesmart-v50 :where(.ns-v47-empty,[class*="border-dashed"]){
  border-color:#bfd4c9!important;
  border-radius:var(--ns50-radius)!important;
  background:linear-gradient(145deg,#fbfdfc,#eef7f2)!important;
}
html.notesmart-v50 :where([role="alert"],[class*="destructive"]){border-radius:15px!important}
html.notesmart-v50 :where([data-sonner-toast],.toast){
  border:1px solid var(--ns50-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:var(--ns50-shadow)!important;
}
html.notesmart-v50 :where(.animate-pulse,.skeleton,[class*="Skeleton"]){animation-duration:1.4s!important;border-radius:14px!important}

/* Startup overlay follows the same visual system. */
html.notesmart-v50 #notesmart-startup-overlay{background:linear-gradient(180deg,#f8fbfa,#edf5f1)!important}
html.notesmart-v50 #notesmart-startup-overlay .ns-startup-card{
  border:1px solid var(--ns50-line)!important;
  border-radius:var(--ns50-radius-xl)!important;
  background:#fff!important;
  box-shadow:var(--ns50-shadow)!important;
}
html.notesmart-v50 #notesmart-startup-overlay .ns-startup-logo{
  border-radius:18px!important;
  background:linear-gradient(145deg,var(--ns50-green),var(--ns50-green-dark))!important;
  box-shadow:0 14px 34px rgba(8,100,81,.22)!important;
}

/* Main-site back button: compact floating action. */
html.notesmart-v50 #notesmart-main-site-back{
  border:1px solid var(--ns50-line)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.96)!important;
  color:var(--ns50-green-dark)!important;
  box-shadow:var(--ns50-shadow-sm)!important;
}

/* ===== Static utility pages ===== */
html.notesmart-v50-static body{
  background:
    radial-gradient(circle at 12% -5%,rgba(8,100,81,.12),transparent 28rem),
    linear-gradient(180deg,#f9fbfa,#edf5f1)!important;
  color:var(--ns50-ink,#14231e)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
html.notesmart-v50-static :where(.card,.notice,.topbar,.update-header,.hero-card){
  border-color:var(--ns50-line,#dbe5e0)!important;
  border-radius:var(--ns50-radius-lg,24px)!important;
  background:#fff!important;
  box-shadow:var(--ns50-shadow-xs,0 3px 12px rgba(18,62,52,.045))!important;
}
html.notesmart-v50-static :where(button,.btn,a.btn){border-radius:13px!important;transition:transform .13s var(--ns50-ease),box-shadow .13s ease!important}
html.notesmart-v50-static :where(button,.btn,a.btn):active{transform:scale(.975)}

/* ===== Responsive refinements ===== */
@media (max-width:767px){
  html.notesmart-v50{scroll-behavior:auto}
  html.notesmart-v50 body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  html.notesmart-v50 #main-scrollable-area{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))!important;scroll-padding-top:64px}
  html.notesmart-v50 #root header.sticky,
  html.notesmart-v50 #root header[class*="top-0"]{
    min-height:58px!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(255,255,255,.985)!important;
  }
  html.notesmart-v50 .ns-v47-page-header{padding:14px 12px 8px!important}
  html.notesmart-v50 .ns-v47-content,
  html.notesmart-v50 .ns-v47-page:not(.ns-v47-page-header){padding-left:12px!important;padding-right:12px!important}
  html.notesmart-v50 :where(.ns-v47-card,.rounded-xl.border,.rounded-2xl.border){border-radius:20px!important}
  html.notesmart-v50 :where(.p-8){padding:1.15rem!important}
  html.notesmart-v50 :where(.p-6){padding:1rem!important}
  html.notesmart-v50 :where(.p-5){padding:.95rem!important}
  html.notesmart-v50 :where(.gap-6){gap:1rem!important}
  html.notesmart-v50 :where(.gap-5){gap:.9rem!important}
  html.notesmart-v50 :where(.gap-4){gap:.8rem!important}
  html.notesmart-v50 body.ns-menu-page .ns-menu-profile{border-radius:22px!important;box-shadow:var(--ns50-shadow-sm)!important}
  html.notesmart-v50 body.ns-menu-page .ns-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.notesmart-v50 body.ns-menu-page .ns-menu-item{min-height:74px!important}
  html.notesmart-v50 [role="dialog"]{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}
  html.notesmart-v50 .ns-journal-header{border-radius:0 0 20px 20px!important}
  html.notesmart-v50 .ns-v47-card,
  html.notesmart-v50 .ns-v47-row,
  html.notesmart-v50 .ns-v47-stat-card{transform:none!important}
}

@media (max-width:420px){
  html.notesmart-v50 body.ns-menu-page .ns-menu-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  html.notesmart-v50 body.ns-menu-page .ns-menu-item{padding:11px!important;min-height:70px!important}
  html.notesmart-v50 nav[aria-label="Navigasi utama"][class*="fixed"]{left:7px!important;right:7px!important;border-radius:19px!important}
}

@media (min-width:768px){
  html.notesmart-v50 body{padding-bottom:0!important}
  html.notesmart-v50 #main-scrollable-area>.ns-v47-page,
  html.notesmart-v50 #main-scrollable-area>.ns-v47-content{padding-inline:clamp(18px,2.7vw,34px)}
}

/* Performance and accessibility */
@media (prefers-reduced-motion:reduce){
  html.notesmart-v50{scroll-behavior:auto}
  html.notesmart-v50 *,html.notesmart-v50 *::before,html.notesmart-v50 *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

@media print{
  html.notesmart-v50,html.notesmart-v50 body,html.notesmart-v50 #root{background:#fff!important;color:#000!important}
  html.notesmart-v50 .ns-v47-page,html.notesmart-v50 .ns-v47-content{animation:none!important;width:100%!important;max-width:none!important;padding:0!important}
  html.notesmart-v50 :where(.ns-v47-card,.ns-v47-row,.ns-v47-stat-card,.rounded-xl.border,.rounded-2xl.border){box-shadow:none!important;background:#fff!important;border-color:#bbb!important}
  html.notesmart-v50 nav[aria-label="Navigasi utama"],html.notesmart-v50 #notesmart-main-site-nav{display:none!important}
}

/* ===== V51 mobile fit, integrated back navigation, report contrast ===== */
@media (max-width:767px){
  /* Use the available HD-phone width instead of centering a narrow tablet column. */
  html.notesmart-v50 #main-scrollable-area,
  html.notesmart-v50 #main-scrollable-area > div,
  html.notesmart-v50 #main-scrollable-area > div > main,
  html.notesmart-v50 #main-scrollable-area > div > section,
  html.notesmart-v50 #main-scrollable-area > .ns-v47-page,
  html.notesmart-v50 #main-scrollable-area > .ns-v47-content{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  html.notesmart-v50 #main-scrollable-area :where([class*="mx-4"],[class*="sm:mx-6"],.ns-v47-content,.ns-v47-page:not(.ns-v47-page-header)){
    margin-left:8px!important;
    margin-right:8px!important;
  }

  html.notesmart-v50 #main-scrollable-area :where([class*="px-4"],[class*="sm:px-6"]){
    padding-left:10px!important;
    padding-right:10px!important;
  }

  html.notesmart-v50 #main-scrollable-area :where([class*="max-w-"]):not([role="dialog"]):not(input):not(select):not(textarea){
    max-width:none!important;
  }

  /* Denser but still touch-friendly cards. */
  html.notesmart-v50 :where(.ns-v47-card,.ns-v47-row,.ns-v47-stat-card,.rounded-xl.border,.rounded-2xl.border,.rounded-lg.border){
    box-shadow:0 4px 14px rgba(18,62,52,.055)!important;
  }
  html.notesmart-v50 .ns-v47-stat-card{min-height:88px!important}

  /* Six items remain inside one bottom dock; the Back action no longer wraps outside. */
  html.notesmart-v50 nav[aria-label="Navigasi utama"] ul{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    width:100%!important;
    align-items:stretch!important;
  }
  html.notesmart-v50 nav[aria-label="Navigasi utama"] li{
    min-width:0!important;
    width:auto!important;
  }
  html.notesmart-v50 nav[aria-label="Navigasi utama"] a,
  html.notesmart-v50 nav[aria-label="Navigasi utama"] button,
  html.notesmart-v50 .notesmart-mobile-back-link{
    width:100%!important;
    min-width:0!important;
    min-height:60px!important;
    padding:7px 2px 6px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    font-size:10px!important;
    line-height:1.05!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  html.notesmart-v50 .notesmart-mobile-back-link svg{width:21px!important;height:21px!important}
  html.notesmart-v50 #notesmart-mobile-back-item{position:static!important;inset:auto!important;margin:0!important;transform:none!important}

  /* Lower paint cost for smoother Android scrolling. */
  html.notesmart-v50 body,
  html.notesmart-v50 #root{
    background:linear-gradient(180deg,#f8fbfa 0%,#eef5f1 100%)!important;
    background-attachment:scroll!important;
  }
  html.notesmart-v50 :where(.ns-v47-card,.ns-v47-row,.ns-v47-stat-card,[class*="rounded-"]){
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.notesmart-v50 #main-scrollable-area>.ns-v47-page,
  html.notesmart-v50 #main-scrollable-area>.ns-v47-content{animation-duration:150ms!important}
}

/* Report cards: guarantee readable text on green/selected cards. */
html.notesmart-v50 :where([class*="bg-primary"][class*="text-primary-foreground"],[class*="bg-emerald-600"],[class*="bg-emerald-700"]):not(button):not(a),
html.notesmart-v50 :where([class*="bg-primary"][class*="text-primary-foreground"],[class*="bg-emerald-600"],[class*="bg-emerald-700"]):not(button):not(a) :where(h1,h2,h3,h4,p,span,small,svg){
  color:#fff!important;
}
html.notesmart-v50 :where([class*="bg-primary"][class*="text-primary-foreground"],[class*="bg-emerald-600"],[class*="bg-emerald-700"]):not(button):not(a) :where(.text-muted-foreground,[class*="text-muted"],[class*="text-foreground/"]){
  color:rgba(255,255,255,.82)!important;
}
html.notesmart-v50 :where([class*="bg-primary"][class*="text-primary-foreground"],[class*="bg-emerald-600"],[class*="bg-emerald-700"]):not(button):not(a) :where([class*="border"],button,a){
  border-color:rgba(255,255,255,.5)!important;
}
html.notesmart-v50 :where([class*="bg-primary"][class*="text-primary-foreground"],[class*="bg-emerald-600"],[class*="bg-emerald-700"]):not(button):not(a) :where(button,a){
  background:#fff!important;
  color:var(--ns50-green-dark)!important;
}


/* ===== retained cascade: notesmart-v52-attendance-tools.css ===== */
/* NoteSmart V52 — pencarian nama dan absensi suara */
html.notesmart-v52 .ns52-attendance-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin:2px 0 10px;
  padding:10px;
  border:1px solid rgba(8,100,81,.16);
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 24px rgba(15,70,55,.07);
}
html.notesmart-v52 .ns52-attendance-search,
html.notesmart-v52 .ns52-standalone-search{
  position:relative;
  min-width:0;
}
html.notesmart-v52 .ns52-attendance-search>svg,
html.notesmart-v52 .ns52-standalone-search>svg:first-child{
  position:absolute;
  left:13px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  fill:none;
  stroke:#64748b;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
  z-index:2;
}
html.notesmart-v52 .ns52-attendance-search input,
html.notesmart-v52 .ns52-standalone-search input{
  width:100%;
  min-height:46px;
  padding:0 42px 0 42px!important;
  border:1px solid #cbd8d3!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#10251f!important;
  font-size:16px!important;
  outline:none!important;
  box-shadow:none!important;
  transition:border-color .16s ease,box-shadow .16s ease!important;
}
html.notesmart-v52 .ns52-attendance-search input:focus,
html.notesmart-v52 .ns52-standalone-search input:focus{
  border-color:#0b7b5d!important;
  box-shadow:0 0 0 3px rgba(11,123,93,.12)!important;
}
html.notesmart-v52 .ns52-clear{
  position:absolute;
  right:6px;
  top:50%;
  width:34px;
  height:34px;
  transform:translateY(-50%);
  border:0;
  border-radius:10px;
  background:transparent;
  color:#64748b;
  font-size:24px;
  line-height:1;
}
html.notesmart-v52 .ns52-clear:active{background:#edf5f1;transform:translateY(-50%) scale(.94)}
html.notesmart-v52 .ns52-mic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:104px;
  min-height:46px;
  padding:0 14px;
  border:1px solid #0b7b5d;
  border-radius:13px;
  background:#0b7b5d;
  color:#fff;
  font-weight:800;
  box-shadow:none;
  transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease;
}
html.notesmart-v52 .ns52-mic svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
html.notesmart-v52 .ns52-mic:active{transform:scale(.96)}
html.notesmart-v52 .ns52-mic.is-listening{
  background:#b42318;
  border-color:#b42318;
  box-shadow:0 0 0 4px rgba(180,35,24,.12);
  animation:ns52MicPulse 1.35s ease-in-out infinite;
}
html.notesmart-v52 .ns52-mic.is-unsupported{background:#64748b;border-color:#64748b}
html.notesmart-v52 .ns52-mic-inline{
  position:absolute;
  right:5px;
  top:50%;
  z-index:3;
  min-width:38px;
  width:38px;
  min-height:38px;
  height:38px;
  padding:0;
  transform:translateY(-50%);
  border-radius:10px;
}
html.notesmart-v52 .ns52-mic-inline:active{transform:translateY(-50%) scale(.94)}
html.notesmart-v52 .ns52-mic-inline.is-listening{transform:translateY(-50%)}
html.notesmart-v52 .ns52-attendance-meta{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  padding:0 2px;
  font-size:12px;
  line-height:1.35;
}
html.notesmart-v52 .ns52-attendance-meta-standalone{margin:-4px 0 8px;padding:0 2px}
html.notesmart-v52 .ns52-attendance-message{
  min-width:0;
  color:#66756f;
  overflow-wrap:anywhere;
}
html.notesmart-v52 .ns52-attendance-message[data-tone="success"]{color:#08724f;font-weight:800}
html.notesmart-v52 .ns52-attendance-message[data-tone="active"]{color:#075e4c;font-weight:800}
html.notesmart-v52 .ns52-attendance-message[data-tone="listening"]{color:#9f1d16;font-weight:800}
html.notesmart-v52 .ns52-attendance-message[data-tone="warning"]{color:#9a5b00;font-weight:700}
html.notesmart-v52 .ns52-attendance-message[data-tone="error"]{color:#b42318;font-weight:700}
html.notesmart-v52 .ns52-attendance-count{
  flex:0 0 auto;
  color:#52645d;
  white-space:nowrap;
  font-weight:750;
}
html.notesmart-v52 .ns52-attendance-hidden{display:none!important}
html.notesmart-v52 [data-kismart-attendance-row="1"].ns52-attendance-active{
  border-color:#0b7b5d!important;
  box-shadow:0 0 0 3px rgba(11,123,93,.12)!important;
  background:#f7fcfa!important;
}
html.notesmart-v52 [data-kismart-attendance-list="1"]{
  scroll-behavior:smooth;
}
@keyframes ns52MicPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(180,35,24,.10)}
  50%{box-shadow:0 0 0 7px rgba(180,35,24,.04)}
}
@media (max-width:520px){
  html.notesmart-v52 .ns52-attendance-tools{padding:8px;border-radius:14px}
  html.notesmart-v52 .ns52-mic{min-width:50px;width:50px;padding:0}
  html.notesmart-v52 .ns52-mic span{display:none}
  html.notesmart-v52 .ns52-attendance-meta{align-items:flex-start;flex-direction:column;gap:3px}
  html.notesmart-v52 .ns52-attendance-count{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html.notesmart-v52 .ns52-mic.is-listening{animation:none}
  html.notesmart-v52 [data-kismart-attendance-list="1"]{scroll-behavior:auto}
}


/* ===== retained cascade: notesmart-v53-layout-contrast.css ===== */
/* NoteSmart V53 — layout fit, readable labels, desktop scaling, smooth rendering */
:root{
  --ns53-ink:#14231e;
  --ns53-muted:#63726b;
  --ns53-green:#08745c;
  --ns53-green-dark:#075344;
  --ns53-line:#d6e2dc;
  --ns53-mobile-gutter:6px;
  --ns53-content-max:1540px;
}

html.notesmart-v53,
html.notesmart-v53 body{
  overflow-x:hidden;
}

html.notesmart-v53 #main-scrollable-area{
  width:100%;
  max-width:none;
  overflow-x:hidden;
}

/* Always keep functional copy legible. */
html.notesmart-v53 #main-scrollable-area :where(h1,h2,h3,h4,strong),
html.notesmart-v53 body.ns-menu-page .ns-menu-label,
html.notesmart-v53 .ks-admin-menu-label,
html.notesmart-v53 .ks-admin-quick-label{
  color:var(--ns53-ink)!important;
  -webkit-text-fill-color:var(--ns53-ink)!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Main administration menu: labels were present in DOM but inherited an invisible color. */
html.notesmart-v53 body.ns-menu-page .ns-menu-item,
html.notesmart-v53 body.ns-menu-page .ks-admin-menu-link,
html.notesmart-v53 body.ns-menu-page .ks-admin-menu-link:visited{
  color:var(--ns53-ink)!important;
  -webkit-text-fill-color:var(--ns53-ink)!important;
}
html.notesmart-v53 body.ns-menu-page .ns-menu-desc,
html.notesmart-v53 body.ns-menu-page .ks-admin-menu-desc{
  color:var(--ns53-muted)!important;
  -webkit-text-fill-color:var(--ns53-muted)!important;
  opacity:1!important;
  visibility:visible!important;
}
html.notesmart-v53 body.ns-menu-page .ks-admin-menu-link{
  background:#fff!important;
  border-color:var(--ns53-line)!important;
  box-shadow:0 4px 14px rgba(18,62,52,.045)!important;
}

/* Report hub: preserve the green cards while restoring full contrast. */
html.notesmart-v53 .ks-report-card{
  background:linear-gradient(145deg,#12805f 0%,#08745c 100%)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:rgba(4,84,65,.24)!important;
  box-shadow:0 8px 22px rgba(7,83,68,.13)!important;
}
html.notesmart-v53 .ks-report-card :where(.ks-report-copy>p:first-child,h2,h3,strong),
html.notesmart-v53 .ks-report-card .ks-report-title{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}
html.notesmart-v53 .ks-report-card :where(.ks-report-description,.text-muted-foreground,p:last-child),
html.notesmart-v53 .ks-report-card .ks-report-footer{
  color:rgba(255,255,255,.84)!important;
  -webkit-text-fill-color:rgba(255,255,255,.84)!important;
  opacity:1!important;
}
html.notesmart-v53 .ks-report-card svg{
  color:#fff!important;
  stroke:currentColor!important;
  opacity:1!important;
}
html.notesmart-v53 .ks-report-card>div:first-child>span:first-child,
html.notesmart-v53 .ks-report-card .ks-report-icon{
  background:rgba(255,255,255,.94)!important;
  color:var(--ns53-green)!important;
  -webkit-text-fill-color:var(--ns53-green)!important;
}
html.notesmart-v53 .ks-report-card :where(button,[class*="rounded-full"],[class*="bg-secondary"],[class*="bg-muted"]){
  background:#fff!important;
  color:var(--ns53-ink)!important;
  -webkit-text-fill-color:var(--ns53-ink)!important;
  border-color:rgba(255,255,255,.72)!important;
  opacity:1!important;
}

/* KPI copy must never turn white on white. */
html.notesmart-v53 [data-kismart-kpi-card="1"] :where(p,span,strong){
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
}
html.notesmart-v53 [data-kismart-kpi-card="1"] p:last-child{
  color:color-mix(in srgb,currentColor 78%,#34463f)!important;
  -webkit-text-fill-color:currentColor!important;
}

@media (max-width:767px){
  /* The phone layout now uses the actual screen width, with only a safe 6px gutter. */
  html.notesmart-v53 #main-scrollable-area,
  html.notesmart-v53 #main-scrollable-area>*{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  html.notesmart-v53 #main-scrollable-area .ns-v47-page-header{
    width:auto!important;
    max-width:none!important;
    margin:7px var(--ns53-mobile-gutter) 0!important;
    padding:13px 14px!important;
    border-radius:19px!important;
  }

  html.notesmart-v53 #main-scrollable-area :where(
    [class~="mx-4"],
    [class~="sm:mx-6"],
    .ns-v47-content,
    .ns-menu-content,
    .ns-v47-page:not(.ns-v47-page-header)
  ){
    margin-left:var(--ns53-mobile-gutter)!important;
    margin-right:var(--ns53-mobile-gutter)!important;
  }

  html.notesmart-v53 #main-scrollable-area :where(
    [class~="px-4"],
    [class~="sm:px-6"],
    [class~="px-5"],
    .ns-v47-content,
    .ns-menu-content
  ){
    padding-left:var(--ns53-mobile-gutter)!important;
    padding-right:var(--ns53-mobile-gutter)!important;
  }

  html.notesmart-v53 #main-scrollable-area :where([class*="max-w-"]):not([role="dialog"]):not(input):not(select):not(textarea){
    max-width:none!important;
  }

  /* Restore the intended compact 2-column KPI dashboard. */
  html.notesmart-v53 #main-scrollable-area section.grid.grid-cols-2,
  html.notesmart-v53 #main-scrollable-area .ks-dashboard-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  html.notesmart-v53 [data-kismart-kpi-card="1"]{
    min-height:102px!important;
    padding:12px!important;
    border-radius:17px!important;
  }
  html.notesmart-v53 [data-kismart-kpi-card="1"] p:nth-child(2){font-size:1.65rem!important}

  html.notesmart-v53 body.ns-menu-page .ns-menu-grid,
  html.notesmart-v53 body.ns-menu-page ul.grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  html.notesmart-v53 body.ns-menu-page .ks-admin-menu-link{
    min-height:92px!important;
    padding:11px!important;
    align-items:flex-start!important;
  }
  html.notesmart-v53 body.ns-menu-page .ks-admin-menu-copy{
    display:grid!important;
    min-width:0!important;
    gap:2px!important;
  }
  html.notesmart-v53 body.ns-menu-page .ks-admin-menu-label,
  html.notesmart-v53 body.ns-menu-page .ks-admin-menu-desc{
    display:block!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  html.notesmart-v53 body.ns-menu-page .ks-admin-menu-label{font-size:12px!important;line-height:1.25!important}
  html.notesmart-v53 body.ns-menu-page .ks-admin-menu-desc{font-size:10px!important;line-height:1.3!important}

  html.notesmart-v53 .ks-report-card{
    border-radius:20px!important;
    padding:14px!important;
  }
  html.notesmart-v53 .ks-report-description{
    line-height:1.42!important;
  }

  /* Reduce costly paint effects while retaining a polished feel. */
  html.notesmart-v53 :where(.ns-v47-card,.ns-v47-row,.ns-v47-stat-card,.ks-report-card,.ks-admin-menu-link,[class*="rounded-"]){
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.notesmart-v53 #main-scrollable-area>*{
    animation-duration:130ms!important;
    transition-duration:130ms!important;
  }
}

@media (min-width:768px){
  /* Desktop/tablet no longer uses a narrow phone-like center column. */
  html.notesmart-v53 #main-scrollable-area>div,
  html.notesmart-v53 #main-scrollable-area>.ns-v47-page,
  html.notesmart-v53 #main-scrollable-area>.ns-v47-content{
    width:min(100%,var(--ns53-content-max))!important;
    max-width:var(--ns53-content-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html.notesmart-v53 #main-scrollable-area>div{
    padding-left:clamp(14px,2vw,30px)!important;
    padding-right:clamp(14px,2vw,30px)!important;
  }
  html.notesmart-v53 body.ns-menu-page ul.grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  html.notesmart-v53 .ks-report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (min-width:1280px){
  html.notesmart-v53 body.ns-menu-page ul.grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html.notesmart-v53 .ks-report-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (prefers-reduced-motion:reduce){
  html.notesmart-v53 *,html.notesmart-v53 *::before,html.notesmart-v53 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* ===== retained cascade: notesmart-v54-navigation.css ===== */
/* NoteSmart V54 — tombol kembali menjadi bagian navigasi, bukan tombol mengambang. */
#notesmart-main-site-nav{
  display:none!important;
}

.notesmart-mobile-back-item{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  flex:initial!important;
}
.notesmart-mobile-back-link{
  position:relative!important;
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  min-height:56px!important;
  max-width:none!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  padding:5px 1px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:hsl(var(--muted-foreground))!important;
  -webkit-text-fill-color:currentColor!important;
  font:600 .64rem/1.05 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  text-decoration:none!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  transition:color .14s ease,background-color .14s ease,transform .14s ease!important;
}
.notesmart-mobile-back-link svg{
  width:20px!important;
  height:20px!important;
  flex:none!important;
}
.notesmart-mobile-back-link span{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.notesmart-mobile-back-link:hover,
.notesmart-mobile-back-link:focus-visible{
  color:hsl(var(--primary))!important;
  background:hsl(var(--primary)/.08)!important;
  outline:0!important;
}
.notesmart-mobile-back-link:active{
  transform:scale(.97)!important;
}

.notesmart-desktop-back-link{
  display:flex!important;
  align-items:center!important;
  gap:.75rem!important;
  margin:.45rem .75rem 0!important;
  padding:.68rem .75rem!important;
  border-top:1px solid hsl(var(--border))!important;
  border-radius:.6rem!important;
  color:hsl(var(--muted-foreground))!important;
  -webkit-text-fill-color:currentColor!important;
  font:600 .875rem/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  text-decoration:none!important;
  transition:color .14s ease,background-color .14s ease!important;
}
.notesmart-desktop-back-link svg{
  width:1rem!important;
  height:1rem!important;
  flex:none!important;
}
.notesmart-desktop-back-link:hover,
.notesmart-desktop-back-link:focus-visible{
  color:hsl(var(--primary))!important;
  background:hsl(var(--muted))!important;
  outline:0!important;
}

@media(max-width:767px){
  #root nav[aria-label="Navigasi utama"][class*="fixed"]{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    width:auto!important;
    max-width:calc(100vw - 12px)!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }
  #root nav[aria-label="Navigasi utama"][class*="fixed"] ul{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    width:100%!important;
    gap:0!important;
    padding:6px 4px!important;
    align-items:stretch!important;
  }
}

@media(min-width:768px){
  .notesmart-mobile-back-item{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .notesmart-mobile-back-link,
  .notesmart-desktop-back-link{transition:none!important}
}

@media print{
  .notesmart-mobile-back-item,
  .notesmart-desktop-back-link,
  #notesmart-main-site-nav{display:none!important}
}


/* ===== retained cascade: notesmart-v57-default-hadir.css ===== */
/* NoteSmart V57 — default Hadir yang benar-benar terlihat pada formulir jurnal.
   V54/V56 tetap menjadi acuan; file ini hanya mengunci warna status kehadiran. */
html.notesmart-v57 body [data-kismart-attendance-buttons="1"] button[data-att-status="H"][aria-pressed="true"],
html.notesmart-v57 body [data-kismart-attendance-buttons="1"] button[data-att-status="H"][data-att-active="1"] {
  background-color:#15803d!important;
  background-image:none!important;
  border-color:#166534!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.78) inset,0 4px 11px rgba(21,128,61,.24)!important;
}
html.notesmart-v57 body [data-kismart-attendance-buttons="1"] button[data-att-status="H"][aria-pressed="true"]::before,
html.notesmart-v57 body [data-kismart-attendance-buttons="1"] button[data-att-status="H"][data-att-active="1"]::before,
html.notesmart-v57 body [data-kismart-attendance-buttons="1"] button[data-att-status="H"][aria-pressed="true"]::after,
html.notesmart-v57 body [data-kismart-attendance-buttons="1"] button[data-att-status="H"][data-att-active="1"]::after {
  display:none!important;
  content:none!important;
}
html.notesmart-v57 body [data-kismart-attendance-buttons="1"] button[data-att-status="H"][aria-pressed="false"],
html.notesmart-v57 body [data-kismart-attendance-buttons="1"] button[data-att-status="H"][data-att-active="0"] {
  background-color:#fff!important;
  background-image:none!important;
  border-color:#cbd5e1!important;
  color:#4b5563!important;
  -webkit-text-fill-color:#4b5563!important;
}


/* ===== retained cascade: notesmart-v59-stability.css ===== */
/* NoteSmart V59 — stabilitas scroll dan biaya render perangkat bergerak. */
html.notesmart-v59,
html.notesmart-v59 #main-scrollable-area,
html.notesmart-v59 [data-kismart-attendance-list="1"]{
  scroll-behavior:auto!important;
}

html.notesmart-v59 #main-scrollable-area{
  overflow-anchor:auto;
  overscroll-behavior-y:contain;
}

@supports (content-visibility:auto){
  html.notesmart-v59 [data-kismart-attendance-row="1"]{
    content-visibility:auto;
    contain:layout paint style;
    contain-intrinsic-block-size:auto 88px;
  }
}

@media (max-width:767px), (pointer:coarse){
  html.notesmart-v59 #root header.sticky,
  html.notesmart-v59 #root header[class*="top-0"]{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:#fff!important;
  }

  html.notesmart-v59 [data-kismart-attendance-row="1"],
  html.notesmart-v59 .ns52-attendance-tools{
    box-shadow:none!important;
  }

  html.notesmart-v59 :where(.ns-v47-card,.ns-v47-row,.ns-v47-stat-card){
    transition-property:border-color,background-color!important;
  }
}

@media (prefers-reduced-motion:reduce){
  html.notesmart-v59 *,
  html.notesmart-v59 *::before,
  html.notesmart-v59 *::after{
    scroll-behavior:auto!important;
  }
}


/* ===== retained cascade: notesmart-v60-production.css ===== */
/* KiSmart V60 — final production guardrails: accessibility, density, and responsive stability. */
:root {
  --ns60-content-max: 1680px;
  --ns60-focus: #f59e0b;
  --ns60-page-gutter: clamp(12px, 2vw, 28px);
}

html { color-scheme: light; scrollbar-gutter: stable; }
body { min-width: 280px; }

.ks-skip-link {
  position: fixed;
  inset: max(8px, env(safe-area-inset-top)) auto auto max(8px, env(safe-area-inset-left));
  z-index: 2147483647;
  transform: translateY(-160%);
  border-radius: 10px;
  background: #063c32;
  color: #fff;
  padding: 10px 14px;
  font-weight: 750;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.ks-skip-link:focus { transform: translateY(0); }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--ns60-focus) !important;
  outline-offset: 2px !important;
}

#main-scrollable-area > *,
#root main > :where(div,section) {
  width: min(100%, var(--ns60-content-max));
  margin-inline: auto;
}

:where(button,[role="button"],input,select,textarea) { min-height: 44px; }
:where(input,select,textarea) { max-width: 100%; }
:where(table) { font-variant-numeric: tabular-nums; }
:where(.overflow-x-auto,.table-wrap,[data-radix-scroll-area-viewport]) {
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

@media (min-width: 768px) {
  #main-scrollable-area { padding-inline: var(--ns60-page-gutter) !important; }
}

@media (max-width: 767px) {
  :root { --ns60-page-gutter: max(12px, env(safe-area-inset-left)); }
  #root main { padding-inline: var(--ns60-page-gutter) !important; }
  :where([role="dialog"],[data-state="open"]) { max-width: calc(100vw - 16px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  :where(button,a,input,select,textarea,[role="button"]) { border: 1px solid ButtonText; }
}


/* ===== retained cascade: notesmart-v62-journal-ux.css ===== */
/* KiSmart V62 — journal comfort, predictable scrolling, and responsive density. */
:root {
  --ns62-content-max: 1720px;
  --ns62-dialog-max: 1120px;
}

html:not(.ks-reduced-motion) {
  scroll-behavior: smooth;
}

#main-scrollable-area {
  overscroll-behavior-y: auto !important;
  scroll-behavior: smooth !important;
  scroll-padding-block: 16px 112px;
  -webkit-overflow-scrolling: touch;
}

#main-scrollable-area > *,
#root main > :where(div, section) {
  width: min(100%, var(--ns62-content-max));
}

/* Override the old 48rem inline constraint: journal entry should use the
   available laptop/tablet width without becoming edge-to-edge on desktop. */
[data-kismart-journal-dialog="1"] {
  box-sizing: border-box !important;
  width: min(calc(100vw - 24px), var(--ns62-dialog-max)) !important;
  max-width: var(--ns62-dialog-max) !important;
  height: min(calc(100dvh - 24px), 960px) !important;
  max-height: calc(100dvh - 24px) !important;
  padding: clamp(16px, 2.2vw, 28px) !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  scroll-behavior: smooth !important;
  scroll-padding-block: 12px 92px;
  -webkit-overflow-scrolling: touch;
}

[data-kismart-journal-dialog="1"] > form {
  width: 100%;
  max-width: none;
}

/* Attendance is part of the journal flow, without a second nested scroller. */
[data-kismart-journal-dialog="1"] [data-kismart-attendance-list="1"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Submission controls remain reachable while reviewing long attendance data. */
[data-kismart-journal-dialog="1"] > form > div:last-child {
  position: sticky;
  bottom: -1px;
  z-index: 8;
  margin-inline: -6px;
  padding: 12px 6px max(8px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid hsl(var(--border));
  background: color-mix(in srgb, hsl(var(--background)) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 900px) {
  [data-kismart-journal-dialog="1"] > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 24px;
  }

  [data-kismart-journal-dialog="1"] > form > [data-kismart-attendance-section="1"],
  [data-kismart-journal-dialog="1"] > form > div:last-child,
  [data-kismart-journal-dialog="1"] > form > p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  #root main {
    padding-inline: max(10px, env(safe-area-inset-left, 0px)) !important;
  }

  [data-kismart-journal-dialog="1"] {
    width: calc(100vw - 8px) !important;
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    border-radius: 16px !important;
    padding: 16px 14px max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }

  [data-kismart-journal-dialog="1"] > form > div:last-child > button {
    flex-basis: calc(50% - 4px);
  }

  [data-kismart-journal-dialog="1"] > form > div:last-child > button[type="submit"] {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  #main-scrollable-area,
  [data-kismart-journal-dialog="1"] {
    scroll-behavior: auto !important;
  }
}

@supports not (color: color-mix(in srgb, white, black)) {
  [data-kismart-journal-dialog="1"] > form > div:last-child {
    background: hsl(var(--background));
  }
}


/* ===== retained cascade: notesmart-v64-mobile-density.css ===== */
/* KiSmart V66 — targeted mobile density and contrast fixes.
 * Page markers are applied by notesmart-v64-mobile-polish.js so these rules do
 * not disturb unrelated admin tables and desktop layouts. */

@media (max-width: 767px) {
  :root {
    --ks-v64-bottom-safe: calc(104px + env(safe-area-inset-bottom, 0px));
    --ks-v65-report-bottom-safe: calc(148px + env(safe-area-inset-bottom, 0px));
  }

  #root main,
  #main-scrollable-area {
    padding-bottom: var(--ks-v64-bottom-safe) !important;
    scroll-padding-bottom: var(--ks-v64-bottom-safe) !important;
  }

  /* The teacher roster KPI source is grid-cols-3. Old global mobile rules
     accidentally changed every Tailwind grid to a single column. */
  body.ks-v64-roster .ks-v64-roster-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-width: none !important;
  }
  body.ks-v64-roster .ks-v64-roster-kpis > div {
    min-height: 70px !important;
    padding: 10px 6px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.ks-v64-roster .ks-v64-roster-days {
    gap: 9px !important;
  }
  body.ks-v64-roster .ks-v64-roster-days > section {
    min-height: 0 !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }
  body.ks-v64-roster .ks-v64-roster-days > section > div:last-child {
    padding-block: 10px !important;
  }

  /* History counters remain readable while using roughly one third of the
     vertical space shown in the supplied screenshot. */
  body.ks-v64-journal-history .ks-v64-history-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  body.ks-v64-journal-history .ks-v64-history-kpis > div {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 8px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.ks-v64-journal-history .ks-v64-history-kpis > div:first-child {
    grid-column: auto !important;
  }

  /* Report cards: tighter geometry and guaranteed icon contrast. */
  body.ks-v64-reports .ks-v64-report-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 11px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }
  body.ks-v64-reports .ks-v64-report-card > div {
    gap: 9px !important;
  }
  body.ks-v64-reports .ks-v64-report-card p {
    margin-top: 0 !important;
    line-height: 1.3 !important;
  }
  body.ks-v64-reports .ks-v64-report-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    color: #08724b !important;
    background: #f3faf6 !important;
    border: 1px solid rgba(8, 114, 75, .18) !important;
  }
  body.ks-v64-reports .ks-v64-report-icon svg {
    color: #08724b !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }
  body.ks-v64-reports .ks-v64-report-card .ks-v65-report-chip {
    min-height: 24px !important;
    padding: 3px 8px !important;
    line-height: 1.15 !important;
    color: #173c2c !important;
    background: #fff !important;
    border-color: rgba(8, 114, 75, .28) !important;
    opacity: 1 !important;
  }
  body.ks-v64-reports .ks-v64-report-card .ks-v65-report-more-chip {
    min-width: 34px !important;
    font-weight: 800 !important;
    color: #075f40 !important;
  }
  body.ks-v64-reports .ks-v64-report-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-bottom: var(--ks-v65-report-bottom-safe) !important;
    scroll-padding-bottom: var(--ks-v65-report-bottom-safe) !important;
  }
  body.ks-v64-reports .ks-v64-report-grid > li {
    min-width: 0 !important;
    padding-bottom: 0 !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v64-report-card {
    height: 100% !important;
    padding: 10px !important;
    gap: 7px !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v64-report-card > div:first-child {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 12px !important;
    align-items: start !important;
    gap: 7px !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v64-report-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v64-report-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v64-report-card > div:first-child p:first-child {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v64-report-card > div:first-child p + p {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v66-report-chip-row {
    gap: 4px !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v65-report-chip {
    min-height: 21px !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
  }
  body.ks-v64-reports .ks-v64-report-grid .ks-v64-report-card > p:last-child {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Avoid clipped yyyy-mm-dd values in narrow dashboard toolbars. */
  body.ks-v64-dashboard input[type="date"] {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    padding-inline: 10px 4px !important;
  }
  body.ks-v64-dashboard .ks-v64-date-row {
    display: grid !important;
    grid-template-columns: minmax(132px, .8fr) minmax(0, 1.35fr) !important;
    gap: 10px !important;
  }
  body.ks-v64-dashboard .ks-v64-date-row button {
    min-width: 0 !important;
    padding-inline: 10px !important;
  }

  /* Submitted journals must preserve clear attendance semantics in edit mode. */
  [data-ks-attendance-status="hadir"][aria-pressed="true"],
  [data-ks-attendance-status="hadir"][data-state="on"],
  [data-ks-attendance-status="hadir"][data-state="checked"],
  [data-ks-attendance-status="hadir"].is-selected,
  [data-ks-attendance-badge="hadir"] {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #fff !important;
  }
}

@media (max-width: 374px) {
  body.ks-v64-journal-history .ks-v64-history-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ks-v64-dashboard .ks-v64-date-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 299px) {
  body.ks-v64-reports .ks-v64-report-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  body.ks-v64-roster .ks-v64-roster-days {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ks-v64-reports .ks-v64-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ===== retained cascade: notesmart-v68-responsive-pro.css ===== */
/* KiSmart V68 — responsive professional shell and predictable page scrolling. */
:root {
  --ks68-content: 1520px;
  --ks68-gutter: clamp(14px, 2vw, 30px);
  --ks68-gap: clamp(12px, 1.35vw, 20px);
  --ks68-ink: #102a22;
  --ks68-muted: #61736b;
  --ks68-primary: #087a5d;
  --ks68-primary-dark: #075b49;
  --ks68-line: rgba(126, 158, 144, 0.28);
  --ks68-card: rgba(255, 255, 255, 0.94);
  --ks68-shadow: 0 10px 30px rgba(13, 72, 55, 0.075);
  --ks68-shadow-hover: 0 16px 40px rgba(13, 72, 55, 0.12);
  --ks68-ease: cubic-bezier(0.22, 0.8, 0.25, 1);
}

html.notesmart-v68:has(body.ks-v68-page),
html.notesmart-v68 body.ks-v68-page,
html.notesmart-v68 body.ks-v68-page #root {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
}

html.notesmart-v68 body {
  color: var(--ks68-ink);
  background: #eef6f1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.notesmart-v68 #root > div.flex.h-screen,
html.notesmart-v68
  #root
  > div[class*="min-h-screen"]:has(#main-scrollable-area) {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html.notesmart-v68 #main-scrollable-area {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
  touch-action: pan-x pan-y !important;
  scroll-behavior: auto !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(8, 122, 93, 0.48) transparent;
  background: radial-gradient(
      circle at 8% 2%,
      rgba(23, 143, 103, 0.09),
      transparent 27rem
    ),
    radial-gradient(
      circle at 96% 9%,
      rgba(234, 179, 8, 0.07),
      transparent 24rem
    ),
    linear-gradient(180deg, #f9fcfa 0%, #eef6f1 58%, #eaf3ee 100%) !important;
}

html.notesmart-v68 #main-scrollable-area::-webkit-scrollbar {
  width: 11px;
}
html.notesmart-v68 #main-scrollable-area::-webkit-scrollbar-track {
  background: transparent;
}
html.notesmart-v68 #main-scrollable-area::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(8, 122, 93, 0.45);
  background-clip: padding-box;
}
html.notesmart-v68 #main-scrollable-area::-webkit-scrollbar-thumb:hover {
  background: rgba(7, 91, 73, 0.68);
  background-clip: padding-box;
}

/* Use the available laptop width without letting lines become excessively long. */
html.notesmart-v68 #main-scrollable-area > :where(div, section, article),
html.notesmart-v68 #main-scrollable-area > .ns-v47-page,
html.notesmart-v68 #main-scrollable-area > .ns-v47-content {
  box-sizing: border-box;
  width: min(100%, var(--ks68-content)) !important;
  max-width: var(--ks68-content) !important;
  margin-inline: auto !important;
}

html.notesmart-v68 #main-scrollable-area > div {
  padding-inline: var(--ks68-gutter) !important;
}

html.notesmart-v68
  #main-scrollable-area
  :where(.ns-v47-content, .ns-menu-content) {
  max-width: none !important;
}

/* Global visual language for every module. */
html.notesmart-v68
  #main-scrollable-area
  :where(section, article)[class*="rounded-"][class*="border"],
html.notesmart-v68
  #main-scrollable-area
  :where(.ns-v47-card, .ns-v47-toolbar, .ns-menu-section) {
  border-color: var(--ks68-line) !important;
  background-color: var(--ks68-card) !important;
  box-shadow: var(--ks68-shadow) !important;
}

html.notesmart-v68
  #main-scrollable-area
  :where(section, article)[class*="rounded-"][class*="border"] {
  transition:
    transform 0.18s var(--ks68-ease),
    box-shadow 0.18s var(--ks68-ease),
    border-color 0.18s var(--ks68-ease) !important;
}

@media (hover: hover) and (pointer: fine) {
  html.notesmart-v68
    #main-scrollable-area
    :where(section, article)[class*="rounded-"][class*="border"]:hover {
    border-color: rgba(8, 122, 93, 0.3) !important;
    box-shadow: var(--ks68-shadow-hover) !important;
  }
}

html.notesmart-v68 #main-scrollable-area :where(input, select, textarea) {
  border-color: rgba(104, 142, 125, 0.34) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease !important;
}

html.notesmart-v68 #main-scrollable-area :where(input, select, textarea):focus {
  border-color: var(--ks68-primary) !important;
  box-shadow: 0 0 0 3px rgba(8, 122, 93, 0.12) !important;
}

html.notesmart-v68
  #main-scrollable-area
  :where(button, a)[class*="bg-primary"] {
  background: linear-gradient(
    135deg,
    var(--ks68-primary),
    var(--ks68-primary-dark)
  ) !important;
  box-shadow: 0 7px 18px rgba(8, 122, 93, 0.17);
}

html.notesmart-v68 aside {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 251, 248, 0.96)
  ) !important;
  border-color: var(--ks68-line) !important;
  box-shadow: 10px 0 34px rgba(12, 74, 56, 0.045);
}

html.notesmart-v68 aside nav a {
  min-height: 48px;
  margin-block: 3px;
  border-radius: 14px !important;
}

html.notesmart-v68 aside nav a[aria-current="page"] {
  color: #fff !important;
  background: linear-gradient(135deg, #078164, #08644f) !important;
  box-shadow: 0 9px 20px rgba(8, 100, 79, 0.2) !important;
}

html.notesmart-v68 aside nav a[aria-current="page"] :where(span, svg) {
  color: #fff !important;
  stroke: currentColor !important;
}

/* Page headers are compact, colorful anchors instead of oversized empty heroes. */
html.notesmart-v68 body.ks-v68-page #main-scrollable-area .ns-v47-page-header,
html.notesmart-v68 body.ks-v68-page #main-scrollable-area > header,
html.notesmart-v68 body.ks-v68-page #main-scrollable-area > div > header {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(96, 150, 127, 0.27) !important;
  border-radius: 20px !important;
  background: radial-gradient(
      circle at 91% 2%,
      rgba(31, 160, 112, 0.18),
      transparent 20rem
    ),
    radial-gradient(
      circle at 75% 100%,
      rgba(245, 158, 11, 0.09),
      transparent 13rem
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(239, 249, 243, 0.97)
    ) !important;
  box-shadow: var(--ks68-shadow) !important;
}

html.notesmart-v68
  body.ks-v68-page
  #main-scrollable-area
  .ns-v47-page-header::before,
html.notesmart-v68 body.ks-v68-page #main-scrollable-area > header::before,
html.notesmart-v68
  body.ks-v68-page
  #main-scrollable-area
  > div
  > header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #16a36f, #08644f);
}

/* Dashboard: remove the narrow center column and reduce vertical dead space. */
html.notesmart-v68 body.ks-v68-dashboard #main-scrollable-area > div {
  display: grid !important;
  gap: var(--ks68-gap) !important;
  padding-top: clamp(14px, 1.7vw, 24px) !important;
  padding-bottom: clamp(88px, 8vw, 112px) !important;
}

html.notesmart-v68 body.ks-v68-dashboard #main-scrollable-area > div > header {
  margin: 0 !important;
  padding: 18px clamp(18px, 2vw, 26px) !important;
}

html.notesmart-v68 body.ks-v68-dashboard #main-scrollable-area > div > main {
  display: grid !important;
  gap: var(--ks68-gap) !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

html.notesmart-v68 body.ks-v68-dashboard .ks-dashboard-kpi-grid {
  gap: clamp(10px, 1.1vw, 16px) !important;
}

html.notesmart-v68 body.ks-v68-dashboard .ks-dashboard-stat-card {
  min-height: 108px !important;
  padding: 16px !important;
  overflow: hidden;
}

html.notesmart-v68 body.ks-v68-dashboard .ks-dashboard-stat-card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  right: -24px;
  bottom: -30px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.055;
}

html.notesmart-v68 body.ks-v68-dashboard .ks-dashboard-stat-card {
  position: relative;
}

/* Journal: practical density while keeping controls comfortably clickable. */
html.notesmart-v68 body.ks-v68-journal #main-scrollable-area > div {
  padding-top: 14px !important;
  padding-bottom: 104px !important;
}

html.notesmart-v68 body.ks-v68-journal #main-scrollable-area > div,
html.notesmart-v68 body.ks-v68-journal .ns-v47-page {
  max-width: var(--ks68-content) !important;
}

html.notesmart-v68
  body.ks-v68-journal
  #main-scrollable-area
  :where(
    .ns-journal-mode-card,
    .ns-journal-class-picker,
    .ns-journal-schedule-card
  ) {
  padding: clamp(13px, 1.45vw, 18px) !important;
  border-radius: 18px !important;
}

html.notesmart-v68
  body.ks-v68-journal
  #main-scrollable-area
  :where(.space-y-4, .space-y-5, .space-y-6)
  > :not([hidden])
  ~ :not([hidden]) {
  margin-top: var(--ks68-gap) !important;
}

/* Reports, roster, menu, and data tables make better use of tablet/desktop space. */
html.notesmart-v68 body.ks-v68-reports .ks-v64-report-grid,
html.notesmart-v68 body.ks-v68-reports .ks-report-grid {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 280px), 1fr)
  ) !important;
  gap: 16px !important;
}

html.notesmart-v68 body.ks-v68-reports .ks-v64-report-card,
html.notesmart-v68 body.ks-v68-reports .ks-report-card {
  min-height: 180px !important;
}

html.notesmart-v68 body.ks-v68-menu .ns-menu-content {
  width: 100% !important;
  max-width: none !important;
}

html.notesmart-v68 body.ks-v68-menu .ns-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 250px), 1fr)
  ) !important;
  gap: 14px !important;
}

html.notesmart-v68 body.ks-v68-menu .ns-menu-item {
  min-height: 92px !important;
}

html.notesmart-v68
  #main-scrollable-area
  :where(.overflow-x-auto, .table-wrapper, .table-container):has(table) {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

html.notesmart-v68 #main-scrollable-area table {
  min-width: 100%;
}

@media (min-width: 1200px) {
  html.notesmart-v68 #main-scrollable-area > :where(div, section, article) {
    padding-inline: clamp(20px, 2.1vw, 34px) !important;
  }

  html.notesmart-v68 body.ks-v68-reports .ks-v64-report-grid,
  html.notesmart-v68 body.ks-v68-reports .ks-report-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --ks68-gutter: clamp(14px, 2.2vw, 22px);
  }

  html.notesmart-v68 #main-scrollable-area > div {
    padding-inline: var(--ks68-gutter) !important;
  }

  html.notesmart-v68 body.ks-v68-reports .ks-v64-report-grid,
  html.notesmart-v68 body.ks-v68-reports .ks-report-grid,
  html.notesmart-v68 body.ks-v68-menu .ns-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  :root {
    --ks68-gutter: max(10px, env(safe-area-inset-left, 0px));
    --ks68-gap: 10px;
  }

  html.notesmart-v68 #main-scrollable-area {
    scrollbar-gutter: auto;
    padding-inline: 0 !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(
      104px + env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  html.notesmart-v68 #main-scrollable-area > :where(div, section, article) {
    width: 100% !important;
    max-width: none !important;
    padding-inline: var(--ks68-gutter) !important;
  }

  html.notesmart-v68 body.ks-v68-page #main-scrollable-area .ns-v47-page-header,
  html.notesmart-v68 body.ks-v68-page #main-scrollable-area > header,
  html.notesmart-v68 body.ks-v68-page #main-scrollable-area > div > header {
    margin: 10px 0 0 !important;
    padding: 14px 15px !important;
    border-radius: 17px !important;
  }

  html.notesmart-v68 body.ks-v68-dashboard #main-scrollable-area > div {
    padding-top: 0 !important;
  }

  html.notesmart-v68
    body.ks-v68-dashboard
    #main-scrollable-area
    > div
    > header {
    margin-top: 10px !important;
    padding: 14px 15px !important;
  }

  html.notesmart-v68 body.ks-v68-dashboard .ks-dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.notesmart-v68 body.ks-v68-dashboard .ks-dashboard-stat-card {
    min-height: 92px !important;
    padding: 11px !important;
  }

  html.notesmart-v68 body.ks-v68-journal #main-scrollable-area > div {
    padding-top: 0 !important;
  }

  html.notesmart-v68
    body.ks-v68-journal
    #main-scrollable-area
    :where(
      .ns-journal-mode-card,
      .ns-journal-class-picker,
      .ns-journal-schedule-card
    ) {
    padding: 11px !important;
    border-radius: 15px !important;
  }

  html.notesmart-v68 body.ks-v68-menu .ns-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html.notesmart-v68 body.ks-v68-menu .ns-menu-item {
    min-height: 78px !important;
    padding: 10px !important;
  }

  html.notesmart-v68 body.ks-v68-reports .ks-v64-report-grid,
  html.notesmart-v68 body.ks-v68-reports .ks-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html.notesmart-v68 body.ks-v68-reports .ks-v64-report-card,
  html.notesmart-v68 body.ks-v68-reports .ks-report-card {
    min-height: 0 !important;
  }
}

@media (max-width: 420px) {
  html.notesmart-v68 body.ks-v68-reports .ks-v64-report-grid,
  html.notesmart-v68 body.ks-v68-reports .ks-report-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.notesmart-v68 *,
  html.notesmart-v68 *::before,
  html.notesmart-v68 *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  html.notesmart-v68,
  html.notesmart-v68 body,
  html.notesmart-v68 #root,
  html.notesmart-v68 #main-scrollable-area {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
}


/* ===== retained cascade: notesmart-v69-clarity-dialog.css ===== */
/* KiSmart V69 — explicit contrast, compact dialogs, and practical density. */
:root {
  --ks69-ink: #102820;
  --ks69-muted: #5f746b;
  --ks69-green: #08785c;
  --ks69-green-dark: #055442;
  --ks69-green-soft: #e9f6ef;
  --ks69-line: #d4e3db;
}

/* Login must stay readable regardless of legacy hero/background rules. */
html.notesmart-v68 #root > .ks-login-shell {
  background: radial-gradient(
      circle at 18% 12%,
      rgba(21, 142, 99, 0.14),
      transparent 27rem
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(14, 116, 144, 0.08),
      transparent 24rem
    ),
    linear-gradient(145deg, #f8fcfa 0%, #edf7f1 52%, #e8f3ee 100%) !important;
}

html.notesmart-v68 .ks-login-brand {
  color: var(--ks69-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html.notesmart-v68 .ks-login-brand > div:first-child {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(5, 84, 66, 0.2) !important;
  background: linear-gradient(145deg, #10946e, #05614c) !important;
  box-shadow: 0 10px 25px rgba(5, 97, 76, 0.22) !important;
}

html.notesmart-v68 .ks-login-brand > div:first-child :where(svg, span) {
  color: #fff !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html.notesmart-v68 .ks-login-brand h1,
html.notesmart-v68 .ks-login-brand #ks-login-title {
  color: var(--ks69-green-dark) !important;
  -webkit-text-fill-color: var(--ks69-green-dark) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html.notesmart-v68 .ks-login-brand p {
  color: #587067 !important;
  -webkit-text-fill-color: #587067 !important;
  opacity: 1 !important;
}

html.notesmart-v68 .ks-login-panel {
  border-color: rgba(111, 157, 137, 0.28) !important;
  box-shadow: 0 22px 55px rgba(8, 78, 59, 0.13) !important;
}

html.notesmart-v68 .ks-login-leading-icon,
html.notesmart-v68 .ks-login-trailing,
html.notesmart-v68 .ks-login-leading-icon svg,
html.notesmart-v68 .ks-login-trailing svg {
  color: #42695b !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Menu profile is a deliberate green hero; menu actions are bright cards. */
html.notesmart-v68 body.ks-v68-menu .ns-menu-profile {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(5, 84, 66, 0.18) !important;
  background: radial-gradient(
      circle at 92% 0%,
      rgba(250, 204, 94, 0.26),
      transparent 17rem
    ),
    linear-gradient(135deg, #0b8463, #055442) !important;
  box-shadow: 0 14px 34px rgba(5, 84, 66, 0.16) !important;
}

html.notesmart-v68
  body.ks-v68-menu
  .ns-menu-profile
  :where(h1, h2, h3, p, span, strong, svg) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html.notesmart-v68 body.ks-v68-menu .ns-menu-item,
html.notesmart-v68 body.ks-v68-menu .ks-admin-menu-link,
html.notesmart-v68 body.ks-v68-menu .ks-admin-menu-link:visited {
  color: var(--ks69-ink) !important;
  -webkit-text-fill-color: var(--ks69-ink) !important;
  border: 1px solid var(--ks69-line) !important;
  background: linear-gradient(145deg, #fff, #f7fbf9) !important;
  box-shadow: 0 7px 19px rgba(9, 74, 56, 0.07) !important;
}

html.notesmart-v68
  body.ks-v68-menu
  .ns-menu-item
  :where(.ns-menu-label, .ks-admin-menu-label, h3, strong),
html.notesmart-v68
  body.ks-v68-menu
  .ks-admin-menu-link
  :where(.ns-menu-label, .ks-admin-menu-label, h3, strong) {
  color: var(--ks69-ink) !important;
  -webkit-text-fill-color: var(--ks69-ink) !important;
  opacity: 1 !important;
}

html.notesmart-v68
  body.ks-v68-menu
  .ns-menu-item
  :where(.ns-menu-desc, .ks-admin-menu-desc, p),
html.notesmart-v68
  body.ks-v68-menu
  .ks-admin-menu-link
  :where(.ns-menu-desc, .ks-admin-menu-desc, p) {
  color: var(--ks69-muted) !important;
  -webkit-text-fill-color: var(--ks69-muted) !important;
  opacity: 1 !important;
}

html.notesmart-v68 body.ks-v68-menu .ns-menu-item :where(.ns-menu-icon, svg),
html.notesmart-v68
  body.ks-v68-menu
  .ks-admin-menu-link
  :where(.ns-menu-icon, svg) {
  color: var(--ks69-green) !important;
  -webkit-text-fill-color: var(--ks69-green) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
  html.notesmart-v68 body.ks-v68-menu .ns-menu-item:hover,
  html.notesmart-v68 body.ks-v68-menu .ks-admin-menu-link:hover {
    border-color: rgba(8, 120, 92, 0.38) !important;
    background: linear-gradient(145deg, #fff, #edf8f2) !important;
    transform: translateY(-2px) !important;
  }
}

/* Report cards: white copy on green, dark icons/chips on pale surfaces. */
html.notesmart-v68
  body.ks-v68-reports
  :where(.ks-v64-report-card, .ks-report-card) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(4, 78, 61, 0.2) !important;
  background: linear-gradient(145deg, #0b8062, #08684f) !important;
}

html.notesmart-v68
  body.ks-v68-reports
  :where(.ks-v64-report-card, .ks-report-card)
  :where(h2, h3, strong, .ks-report-title, .ks-report-copy > p:first-child) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

html.notesmart-v68
  body.ks-v68-reports
  :where(.ks-v64-report-card, .ks-report-card)
  :where(.ks-report-description, .ks-report-footer, p, .text-muted-foreground) {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
}

html.notesmart-v68
  body.ks-v68-reports
  :where(.ks-v64-report-icon, .ks-report-icon),
html.notesmart-v68
  body.ks-v68-reports
  .ks-v64-report-card
  > div:first-child
  > span:first-child,
html.notesmart-v68
  body.ks-v68-reports
  .ks-report-card
  > div:first-child
  > span:first-child {
  color: var(--ks69-green-dark) !important;
  -webkit-text-fill-color: var(--ks69-green-dark) !important;
  border: 1px solid rgba(5, 84, 66, 0.13) !important;
  background: #effaf4 !important;
  opacity: 1 !important;
}

html.notesmart-v68
  body.ks-v68-reports
  :where(.ks-v64-report-icon, .ks-report-icon)
  svg,
html.notesmart-v68
  body.ks-v68-reports
  .ks-v64-report-card
  > div:first-child
  > span:first-child
  svg,
html.notesmart-v68
  body.ks-v68-reports
  .ks-report-card
  > div:first-child
  > span:first-child
  svg {
  color: var(--ks69-green-dark) !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
}

html.notesmart-v68 body.ks-v68-reports .ks-v66-report-chip-row > *,
html.notesmart-v68
  body.ks-v68-reports
  :where(.ks-v65-report-chip, .ks-v65-report-more-chip) {
  color: #154536 !important;
  -webkit-text-fill-color: #154536 !important;
  border-color: rgba(5, 84, 66, 0.2) !important;
  background: #fff !important;
  opacity: 1 !important;
}

html.notesmart-v68 body.ks-v68-reports input[type="search"] ~ svg,
html.notesmart-v68 body.ks-v68-reports input[type="text"] ~ svg,
html.notesmart-v68 body.ks-v68-reports .ks-report-search > svg,
html.notesmart-v68 body.ks-v68-reports form svg {
  color: #526c62 !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html.notesmart-v68 body.ks-v68-reports .ks-report-search > svg {
  z-index: 2 !important;
  width: 18px !important;
  height: 18px !important;
}

html.notesmart-v68 body.ks-v68-reports .ks-report-search > input {
  padding-left: 42px !important;
}

/* Alert dialogs were never covered by the older role=dialog rules. */
html.notesmart-v68 [role="alertdialog"] {
  box-sizing: border-box !important;
  width: min(calc(100vw - 32px), 560px) !important;
  min-width: 0 !important;
  max-width: 560px !important;
  min-height: 0 !important;
  max-height: min(82dvh, 640px) !important;
  padding: clamp(18px, 2vw, 24px) !important;
  gap: 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid var(--ks69-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 26px 75px rgba(7, 43, 33, 0.25) !important;
}

html.notesmart-v68
  [role="alertdialog"]
  :where(h2, h3, [data-radix-alert-dialog-title]) {
  color: var(--ks69-ink) !important;
  -webkit-text-fill-color: var(--ks69-ink) !important;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
}

html.notesmart-v68
  [role="alertdialog"]
  :where(p, [data-radix-alert-dialog-description]) {
  color: var(--ks69-muted) !important;
  -webkit-text-fill-color: var(--ks69-muted) !important;
  line-height: 1.55 !important;
}

html.notesmart-v68 [role="alertdialog"] > div:last-child {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

/* Ordinary utility dialogs stay proportional; the journal editor has its own size. */
@media (min-width: 768px) {
  html.notesmart-v68 [role="dialog"]:not([data-kismart-journal-dialog="1"]) {
    width: min(calc(100vw - 48px), 720px) !important;
    max-width: 720px !important;
    max-height: min(86dvh, 820px) !important;
  }

  html.notesmart-v68 [data-kismart-journal-dialog="1"] {
    width: min(calc(100vw - 48px), 1040px) !important;
    max-width: 1040px !important;
    height: min(calc(100dvh - 48px), 880px) !important;
    max-height: calc(100dvh - 48px) !important;
  }

  html.notesmart-v68 body.ks-v68-menu .ns-menu-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 16px !important;
  }

  html.notesmart-v68
    body.ks-v68-menu
    .ns-menu-content
    > :where(.ns-menu-profile, header, .ns-v47-page-header) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  html.notesmart-v68 [role="alertdialog"] {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 18px !important;
    border-radius: 17px !important;
  }

  html.notesmart-v68 .ks-login-container {
    max-width: 410px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.notesmart-v68 [role="alertdialog"],
  html.notesmart-v68 [role="dialog"] {
    animation: none !important;
  }
}

/* ===== V70 final integrity / clarity / responsive layer ===== */
:root{--ks-v70-build:"20260814-v76-journal-parser-fix"}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{overscroll-behavior-y:none;text-rendering:optimizeLegibility}
#root{min-height:100dvh}
main,[data-scroll-container],#main-scrollable-area{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
button,a,input,select,textarea,[role="button"],[role="combobox"]{touch-action:manipulation}
button,[role="button"],a{ -webkit-tap-highlight-color:transparent}
.notesmart-dialog-content{
  width:min(calc(100vw - 2rem),54rem)!important;
  max-width:min(calc(100vw - 2rem),54rem)!important;
  max-height:min(90dvh,56rem)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}
.notesmart-dialog-close{
  position:absolute!important;right:.85rem!important;top:.85rem!important;
  left:auto!important;bottom:auto!important;z-index:80!important;
  width:2.5rem!important;height:2.5rem!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  border-radius:.65rem!important;background:rgba(255,255,255,.96)!important;
  color:#334155!important;border:1px solid #cbd5e1!important;
  box-shadow:0 3px 12px rgba(15,23,42,.12)!important
}
.bg-blue-600.text-white{background-color:#2563eb!important;color:#fff!important}
.bg-emerald-600.text-white{background-color:#059669!important;color:#fff!important}
.bg-orange-500.text-white{background-color:#f97316!important;color:#fff!important}
.bg-red-600.text-white{background-color:#dc2626!important;color:#fff!important}
.bg-indigo-500.text-white{background-color:#6366f1!important;color:#fff!important}
.bg-emerald-100.text-emerald-700{background-color:#d1fae5!important;color:#047857!important;border-color:#6ee7b7!important}
.bg-amber-100.text-amber-700{background-color:#fef3c7!important;color:#b45309!important;border-color:#fcd34d!important}
.bg-blue-100.text-blue-700{background-color:#dbeafe!important;color:#1d4ed8!important;border-color:#93c5fd!important}
.bg-red-100.text-red-700{background-color:#fee2e2!important;color:#b91c1c!important;border-color:#fca5a5!important}
.bg-rose-200.text-rose-800{background-color:#fecdd3!important;color:#9f1239!important;border-color:#fb7185!important}
.bg-indigo-100.text-indigo-700{background-color:#e0e7ff!important;color:#4338ca!important;border-color:#a5b4fc!important}
.bg-slate-100.text-slate-600{background-color:#f1f5f9!important;color:#475569!important;border-color:#cbd5e1!important}
.ks-report-card,.ks-report-copy,.ks-report-description{min-width:0}
.ks-report-description{color:#475569!important;line-height:1.45!important}
[data-radix-scroll-area-viewport],.overflow-y-auto,.overflow-auto{overscroll-behavior:contain}
@media (min-width:1024px){
  .notesmart-dialog-content{padding:1.35rem!important}
  .ks-report-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:640px){
  html{scrollbar-gutter:auto}
  .notesmart-dialog-content{width:calc(100vw - 1rem)!important;max-width:calc(100vw - 1rem)!important;max-height:92dvh!important;padding:1rem!important;border-radius:1rem!important}
  .notesmart-dialog-close{right:.55rem!important;top:.55rem!important}
  button,[role="button"],[role="combobox"]{min-height:42px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}