/* [next]/internal/font/google/geist_a71539c9.module.css [app-client] (css) */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.8e0177b5.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.b97b3418.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.853070df.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Fallback;
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%;
}

.geist_a71539c9-module__T19VSG__className {
  font-family: Geist, Geist Fallback;
  font-style: normal;
}

.geist_a71539c9-module__T19VSG__variable {
  --font-geist-sans: "Geist", "Geist Fallback";
}

/* [next]/internal/font/google/geist_mono_8d43a2aa.module.css [app-client] (css) */
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/4fa387ec64143e14-s.c1fdd6c2.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/bbc41e54d2fcbd21-s.799d8ef8.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/797e433ab948586e-s.p.dbea232f.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Mono Fallback;
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.geist_mono_8d43a2aa-module__8Li5zG__className {
  font-family: Geist Mono, Geist Mono Fallback;
  font-style: normal;
}

.geist_mono_8d43a2aa-module__8Li5zG__variable {
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback";
}

/* [next]/internal/font/google/poppins_39de20a3.module.css [app-client] (css) */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/41e95f694c5c4549-s.666bad7d.woff2") format("woff2");
  unicode-range: U+900-97F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/6c55a692938ebbbc-s.0a77efb4.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/a218039a3287bcfd-s.p.4a23d71b.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/bdc7e24a509eb931-s.43b0b13e.woff2") format("woff2");
  unicode-range: U+900-97F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/0da9c7f357bd9d4d-s.b2288445.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/8e6fa89aa22d24ec-s.p.3aec397d.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/0a7740363b4d4863-s.95e4158a.woff2") format("woff2");
  unicode-range: U+900-97F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/5f9d24ebef5d5292-s.bd593fbe.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/e2334d715941921e-s.p.d82a9aff.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/b53057dbf91a7acf-s.c55744ae.woff2") format("woff2");
  unicode-range: U+900-97F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/798ea22d9983e047-s.b460e02c.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/47fe1b7cd6e6ed85-s.p.855a563b.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Poppins Fallback;
  src: local(Arial);
  ascent-override: 93.62%;
  descent-override: 31.21%;
  line-gap-override: 8.92%;
  size-adjust: 112.16%;
}

.poppins_39de20a3-module__8LurOG__className {
  font-family: Poppins, Poppins Fallback;
  font-style: normal;
}

.poppins_39de20a3-module__8LurOG__variable {
  --font-poppins: "Poppins", "Poppins Fallback";
}

/* [next]/internal/font/google/geist_9f08c5e8.module.css [app-client] (css) */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.8e0177b5.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.b97b3418.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.853070df.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.8e0177b5.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.b97b3418.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.853070df.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.8e0177b5.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.b97b3418.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.853070df.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Fallback;
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%;
}

.geist_9f08c5e8-module__Vp5bXW__className {
  font-family: Geist, Geist Fallback;
  font-style: normal;
}

.geist_9f08c5e8-module__Vp5bXW__variable {
  --font-samooch: "Geist", "Geist Fallback";
}

/* [next]/internal/font/google/sora_2b6137f7.module.css [app-client] (css) */
@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/b886574ba42c3409-s.1f4af8e6.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/c41ca59f1c34ba31-s.p.e20f337c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/b886574ba42c3409-s.1f4af8e6.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/c41ca59f1c34ba31-s.p.e20f337c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/b886574ba42c3409-s.1f4af8e6.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/c41ca59f1c34ba31-s.p.e20f337c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/b886574ba42c3409-s.1f4af8e6.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/c41ca59f1c34ba31-s.p.e20f337c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/b886574ba42c3409-s.1f4af8e6.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/c41ca59f1c34ba31-s.p.e20f337c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Sora Fallback;
  src: local(Arial);
  ascent-override: 85.29%;
  descent-override: 25.5%;
  line-gap-override: 0.0%;
  size-adjust: 113.73%;
}

.sora_2b6137f7-module__JgWqYq__className {
  font-family: Sora, Sora Fallback;
  font-style: normal;
}

.sora_2b6137f7-module__JgWqYq__variable {
  --font-sora: "Sora", "Sora Fallback";
}

/* [next]/internal/font/google/dm_sans_f26b0ff8.module.css [app-client] (css) */
@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/c3cb240f9c892514-s.d8e4bce2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/5c285b27cdda1fe8-s.p.a62025f2.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/c3cb240f9c892514-s.d8e4bce2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/5c285b27cdda1fe8-s.p.a62025f2.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/c3cb240f9c892514-s.d8e4bce2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/5c285b27cdda1fe8-s.p.a62025f2.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/c3cb240f9c892514-s.d8e4bce2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/5c285b27cdda1fe8-s.p.a62025f2.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/c3cb240f9c892514-s.d8e4bce2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/5c285b27cdda1fe8-s.p.a62025f2.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: DM Sans Fallback;
  src: local(Arial);
  ascent-override: 94.9%;
  descent-override: 29.66%;
  line-gap-override: 0.0%;
  size-adjust: 104.53%;
}

.dm_sans_f26b0ff8-module__aXzNha__className {
  font-family: DM Sans, DM Sans Fallback;
  font-style: normal;
}

.dm_sans_f26b0ff8-module__aXzNha__variable {
  --font-dm-sans: "DM Sans", "DM Sans Fallback";
}

/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: rgba(0, 0, 0, 0);
      --tw-gradient-via: rgba(0, 0, 0, 0);
      --tw-gradient-to: rgba(0, 0, 0, 0);
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-font-weight: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
    }

    ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: rgba(0, 0, 0, 0);
      --tw-gradient-via: rgba(0, 0, 0, 0);
      --tw-gradient-to: rgba(0, 0, 0, 0);
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-font-weight: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
    }
  }
}

@layer theme {
  :root, :host {
    --color-yellow-600: #cd8900;
    --color-emerald-500: #00bb7f;
    --color-emerald-600: #009767;
    --color-blue-500: #3080ff;
    --color-blue-600: #155dfc;
    --color-indigo-500: #625fff;
    --color-purple-500: #ac4bff;
    --color-purple-600: #9810fa;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-300: #d1d5dc;
    --color-gray-400: #99a1af;
    --color-gray-500: #6a7282;
    --color-gray-700: #364153;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --font-weight-medium: 500;
    --radius-md: .375rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-geist-sans);
    --default-mono-font-family: var(--font-geist-mono);
    --font-poppins: var(--font-poppins);
    --font-samooch: var(--font-samooch);
    --font-sora: var(--font-sora);
    --font-dm-sans: var(--font-dm-sans);
  }

  @supports (color: color(display-p3 0 0 0)) {
    :root, :host {
      --color-yellow-600: color(display-p3 .776342 .542492 .041709);
      --color-emerald-500: color(display-p3 .267113 .726847 .508397);
      --color-emerald-600: color(display-p3 .206557 .589057 .413962);
      --color-blue-500: color(display-p3 .266422 .491219 .988624);
      --color-blue-600: color(display-p3 .174493 .358974 .950247);
      --color-indigo-500: color(display-p3 .380374 .372235 .971707);
      --color-purple-500: color(display-p3 .629519 .30089 .990817);
      --color-purple-600: color(display-p3 .546729 .130167 .94439);
      --color-gray-50: color(display-p3 .977213 .98084 .985102);
      --color-gray-100: color(display-p3 .953567 .956796 .964321);
      --color-gray-300: color(display-p3 .822033 .835264 .858521);
      --color-gray-400: color(display-p3 .605734 .630385 .680158);
      --color-gray-500: color(display-p3 .421287 .446085 .504784);
      --color-gray-700: color(display-p3 .219968 .253721 .318679);
    }
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-yellow-600: lab(62.7799% 22.4197 86.1544);
      --color-emerald-500: lab(66.9756% -58.27 19.5419);
      --color-emerald-600: lab(55.0481% -49.9246 15.93);
      --color-blue-500: lab(54.1736% 13.3369 -74.6839);
      --color-blue-600: lab(44.0605% 29.0279 -86.0352);
      --color-indigo-500: lab(48.295% 38.3129 -81.9673);
      --color-purple-500: lab(52.0183% 66.11 -78.2316);
      --color-purple-600: lab(43.0295% 75.21 -86.5669);
      --color-gray-50: lab(98.2596% -.247031 -.706708);
      --color-gray-100: lab(96.1596% -.0823438 -1.13575);
      --color-gray-300: lab(85.1236% -.612259 -3.7138);
      --color-gray-400: lab(65.9269% -.832707 -8.17473);
      --color-gray-500: lab(47.7841% -.393182 -10.0268);
      --color-gray-700: lab(27.1134% -.956401 -12.3224);
    }
  }
}

