@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────
   MW PANEL 2.0 — Global Design System
   Aesthetic: White Light · Refined Minimalism · Educational
   ───────────────────────────────────────────────────────────────── */
/* 1. Google Fonts — Lora (display) + Plus Jakarta Sans (UI) */
/* 2. Tailwind layers */
*, ::before, ::after{
  --tw-border-spacing-x:          0;
  --tw-border-spacing-y:          0;
  --tw-translate-x:          0;
  --tw-translate-y:          0;
  --tw-rotate:          0;
  --tw-skew-x:          0;
  --tw-skew-y:          0;
  --tw-scale-x:          1;
  --tw-scale-y:          1;
  --tw-pan-x:           ;
  --tw-pan-y:           ;
  --tw-pinch-zoom:           ;
  --tw-scroll-snap-strictness:          proximity;
  --tw-gradient-from-position:           ;
  --tw-gradient-via-position:           ;
  --tw-gradient-to-position:           ;
  --tw-ordinal:           ;
  --tw-slashed-zero:           ;
  --tw-numeric-figure:           ;
  --tw-numeric-spacing:           ;
  --tw-numeric-fraction:           ;
  --tw-ring-inset:           ;
  --tw-ring-offset-width:          0px;
  --tw-ring-offset-color:          #fff;
  --tw-ring-color:          rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:          0 0 #0000;
  --tw-ring-shadow:          0 0 #0000;
  --tw-shadow:          0 0 #0000;
  --tw-shadow-colored:          0 0 #0000;
  --tw-blur:           ;
  --tw-brightness:           ;
  --tw-contrast:           ;
  --tw-grayscale:           ;
  --tw-hue-rotate:           ;
  --tw-invert:           ;
  --tw-saturate:           ;
  --tw-sepia:           ;
  --tw-drop-shadow:           ;
  --tw-backdrop-blur:           ;
  --tw-backdrop-brightness:           ;
  --tw-backdrop-contrast:           ;
  --tw-backdrop-grayscale:           ;
  --tw-backdrop-hue-rotate:           ;
  --tw-backdrop-invert:           ;
  --tw-backdrop-opacity:           ;
  --tw-backdrop-saturate:           ;
  --tw-backdrop-sepia:           ;
  --tw-contain-size:           ;
  --tw-contain-layout:           ;
  --tw-contain-paint:           ;
  --tw-contain-style:           ;
}
::backdrop{
  --tw-border-spacing-x:          0;
  --tw-border-spacing-y:          0;
  --tw-translate-x:          0;
  --tw-translate-y:          0;
  --tw-rotate:          0;
  --tw-skew-x:          0;
  --tw-skew-y:          0;
  --tw-scale-x:          1;
  --tw-scale-y:          1;
  --tw-pan-x:           ;
  --tw-pan-y:           ;
  --tw-pinch-zoom:           ;
  --tw-scroll-snap-strictness:          proximity;
  --tw-gradient-from-position:           ;
  --tw-gradient-via-position:           ;
  --tw-gradient-to-position:           ;
  --tw-ordinal:           ;
  --tw-slashed-zero:           ;
  --tw-numeric-figure:           ;
  --tw-numeric-spacing:           ;
  --tw-numeric-fraction:           ;
  --tw-ring-inset:           ;
  --tw-ring-offset-width:          0px;
  --tw-ring-offset-color:          #fff;
  --tw-ring-color:          rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:          0 0 #0000;
  --tw-ring-shadow:          0 0 #0000;
  --tw-shadow:          0 0 #0000;
  --tw-shadow-colored:          0 0 #0000;
  --tw-blur:           ;
  --tw-brightness:           ;
  --tw-contrast:           ;
  --tw-grayscale:           ;
  --tw-hue-rotate:           ;
  --tw-invert:           ;
  --tw-saturate:           ;
  --tw-sepia:           ;
  --tw-drop-shadow:           ;
  --tw-backdrop-blur:           ;
  --tw-backdrop-brightness:           ;
  --tw-backdrop-contrast:           ;
  --tw-backdrop-grayscale:           ;
  --tw-backdrop-hue-rotate:           ;
  --tw-backdrop-invert:           ;
  --tw-backdrop-opacity:           ;
  --tw-backdrop-saturate:           ;
  --tw-backdrop-sepia:           ;
  --tw-contain-size:           ;
  --tw-contain-layout:           ;
  --tw-contain-paint:           ;
  --tw-contain-style:           ;
}
.container{
  width:          100%;
}
@media (min-width: 640px){
  .container{
    max-width:          640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width:          768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width:          1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width:          1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width:          1536px;
  }
}
.pointer-events-none{
  pointer-events:          none;
}
.\!visible{
  visibility:          visible !important;
}
.visible{
  visibility:          visible;
}
.invisible{
  visibility:          hidden;
}
.collapse{
  visibility:          collapse;
}
.static{
  position:          static;
}
.fixed{
  position:          fixed;
}
.absolute{
  position:          absolute;
}
.relative{
  position:          relative;
}
.sticky{
  position:          sticky;
}
.-inset-2{
  inset:          -0.5rem;
}
.inset-0{
  inset:          0px;
}
.-bottom-1{
  bottom:          -0.25rem;
}
.-left-2{
  left:          -0.5rem;
}
.-right-1{
  right:          -0.25rem;
}
.-top-1{
  top:          -0.25rem;
}
.-top-2{
  top:          -0.5rem;
}
.bottom-1{
  bottom:          0.25rem;
}
.bottom-2{
  bottom:          0.5rem;
}
.bottom-4{
  bottom:          1rem;
}
.bottom-8{
  bottom:          2rem;
}
.left-0{
  left:          0px;
}
.left-1\/2{
  left:          50%;
}
.left-2{
  left:          0.5rem;
}
.left-3{
  left:          0.75rem;
}
.left-4{
  left:          1rem;
}
.right-0{
  right:          0px;
}
.right-1{
  right:          0.25rem;
}
.right-2{
  right:          0.5rem;
}
.right-4{
  right:          1rem;
}
.top-1{
  top:          0.25rem;
}
.top-1\/2{
  top:          50%;
}
.top-2{
  top:          0.5rem;
}
.top-3{
  top:          0.75rem;
}
.top-4{
  top:          1rem;
}
.z-10{
  z-index:          10;
}
.z-50{
  z-index:          50;
}
.order-1{
  order:          1;
}
.order-2{
  order:          2;
}
.col-span-2{
  grid-column:          span 2 / span 2;
}
.col-span-5{
  grid-column:          span 5 / span 5;
}
.float-right{
  float:          right;
}
.-m-2{
  margin:          -0.5rem;
}
.m-0{
  margin:          0px;
}
.m-4{
  margin:          1rem;
}
.-mx-2{
  margin-left:          -0.5rem;
  margin-right:          -0.5rem;
}
.-mx-4{
  margin-left:          -1rem;
  margin-right:          -1rem;
}
.mx-4{
  margin-left:          1rem;
  margin-right:          1rem;
}
.mx-auto{
  margin-left:          auto;
  margin-right:          auto;
}
.my-0{
  margin-top:          0px;
  margin-bottom:          0px;
}
.my-3{
  margin-top:          0.75rem;
  margin-bottom:          0.75rem;
}
.\!mb-0{
  margin-bottom:          0px !important;
}
.\!mb-1{
  margin-bottom:          0.25rem !important;
}
.\!mb-2{
  margin-bottom:          0.5rem !important;
}
.\!mb-3{
  margin-bottom:          0.75rem !important;
}
.\!mb-4{
  margin-bottom:          1rem !important;
}
.mb-0{
  margin-bottom:          0px;
}
.mb-0\.5{
  margin-bottom:          0.125rem;
}
.mb-1{
  margin-bottom:          0.25rem;
}
.mb-1\.5{
  margin-bottom:          0.375rem;
}
.mb-12{
  margin-bottom:          3rem;
}
.mb-2{
  margin-bottom:          0.5rem;
}
.mb-3{
  margin-bottom:          0.75rem;
}
.mb-4{
  margin-bottom:          1rem;
}
.mb-6{
  margin-bottom:          1.5rem;
}
.mb-8{
  margin-bottom:          2rem;
}
.ml-0\.5{
  margin-left:          0.125rem;
}
.ml-1{
  margin-left:          0.25rem;
}
.ml-2{
  margin-left:          0.5rem;
}
.ml-3{
  margin-left:          0.75rem;
}
.ml-4{
  margin-left:          1rem;
}
.ml-8{
  margin-left:          2rem;
}
.mr-1{
  margin-right:          0.25rem;
}
.mr-2{
  margin-right:          0.5rem;
}
.mr-3{
  margin-right:          0.75rem;
}
.mr-4{
  margin-right:          1rem;
}
.mt-0{
  margin-top:          0px;
}
.mt-0\.5{
  margin-top:          0.125rem;
}
.mt-1{
  margin-top:          0.25rem;
}
.mt-12{
  margin-top:          3rem;
}
.mt-2{
  margin-top:          0.5rem;
}
.mt-3{
  margin-top:          0.75rem;
}
.mt-4{
  margin-top:          1rem;
}
.mt-6{
  margin-top:          1.5rem;
}
.mt-8{
  margin-top:          2rem;
}
.mt-auto{
  margin-top:          auto;
}
.line-clamp-2{
  overflow:          hidden;
  display:          -webkit-box;
  -webkit-box-orient:          vertical;
  -webkit-line-clamp:          2;
}
.line-clamp-3{
  overflow:          hidden;
  display:          -webkit-box;
  -webkit-box-orient:          vertical;
  -webkit-line-clamp:          3;
}
.block{
  display:          block;
}
.inline-block{
  display:          inline-block;
}
.inline{
  display:          inline;
}
.flex{
  display:          flex;
}
.inline-flex{
  display:          inline-flex;
}
.table{
  display:          table;
}
.\!grid{
  display:          grid !important;
}
.grid{
  display:          grid;
}
.contents{
  display:          contents;
}
.hidden{
  display:          none;
}
.aspect-video{
  aspect-ratio:          16 / 9;
}
.h-1{
  height:          0.25rem;
}
.h-1\.5{
  height:          0.375rem;
}
.h-10{
  height:          2.5rem;
}
.h-12{
  height:          3rem;
}
.h-16{
  height:          4rem;
}
.h-2{
  height:          0.5rem;
}
.h-20{
  height:          5rem;
}
.h-24{
  height:          6rem;
}
.h-3{
  height:          0.75rem;
}
.h-32{
  height:          8rem;
}
.h-4{
  height:          1rem;
}
.h-40{
  height:          10rem;
}
.h-5{
  height:          1.25rem;
}
.h-6{
  height:          1.5rem;
}
.h-64{
  height:          16rem;
}
.h-8{
  height:          2rem;
}
.h-9{
  height:          2.25rem;
}
.h-96{
  height:          24rem;
}
.h-\[600px\]{
  height:          600px;
}
.h-auto{
  height:          auto;
}
.h-fit{
  height:          -moz-fit-content;
  height:          fit-content;
}
.h-full{
  height:          100%;
}
.max-h-60{
  max-height:          15rem;
}
.max-h-64{
  max-height:          16rem;
}
.max-h-96{
  max-height:          24rem;
}
.max-h-full{
  max-height:          100%;
}
.max-h-screen{
  max-height:          100vh;
}
.min-h-64{
  min-height:          16rem;
}
.min-h-\[120px\]{
  min-height:          120px;
}
.min-h-\[160px\]{
  min-height:          160px;
}
.min-h-\[200px\]{
  min-height:          200px;
}
.min-h-\[60px\]{
  min-height:          60px;
}
.min-h-screen{
  min-height:          100vh;
}
.w-1{
  width:          0.25rem;
}
.w-1\.5{
  width:          0.375rem;
}
.w-1\/2{
  width:          50%;
}
.w-10{
  width:          2.5rem;
}
.w-12{
  width:          3rem;
}
.w-16{
  width:          4rem;
}
.w-2{
  width:          0.5rem;
}
.w-20{
  width:          5rem;
}
.w-24{
  width:          6rem;
}
.w-3{
  width:          0.75rem;
}
.w-32{
  width:          8rem;
}
.w-4{
  width:          1rem;
}
.w-40{
  width:          10rem;
}
.w-48{
  width:          12rem;
}
.w-5{
  width:          1.25rem;
}
.w-6{
  width:          1.5rem;
}
.w-60{
  width:          15rem;
}
.w-64{
  width:          16rem;
}
.w-8{
  width:          2rem;
}
.w-80{
  width:          20rem;
}
.w-9{
  width:          2.25rem;
}
.w-full{
  width:          100%;
}
.min-w-0{
  min-width:          0px;
}
.min-w-12{
  min-width:          3rem;
}
.min-w-48{
  min-width:          12rem;
}
.min-w-\[200px\]{
  min-width:          200px;
}
.min-w-\[70px\]{
  min-width:          70px;
}
.min-w-fit{
  min-width:          -moz-fit-content;
  min-width:          fit-content;
}
.max-w-20{
  max-width:          5rem;
}
.max-w-24{
  max-width:          6rem;
}
.max-w-32{
  max-width:          8rem;
}
.max-w-4xl{
  max-width:          56rem;
}
.max-w-6xl{
  max-width:          72rem;
}
.max-w-7xl{
  max-width:          80rem;
}
.max-w-\[400px\]{
  max-width:          400px;
}
.max-w-\[60\%\]{
  max-width:          60%;
}
.max-w-\[614px\]{
  max-width:          614px;
}
.max-w-\[70\%\]{
  max-width:          70%;
}
.max-w-\[80px\]{
  max-width:          80px;
}
.max-w-\[85\%\]{
  max-width:          85%;
}
.max-w-full{
  max-width:          100%;
}
.max-w-md{
  max-width:          28rem;
}
.max-w-none{
  max-width:          none;
}
.max-w-sm{
  max-width:          24rem;
}
.max-w-xs{
  max-width:          20rem;
}
.flex-1{
  flex:          1 1 0%;
}
.flex-shrink-0{
  flex-shrink:          0;
}
.flex-grow{
  flex-grow:          1;
}
.-translate-x-1\/2{
  --tw-translate-x:          -50%;
  transform:          translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y:          -50%;
  transform:          translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-3{
  --tw-rotate:          3deg;
  transform:          translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110{
  --tw-scale-x:          1.1;
  --tw-scale-y:          1.1;
  transform:          translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform:          translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{
  50%{
    opacity:          .5;
  }
}
.animate-pulse{
  animation:          pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
  to{
    transform:          rotate(360deg);
  }
}
.animate-spin{
  animation:          spin 1s linear infinite;
}
@keyframes spin{
  to{
    transform:          rotate(360deg);
  }
}
.animate-spin-slow{
  animation:          spin 5s linear infinite;
}
.cursor-default{
  cursor:          default;
}
.cursor-grab{
  cursor:          grab;
}
.cursor-move{
  cursor:          move;
}
.cursor-not-allowed{
  cursor:          not-allowed;
}
.cursor-pointer{
  cursor:          pointer;
}
.select-none{
  -webkit-user-select:          none;
     -moz-user-select:          none;
          user-select:          none;
}
.resize-none{
  resize:          none;
}
.resize{
  resize:          both;
}
.list-inside{
  list-style-position:          inside;
}
.list-disc{
  list-style-type:          disc;
}
.grid-cols-1{
  grid-template-columns:          repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns:          repeat(12, 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-6{
  grid-template-columns:          repeat(6, minmax(0, 1fr));
}
.grid-cols-8{
  grid-template-columns:          repeat(8, minmax(0, 1fr));
}
.flex-row{
  flex-direction:          row;
}
.flex-row-reverse{
  flex-direction:          row-reverse;
}
.flex-col{
  flex-direction:          column;
}
.flex-wrap{
  flex-wrap:          wrap;
}
.items-start{
  align-items:          flex-start;
}
.items-end{
  align-items:          flex-end;
}
.items-center{
  align-items:          center;
}
.justify-start{
  justify-content:          flex-start;
}
.justify-end{
  justify-content:          flex-end;
}
.justify-center{
  justify-content:          center;
}
.justify-between{
  justify-content:          space-between;
}
.gap-1{
  gap:          0.25rem;
}
.gap-1\.5{
  gap:          0.375rem;
}
.gap-2{
  gap:          0.5rem;
}
.gap-3{
  gap:          0.75rem;
}
.gap-4{
  gap:          1rem;
}
.gap-6{
  gap:          1.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:          0;
  margin-right:          calc(0.25rem * var(--tw-space-x-reverse));
  margin-left:          calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:          0;
  margin-right:          calc(0.5rem * var(--tw-space-x-reverse));
  margin-left:          calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:          0;
  margin-right:          calc(0.75rem * var(--tw-space-x-reverse));
  margin-left:          calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:          0;
  margin-right:          calc(1rem * var(--tw-space-x-reverse));
  margin-left:          calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:          0;
  margin-top:          calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:          calc(0px * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:          0;
  margin-top:          calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:          calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:          0;
  margin-top:          calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:          calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:          0;
  margin-top:          calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:          calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:          0;
  margin-top:          calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:          calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:          0;
  margin-top:          calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:          calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:          0;
  border-top-width:          calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:          calc(1px * var(--tw-divide-y-reverse));
}
.overflow-auto{
  overflow:          auto;
}
.overflow-hidden{
  overflow:          hidden;
}
.overflow-visible{
  overflow:          visible;
}
.overflow-x-auto{
  overflow-x:          auto;
}
.overflow-y-auto{
  overflow-y:          auto;
}
.truncate{
  overflow:          hidden;
  text-overflow:          ellipsis;
  white-space:          nowrap;
}
.overflow-ellipsis{
  text-overflow:          ellipsis;
}
.whitespace-nowrap{
  white-space:          nowrap;
}
.whitespace-pre-line{
  white-space:          pre-line;
}
.whitespace-pre-wrap{
  white-space:          pre-wrap;
}
.rounded{
  border-radius:          0.25rem;
}
.rounded-2xl{
  border-radius:          12px;
}
.rounded-full{
  border-radius:          9999px;
}
.rounded-lg{
  border-radius:          8px;
}
.rounded-md{
  border-radius:          6px;
}
.rounded-xl{
  border-radius:          10px;
}
.rounded-b-md{
  border-bottom-right-radius:          6px;
  border-bottom-left-radius:          6px;
}
.rounded-t{
  border-top-left-radius:          0.25rem;
  border-top-right-radius:          0.25rem;
}
.rounded-t-lg{
  border-top-left-radius:          8px;
  border-top-right-radius:          8px;
}
.rounded-t-md{
  border-top-left-radius:          6px;
  border-top-right-radius:          6px;
}
.rounded-t-none{
  border-top-left-radius:          0px;
  border-top-right-radius:          0px;
}
.rounded-bl-sm{
  border-bottom-left-radius:          4px;
}
.rounded-br-sm{
  border-bottom-right-radius:          4px;
}
.border{
  border-width:          1px;
}
.border-0{
  border-width:          0px;
}
.border-2{
  border-width:          2px;
}
.border-4{
  border-width:          4px;
}
.border-b{
  border-bottom-width:          1px;
}
.border-b-2{
  border-bottom-width:          2px;
}
.border-l{
  border-left-width:          1px;
}
.border-l-2{
  border-left-width:          2px;
}
.border-l-4{
  border-left-width:          4px;
}
.border-r{
  border-right-width:          1px;
}
.border-r-4{
  border-right-width:          4px;
}
.border-t{
  border-top-width:          1px;
}
.border-t-0{
  border-top-width:          0px;
}
.border-dashed{
  border-style:          dashed;
}
.border-none{
  border-style:          none;
}
.border-blue-200{
  --tw-border-opacity:          1;
  border-color:          rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300{
  --tw-border-opacity:          1;
  border-color:          rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400{
  --tw-border-opacity:          1;
  border-color:          rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-500{
  --tw-border-opacity:          1;
  border-color:          rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-600{
  --tw-border-opacity:          1;
  border-color:          rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-current{
  border-color:          currentColor;
}
.border-emerald-200{
  --tw-border-opacity:          1;
  border-color:          rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-gray-100{
  --tw-border-opacity:          1;
  border-color:          rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity:          1;
  border-color:          rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity:          1;
  border-color:          rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400{
  --tw-border-opacity:          1;
  border-color:          rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-gray-900{
  --tw-border-opacity:          1;
  border-color:          rgb(17 24 39 / var(--tw-border-opacity, 1));
}
.border-green-200{
  --tw-border-opacity:          1;
  border-color:          rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-400{
  --tw-border-opacity:          1;
  border-color:          rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.border-lime-200{
  --tw-border-opacity:          1;
  border-color:          rgb(217 249 157 / var(--tw-border-opacity, 1));
}
.border-orange-200{
  --tw-border-opacity:          1;
  border-color:          rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-500{
  --tw-border-opacity:          1;
  border-color:          rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-pink-500{
  --tw-border-opacity:          1;
  border-color:          rgb(236 72 153 / var(--tw-border-opacity, 1));
}
.border-purple-200{
  --tw-border-opacity:          1;
  border-color:          rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-400{
  --tw-border-opacity:          1;
  border-color:          rgb(192 132 252 / var(--tw-border-opacity, 1));
}
.border-purple-500{
  --tw-border-opacity:          1;
  border-color:          rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-red-200{
  --tw-border-opacity:          1;
  border-color:          rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300{
  --tw-border-opacity:          1;
  border-color:          rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400{
  --tw-border-opacity:          1;
  border-color:          rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500{
  --tw-border-opacity:          1;
  border-color:          rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-600{
  --tw-border-opacity:          1;
  border-color:          rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color:          transparent;
}
.border-white{
  --tw-border-opacity:          1;
  border-color:          rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-yellow-200{
  --tw-border-opacity:          1;
  border-color:          rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-yellow-400{
  --tw-border-opacity:          1;
  border-color:          rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-l-blue-400{
  --tw-border-opacity:          1;
  border-left-color:          rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-t-blue-600{
  --tw-border-opacity:          1;
  border-top-color:          rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-t-purple-500{
  --tw-border-opacity:          1;
  border-top-color:          rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-t-transparent{
  border-top-color:          transparent;
}
.bg-black{
  --tw-bg-opacity:          1;
  background-color:          rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20{
  background-color:          rgb(0 0 0 / 0.2);
}
.bg-black\/50{
  background-color:          rgb(0 0 0 / 0.5);
}
.bg-blue-100{
  --tw-bg-opacity:          1;
  background-color:          rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-200{
  --tw-bg-opacity:          1;
  background-color:          rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-400{
  --tw-bg-opacity:          1;
  background-color:          rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity:          1;
  background-color:          rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600{
  --tw-bg-opacity:          1;
  background-color:          rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-cyan-100{
  --tw-bg-opacity:          1;
  background-color:          rgb(207 250 254 / var(--tw-bg-opacity, 1));
}
.bg-cyan-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(236 254 255 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity:          1;
  background-color:          rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity:          1;
  background-color:          rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300{
  --tw-bg-opacity:          1;
  background-color:          rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity:          1;
  background-color:          rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-200{
  --tw-bg-opacity:          1;
  background-color:          rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.bg-green-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity:          1;
  background-color:          rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-lime-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(247 254 231 / var(--tw-bg-opacity, 1));
}
.bg-orange-100{
  --tw-bg-opacity:          1;
  background-color:          rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-pink-500{
  --tw-bg-opacity:          1;
  background-color:          rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-purple-100{
  --tw-bg-opacity:          1;
  background-color:          rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-400{
  --tw-bg-opacity:          1;
  background-color:          rgb(192 132 252 / var(--tw-bg-opacity, 1));
}
.bg-purple-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500{
  --tw-bg-opacity:          1;
  background-color:          rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-600{
  --tw-bg-opacity:          1;
  background-color:          rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity:          1;
  background-color:          rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity:          1;
  background-color:          rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600{
  --tw-bg-opacity:          1;
  background-color:          rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color:          transparent;
}
.bg-white{
  --tw-bg-opacity:          1;
  background-color:          rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/60{
  background-color:          rgb(255 255 255 / 0.6);
}
.bg-white\/80{
  background-color:          rgb(255 255 255 / 0.8);
}
.bg-white\/90{
  background-color:          rgb(255 255 255 / 0.9);
}
.bg-yellow-300{
  --tw-bg-opacity:          1;
  background-color:          rgb(253 224 71 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50{
  --tw-bg-opacity:          1;
  background-color:          rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500{
  --tw-bg-opacity:          1;
  background-color:          rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-opacity-0{
  --tw-bg-opacity:          0;
}
.bg-opacity-20{
  --tw-bg-opacity:          0.2;
}
.bg-opacity-30{
  --tw-bg-opacity:          0.3;
}
.bg-opacity-40{
  --tw-bg-opacity:          0.4;
}
.bg-opacity-50{
  --tw-bg-opacity:          0.5;
}
.bg-opacity-70{
  --tw-bg-opacity:          0.7;
}
.bg-opacity-80{
  --tw-bg-opacity:          0.8;
}
.bg-gradient-to-br{
  background-image:          linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
  background-image:          linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-400{
  --tw-gradient-from:          #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-50{
  --tw-gradient-from:          #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500{
  --tw-gradient-from:          #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-200{
  --tw-gradient-from:          #e5e7eb var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(229 231 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-50{
  --tw-gradient-from:          #f0fdf4 var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(240 253 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-500{
  --tw-gradient-from:          #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-50{
  --tw-gradient-from:          #fff7ed var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(255 247 237 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-50{
  --tw-gradient-from:          #fdf2f8 var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(253 242 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-50{
  --tw-gradient-from:          #faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500{
  --tw-gradient-from:          #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-50{
  --tw-gradient-from:          #fef2f2 var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(254 242 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white{
  --tw-gradient-from:          #fff var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-gray-100{
  --tw-gradient-to:          rgb(243 244 246 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), #f3f4f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white{
  --tw-gradient-to:          rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-amber-50{
  --tw-gradient-to:          #FFFBEB var(--tw-gradient-to-position);
}
.to-blue-50{
  --tw-gradient-to:          #eff6ff var(--tw-gradient-to-position);
}
.to-blue-500{
  --tw-gradient-to:          #3b82f6 var(--tw-gradient-to-position);
}
.to-gray-200{
  --tw-gradient-to:          #e5e7eb var(--tw-gradient-to-position);
}
.to-gray-50{
  --tw-gradient-to:          #f9fafb var(--tw-gradient-to-position);
}
.to-green-50{
  --tw-gradient-to:          #f0fdf4 var(--tw-gradient-to-position);
}
.to-indigo-100{
  --tw-gradient-to:          #e0e7ff var(--tw-gradient-to-position);
}
.to-indigo-50{
  --tw-gradient-to:          #eef2ff var(--tw-gradient-to-position);
}
.to-orange-50{
  --tw-gradient-to:          #fff7ed var(--tw-gradient-to-position);
}
.to-pink-50{
  --tw-gradient-to:          #fdf2f8 var(--tw-gradient-to-position);
}
.to-purple-50{
  --tw-gradient-to:          #faf5ff var(--tw-gradient-to-position);
}
.to-purple-600{
  --tw-gradient-to:          #9333ea var(--tw-gradient-to-position);
}
.to-yellow-50{
  --tw-gradient-to:          #fefce8 var(--tw-gradient-to-position);
}
.bg-cover{
  background-size:          cover;
}
.bg-center{
  background-position:          center;
}
.fill-gray-600{
  fill:          #4b5563;
}
.fill-gray-700{
  fill:          #374151;
}
.object-contain{
  -o-object-fit:          contain;
     object-fit:          contain;
}
.object-cover{
  -o-object-fit:          cover;
     object-fit:          cover;
}
.p-0{
  padding:          0px;
}
.p-1{
  padding:          0.25rem;
}
.p-16{
  padding:          4rem;
}
.p-2{
  padding:          0.5rem;
}
.p-3{
  padding:          0.75rem;
}
.p-4{
  padding:          1rem;
}
.p-6{
  padding:          1.5rem;
}
.p-8{
  padding:          2rem;
}
.px-0{
  padding-left:          0px;
  padding-right:          0px;
}
.px-1{
  padding-left:          0.25rem;
  padding-right:          0.25rem;
}
.px-1\.5{
  padding-left:          0.375rem;
  padding-right:          0.375rem;
}
.px-2{
  padding-left:          0.5rem;
  padding-right:          0.5rem;
}
.px-3{
  padding-left:          0.75rem;
  padding-right:          0.75rem;
}
.px-4{
  padding-left:          1rem;
  padding-right:          1rem;
}
.px-6{
  padding-left:          1.5rem;
  padding-right:          1.5rem;
}
.py-0{
  padding-top:          0px;
  padding-bottom:          0px;
}
.py-0\.5{
  padding-top:          0.125rem;
  padding-bottom:          0.125rem;
}
.py-1{
  padding-top:          0.25rem;
  padding-bottom:          0.25rem;
}
.py-1\.5{
  padding-top:          0.375rem;
  padding-bottom:          0.375rem;
}
.py-10{
  padding-top:          2.5rem;
  padding-bottom:          2.5rem;
}
.py-12{
  padding-top:          3rem;
  padding-bottom:          3rem;
}
.py-16{
  padding-top:          4rem;
  padding-bottom:          4rem;
}
.py-2{
  padding-top:          0.5rem;
  padding-bottom:          0.5rem;
}
.py-2\.5{
  padding-top:          0.625rem;
  padding-bottom:          0.625rem;
}
.py-20{
  padding-top:          5rem;
  padding-bottom:          5rem;
}
.py-3{
  padding-top:          0.75rem;
  padding-bottom:          0.75rem;
}
.py-4{
  padding-top:          1rem;
  padding-bottom:          1rem;
}
.py-6{
  padding-top:          1.5rem;
  padding-bottom:          1.5rem;
}
.py-8{
  padding-top:          2rem;
  padding-bottom:          2rem;
}
.pb-1{
  padding-bottom:          0.25rem;
}
.pb-2{
  padding-bottom:          0.5rem;
}
.pb-3{
  padding-bottom:          0.75rem;
}
.pb-4{
  padding-bottom:          1rem;
}
.pb-6{
  padding-bottom:          1.5rem;
}
.pl-4{
  padding-left:          1rem;
}
.pr-2{
  padding-right:          0.5rem;
}
.pr-4{
  padding-right:          1rem;
}
.pt-1{
  padding-top:          0.25rem;
}
.pt-2{
  padding-top:          0.5rem;
}
.pt-3{
  padding-top:          0.75rem;
}
.pt-4{
  padding-top:          1rem;
}
.pt-6{
  padding-top:          1.5rem;
}
.pt-8{
  padding-top:          2rem;
}
.text-left{
  text-align:          left;
}
.text-center{
  text-align:          center;
}
.text-right{
  text-align:          right;
}
.font-mono{
  font-family:          ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl{
  font-size:          1.5rem;
  line-height:          2rem;
}
.text-3xl{
  font-size:          1.875rem;
  line-height:          2.25rem;
}
.text-4xl{
  font-size:          2.25rem;
  line-height:          2.5rem;
}
.text-6xl{
  font-size:          3.75rem;
  line-height:          1;
}
.text-\[10px\]{
  font-size:          10px;
}
.text-\[13px\]{
  font-size:          13px;
}
.text-\[8px\]{
  font-size:          8px;
}
.text-base{
  font-size:          1rem;
  line-height:          1.5rem;
}
.text-lg{
  font-size:          1.125rem;
  line-height:          1.75rem;
}
.text-sm{
  font-size:          0.875rem;
  line-height:          1.25rem;
}
.text-xl{
  font-size:          1.25rem;
  line-height:          1.75rem;
}
.text-xs{
  font-size:          0.75rem;
  line-height:          1rem;
}
.font-bold{
  font-weight:          700;
}
.font-medium{
  font-weight:          500;
}
.font-normal{
  font-weight:          400;
}
.font-semibold{
  font-weight:          600;
}
.uppercase{
  text-transform:          uppercase;
}
.lowercase{
  text-transform:          lowercase;
}
.capitalize{
  text-transform:          capitalize;
}
.italic{
  font-style:          italic;
}
.leading-relaxed{
  line-height:          1.625;
}
.text-blue-100{
  --tw-text-opacity:          1;
  color:          rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-400{
  --tw-text-opacity:          1;
  color:          rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500{
  --tw-text-opacity:          1;
  color:          rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600{
  --tw-text-opacity:          1;
  color:          rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700{
  --tw-text-opacity:          1;
  color:          rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800{
  --tw-text-opacity:          1;
  color:          rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-cyan-600{
  --tw-text-opacity:          1;
  color:          rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-emerald-600{
  --tw-text-opacity:          1;
  color:          rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700{
  --tw-text-opacity:          1;
  color:          rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800{
  --tw-text-opacity:          1;
  color:          rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-gray-200{
  --tw-text-opacity:          1;
  color:          rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300{
  --tw-text-opacity:          1;
  color:          rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity:          1;
  color:          rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity:          1;
  color:          rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity:          1;
  color:          rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity:          1;
  color:          rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity:          1;
  color:          rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity:          1;
  color:          rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500{
  --tw-text-opacity:          1;
  color:          rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity:          1;
  color:          rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700{
  --tw-text-opacity:          1;
  color:          rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity:          1;
  color:          rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-lime-600{
  --tw-text-opacity:          1;
  color:          rgb(101 163 13 / var(--tw-text-opacity, 1));
}
.text-lime-700{
  --tw-text-opacity:          1;
  color:          rgb(77 124 15 / var(--tw-text-opacity, 1));
}
.text-lime-800{
  --tw-text-opacity:          1;
  color:          rgb(63 98 18 / var(--tw-text-opacity, 1));
}
.text-orange-400{
  --tw-text-opacity:          1;
  color:          rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity:          1;
  color:          rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600{
  --tw-text-opacity:          1;
  color:          rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700{
  --tw-text-opacity:          1;
  color:          rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-orange-800{
  --tw-text-opacity:          1;
  color:          rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-pink-400{
  --tw-text-opacity:          1;
  color:          rgb(244 114 182 / var(--tw-text-opacity, 1));
}
.text-purple-200{
  --tw-text-opacity:          1;
  color:          rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.text-purple-400{
  --tw-text-opacity:          1;
  color:          rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-500{
  --tw-text-opacity:          1;
  color:          rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-600{
  --tw-text-opacity:          1;
  color:          rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700{
  --tw-text-opacity:          1;
  color:          rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800{
  --tw-text-opacity:          1;
  color:          rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-300{
  --tw-text-opacity:          1;
  color:          rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400{
  --tw-text-opacity:          1;
  color:          rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity:          1;
  color:          rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity:          1;
  color:          rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity:          1;
  color:          rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity:          1;
  color:          rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900{
  --tw-text-opacity:          1;
  color:          rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity:          1;
  color:          rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-500{
  --tw-text-opacity:          1;
  color:          rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-600{
  --tw-text-opacity:          1;
  color:          rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700{
  --tw-text-opacity:          1;
  color:          rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800{
  --tw-text-opacity:          1;
  color:          rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line:          underline;
}
.line-through{
  text-decoration-line:          line-through;
}
.opacity-0{
  opacity:          0;
}
.opacity-100{
  opacity:          1;
}
.opacity-20{
  opacity:          0.2;
}
.opacity-50{
  opacity:          0.5;
}
.opacity-60{
  opacity:          0.6;
}
.opacity-70{
  opacity:          0.7;
}
.opacity-75{
  opacity:          0.75;
}
.opacity-80{
  opacity:          0.8;
}
.shadow{
  --tw-shadow:          0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:          0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl{
  --tw-shadow:          0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored:          0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow:          0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:          0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow:          0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:          0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none{
  --tw-shadow:          0 0 #0000;
  --tw-shadow-colored:          0 0 #0000;
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow:          0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:          0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow:          0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:          0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
  outline:          2px solid transparent;
  outline-offset:          2px;
}
.outline{
  outline-style:          solid;
}
.ring-2{
  --tw-ring-offset-shadow:          var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:          var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:          var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-blue-200{
  --tw-ring-opacity:          1;
  --tw-ring-color:          rgb(191 219 254 / var(--tw-ring-opacity, 1));
}
.ring-blue-400{
  --tw-ring-opacity:          1;
  --tw-ring-color:          rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.ring-blue-500{
  --tw-ring-opacity:          1;
  --tw-ring-color:          rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-red-200{
  --tw-ring-opacity:          1;
  --tw-ring-color:          rgb(254 202 202 / var(--tw-ring-opacity, 1));
}
.blur{
  --tw-blur:          blur(8px);
  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);
}
.drop-shadow{
  --tw-drop-shadow:          drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.drop-shadow-lg{
  --tw-drop-shadow:          drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  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);
}
.drop-shadow-md{
  --tw-drop-shadow:          drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  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);
}
.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-filter{
  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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function:          cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:          150ms;
}
.transition-all{
  transition-property:          all;
  transition-timing-function:          cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:          150ms;
}
.transition-colors{
  transition-property:          color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:          cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:          150ms;
}
.transition-opacity{
  transition-property:          opacity;
  transition-timing-function:          cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:          150ms;
}
.transition-shadow{
  transition-property:          box-shadow;
  transition-timing-function:          cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:          150ms;
}
.transition-transform{
  transition-property:          transform;
  transition-timing-function:          cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:          150ms;
}
.duration-100{
  transition-duration:          100ms;
}
.duration-150{
  transition-duration:          150ms;
}
.duration-200{
  transition-duration:          200ms;
}
.duration-300{
  transition-duration:          300ms;
}
.ease-in-out{
  transition-timing-function:          cubic-bezier(0.4, 0, 0.2, 1);
}
/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --mw-primary:          #2C5F8A;
  --mw-primary-dark:     #1E4A72;
  --mw-primary-light:    #EEF5FA;
  --mw-primary-subtle:   rgba(44, 95, 138, 0.07);

  /* Surfaces */
  --mw-bg:               #FAFAF8;
  --mw-surface:          #FFFFFF;
  --mw-surface-alt:      #F5F2ED;
  --mw-surface-hover:    #F2EEE9;

  /* Borders */
  --mw-border:           #E2DDD8;
  --mw-border-light:     #EDE9E4;

  /* Text */
  --mw-text:             #1E1E30;
  --mw-text-secondary:   #6B6B7B;
  --mw-text-muted:       #9B9BAB;
  --mw-text-disabled:    #C0BDC8;

  /* Semantic */
  --mw-success:          #2E7D52;
  --mw-warning:          #B45309;
  --mw-error:            #C43030;
  --mw-info:             #2C5F8A;

  /* Shadows */
  --mw-shadow-xs:  0 1px 2px rgba(30, 30, 48, 0.05);
  --mw-shadow-sm:  0 1px 4px rgba(30, 30, 48, 0.06), 0 1px 2px rgba(30, 30, 48, 0.04);
  --mw-shadow-md:  0 4px 12px -2px rgba(30, 30, 48, 0.08), 0 2px 6px -1px rgba(30, 30, 48, 0.05);
  --mw-shadow-lg:  0 8px 24px -4px rgba(30, 30, 48, 0.10), 0 4px 12px -2px rgba(30, 30, 48, 0.06);
  --mw-shadow-focus: 0 0 0 3px rgba(44, 95, 138, 0.14);

  /* Radius */
  --mw-radius-sm:  4px;
  --mw-radius-md:  6px;
  --mw-radius-lg:  8px;
  --mw-radius-xl:  10px;
  --mw-radius-2xl: 12px;

  /* Typography */
  --mw-font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --mw-font-ui:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --mw-header-height:  60px;
}
/* ═══════════════════════════════════════════════════════════════
   BASE RESET
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--mw-font-ui);
  font-size: 14px;
  line-height: 1.6;
  background-color: var(--mw-bg);
  color: var(--mw-text);
  min-height: 100vh;
}
/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mw-border);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--mw-text-muted); }
/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — Display headings use Lora
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3,
.ant-typography h1,
.ant-typography h2,
.ant-typography h3,
.mw-display {
  font-family: var(--mw-font-display);
  letter-spacing: -0.015em;
  color: var(--mw-text);
}
/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.ant-layout {
  min-height: 100vh;
  background: var(--mw-bg) !important;
}
.ant-layout-header {
  height: var(--mw-header-height) !important;
  line-height: var(--mw-header-height) !important;
  padding: 0 24px !important;
  background: var(--mw-surface) !important;
  border-bottom: 1px solid var(--mw-border-light) !important;
  box-shadow: none !important;
}
.ant-layout-sider {
  background: var(--mw-surface) !important;
  border-right: 1px solid var(--mw-border-light) !important;
  box-shadow: none !important;
  /* Smooth collapse */
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: width !important;
  backface-visibility: hidden !important;
}
.ant-layout-content {
  background: var(--mw-bg) !important;
  transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: margin-left !important;
  backface-visibility: hidden !important;
}
/* Prevent flickering for all layout children */
.ant-layout * {
  backface-visibility: hidden;
}
/* Restore transforms for animated indicators */
.ant-segmented .ant-segmented-thumb,
.ant-tabs-ink-bar {
  backface-visibility: visible !important;
  will-change: left, width !important;
}
/* Stabilize sider + header internals */
.ant-layout-sider *,
.ant-layout-header * {
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}
/* ═══════════════════════════════════════════════════════════════
   SIDEBAR MENU
   ═══════════════════════════════════════════════════════════════ */
.ant-menu {
  font-family: var(--mw-font-ui) !important;
  background: transparent !important;
  border-right: none !important;
}
.ant-menu-item,
.ant-menu-submenu-title {
  height: 38px !important;
  line-height: 38px !important;
  margin: 2px 8px !important;
  width: calc(100% - 16px) !important;
  border-radius: var(--mw-radius-md) !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  color: var(--mw-text-secondary) !important;
  transition: all 0.14s ease !important;
}
.ant-menu-item:hover,
.ant-menu-submenu-title:hover {
  background: var(--mw-surface-hover) !important;
  color: var(--mw-text) !important;
}
.ant-menu-item-selected {
  background: var(--mw-primary-light) !important;
  color: var(--mw-primary) !important;
  font-weight: 500 !important;
  position: relative !important;
}
/* Left accent bar on active item */
.ant-menu-item-selected::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--mw-primary);
  border-radius: 0 3px 3px 0;
}
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  font-size: 15px !important;
  transition: color 0.14s !important;
}
/* Submenu items */
.ant-menu-sub .ant-menu-item {
  height: 34px !important;
  line-height: 34px !important;
  font-size: 12.5px !important;
  padding-left: 36px !important;
}
/* Group titles */
.ant-menu-item-group-title {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--mw-text-muted) !important;
  padding: 16px 16px 4px !important;
}
/* Inline menu border-right fix */
.ant-menu-inline {
  border-right: none !important;
}
/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.ant-card {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border-light) !important;
  border-radius: var(--mw-radius-lg) !important;
  box-shadow: var(--mw-shadow-sm) !important;
  transition: box-shadow 0.18s ease !important;
}
.ant-card:hover {
  box-shadow: var(--mw-shadow-md) !important;
}
.ant-card-head {
  border-bottom: 1px solid var(--mw-border-light) !important;
  padding: 0 20px !important;
  min-height: 48px !important;
  background: transparent !important;
}
.ant-card-head-title {
  font-family: var(--mw-font-ui) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mw-text) !important;
  padding: 12px 0 !important;
  letter-spacing: -0.01em !important;
}
.ant-card-body {
  padding: 20px !important;
}
.ant-card-extra {
  padding: 12px 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
.ant-table {
  background: var(--mw-surface) !important;
}
.ant-table-wrapper {
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius-lg);
  overflow: hidden;
}
.ant-table-thead > tr > th {
  background: var(--mw-surface-alt) !important;
  border-bottom: 1px solid var(--mw-border) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--mw-text-secondary) !important;
  padding: 10px 16px !important;
}
.ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--mw-border-light) !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  color: var(--mw-text) !important;
}
.ant-table-tbody > tr:last-child > td {
  border-bottom: none !important;
}
.ant-table-tbody > tr:hover > td {
  background: var(--mw-surface-hover) !important;
}
.ant-table-summary > tr > td {
  background: var(--mw-surface-alt) !important;
  border-top: 1px solid var(--mw-border) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
/* ═══════════════════════════════════════════════════════════════
   FORMS — INPUTS, SELECT, DATE PICKER
   ═══════════════════════════════════════════════════════════════ */
.ant-input,
.ant-input-affix-wrapper,
.ant-select-selector,
.ant-picker {
  border-radius: var(--mw-radius-md) !important;
  border-color: var(--mw-border) !important;
  background: var(--mw-surface) !important;
  color: var(--mw-text) !important;
  font-family: var(--mw-font-ui) !important;
  font-size: 13px !important;
  transition: border-color 0.14s ease, box-shadow 0.14s ease !important;
}
.ant-input::-moz-placeholder, .ant-input-affix-wrapper input::-moz-placeholder {
  color: var(--mw-text-muted) !important;
}
.ant-input::placeholder,
.ant-input-affix-wrapper input::placeholder {
  color: var(--mw-text-muted) !important;
}
.ant-input:hover,
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover,
.ant-select:not(.ant-select-disabled) .ant-select-selector:hover,
.ant-picker:hover {
  border-color: var(--mw-text-muted) !important;
}
.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused {
  border-color: var(--mw-primary) !important;
  box-shadow: var(--mw-shadow-focus) !important;
}
.ant-form-item-label > label {
  font-family: var(--mw-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--mw-text) !important;
  letter-spacing: 0 !important;
}
.ant-form-item-explain-error {
  font-size: 12px !important;
}
.ant-form-item {
  margin-bottom: 16px !important;
}
/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.ant-btn {
  font-family: var(--mw-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--mw-radius-md) !important;
  box-shadow: none !important;
  transition: all 0.14s ease !important;
  letter-spacing: 0 !important;
  height: 34px !important;
  padding: 0 14px !important;
}
.ant-btn-lg {
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
}
.ant-btn-sm {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
.ant-btn-primary {
  background: var(--mw-primary) !important;
  border-color: var(--mw-primary) !important;
  color: #ffffff !important;
}
.ant-btn-primary:hover:not(:disabled) {
  background: var(--mw-primary-dark) !important;
  border-color: var(--mw-primary-dark) !important;
}
.ant-btn-default {
  border-color: var(--mw-border) !important;
  color: var(--mw-text) !important;
  background: var(--mw-surface) !important;
}
.ant-btn-default:hover:not(:disabled) {
  border-color: var(--mw-text-muted) !important;
  color: var(--mw-text) !important;
  background: var(--mw-surface-alt) !important;
}
.ant-btn-text {
  color: var(--mw-text-secondary) !important;
  border-color: transparent !important;
}
.ant-btn-text:hover {
  background: var(--mw-surface-alt) !important;
  color: var(--mw-text) !important;
}
.ant-btn-link {
  color: var(--mw-primary) !important;
  border-color: transparent !important;
}
.ant-btn-link:hover {
  color: var(--mw-primary-dark) !important;
}
/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */
.ant-modal-content {
  border-radius: var(--mw-radius-xl) !important;
  box-shadow: var(--mw-shadow-lg) !important;
  border: 1px solid var(--mw-border-light) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.ant-modal-header {
  border-bottom: 1px solid var(--mw-border-light) !important;
  padding: 16px 24px !important;
  background: var(--mw-surface) !important;
  margin-bottom: 0 !important;
}
.ant-modal-title {
  font-family: var(--mw-font-ui) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--mw-text) !important;
  letter-spacing: -0.01em !important;
}
.ant-modal-body {
  padding: 20px 24px !important;
}
.ant-modal-footer {
  border-top: 1px solid var(--mw-border-light) !important;
  padding: 12px 24px !important;
  background: var(--mw-surface-alt) !important;
  margin-top: 0 !important;
}
.ant-modal-close {
  top: 14px !important;
  right: 14px !important;
}
/* ═══════════════════════════════════════════════════════════════
   DRAWER
   ═══════════════════════════════════════════════════════════════ */
.ant-drawer-header {
  border-bottom: 1px solid var(--mw-border-light) !important;
  padding: 16px 20px !important;
  background: var(--mw-surface) !important;
}
.ant-drawer-title {
  font-family: var(--mw-font-ui) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--mw-text) !important;
  letter-spacing: -0.01em !important;
}
.ant-drawer-body {
  padding: 20px !important;
}
/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */
.ant-tabs-nav {
  margin-bottom: 16px !important;
}
.ant-tabs-nav::before {
  border-bottom-color: var(--mw-border-light) !important;
}
.ant-tabs-tab {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mw-text-secondary) !important;
  padding: 8px 0 !important;
  transition: color 0.14s !important;
  justify-content: center !important;
  text-align: center !important;
}
.ant-tabs-tab:hover {
  color: var(--mw-text) !important;
}
.ant-tabs-tab-active .ant-tabs-tab-btn,
.ant-tabs-tab-btn:focus {
  color: var(--mw-primary) !important;
}
.ant-tabs-ink-bar {
  background: var(--mw-primary) !important;
  height: 2px !important;
  /* Fix centering */
  transform: none !important;
  will-change: left, width !important;
}
/* Ensure tab content is centered */
.ant-tabs-tab .ant-tabs-tab-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ant-tabs-nav-list .ant-tabs-tab {
  display: flex !important;
  align-items: center !important;
}
/* ═══════════════════════════════════════════════════════════════
   TAGS & BADGES
   ═══════════════════════════════════════════════════════════════ */
.ant-tag {
  border-radius: var(--mw-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 1px 7px !important;
  line-height: 1.6 !important;
  border: none !important;
  letter-spacing: 0.01em !important;
}
/* ═══════════════════════════════════════════════════════════════
   COLLAPSE / ACCORDION
   ═══════════════════════════════════════════════════════════════ */
.ant-collapse {
  border: 1px solid var(--mw-border-light) !important;
  border-radius: var(--mw-radius-lg) !important;
  background: transparent !important;
  overflow: hidden !important;
}
.ant-collapse-header {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mw-text) !important;
  background: var(--mw-surface-alt) !important;
  padding: 12px 16px !important;
}
.ant-collapse-content {
  border-top: 1px solid var(--mw-border-light) !important;
  background: var(--mw-surface) !important;
}
.ant-collapse-content-box {
  padding: 16px !important;
}
/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */
.ant-alert {
  border-radius: var(--mw-radius-md) !important;
  font-size: 13px !important;
  border-width: 1px !important;
  padding: 10px 14px !important;
}
.ant-alert-message {
  font-weight: 500 !important;
  font-size: 13px !important;
}
.ant-alert-description {
  font-size: 12.5px !important;
}
/* ═══════════════════════════════════════════════════════════════
   DROPDOWN & POPOVER
   ═══════════════════════════════════════════════════════════════ */
.ant-dropdown-menu {
  border-radius: var(--mw-radius-lg) !important;
  border: 1px solid var(--mw-border-light) !important;
  box-shadow: var(--mw-shadow-md) !important;
  padding: 4px !important;
  min-width: 160px !important;
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  border-radius: var(--mw-radius-sm) !important;
  font-size: 13px !important;
  color: var(--mw-text) !important;
  padding: 7px 12px !important;
  line-height: 1.4 !important;
}
.ant-dropdown-menu-item:hover {
  background: var(--mw-surface-alt) !important;
  color: var(--mw-text) !important;
}
.ant-dropdown-menu-item-danger {
  color: var(--mw-error) !important;
}
.ant-dropdown-menu-item-danger:hover {
  background: rgba(196, 48, 48, 0.06) !important;
  color: var(--mw-error) !important;
}
.ant-dropdown-menu-item-divider {
  background: var(--mw-border-light) !important;
  margin: 3px 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
   STATISTIC
   ═══════════════════════════════════════════════════════════════ */
.ant-statistic-title {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--mw-text-muted) !important;
  margin-bottom: 4px !important;
}
.ant-statistic-content-value {
  font-family: var(--mw-font-display) !important;
  color: var(--mw-text) !important;
  line-height: 1.2 !important;
}
.ant-statistic-content-suffix,
.ant-statistic-content-prefix {
  color: var(--mw-text-secondary) !important;
  font-size: 14px !important;
}
/* ═══════════════════════════════════════════════════════════════
   TOOLTIP & POPOVER
   ═══════════════════════════════════════════════════════════════ */
.ant-tooltip-inner {
  font-size: 12px !important;
  border-radius: var(--mw-radius-md) !important;
  padding: 6px 10px !important;
}
/* ═══════════════════════════════════════════════════════════════
   SEGMENTED CONTROL
   ═══════════════════════════════════════════════════════════════ */
.ant-segmented {
  background: var(--mw-surface-alt) !important;
  border-radius: var(--mw-radius-md) !important;
  border: 1px solid var(--mw-border) !important;
  transform: none !important;
}
.ant-segmented .ant-segmented-item {
  border-radius: var(--mw-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mw-text-secondary) !important;
  transform: none !important;
}
.ant-segmented .ant-segmented-item-selected {
  color: var(--mw-text) !important;
  font-weight: 600 !important;
}
.ant-segmented .ant-segmented-thumb {
  border-radius: var(--mw-radius-sm) !important;
  transform: none !important;
  will-change: left, width !important;
  background: var(--mw-surface) !important;
  box-shadow: var(--mw-shadow-xs) !important;
}
/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.ant-pagination-item {
  border-radius: var(--mw-radius-sm) !important;
  border-color: var(--mw-border) !important;
  font-size: 13px !important;
}
.ant-pagination-item-active {
  border-color: var(--mw-primary) !important;
  background: var(--mw-primary-light) !important;
}
.ant-pagination-item-active a {
  color: var(--mw-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════
   DATE PICKER — Z-INDEX FIXES (Calendar dropdowns)
   ═══════════════════════════════════════════════════════════════ */
.ant-picker-dropdown          { z-index: 1050 !important; }
.ant-picker-year-panel,
.ant-picker-month-panel,
.ant-picker-decade-panel      { z-index: 1060 !important; }
.ant-picker-calendar-header   { position: relative; z-index: 10; }
.ant-picker-calendar-header .ant-picker-header-view button { z-index: 20 !important; }
.ant-picker-panel-container   { z-index: 1070 !important; }
.ant-picker-panel             { z-index: 1071 !important; }
/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION & MESSAGE
   ═══════════════════════════════════════════════════════════════ */
.ant-notification-notice {
  border-radius: var(--mw-radius-lg) !important;
  border: 1px solid var(--mw-border-light) !important;
  box-shadow: var(--mw-shadow-md) !important;
}
.ant-message-notice-content {
  border-radius: var(--mw-radius-md) !important;
  box-shadow: var(--mw-shadow-md) !important;
  border: 1px solid var(--mw-border-light) !important;
}
/* ═══════════════════════════════════════════════════════════════
   COMPETENCY SCORE INDICATORS
   ═══════════════════════════════════════════════════════════════ */
.competency-score {
  font-weight: 700;
  font-size: 15px;
}
.competency-score.excellent         { color: var(--mw-success);  }
.competency-score.good              { color: var(--mw-primary);  }
.competency-score.satisfactory      { color: var(--mw-warning);  }
.competency-score.needs-improvement { color: var(--mw-error);    }
/* ═══════════════════════════════════════════════════════════════
   RADAR CHART CONTAINER
   ═══════════════════════════════════════════════════════════════ */
.radar-chart-container {
  background: var(--mw-surface);
  border-radius: var(--mw-radius-lg);
  padding: 20px;
  border: 1px solid var(--mw-border-light);
  box-shadow: var(--mw-shadow-sm);
}
/* ═══════════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════════ */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.fade-in {
  animation: mwFadeIn 0.25s ease-out;
}
@keyframes mwFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ant-layout-header {
    padding: 0 16px !important;
  }

  .ant-card-body {
    padding: 16px !important;
  }

  .ant-table-tbody > tr > td,
  .ant-table-thead > tr > th {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .ant-modal-body {
    padding: 16px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .no-print { display: none !important; }
  .ant-layout-sider,
  .ant-layout-header { display: none !important; }
  .ant-layout-content {
    margin: 0 !important;
    padding: 20px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADER
   ═══════════════════════════════════════════════════════════════ */
@keyframes mwSkeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.mw-skeleton {
  background: linear-gradient(90deg, #f0ede9 25%, #e8e4df 50%, #f0ede9 75%);
  background-size: 800px 100%;
  animation: mwSkeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--mw-radius-md);
}
.mw-skeleton-text   { height: 14px; margin-bottom: 8px; }
.mw-skeleton-title  { height: 20px; width: 60%; margin-bottom: 12px; }
.mw-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.mw-skeleton-card   { height: 120px; border-radius: var(--mw-radius-lg); }
.mw-skeleton-stat   { height: 80px; border-radius: var(--mw-radius-lg); }
.mw-skeleton-btn    { height: 34px; width: 100px; border-radius: var(--mw-radius-md); }
/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════ */
.mw-mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--mw-surface);
  border-top: 1px solid var(--mw-border-light);
  display: flex;
  align-items: stretch;
  z-index: 200;
  box-shadow: 0 -4px 20px rgba(30, 30, 48, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mw-mobile-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-height: 44px;
}
.mw-mobile-bottom-nav__item:hover,
.mw-mobile-bottom-nav__item:active {
  background: var(--mw-surface-hover);
}
.mw-mobile-bottom-nav__item.active {
  color: var(--mw-primary);
}
.mw-mobile-bottom-nav__item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--mw-primary);
  border-radius: 0 0 3px 3px;
}
.mw-mobile-bottom-nav__icon {
  font-size: 20px;
  color: var(--mw-text-muted);
  transition: color 0.14s ease, transform 0.14s ease;
}
.mw-mobile-bottom-nav__item.active .mw-mobile-bottom-nav__icon {
  color: var(--mw-primary);
  transform: scale(1.1);
}
.mw-mobile-bottom-nav__label {
  font-size: 10px;
  font-weight: 500;
  color: var(--mw-text-muted);
  line-height: 1;
  letter-spacing: 0.01em;
}
.mw-mobile-bottom-nav__item.active .mw-mobile-bottom-nav__label {
  color: var(--mw-primary);
  font-weight: 600;
}
.mw-mobile-bottom-nav__badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 16px);
  min-width: 16px;
  height: 16px;
  background: #ff4d4f;
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid var(--mw-surface);
}
/* Pad content above mobile nav */
.mw-has-bottom-nav .ant-layout-content {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ═══════════════════════════════════════════════════════════════
   STAT CARDS — Role-specific color system
   ═══════════════════════════════════════════════════════════════ */
.mw-stat-card {
  border-radius: var(--mw-radius-xl) !important;
  border: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.mw-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mw-shadow-md) !important;
}
.mw-stat-card--blue   { background: linear-gradient(135deg, #EEF5FA 0%, #D4E8F5 100%) !important; }
.mw-stat-card--green  { background: linear-gradient(135deg, #EAFAF2 0%, #D0F0E0 100%) !important; }
.mw-stat-card--amber  { background: linear-gradient(135deg, #FEF9EE 0%, #FDE8C0 100%) !important; }
.mw-stat-card--red    { background: linear-gradient(135deg, #FEF0EE 0%, #FDD0CC 100%) !important; }
.mw-stat-card--purple { background: linear-gradient(135deg, #F5EEFA 0%, #E2D0F5 100%) !important; }
.mw-stat-card--teal   { background: linear-gradient(135deg, #EEF9F9 0%, #D0EEEE 100%) !important; }
.mw-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.mw-stat-card__icon--blue   { background: rgba(44, 95, 138, 0.12); color: var(--mw-primary); }
.mw-stat-card__icon--green  { background: rgba(46, 125, 82, 0.12); color: var(--mw-success); }
.mw-stat-card__icon--amber  { background: rgba(180, 83, 9, 0.12); color: var(--mw-warning); }
.mw-stat-card__icon--red    { background: rgba(196, 48, 48, 0.12); color: var(--mw-error); }
.mw-stat-card__icon--purple { background: rgba(91, 33, 182, 0.12); color: #5b21b6; }
.mw-stat-card__icon--teal   { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
/* ═══════════════════════════════════════════════════════════════
   QUICK ACTIONS GRID
   ═══════════════════════════════════════════════════════════════ */
.mw-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.mw-quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius-lg);
  cursor: pointer;
  transition: all 0.14s ease;
  text-align: center;
  text-decoration: none;
  color: var(--mw-text);
  -webkit-tap-highlight-color: transparent;
  min-height: 80px;
}
.mw-quick-action-btn:hover {
  background: var(--mw-primary-light);
  border-color: rgba(44, 95, 138, 0.25);
  transform: translateY(-1px);
  box-shadow: var(--mw-shadow-sm);
  color: var(--mw-primary);
}
.mw-quick-action-btn:active {
  transform: translateY(0);
}
.mw-quick-action-btn__icon {
  font-size: 24px;
  line-height: 1;
}
.mw-quick-action-btn__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
/* ═══════════════════════════════════════════════════════════════
   WELCOME / GREETING CARD
   ═══════════════════════════════════════════════════════════════ */
.mw-welcome-card {
  background: linear-gradient(135deg, var(--mw-primary) 0%, var(--mw-primary-dark) 100%);
  border-radius: var(--mw-radius-xl) !important;
  border: none !important;
  color: white;
  position: relative;
  overflow: hidden;
}
.mw-welcome-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}
.mw-welcome-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: 60px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  pointer-events: none;
}
.mw-welcome-card .ant-card-body {
  padding: 20px 24px !important;
}
/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.mw-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}
.mw-empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mw-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--mw-text-muted);
  margin-bottom: 4px;
}
.mw-empty-state__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--mw-text);
  margin: 0;
}
.mw-empty-state__desc {
  font-size: 13px;
  color: var(--mw-text-secondary);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION DOT
   ═══════════════════════════════════════════════════════════════ */
.mw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4f;
  display: inline-block;
  flex-shrink: 0;
}
.mw-dot--pulse {
  animation: mwDotPulse 1.8s ease-in-out infinite;
}
@keyframes mwDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
/* ═══════════════════════════════════════════════════════════════
   IMPROVED MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --mw-header-height: 52px;
  }

  .ant-layout-header {
    height: var(--mw-header-height) !important;
    line-height: var(--mw-header-height) !important;
    padding: 0 12px !important;
  }

  .ant-card-body {
    padding: 14px !important;
  }

  .ant-card-head {
    padding: 0 14px !important;
    min-height: 42px !important;
  }

  .ant-card-head-title {
    font-size: 13px !important;
    padding: 10px 0 !important;
  }

  .ant-table-tbody > tr > td,
  .ant-table-thead > tr > th {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .ant-modal-body {
    padding: 14px !important;
  }

  .ant-modal-header {
    padding: 12px 16px !important;
  }

  .ant-modal-footer {
    padding: 10px 16px !important;
  }

  /* Bigger tap targets */
  .ant-btn {
    min-height: 36px !important;
  }

  .ant-menu-item,
  .ant-menu-submenu-title {
    height: 44px !important;
    line-height: 44px !important;
  }

  /* Better input spacing */
  .ant-input,
  .ant-select-selector {
    min-height: 38px !important;
  }

  /* Stack form items on mobile */
  .ant-form-item {
    margin-bottom: 12px !important;
  }

  /* Full-width modals on small screens */
  .ant-modal {
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }

  /* Tabs scroll on mobile */
  .ant-tabs-nav-wrap {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .ant-tabs-nav-wrap::-webkit-scrollbar {
    display: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   TABLET RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .ant-card-body {
    padding: 16px !important;
  }

  .ant-table-tbody > tr > td,
  .ant-table-thead > tr > th {
    padding: 10px 14px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   GRADE COLOR SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.grade-excellent { color: var(--mw-success) !important; }
.grade-good      { color: var(--mw-primary) !important; }
.grade-average   { color: var(--mw-warning) !important; }
.grade-poor      { color: var(--mw-error) !important; }
.grade-bg-excellent { background: rgba(46, 125, 82, 0.10); color: var(--mw-success); padding: 2px 8px; border-radius: 20px; font-weight: 600; font-size: 12px; }
.grade-bg-good      { background: rgba(44, 95, 138, 0.10); color: var(--mw-primary); padding: 2px 8px; border-radius: 20px; font-weight: 600; font-size: 12px; }
.grade-bg-average   { background: rgba(180, 83, 9, 0.10); color: var(--mw-warning); padding: 2px 8px; border-radius: 20px; font-weight: 600; font-size: 12px; }
.grade-bg-poor      { background: rgba(196, 48, 48, 0.10); color: var(--mw-error); padding: 2px 8px; border-radius: 20px; font-weight: 600; font-size: 12px; }
/* ═══════════════════════════════════════════════════════════════
   ROLE ACCENT COLORS
   ═══════════════════════════════════════════════════════════════ */
:root {
  --role-admin:   #2C5F8A;
  --role-teacher: #2E7D52;
  --role-student: #7C3AED;
  --role-family:  #B45309;
}
.role-accent-admin   { color: var(--role-admin); }
.role-accent-teacher { color: var(--role-teacher); }
.role-accent-student { color: var(--role-student); }
.role-accent-family  { color: var(--role-family); }
/* ═══════════════════════════════════════════════════════════════
   IMPROVED SCROLL & OVERFLOW
   ═══════════════════════════════════════════════════════════════ */
.mw-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.mw-scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Tables always scrollable on mobile */
@media (max-width: 768px) {
  .ant-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ═══════════════════════════════════════════════════════════════
   FOCUS ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--mw-primary);
  outline-offset: 2px;
  border-radius: var(--mw-radius-sm);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}
/* ═══════════════════════════════════════════════════════════════
   PAGE SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */
.mw-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.mw-page-header__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mw-text);
  letter-spacing: -0.02em;
  margin: 0;
  font-family: var(--mw-font-display);
}
.mw-page-header__subtitle {
  font-size: 13px;
  color: var(--mw-text-secondary);
  margin: 2px 0 0;
}
@media (max-width: 768px) {
  .mw-page-header {
    margin-bottom: 14px;
  }

  .mw-page-header__title {
    font-size: 16px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */
.ant-breadcrumb {
  font-size: 12.5px !important;
}
.ant-breadcrumb-link {
  color: var(--mw-text-secondary) !important;
}
.ant-breadcrumb-link:hover {
  color: var(--mw-primary) !important;
}
.ant-breadcrumb-separator {
  color: var(--mw-text-muted) !important;
}
/* ═══════════════════════════════════════════════════════════════
   PROGRESS BARS — Educational theme
   ═══════════════════════════════════════════════════════════════ */
.ant-progress-bg {
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mw-progress--excellent .ant-progress-bg { background: var(--mw-success) !important; }
.mw-progress--good      .ant-progress-bg { background: var(--mw-primary) !important; }
.mw-progress--average   .ant-progress-bg { background: var(--mw-warning) !important; }
.mw-progress--poor      .ant-progress-bg { background: var(--mw-error) !important; }
/* ═══════════════════════════════════════════════════════════════
   LIST ITEMS — Cleaner appearance
   ═══════════════════════════════════════════════════════════════ */
.ant-list-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--mw-border-light) !important;
  transition: background 0.12s ease !important;
}
.ant-list-item:last-child {
  border-bottom: none !important;
}
.ant-list-item-meta-title {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--mw-text) !important;
  margin-bottom: 2px !important;
}
.ant-list-item-meta-description {
  font-size: 12px !important;
  color: var(--mw-text-secondary) !important;
}
/* ═══════════════════════════════════════════════════════════════
   TAG IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */
.ant-tag {
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 1px 8px !important;
  border: none !important;
  line-height: 20px !important;
}
/* ═══════════════════════════════════════════════════════════════
   AVATAR GROUPS
   ═══════════════════════════════════════════════════════════════ */
.ant-avatar {
  font-family: var(--mw-font-ui) !important;
}
/* ═══════════════════════════════════════════════════════════════
   TRANSITION UTILS
   ═══════════════════════════════════════════════════════════════ */
.mw-transition-all { transition: all 0.18s ease; }
.mw-transition-color { transition: color 0.14s ease; }
.mw-transition-opacity { transition: opacity 0.18s ease; }
.mw-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--mw-shadow-md);
}
/* ═══════════════════════════════════════════════════════════════
   ALERT IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */
.ant-alert {
  border-radius: var(--mw-radius-lg) !important;
  border: 1px solid !important;
}
.ant-alert-info {
  background: rgba(44, 95, 138, 0.06) !important;
  border-color: rgba(44, 95, 138, 0.2) !important;
}
.ant-alert-success {
  background: rgba(46, 125, 82, 0.06) !important;
  border-color: rgba(46, 125, 82, 0.2) !important;
}
.ant-alert-warning {
  background: rgba(180, 83, 9, 0.06) !important;
  border-color: rgba(180, 83, 9, 0.2) !important;
}
.ant-alert-error {
  background: rgba(196, 48, 48, 0.06) !important;
  border-color: rgba(196, 48, 48, 0.2) !important;
}
.last\:border-b-0:last-child{
  border-bottom-width:          0px;
}
.last\:pb-0:last-child{
  padding-bottom:          0px;
}
.hover\:border-blue-300:hover{
  --tw-border-opacity:          1;
  border-color:          rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-400:hover{
  --tw-border-opacity:          1;
  border-color:          rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-300:hover{
  --tw-border-opacity:          1;
  border-color:          rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-400:hover{
  --tw-border-opacity:          1;
  border-color:          rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.hover\:border-green-300:hover{
  --tw-border-opacity:          1;
  border-color:          rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.hover\:border-purple-300:hover{
  --tw-border-opacity:          1;
  border-color:          rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.hover\:border-red-600:hover{
  --tw-border-opacity:          1;
  border-color:          rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.hover\:bg-blue-100:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-200:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-400:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-100:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-50:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-100:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover{
  --tw-bg-opacity:          1;
  background-color:          rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-opacity-40:hover{
  --tw-bg-opacity:          0.4;
}
.hover\:bg-opacity-70:hover{
  --tw-bg-opacity:          0.7;
}
.hover\:bg-gradient-to-r:hover{
  background-image:          linear-gradient(to right, var(--tw-gradient-stops));
}
.hover\:from-purple-100:hover{
  --tw-gradient-from:          #f3e8ff var(--tw-gradient-from-position);
  --tw-gradient-to:          rgb(243 232 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:          var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-indigo-100:hover{
  --tw-gradient-to:          #e0e7ff var(--tw-gradient-to-position);
}
.hover\:text-blue-500:hover{
  --tw-text-opacity:          1;
  color:          rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover{
  --tw-text-opacity:          1;
  color:          rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-700:hover{
  --tw-text-opacity:          1;
  color:          rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover{
  --tw-text-opacity:          1;
  color:          rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover{
  --tw-text-opacity:          1;
  color:          rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-orange-500:hover{
  --tw-text-opacity:          1;
  color:          rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover{
  --tw-text-opacity:          1;
  color:          rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover{
  --tw-text-opacity:          1;
  color:          rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:opacity-100:hover{
  opacity:          1;
}
.hover\:opacity-80:hover{
  opacity:          0.8;
}
.hover\:opacity-90:hover{
  opacity:          0.9;
}
.hover\:shadow-lg:hover{
  --tw-shadow:          0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:          0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover{
  --tw-shadow:          0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:          0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-sm:hover{
  --tw-shadow:          0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:          0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:          var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-transparent:focus{
  border-color:          transparent;
}
.focus\:outline-none:focus{
  outline:          2px solid transparent;
  outline-offset:          2px;
}
.focus\:ring-0:focus{
  --tw-ring-offset-shadow:          var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:          var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:          var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow:          var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:          var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:          var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity:          1;
  --tw-ring-color:          rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus{
  --tw-ring-offset-width:          2px;
}
.active\:cursor-grabbing:active{
  cursor:          grabbing;
}
.disabled\:cursor-not-allowed:disabled{
  cursor:          not-allowed;
}
.disabled\:opacity-50:disabled{
  opacity:          0.5;
}
.group:hover .group-hover\:scale-105{
  --tw-scale-x:          1.05;
  --tw-scale-y:          1.05;
  transform:          translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110{
  --tw-scale-x:          1.1;
  --tw-scale-y:          1.1;
  transform:          translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-black\/30{
  background-color:          rgb(0 0 0 / 0.3);
}
.group:hover .group-hover\:bg-blue-300{
  --tw-bg-opacity:          1;
  background-color:          rgb(147 197 253 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-green-300{
  --tw-bg-opacity:          1;
  background-color:          rgb(134 239 172 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-opacity-10{
  --tw-bg-opacity:          0.1;
}
.group:hover .group-hover\:text-blue-600{
  --tw-text-opacity:          1;
  color:          rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100{
  opacity:          1;
}
.dark\:text-gray-200:is(.dark *){
  --tw-text-opacity:          1;
  color:          rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *){
  --tw-text-opacity:          1;
  color:          rgb(156 163 175 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){
  .sm\:block{
    display:          block;
  }
  .sm\:inline{
    display:          inline;
  }
  .sm\:hidden{
    display:          none;
  }
  .sm\:h-2{
    height:          0.5rem;
  }
  .sm\:h-6{
    height:          1.5rem;
  }
  .sm\:h-8{
    height:          2rem;
  }
  .sm\:min-h-\[200px\]{
    min-height:          200px;
  }
  .sm\:min-h-\[80px\]{
    min-height:          80px;
  }
  .sm\:w-2{
    width:          0.5rem;
  }
  .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\:flex-row{
    flex-direction:          row;
  }
  .sm\:items-center{
    align-items:          center;
  }
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse:          0;
    margin-right:          calc(1rem * var(--tw-space-x-reverse));
    margin-left:          calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse:          0;
    margin-top:          calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:          calc(0px * var(--tw-space-y-reverse));
  }
  .sm\:px-2{
    padding-left:          0.5rem;
    padding-right:          0.5rem;
  }
  .sm\:px-6{
    padding-left:          1.5rem;
    padding-right:          1.5rem;
  }
  .sm\:text-left{
    text-align:          left;
  }
  .sm\:text-base{
    font-size:          1rem;
    line-height:          1.5rem;
  }
  .sm\:text-sm{
    font-size:          0.875rem;
    line-height:          1.25rem;
  }
}
@media (min-width: 768px){
  .md\:inline{
    display:          inline;
  }
  .md\:hidden{
    display:          none;
  }
  .md\:grid-cols-2{
    grid-template-columns:          repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns:          repeat(3, minmax(0, 1fr));
  }
  .md\:p-6{
    padding:          1.5rem;
  }
}
@media (min-width: 1024px){
  .lg\:mb-0{
    margin-bottom:          0px;
  }
  .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\:px-8{
    padding-left:          2rem;
    padding-right:          2rem;
  }
}
@media (min-width: 1280px){
  .xl\:grid-cols-4{
    grid-template-columns:          repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-5{
    grid-template-columns:          repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1536px){
  .\32xl\:grid-cols-6{
    grid-template-columns:          repeat(6, minmax(0, 1fr));
  }
}
/* Responsive utilities for MW Panel 2.0 */

/* Container spacing responsive */
.container-responsive {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
@media (min-width: 768px) {
  .container-responsive {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1024px) {
  .container-responsive {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.container-responsive-y {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .container-responsive-y {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1024px) {
  .container-responsive-y {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.container-responsive-full {
  padding: 0.75rem;
}

@media (min-width: 768px) {
  .container-responsive-full {
    padding: 1rem;
  }
}

@media (min-width: 1024px) {
  .container-responsive-full {
    padding: 1.5rem;
  }
}

/* Card spacing responsive */
.card-responsive {
  padding: 0.75rem;
}
@media (min-width: 768px) {
  .card-responsive {
    padding: 1rem;
  }
}
@media (min-width: 1024px) {
  .card-responsive {
    padding: 1.5rem;
  }
}

.card-responsive-sm {
  padding: 0.5rem;
}

@media (min-width: 768px) {
  .card-responsive-sm {
    padding: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .card-responsive-sm {
    padding: 1rem;
  }
}

/* Gap utilities responsive */
.gap-responsive {
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .gap-responsive {
    gap: 1rem;
  }
}
@media (min-width: 1024px) {
  .gap-responsive {
    gap: 1.5rem;
  }
}

.gap-responsive-sm {
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .gap-responsive-sm {
    gap: 0.5rem;
  }
}

@media (min-width: 1024px) {
  .gap-responsive-sm {
    gap: 0.75rem;
  }
}

/* Grid responsive utilities */
.grid-responsive-2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .grid-responsive-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid-responsive-3 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid-responsive-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-responsive-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.grid-responsive-4 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid-responsive-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-responsive-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Flex utilities responsive */
.flex-responsive-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .flex-responsive-col {
    flex-direction: row;
  }
}

/* Overflow utilities for responsive content */
.container-scroll-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: thin; /* Firefox */
}

.container-scroll-x::-webkit-scrollbar {
  height: 6px;
}

.container-scroll-x::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.container-scroll-x::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.container-scroll-x::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Table container responsive */
.table-container-responsive {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
}

.table-container-responsive .ant-table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Mobile-specific table improvements */
@media (max-width: 767px) {
  .table-container-responsive {
    margin: 0 -12px; /* Extend to screen edges on mobile */
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .table-container-responsive .ant-table-wrapper {
    padding: 0 12px;
  }
}

/* Content that should stay within bounds */
.content-contained {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  hyphens: auto;
}

.flex-responsive-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Button groups responsive */
.button-group-responsive {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .button-group-responsive {
    flex-direction: row;
    gap: 0.75rem;
  }
  .button-group-responsive .ant-btn {
    flex-shrink: 0;
  }
}

/* Form utilities responsive */
.form-grid-responsive {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .form-grid-responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-grid-responsive-3 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .form-grid-responsive-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .form-grid-responsive-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Typography responsive */
.title-responsive {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}
@media (min-width: 768px) {
  .title-responsive {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .title-responsive {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.subtitle-responsive {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .subtitle-responsive {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .subtitle-responsive {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.text-responsive {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .text-responsive {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.text-responsive-sm {
  font-size: 0.75rem;
  line-height: 1rem;
}

@media (min-width: 768px) {
  .text-responsive-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Table responsive fixes */
.table-responsive-container {
  overflow-x: auto;
}

.table-responsive-container .ant-table-thead > tr > th {
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
}

@media (min-width: 768px) {
  .table-responsive-container .ant-table-thead > tr > th {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.table-responsive-container .ant-table-tbody > tr > td {
  font-size: 0.75rem;
  line-height: 1rem;
}

@media (min-width: 768px) {
  .table-responsive-container .ant-table-tbody > tr > td {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Modal and drawer responsive */
.modal-responsive-body {
  padding: 0.75rem;
}
@media (min-width: 768px) {
  .modal-responsive-body {
    padding: 1.5rem;
  }
}

.drawer-responsive-body {
  padding: 0.75rem;
}

@media (min-width: 768px) {
  .drawer-responsive-body {
    padding: 1rem;
  }
}

/* Navigation responsive */
.nav-responsive {
  display: none;
}
@media (min-width: 768px) {
  .nav-responsive {
    display: flex;
  }
}

.nav-mobile {
  display: flex;
}

@media (min-width: 768px) {
  .nav-mobile {
    display: none;
  }
}

/* Search and filters responsive */
.search-responsive {
  width: 100%;
}
@media (min-width: 768px) {
  .search-responsive {
    width: 16rem;
  }
}
@media (min-width: 1024px) {
  .search-responsive {
    width: 20rem;
  }
}

.filter-responsive {
  width: 100%;
}

@media (min-width: 768px) {
  .filter-responsive {
    width: auto;
  }
}

.filters-container-responsive {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

@media (min-width: 768px) {
  .filters-container-responsive {
    flex-direction: row;
    align-items: center;
  }
}

/* Card grid responsive */
.card-grid-responsive {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .card-grid-responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .card-grid-responsive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .card-grid-responsive {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card-grid-responsive-2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 1024px) {
  .card-grid-responsive-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Avatar responsive */
.avatar-responsive {
  height: 2rem;
  width: 2rem;
}
@media (min-width: 768px) {
  .avatar-responsive {
    height: 2.5rem;
    width: 2.5rem;
  }
}

.avatar-responsive-lg {
  height: 3rem;
  width: 3rem;
}

@media (min-width: 768px) {
  .avatar-responsive-lg {
    height: 4rem;
    width: 4rem;
  }
}

/* Sidebar responsive fixes */
.sidebar-responsive .ant-menu-item {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.sidebar-responsive .ant-menu-submenu-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Mobile specific utilities */
@media (max-width: 767px) {
  .mobile-full-width {
    width: 100% !important;
  }
  
  .mobile-stack {
    flex-direction: column !important;
  }
  
  .mobile-center {
    text-align: center !important;
  }
  
  .mobile-hide {
    display: none !important;
  }
  
  .mobile-show {
    display: block !important;
  }
  
  /* Override Ant Design components for mobile */
  .ant-card {
    margin-bottom: 12px;
  }
  
  .ant-card-body {
    padding: 16px 12px !important;
  }
  
  .ant-table-tbody > tr > td {
    padding: 8px 6px !important;
  }
  
  .ant-table-thead > tr > th {
    padding: 8px 6px !important;
  }
  
  .ant-btn {
    height: 36px !important;
    font-size: 14px !important;
  }
  
  .ant-input {
    height: 36px !important;
  }
  
  .ant-select-selector {
    height: 36px !important;
  }
  
  .ant-form-item {
    margin-bottom: 16px !important;
  }
  
  .ant-space-item {
    margin-bottom: 8px !important;
  }
  
  .ant-dropdown-menu {
    font-size: 14px !important;
  }
  
  .ant-menu-item {
    height: 48px !important;
    line-height: 48px !important;
  }
}

/* Tablet specific utilities */
@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-hide {
    display: none !important;
  }
  
  .tablet-show {
    display: block !important;
  }
  
  .tablet-stack {
    flex-direction: column !important;
  }
}

/* Touch-friendly interfaces */
@media (hover: none) and (pointer: coarse) {
  .ant-btn {
    min-height: 44px !important;
  }
  
  .ant-menu-item {
    min-height: 48px !important;
  }
  
  .ant-table-tbody > tr > td {
    min-height: 44px !important;
  }
}

/* High DPI screens */
@media (min-resolution: 192dpi) {
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    border-width: 0.5px;
  }
}

/* Calendar Widget Responsive Styles */

/* Base Calendar Styles */
.calendar-widget {
  position: relative;
  overflow: hidden;
}

.calendar-widget .ant-card-body {
  padding: 16px !important;
  height: 100%;
  overflow: hidden;
}

.calendar-widget .ant-picker-calendar {
  background: transparent !important;
  height: 100% !important;
}

.calendar-widget .ant-picker-calendar .ant-picker-panel {
  background: transparent !important;
  height: 100% !important;
}

.calendar-widget .ant-picker-calendar .ant-picker-body {
  height: 100% !important;
}

.calendar-widget .ant-picker-calendar-date {
  border: 1px solid #f0f0f0;
  transition: all 0.2s;
}

.calendar-widget .ant-picker-calendar-date:hover {
  background-color: #f9f9f9;
}

.calendar-widget .ant-picker-calendar-date-today {
  border-color: #1890ff;
  background-color: #e6f7ff;
}

/* Mobile Layout */
.calendar-widget .mobile-calendar-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
}

.calendar-widget .mobile-calendar-container {
  width: 100%;
  overflow-x: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.calendar-widget .mobile-calendar-container .ant-picker-calendar-date {
  touch-action: auto;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-widget .mobile-calendar-container .ant-picker-calendar-date:active {
  background-color: rgba(24, 144, 255, 0.1);
  transform: scale(0.95);
  transition: all 0.1s ease;
}

.calendar-widget .ant-picker-calendar .ant-picker-calendar-date {
  position: relative;
  padding: 4px;
}

@media (max-width: 768px) {
  .calendar-widget .ant-picker-calendar .ant-picker-calendar-date {
    min-height: 40px;
    padding: 2px;
  }
}

.calendar-widget .mobile-calendar-widget .ant-picker-calendar {
  background: transparent;
  min-height: 300px;
}

.calendar-widget .mobile-events-collapse {
  margin-top: 12px;
}

.calendar-widget .mobile-events-collapse .ant-collapse-header {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

.calendar-widget .mobile-events-collapse .ant-collapse-content-box {
  padding: 8px 12px !important;
}

.calendar-widget .mobile-event-item {
  cursor: pointer;
  padding: 8px 0 !important;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.calendar-widget .mobile-event-item:hover {
  background-color: #f5f5f5;
}

/* Desktop/Tablet Events Sidebar */
.calendar-widget .events-sidebar {
  display: block;
}

.calendar-widget .events-title {
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

.calendar-widget .event-item {
  cursor: pointer;
  padding: 8px 0 !important;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.calendar-widget .event-item:hover {
  background-color: #f5f5f5;
}

/* Event Details Modal */
.calendar-widget .mobile-event-details .ant-descriptions-item-label {
  font-size: 12px !important;
  padding: 8px !important;
}

.calendar-widget .mobile-event-details .ant-descriptions-item-content {
  font-size: 12px !important;
  padding: 8px !important;
}

/* Calendar Responsive Breakpoints */
@media (max-width: 767px) {
  .calendar-widget .ant-picker-calendar {
    background: #fff;
  }
  
  .calendar-widget .ant-picker-calendar-header {
    padding: 8px 12px !important;
  }
  
  .calendar-widget .ant-picker-calendar-header .ant-picker-calendar-mode-switch {
    font-size: 14px !important;
  }
  
  .calendar-widget .ant-picker-calendar-date {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 4px;
  }
  
  .calendar-widget .ant-picker-calendar-date-value {
    font-size: 12px !important;
    line-height: 1.2;
  }
  
  .calendar-widget .ant-picker-calendar-date-content {
    height: auto !important;
    min-height: auto !important;
    font-size: 8px !important;
  }
  
  /* Hide calendar navigation arrows on very small screens */
  .calendar-widget .ant-picker-calendar-header .ant-select {
    font-size: 12px !important;
  }
  
  /* Responsive calendar month/year view */
  .calendar-widget .ant-picker-calendar-month-panel .ant-picker-calendar-date {
    height: 60px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .calendar-widget .ant-picker-calendar-date {
    height: 50px !important;
    min-height: 50px !important;
  }
  
  .calendar-widget .events-sidebar {
    border-left: none;
    border-top: 1px solid #f0f0f0;
    padding-left: 0;
    padding-top: 16px;
    margin-top: 16px;
  }
}

/* Desktop Styles */
@media (min-width: 1024px) {
  .calendar-widget .ant-row {
    display: flex !important;
    height: 100% !important;
  }
  
  .calendar-widget .ant-col {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .calendar-widget .ant-picker-calendar {
    flex: 1 !important;
    height: auto !important;
    min-height: 550px !important;
  }
  
  .calendar-widget .ant-picker-calendar .ant-picker-panel {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .calendar-widget .ant-picker-calendar .ant-picker-body {
    flex: 1 !important;
    height: auto !important;
  }
  
  .calendar-widget .ant-picker-calendar-date {
    height: 80px !important;
    min-height: 80px !important;
    transition: transform 0.2s ease;
  }
  
  /* Calendar container styles */
  .calendar-widget .calendar-scroll-container {
    position: relative;
    overflow: hidden;
  }
  
  /* Calendar Navigation Scrollbar */
  .calendar-widget .calendar-navigation-scrollbar {
    height: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    padding: 30px 8px 50px 8px;
  }
  
  .calendar-widget .calendar-nav-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    height: 100%;
    min-height: 580px;
    justify-content: space-around;
    padding: 50px 0 60px 0;
  }
  
  .calendar-widget .calendar-nav-btn {
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #595959;
  }
  
  .calendar-widget .calendar-nav-btn:hover {
    background: #1890ff;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
  }
  
  .calendar-widget .calendar-nav-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.5);
  }
  
  .calendar-widget .calendar-nav-indicator {
    flex: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 80px;
    max-height: 100px;
  }
  
  .calendar-widget .nav-month-indicator {
    font-size: 12px;
    font-weight: bold;
    color: #1890ff;
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  
  .calendar-widget .nav-week-indicator {
    font-size: 11px;
    color: #666;
    background: #e6f7ff;
    padding: 4px 6px;
    border-radius: 6px;
    writing-mode: horizontal-tb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #b3d9ff;
  }
  
  /* Date cell hover effects */
  .calendar-widget .ant-picker-calendar-date:hover .add-event-indicator {
    opacity: 1 !important;
  }
  
  .calendar-widget .ant-picker-calendar-date:hover {
    transform: scale(1.02);
    z-index: 10;
    position: relative;
  }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1023px) {
  .calendar-widget .ant-picker-calendar-date {
    height: 50px !important;
    min-height: 50px !important;
  }
  
  .calendar-widget .events-sidebar {
    border-left: none;
    border-top: 1px solid #f0f0f0;
    padding-left: 0;
    padding-top: 16px;
    margin-top: 16px;
  }
}

/* My Children Page Styles */
.child-card {
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
}

.child-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.child-card .ant-card-cover {
  border-radius: 12px 12px 0 0;
}

.child-card .ant-card-body {
  padding: 16px;
}

.child-card .ant-statistic-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.child-card .ant-statistic-content {
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .child-card .ant-card-body {
    padding: 12px;
  }
  
  .child-card .ant-statistic-content {
    font-size: 14px;
  }
}

/* Print styles */
@media print {
  .mobile-hide,
  .print-hide {
    display: none !important;
  }
  
  .ant-btn {
    display: none !important;
  }
  
  .ant-card {
    box-shadow: none !important;
    border: 1px solid #d9d9d9 !important;
  }
  
  .calendar-widget .mobile-events-collapse,
  .calendar-widget .events-sidebar {
    display: none !important;
  }
}

/* Enhanced calendar cell interaction feedback */
.calendar-widget .ant-picker-calendar-date {
  transition: all 0.2s ease !important;
  border-radius: 4px !important;
}

.calendar-widget .ant-picker-calendar-date:hover {
  background-color: rgba(24, 144, 255, 0.08) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.calendar-widget .ant-picker-calendar-date:active {
  background-color: rgba(24, 144, 255, 0.15) !important;
  transform: scale(0.98) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile-specific calendar feedback */
@media (max-width: 767px) {
  .calendar-widget .ant-picker-calendar-date:active {
    background-color: rgba(24, 144, 255, 0.12) !important;
    transform: scale(0.95) !important;
  }
  
  .calendar-widget .ant-picker-calendar-date:hover {
    background-color: rgba(24, 144, 255, 0.06) !important;
    transform: none !important;
  }
}

/* Calendar Page (Shared CalendarPage component) specific styles */
.ant-picker-calendar-date-content .events {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ant-picker-calendar-date-content .events li {
  margin: 1px 0 !important;
  line-height: 1.2 !important;
}

/* Admin Calendar Page - Enhanced clickable cells */
.ant-picker-calendar .ant-picker-calendar-date {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-radius: 6px !important;
  position: relative !important;
}

.ant-picker-calendar .ant-picker-calendar-date:hover {
  background-color: rgba(24, 144, 255, 0.08) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15) !important;
}

.ant-picker-calendar .ant-picker-calendar-date:active {
  background-color: rgba(24, 144, 255, 0.15) !important;
  transform: scale(0.98) !important;
}

/* Add subtle hint for clickable calendar days */
.ant-picker-calendar .ant-picker-calendar-date:hover::after {
  content: "📅 Clic para crear evento";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}/**
 * Estilos globales para ScrollableModal y Drawers
 *
 * Mejora la apariencia del scroll en los modales y drawers
 * Funciona en Chrome, Firefox, Safari y Edge
 */

/* Webkit browsers (Chrome, Safari, Edge) */
.ant-modal-body::-webkit-scrollbar,
.ant-drawer-body::-webkit-scrollbar {
  width: 8px;
}

.ant-modal-body::-webkit-scrollbar-track,
.ant-drawer-body::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.ant-modal-body::-webkit-scrollbar-thumb,
.ant-drawer-body::-webkit-scrollbar-thumb {
  background: #c5ddc3;
  border-radius: 4px;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.ant-modal-body::-webkit-scrollbar-thumb:hover,
.ant-drawer-body::-webkit-scrollbar-thumb:hover {
  background: #489e9d;
}

/* Firefox */
.ant-modal-body,
.ant-drawer-body {
  scrollbar-width: thin;
  scrollbar-color: #c5ddc3 #f0f0f0;
}

/* Smooth scroll behavior */
.ant-modal-body,
.ant-drawer-body {
  scroll-behavior: smooth;
}

/* Animación de fade para el scroll */
.ant-modal-body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ant-modal-body[data-scrolled="true"]::after {
  opacity: 1;
}
/* Blog Timeline Styles */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
  --blog-timeline-primary: #2563eb;
  --blog-timeline-bg: #f8fafc;
  --blog-timeline-text-dark: #1e293b;
  --blog-timeline-text-light: #64748b;
  --blog-timeline-border: #e2e8f0;
  --blog-timeline-mobile-header-height: 50px;
}

/* ========================================
   ANIMATIONS (defined globally)
   ======================================== */

@keyframes activePulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   MOBILE VERSION (< 1025px)
   Fixed horizontal bar at top
   ======================================== */

/* Base mobile styles - show on small screens */
.blog-timeline-wrapper {
  display: none; /* Hidden by default, shown via specific classes */
}

/* Mobile version - inline initially */
.blog-timeline-wrapper.blog-timeline-mobile {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin-bottom: 1rem;
  padding: 0;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: box-shadow 0.2s ease, border-radius 0.2s ease;
}

/* When sticky - fixed at top after scrolling past header */
.blog-timeline-wrapper.blog-timeline-mobile.is-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin: 0 !important;
  z-index: 9999 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.98);
}

/* Mobile Header Bar (always visible) */
.blog-timeline-mobile-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 1rem;
  width: 100%;
  background: white;
  border-bottom: 1px solid var(--blog-timeline-border);
}

/* Current post indicator for mobile */
.blog-timeline-current-view {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}

.blog-timeline-current-label {
  font-size: 0.65rem;
  color: var(--blog-timeline-text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-timeline-current-text {
  font-weight: 700;
  color: var(--blog-timeline-primary);
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toggle button - hidden since always expanded */
.blog-timeline-toggle-btn {
  display: none;
}

/* Desktop header hidden on mobile */
.blog-timeline-header {
  display: none;
}

/* Scrollable container - always visible on mobile */
.blog-timeline-scroll-container {
  max-height: none;
  overflow: visible;
  background: var(--blog-timeline-bg);
}

/* Timeline in horizontal mode for mobile */
.blog-timeline {
  display: flex;
  padding: 10px 1rem;
  gap: 15px;
  overflow-x: auto;
  white-space: nowrap;
  align-items: center;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.blog-timeline::-webkit-scrollbar {
  display: none;
}

/* Remove vertical line in mobile */
.blog-timeline::before {
  display: none;
}

/* Year groups in horizontal layout */
.blog-timeline-year-group {
  display: flex;
  align-items: center;
  margin: 0;
  flex-shrink: 0;
}

/* Year label mobile style */
.blog-timeline-year-label {
  margin-right: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blog-timeline-primary);
  padding: 0;
  background: transparent;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-timeline-year-label::before {
  display: none;
}

.blog-timeline-year-chevron {
  display: none;
}

/* Posts list - always visible in mobile horizontal */
.blog-timeline-posts {
  max-height: none !important;
  opacity: 1 !important;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: visible;
}

/* Post pills for mobile */
.blog-timeline-post {
  margin: 0;
  padding: 6px 14px;
  background: white;
  border: 1px solid var(--blog-timeline-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.blog-timeline-post:hover {
  border-color: var(--blog-timeline-primary);
  transform: none;
}

.blog-timeline-post.active {
  background: var(--blog-timeline-primary);
  border-color: var(--blog-timeline-primary);
}

.blog-timeline-post.active .blog-timeline-post-title,
.blog-timeline-post.active .blog-timeline-post-date {
  color: white !important;
  font-weight: normal;
}

.blog-timeline-post a {
  text-decoration: none;
  display: block;
}

.blog-timeline-post-title {
  font-size: 0.8rem;
  color: var(--blog-timeline-text-dark);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-timeline-post-date {
  display: none;
}

/* Post dot hidden in mobile */
.blog-timeline-post-dot {
  display: none !important;
}

/* Mobile overlay - NOT USED */
.blog-timeline-overlay {
  display: none !important;
}

/* ========================================
   SHOW TIMELINE ON TABLETS (LANDSCAPE) AND DESKTOPS
   min-width: 1025px covers tablets landscape and up
   ======================================== */
@media (min-width: 1025px) {

  /* Hide mobile elements on desktop */
  .blog-timeline-mobile-header {
    display: none !important;
  }

  .blog-timeline-scroll-container {
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    border-top: none !important;
  }

  /* Desktop version - styles are applied inline via React Portal */
  .blog-timeline-wrapper.blog-timeline-desktop {
    display: block;
    animation: slideInRight 0.3s ease-out;
  }

  /* Scrollbar styling for timeline */
  .blog-timeline-wrapper::-webkit-scrollbar {
    width: 4px;
  }

  .blog-timeline-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }

  .blog-timeline-wrapper::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 2px;
  }

  .blog-timeline-wrapper::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
  }

  /* Header styles */
  .blog-timeline-header {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .blog-timeline-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .blog-timeline-header .anticon {
    font-size: 18px;
    color: #2563eb;
  }

  /* Close button - NOT USED on desktop */
  .blog-timeline-close-btn {
    display: none;
  }

  .blog-timeline {
    position: relative;
    padding-left: 24px;
    /* Reset mobile flex styles */
    display: block;
    gap: 0;
    overflow-x: visible;
    overflow-y: visible;
    white-space: normal;
    align-items: stretch;
    scrollbar-width: auto;
    -webkit-overflow-scrolling: auto;
  }

  /* The elegant vertical line */
  .blog-timeline::before {
    content: '';
    display: block !important;
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #2563eb 0%, #e2e8f0 80%, transparent 100%);
    border-radius: 2px;
  }

  /* Year group styles */
  .blog-timeline-year-group {
    margin-bottom: 1rem;
    /* Reset mobile flex */
    display: block;
    flex-shrink: 1;
  }

  /* Show year chevron in desktop */
  .blog-timeline-year-chevron {
    display: inline-block;
  }

  .blog-timeline-year-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2563eb;
    background: #f8fafc;
    padding: 8px 0;
    position: relative;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: all 0.2s;
  }

  .blog-timeline-year-label:hover {
    color: #1e40af;
  }

  .blog-timeline-year-text {
    font-weight: 700;
  }

  .blog-timeline-year-count {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
  }

  .blog-timeline-year-chevron {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.3s ease;
    margin-left: auto;
  }

  .blog-timeline-year-chevron.rotated {
    transform: rotate(180deg);
  }

  /* Year dot - centrado sobre la línea vertical (left: 4px + 1px = 5px desde blog-timeline) */
  /* Con padding-left: 24px, el punto debe estar en -19px para centrarse */
  .blog-timeline-year-label::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #2563eb;
  }

  /* Collapsed year styles */
  .blog-timeline-year-group.collapsed .blog-timeline-year-label {
    color: #64748b;
  }

  .blog-timeline-year-group.collapsed .blog-timeline-year-label::before {
    background: #94a3b8;
    box-shadow: 0 0 0 2px #94a3b8;
  }

  .blog-timeline-year-group.collapsed:hover .blog-timeline-year-label::before {
    background: #2563eb;
    box-shadow: 0 0 0 2px #2563eb;
  }

  /* Year with active post highlight */
  .blog-timeline-year-group.has-active .blog-timeline-year-label::before {
    background: #2563eb;
    box-shadow: 0 0 0 2px #2563eb, 0 0 0 6px rgba(37, 99, 235, 0.2);
  }

  /* Posts list - collapsible */
  .blog-timeline-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    /* Reset mobile flex */
    display: block !important;
    gap: 0;
    flex-direction: column;
  }

  .blog-timeline-posts.expanded {
    max-height: 2000px !important;
    opacity: 1 !important;
    overflow: visible;
  }

  .blog-timeline-posts.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden;
  }

  /* Individual post item */
  .blog-timeline-post {
    position: relative;
    margin-bottom: 0.75rem;
    padding-left: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    /* Reset mobile pill styles */
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    flex-shrink: 1;
  }

  .blog-timeline-post:hover {
    transform: translateX(5px);
    border-color: transparent;
  }

  /* Show post dot in desktop */
  .blog-timeline-post-dot {
    display: block !important;
  }

  .blog-timeline-post a {
    text-decoration: none;
    display: block;
  }

  .blog-timeline-post-date {
    font-size: 0.75rem;
    color: #64748b;
    display: block !important;
    margin-bottom: 2px;
    text-transform: capitalize;
  }

  .blog-timeline-post-title {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.3;
    transition: color 0.2s;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
  }

  .blog-timeline-post:hover .blog-timeline-post-title {
    color: #2563eb;
  }

  /* Reset active post styles for desktop (not pill) */
  .blog-timeline-post.active {
    background: transparent;
    border: none;
  }

  .blog-timeline-post.active .blog-timeline-post-title {
    color: #2563eb !important;
    font-weight: 700 !important;
  }

  .blog-timeline-post.active .blog-timeline-post-date {
    color: #2563eb !important;
    font-weight: 600 !important;
  }

  /* Post dot - ahora manejado con elemento span en JSX, no pseudo-elemento */
  .blog-timeline-post::before {
    display: none !important;
    content: none !important;
  }

  .blog-timeline-post.active .blog-timeline-post-title {
    color: #2563eb;
    font-weight: 700;
  }

  .blog-timeline-post.active .blog-timeline-post-date {
    color: #2563eb;
    font-weight: 600;
  }
}
/* Instagram-style Blog Styles */

/* Feed Container */
.instagram-feed {
  max-width: 614px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Post Card */
.instagram-post {
  background: white;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}

/* Post Header */
.instagram-post-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 12px;
}

.instagram-post-header .author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  padding: 2px;
}

.instagram-post-header .author-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
}

.instagram-post-header .author-info {
  flex: 1;
}

.instagram-post-header .author-name {
  font-weight: 600;
  font-size: 14px;
  color: #262626;
  line-height: 1.2;
}

.instagram-post-header .post-time {
  font-size: 12px;
  color: #8e8e8e;
}

/* Post Media */
.instagram-post-media {
  position: relative;
  background: #000;
  aspect-ratio: 1 / 1;
}

.instagram-post-media img,
.instagram-post-media video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.instagram-post-media iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Carousel Navigation */
.instagram-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.instagram-carousel-nav:hover {
  background: white;
}

.instagram-carousel-nav.prev {
  left: 8px;
}

.instagram-carousel-nav.next {
  right: 8px;
}

/* Carousel Dots */
.instagram-carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.instagram-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.2s;
}

.instagram-carousel-dot.active {
  background: #0095f6;
}

/* Post Actions */
.instagram-post-actions {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.instagram-action-btn {
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #262626;
  font-size: 14px;
  transition: opacity 0.2s;
}

.instagram-action-btn:hover {
  opacity: 0.7;
}

.instagram-action-btn .anticon {
  font-size: 24px;
}

/* Post Caption */
.instagram-post-caption {
  padding: 0 16px 12px;
}

.instagram-post-caption .title {
  font-weight: 600;
  font-size: 14px;
  color: #262626;
  margin-bottom: 4px;
}

.instagram-post-caption .content {
  font-size: 14px;
  color: #262626;
  line-height: 1.5;
}

.instagram-post-caption .see-more {
  color: #8e8e8e;
  cursor: pointer;
  font-size: 14px;
}

.instagram-post-caption .see-more:hover {
  text-decoration: underline;
}

/* Post Tags */
.instagram-post-tags {
  padding: 0 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.instagram-tag {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 16px;
  background: #f3f4f6;
  color: #374151;
}

.instagram-tag.category {
  background: #6366f1;
  color: white;
}

/* Post Comments */
.instagram-post-comments {
  padding: 0 16px 12px;
  border-top: 1px solid #efefef;
  margin-top: 8px;
  padding-top: 12px;
}

.instagram-view-comments {
  color: #8e8e8e;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 8px;
  display: block;
}

.instagram-view-comments:hover {
  color: #262626;
}

.instagram-comment {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.instagram-comment .comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.instagram-comment .comment-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

.instagram-comment .comment-author {
  font-weight: 600;
  color: #262626;
  margin-right: 4px;
}

.instagram-comment .comment-text {
  color: #262626;
}

.instagram-comment .comment-time {
  font-size: 12px;
  color: #8e8e8e;
  margin-top: 4px;
}

.instagram-comment .comment-delete {
  opacity: 0;
  color: #8e8e8e;
  cursor: pointer;
  transition: opacity 0.2s, color 0.2s;
}

.instagram-comment:hover .comment-delete {
  opacity: 1;
}

.instagram-comment .comment-delete:hover {
  color: #ef4444;
}

/* Add Comment */
.instagram-add-comment {
  padding: 12px 16px;
  border-top: 1px solid #efefef;
  display: flex;
  align-items: center;
  gap: 12px;
}

.instagram-add-comment input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
}

.instagram-add-comment input::-moz-placeholder {
  color: #8e8e8e;
}

.instagram-add-comment input::placeholder {
  color: #8e8e8e;
}

.instagram-add-comment .post-btn {
  color: #0095f6;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.instagram-add-comment .post-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.instagram-add-comment .post-btn:hover:not(:disabled) {
  opacity: 0.7;
}

/* Create Post Button */
.instagram-create-btn {
  background: #1890ff;
  border: none;
  color: white;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.instagram-create-btn:hover {
  background: #40a9ff;
}

/* Responsive */
@media (max-width: 640px) {
  .instagram-feed {
    padding: 0;
  }

  .instagram-post {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 8px;
  }

  .instagram-post-media {
    aspect-ratio: 4 / 5;
  }
}

/* Force light mode - no dark mode support */
.instagram-feed,
.instagram-post,
.instagram-post * {
  color-scheme: light only;
}

/* Blog Content HTML Styles - Respect paragraphs and spacing */
.blog-content-html {
  line-height: 1.6;
}

.blog-content-html p {
  margin-bottom: 1em;
}

.blog-content-html p:last-child {
  margin-bottom: 0;
}

.blog-content-html br {
  display: block;
  content: "";
  margin-top: 0.5em;
}

.blog-content-html ul,
.blog-content-html ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.blog-content-html li {
  margin-bottom: 0.25em;
}

.blog-content-html h1,
.blog-content-html h2,
.blog-content-html h3,
.blog-content-html h4,
.blog-content-html h5,
.blog-content-html h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.blog-content-html blockquote {
  border-left: 3px solid #e5e7eb;
  padding-left: 1em;
  margin: 1em 0;
  color: #6b7280;
  font-style: italic;
}

.blog-content-html a {
  color: #3b82f6;
  text-decoration: underline;
}

.blog-content-html a:hover {
  color: #2563eb;
}

/* Remove shadow from comment button in posts */
.instagram-post button.rounded-full {
  box-shadow: none !important;
}

.instagram-post button.rounded-full:hover {
  box-shadow: none !important;
}
/* Blog Page Layout Styles */

.blog-page-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding: 1.5rem;
}

.blog-page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.blog-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.blog-page-subtitle {
  color: #64748b;
  font-size: 1rem;
  margin: 0;
}

/* Mobile timeline container - visible only on mobile */
.blog-timeline-mobile-container {
  display: block;
  max-width: 800px;
  margin: 0 auto 1rem auto;
  min-height: 100px; /* Reserve space to prevent content jump when timeline becomes fixed */
}

/* Desktop timeline container - hidden on mobile */
.blog-timeline-desktop-container {
  display: none;
}

/* Main Grid Layout */
.blog-page-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  position: relative;
  align-items: start;
}

/* Content Area */
.blog-page-content {
  min-width: 0; /* Prevent overflow in grid */
}

/* Override InstagramFeed max-width to fill available space */
.blog-page-content .instagram-feed {
  max-width: 100%;
  padding: 0;
}

/* Responsive Design - Mobile first */
@media (max-width: 1024px) {
  .blog-page-container {
    padding: 1rem;
  }

  .blog-page-header {
    margin-bottom: 1rem;
  }

  .blog-page-title {
    font-size: 1.5rem;
  }

}

@media (max-width: 640px) {
  .blog-page-container {
    padding: 0.5rem;
  }

  .blog-page-header {
    padding: 0 0.5rem;
    margin-bottom: 0.75rem;
  }

  .blog-page-title {
    font-size: 1.25rem;
  }

  .blog-page-subtitle {
    font-size: 0.875rem;
  }
}

/* Desktop/Tablet Landscape - Show timeline sidebar */
@media (min-width: 1025px) {
  /* Hide mobile timeline on desktop */
  .blog-timeline-mobile-container {
    display: none;
  }

  /* Show desktop timeline sidebar */
  .blog-timeline-desktop-container {
    display: block;
    position: relative;
    width: 280px;
  }

  .blog-page-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
  }
}

/* Smooth scroll for the whole page */
html {
  scroll-behavior: smooth;
}