/* Monster Tools Kit - modern gradient theme (loaded after the main stylesheet) */
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --app-font-sans:"Inter Variable","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --background:234 100% 98%;--foreground:228 45% 13%;
  --card:0 0% 100%;--card-foreground:228 45% 13%;--card-border:236 45% 90%;
  --popover:0 0% 100%;--popover-foreground:228 45% 13%;--popover-border:236 45% 90%;
  --border:236 45% 90%;--input:236 35% 84%;
  --primary:252 84% 57%;--primary-foreground:0 0% 100%;
  --secondary:252 100% 96%;--secondary-foreground:252 55% 32%;
  --muted:238 70% 96%;--muted-foreground:228 17% 36%;
  --accent:326 84% 54%;--accent-foreground:0 0% 100%;
  --ring:252 84% 57%;--radius:1rem;
  --chart-1:252 84% 57%;--chart-2:326 84% 54%;--chart-3:190 90% 40%;--chart-4:150 60% 38%;--chart-5:36 92% 52%;
  --mtk-g1:#5b3df0;--mtk-g2:#9b4dea;--mtk-g3:#e63e9a;--mtk-cyan:#0ea5c6;
  --mtk-b1:#5b3df0;--mtk-b2:#9244e0;--mtk-b3:#d3267f; /* button gradient: white text stays >= 4.5:1 in both themes */
  --mtk-glow:252 84% 57%;
  --shadow-md:0 10px 24px -8px hsl(250 60% 40%/.16),0 4px 8px -4px hsl(250 60% 40%/.08);
  --shadow-lg:0 22px 44px -14px hsl(250 60% 40%/.22),0 8px 16px -8px hsl(250 60% 40%/.1);
}
.dark{
  --background:232 50% 7%;--foreground:226 40% 96%;
  --card:232 40% 12%;--card-foreground:226 40% 96%;--card-border:234 32% 24%;
  --popover:232 40% 12%;--popover-foreground:226 40% 96%;--popover-border:234 32% 24%;
  --border:234 32% 22%;--input:234 30% 28%;
  --primary:256 96% 74%;--primary-foreground:0 0% 100%;
  --secondary:240 36% 20%;--secondary-foreground:226 40% 94%;
  --muted:236 34% 17%;--muted-foreground:228 22% 72%;
  --accent:326 90% 68%;--accent-foreground:232 50% 8%;
  --ring:256 96% 74%;
  --chart-1:256 96% 74%;--chart-2:326 90% 68%;--chart-3:190 90% 58%;--chart-4:150 60% 52%;--chart-5:36 92% 62%;
  --mtk-g1:#6d55ff;--mtk-g2:#a855f7;--mtk-g3:#ec4899;--mtk-cyan:#22d3ee;
  --mtk-glow:256 96% 74%;
}

