@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

:root {
  /* Dark Neumorphism (Default) */
  --bg-main: #21242b;
  --neu-dark: #15171c;
  --neu-light: #2d313a;

  --neu-raised: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
  --neu-pressed: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light);
  --neu-sm-raised: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  --neu-sm-pressed: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);

  --text-primary: #e2e8f0;
  --text-muted: #94a3b8;
  --accent-cyan: #06b6d4;
  --accent-purple: #8b5cf6;
  --accent-orange: #fb923c;
  --tree-line: rgba(255, 255, 255, 0.1);
  --m-blue: #0076f5;
  --m-pink: #cf30aa;
  --m-void: var(--bg-main);
}

.light-theme {
  /* Light Neumorphism */
  --bg-main: #e0e5ec;
  --neu-dark: #a3b1c6;
  --neu-light: #ffffff;

  --neu-raised: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
  --neu-pressed: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light);
  --neu-sm-raised: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
  --neu-sm-pressed: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);

  --text-primary: #2d3748;
  --text-muted: #718096;
  --accent-cyan: #0093af;
  --accent-purple: #6b46c1;
  --tree-line: rgba(0, 0, 0, 0.1);
  --m-void: var(--bg-main);
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  transition: background-color 0.4s ease, color 0.4s ease;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-family: "GmarketSans", ui-sans-serif, system-ui, sans-serif;
}

/* Custom Neumorphism Utilities */
.neu-raised {
  box-shadow: var(--neu-raised);
}

.neu-pressed {
  box-shadow: var(--neu-pressed);
}

.neu-sm-raised {
  box-shadow: var(--neu-sm-raised);
}

.neu-sm-pressed {
  box-shadow: var(--neu-sm-pressed);
}

.glow-card-box {
  position: relative;
  border-radius: 20px;
  background: var(--bg-main);
  box-shadow: var(--neu-raised);
  border: 1px solid rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}

.light-theme .glow-card-box {
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.glow-action-btn {
  border-radius: 99px;
  font-weight: 600;
  background: var(--bg-main);
  box-shadow: var(--neu-sm-raised);
  transition: 0.2s;
  cursor: pointer;
  border: none;
  outline: none;
}

.glow-action-btn:hover {
  box-shadow: var(--neu-sm-pressed);
}

/* --- Premium Poda Background Layer (Rainbow Hover) --- */
.poda-bg-layer {
  position: absolute;
  z-index: 0;
  inset: -2px; /* Slight inset to stay on/under the border */
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease; /* Faster entry */
}

button:hover .poda-bg-layer {
  opacity: 1;
  visibility: visible;
}

/* Specific button lift to match master-center */
button.neu-raised:hover, button.neu-pressed:hover {
  transform: translateY(-2px);
  z-index: 20;
}

@keyframes spin-slow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.poda-bg-layer::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
}

button:hover .poda-bg-layer::before {
  animation: spin-slow 3s linear infinite;
}

/* Icon Shaking Animation to match master-center */
@keyframes icon-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

button:hover .shake-icon {
  display: inline-block;
  animation: icon-shake 0.5s ease-in-out infinite;
  transform-origin: center;
}

.poda-bg-layer.l1 { filter: blur(4px); opacity: 0.8; }
.poda-bg-layer.l1::before {
  background: conic-gradient(var(--m-void), var(--m-blue) 5%, var(--m-void) 38%, var(--m-void) 50%, var(--m-pink) 60%, var(--m-void) 87%);
  transform: translate(-50%, -50%) rotate(60deg);
}

.poda-bg-layer.l2 { filter: blur(3px); opacity: 0.7; }
.poda-bg-layer.l2::before {
  background: conic-gradient(transparent, #18116a, transparent 10%, transparent 50%, #6e1b60, transparent 60%);
  transform: translate(-50%, -50%) rotate(82deg);
}

.poda-bg-layer.l3 { filter: blur(2px); opacity: 0.5; }
.poda-bg-layer.l3::before {
  background: conic-gradient(transparent 0%, #a099d8, transparent 8%, transparent 50%, #dfa2da, transparent 58%);
  transform: translate(-50%, -50%) rotate(83deg);
  filter: brightness(1.4);
}

.poda-bg-layer.l4 { filter: blur(0.5px); }
.poda-bg-layer.l4::before {
  background: conic-gradient(transparent, var(--m-blue) 5%, transparent 15%, transparent 50%, var(--m-pink) 60%, transparent 70%);
  transform: translate(-50%, -50%) rotate(70deg);
  filter: brightness(1.5);
}

/* Permanent background mask for buttons to prevent color leakage during transition */
button::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--bg-main);
  border-radius: 98px; /* Slightly less than button for inner mask */
  z-index: 1;
  pointer-events: none;
}

/* Specific radius for category buttons (overriding the 99px default if needed) */
#field-options button, #media-options button, #budget-options button {
  border-radius: 12px;
}
#field-options button::after, #media-options button::after, #budget-options button::after {
  border-radius: 11px;
}

/* Ensure selected state still looks right with the mask */
button.neu-pressed::after {
  background: transparent; /* Allow pressed inset shadow to show */
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}

button.neu-pressed:hover::after {
  background: var(--bg-main); /* But mask it on hover for the glow effect */
}

/* Specific lift for bottom buttons */
.glow-action-btn:hover {
  transform: translateY(-2px);
  z-index: 60;
}

.btn-label-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Animations */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUpFade 0.5s ease forwards;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-5px);
  }
}

.animate-shake {
  animation: shake 0.4s ease;
}

/* Theme Switch Styles from flow-center */
.theme-switch-wrapper {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 50;
}

.theme-switch {
  --toggle-size: 12px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --clouds-color: #F3FDFF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-night-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
}

.theme-switch__moon {
  transform: translate(0);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -4.062em;
  left: 0.312em;
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__checkbox:not(:checked)+.theme-switch__container {
  background-color: var(--container-light-bg);
}

.theme-switch__checkbox:not(:checked)+.theme-switch__container .theme-switch__circle-container {
  left: var(--circle-container-offset);
}

.theme-switch__checkbox:not(:checked)+.theme-switch__container .theme-switch__moon {
  transform: translateX(100%);
}

.theme-switch__checkbox:not(:checked)+.theme-switch__container .theme-switch__clouds {
  bottom: -0.625em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-main);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--neu-dark);
  border-radius: 10px;
}

.light-theme ::-webkit-scrollbar-thumb {
  background: var(--neu-dark);
}