@layer base {
  *, :after, :before {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::-webkit-file-upload-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
  }

  ::-webkit-file-upload-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
  }

  :where(select:-webkit-any([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:-moz-any([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:-webkit-any([multiple], [size])) optgroup option:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-left: 20px;
  }

  :where(select:-moz-any([multiple], [size])) optgroup option:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-left: 20px;
  }

  :where(select:is([multiple], [size])) optgroup option:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    padding-left: 20px;
  }

  :where(select:-webkit-any([multiple], [size])) optgroup option:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 20px;
  }

  :where(select:-moz-any([multiple], [size])) optgroup option:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 20px;
  }

  :where(select:is([multiple], [size])) optgroup option:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 20px;
  }

  :not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::-webkit-file-upload-button {
    margin-right: 4px;
  }

  :not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::file-selector-button {
    margin-right: 4px;
  }

  :not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::file-selector-button {
    margin-right: 4px;
  }

  :-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::-webkit-file-upload-button {
    margin-left: 4px;
  }

  :-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::file-selector-button {
    margin-left: 4px;
  }

  :is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::file-selector-button {
    margin-left: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }

  input:where([type="button"], [type="reset"], [type="submit"]) {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }

  ::file-selector-button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .ms-4:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: calc(var(--spacing) * 4);
  }

  .ms-4:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: calc(var(--spacing) * 4);
  }

  .ms-4:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: calc(var(--spacing) * 4);
  }

  .ms-4:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: calc(var(--spacing) * 4);
  }

  .ms-4:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: calc(var(--spacing) * 4);
  }

  .ms-4:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: calc(var(--spacing) * 4);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .flex-1 {
    flex: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .items-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  :where(.space-x-4 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
  }

  :where(.space-x-4 > :not(:last-child)):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-right: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-right: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    margin-left: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-right: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-left: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-left: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-left: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-emerald-500 {
    --tw-gradient-from: var(--color-emerald-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-purple-500 {
    --tw-gradient-from: var(--color-purple-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-blue-600 {
    --tw-gradient-to: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-emerald-600 {
    --tw-gradient-to: var(--color-emerald-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-purple-600 {
    --tw-gradient-to: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-yellow-600 {
    --tw-gradient-to: var(--color-yellow-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .object-cover {
    object-fit: cover;
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .placeholder\:text-gray-400::placeholder {
    color: var(--color-gray-400);
  }

  @media (hover: hover) {
    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--color-indigo-500);
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (min-width: 48rem) {
    .md\:flex {
      display: flex;
    }
  }
}

:root {
  --background: #fff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.auth-container {
  background-color: #fff;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.gradient-overlay {
  z-index: 1;
  opacity: 1;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -490px;
}

.auth-main-wrapper {
  z-index: 20;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
  position: relative;
}

.auth-left-side {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 2rem 1.5rem;
  display: flex;
  position: relative;
}

.auth-logo {
  z-index: 30;
  width: auto;
  max-width: 100px;
  height: auto;
  position: absolute;
  top: 2rem;
  left: 1.5rem;
}

.auth-content {
  width: 100%;
  max-width: 400px;
  margin: 4rem auto 0;
}

.auth-welcome-title {
  font-family: var(--font-samooch);
  color: #1c1c1c;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.1;
}

.auth-subtitle {
  font-family: var(--font-poppins);
  color: #1c1c1c;
  text-align: center;
  margin-bottom: 3rem;
  font-size: .875rem;
  line-height: 1.4;
}

.auth-form {
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  color: #9ca3af;
  pointer-events: none;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}

.form-input {
  width: 100%;
  font-family: var(--font-poppins);
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  outline: none;
  padding: 1rem 1rem 1rem 3rem;
  font-size: .95rem;
  transition: all .2s;
}

.form-input:focus {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
}

.login-button {
  color: #fff;
  width: 100%;
  font-family: var(--font-poppins);
  cursor: pointer;
  background-color: #000;
  border: none;
  border-radius: .5rem;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  transition: all .2s;
}

.login-button:hover {
  background-color: #374151;
}

.login-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.divider-section {
  margin-top: 2rem;
}

.divider-text {
  font-family: var(--font-poppins);
  color: #6b7280;
  text-align: center;
  margin-bottom: 1rem;
  font-size: .9rem;
}

.divider-text-bold {
  font-weight: bold;
}

.google-button {
  color: #000;
  width: 100%;
  font-family: var(--font-poppins);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #1c1c1c;
  border-radius: .5rem;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  font-size: .95rem;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.google-button:hover {
  background-color: #f9fafb;
}

.google-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.google-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.auth-toggle {
  text-align: center;
  margin: 1.5rem 0;
}

.toggle-text {
  font-family: var(--font-poppins);
  color: #6b7280;
  font-size: .9rem;
}

.toggle-link {
  color: #4f46e5;
  font-family: var(--font-poppins);
  cursor: pointer;
  background: none;
  border: none;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  transition: color .2s;
}

.toggle-link:hover {
  color: #3730a3;
}

.auth-right-side {
  order: -1;
  width: 100%;
  padding: 1rem;
}

.background-image-wrapper {
  border-radius: 1rem;
  width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.background-image {
  object-fit: cover;
}

@media (min-width: 768px) {
  .auth-main-wrapper {
    flex-direction: row;
  }

  .auth-left-side {
    width: 50%;
    padding: 2rem 4rem;
  }

  .auth-logo {
    max-width: 120px;
    left: 4rem;
  }

  .auth-content {
    margin-top: 0;
  }

  .auth-welcome-title {
    font-size: 3.5rem;
  }

  .auth-right-side {
    order: 0;
    width: 50%;
    padding: 1.5rem;
  }

  .background-image-wrapper {
    border-radius: 1.5rem;
    height: 100%;
  }

  .gradient-overlay {
    display: block;
  }
}

@media (min-width: 1024px) {
  .auth-left-side {
    padding: 2rem 5rem;
  }

  .auth-logo {
    left: 5rem;
  }

  .auth-welcome-title {
    font-size: 4rem;
  }

  .auth-right-side {
    padding: 2rem;
  }
}

@media (max-width: 767px) {
  .gradient-overlay {
    display: none;
  }

  .auth-content {
    padding: 0 .5rem;
  }

  .auth-welcome-title, .auth-subtitle {
    text-align: center;
  }

  .auth-right-side {
    display: none;
  }

  .auth-left-side {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .auth-left-side {
    width: 100%;
    padding: 1.5rem 1rem;
  }

  .auth-logo {
    max-width: 80px;
    top: 1.5rem;
    left: 1rem;
  }

  .auth-welcome-title {
    margin-bottom: .75rem;
    font-size: 2rem;
  }

  .auth-subtitle {
    margin-bottom: 2rem;
    font-size: .8rem;
  }

  .form-input {
    padding: .875rem .875rem .875rem 2.5rem;
    font-size: .9rem;
  }

  .input-icon {
    width: 1rem;
    height: 1rem;
    left: .75rem;
  }

  .login-button, .google-button {
    padding: .875rem;
    font-size: 1rem;
  }

  .auth-right-side {
    display: none;
  }
}

.dashboard-container {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.dashboard-gradient-overlay {
  z-index: 1;
  opacity: .4;
  pointer-events: none;
  width: 300px;
  height: 300px;
  position: fixed;
  bottom: -100px;
  left: -100px;
}

.dashboard-sidebar {
  color: #334155;
  z-index: 1000;
  background: #fff;
  border-right: 1px solid #e2e8f0;
  flex-direction: column;
  width: 220px;
  height: 100vh;
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 2px 0 12px rgba(0, 0, 0, .08);
}

.dashboard-sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  border-bottom: 1px solid #e2e8f0;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem .75rem;
  display: flex;
  position: relative;
}

.sidebar-logo {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.logo-image {
  border-radius: .375rem;
}

.sidebar-toggle {
  color: #64748b;
  cursor: pointer;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: .375rem;
  transition: all .3s;
  display: flex;
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.sidebar-toggle:hover {
  color: #334155;
  background: #e2e8f0;
}

.toggle-arrow {
  width: .75rem;
  height: .75rem;
}

.sidebar-nav {
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: .75rem 0;
  display: flex;
}

.nav-section {
  padding: 0 1rem;
}

.nav-divider {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #e2e8f0 50%, rgba(0, 0, 0, 0) 100%);
  height: 1px;
  margin: .75rem 1rem;
}

.section-title {
  color: #000;
  letter-spacing: .5px;
  margin-bottom: .5rem;
  font-family: poppins;
  font-size: 22px;
  font-weight: bold;
}

.nav-item {
  cursor: pointer;
  border-radius: .5rem;
  align-items: center;
  gap: .75rem;
  margin-bottom: .25rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
}

.nav-item:hover {
  background: #f1f5f9;
  transform: translateX(2px);
}

.nav-item.active {
  color: #fff;
  background: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, .3);
}

.nav-item.logout-item:hover {
  color: #ef4444;
  background: #fef2f2;
}

.nav-icon {
  color: #64748b;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.nav-item.active .nav-icon {
  color: #fff;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
}

.nav-text {
  font-family: var(--font-poppins);
  color: #475569;
  font-size: .875rem;
  font-weight: 500;
}

.nav-item.active .nav-text {
  color: #fff;
}

.account-section {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: auto;
  padding-top: 1rem;
}

.credits-banner {
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: .75rem;
  margin: .5rem;
  padding: 1rem;
}

.credits-title {
  font-family: var(--font-poppins);
  color: #fff;
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 700;
}

.credits-subtitle {
  font-family: var(--font-poppins);
  color: rgba(255, 255, 255, .8);
  margin-bottom: .75rem;
  font-size: .7rem;
  line-height: 1.3;
}

.credits-button {
  color: #4f46e5;
  font-family: var(--font-poppins);
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: .375rem;
  width: 100%;
  padding: .5rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  transition: all .2s;
}

.credits-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
}

.dashboard-main {
  z-index: 5;
  flex: 1;
  min-height: 100vh;
  margin-left: 220px;
  transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.dashboard-main.sidebar-collapsed {
  margin-left: 60px;
}

.dashboard-topnav {
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 1rem 1.5rem;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.topnav-left {
  flex: 1;
}

.page-title {
  font-family: var(--font-samooch);
  color: #1e293b;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-icons {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.credits-display {
  color: #fff;
  font-family: var(--font-poppins);
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-radius: 1.25rem;
  align-items: center;
  gap: .375rem;
  padding: .5rem .875rem;
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  box-shadow: 0 2px 8px rgba(16, 185, 129, .25);
}

.credits-icon {
  width: .875rem;
  height: .875rem;
}

.nav-icon-item {
  cursor: pointer;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: all .3s;
  display: flex;
  position: relative;
}

.nav-icon-item:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.nav-icon-item svg {
  color: #64748b;
  width: 1rem;
  height: 1rem;
}

.notification {
  position: relative;
}

.notification-badge {
  color: #fff;
  background: #ef4444;
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  min-width: 1rem;
  height: 1rem;
  padding: .125rem .375rem;
  font-size: .7rem;
  display: flex;
  position: absolute;
  top: -.25rem;
  right: -.25rem;
}

.topnav-center {
  display: none;
}

.topnav-right {
  align-items: center;
  gap: 1.5rem;
  display: flex;
}

.user-info {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.username {
  font-family: var(--font-poppins);
  color: #374151;
  font-weight: 500;
}

.profile-image {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
}

.language-switcher {
  font-family: var(--font-poppins);
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  padding: .5rem;
  font-size: .9rem;
}

.dashboard-cards {
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
}

.dashboard-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 1rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

.left-card {
  flex-direction: column;
  flex: 3;
  display: flex;
  position: relative;
}

.right-card {
  flex-direction: column;
  flex: 2;
  padding: 0;
  display: flex;
}

.card-image {
  background: linear-gradient(45deg, #00d4ff, #05f, #ff00b7, #fe0);
  border-radius: .75rem;
  height: 140px;
  margin: 1.5rem 1.5rem 0;
  padding: 3px;
  position: relative;
  overflow: hidden;
}

.card-image:before {
  content: "";
  z-index: 1;
  background: #fff;
  border-radius: calc(.75rem - 3px);
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px;
}

.card-image .background-image {
  z-index: 2;
  border-radius: calc(.75rem - 3px);
  position: relative;
}

.card-image-container {
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
}

.card-content {
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  display: flex;
  position: relative;
}

.card-title {
  font-family: var(--font-poppins);
  color: #0f172a;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

.gradient-text {
  background: linear-gradient(45deg, #00e5ff, #00f, #f0d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 700;
}

.highlight-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 500;
}

.card-subtitle {
  font-family: var(--font-poppins);
  color: #475569;
  flex: 1;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  line-height: 1.6;
}

.create-video-button {
  color: #fff;
  font-family: var(--font-poppins);
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: .75rem;
  align-self: flex-start;
  width: auto;
  padding: .75rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, .3);
}

.create-video-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(102, 126, 234, .4);
}

.card-icons {
  gap: .75rem;
  display: flex;
}

.card-footer {
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  display: flex;
  position: relative;
}

.icon-neon {
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
}

.pencil-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 0 25px rgba(251, 191, 36, .5), 0 4px 15px rgba(251, 191, 36, .3);
}

.image-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 0 25px rgba(16, 185, 129, .5), 0 4px 15px rgba(16, 185, 129, .3);
}

.icon-neon svg {
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
  width: 1.125rem;
  height: 1.125rem;
}

.card-action-icons {
  z-index: 10;
  gap: .5rem;
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.action-icon-circle {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #667eea;
  background: rgba(255, 255, 255, .95);
  border: 2px solid rgba(102, 126, 234, .1);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 1rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  box-shadow: 0 4px 16px rgba(102, 126, 234, .25);
}

.action-icon-circle:hover {
  color: #5b6cd1;
  background: rgba(102, 126, 234, .1);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, .4);
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.video-preview-container {
  border-radius: .75rem;
  flex: 1;
  margin: .5rem 1.5rem 0;
  position: relative;
  overflow: hidden;
}

.video-background {
  border-radius: .75rem;
  width: 100%;
  height: 240px;
  position: relative;
  overflow: hidden;
}

.play-button-large {
  color: #667eea;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 10;
  background: rgba(255, 255, 255, .95);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.play-button-large:hover {
  color: #fff;
  background: #667eea;
  transform: translate(-50%, -50%)scale(1.1);
  box-shadow: 0 12px 32px rgba(102, 126, 234, .3);
}

.video-caption {
  text-align: center;
  padding: 1.5rem;
}

.pencil-icon:hover {
  transform: scale(1.15);
  box-shadow: 0 0 35px rgba(251, 191, 36, .7), 0 6px 20px rgba(251, 191, 36, .4);
}

.image-icon:hover {
  transform: scale(1.15);
  box-shadow: 0 0 35px rgba(16, 185, 129, .7), 0 6px 20px rgba(16, 185, 129, .4);
}

.video-container {
  background: #0f172a;
  border-radius: 1rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.demo-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.play-button {
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .95);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.play-button:hover {
  background: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.play-button svg {
  color: #1f2937;
  width: 1rem;
  height: 1rem;
  margin-left: .125rem;
}

.video-subtitle {
  font-family: var(--font-poppins);
  color: #fff;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, .7);
  border-radius: .5rem;
  padding: .75rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
}

.examples-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2rem;
}

.examples-title {
  font-family: var(--font-samooch);
  color: #0f172a;
  text-align: left;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.examples-scroll {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
  gap: 1rem;
  padding-bottom: 1rem;
  display: flex;
  overflow-x: auto;
}

.examples-scroll::-webkit-scrollbar {
  height: 10px;
}

.examples-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 8px;
}

.examples-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border: 2px solid #f1f5f9;
  border-radius: 8px;
}

.examples-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.example-video {
  cursor: pointer;
  background: #0f172a;
  border-radius: 1rem;
  flex-shrink: 0;
  width: 240px;
  height: 150px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
}

.example-video:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

.example-video video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.example-play-button {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .95);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
}

.example-play-button svg {
  color: #1f2937;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: .125rem;
}

@media (max-width: 1024px) {
  .dashboard-cards {
    flex-direction: column;
    gap: 1.5rem;
  }

  .left-card, .right-card {
    flex: none;
  }

  .examples-scroll {
    gap: 1rem;
  }

  .example-video {
    width: 240px;
    height: 150px;
  }
}

@media (max-width: 768px) {
  .dashboard-sidebar {
    z-index: 1000;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -280px;
  }

  .dashboard-sidebar.collapsed {
    left: -80px;
  }

  .dashboard-main, .dashboard-main.sidebar-collapsed {
    margin-left: 0;
  }

  .dashboard-topnav {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
  }

  .topnav-left, .topnav-right {
    order: 2;
  }

  .topnav-center {
    text-align: left;
    flex: none;
    order: 1;
    width: 100%;
  }

  .dashboard-cards, .examples-section {
    padding: 1rem;
  }

  .examples-title {
    font-size: 1.5rem;
  }

  .card-icons {
    justify-content: center;
    margin-top: 1rem;
    position: static;
  }

  .dashboard-gradient-overlay {
    width: 300px;
    height: 300px;
    left: -300px;
  }
}

@media (max-width: 480px) {
  .dashboard-topnav {
    padding: .75rem;
  }

  .nav-icons, .user-info {
    gap: .5rem;
  }

  .username {
    display: none;
  }

  .card-content {
    padding: 1rem;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .card-subtitle {
    font-size: .875rem;
  }
}

.loading-container, .error-container {
  background-color: #f8fafc;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.loading-spinner {
  font-family: var(--font-poppins);
  color: #6b7280;
  font-size: 1.2rem;
  position: relative;
}

.loading-spinner:after {
  content: "";
  border: 2px solid #e5e7eb;
  border-top-color: #4f46e5;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  animation: 1s linear infinite spin;
  position: absolute;
  top: 50%;
  left: -2rem;
  transform: translateY(-50%);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-container p {
  font-family: var(--font-poppins);
  color: #ef4444;
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  font-size: 1.1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.dashboard-page {
  background-color: #f9fafb;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.dashboard-page:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  opacity: .8;
  background-image: url("/background/bottomcornergredientleft.svg");
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 600px;
  height: 600px;
  transition: opacity .3s;
  position: fixed;
  bottom: 0;
  left: 0;
}

.dashboard-page:after {
  content: "";
  z-index: 0;
  pointer-events: none;
  opacity: .6;
  background-image: url("/background/bottomcornergredientleft.svg");
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: 500px;
  height: 500px;
  transition: opacity .3s;
  position: fixed;
  top: 0;
  right: 0;
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .dashboard-page:before {
    opacity: .6;
    width: 400px;
    height: 400px;
  }

  .dashboard-page:after {
    opacity: .5;
    width: 350px;
    height: 350px;
  }
}

@media (max-width: 480px) {
  .dashboard-page:before {
    opacity: .5;
    width: 300px;
    height: 300px;
  }

  .dashboard-page:after {
    opacity: .4;
    width: 250px;
    height: 250px;
  }
}

.dashboard-sidebar-container {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 10;
  background-color: rgba(255, 255, 255, .85);
  border-right: 1px solid rgba(229, 231, 235, .8);
  flex-direction: column;
  width: 16rem;
  transition: all .3s;
  display: flex;
  position: relative;
}

.dashboard-sidebar-container.collapsed {
  width: 5rem;
}

.dashboard-sidebar-container.hidden {
  display: none;
}

@media (min-width: 768px) {
  .dashboard-sidebar-container.hidden {
    display: flex;
  }
}

.sidebar-header-section {
  border-bottom: 1px solid #f3f4f6;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  display: flex;
}

.sidebar-logo-container {
  align-items: center;
  gap: .75rem;
  margin-left: 3rem;
  display: flex;
}

.sidebar-logo-image {
  border-radius: .5rem;
}

.sidebar-brand-text {
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 700;
}

.sidebar-toggle-btn {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 50%;
  padding: .5rem;
  transition: background-color .2s;
}

.sidebar-toggle-btn:hover {
  background-color: #f3f4f6;
}

.sidebar-toggle-icon {
  color: #6b7280;
  width: 1rem;
  height: 1rem;
}

.sidebar-navigation {
  flex: 1;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.sidebar-nav-list {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.sidebar-nav-item {
  cursor: pointer;
  color: #374151;
  border-radius: .75rem;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

.sidebar-nav-item:hover {
  color: #374151;
  background-color: #f3f4f6;
  transform: translateX(2px);
}

.sidebar-nav-item.active {
  background: rgba(95, 70, 255, .1);
  border-radius: 8px;
}

.sidebar-nav-item.active .sidebar-nav-icon, .sidebar-nav-item.active .sidebar-nav-text {
  font-weight: 700;
  color: #000 !important;
}

.sidebar-account-item.active {
  background: rgba(95, 70, 255, .1);
  border-radius: 8px;
}

.sidebar-account-item.active .sidebar-account-icon, .sidebar-account-item.active .sidebar-nav-text {
  font-weight: 700;
  color: #000 !important;
}

.sidebar-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.sidebar-nav-text {
  color: #374151;
  font-weight: 500;
}

.sidebar-divider {
  border-top: 1px solid #e5e7eb;
  margin: 1.5rem 0;
}

.sidebar-account-section {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.sidebar-account-title {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
  padding: 0 .75rem;
  font-size: .75rem;
  font-weight: 600;
}

.sidebar-account-item {
  cursor: pointer;
  color: #374151;
  border-radius: .75rem;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  transition: all .2s;
  display: flex;
}

.sidebar-account-item:hover {
  background-color: #f3f4f6;
}

.sidebar-account-item.logout {
  color: #374151;
}

.sidebar-account-item.logout:hover {
  color: #dc2626;
  background-color: #fef2f2;
}

.sidebar-account-icon {
  width: 1rem;
  height: 1rem;
}

.sidebar-credits-section {
  padding: 1rem;
}

.sidebar-credits-card {
  background: rgba(106, 106, 106, .118);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.sidebar-credits-title {
  color: #1f2937;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: .5rem;
  font-weight: 700;
}

.sidebar-credits-text {
  color: #6b7280;
  margin-bottom: 1rem;
  font-size: .75rem;
}

.sidebar-credits-btn {
  color: #1f2937;
  cursor: pointer;
  background-color: #fff;
  border: none;
  border-radius: .75rem;
  width: 100%;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  transition: box-shadow .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.sidebar-credits-btn:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.dashboard-main-content {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 5;
  background-color: rgba(249, 250, 251, .1);
  flex: 1;
  position: relative;
  overflow: hidden;
}

.dashboard-top-nav {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 15;
  background-color: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(243, 244, 246, .8);
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  display: flex;
  position: relative;
}

@media (max-width: 768px) {
  .dashboard-top-nav {
    padding: 1rem;
  }
}

.top-nav-left {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.mobile-menu-btn {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: .5rem;
  padding: .5rem;
  display: block;
}

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

.mobile-menu-btn:hover {
  background-color: #f3f4f6;
}

.mobile-menu-icon {
  color: #6b7280;
  width: 1.25rem;
  height: 1.25rem;
}

.page-title-main {
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .page-title-main {
    font-size: 1.5rem;
  }
}

.top-nav-right {
  align-items: center;
  gap: .75rem;
  padding-right: 1rem;
  display: flex;
}

.credits-pill {
  color: #960ef8;
  cursor: pointer;
  background: rgba(150, 14, 248, .1);
  border: 1px solid rgba(150, 14, 248, .2);
  border-radius: 12px;
  align-items: center;
  gap: .375rem;
  height: 1.7rem;
  padding: 0 .75rem;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.credits-pill:hover {
  background: rgba(150, 14, 248, .15);
  border-color: rgba(150, 14, 248, .3);
  transform: translateY(-1px);
}

.credits-pill svg {
  color: #960ef8;
  font-size: .875rem;
}

.credits-coin {
  background-color: #ffd24d;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
}

.credits-coin-icon {
  color: #6c4a00;
  width: .75rem;
  height: .75rem;
}

.nav-icon-button {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: all .2s;
  display: flex;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
}

.nav-icon-button:hover {
  background-color: #f9fafb;
}

.nav-icon-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .2);
}

.nav-icon-button-icon {
  color: #6b7280;
  width: 1rem;
  height: 1rem;
}

.notification-badge {
  background-color: #ef4444;
  border-radius: 50%;
  width: .5rem;
  height: .5rem;
  position: absolute;
  top: .25rem;
  right: .25rem;
}

.user-profile-section {
  align-items: center;
  gap: .375rem;
  display: flex;
}

.username-display {
  color: #111827;
  font-size: .875rem;
  font-weight: 500;
}

@media (max-width: 640px) {
  .username-display {
    display: none;
  }
}

.user-avatar-button {
  color: #fff;
  cursor: pointer;
  background-color: #000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  font-size: .75rem;
  font-weight: 700;
  transition: all .2s;
  display: flex;
}

.user-avatar-button:hover {
  background-color: #1f2937;
}

.user-profile-image {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.language-button {
  cursor: pointer;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: all .2s;
  display: flex;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
}

.language-button:hover {
  background-color: #f9fafb;
}

.language-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .2);
}

.language-icon {
  color: #6b7280;
  width: 1rem;
  height: 1rem;
}

.dashboard-content-area {
  scroll-behavior: smooth;
  height: calc(100vh - 60px);
  padding: 1rem 2rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.dashboard-content-area::-webkit-scrollbar {
  width: 8px;
}

.dashboard-content-area::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 4px;
}

.dashboard-content-area::-webkit-scrollbar-thumb {
  background: linear-gradient(#6573ed, #14d2e6);
  border-radius: 4px;
}

.dashboard-content-area::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#5a67d8, #0ea5e9);
}

.dashboard-content-area {
  scrollbar-width: thin;
  scrollbar-color: #6573ed #f8fafc;
}

@media (max-width: 768px) {
  .dashboard-content-area {
    height: calc(100vh - 70px);
    padding: 1rem;
  }

  .dashboard-content-area::-webkit-scrollbar {
    width: 6px;
  }

  .examples-scroll-container::-webkit-scrollbar {
    height: 4px;
  }
}

.hero-section {
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
  display: grid;
}

@media (min-width: 1024px) {
  .hero-section {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-card {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 3;
  background-color: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 1rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
}

.hero-card:hover {
  transform: translateY(-4px);
}

.hero-card-image-section {
  width: auto;
  height: 12rem;
  margin: 1rem 1rem 0;
  position: relative;
}

.hero-card-gradient-border {
  background: linear-gradient(to right, #00d4ff, #05f, #ff00b7, #fe0);
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  padding: 1px;
}

.hero-card-image-container {
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hero-card-content {
  padding: 1.5rem;
}

.hero-card-title {
  color: #1f2937;
  margin-bottom: .75rem;
  font-size: 1.125rem;
  font-weight: 400;
}

.hero-card-gradient-text {
  background: linear-gradient(to right, #8b5cf6, #3b82f6);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 700;
}

.hero-card-description {
  color: #6b7280;
  margin-bottom: 1.5rem;
  font-size: .85rem;
  line-height: 1.35;
}

.hero-card-footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.create-video-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(34deg, #00c2ff, #7d61ff, #fa00ff);
  border: none;
  border-radius: 9999px;
  padding: .5rem 1.5rem;
  font-weight: 700;
  transition: all .3s;
  box-shadow: 0 4px 6px -1px rgba(139, 92, 246, .3);
}

.create-video-btn:hover {
  transform: scale(1.05);
}

.action-icons-group {
  gap: .5rem;
  display: flex;
}

.action-icon-btn {
  cursor: pointer;
  background: linear-gradient(135deg, #fff, #fff);
  border: none;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 3px;
  transition: all .3s;
  display: flex;
  position: relative;
  box-shadow: 0 0 20px rgba(101, 115, 237, .5), 0 0 40px rgba(20, 210, 230, .4), 0 4px 15px rgba(0, 0, 0, .1);
}

.action-icon-btn:before {
  content: "";
  z-index: 0;
  background: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px;
}

.action-icon-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(101, 115, 237, .8), 0 0 60px rgba(20, 210, 230, .7), 0 8px 25px rgba(0, 0, 0, .2);
}

.action-icon {
  color: #000;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  position: relative;
}

.hero-video-card {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 3;
  background-color: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 1rem;
  height: 26rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
}

.hero-video-card:hover {
  transform: translateY(-4px);
}

.hero-video-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-video {
  object-fit: cover;
  border-radius: 1rem;
  width: 100%;
  height: 100%;
}

.video-bottom-left-overlay {
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  max-width: 60%;
  display: flex;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

.video-overlay-text {
  color: #fff;
  text-align: left;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  background: rgba(0, 0, 0, .6);
  border-radius: .5rem;
  margin: 0;
  padding: .5rem .75rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
}

.video-play-button-small {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  background-color: rgba(255, 255, 255, .95);
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.video-play-button-small:hover {
  background-color: #fff;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.video-play-icon-small {
  color: #8b5cf6;
  width: .875rem;
  height: .875rem;
  margin-left: 2px;
}

@media (max-width: 768px) {
  .video-bottom-left-overlay {
    max-width: 70%;
    bottom: .75rem;
    left: .75rem;
  }

  .video-overlay-text {
    padding: .375rem .5rem;
    font-size: .7rem;
  }

  .video-play-button-small {
    width: 2rem;
    height: 2rem;
  }

  .video-play-icon-small {
    width: .75rem;
    height: .75rem;
  }
}

.examples-section-main {
  margin-top: 2rem;
  position: relative;
}

.examples-section-main:after {
  content: "";
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f9fafb);
  width: 3rem;
  position: absolute;
  top: 2.5rem;
  bottom: 1rem;
  right: 0;
}

.examples-title-main {
  background: linear-gradient(34deg, #00c3ff, #4d00ff, #ff00d4);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  border-radius: 25px;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin-bottom: 1rem;
  padding: .5rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  display: inline-block;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
}

.examples-title-main:before {
  content: "";
  z-index: -1;
  background: #fff;
  border-radius: 25px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.examples-scroll-container {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #6573ed #f1f5f9;
  gap: 1rem;
  padding-bottom: 1rem;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

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

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

.examples-scroll-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #6573ed, #14d2e6);
  border-radius: 3px;
}

.examples-scroll-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a67d8, #0ea5e9);
}

.example-video-card {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  z-index: 2;
  background-color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 1rem;
  flex-shrink: 0;
  width: 16rem;
  height: 10rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}

@media (min-width: 768px) {
  .example-video-card {
    width: 18rem;
    height: 11rem;
  }
}

.example-video-card:hover {
  transform: scale(1.02);
}

.example-video-image {
  object-fit: cover;
}

.example-video-player {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  transition: all .3s;
}

.example-play-overlay {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.example-play-button {
  background-color: rgba(255, 255, 255, .9);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  display: flex;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}

.example-play-icon {
  color: #8b5cf6;
  width: 1rem;
  height: 1rem;
  margin-left: .25rem;
}

.loading-screen {
  background-color: #f9fafb;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.loading-text {
  color: #6b7280;
}

.no-user-screen {
  background-color: #f9fafb;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.no-user-text {
  color: #6b7280;
}

.modal-backdrop {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  z-index: 1000;
  background: rgba(0, 0, 0, .4);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.modal-container {
  z-index: 1001;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.modal-content {
  text-align: center;
  background: linear-gradient(135deg, #fff, #fff, #fff, #fff) 0 0 / 300% 300%;
  border-radius: 2rem;
  width: 100%;
  max-width: 500px;
  padding: 3rem 2rem;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25), 0 0 80px rgba(168, 85, 247, .3), 0 0 40px rgba(251, 191, 36, .2);
}

.modal-close-btn {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, .2);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transition: all .2s;
  display: flex;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, .3);
  transform: scale(1.1);
}

.modal-close-btn svg {
  width: 1rem;
  height: 1rem;
}

.modal-title {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  z-index: 1;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
  position: relative;
}

.modal-title:before {
  content: "";
  z-index: -1;
  opacity: .7;
  filter: blur(10px);
  pointer-events: none;
  background-image: url("/background/bottomcornergredientleft.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 600px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-title-gradient {
  background: linear-gradient(135deg, #00d4ff, #5e00ff, #ff00d4);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.modal-subtitle {
  color: rgba(0, 0, 0, .9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  margin-bottom: 2.5rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
}

.modal-upload-section {
  justify-content: center;
  display: flex;
}

.modal-upload-btn {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  text-align: center;
  background: #ebe8ff;
  border: none;
  border-radius: 1rem;
  min-width: 200px;
  padding: 2rem 1.5rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .1), 0 0 20px rgba(255, 255, 255, .5);
}

.modal-upload-btn:before {
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .3), rgba(0, 0, 0, 0));
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.modal-upload-btn:hover:before {
  left: 100%;
}

.modal-upload-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .15), 0 0 30px rgba(168, 85, 247, .4);
}

.modal-upload-icon {
  color: #fff;
  background: linear-gradient(135deg, #9e83ff, #9e83ff);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  font-size: 1.25rem;
  display: flex;
  box-shadow: 0 8px 16px rgba(139, 92, 246, .3);
}

.modal-upload-text {
  color: #374151;
  z-index: 1;
  font-size: .9rem;
  font-weight: 600;
  display: block;
  position: relative;
}

.creation-content-area {
  flex: 1;
  min-height: 100vh;
  padding: 1rem;
  position: relative;
  overflow-y: auto;
}

.creation-page-container {
  z-index: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: calc(100vh - 2rem);
  max-height: calc(100vh - 2rem);
  padding: 1rem 0;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.creation-external-controls {
  background: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 1rem;
  display: flex;
  position: relative;
}

.creation-exit-btn-external {
  cursor: pointer;
  align-items: center;
  gap: .75rem;
  transition: all .2s;
  display: flex;
}

.creation-exit-btn-external:hover {
  transform: translateX(-2px);
}

.exit-icon-container {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #374151;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  transition: all .2s;
  display: flex;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.exit-icon-container:hover {
  color: #111827;
  background: rgba(255, 255, 255, .3);
}

.exit-text {
  color: #374151;
  font-size: 1rem;
  font-weight: 700;
  transition: all .2s;
}

.exit-text:hover {
  color: #111827;
  background: rgba(255, 255, 255, .3);
}

.creation-step-indicator-external {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9999px;
  padding: .25rem 1.5rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
}

.creation-step-indicator-external span {
  color: #fff;
  background: linear-gradient(90deg, #527dff, #143983);
  border-radius: 9999px;
  padding: .25rem 2rem;
  font-size: .9rem;
  font-weight: 700;
  display: block;
  box-shadow: 0 4px 12px rgba(59, 130, 246, .3);
}

.creation-card-container {
  background: rgba(255, 255, 255, .224);
  border-radius: 1.5rem;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: 1300px;
  max-height: -moz-fit-content;
  max-height: fit-content;
  margin-bottom: 10rem;
  padding: 1.5rem;
  display: flex;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .1), 0 0 40px rgba(168, 85, 247, .1), 0 0 20px rgba(6, 182, 212, .05);
}

.creation-section-title {
  text-align: center;
  margin-bottom: 0;
}

.creation-main-title {
  color: #111827;
  margin-bottom: .75rem;
  font-size: 1.55rem;
  font-weight: 700;
}

.creation-title-gradient {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.creation-subtitle {
  color: #6b7280;
  max-width: 500px;
  margin: 0 auto 1rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
}

.creation-gradient-border-bar {
  background: linear-gradient(90deg, #0cf 0%, #0d00ff 50%, #ff00f6 100%);
  border-radius: 1px;
  width: 100%;
  height: 2px;
  margin: 0 auto 1.5rem;
}

.upload-main-container {
  flex: 1;
  align-items: flex-start;
  gap: 2rem;
  min-height: 0;
  display: flex;
}

.upload-left-section {
  flex: 1;
  padding-right: 1rem;
}

.upload-section-title {
  font-family: var(--font-sora), sans-serif;
  color: #111827;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.upload-section-subtitle {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  margin-bottom: 1.5rem;
  font-size: 9pt;
  font-weight: 400;
  line-height: 1.5;
}

.upload-drop-area {
  text-align: center;
  background: #fafbfc;
  border: 2px dashed #d1d5db;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  padding: 2rem 1.5rem;
  transition: all .2s;
  position: relative;
}

.upload-drop-area.drag-active {
  background: #f3f4f6;
  border-style: solid;
  border-color: #8b5cf6;
}

.upload-icon {
  color: #446ee4;
  margin-bottom: .75rem;
  font-size: 2.5rem;
}

.upload-drop-title {
  font-family: var(--font-dm-sans), sans-serif;
  color: #374151;
  margin-bottom: .5rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.upload-format-info {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  font-weight: 500;
}

.browse-files-btn {
  font-family: var(--font-dm-sans), sans-serif;
  color: #000;
  cursor: pointer;
  background: #fff;
  border: 1px solid #00c3ff;
  border-radius: .5rem;
  padding: .75rem 2rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .2s;
  box-shadow: 0 2px 4px rgba(139, 92, 246, .2);
}

.browse-files-btn:hover {
  background: #fff;
  box-shadow: 0 4px 8px rgba(139, 92, 246, .3);
}

.browse-files-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.upload-action-buttons {
  justify-content: space-between;
  gap: 1rem;
  display: flex;
}

.upload-cancel-btn, .upload-done-btn {
  font-family: var(--font-dm-sans), sans-serif;
  cursor: pointer;
  border: none;
  border-radius: .5rem;
  padding: .75rem 2rem;
  font-size: .875rem;
  font-weight: 700;
  transition: all .2s;
}

.upload-cancel-btn:hover {
  background: #e5e7eb;
}

.upload-done-btn:disabled {
  color: #9ca3af;
  cursor: not-allowed;
  background: #d1d5db;
}

.upload-right-section {
  flex: 1;
  padding-left: 1rem;
}

.images-grid-title {
  color: #374151;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.images-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  display: grid;
}

.image-grid-item {
  background: #d9d9d9;
  border-radius: .75rem;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem;
  display: flex;
}

.image-container {
  aspect-ratio: 4 / 3;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-container.empty {
  color: #9ca3af;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  font-size: 2rem;
}

.image-actions {
  gap: 6px;
  display: flex;
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.edit-image-btn, .delete-image-btn {
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: .75rem;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.edit-image-btn {
  background: #3b82f6;
}

.edit-image-btn:hover {
  background: #2563eb;
  transform: scale(1.1);
}

.delete-image-btn {
  background: #ef4444;
}

.delete-image-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.image-caption {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
  max-height: 30%;
  padding: 8px 6px 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.image-info-container {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin-top: .5rem;
  display: flex;
}

.image-text-display {
  color: #6b7280;
  font-size: .75rem;
  font-family: var(--font-poppins), sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-style: italic;
  font-weight: 400;
  overflow: hidden;
}

.image-label {
  color: #323232;
  text-align: end;
  font-size: .875rem;
  font-family: var(--font-poppins), sans-serif;
  flex-shrink: 0;
  font-weight: 700;
}

.creation-image-preview {
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  min-height: 280px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}

.creation-preview-image {
  object-fit: cover;
  border-radius: .75rem;
  width: 100%;
  height: 100%;
}

.creation-image-placeholder {
  color: #9ca3af;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 1.25rem;
  display: flex;
}

.creation-image-placeholder svg {
  width: 4rem;
  height: 4rem;
}

.creation-image-label {
  color: #fff;
  background: rgba(0, 0, 0, .8);
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.creation-input-section {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.creation-text-input {
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  transition: all .2s;
}

.project-name-container {
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.5rem;
  display: flex;
}

.project-name-label {
  color: #374151;
  max-width: 240px;
  margin-bottom: .25rem;
  font-size: .875rem;
  font-weight: 500;
}

.project-name-input {
  color: #374151;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  outline: none;
  width: 100%;
  max-width: 240px;
  padding: .875rem 1rem;
  font-size: .875rem;
  transition: all .2s;
}

.project-name-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.project-name-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}

.project-name-input:hover:not(:focus) {
  border-color: #d1d5db;
}

.creation-text-input:focus {
  border-color: #8b5cf6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .1);
}

.creation-text-input::placeholder {
  color: #9ca3af;
}

.creation-helper-text {
  color: #6b7280;
  margin-left: .25rem;
  font-size: .875rem;
}

.creation-adjust-title {
  color: #111827;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.creation-slider-container {
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
}

.creation-slider-btn {
  color: #fff;
  cursor: pointer;
  background: #111827;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transition: all .2s;
  display: flex;
}

.creation-slider-btn:hover {
  background: #374151;
  transform: scale(1.05);
}

.creation-slider-track {
  flex: 1;
  position: relative;
}

.creation-slider {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  width: 100%;
  height: 6px;
}

.creation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background: #111827;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  transition: all .2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.creation-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
}

.creation-slider::-moz-range-thumb {
  cursor: pointer;
  background: #111827;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.creation-action-buttons {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.creation-continue-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #9f70ff, #7732ff);
  border: 1px solid #6941c6;
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .75rem;
  font-weight: 700;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(139, 92, 246, .3);
}

.creation-continue-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(139, 92, 246, .4);
}

.creation-delete-btn {
  color: #fff;
  cursor: pointer;
  background: #111827;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  transition: all .2s;
  display: flex;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .2);
}

.creation-delete-btn:hover {
  background: #374151;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(17, 24, 39, .3);
}

@media (max-width: 1024px) {
  .upload-main-container {
    flex-direction: column;
    gap: 2rem;
  }

  .upload-left-section, .upload-right-section {
    padding-left: 0;
    padding-right: 0;
  }

  .images-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .creation-page-container {
    height: 100vh;
    max-height: 100vh;
    padding: .5rem 0;
  }

  .creation-external-controls {
    margin-bottom: 1rem;
  }

  .exit-icon-container {
    width: 2rem;
    height: 2rem;
    font-size: .875rem;
  }

  .exit-text {
    padding: .4rem .75rem;
    font-size: .875rem;
  }

  .creation-step-indicator-external {
    padding: .25rem 2rem;
  }

  .creation-step-indicator-external span {
    padding: .25rem 2rem;
    font-size: .875rem;
  }

  .creation-card-container {
    border-radius: 1rem;
    flex: 1;
    padding: 1rem .75rem;
  }

  .creation-main-title {
    font-size: 1.75rem;
  }

  .creation-subtitle {
    font-size: .875rem;
  }

  .creation-image-preview {
    min-height: 200px;
  }

  .creation-gradient-border-bar {
    margin: 0 auto 1.5rem;
  }

  .upload-drop-area {
    padding: 1.5rem 1rem;
  }

  .upload-action-buttons {
    flex-direction: row;
    justify-content: space-between;
  }

  .upload-cancel-btn, .upload-done-btn {
    text-align: center;
    flex: 1;
  }

  .images-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  .upload-section-title {
    font-size: 1.25rem;
  }
}

.crop-interface-container {
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  display: flex;
}

.crop-image-section {
  flex: 1;
}

.crop-image-preview {
  background: #f9fafb;
  border: 8px solid #6b7280;
  border-radius: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 370px;
  max-height: 470px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.crop-preview-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.crop-preview-image {
  object-fit: cover;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
}

.crop-overlay-grid {
  pointer-events: none;
  z-index: 2;
  border: 2px dashed rgba(139, 92, 246, .6);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.crop-size-indicator {
  color: #fff;
  font-family: var(--font-dm-sans), sans-serif;
  z-index: 3;
  background: rgba(0, 0, 0, .7);
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.crop-controls-section {
  flex-direction: column;
  flex: 0 0 300px;
  gap: 2rem;
  padding-left: 1rem;
  display: flex;
}

.crop-adjust-title {
  font-family: var(--font-dm-sans), sans-serif;
  color: #111827;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.crop-slider-container {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.crop-slider-btn {
  color: #fff;
  cursor: pointer;
  background: #111827;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  transition: all .2s;
  display: flex;
}

.crop-slider-btn:hover {
  background: #374151;
  transform: scale(1.05);
}

.crop-slider-track {
  flex: 1;
  position: relative;
}

.crop-slider {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  width: 100%;
  height: 6px;
}

.crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background: #111827;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  transition: all .2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.crop-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
}

.crop-slider::-moz-range-thumb {
  cursor: pointer;
  background: #111827;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.crop-action-buttons {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.crop-continue-btn {
  font-family: var(--font-dm-sans), sans-serif;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #9f70ff, #7732ff);
  border: none;
  border-radius: .75rem;
  padding: 1rem;
  font-size: .9rem;
  font-weight: 600;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(139, 92, 246, .3);
}

.crop-continue-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(139, 92, 246, .4);
}

.crop-continue-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.crop-delete-btn {
  font-family: var(--font-dm-sans), sans-serif;
  color: #fff;
  cursor: pointer;
  background: #111827;
  border: none;
  border-radius: .75rem;
  padding: 1rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .2);
}

.crop-delete-btn:hover {
  background: #374151;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(17, 24, 39, .3);
}

.crop-delete-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.crop-text-section {
  flex-direction: column;
  gap: .5rem;
  max-width: 600px;
  display: flex;
}

.crop-text-input {
  font-family: var(--font-dm-sans), sans-serif;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  transition: all .2s;
}

.crop-text-input:focus {
  border-color: #8b5cf6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .1);
}

.crop-text-input::placeholder {
  color: #9ca3af;
}

.crop-text-helper {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  margin-left: .25rem;
  font-size: .875rem;
}

@media (max-width: 1024px) {
  .crop-interface-container {
    flex-direction: column;
    gap: 2rem;
  }

  .crop-controls-section {
    flex: 1;
    max-width: none;
    padding-left: 0;
  }

  .crop-image-preview {
    max-height: 350px;
  }
}

@media (max-width: 768px) {
  .crop-image-preview {
    border-width: 4px;
    min-height: 250px;
    max-height: 300px;
  }

  .crop-size-indicator {
    padding: .375rem .75rem;
    font-size: .75rem;
    bottom: .5rem;
  }

  .crop-controls-section {
    gap: 1.5rem;
  }

  .crop-action-buttons {
    flex-direction: row;
    gap: 1rem;
  }

  .crop-continue-btn, .crop-delete-btn {
    flex: 1;
    padding: .875rem 1rem;
    font-size: .875rem;
  }

  .crop-text-input {
    padding: .875rem 1rem;
  }
}

.video-settings-container {
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  display: flex;
}

.video-settings-image-section {
  flex: 1;
}

.video-preview-container {
  background: #f9fafb;
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  min-width: 400px;
  max-width: 700px;
  min-height: 200px;
  max-height: 400px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.video-preview-image {
  object-fit: cover;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
}

.portrait-toggle-external {
  display: inline-block;
}

.toggle-container {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.toggle-label {
  font-family: var(--font-dm-sans), sans-serif;
  color: #374151;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
}

.video-settings-options {
  flex-direction: column;
  flex: 0 0 350px;
  gap: .5rem;
  padding-left: 1rem;
  display: flex;
}

.settings-tabs-header {
  border-bottom: 1px solid rgba(229, 231, 235, .3);
  gap: 0;
  margin-bottom: .5rem;
  display: flex;
}

.settings-tab {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  cursor: pointer;
  text-align: center;
  background: none;
  border: none;
  flex: 1;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all .3s;
  position: relative;
}

.settings-tab:hover {
  color: #374151;
}

.settings-tab.active {
  color: #111827;
}

.settings-tab.active:after {
  content: "";
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 1px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.settings-tab-content {
  min-height: 200px;
}

.settings-group {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}

.settings-group-title {
  font-family: var(--font-dm-sans), sans-serif;
  color: #111827;
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.setting-item {
  border-bottom: 1px solid rgba(229, 231, 235, .5);
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  display: flex;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  font-family: var(--font-dm-sans), sans-serif;
  color: #374151;
  flex: 1;
  font-size: .875rem;
  font-weight: 500;
}

.toggle-switch {
  cursor: pointer;
  width: 50px;
  height: 26px;
  display: inline-block;
  position: relative;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  cursor: pointer;
  background-color: #e5e7eb;
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 26px;
  transition: all .3s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.toggle-slider:before {
  content: "";
  background-color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: all .3s;
  position: absolute;
  bottom: 2px;
  left: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: #2563eb;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.toggle-switch:hover .toggle-slider {
  box-shadow: 0 0 8px rgba(59, 130, 246, .3);
}

.toggle-switch input:checked + .toggle-slider:hover {
  box-shadow: 0 0 12px rgba(59, 130, 246, .5);
}

@media (max-width: 1024px) {
  .video-settings-container {
    flex-direction: column;
    gap: 2rem;
  }

  .video-settings-options {
    flex: 1;
    max-width: none;
    padding-left: 0;
  }

  .video-preview-container {
    max-height: 350px;
  }
}

@media (max-width: 768px) {
  .video-preview-container {
    border-width: 4px;
    min-height: 250px;
    max-height: 300px;
  }

  .portrait-toggle-external {
    margin-bottom: .75rem;
    padding: .75rem 1rem;
  }

  .toggle-container {
    gap: .5rem;
  }

  .toggle-label {
    font-size: .75rem;
  }

  .video-settings-options {
    gap: 1.5rem;
  }

  .settings-tab {
    padding: .875rem 1.5rem;
    font-size: .9375rem;
  }

  .settings-tab-content {
    min-height: 150px;
  }

  .settings-group {
    padding: 1rem;
  }

  .settings-group-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
  }

  .setting-item {
    padding: .75rem 0;
  }

  .setting-label {
    font-size: .8125rem;
  }

  .toggle-switch {
    width: 44px;
    height: 24px;
  }

  .toggle-slider:before {
    width: 16px;
    height: 16px;
  }

  .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
  }

  .portrait-settings-section {
    padding-top: .1rem;
  }

  .portrait-settings-title {
    margin-bottom: .75rem;
    font-size: .75rem;
  }

  .portrait-setting-item {
    padding: .875rem;
  }
}

.portrait-settings-section {
  padding-top: .1rem;
}

.portrait-settings-title {
  font-family: var(--font-dm-sans), sans-serif;
  color: #111827;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  font-size: .99rem;
  font-weight: 600;
  display: flex;
}

.settings-divider {
  background: linear-gradient(to right, #e5e7eb, #d1d5db, #e5e7eb);
  width: 100%;
  height: 1px;
  margin-bottom: 1.5rem;
}

.portrait-setting-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  transition: all .2s;
  display: flex;
}

.portrait-setting-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.step-navigation-container {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 1.5rem 0 0;
  display: flex;
}

.step-prev-btn {
  font-family: var(--font-dm-sans), sans-serif;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6b7280, #4b5563);
  border: none;
  border-radius: .75rem;
  align-items: center;
  gap: 8px;
  padding: .875rem 1.5rem;
  font-size: .9375rem;
  font-weight: 600;
  transition: all .2s;
  display: flex;
  box-shadow: 0 4px 12px rgba(107, 114, 128, .3);
}

.step-prev-btn:hover {
  background: linear-gradient(135deg, #5b6471, #374151);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(107, 114, 128, .4);
}

.step-next-button-container {
  justify-content: flex-end;
  padding: 1.5rem 0 0;
  display: flex;
}

.step-next-btn {
  font-family: var(--font-dm-sans), sans-serif;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  border-radius: .75rem;
  align-items: center;
  gap: 8px;
  padding: .875rem 2rem;
  font-size: .9375rem;
  font-weight: 600;
  transition: all .2s;
  display: flex;
  box-shadow: 0 4px 12px rgba(59, 130, 246, .3);
}

.step-next-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, .4);
}

.make-video-btn {
  font-family: var(--font-dm-sans), sans-serif;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #9f70ff, #7732ff);
  border: none;
  border-radius: .75rem;
  padding: .875rem 2rem;
  font-size: .9375rem;
  font-weight: 600;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(159, 112, 255, .3);
}

.make-video-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(159, 112, 255, .4);
}

.music-settings-container {
  align-items: flex-start;
  gap: 2rem;
  min-height: 500px;
  margin-bottom: 2rem;
  display: flex;
}

.music-categories-section {
  flex-direction: column;
  flex: 0 0 120px;
  gap: .75rem;
  display: flex;
}

.category-btn {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  text-align: center;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 1.5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.category-btn:hover {
  color: #374151;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.category-btn.active {
  color: #fff;
  background: #1f2937;
  border-color: #1f2937;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(31, 41, 55, .3);
}

.music-tracks-section {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.music-loading, .music-unavailable {
  justify-content: center;
  align-items: center;
  min-height: 200px;
  display: flex;
}

.music-loading p, .music-unavailable p {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  margin: 0;
  font-size: 1.125rem;
}

.music-tracks-list {
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
  display: flex;
}

.music-track-item {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  background: rgba(255, 255, 255, .9);
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 1rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  transition: all .3s;
  display: flex;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.music-track-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.music-track-item.selected {
  background: rgba(59, 130, 246, .15);
  border-color: #3b82f6;
  box-shadow: 0 4px 16px rgba(59, 130, 246, .2);
}

.music-track-album {
  background: #f3f4f6;
  border-radius: 50%;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  overflow: hidden;
}

.music-track-album img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.music-track-details {
  flex-direction: column;
  flex: 1;
  gap: .25rem;
  display: flex;
}

.music-track-title {
  font-family: var(--font-dm-sans), sans-serif;
  color: #111827;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.music-track-artist {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  margin: 0;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.3;
}

.music-play-btn {
  color: #fff;
  cursor: pointer;
  background: #1f2937;
  border: none;
  border-radius: 50%;
  flex: 0 0 48px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.125rem;
  transition: all .3s;
  display: flex;
  box-shadow: 0 2px 8px rgba(31, 41, 55, .3);
}

.music-play-btn:hover {
  background: #374151;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(31, 41, 55, .4);
}

.music-bottom-section {
  border-top: 1px solid rgba(229, 231, 235, .3);
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  display: flex;
}

.music-notice {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  flex: 1;
  margin: 0;
  font-size: .875rem;
}

@media (max-width: 1024px) {
  .music-settings-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .music-categories-section {
    flex-flow: wrap;
    flex: 1;
    gap: .5rem;
  }

  .category-btn {
    flex: none;
    min-width: -moz-fit-content;
    min-width: fit-content;
  }
}

@media (max-width: 768px) {
  .category-btn {
    padding: .625rem .875rem;
    font-size: .8125rem;
  }

  .music-track-item {
    gap: .75rem;
    padding: .875rem 1rem;
  }

  .music-track-album {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
  }

  .music-play-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .music-track-title {
    font-size: 1rem;
  }

  .music-track-artist {
    font-size: .875rem;
  }

  .music-bottom-section, .step-navigation-container {
    text-align: center;
    flex-direction: column;
    gap: 1rem;
  }

  .step-prev-btn, .step-next-btn, .make-video-btn {
    justify-content: center;
    width: 100%;
    padding: .75rem 1.5rem;
    font-size: .875rem;
  }
}

.video-options-container {
  max-width: 1700px;
  margin: 0 auto;
}

.video-ending-section {
  margin-bottom: 3rem;
}

.video-ending-title {
  font-family: var(--font-poppins), sans-serif;
  color: #000;
  text-align: left;
  margin-bottom: 16px;
  margin-left: 0;
  font-size: 22px;
  font-weight: bold;
}

.video-ending-cards-container {
  flex-direction: row;
  align-items: stretch;
  gap: 32px;
  padding: 0;
  display: flex;
}

.video-ending-upload-card {
  text-align: center;
  background-color: #fff;
  border-radius: 7px;
  flex: 1;
  min-width: 300px;
  padding: 24px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, .08);
}

.video-ending-card-header {
  color: #111;
  text-align: left;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.video-ending-card-description {
  color: #666;
  text-align: left;
  margin-bottom: 16px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.video-ending-drop-zone {
  cursor: pointer;
  background-color: #f6f6fe;
  border: 2px dashed #d3d3d3;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 32px 20px;
  transition: all .2s;
}

.video-ending-drop-zone:hover {
  background-color: #f0f8ff;
  border-color: #2d8cff;
}

.video-ending-cloud-icon {
  color: #2d8cff;
  margin-bottom: 12px;
  font-size: 28px;
}

.video-ending-drop-text {
  color: #333;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: bold;
}

.video-ending-format-text {
  color: #888;
  margin: 0 0 16px;
  font-size: 12px;
}

.video-ending-browse-btn {
  color: #000;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 13px;
  transition: all .2s;
}

.video-ending-browse-btn:hover {
  background-color: #f5f5f5;
}

.video-ending-browse-btn:focus {
  outline: 2px solid #2d8cff;
}

.video-ending-browse-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.video-ending-file-input {
  display: none;
}

.uploaded-image-container {
  margin-bottom: 16px;
}

.uploaded-image-wrapper {
  background-color: #f6f6fe;
  border: 2px solid #d3d3d3;
  border-radius: 12px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.uploaded-image-wrapper:hover {
  border-color: #2d8cff;
}

.uploaded-image {
  object-fit: cover;
  width: 100%;
  height: 250px;
  display: block;
}

.video-ending-upload-card:nth-child(2) .uploaded-image {
  aspect-ratio: 9 / 16;
  object-fit: cover;
  height: auto;
  max-height: 400px;
}

.video-ending-upload-card:nth-child(2) .uploaded-image-wrapper {
  max-width: 200px;
  margin: 0 auto;
}

.uploaded-image-overlay {
  opacity: 0;
  background: rgba(0, 0, 0, .6);
  justify-content: center;
  align-items: center;
  transition: opacity .2s;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.uploaded-image-wrapper:hover .uploaded-image-overlay {
  opacity: 1;
}

.change-image-btn {
  color: #333;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .9);
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.change-image-btn:hover {
  background-color: #fff;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.change-image-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.change-image-btn svg {
  font-size: 16px;
}

.video-ending-card-footer {
  justify-content: center;
  gap: 14px;
  display: flex;
}

.video-ending-footer-btn {
  color: #333;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  transition: background-color .2s;
}

.video-ending-footer-btn:hover {
  background-color: #f8f8f8;
}

@media (max-width: 768px) {
  .video-ending-cards-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .video-ending-upload-card {
    width: 100%;
    min-width: auto;
    max-width: 400px;
  }

  .uploaded-image {
    height: 160px;
  }

  .video-ending-upload-card:nth-child(2) .uploaded-image {
    aspect-ratio: 9 / 16;
    height: auto;
    max-height: 280px;
  }

  .video-ending-upload-card:nth-child(2) .uploaded-image-wrapper {
    max-width: 200px;
    margin: 0 auto;
  }

  .change-image-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

.expansion-section {
  margin-top: 24px;
  overflow: hidden;
}

.expansion-content {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
  border: 1px solid rgba(147, 197, 253, .2);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08), 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px rgba(255, 255, 255, .6);
}

.expansion-content:before {
  content: "";
  z-index: -1;
  background: linear-gradient(145deg, rgba(147, 197, 253, .3) 0%, rgba(196, 181, 253, .2) 25%, rgba(167, 243, 208, .2) 50%, rgba(252, 211, 77, .2) 75%, rgba(251, 146, 60, .3) 100%);
  border-radius: 16px;
  padding: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(#fff 0, #fff 0), linear-gradient(#fff 0, #fff 0);
  mask-image: linear-gradient(#fff 0, #fff 0), linear-gradient(#fff 0, #fff 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.expansion-title {
  font-family: var(--font-poppins), -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #db2777 100%);
  -webkit-text-fill-color: transparent;
  text-align: center;
  letter-spacing: -.025em;
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 28px;
  font-size: 20px;
  font-weight: 700;
}

.customization-row {
  background: rgba(255, 255, 255, .4);
  border: 1px solid rgba(147, 197, 253, .15);
  border-radius: 12px;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding: 20px;
  transition: all .3s;
  display: flex;
}

.customization-row:hover {
  background: rgba(255, 255, 255, .6);
  border-color: rgba(147, 197, 253, .3);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, .1);
}

.customization-label {
  font-family: var(--font-poppins), sans-serif;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.color-picker-container {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  display: flex;
}

.color-picker {
  cursor: pointer;
  border: 2px solid rgba(147, 197, 253, .3);
  border-radius: 12px;
  width: 50px;
  height: 50px;
  padding: 0;
  transition: all .3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 0 rgba(59, 130, 246, .4);
}

.color-picker:hover {
  border-color: rgba(59, 130, 246, .6);
  transform: translateY(-2px)scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15), 0 0 20px rgba(59, 130, 246, .3);
}

.color-picker::-webkit-color-swatch-wrapper {
  border-radius: 10px;
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
}

.color-value {
  color: #374151;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid rgba(147, 197, 253, .2);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: JetBrains Mono, Fira Code, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .06);
}

.color-value:hover {
  background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
  border-color: rgba(59, 130, 246, .3);
}

.color-palette {
  background: rgba(248, 250, 252, .8);
  border: 1px solid rgba(147, 197, 253, .15);
  border-radius: 12px;
  grid-template-columns: repeat(10, 1fr);
  gap: 12px;
  max-width: 500px;
  padding: 16px;
  display: grid;
}

.color-swatch {
  cursor: pointer;
  border: 2px solid rgba(147, 197, 253, .2);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  transition: all .2s;
}

.color-swatch:hover {
  border-color: rgba(59, 130, 246, .6);
  transform: scale(1.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 15px rgba(59, 130, 246, .4);
}

.color-swatch.active {
  border-color: #3b82f6;
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .3), 0 4px 20px rgba(0, 0, 0, .1), 0 0 20px rgba(59, 130, 246, .5);
}

.text-size-select {
  color: #374151;
  cursor: pointer;
  background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
  border: 2px solid rgba(147, 197, 253, .3);
  border-radius: 10px;
  max-width: 140px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.text-size-select:hover {
  border-color: rgba(59, 130, 246, .5);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, .15);
}

.text-size-select:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2), 0 4px 20px rgba(59, 130, 246, .25);
}

.text-input {
  color: #374151;
  background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
  border: 2px solid rgba(147, 197, 253, .3);
  border-radius: 10px;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  transition: all .3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.text-input:hover {
  border-color: rgba(59, 130, 246, .5);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, .15);
}

.text-input:focus {
  background: linear-gradient(145deg, #fff 0%, #fafbff 100%);
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2), 0 4px 20px rgba(59, 130, 246, .25);
}

.text-input::placeholder {
  color: #94a3b8;
  font-style: italic;
}

.expansion-actions {
  background: linear-gradient(90deg, rgba(147, 197, 253, .1) 0%, rgba(196, 181, 253, .1) 50%, rgba(147, 197, 253, .1) 100%);
  border-top: 1px solid rgba(147, 197, 253, .2);
  border-radius: 12px;
  justify-content: center;
  margin-top: 32px;
  padding: 24px;
  display: flex;
}

.save-btn {
  color: #fff;
  cursor: pointer;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
  border: none;
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 13px;
  font-weight: 600;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(59, 130, 246, .3), 0 0 20px rgba(139, 92, 246, .2);
}

.save-btn:before {
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .4) 50%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  height: 100%;
  transition: left .6s;
  position: absolute;
  top: 0;
  left: -100%;
}

.save-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #db2777 100%);
  transform: translateY(-2px)scale(1.02);
  box-shadow: 0 6px 24px rgba(59, 130, 246, .4), 0 0 30px rgba(139, 92, 246, .3);
}

.save-btn:hover:before {
  left: 100%;
}

.save-btn:active {
  transform: translateY(-1px)scale(1);
}

@media (max-width: 768px) {
  .expansion-content {
    border-radius: 12px;
    padding: 20px;
  }

  .expansion-title {
    margin-bottom: 20px;
    font-size: 18px;
  }

  .customization-row {
    margin-bottom: 18px;
    padding: 16px;
  }

  .color-palette {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .color-swatch {
    width: 35px;
    height: 35px;
  }

  .color-picker {
    width: 45px;
    height: 45px;
  }

  .color-picker-container {
    gap: 12px;
  }

  .color-value {
    padding: 6px 10px;
    font-size: 13px;
  }

  .text-size-select {
    max-width: 120px;
    padding: 10px 14px;
    font-size: 13px;
  }

  .text-input {
    padding: 12px 14px;
    font-size: 14px;
  }

  .save-btn {
    padding: 12px 28px;
    font-size: 12px;
  }

  .expansion-actions {
    margin-top: 20px;
    padding: 20px 16px;
  }
}

.notification-toast {
  z-index: 9999;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  min-width: 320px;
  max-width: 500px;
  position: fixed;
  top: 80px;
  right: 24px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

.notification-toast.success {
  background: linear-gradient(135deg, #857eff, #322e81);
  border: 1px solid rgba(16, 185, 129, .3);
}

.notification-toast.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: 1px solid rgba(239, 68, 68, .3);
}

.notification-content {
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  display: flex;
}

.notification-icon {
  color: #fff;
  flex-shrink: 0;
  font-size: 20px;
}

.notification-message {
  color: #fff;
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.notification-close {
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, .2);
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  padding: 6px;
  transition: background-color .2s;
  display: flex;
}

.notification-close:hover {
  background: rgba(255, 255, 255, .3);
}

.notification-close:active {
  transform: scale(.95);
}

@media (max-width: 768px) {
  .notification-toast {
    min-width: auto;
    max-width: none;
    top: 70px;
    left: 16px;
    right: 16px;
  }
}

.loading-screen {
  z-index: 9999;
  background: #fff;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.loading-gradient-bg {
  opacity: 1;
  z-index: 1;
  background: url("/gredient.png") center / contain no-repeat;
  width: 600px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate3d(0, 0, 1, 90deg);
}

@keyframes rotateGradient {
  0% {
    transform: translate(-50%, -50%)rotate(0);
  }

  100% {
    transform: translate(-50%, -50%)rotate(360deg);
  }
}

.loading-content {
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  display: flex;
  position: relative;
}

.loading-logo {
  animation: 3s ease-in-out infinite logoFloat;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.loading-text {
  font-family: var(--font-poppins), sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  letter-spacing: .5px;
  font-size: 20px;
  font-weight: 500;
  animation: 2s ease-in-out infinite textPulse;
}

@keyframes textPulse {
  0%, 100% {
    opacity: .8;
  }

  50% {
    opacity: 1;
  }
}

.no-user-screen {
  background: #1a1a2e;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
}

.no-user-text {
  font-family: var(--font-poppins), sans-serif;
  color: #fff;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  padding: 24px 32px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}

@media (max-width: 768px) {
  .loading-gradient-bg {
    width: 400px;
    height: 400px;
  }

  .loading-logo {
    width: 60px;
    height: 60px;
    padding: 12px;
  }

  .loading-text {
    padding: 0 20px;
    font-size: 18px;
  }

  .no-user-text {
    margin: 20px;
    padding: 20px 24px;
    font-size: 16px;
  }
}

.profile-content-area {
  background: rgba(255, 255, 255, .5);
  border-radius: 12px;
  max-width: 100%;
  padding: 28px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.profile-main-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 1200px;
  padding: 28px;
}

.profile-header-section {
  margin-bottom: 16px;
}

.profile-tabs-container {
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  display: flex;
}

.profile-tabs-row {
  align-items: center;
  display: flex;
}

.profile-tabs {
  gap: 24px;
  display: flex;
}

.profile-tab {
  letter-spacing: .1px;
  color: #898989;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  transition: color .2s;
  position: relative;
}

.profile-tab.active {
  color: #000;
}

.profile-tab.active:after {
  content: "";
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-2));
  width: 36px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.profile-header-controls {
  align-items: center;
  gap: 12px;
  display: flex;
}

.profile-info-btn-container {
  display: inline-block;
  position: relative;
}

.profile-info-btn {
  border: 1px solid var(--divider);
  background: var(--card-bg);
  color: #475569;
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  transition: all .2s;
  display: flex;
  position: relative;
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.profile-info-btn:hover {
  border-color: var(--accent-purple);
  background: rgba(95, 70, 255, .05);
}

.profile-info-tooltip {
  z-index: 1000;
  color: #1e293b;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  min-width: 280px;
  max-width: 320px;
  padding: 0;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.tooltip-content {
  padding: 16px 18px;
}

.tooltip-text {
  color: var(--primary-text);
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.tooltip-arrow {
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .08);
  border-left: 1px solid rgba(0, 0, 0, .08);
  width: 12px;
  height: 12px;
  position: absolute;
  top: -6px;
  right: 18px;
  transform: rotate(45deg);
}

.profile-credits-btn {
  color: #fff;
  cursor: pointer;
  background: #4f46e5;
  border: none;
  border-radius: 20px;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.profile-credits-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.profile-title-section {
  margin-top: 16px;
  margin-bottom: 18px;
}

.profile-main-title {
  color: #000;
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.profile-subtitle {
  color: #898989;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.profile-divider {
  background: #e2e2e2;
  height: 1px;
  margin: 18px 0;
}

.profile-row-divider {
  background: #e2e2e2;
  height: 1px;
  margin: 20px 0;
}

.profile-form-content {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.profile-form-row {
  column-gap: var(--gap-horizontal, 18px);
  grid-template-columns: 1fr 2fr;
  align-items: center;
  min-height: 60px;
  display: grid;
}

.profile-section-label {
  color: #2b3440;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.profile-form-inputs {
  gap: var(--gap-horizontal, 18px);
  grid-template-columns: 7fr 4fr;
  align-items: center;
  display: grid;
}

.profile-input-group {
  align-items: center;
  display: flex;
  position: relative;
}

.profile-input-group.large {
  grid-column: 1;
}

.profile-input-group.small {
  grid-column: 2;
}

.profile-input {
  width: 100%;
  height: var(--input-height, 44px);
  background: var(--input-bg);
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  outline: none;
  padding: 10px 18px;
  font-size: 15px;
  line-height: 1;
  transition: all .2s;
}

.profile-input::placeholder {
  color: var(--muted-text);
  opacity: 1;
}

.profile-input:focus {
  border: 2px solid rgba(95, 70, 255, .95);
  padding: 9px 17px;
  box-shadow: 0 0 0 4px rgba(95, 70, 255, .08);
}

.profile-input-icon {
  border: 1px solid var(--divider);
  cursor: pointer;
  width: 22px;
  height: 22px;
  color: var(--muted-text);
  background: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  display: flex;
  position: absolute;
  right: 12px;
}

.profile-logo-section {
  align-items: center;
  gap: 12px;
  display: flex;
}

.profile-logo-preview {
  border-radius: 100%;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.profile-logo-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.profile-logo-actions {
  gap: 10px;
  display: flex;
}

.profile-edit-btn {
  background: var(--dark-pill, #333);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 20px;
  height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: all .2s;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.profile-edit-btn:hover {
  background: #444;
  transform: translateY(-1px);
}

.profile-delete-btn {
  background: var(--danger, #dc3545);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 20px;
  height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: all .2s;
}

.profile-delete-btn:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.profile-personal-grid {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.profile-personal-row {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.profile-personal-row .profile-input-group {
  width: 100%;
}

.profile-save-section {
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 18px;
  display: flex;
}

.profile-section-save {
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: .5rem;
  display: flex;
}

.profile-section-save-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  min-width: 3.95rem;
  min-height: 2.25rem;
  font-size: .875rem;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 4px rgba(16, 185, 129, .2);
}

.profile-section-save-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, .3);
}

.profile-section-save-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(16, 185, 129, .2);
}

.profile-section-save-btn:disabled {
  cursor: not-allowed;
  box-shadow: none;
  background: #9ca3af;
  transform: none;
}

.profile-save-btn {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-2));
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 22px;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  transition: all .2s;
  display: flex;
}

.profile-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(95, 70, 255, .3);
}

.profile-save-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.profile-form-save-container {
  border-top: 1px solid #e2e8f0;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 2rem;
  display: flex;
}

.profile-form-save-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1.25rem;
  font-size: .8125rem;
  font-weight: 500;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 8px rgba(59, 130, 246, .25);
}

.profile-form-save-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, .4);
}

.profile-form-save-btn:active {
  transform: translateY(-1px);
}

.profile-form-save-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 768px) {
  .profile-content-area, .profile-main-card {
    padding: 16px;
  }

  .profile-form-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 16px;
  }

  .profile-form-inputs {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .profile-input-group.large, .profile-input-group.small {
    grid-column: unset;
  }

  .profile-personal-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .profile-tabs-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .profile-header-controls {
    align-self: flex-end;
  }

  .profile-logo-section {
    text-align: center;
    flex-direction: column;
    align-items: center;
  }

  .profile-save-section, .profile-section-save {
    justify-content: center;
  }

  .profile-section-save-btn {
    width: 2rem;
    height: 1rem;
    font-size: .8125rem;
  }

  .profile-form-save-btn {
    padding: .4375rem 1rem;
    font-size: .75rem;
  }

  .profile-info-tooltip {
    min-width: 240px;
    max-width: 280px;
    right: -10px;
  }

  .tooltip-arrow {
    right: 28px;
  }
}

@media (max-width: 480px) {
  .profile-main-title {
    font-size: 18px;
  }

  .profile-input {
    font-size: 14px;
  }

  .profile-tabs {
    gap: 16px;
  }

  .profile-tab {
    font-size: 13px;
  }

  .profile-section-save-btn {
    width: 1.875rem;
    height: 1.175rem;
    font-size: .75rem;
  }

  .profile-info-tooltip {
    min-width: auto;
    max-width: none;
    left: -20px;
    right: -20px;
  }

  .tooltip-content {
    padding: 14px 16px;
  }

  .tooltip-text {
    font-size: 12px;
  }

  .tooltip-arrow {
    right: 38px;
  }
}

.subscription-content-area {
  max-width: 100%;
  padding: 28px;
}

.subscription-header {
  text-align: center;
  margin-bottom: 48px;
}

.subscription-hero {
  max-width: 600px;
  margin: 0 auto;
}

.subscription-title {
  color: #1e293b;
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 16px;
  font-size: 32px;
  font-weight: 700;
}

.subscription-subtitle {
  color: #1e293b;
  margin-bottom: 24px;
  font-size: 18px;
  line-height: 1.6;
}

.current-credits-display {
  background: rgba(95, 70, 255, .1);
  border: 1px solid rgba(95, 70, 255, .2);
  border-radius: 50px;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  display: inline-flex;
}

.credits-icon {
  color: var(--accent-purple);
  font-size: 16px;
}

.credits-count {
  color: #1e293b;
  font-weight: 600;
}

.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin-bottom: 64px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.pricing-card {
  background: var(--card-bg);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 20px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

.pricing-card:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 8px 32px rgba(95, 70, 255, .15);
}

.pricing-card.popular {
  border-color: var(--accent-purple);
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(95, 70, 255, .15);
}

.popular-badge {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-2));
  color: #fff;
  border-radius: 0 0 12px 12px;
  align-items: center;
  gap: 4px;
  padding: 8px 24px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.pricing-card-header {
  text-align: center;
  border-bottom: 1px solid var(--divider);
  padding: 40px 24px 24px;
}

.pricing-icon {
  color: #fff;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  font-size: 24px;
  display: flex;
}

.pricing-card-title {
  color: #1e293b;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
}

.pricing-card-price {
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
  display: flex;
}

.price-currency {
  color: #1e293b;
  font-size: 20px;
  font-weight: 500;
}

.price-amount {
  color: #1e293b;
  font-size: 48px;
  font-weight: 800;
}

.price-original {
  color: #7a7a7a;
  margin-left: 8px;
  font-size: 18px;
  text-decoration: line-through;
}

.credits-amount {
  color: #1e293b;
  background: rgba(95, 70, 255, .1);
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.pricing-card-features {
  padding: 24px;
}

.features-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-item {
  color: #1e293b;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  display: flex;
}

.feature-check {
  color: #10b981;
  flex-shrink: 0;
  font-size: 12px;
}

.pricing-card-footer {
  padding: 0 24px 32px;
}

.purchase-btn {
  cursor: pointer;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
  position: relative;
}

.purchase-btn.primary {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-2));
  color: #1e293b;
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.purchase-btn.secondary {
  background: var(--card-bg);
  color: #1e293b;
  border: 2px solid var(--divider);
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.purchase-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(95, 70, 255, .3);
}

.purchase-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: .8s linear infinite spin;
}

.subscription-features {
  text-align: center;
  border-top: 1px solid var(--divider);
  padding: 48px 0;
}

.features-section-title {
  color: var(--primary-text);
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: 700;
}

.features-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
}

.feature-card {
  text-align: center;
  padding: 24px;
}

.feature-icon {
  width: 64px;
  height: 64px;
  color: var(--accent-purple);
  background: rgba(95, 70, 255, .1);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
  font-size: 24px;
  display: flex;
}

.feature-card h3 {
  color: var(--primary-text);
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}

.feature-card p {
  color: var(--muted-text);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .subscription-content-area {
    padding: 16px;
  }

  .subscription-title {
    font-size: 24px;
  }

  .subscription-subtitle {
    font-size: 16px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-card.popular {
    transform: none;
  }

  .pricing-card-header {
    padding: 32px 20px 20px;
  }

  .price-amount {
    font-size: 36px;
  }

  .features-section-title {
    font-size: 22px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .subscription-header {
    margin-bottom: 32px;
  }

  .current-credits-display {
    padding: 10px 16px;
    font-size: 14px;
  }

  .pricing-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .pricing-card-title {
    font-size: 20px;
  }

  .price-amount {
    font-size: 32px;
  }
}

.subscription-content {
  padding: 0;
}

.credits-overview-section {
  margin-bottom: 32px;
}

.credits-overview-card {
  background: var(--card-bg);
  border: 1px solid var(--divider);
  border-radius: 16px;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  display: flex;
}

.credits-overview-header {
  align-items: center;
  gap: 16px;
  display: flex;
}

.credits-overview-icon {
  color: #4f46e5;
  background: rgba(95, 70, 255, .1);
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 20px;
  display: flex;
}

.credits-overview-content h3 {
  color: #1e293b;
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}

.credits-overview-content p {
  color: #475569;
  margin: 0;
  font-size: 14px;
}

.credits-overview-amount {
  text-align: center;
  background: rgba(95, 70, 255, .05);
  border: 1px solid rgba(95, 70, 255, .1);
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  display: flex;
}

.credits-number {
  color: #1e293b;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.credits-label {
  color: #475569;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
}

.get-more-credits-btn {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-2));
  color: #1e293b;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.get-more-credits-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(95, 70, 255, .3);
}

.purchase-history-section {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.purchase-history-header h3 {
  color: #1e293b;
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}

.purchase-history-header p {
  color: #475569;
  margin: 0;
  font-size: 14px;
}

.purchase-history-loading {
  color: #475569;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 40px;
  font-size: 14px;
  display: flex;
}

.purchase-history-list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.purchase-history-item {
  background: var(--card-bg);
  border: 1px solid var(--divider);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  transition: all .2s;
  display: flex;
}

.purchase-history-item:hover {
  border-color: rgba(95, 70, 255, .2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.purchase-item-main {
  flex: 1;
  align-items: center;
  gap: 16px;
  display: flex;
}

.purchase-item-icon {
  width: 40px;
  height: 40px;
  color: var(--accent-purple);
  background: rgba(95, 70, 255, .1);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  display: flex;
}

.purchase-item-details h4 {
  color: #1e293b;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.purchase-item-date {
  color: #475569;
  margin: 0;
  font-size: 13px;
}

.purchase-item-info {
  align-items: center;
  gap: 20px;
  display: flex;
}

.purchase-item-credits {
  text-align: right;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.purchase-credits-amount {
  color: #10b981;
  font-size: 16px;
  font-weight: 700;
}

.purchase-credits-label {
  color: #475569;
  margin-top: 2px;
  font-size: 12px;
}

.purchase-item-price {
  color: #1e293b;
  text-align: right;
  min-width: 60px;
  font-size: 16px;
  font-weight: 600;
}

.purchase-item-status {
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.purchase-item-status.completed {
  color: #10b981;
  background: rgba(16, 185, 129, .1);
}

.purchase-item-status.pending {
  color: #f97316;
  background: rgba(249, 115, 22, .1);
}

.purchase-item-status.failed {
  color: #ef4444;
  background: rgba(239, 68, 68, .1);
}

.no-purchase-history {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px 40px;
  display: flex;
}

.no-purchase-icon {
  color: #4f46e5;
  background: rgba(95, 70, 255, .1);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  font-size: 32px;
  display: flex;
}

.no-purchase-title {
  color: #1e293b;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.no-purchase-description {
  color: #475569;
  max-width: 400px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.get-credits-btn {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-2));
  color: #1e293b;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
  box-shadow: 0 4px 12px rgba(95, 70, 255, .3);
}

.get-credits-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(95, 70, 255, .3);
}

@media (max-width: 768px) {
  .credits-overview-card {
    padding: 20px;
  }

  .credits-overview-header {
    gap: 12px;
  }

  .credits-overview-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .credits-number {
    font-size: 36px;
  }

  .purchase-history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
  }

  .purchase-item-info {
    justify-content: space-between;
    width: 100%;
  }

  .no-purchase-history {
    padding: 40px 20px;
  }

  .no-purchase-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .no-purchase-title {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .purchase-item-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .purchase-item-credits, .purchase-item-price, .purchase-item-status {
    text-align: left;
    justify-content: flex-start;
    align-self: stretch;
  }

  .credits-overview-amount {
    padding: 16px;
  }

  .credits-number {
    font-size: 32px;
  }
}

.tutorial-content-area {
  max-width: 100%;
  padding: 28px;
}

.tutorial-header {
  text-align: center;
  max-width: 800px;
  margin-bottom: 48px;
  margin-left: auto;
  margin-right: auto;
}

.tutorial-hero {
  padding: 0 20px;
}

.tutorial-title {
  color: #1e293b;
  margin-bottom: 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.tutorial-subtitle {
  color: #475569;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.tutorial-sections {
  flex-direction: column;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
}

.tutorial-section {
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, .04);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.tutorial-section-header {
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  display: flex;
}

.tutorial-icon {
  color: #4f46e5;
  background: rgba(79, 70, 229, .1);
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 20px;
  display: flex;
}

.tutorial-section-title {
  color: #1e293b;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.tutorial-content {
  line-height: 1.7;
}

.tutorial-text {
  color: #475569;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.7;
}

.tutorial-highlight {
  color: #1e293b;
  background: rgba(95, 70, 255, .08);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 600;
}

.tutorial-list {
  margin: 20px 0;
  padding-left: 20px;
}

.tutorial-list li {
  color: #475569;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.6;
}

.tutorial-tip {
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .2);
  border-radius: 12px;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0;
  padding: 16px 20px;
  display: flex;
}

.tip-icon {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 18px;
}

.tip-text {
  color: #1e293b;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.tutorial-credit-info {
  background: rgba(79, 70, 229, .05);
  border: 1px solid rgba(79, 70, 229, .1);
  border-radius: 12px;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
  padding: 20px;
  display: flex;
}

.credit-info-item {
  align-items: center;
  gap: 16px;
  display: flex;
}

.credit-icon {
  color: #4f46e5;
  flex-shrink: 0;
  font-size: 18px;
}

.credit-title {
  color: #1e293b;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.credit-description {
  color: #475569;
  margin: 0;
  font-size: 14px;
}

.tutorial-steps {
  flex-direction: column;
  gap: 24px;
  margin: 24px 0;
  display: flex;
}

.tutorial-step {
  background: rgba(0, 0, 0, .02);
  border-left: 4px solid #4f46e5;
  border-radius: 12px;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  display: flex;
}

.step-number {
  color: #fff;
  background: #4f46e5;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.step-content h4 {
  color: #1e293b;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.step-description {
  color: #475569;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.tutorial-tips-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 24px 0;
  display: grid;
}

.tip-card {
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: 24px;
  transition: all .2s;
}

.tip-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.tip-card-icon {
  color: #4f46e5;
  margin-bottom: 16px;
  font-size: 24px;
}

.tip-card-title {
  color: #1e293b;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.tip-card-text {
  color: #475569;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.tutorial-action-btn {
  cursor: pointer;
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  margin: 8px 8px 8px 0;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.tutorial-action-btn.primary {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-2));
  color: #fff;
}

.tutorial-action-btn.secondary {
  color: #1e293b;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, .1);
}

.tutorial-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(95, 70, 255, .3);
}

.tutorial-action-btn.secondary:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

.help-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  display: flex;
}

@media (max-width: 768px) {
  .tutorial-content-area {
    padding: 16px;
  }

  .tutorial-title {
    font-size: 28px;
  }

  .tutorial-subtitle {
    font-size: 16px;
  }

  .tutorial-section {
    padding: 24px;
  }

  .tutorial-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .tutorial-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .tutorial-section-title {
    font-size: 20px;
  }

  .tutorial-step {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .step-number {
    align-self: flex-start;
  }

  .tutorial-tips-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-credit-info {
    padding: 16px;
  }

  .credit-info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .tutorial-header {
    margin-bottom: 32px;
  }

  .tutorial-title {
    font-size: 24px;
  }

  .tutorial-subtitle {
    font-size: 15px;
  }

  .tutorial-section {
    padding: 20px;
  }

  .tutorial-text {
    font-size: 15px;
  }

  .tutorial-section-title {
    font-size: 18px;
  }

  .help-actions {
    flex-direction: column;
  }

  .tutorial-action-btn {
    justify-content: center;
    width: 100%;
  }
}

.success-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  display: flex;
}

.success-container {
  text-align: center;
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 500px;
  padding: 48px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
}

.success-icon {
  color: #10b981;
  margin-bottom: 24px;
  font-size: 64px;
}

.credits-display {
  background: rgba(95, 70, 255, .1);
  border: 1px solid rgba(95, 70, 255, .2);
  border-radius: 50px;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 16px 24px;
  display: inline-flex;
}

.success-actions {
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  display: flex;
}

.primary-btn {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-2));
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
}

.secondary-btn {
  color: var(--primary-text);
  border: 2px solid var(--divider);
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  transition: all .2s;
}

.secondary-btn:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

.session-info {
  border-top: 1px solid var(--divider);
  padding-top: 24px;
}

.session-id {
  color: var(--muted-text);
  font-family: monospace;
  font-size: 12px;
}

@media (max-width: 768px) {
  .success-container {
    padding: 32px 24px;
  }

  .success-title {
    font-size: 24px;
  }

  .success-icon {
    font-size: 48px;
  }

  .credits-text {
    font-size: 16px;
  }

  .success-actions {
    gap: 12px;
  }

  .primary-btn, .secondary-btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}

.ending-images-section {
  margin-bottom: 3rem;
}

.preview-cards-container {
  place-content: center;
  align-self: center;
  align-items: center;
  max-width: 1200px;
  max-height: 800px;
  display: grid;
}

.preview-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 1rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}

.preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

.preview-image {
  background: #f3f4f6;
  border-radius: .5rem;
  flex: 0 0 380px;
  width: 380px;
  height: 180px;
  overflow: hidden;
}

.preview-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.preview-content {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.preview-text h4 {
  font-family: var(--font-dm-sans), sans-serif;
  color: #111827;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.preview-edit-icon {
  color: #6b7280;
  font-size: 1.25rem;
}

.storage-notice {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-left: 4px solid #007bff;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  padding: 16px 20px;
  display: flex;
  box-shadow: 0 2px 8px rgba(0, 123, 255, .1);
}

.storage-notice .notice-icon {
  color: #007bff;
  flex-shrink: 0;
  font-size: 18px;
}

.storage-notice .notice-text {
  color: #495057;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .storage-notice {
    margin: 16px 0;
    padding: 12px 16px;
  }

  .storage-notice .notice-text {
    font-size: 13px;
  }
}

.upload-modal-backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 1000;
  background: rgba(0, 0, 0, .5);
  justify-content: center;
  align-items: center;
  padding: 1rem;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.upload-modal-container {
  background: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.upload-modal-header {
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem 0;
  display: flex;
}

.upload-modal-title {
  font-family: var(--font-dm-sans), sans-serif;
  color: #111827;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.upload-modal-close {
  color: #6b7280;
  cursor: pointer;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: all .2s;
  display: flex;
}

.upload-modal-close:hover {
  color: #374151;
  background: #e5e7eb;
}

.upload-modal-content {
  padding: 1.5rem 2rem 2rem;
}

.upload-type-title {
  font-family: var(--font-dm-sans), sans-serif;
  color: #111827;
  margin: 0 0 .5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.upload-instruction {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  margin: 0 0 2rem;
  font-size: .875rem;
  line-height: 1.5;
}

.upload-drop-zone {
  text-align: center;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 1rem;
  margin-bottom: 2rem;
  padding: 3rem 2rem;
  transition: all .3s;
}

.upload-drop-zone.drag-active {
  background: rgba(59, 130, 246, .05);
  border-color: #3b82f6;
}

.upload-drop-zone .upload-icon {
  color: #9ca3af;
  margin-bottom: 1rem;
  font-size: 3rem;
}

.upload-drop-text {
  font-family: var(--font-dm-sans), sans-serif;
  color: #374151;
  margin: 0 0 .5rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.upload-format-text {
  font-family: var(--font-dm-sans), sans-serif;
  color: #6b7280;
  margin: 0 0 2rem;
  font-size: .875rem;
}

.browse-files-button {
  font-family: var(--font-dm-sans), sans-serif;
  color: #fff;
  cursor: pointer;
  background: #3b82f6;
  border: none;
  border-radius: .5rem;
  padding: .75rem 2rem;
  font-size: .9375rem;
  font-weight: 500;
  transition: all .2s;
}

.browse-files-button:hover {
  background: #2563eb;
}

.browse-files-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.upload-modal-actions {
  justify-content: space-between;
  gap: 1rem;
  display: flex;
}

.upload-cancel-btn, .upload-done-btn {
  font-family: var(--font-dm-sans), sans-serif;
  cursor: pointer;
  border: none;
  border-radius: .5rem;
  flex: 1;
  padding: .75rem 2rem;
  font-size: .9375rem;
  font-weight: 500;
  transition: all .2s;
}

.upload-cancel-btn {
  color: #6b7280;
  background: #f3f4f6;
}

.upload-cancel-btn:hover {
  color: #374151;
  background: #e5e7eb;
}

.upload-done-btn {
  color: #fff;
  background: #10b981;
}

.upload-done-btn:hover {
  background: #059669;
}

@media (max-width: 1024px) {
  .video-options-container {
    padding: 1.5rem;
  }

  .upload-cards-container, .preview-cards-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .video-options-container {
    padding: 1rem;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .upload-card {
    padding: 1.5rem 1rem;
  }

  .upload-card .upload-icon {
    font-size: 2rem;
  }

  .preview-card {
    text-align: center;
    flex-direction: column;
    padding: 1.5rem 1rem;
  }

  .preview-image {
    flex: none;
    width: 100%;
    max-width: 200px;
    height: 120px;
  }

  .preview-content {
    justify-content: center;
    gap: 1rem;
    width: 100%;
  }

  .upload-modal-container {
    margin: 1rem;
  }

  .upload-modal-header, .upload-modal-content {
    padding: 1rem 1.5rem;
  }

  .upload-drop-zone {
    padding: 2rem 1rem;
  }

  .upload-modal-actions {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .modal-title:before {
    opacity: .5;
    filter: blur(8px);
    width: 400px;
    height: 200px;
  }

  .modal-content {
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
  }

  .modal-title {
    font-size: 1.5rem;
  }

  .modal-subtitle {
    margin-bottom: 2rem;
    font-size: .9rem;
  }

  .modal-upload-btn {
    min-width: 180px;
    padding: 1.5rem 1rem;
  }

  .modal-upload-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
}

.admin-login-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.admin-login-bg {
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.admin-login-gradient {
  background: linear-gradient(135deg, rgba(102, 126, 234, .8) 0%, rgba(118, 75, 162, .8) 100%);
  width: 100%;
  height: 100%;
}

.admin-login-content {
  z-index: 10;
  width: 100%;
  max-width: 480px;
  padding: 2rem;
  position: relative;
}

.admin-login-logo {
  text-align: center;
  margin-bottom: 3rem;
}

.admin-login-form-container {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
}

.admin-login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.admin-login-title {
  color: #1f2937;
  margin-bottom: .5rem;
  font-size: 2rem;
  font-weight: 700;
}

.admin-login-subtitle {
  color: #6b7280;
  font-size: 1rem;
}

.admin-login-form, .admin-form-group {
  margin-bottom: 1.5rem;
}

.admin-form-label {
  color: #374151;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 600;
  display: block;
}

.admin-input-wrapper {
  position: relative;
}

.admin-input-icon {
  color: #9ca3af;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}

.admin-form-input {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  font-size: 1rem;
  transition: all .3s;
}

.admin-form-input:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.admin-login-button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  border-radius: 12px;
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all .3s;
}

.admin-login-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, .3);
}

.admin-login-button:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.admin-error-message {
  color: #dc2626;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  font-size: .875rem;
}

.admin-demo-credentials {
  text-align: center;
  border-top: 1px solid #e5e7eb;
  margin-top: 2rem;
  padding-top: 2rem;
}

.admin-demo-title {
  color: #6b7280;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 600;
}

.admin-demo-text {
  color: #9ca3af;
  margin: .25rem 0;
  font-size: .8rem;
}

.admin-loading-container {
  background: #f9fafb;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.admin-loading-spinner {
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  animation: 1s linear infinite spin;
}

.admin-layout {
  background: #f9fafb;
  min-height: 100vh;
  display: flex;
}

.admin-sidebar {
  background: #fff;
  border-right: 1px solid #e5e7eb;
  flex-direction: column;
  width: 280px;
  padding: 2rem 0;
  display: flex;
}

.admin-sidebar-logo {
  align-items: center;
  gap: .75rem;
  margin-bottom: 3rem;
  padding: 0 2rem;
  display: flex;
}

.admin-sidebar-title {
  color: #1f2937;
  font-size: 1.125rem;
  font-weight: 700;
}

.admin-sidebar-nav {
  flex: 1;
  padding: 0 1rem;
}

.admin-sidebar-nav-item {
  color: #6b7280;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin-bottom: .5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  transition: all .3s;
  display: flex;
}

.admin-sidebar-nav-item:hover {
  color: #374151;
  background: #f3f4f6;
}

.admin-sidebar-nav-item.active {
  color: #1d4ed8;
  background: #dbeafe;
}

.admin-sidebar-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.admin-sidebar-nav-label {
  font-weight: 500;
}

.admin-sidebar-logout {
  color: #dc2626;
  cursor: pointer;
  background: #fee2e2;
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: .75rem;
  margin: 1rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

.admin-sidebar-logout:hover {
  background: #fecaca;
}

.admin-sidebar-logout svg {
  width: 1.25rem;
  height: 1.25rem;
}

.admin-main-content {
  flex: 1;
  padding: 2rem;
  overflow: hidden;
}

.admin-dashboard-content {
  max-width: 100%;
}

.admin-dashboard-header {
  margin-bottom: 2rem;
}

.admin-dashboard-title {
  color: #1f2937;
  margin-bottom: .5rem;
  font-size: 2rem;
  font-weight: 700;
}

.admin-dashboard-subtitle {
  color: #6b7280;
  font-size: 1rem;
}

.admin-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
  display: grid;
}

.admin-stat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  display: flex;
}

.admin-stat-icon {
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  display: flex;
}

.admin-stat-icon.users {
  color: #1d4ed8;
  background: #dbeafe;
}

.admin-stat-icon.music {
  color: #16a34a;
  background: #dcfce7;
}

.admin-stat-icon.credits {
  color: #d97706;
  background: #fef3c7;
}

.admin-stat-icon.videos {
  color: #c2410c;
  background: #fce7f3;
}

.admin-stat-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.admin-stat-content {
  flex: 1;
}

.admin-stat-number {
  color: #1f2937;
  margin-bottom: .25rem;
  font-size: 2rem;
  font-weight: 700;
}

.admin-stat-label {
  color: #6b7280;
  margin-bottom: .25rem;
  font-size: .875rem;
}

.admin-stat-detail {
  color: #9ca3af;
  font-size: .75rem;
}

.admin-recent-activity {
  margin-top: 3rem;
}

.admin-activity-list {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}

.admin-activity-item {
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  display: flex;
}

.admin-activity-item:last-child {
  border-bottom: none;
}

.admin-activity-icon {
  color: #3b82f6;
  background: #dbeafe;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.admin-activity-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.admin-activity-content {
  flex: 1;
}

.admin-activity-title {
  color: #1f2937;
  margin: 0 0 .25rem;
  font-size: .875rem;
  font-weight: 600;
}

.admin-activity-time {
  color: #6b7280;
  margin: 0;
  font-size: .75rem;
}

.admin-section-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  display: flex;
}

.admin-section-title {
  color: #1f2937;
  margin-bottom: .5rem;
  font-size: 1.875rem;
  font-weight: 700;
}

.admin-section-subtitle {
  color: #6b7280;
  font-size: 1rem;
}

.admin-primary-button {
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06d6a0 100%);
  border: none;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  padding: 1rem 2rem;
  font-size: .875rem;
  font-weight: 700;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(139, 92, 246, .25), inset 0 1px rgba(255, 255, 255, .2);
}

.admin-primary-button:before {
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .3), rgba(0, 0, 0, 0));
  width: 100%;
  height: 100%;
  transition: left .6s;
  position: absolute;
  top: 0;
  left: -100%;
}

.admin-primary-button:hover:not(:disabled):before {
  left: 100%;
}

.admin-primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 50%, #059669 100%);
  transform: translateY(-3px)scale(1.02);
  box-shadow: 0 16px 48px rgba(139, 92, 246, .4), 0 0 32px rgba(59, 130, 246, .3), inset 0 1px rgba(255, 255, 255, .3);
}

.admin-primary-button:active {
  transform: translateY(-1px)scale(.98);
}

.admin-primary-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.admin-primary-button svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
  width: 1.25rem;
  height: 1.25rem;
}

.admin-secondary-button {
  color: #8b5cf6;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: rgba(139, 92, 246, .08);
  border: 1.5px solid rgba(139, 92, 246, .2);
  border-radius: 16px;
  padding: 1rem 2rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.admin-secondary-button:hover {
  color: #7c3aed;
  background: rgba(139, 92, 246, .15);
  border-color: rgba(139, 92, 246, .4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, .2);
}

.admin-user-management, .admin-music-library, .admin-credit-pricing {
  max-width: 100%;
}

.admin-filters-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  display: flex;
}

.admin-search-box {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.admin-search-icon {
  color: #9ca3af;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}

.admin-search-input {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  width: 100%;
  padding: .75rem .75rem .75rem 3rem;
  font-size: .875rem;
  transition: all .3s;
}

.admin-search-input:focus {
  background: #fff;
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.admin-stats-summary {
  flex-wrap: wrap;
  gap: 2rem;
  display: flex;
}

.admin-stat-item {
  color: #6b7280;
  white-space: nowrap;
  font-size: .875rem;
}

.admin-user-content, .admin-music-content, .admin-pricing-content {
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  max-height: calc(100vh - 300px);
  display: grid;
}

.admin-users-list, .admin-music-grid, .admin-packages-grid {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}

.admin-user-details-panel, .admin-music-details-panel, .admin-package-details-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  height: -moz-fit-content;
  height: fit-content;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.admin-panel-header {
  border-bottom: 1px solid #e5e7eb;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  display: flex;
}

.admin-panel-header h3 {
  color: #1f2937;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.admin-close-button {
  color: #6b7280;
  cursor: pointer;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: all .2s;
  display: flex;
}

.admin-close-button:hover {
  color: #374151;
  background: #e5e7eb;
}

.admin-close-button svg {
  width: 1rem;
  height: 1rem;
}

.admin-panel-content {
  padding: 1.5rem;
}

.admin-view-details {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.admin-detail-item {
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  display: flex;
}

.admin-detail-item label {
  color: #6b7280;
  min-width: 100px;
  font-size: .875rem;
  font-weight: 600;
}

.admin-detail-item span {
  color: #1f2937;
  text-align: right;
  word-break: break-all;
  flex: 1;
  font-size: .875rem;
}

.admin-status-badge, .admin-credits-badge, .admin-plan-badge {
  text-transform: uppercase;
  border-radius: 9999px;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  display: inline-block;
}

.admin-status-badge.active, .admin-plan-badge.pro {
  color: #16a34a;
  background: #dcfce7;
}

.admin-status-badge.inactive {
  color: #dc2626;
  background: #fee2e2;
}

.admin-credits-badge {
  color: #d97706;
  background: #fef3c7;
}

.admin-plan-badge.free {
  color: #6b7280;
  background: #f3f4f6;
}

.admin-plan-badge.premium {
  color: #1d4ed8;
  background: #dbeafe;
}

.admin-action-button {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: all .2s;
  display: flex;
}

.admin-action-button:hover:not(:disabled) {
  background: #f3f4f6;
}

.admin-action-button.edit {
  color: #3b82f6;
  border-color: #3b82f6;
}

.admin-action-button.edit:hover {
  background: #dbeafe;
}

.admin-action-button.delete {
  color: #dc2626;
  border-color: #dc2626;
}

.admin-action-button.delete:hover {
  background: #fee2e2;
}

.admin-action-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.admin-action-button svg {
  width: 1rem;
  height: 1rem;
}

.admin-modal-overlay {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 50;
  background: rgba(0, 0, 0, .65);
  justify-content: center;
  align-items: center;
  padding: 1rem;
  animation: .3s ease-out modalFadeIn;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    -webkit-backdrop-filter: blur();
    backdrop-filter: blur();
  }

  to {
    opacity: 1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.admin-modal-content {
  background: #fff;
  border: 1px solid rgba(139, 92, 246, .1);
  border-radius: 24px;
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .05);
}

.admin-modal-content:before {
  content: "";
  background: linear-gradient(90deg, #8b5cf6, #3b82f6, #06d6a0, #ffd60a);
  border-radius: 24px 24px 0 0;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.admin-modal-header {
  background: linear-gradient(135deg, rgba(139, 92, 246, .03), rgba(59, 130, 246, .03));
  border-bottom: 1px solid rgba(139, 92, 246, .1);
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2rem 1.5rem;
  display: flex;
}

.admin-modal-header h2 {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  align-items: center;
  gap: .75rem;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  display: flex;
}

.admin-modal-header h2:before {
  content: "🎵";
  -webkit-text-fill-color: initial;
  font-size: 1.5rem;
}

.admin-upload-form, .admin-create-form {
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  display: flex;
}

.admin-form-row {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  display: grid;
}

.admin-file-input {
  cursor: pointer;
  text-align: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, .05), rgba(59, 130, 246, .05));
  border: 2px dashed rgba(139, 92, 246, .3);
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  min-height: 80px;
  padding: 1rem 1.5rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.admin-file-input:before {
  content: "";
  opacity: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(139, 92, 246, .1), rgba(0, 0, 0, 0));
  width: 200%;
  height: 200%;
  transition: all .6s;
  position: absolute;
  top: -50%;
  left: -50%;
  transform: rotate(45deg)translate(-50%, -50%);
}

.admin-file-input:hover:before {
  opacity: 1;
  animation: 2s infinite shimmer;
}

@keyframes shimmer {
  0% {
    transform: rotate(45deg)translate(-200%, -50%);
  }

  100% {
    transform: rotate(45deg)translate(200%, -50%);
  }
}

.admin-file-input:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, .08), rgba(59, 130, 246, .08));
  border-color: rgba(139, 92, 246, .6);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139, 92, 246, .15), inset 0 1px rgba(255, 255, 255, .1);
}

.admin-file-input[data-has-file="true"] {
  background: linear-gradient(135deg, rgba(6, 214, 160, .05), rgba(139, 92, 246, .05));
  border-color: rgba(6, 214, 160, .5);
  box-shadow: 0 4px 16px rgba(6, 214, 160, .2);
}

.admin-file-input-content {
  z-index: 2;
  pointer-events: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex !important;
}

.admin-upload-form .admin-file-input-icon {
  display: none !important;
}

.admin-file-input-text {
  text-align: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151 !important;
  display: block !important;
}

.admin-file-input-hint {
  text-align: center;
  margin: 0;
  font-size: .8rem;
  font-weight: 500;
  color: #6b7280 !important;
  display: block !important;
}

.admin-file-name {
  color: #059669;
  background: rgba(6, 214, 160, .1);
  border: 1px solid rgba(6, 214, 160, .2);
  border-radius: 20px;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  display: inline-flex;
}

.admin-file-name:before {
  content: "✓";
  color: #059669;
  font-weight: bold;
}

.admin-close-button {
  color: #8b5cf6;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(139, 92, 246, .1);
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: all .3s;
  display: flex;
  position: relative;
}

.admin-close-button:hover {
  background: rgba(139, 92, 246, .2);
  transform: rotate(90deg)scale(1.05);
  box-shadow: 0 4px 16px rgba(139, 92, 246, .3);
}

.admin-close-button svg {
  width: 20px;
  height: 20px;
  transition: transform .3s;
}

.admin-upload-form, .admin-create-form {
  background: linear-gradient(135deg, rgba(139, 92, 246, .01), rgba(59, 130, 246, .01));
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  display: flex;
}

.admin-form-group {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.admin-form-label {
  color: #374151;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  display: flex;
}

.admin-form-label:before {
  content: "";
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  border-radius: 50%;
  width: 4px;
  height: 4px;
}

.admin-form-input, .admin-form-select {
  color: #374151;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(249, 250, 251, .8);
  border: 1.5px solid rgba(139, 92, 246, .2);
  border-radius: 12px;
  padding: .875rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.admin-form-input:focus, .admin-form-select:focus {
  background: #fff;
  border-color: #8b5cf6;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .1), 0 4px 12px rgba(139, 92, 246, .15);
}

.admin-form-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.admin-modal-actions {
  border-top: 1px solid rgba(139, 92, 246, .1);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  display: flex;
}

.admin-modal-actions button {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.admin-form-checkbox {
  cursor: pointer;
  background: rgba(139, 92, 246, .05);
  border: 1px solid rgba(139, 92, 246, .1);
  border-radius: 12px;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  transition: all .3s;
  display: flex;
}

.admin-form-checkbox:hover {
  background: rgba(139, 92, 246, .08);
  border-color: rgba(139, 92, 246, .2);
}

.admin-form-checkbox input[type="checkbox"] {
  accent-color: #8b5cf6;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.admin-form-checkbox span {
  color: #374151;
  flex: 1;
  font-size: .875rem;
  font-weight: 500;
}

.admin-upload-progress {
  background: linear-gradient(135deg, rgba(139, 92, 246, .05), rgba(59, 130, 246, .05));
  border: 1px solid rgba(139, 92, 246, .2);
  border-radius: 16px;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  display: flex;
}

.admin-progress-bar {
  background: rgba(139, 92, 246, .1);
  border-radius: 4px;
  width: 100%;
  height: 8px;
  position: relative;
  overflow: hidden;
}

.admin-progress-fill {
  background: linear-gradient(90deg, #8b5cf6, #3b82f6, #06d6a0);
  border-radius: 4px;
  height: 100%;
  transition: width .3s;
  position: relative;
}

.admin-progress-fill:after {
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .3), rgba(0, 0, 0, 0));
  animation: 2s infinite progressShimmer;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@keyframes progressShimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.admin-upload-progress span {
  color: #8b5cf6;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  display: flex;
}

.admin-upload-progress span:before {
  content: "⚡";
  font-size: 1rem;
}

@media (max-width: 1200px) {
  .admin-user-content, .admin-music-content, .admin-pricing-content {
    grid-template-columns: 1fr;
  }

  .admin-user-details-panel, .admin-music-details-panel, .admin-package-details-panel {
    width: 100%;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }

  .admin-sidebar {
    border-bottom: 1px solid #e5e7eb;
    border-right: none;
    width: 100%;
    min-height: auto;
    padding: 1rem 0;
  }

  .admin-sidebar-nav {
    gap: .5rem;
    padding: 0 1rem;
    display: flex;
    overflow-x: auto;
  }

  .admin-sidebar-nav-item {
    white-space: nowrap;
    margin-bottom: 0;
  }

  .admin-main-content {
    padding: 1rem;
  }

  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

  .admin-filters-section {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .admin-search-box {
    max-width: none;
  }

  .admin-section-header {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-form-row {
    grid-template-columns: 1fr;
  }
}

.admin-users-container {
  margin-top: 2rem;
}

.admin-users-grid-modern {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  display: grid;
}

.admin-user-card-modern {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.5rem;
  transition: all .3s;
}

.admin-user-card-header {
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
}

.admin-user-avatar-modern {
  border-radius: 50%;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  overflow: hidden;
}

.admin-avatar-image-modern {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.admin-avatar-placeholder-modern {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.admin-user-info-modern {
  flex: 1;
  min-width: 0;
}

.admin-user-stats {
  background: #f9fafb;
  border-radius: 12px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  display: grid;
}

.admin-stat-item-modern {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.admin-user-indicators {
  border-bottom: 1px solid #f3f4f6;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  display: flex;
}

.admin-user-card-actions {
  gap: .75rem;
  display: flex;
}

.admin-user-details-full {
  max-width: 100%;
}

.admin-user-profile {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}

.admin-profile-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  display: flex;
}

.admin-profile-avatar {
  border: 4px solid #fff;
  border-radius: 50%;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.admin-profile-avatar-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.admin-profile-avatar-placeholder {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.admin-profile-info {
  flex: 1;
  min-width: 0;
}

.admin-profile-actions {
  flex-shrink: 0;
  gap: 1rem;
  display: flex;
}

.admin-details-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  display: grid;
}

.admin-details-section {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1.5rem;
}

.admin-details-list {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.admin-detail-row {
  border-bottom: 1px solid #f3f4f6;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: .5rem 0;
  display: flex;
}

.admin-detail-row:last-child {
  border-bottom: none;
}

.admin-detail-row span:first-child {
  flex-shrink: 0;
  min-width: 120px;
}

.admin-detail-row span:last-child {
  text-align: right;
  word-break: break-word;
  flex: 1;
}

@media (max-width: 768px) {
  .admin-users-grid-modern {
    grid-template-columns: 1fr;
  }

  .admin-user-card-modern {
    padding: 1rem;
  }

  .admin-user-stats {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .admin-profile-header {
    text-align: center;
    flex-direction: column;
    gap: 1rem;
  }

  .admin-profile-actions {
    flex-direction: column;
    width: 100%;
  }

  .admin-details-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .admin-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .admin-detail-row span:last-child {
    text-align: left;
  }
}

.admin-form-input::placeholder, .admin-search-input::placeholder, .admin-file-input::placeholder {
  color: #787486 !important;
}

.profile-logo-placeholder {
  color: #a0aec0;
  text-align: center;
  background-color: #f8fafc;
  border: 2px dashed #cbd5e0;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  font-size: .875rem;
  transition: all .2s;
  display: flex;
}

.profile-logo-placeholder:hover {
  color: #6b7280;
  border-color: #9ca3af;
}

.profile-logo-placeholder svg {
  margin-bottom: .5rem;
  font-size: 2rem;
}

.video-processing-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  min-height: 60vh;
  padding: 2rem;
  display: flex;
}

.processing-status {
  text-align: center;
  margin-bottom: 2rem;
}

.status-icon {
  margin-bottom: 1rem;
  font-size: 4rem;
  animation: 2s infinite pulse;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.status-message {
  color: #151d48;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.time-remaining {
  color: #787486;
  font-size: 1rem;
}

.progress-container {
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.progress-bar {
  background-color: #e2e8f0;
  border-radius: 10px;
  width: 100%;
  height: 20px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  height: 100%;
  transition: width .3s;
}

.progress-text {
  color: #151d48;
  font-weight: 600;
}

.error-message {
  text-align: center;
  color: #dc2626;
  background-color: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 1rem;
}

.retry-button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  margin-top: 1rem;
  padding: .5rem 1rem;
  font-weight: 600;
  transition: transform .2s;
}

.retry-button:hover {
  transform: translateY(-2px);
}

.processing-info {
  background: #f8fafc;
  border-radius: 12px;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
  padding: 1.5rem;
  display: flex;
}

.info-item {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.info-label {
  color: #151d48;
  font-weight: 600;
}

.info-value {
  color: #787486;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: .25rem .5rem;
  font-family: monospace;
}

.completed-videos-container {
  flex-direction: column;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
}

.final-videos-section {
  flex-direction: column;
  gap: 1.5rem;
  display: flex;
}

.section-title {
  color: #151d48;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
}

.section-icon {
  color: #667eea;
}

.success-icon {
  color: #10b981;
  margin-right: .5rem;
}

.final-videos-grid {
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
}

.final-video-card {
  background: linear-gradient(145deg, #fff, #f8f9ff);
  border: 1px solid rgba(21, 29, 72, .05);
  border-radius: 16px;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  box-shadow: 0 8px 32px rgba(21, 29, 72, .1);
}

.final-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(21, 29, 72, .15);
}

.video-wrapper {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.video-wrapper-portrait {
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  width: 70%;
  max-height: 75%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.final-video-preview {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

.video-card-content {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.video-title {
  color: #151d48;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  display: flex;
}

.video-title svg {
  color: #667eea;
}

.video-subtitle {
  color: #787486;
  margin: 0;
  font-size: .875rem;
}

.download-button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  min-width: 120px;
  padding: .75rem 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  transition: transform .2s, box-shadow .2s;
  display: flex;
}

.download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, .4);
}

.placeholder-card {
  z-index: 1;
  background: linear-gradient(145deg, #f5f5f5, #eee);
  border: 2px dashed #d1d5db;
  justify-content: center;
  align-items: center;
  position: relative;
  animation: none !important;
  transform: none !important;
}

.placeholder-card:hover {
  animation: none !important;
  transform: none !important;
}

.placeholder-content {
  text-align: center;
  color: #9ca3af;
}

.placeholder-content .video-title {
  color: #9ca3af;
}

.section-divider {
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  display: flex;
}

.divider-line {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), #d1d5db, rgba(0, 0, 0, 0));
  flex: 1;
  height: 1px;
}

.divider-text {
  color: #787486;
  white-space: nowrap;
  background: #fff;
  padding: 0 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.individual-videos-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
}

.individual-video-card {
  background: #fff;
  border: 1px solid rgba(21, 29, 72, .05);
  border-radius: 12px;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  box-shadow: 0 4px 16px rgba(21, 29, 72, .08);
}

.individual-video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(21, 29, 72, .12);
}

.video-wrapper-small {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.individual-video-preview {
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
  height: 100%;
}

.individual-video-info {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.individual-video-title {
  color: #151d48;
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
}

.video-text {
  color: #787486;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  margin: 0;
  font-size: .75rem;
  font-style: italic;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

.download-button-small {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: .5rem;
  font-size: .875rem;
  transition: transform .2s;
  display: flex;
}

.download-button-small:hover {
  transform: scale(1.1);
}

.completed-actions {
  border-top: 1px solid rgba(21, 29, 72, .1);
  justify-content: center;
  margin-top: 2rem;
  padding-top: 2rem;
  display: flex;
}

.start-over-button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #ff7b7b 0%, #ff9a9a 100%);
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  box-shadow: 0 4px 16px rgba(255, 123, 123, .3);
}

.start-over-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 123, 123, .4);
}

@media (max-width: 768px) {
  .final-videos-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .individual-videos-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .completed-videos-container {
    gap: 1.5rem;
    padding: .5rem;
  }

  .final-video-card {
    padding: 1rem;
  }

  .individual-video-card {
    padding: .75rem;
  }
}

@media (max-width: 480px) {
  .final-videos-grid {
    max-width: 100%;
  }

  .individual-videos-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .video-title {
    font-size: 1rem;
  }
}

.credit-cost-display {
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.credit-cost-container {
  background: linear-gradient(145deg, #f8f9ff, #fff);
  border: 1px solid rgba(21, 29, 72, .1);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(21, 29, 72, .08);
}

.credit-cost-info {
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  display: flex;
}

.credit-icon {
  color: #f59e0b;
  font-size: 1.25rem;
}

.credit-cost-text {
  color: #151d48;
  font-size: 1rem;
}

.credit-cost-text strong {
  color: #667eea;
  font-weight: 600;
}

.credit-balance {
  justify-content: center;
  display: flex;
}

.balance-text {
  border-radius: 8px;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.balance-text.sufficient {
  color: #10b981;
  background: rgba(16, 185, 129, .1);
}

.balance-text.insufficient {
  color: #ef4444;
  background: rgba(239, 68, 68, .1);
}

.make-video-btn.insufficient-credits {
  cursor: not-allowed;
  opacity: .7;
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

.make-video-btn.insufficient-credits:hover {
  box-shadow: none;
  transform: none;
}

@media (max-width: 768px) {
  .credit-cost-container {
    padding: 1rem;
  }

  .credit-cost-info {
    text-align: center;
    flex-direction: column;
    gap: .5rem;
  }

  .credit-cost-text {
    font-size: .875rem;
  }
}

.my-videos-header {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  justify-content: center;
  min-width: 80%;
  margin-bottom: 1.5rem;
  padding: 1.5rem 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.my-videos-title {
  color: #374151;
  text-align: left;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
}

.section-icon {
  color: #6b7280;
  font-size: 1.25rem;
}

.back-to-list-btn {
  color: #6b7280;
  cursor: pointer;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-right: .75rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  transition: all .2s;
}

.back-to-list-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.videos-stats {
  border-top: 1px solid #f3f4f6;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  padding: 1rem 0 .5rem;
  display: flex;
}

.stats-item {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.stats-icon {
  color: #6b7280;
  font-size: 1rem;
}

.stats-number {
  color: #374151;
  font-size: 1.125rem;
  font-weight: 600;
}

.stats-label {
  color: #6b7280;
  font-size: .875rem;
  font-weight: 400;
}

.search-container {
  justify-content: center;
  margin: 1rem 0;
  display: flex;
}

.search-input-wrapper {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  align-items: center;
  width: 100%;
  max-width: 400px;
  transition: all .2s;
  display: flex;
  position: relative;
}

.search-input-wrapper:focus-within {
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, .1);
}

.search-icon {
  color: #9ca3af;
  pointer-events: none;
  font-size: 1rem;
  position: absolute;
  left: 12px;
}

.search-input {
  color: #374151;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 12px 16px 12px 40px;
  font-size: .875rem;
}

.search-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.search-clear-btn {
  cursor: pointer;
  color: #6b7280;
  background: #f3f4f6;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: .75rem;
  transition: all .2s;
  display: flex;
  position: absolute;
  right: 8px;
}

.search-clear-btn:hover {
  color: #374151;
  background: #e5e7eb;
}

.no-videos-state {
  text-align: center;
  background: linear-gradient(145deg, #fff, #f8f9ff);
  border: 1px solid rgba(21, 29, 72, .05);
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  display: flex;
  box-shadow: 0 4px 24px rgba(21, 29, 72, .08);
}

.no-videos-icon {
  color: #d1d5db;
  margin-bottom: 1.5rem;
  font-size: 4rem;
}

.no-videos-title {
  color: #151d48;
  margin-bottom: .75rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.no-videos-text {
  color: #787486;
  max-width: 400px;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.create-first-video-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: .75rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  transition: transform .2s, box-shadow .2s;
  display: flex;
}

.create-first-video-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(102, 126, 234, .4);
}

.videos-grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
  display: grid;
}

.video-project-card {
  background: linear-gradient(145deg, #fff, #f8f9ff);
  border: 1px solid rgba(21, 29, 72, .05);
  border-radius: 16px;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  box-shadow: 0 4px 24px rgba(21, 29, 72, .08);
}

.video-project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(21, 29, 72, .15);
}

.project-header {
  border-bottom: 1px solid rgba(21, 29, 72, .1);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  display: flex;
}

.project-date, .project-images-count {
  color: #787486;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  display: flex;
}

.project-date svg, .project-images-count svg {
  color: #667eea;
}

.videos-section-title {
  color: #151d48;
  text-align: center;
  border-bottom: 3px solid #667eea;
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.final-videos-section {
  margin-bottom: 4rem;
}

.final-videos-row {
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
}

.final-video-item {
  background: #fff;
  border: 2px solid rgba(102, 126, 234, .1);
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  min-height: 475px;
  padding: 1.5rem;
  transition: all .3s;
  display: flex;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(21, 29, 72, .12);
}

.final-video-item:hover {
  border-color: rgba(102, 126, 234, .3);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(21, 29, 72, .2);
}

.video-preview-container {
  background: #000;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

.video-preview-container-landscape {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  width: 100%;
  max-width: 320px;
  height: 180px;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

.video-preview-container-portrait {
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 16px;
  width: 180px;
  height: 320px;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

.video-preview-container-small {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  width: 100%;
  height: auto;
  max-height: 140px;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

.video-preview {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.individual-videos-section {
  margin-top: 4rem;
}

.individual-videos-grid {
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
}

.individual-video-item {
  background: #fff;
  border: 2px solid rgba(102, 126, 234, .1);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all .3s;
  box-shadow: 0 8px 32px rgba(21, 29, 72, .12);
}

.individual-video-item:hover {
  border-color: rgba(102, 126, 234, .3);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(21, 29, 72, .2);
}

@media (max-width: 1024px) {
  .final-videos-row {
    gap: 1.5rem;
    padding: 0 1.5rem;
  }

  .individual-videos-grid {
    padding: 0 1.5rem;
  }

  .video-preview-container-portrait {
    width: 160px;
    height: 285px;
  }

  .video-preview-container-landscape {
    max-width: 280px;
    height: 158px;
  }
}

@media (max-width: 768px) {
  .final-videos-row {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 0 1rem;
  }

  .final-video-item {
    max-width: 350px;
  }

  .individual-videos-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1rem;
  }

  .video-preview-container-portrait {
    width: 150px;
    height: 267px;
  }

  .video-preview-container-landscape {
    max-width: 260px;
    height: 146px;
  }
}

@media (max-width: 480px) {
  .videos-section-title {
    font-size: 1.1rem;
  }

  .final-video-item, .individual-video-item {
    padding: 1rem;
  }

  .final-videos-row {
    gap: 2rem;
  }

  .individual-videos-grid {
    gap: 1.5rem;
  }

  .video-preview-container-portrait {
    width: 140px;
    height: 249px;
  }

  .video-preview-container-landscape {
    max-width: 240px;
    height: 135px;
  }
}

.video-overlay {
  opacity: 0;
  background: rgba(0, 0, 0, .3);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  transition: opacity .3s;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.video-preview-container:hover .video-overlay {
  opacity: 1;
}

.play-button {
  cursor: pointer;
  color: #151d48;
  background: rgba(255, 255, 255, .9);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  transition: all .3s;
  display: flex;
}

.play-button.small {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

.play-button:hover {
  background: #fff;
  transform: scale(1.1);
}

.video-info {
  border-top: 2px solid rgba(102, 126, 234, .1);
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
}

.video-type {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  display: flex;
  box-shadow: 0 4px 12px rgba(102, 126, 234, .3);
}

.video-type svg {
  color: #fff;
}

.download-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  transition: transform .2s;
  display: flex;
}

.download-btn.small {
  padding: .375rem .75rem;
  font-size: .75rem;
}

.download-btn:hover {
  transform: translateY(-1px);
}

.individual-video-info {
  border-top: 2px solid rgba(102, 126, 234, .1);
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  display: flex;
}

.video-number {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(102, 126, 234, .3);
}

.video-text {
  color: #151d48;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin: 0 1rem;
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
  }

  .my-videos-header {
    padding: 1.25rem 1.5rem;
  }

  .video-project-card {
    padding: 1.25rem;
  }
}

@media (max-width: 768px) {
  .videos-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .my-videos-header {
    padding: 1rem 1.25rem;
  }

  .my-videos-title {
    font-size: 1.25rem;
  }

  .videos-stats {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .stats-item {
    gap: .375rem;
  }

  .stats-number {
    font-size: 1rem;
  }

  .stats-label {
    font-size: .75rem;
  }

  .search-input-wrapper {
    max-width: 300px;
  }

  .search-input {
    padding: 10px 14px 10px 36px;
    font-size: .8125rem;
  }

  .video-project-card {
    gap: 1rem;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .videos-stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  .search-input-wrapper {
    max-width: 280px;
  }

  .search-input {
    padding: 8px 12px 8px 32px;
    font-size: .75rem;
  }

  .search-icon {
    font-size: .875rem;
    left: 10px;
  }
}

.language-selector-container {
  z-index: 1000;
  display: inline-block;
  position: relative;
}

.language-selector-button {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #151d48;
  cursor: pointer;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  min-width: 120px;
  padding: .5rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

.language-selector-button:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(102, 126, 234, .3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.language-icon {
  color: #667eea;
  font-size: 1rem;
}

.language-current {
  align-items: center;
  gap: .25rem;
  font-weight: 600;
  display: flex;
}

.language-chevron {
  color: #6b7280;
  font-size: .75rem;
  transition: transform .3s;
}

.language-chevron.rotated {
  transform: rotate(180deg);
}

.language-backdrop {
  z-index: 998;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.language-dropdown {
  z-index: 999;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #fff;
  border: 1px solid rgba(21, 29, 72, .1);
  border-radius: 12px;
  min-width: 150px;
  padding: .5rem;
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

.language-option {
  cursor: pointer;
  color: #151d48;
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .75rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .2s;
  display: flex;
  position: relative;
}

.language-option:hover {
  background: rgba(102, 126, 234, .1);
}

.language-option.active {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.language-option.active:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.language-flag {
  font-size: 1.2rem;
  line-height: 1;
}

.language-name {
  text-align: left;
  flex: 1;
}

.language-check {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .language-selector-button {
    min-width: 100px;
    padding: .4rem .6rem;
    font-size: .8rem;
  }

  .language-current {
    gap: .2rem;
  }

  .language-flag {
    font-size: 1rem;
  }

  .language-dropdown {
    min-width: 140px;
    right: -.5rem;
  }
}

.sleek-header-bar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: 0 auto 2rem;
  padding: 1rem 2rem;
  display: flex;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.sleek-header-left, .sleek-header-right {
  position: relative;
}

.sleek-header-left {
  flex: 1;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.sleek-header-icon {
  color: #3b82f6;
  font-size: 1.25rem;
}

.sleek-header-title {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.125rem;
  font-weight: 600;
}

.sleek-header-count {
  color: #64748b;
  background: rgba(59, 130, 246, .15);
  border: 1px solid rgba(59, 130, 246, .25);
  border-radius: 12px;
  margin-left: .5rem;
  padding: .25rem .625rem;
  font-size: .8125rem;
  font-weight: 600;
}

.sleek-header-right {
  justify-content: flex-end;
  display: flex;
}

.sleek-search-wrapper {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, .8);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  align-items: center;
  min-width: 250px;
  padding: .5rem;
  display: flex;
  position: relative;
}

.sleek-search-icon {
  color: #64748b;
  margin-right: .5rem;
  font-size: .875rem;
}

.sleek-search-input {
  color: #1e293b;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: .875rem;
}

.sleek-search-input::placeholder {
  color: #94a3b8;
}

.sleek-search-clear {
  color: #94a3b8;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  margin-left: .5rem;
  padding: .25rem;
  font-size: .75rem;
  transition: color .2s;
  display: flex;
}

.sleek-search-clear:hover {
  color: #64748b;
  background: rgba(0, 0, 0, .05);
}

.projects-list-grid {
  background: rgba(255, 255, 255, .38);
  border-radius: 12px;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
  display: grid;
}

.project-card {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  flex-direction: column;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
}

.project-card:hover .project-delete-btn {
  opacity: 1;
}

.project-delete-btn {
  color: #fff;
  cursor: pointer;
  opacity: 0;
  z-index: 10;
  background: rgba(239, 68, 68, .9);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: .75rem;
  transition: all .2s;
  display: flex;
  position: absolute;
  top: 8px;
  right: 8px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, .3);
}

.project-delete-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, .4);
}

.project-thumbnail {
  border-radius: 8px;
  width: 100%;
  height: 140px;
  padding: .375rem;
  position: relative;
}

.project-thumbnail-image {
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 6px;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.project-thumbnail-placeholder {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.thumbnail-placeholder-icon {
  color: #94a3b8;
  font-size: 2rem;
}

.project-card-content {
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.125rem 1.125rem;
  display: flex;
}

.project-card-title {
  color: #1e293b;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 1.1rem;
  margin: 0 0 .75rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}

.project-card-divider {
  background: #e5e7eb;
  width: 100%;
  height: 1px;
  margin: .5rem 0 .75rem;
}

.project-card-stats {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .375rem;
  display: flex;
}

.project-stat {
  flex: 1;
  align-items: center;
  gap: .25rem;
  min-width: -moz-fit-content;
  min-width: fit-content;
  display: flex;
}

.project-card-icon {
  color: #7f7e97;
  flex-shrink: 0;
  font-size: .875rem;
}

.project-card-value {
  color: #475569;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .8125rem;
  font-weight: 500;
  overflow: visible;
}

.delete-modal-overlay {
  z-index: 9999;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, .6);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.delete-modal-content {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 450px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.delete-modal-icon {
  color: #dc2626;
  background: rgba(239, 68, 68, .1);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
  display: flex;
}

.delete-modal-title {
  color: #1f2937;
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.delete-modal-project-name {
  color: #3b82f6;
  background: rgba(59, 130, 246, .1);
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: .75rem 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.delete-modal-message {
  text-align: left;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.delete-modal-message p {
  color: #4b5563;
  margin: 0 0 .75rem;
}

.delete-modal-message p:last-child {
  margin-bottom: 0;
}

.delete-modal-actions {
  justify-content: center;
  gap: .75rem;
  display: flex;
}

.delete-modal-cancel {
  color: #374151;
  cursor: pointer;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: .75rem 1.5rem;
  font-weight: 500;
  transition: all .2s;
}

.delete-modal-cancel:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.delete-modal-confirm {
  color: #fff;
  cursor: pointer;
  background: #dc2626;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.delete-modal-confirm:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, .3);
}

.stat-icon {
  color: #3b82f6;
  flex-shrink: 0;
  font-size: .625rem;
}

.stat-value {
  color: #475569;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 500;
  overflow: hidden;
}

.project-summary-header {
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 100%;
  display: flex;
}

.project-folder-icon {
  color: #fff;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 8px 8px 2px 2px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 48px;
  font-size: 1.5rem;
  display: flex;
  position: relative;
  box-shadow: 0 2px 8px rgba(245, 158, 11, .3);
}

.project-folder-icon:before {
  content: "";
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 4px 4px 0 0;
  width: 20px;
  height: 8px;
  position: absolute;
  top: -4px;
  left: 0;
}

.project-summary-info {
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
}

.project-summary-title {
  color: #374151;
  text-align: center;
  word-break: break-word;
  max-width: 100%;
  margin: 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
}

.project-summary-id {
  display: none;
}

.project-summary-details {
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  width: 100%;
  margin-top: .25rem;
  display: flex;
}

.project-summary-stat {
  color: #6b7280;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  display: flex;
}

.project-summary-stat svg {
  color: #9ca3af;
  width: 12px;
  height: 12px;
}

.project-file-count {
  color: #6b7280;
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 400;
}

.project-summary-footer, .video-types, .video-type-indicator {
  display: none;
}

.credits-used {
  color: #f59e0b;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 500;
  display: flex;
}

.credits-used svg {
  color: #f59e0b;
  width: 14px;
}

.back-to-list-btn {
  color: #667eea;
  cursor: pointer;
  background: none;
  border: none;
  margin-right: .5rem;
  font-size: 1.5rem;
  transition: color .2s;
}

.back-to-list-btn:hover {
  color: #151d48;
}

.project-detail-info {
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  display: flex;
}

.project-detail-date {
  color: #787486;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  display: flex;
}

.project-detail-date svg {
  color: #667eea;
}

.project-detail-stats {
  gap: 1.5rem;
  display: flex;
}

.project-detail-stat {
  color: #787486;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  display: flex;
}

.project-detail-stat svg {
  color: #667eea;
}

.detail-back-btn-container {
  z-index: 100;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.detail-back-btn {
  color: #64748b;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .95);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.detail-back-btn:hover {
  color: #475569;
  background: rgba(248, 250, 252, .98);
  border-color: #cbd5e1;
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.detail-back-btn:active {
  transform: translateX(-1px);
}

.project-detail-sleek-bar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  min-height: 80px;
  margin: 4rem auto 2rem;
  padding: 1.5rem 2rem;
  display: flex;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.project-detail-left, .project-detail-right {
  position: relative;
}

.project-detail-left {
  flex: 1;
  align-items: center;
  gap: 1rem;
  padding: .25rem 0;
  display: flex;
}

.project-detail-icon {
  color: #3b82f6;
  font-size: 1.25rem;
}

.project-detail-name {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.125rem;
  font-weight: 600;
}

.project-detail-meta {
  align-items: center;
  gap: 1rem;
  margin-left: 1rem;
  display: flex;
}

.project-detail-date, .project-detail-status, .project-detail-credits {
  color: #64748b;
  background: rgba(59, 130, 246, .1);
  border: 1px solid rgba(59, 130, 246, .2);
  border-radius: 12px;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  font-size: .8125rem;
  display: flex;
}

.project-detail-status {
  color: #10b981;
  background: rgba(16, 185, 129, .1);
  border-color: rgba(16, 185, 129, .2);
}

.project-detail-credits {
  color: #f59e0b;
  background: rgba(245, 158, 11, .1);
  border-color: rgba(245, 158, 11, .2);
}

.project-detail-right {
  justify-content: flex-end;
  display: flex;
}

.project-detail-delete-btn {
  color: #fff;
  cursor: pointer;
  background: rgba(239, 68, 68, .9);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: .875rem;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 8px rgba(239, 68, 68, .3);
}

.project-detail-delete-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, .4);
}

.project-detail-title {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  display: flex;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.project-icon-wrapper {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  display: flex;
}

.project-icon {
  color: #fff;
  font-size: 1.25rem;
}

.project-title-info {
  flex: 1;
}

.project-name {
  color: #1e293b;
  margin: 0 0 .75rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.project-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  display: flex;
}

.project-date, .project-status {
  color: #64748b;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  display: flex;
}

.project-status {
  color: #10b981;
  font-weight: 500;
}

.project-stats-overview {
  margin-top: 1rem;
}

.stats-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  align-items: center;
  gap: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.stat-item {
  flex: 1;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: 0 1rem;
  display: flex;
}

.stat-item:first-child {
  padding-left: 0;
}

.stat-item:last-child {
  padding-right: 0;
}

.stat-icon {
  color: #fff;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  display: flex;
}

.images-stat .stat-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.videos-stat .stat-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.credits-stat .stat-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-content {
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
  display: flex;
}

.stat-number {
  color: #1e293b;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  color: #64748b;
  text-transform: capitalize;
  font-size: .8125rem;
  font-weight: 500;
}

.stat-divider {
  background: #e2e8f0;
  flex-shrink: 0;
  width: 1px;
  height: 2.5rem;
  margin: 0 .75rem;
}

@media (max-width: 768px) {
  .project-detail-title {
    text-align: center;
    flex-direction: column;
    gap: 1rem;
  }

  .project-icon-wrapper {
    align-self: center;
  }

  .stats-card {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .stat-item {
    text-align: center;
    justify-content: center;
    padding: 0;
  }

  .stat-divider {
    display: none;
  }

  .project-meta {
    justify-content: center;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .project-name {
    font-size: 1.25rem;
  }

  .back-btn span {
    display: none;
  }

  .back-btn {
    border-radius: 50%;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: .75rem;
  }

  .stats-card {
    gap: .75rem;
  }

  .stat-number {
    font-size: 1.125rem;
  }
}

.project-details-content {
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 5rem;
  display: flex;
}

.project-loading {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  display: flex;
}

.project-loading .loading-spinner {
  border: 4px solid #e5e7eb;
  border-top-color: #667eea;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  animation: 1s linear infinite spin;
}

.project-loading p {
  color: #787486;
  font-size: 1.125rem;
}

.project-not-found {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  display: flex;
}

.project-not-found h3 {
  color: #151d48;
  margin-bottom: 1rem;
}

.project-not-found button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: .75rem 1.5rem;
  transition: transform .2s;
}

.project-not-found button:hover {
  transform: translateY(-1px);
}

@media (max-width: 1400px) {
  .projects-list-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 1024px) {
  .projects-list-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.25rem;
  }
}

@media (max-width: 768px) {
  .projects-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
  }

  .project-thumbnail {
    height: 120px;
  }

  .project-card-content {
    padding: .875rem 1rem 1rem;
  }
}

@media (max-width: 480px) {
  .projects-list-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: .75rem;
  }

  .project-thumbnail {
    height: 160px;
  }

  .project-card-content {
    padding: 1rem 1.125rem 1.125rem;
  }

  .project-card-title {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .project-card-stats {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .project-card-icon, .project-card-value {
    font-size: .9375rem;
  }

  .stat-icon {
    font-size: .75rem;
  }

  .stat-value {
    font-size: .875rem;
  }

  .video-types {
    flex-direction: column;
    gap: .5rem;
  }

  .project-summary-footer {
    flex-direction: column;
    gap: 1rem;
  }
}

.pricing-page-container {
  background: #f9fafb;
  min-height: calc(100vh - 80px);
  padding: 16px 0;
}

.subscription-content-area {
  align-items: center;
  max-width: 1200px;
  height: calc(100vh - 120px);
  margin: 0 auto;
  padding: 20px;
  display: flex;
}

.pricing-layout {
  align-items: stretch;
  gap: 32px;
  width: 100%;
  max-height: 85vh;
  display: flex;
}

.pricing-left-column {
  flex-direction: column;
  flex: 0 0 35%;
  gap: 18px;
  height: 100%;
  display: flex;
}

.stylai-package-card {
  background: linear-gradient(135deg, #f46ebe 0%, #6c4df5 100%);
  border-radius: 18px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  min-height: 280px;
  max-height: 350px;
  padding: 24px;
  display: flex;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

.stylai-card-content {
  height: 100%;
}

.stylai-title {
  color: #fff;
  margin: 0 0 8px;
  font-family: sans-serif;
  font-size: 22px;
  font-weight: bold;
}

.stylai-subtitle {
  color: rgba(255, 255, 255, .85);
  margin: 0 0 18px;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.stylai-features {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.stylai-feature {
  align-items: center;
  gap: 12px;
  display: flex;
}

.stylai-check {
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
}

.stylai-check svg {
  color: #6c4df5;
  width: 8px;
  height: 8px;
}

.stylai-feature span {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

.advanced-package-card {
  background: #fff;
  border-radius: 16px;
  flex-shrink: 0;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}

.advanced-card-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.advanced-icon {
  color: #fff;
  background: #2d8cff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  display: flex;
}

.advanced-price {
  color: #000;
  font-size: 28px;
  font-weight: bold;
}

.advanced-details {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.advanced-detail {
  color: #444;
  font-size: 14px;
  font-weight: 500;
}

.advanced-get-now-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 15px rgba(99, 102, 241, .3);
}

.advanced-get-now-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, .4);
}

.advanced-get-now-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

.advanced-get-now-btn .processing-indicator {
  align-items: center;
  gap: 8px;
  display: flex;
}

.advanced-get-now-btn .spinner {
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: 1s ease-in-out infinite spin;
}

.pricing-right-column {
  flex-direction: column;
  flex: 0 0 65%;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  display: flex;
}

.pricing-plan-card {
  cursor: pointer;
  background: #fff;
  border-radius: 16px;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  height: 95px;
  padding: 16px 20px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

.pricing-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
}

.plan-info {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.plan-header {
  align-items: center;
  gap: 8px;
  display: flex;
}

.plan-icon {
  color: #fff;
  background: #2d8cff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
  display: flex;
}

.plan-name {
  color: #111;
  font-size: 16px;
  font-weight: 600;
}

.plan-pricing {
  align-items: baseline;
  gap: 6px;
  display: flex;
}

.plan-price {
  color: #000;
  font-size: 28px;
  font-weight: bold;
}

.plan-old-price {
  color: #888;
  font-size: 14px;
  text-decoration: line-through;
}

.plan-period {
  color: #666;
  font-size: 13px;
}

.plan-description {
  color: #444;
  margin-top: 6px;
  font-size: 14px;
}

.plan-cta-btn {
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, #6c4df5 0%, #a053f4 100%);
  border: none;
  border-radius: 22px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s;
}

.plan-cta-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(108, 77, 245, .3);
}

.plan-cta-btn:active {
  transform: translateY(1px);
}

@media (max-width: 1024px) {
  .pricing-layout {
    gap: 24px;
    max-height: 80vh;
  }

  .pricing-left-column {
    flex: 0 0 38%;
  }

  .pricing-right-column {
    flex: 0 0 62%;
  }

  .subscription-content-area {
    padding: 16px;
  }

  .stylai-package-card {
    min-height: 240px;
    max-height: 300px;
    padding: 20px;
  }

  .pricing-plan-card {
    height: 85px;
    padding: 14px 18px;
  }
}

@media (max-width: 768px) {
  .pricing-page-container {
    padding: 8px 0;
  }

  .subscription-content-area {
    height: auto;
    min-height: calc(100vh - 100px);
    padding: 12px;
  }

  .pricing-layout {
    flex-direction: column;
    gap: 20px;
    max-height: none;
  }

  .pricing-left-column, .pricing-right-column {
    flex: 1;
    width: 100%;
    height: auto;
  }

  .pricing-right-column {
    gap: 12px;
  }

  .stylai-package-card {
    min-height: 280px;
    max-height: none;
    padding: 18px;
  }

  .advanced-package-card {
    padding: 16px;
  }

  .pricing-plan-card {
    flex: none;
    height: auto;
    min-height: 85px;
    padding: 14px 18px;
  }

  .stylai-title {
    font-size: 20px;
  }

  .stylai-subtitle, .stylai-feature span {
    font-size: 14px;
  }

  .advanced-price, .plan-price {
    font-size: 26px;
  }

  .plan-name {
    font-size: 15px;
  }

  .plan-description {
    font-size: 13px;
  }

  .advanced-get-now-btn {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .subscription-content-area {
    padding: 10px;
  }

  .pricing-layout {
    gap: 16px;
  }

  .pricing-left-column {
    gap: 14px;
  }

  .pricing-right-column {
    gap: 10px;
  }

  .stylai-package-card {
    min-height: 260px;
    padding: 16px;
  }

  .advanced-package-card {
    padding: 14px;
  }

  .pricing-plan-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: auto;
    min-height: 80px;
    padding: 12px 14px;
  }

  .plan-cta-btn {
    text-align: center;
    align-self: stretch;
    padding: 8px 16px;
  }

  .stylai-title {
    font-size: 18px;
  }

  .stylai-subtitle {
    font-size: 13px;
  }

  .advanced-price, .plan-price {
    font-size: 24px;
  }

  .advanced-get-now-btn {
    margin-top: 14px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

.image-cropper-container {
  background: #fafafa;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
}

.image-upload-area {
  cursor: pointer;
  background: #fff;
  border: 2px dashed #e0e0e0;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  height: 480px;
  margin: 20px;
  transition: all .3s;
  display: flex;
}

.image-upload-area:hover, .image-upload-area.drag-active {
  background: #f8faff;
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, .15);
}

.upload-content {
  text-align: center;
  padding: 32px;
}

.upload-icon {
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  font-size: 32px;
  display: flex;
}

.upload-title {
  color: #1f2937;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
}

.upload-subtitle {
  color: #6b7280;
  margin-bottom: 32px;
  font-size: 16px;
}

.upload-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: inline-flex;
}

.upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, .3);
}

.upload-formats {
  color: #9ca3af;
  font-size: 14px;
}

.upload-input {
  display: none;
}

.cropper-layout {
  height: 520px;
  display: flex;
}

.cropper-main {
  background: #000;
  border-radius: 12px 0 0 12px;
  flex: 1;
  position: relative;
}

.cropper-wrapper {
  position: absolute;
  top: 0;
  bottom: 40px;
  left: 0;
  right: 0;
}

.cropper-container {
  background: #000;
}

.crop-area {
  border: 2px solid #6366f1;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
}

.cropper-media {
  border-radius: 8px;
}

.aspect-indicator {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, .8);
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 40px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.aspect-label {
  color: #9ca3af;
  font-size: 14px;
}

.aspect-value {
  color: #6366f1;
  font-size: 14px;
  font-weight: 600;
}

.cropper-controls {
  background: #fff;
  border-radius: 0 12px 12px 0;
  flex-direction: column;
  gap: 20px;
  width: 280px;
  padding: 20px;
  display: flex;
}

.controls-header {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.controls-header-text {
  flex: 1;
}

.controls-title {
  color: #1f2937;
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
}

.edit-mode-note {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
  font-style: italic;
}

.controls-close {
  color: #6b7280;
  cursor: pointer;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  transition: all .2s;
  display: flex;
}

.controls-close:hover {
  color: #374151;
  background: #e5e7eb;
}

.control-group {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.control-label {
  color: #374151;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

.zoom-control {
  align-items: center;
  gap: 12px;
  display: flex;
}

.zoom-btn {
  color: #6366f1;
  cursor: pointer;
  background: #f8faff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: all .2s;
  display: flex;
}

.zoom-btn:hover {
  color: #fff;
  background: #6366f1;
  border-color: #6366f1;
  transform: scale(1.05);
}

.zoom-slider-wrapper {
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.zoom-slider {
  -webkit-appearance: none;
  cursor: pointer;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  width: 100%;
  height: 6px;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.zoom-value {
  color: #6366f1;
  font-size: 12px;
  font-weight: 500;
}

.rotation-control {
  align-items: center;
  gap: 12px;
  display: flex;
}

.rotate-btn {
  color: #6366f1;
  cursor: pointer;
  background: #f8faff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.rotate-btn:hover {
  color: #fff;
  background: #6366f1;
  border-color: #6366f1;
  transform: scale(1.05);
}

.rotation-slider-wrapper {
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.rotation-slider {
  -webkit-appearance: none;
  cursor: pointer;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  width: 100%;
  height: 6px;
}

.rotation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.rotation-value {
  color: #6366f1;
  font-size: 12px;
  font-weight: 500;
}

.action-buttons {
  flex-direction: column;
  gap: 12px;
  margin-top: 1.5rem;
  display: flex;
}

.image-text-group {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.image-text-input {
  color: #374151;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  outline: none;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s;
}

.image-text-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}

.image-text-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.text-helper {
  color: #6b7280;
  font-size: 11px;
  line-height: 1.3;
}

.reset-btn {
  color: #6b7280;
  cursor: pointer;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
}

.reset-btn:hover {
  color: #374151;
  background: #f9fafb;
  border-color: #d1d5db;
}

.crop-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
}

.crop-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, .3);
}

.crop-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.processing-spinner {
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: 1s linear infinite spin;
}

.error-message, .error-toast {
  color: #dc2626;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 14px;
}

.error-toast {
  z-index: 1000;
  position: fixed;
  bottom: 24px;
  right: 24px;
  box-shadow: 0 8px 25px rgba(220, 38, 38, .2);
}

@media (max-width: 768px) {
  .cropper-layout {
    flex-direction: column;
    height: auto;
  }

  .cropper-main {
    border-radius: 12px 12px 0 0;
    height: 350px;
  }

  .cropper-controls {
    border-radius: 0 0 12px 12px;
    gap: 16px;
    width: 100%;
    padding: 16px;
  }

  .zoom-control, .rotation-control {
    flex-direction: column;
    gap: 8px;
  }

  .zoom-slider-wrapper, .rotation-slider-wrapper {
    width: 100%;
  }

  .creation-crop-wrapper {
    min-height: 100vh;
    padding: 12px;
  }

  .creation-image-cropper {
    height: 85vh;
    max-height: none;
  }

  .videooptions-crop-wrapper {
    min-height: 100vh;
    padding: 12px;
  }

  .videooptions-image-cropper {
    height: 85vh;
    max-height: none;
  }

  .image-upload-area {
    height: 380px;
    margin: 12px;
  }

  .upload-content {
    padding: 24px;
  }
}

.creation-crop-wrapper {
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding-bottom: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
}

.creation-image-cropper {
  width: 100%;
  max-width: 1000px;
  height: 70vh;
  max-height: 580px;
}

.videooptions-crop-wrapper {
  z-index: 1000;
  background: none;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding-bottom: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.videooptions-image-cropper {
  width: 100%;
  max-width: 1000px;
  height: 70vh;
  max-height: 580px;
}

.success-modal-container {
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}

.success-modal-content {
  text-align: center;
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  padding: 40px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.success-icon {
  color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  font-size: 36px;
  display: flex;
}

.success-title {
  color: #1f2937;
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: 700;
}

.success-description {
  color: #6b7280;
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.6;
}

.credits-display {
  background: #f8faff;
  border: 2px solid #e0e7ff;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 24px;
  display: flex;
}

.star-icon {
  color: #f59e0b;
  font-size: 24px;
}

.credits-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.transaction-info {
  margin-bottom: 32px;
}

.transaction-id {
  color: #9ca3af;
  background: #f3f4f6;
  border-radius: 8px;
  margin: 0;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 12px;
}

.success-actions {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.success-primary-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
}

.success-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, .3);
}

.success-secondary-btn {
  color: #6b7280;
  cursor: pointer;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
}

.success-secondary-btn:hover {
  color: #374151;
  background: #f9fafb;
  border-color: #d1d5db;
}

@media (max-width: 768px) {
  .success-modal-content {
    margin: 16px;
    padding: 32px 24px;
  }

  .success-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    font-size: 28px;
  }

  .success-title {
    font-size: 24px;
  }

  .success-description {
    font-size: 15px;
  }

  .credits-text {
    font-size: 16px;
  }

  .success-actions {
    gap: 10px;
  }

  .success-primary-btn {
    padding: 14px 20px;
    font-size: 15px;
  }
}

.active-subscriptions-section {
  margin: 32px 0;
}

.subscriptions-header {
  margin-bottom: 24px;
}

.subscriptions-title {
  color: #111827;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

.subscriptions-subtitle {
  color: #6b7280;
  font-size: 14px;
}

.subscriptions-loading {
  color: #6b7280;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 40px;
  display: flex;
}

.subscriptions-list {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.subscription-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  transition: all .2s;
  display: flex;
}

.subscription-item:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.subscription-main {
  flex: 1;
  align-items: center;
  gap: 16px;
  display: flex;
}

.subscription-icon {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 20px;
  display: flex;
}

.subscription-details {
  flex: 1;
}

.subscription-title {
  color: #111827;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.subscription-info {
  color: #6b7280;
  margin-bottom: 4px;
  font-size: 14px;
}

.subscription-date {
  color: #9ca3af;
  font-size: 13px;
}

.subscription-actions {
  align-items: center;
  gap: 16px;
  display: flex;
}

.subscription-status {
  border-radius: 20px;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.subscription-status.active {
  color: #166534;
  background: #dcfce7;
}

.cancel-subscription-btn {
  color: #dc2626;
  cursor: pointer;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.cancel-subscription-btn:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #f87171;
}

.cancel-subscription-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.cancel-subscription-modal {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 40px;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}

.cancel-warning-icon {
  color: #dc2626;
  background: #fef2f2;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  font-size: 32px;
  display: flex;
}

.cancel-message {
  text-align: left;
  margin: 24px 0 32px;
}

.cancel-text {
  color: #374151;
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
}

.cancel-consequences {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin: 0;
  padding: 16px;
  list-style: none;
}

.cancel-consequences li {
  color: #6b7280;
  padding: 8px 0 8px 20px;
  position: relative;
}

.cancel-consequences li:before {
  content: "•";
  color: #dc2626;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.cancel-modal-actions {
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  display: flex;
}

.cancel-confirm-btn {
  color: #fff;
  cursor: pointer;
  background: #dc2626;
  border: none;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
}

.cancel-confirm-btn:hover:not(:disabled) {
  background: #b91c1c;
}

.cancel-confirm-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.cancel-keep-btn {
  color: #374151;
  cursor: pointer;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
}

.cancel-keep-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.cancel-keep-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn-spinner {
  border: 2px solid rgba(0, 0, 0, 0);
  border-top-color: currentColor;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: 1s linear infinite spin;
}

@media (max-width: 768px) {
  .subscription-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .subscription-main {
    width: 100%;
  }

  .subscription-actions {
    justify-content: space-between;
    width: 100%;
  }

  .cancel-subscription-modal {
    margin: 16px;
    padding: 32px 24px;
  }

  .cancel-modal-actions {
    flex-direction: column;
  }

  .cancel-confirm-btn, .cancel-keep-btn {
    justify-content: center;
    width: 100%;
  }
}

.aspect-ratio-control {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px;
  display: flex;
}

.aspect-btn {
  color: #000;
  cursor: pointer;
  background: rgba(255, 255, 255, .08);
  border: 1px solid #374151;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-width: 50px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.aspect-btn:hover {
  color: #000;
  background: rgba(255, 255, 255, .15);
  border-color: #667eea;
}

.aspect-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: rgba(255, 255, 255, .3);
  font-weight: 600;
}

.aspect-btn.active:hover {
  background: linear-gradient(135deg, #7c8cea 0%, #8a59b2 100%);
}

@media (max-width: 768px) {
  .aspect-ratio-control {
    gap: 6px;
    padding: 2px;
  }

  .aspect-btn {
    min-width: 45px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

.admin-sitewide-media {
  background: #f8fafc;
  height: 100vh;
  padding: 1rem;
  overflow: hidden;
}

.admin-sitewide-header {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 10px;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 15px rgba(59, 130, 246, .2);
}

.admin-sitewide-title {
  color: #fff;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
}

.admin-sitewide-subtitle {
  color: rgba(255, 255, 255, .9);
  margin: .25rem 0 0;
  font-size: .875rem;
}

.admin-sitewide-content {
  flex-direction: column;
  gap: 1rem;
  height: calc(100vh - 140px);
  display: flex;
}

.admin-hero-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.admin-section-header {
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
}

.admin-hero-grid {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  display: grid;
}

.admin-examples-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  flex: 1;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.admin-examples-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  display: grid;
}

.admin-upload-section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: .75rem;
  transition: all .2s;
}

.admin-upload-section:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, .1);
}

.admin-upload-header {
  margin-bottom: .5rem;
}

.admin-upload-title {
  color: #1f2937;
  align-items: center;
  gap: .375rem;
  margin: 0 0 .25rem;
  font-size: .875rem;
  font-weight: 600;
  display: flex;
}

.admin-upload-subtitle {
  color: #6b7280;
  margin: 0;
  font-size: .75rem;
}

.admin-upload-content {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.admin-current-file-preview {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  display: flex;
}

.admin-preview-image, .admin-preview-video {
  object-fit: cover;
  border-radius: 4px;
}

.admin-file-info {
  align-items: center;
  gap: .25rem;
  display: flex;
}

.admin-status-icon {
  color: #059669;
  font-size: .875rem;
}

.admin-file-status {
  color: #059669;
  font-size: .75rem;
  font-weight: 500;
}

.admin-file-input input[type="file"] {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
}

.admin-file-label {
  text-align: center;
  cursor: pointer;
  background: #fafafa;
  border: 2px dashed #94a3b8;
  border-radius: 6px;
  padding: 1rem .75rem;
  transition: all .2s;
  display: block;
}

.admin-file-label:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

.admin-file-label.uploading {
  cursor: not-allowed;
  opacity: .7;
  background: #fffbeb;
  border-color: #f59e0b;
}

.admin-upload-prompt {
  color: #374151;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  display: flex;
}

.admin-upload-icon {
  color: #3b82f6;
  font-size: 1.25rem;
}

.admin-upload-prompt span {
  font-size: .75rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .project-name-container {
    margin-bottom: 1.25rem;
  }

  .project-name-input {
    padding: .75rem .875rem;
    font-size: .8125rem;
  }

  .sleek-header-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 98%;
    padding: .875rem 1.25rem;
  }

  .sleek-header-left, .sleek-header-right {
    flex: none;
  }

  .sleek-header-left {
    justify-content: flex-start;
  }

  .sleek-header-right {
    justify-content: center;
  }

  .sleek-search-wrapper {
    min-width: 100%;
    max-width: 100%;
  }

  .sleek-header-title {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 1rem;
  }

  .sleek-header-icon {
    font-size: 1.125rem;
  }

  .sleek-header-count {
    margin-left: .375rem;
    padding: .1875rem .5rem;
    font-size: .75rem;
  }

  .project-detail-sleek-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 98%;
    min-height: 100px;
    margin: 3rem auto 2rem;
    padding: 1.25rem;
  }

  .project-detail-left {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .project-detail-meta {
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: 0;
  }

  .project-detail-name {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 1rem;
  }

  .project-detail-icon {
    font-size: 1.125rem;
  }

  .project-detail-right {
    justify-content: center;
  }

  .detail-back-btn {
    padding: .625rem .875rem;
    font-size: .8125rem;
  }
}

@media (max-width: 480px) {
  .sleek-header-bar {
    margin: 0 auto 1.5rem;
    padding: .75rem 1rem;
  }

  .sleek-header-count {
    margin-left: .25rem;
    padding: .1875rem .5rem;
    font-size: .75rem;
  }

  .sleek-search-wrapper {
    padding: .4375rem;
  }

  .sleek-search-input {
    font-size: .8125rem;
  }

  .project-detail-sleek-bar {
    min-height: 90px;
    margin: 2.5rem auto 1.5rem;
    padding: 1rem;
  }

  .project-detail-name {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: .875rem;
  }

  .project-detail-date, .project-detail-status, .project-detail-credits {
    padding: .1875rem .5rem;
    font-size: .75rem;
  }

  .project-detail-delete-btn {
    width: 32px;
    height: 32px;
    font-size: .75rem;
  }

  .detail-back-btn {
    padding: .5rem .75rem;
    font-size: .75rem;
    top: .75rem;
    left: .75rem;
  }

  .delete-modal-content {
    margin: 1rem;
    padding: 1.5rem;
  }

  .delete-modal-title {
    font-size: 1.25rem;
  }

  .delete-modal-project-name {
    padding: .625rem .875rem;
    font-size: 1rem;
  }

  .delete-modal-actions {
    flex-direction: column;
    gap: .5rem;
  }

  .delete-modal-cancel, .delete-modal-confirm {
    justify-content: center;
    width: 100%;
  }

  .project-name-container {
    margin-bottom: 1rem;
  }

  .project-name-label {
    font-size: .8125rem;
  }

  .project-name-input {
    padding: .625rem .75rem;
    font-size: .75rem;
  }
}

.admin-upload-loading {
  color: #f59e0b;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  display: flex;
}

.admin-loading-icon {
  font-size: 1.25rem;
}

.admin-message {
  border-radius: 6px;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  display: flex;
}

.admin-message-icon {
  font-size: 1rem;
}

.admin-message-success {
  color: #065f46;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #34d399;
}

.admin-message-error {
  color: #7f1d1d;
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border: 1px solid #f87171;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__99673881._.css.map*/