/* ---------- gradient page background ---------- */
html{background:#f4f3ff}
.dark html,html.dark{background:#0a0d1f}
body{
  background-color:transparent;
  background-image:
    radial-gradient(64rem 40rem at 4% -12%,hsl(254 100% 80%/.95),transparent 64%),
    radial-gradient(58rem 38rem at 100% 2%,hsl(330 100% 84%/.95),transparent 62%),
    radial-gradient(66rem 44rem at 50% 114%,hsl(190 100% 80%/.9),transparent 64%),
    linear-gradient(165deg,#ece8ff 0%,#e4edff 48%,#f8e6ff 100%);
  background-attachment:fixed;background-repeat:no-repeat;min-height:100vh;
}
.dark body{
  background-image:
    radial-gradient(60rem 38rem at 8% -12%,hsl(256 90% 48%/.72),transparent 62%),
    radial-gradient(54rem 36rem at 100% 0%,hsl(326 85% 45%/.5),transparent 60%),
    radial-gradient(64rem 42rem at 50% 115%,hsl(200 90% 40%/.46),transparent 62%),
    linear-gradient(165deg,#0a0d1f 0%,#120f33 52%,#1b0f3a 100%);
}
/* let the page gradient show through full-width sections */
.bg-background{background-color:transparent}
section.bg-muted\/30,section.bg-muted\/20,div.bg-muted\/30,div.bg-muted\/20{background-color:transparent;background-image:linear-gradient(180deg,transparent 0,hsl(var(--card)/.42) 14%,hsl(var(--card)/.42) 86%,transparent 100%)}

/* ---------- glass cards ---------- */
.bg-card{background-color:hsl(var(--card)/.74);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border-color:hsl(var(--border)/.9)}
.dark .bg-card{background-color:hsl(var(--card)/.62)}
.bg-card{box-shadow:0 1px 2px hsl(250 60% 40%/.06),0 10px 30px -14px hsl(250 60% 40%/.18)}
.dark .bg-card{box-shadow:0 1px 2px #0006,0 12px 34px -16px #000a}
a.group.bg-card,a.bg-card{transition:box-shadow .25s ease,border-color .25s ease,translate .25s ease,background-color .25s ease}
a.group.bg-card:hover,a.bg-card:hover{translate:0 -4px;border-color:hsl(var(--primary)/.45);box-shadow:0 24px 48px -16px hsl(var(--mtk-glow)/.38),0 2px 6px hsl(var(--mtk-glow)/.12);background-color:hsl(var(--card)/.92)}
.glass{background:hsl(var(--card)/.55);border:1px solid hsl(var(--border)/.8);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.tool-surface{background:linear-gradient(135deg,hsl(var(--card)/.86),hsl(var(--card)/.7)),radial-gradient(circle at 92% 0%,hsl(var(--mtk-glow)/.14),transparent 38%);border:1px solid hsl(var(--border));box-shadow:0 24px 60px -24px hsl(var(--mtk-glow)/.28);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.dark .tool-surface{background:linear-gradient(135deg,hsl(var(--card)/.8),hsl(var(--card)/.6)),radial-gradient(circle at 92% 0%,hsl(var(--mtk-glow)/.18),transparent 38%)}

/* ---------- navigation ---------- */
header,nav[class*="sticky"],nav[class*="fixed"]{-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
header[class*="bg-"],header,nav[class*="sticky"]{background-color:hsl(var(--background)/.62)!important;border-bottom:1px solid hsl(var(--border)/.7)!important}
footer{background-color:hsl(var(--card)/.5)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid hsl(var(--border)/.8)!important}

/* ---------- gradient buttons, text and accents ---------- */
.bg-primary,.btn-gradient{background-image:linear-gradient(135deg,var(--mtk-b1) 0%,var(--mtk-b2) 55%,var(--mtk-b3) 100%);background-color:var(--mtk-b1);color:#fff;border-color:transparent;box-shadow:0 10px 24px -10px hsl(var(--mtk-glow)/.7),inset 0 1px 0 #ffffff33}
.btn-gradient{background:linear-gradient(135deg,var(--mtk-b1) 0%,var(--mtk-b2) 55%,var(--mtk-b3) 100%)}
.bg-primary:hover,.btn-gradient:hover{filter:brightness(1.08) saturate(1.05)}
.text-primary-foreground{color:#fff}
.gradient-text{background:linear-gradient(120deg,var(--mtk-g1) 0%,var(--mtk-g2) 45%,var(--mtk-g3) 80%,#f59e0b 120%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}
.dark .gradient-text{background:linear-gradient(120deg,#8b7bff 0%,#c084fc 45%,#f472b6 80%,#fbbf24 120%);-webkit-background-clip:text;background-clip:text}
.bg-gradient-to-br{--tw-gradient-from:var(--mtk-b1) var(--tw-gradient-from-position);--tw-gradient-to:var(--mtk-b3) var(--tw-gradient-to-position)}
::selection{background:hsl(var(--primary)/.28)}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}

/* ---------- inputs ---------- */
input:focus,textarea:focus,select:focus{border-color:hsl(var(--primary)/.7);box-shadow:0 0 0 4px hsl(var(--primary)/.16)}

/* ---------- scrollbar ---------- */
*{scrollbar-width:thin;scrollbar-color:hsl(var(--primary)/.45) transparent}
@media (prefers-reduced-motion:reduce){a.group.bg-card:hover,a.bg-card:hover{translate:none}}

/* ---------- tool page guide sections ---------- */
[data-testid="tool-guide"]>div{background:hsl(var(--card)/.66);border:1px solid hsl(var(--border)/.9);border-radius:1.25rem;padding:1.5rem 1.75rem!important;margin-bottom:1.25rem!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 44px -26px hsl(var(--mtk-glow)/.4)}
[data-testid="tool-guide"] h2{display:flex;align-items:center;gap:.65rem;letter-spacing:-.01em}
[data-testid="tool-guide"] h2::before{content:"";width:.3rem;height:1.15em;border-radius:99px;background:linear-gradient(180deg,var(--mtk-g1),var(--mtk-g3));flex:none}
[data-testid="tool-how-to-use"] ol{list-style:none!important;padding-left:0!important;counter-reset:mtk}
[data-testid="tool-how-to-use"] li{counter-increment:mtk;position:relative;padding-left:2.5rem;margin-bottom:.75rem!important}
[data-testid="tool-how-to-use"] li::before{content:counter(mtk);position:absolute;left:0;top:.05rem;width:1.7rem;height:1.7rem;border-radius:99px;background:linear-gradient(135deg,var(--mtk-b1),var(--mtk-b3));color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center;box-shadow:0 6px 14px -6px hsl(var(--mtk-glow)/.8)}
[data-testid="tool-tips"] ul{list-style:none!important;padding-left:0!important}
[data-testid="tool-tips"] li{position:relative;padding-left:1.6rem}
[data-testid="tool-tips"] li::before{content:"";position:absolute;left:.2rem;top:.6em;width:.5rem;height:.5rem;border-radius:99px;background:linear-gradient(135deg,var(--mtk-g2),var(--mtk-g3))}
[data-testid="tool-faq"] .bg-card{box-shadow:none;background-color:hsl(var(--background)/.5)}
@media (max-width:640px){[data-testid="tool-guide"]>div{padding:1.1rem 1.1rem!important;border-radius:1rem}}