:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090909;
  color: #f6ead0;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(74, 224, 255, 0.23), transparent 36%),
    radial-gradient(ellipse at 90% 10%, rgba(244, 200, 107, 0.13), transparent 28%),
    linear-gradient(118deg, rgba(8, 95, 126, 0.22), transparent 31%, rgba(244, 200, 107, 0.08) 62%, transparent 84%),
    linear-gradient(180deg, #040506 0, #10120f 190px, #0c0d0c 320px, #080808 100%),
    #090909;
}

html::before,
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

html::before {
  z-index: 1;
  top: -3vh;
  left: -3vw;
  right: auto;
  bottom: auto;
  width: 2px;
  height: 2px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    8vw 12vh 0 0 rgba(126, 231, 255, 0.95),
    14vw 48vh 0 0 rgba(94, 255, 224, 0.82),
    23vw 21vh 0 1px rgba(255, 247, 201, 0.76),
    29vw 67vh 0 0 rgba(205, 174, 255, 0.72),
    35vw 36vh 0 0 rgba(126, 231, 255, 0.86),
    42vw 91vh 0 1px rgba(255, 211, 109, 0.62),
    51vw 17vh 0 0 rgba(143, 242, 189, 0.82),
    57vw 58vh 0 0 rgba(255, 255, 255, 0.78),
    64vw 33vh 0 1px rgba(126, 231, 255, 0.9),
    71vw 78vh 0 0 rgba(94, 255, 224, 0.74),
    79vw 9vh 0 0 rgba(255, 247, 201, 0.68),
    86vw 44vh 0 1px rgba(205, 174, 255, 0.66),
    93vw 88vh 0 0 rgba(126, 231, 255, 0.86),
    5vw 73vh 0 0 rgba(255, 158, 117, 0.62),
    18vw 84vh 0 1px rgba(143, 242, 189, 0.72),
    31vw 5vh 0 0 rgba(126, 231, 255, 0.76),
    46vw 42vh 0 0 rgba(94, 255, 224, 0.82),
    62vw 96vh 0 1px rgba(255, 211, 109, 0.56),
    76vw 63vh 0 0 rgba(255, 255, 255, 0.7),
    98vw 28vh 0 0 rgba(126, 231, 255, 0.82),
    3vw 39vh 0 0 rgba(94, 255, 224, 0.78),
    9vw 92vh 0 1px rgba(255, 247, 201, 0.58),
    16vw 25vh 0 0 rgba(126, 231, 255, 0.86),
    21vw 79vh 0 0 rgba(205, 174, 255, 0.64),
    27vw 43vh 0 1px rgba(143, 242, 189, 0.7),
    34vw 15vh 0 0 rgba(255, 211, 109, 0.54),
    39vw 63vh 0 0 rgba(94, 255, 224, 0.76),
    45vw 87vh 0 1px rgba(126, 231, 255, 0.82),
    53vw 29vh 0 0 rgba(255, 255, 255, 0.7),
    59vw 72vh 0 0 rgba(255, 158, 117, 0.58),
    66vw 11vh 0 1px rgba(143, 242, 189, 0.66),
    73vw 49vh 0 0 rgba(126, 231, 255, 0.82),
    81vw 84vh 0 0 rgba(94, 255, 224, 0.72),
    88vw 24vh 0 1px rgba(205, 174, 255, 0.6),
    95vw 61vh 0 0 rgba(255, 247, 201, 0.62);
  mix-blend-mode: screen;
  opacity: 0.92;
  image-rendering: pixelated;
  filter: contrast(1.95) saturate(1.35) drop-shadow(0 0 3px rgba(126, 231, 255, 0.72));
  animation: particle-fast 5.8s linear infinite alternate;
}

body::before {
  z-index: 1;
  top: -2vh;
  left: -2vw;
  right: auto;
  bottom: auto;
  width: 3px;
  height: 3px;
  border-radius: 0;
  background: rgba(126, 231, 255, 0.9);
  box-shadow:
    5vw 8vh 1px 0 rgba(126, 231, 255, 0.9),
    11vw 22vh 7px 2px rgba(94, 255, 224, 0.62),
    17vw 61vh 2px 1px rgba(255, 211, 109, 0.58),
    21vw 14vh 11px 4px rgba(126, 231, 255, 0.38),
    25vw 82vh 1px 2px rgba(205, 174, 255, 0.62),
    31vw 36vh 5px 1px rgba(143, 242, 189, 0.74),
    37vw 73vh 9px 4px rgba(255, 158, 117, 0.42),
    42vw 19vh 1px 0 rgba(255, 247, 201, 0.72),
    47vw 54vh 8px 2px rgba(94, 255, 224, 0.52),
    52vw 9vh 2px 1px rgba(126, 231, 255, 0.94),
    58vw 67vh 10px 4px rgba(205, 174, 255, 0.38),
    63vw 31vh 1px 2px rgba(255, 211, 109, 0.5),
    68vw 86vh 4px 1px rgba(143, 242, 189, 0.66),
    74vw 18vh 9px 3px rgba(126, 231, 255, 0.46),
    79vw 47vh 1px 0 rgba(255, 158, 117, 0.62),
    83vw 77vh 7px 2px rgba(94, 255, 224, 0.54),
    89vw 11vh 2px 1px rgba(205, 174, 255, 0.68),
    94vw 58vh 12px 4px rgba(255, 247, 201, 0.34),
    98vw 91vh 1px 2px rgba(126, 231, 255, 0.76),
    7vw 42vh 8px 2px rgba(94, 255, 224, 0.48),
    14vw 93vh 2px 1px rgba(255, 158, 117, 0.54),
    19vw 4vh 1px 0 rgba(143, 242, 189, 0.72),
    28vw 49vh 11px 4px rgba(126, 231, 255, 0.36),
    34vw 7vh 5px 1px rgba(255, 247, 201, 0.58),
    39vw 91vh 1px 2px rgba(94, 255, 224, 0.72),
    45vw 32vh 7px 2px rgba(255, 211, 109, 0.46),
    49vw 76vh 2px 1px rgba(205, 174, 255, 0.62),
    56vw 44vh 13px 5px rgba(126, 231, 255, 0.32),
    61vw 5vh 1px 0 rgba(94, 255, 224, 0.82),
    66vw 59vh 5px 2px rgba(255, 158, 117, 0.5),
    72vw 94vh 9px 4px rgba(143, 242, 189, 0.42),
    76vw 34vh 2px 1px rgba(255, 247, 201, 0.72),
    81vw 6vh 1px 2px rgba(255, 211, 109, 0.5),
    86vw 69vh 10px 4px rgba(126, 231, 255, 0.44),
    91vw 27vh 5px 1px rgba(205, 174, 255, 0.66),
    96vw 83vh 1px 0 rgba(94, 255, 224, 0.76),
    3vw 68vh 1px 0 rgba(255, 247, 201, 0.35),
    9vw 16vh 7px 2px rgba(126, 231, 255, 0.18),
    16vw 35vh 0 1px rgba(255, 211, 109, 0.3),
    23vw 57vh 2px 0 rgba(143, 242, 189, 0.44),
    29vw 24vh 4px 1px rgba(255, 158, 117, 0.24),
    36vw 83vh 1px 0 rgba(126, 231, 255, 0.56),
    41vw 12vh 0 0 rgba(205, 174, 255, 0.36),
    48vw 62vh 5px 2px rgba(94, 255, 224, 0.24),
    54vw 26vh 1px 1px rgba(255, 247, 201, 0.4),
    59vw 88vh 3px 0 rgba(255, 211, 109, 0.24),
    65vw 12vh 0 0 rgba(126, 231, 255, 0.66),
    71vw 51vh 6px 2px rgba(143, 242, 189, 0.2),
    77vw 73vh 1px 0 rgba(255, 158, 117, 0.38),
    84vw 41vh 3px 1px rgba(94, 255, 224, 0.34),
    88vw 96vh 0 1px rgba(205, 174, 255, 0.44),
    93vw 5vh 2px 0 rgba(255, 247, 201, 0.34),
    6vw 88vh 4px 1px rgba(255, 211, 109, 0.2),
    13vw 52vh 0 0 rgba(126, 231, 255, 0.62),
    18vw 76vh 2px 1px rgba(94, 255, 224, 0.32),
    24vw 29vh 1px 0 rgba(205, 174, 255, 0.48),
    32vw 96vh 6px 2px rgba(126, 231, 255, 0.18),
    38vw 45vh 0 1px rgba(255, 158, 117, 0.36),
    44vw 2vh 2px 0 rgba(143, 242, 189, 0.38),
    51vw 84vh 5px 1px rgba(255, 247, 201, 0.24),
    57vw 15vh 0 0 rgba(126, 231, 255, 0.58),
    64vw 74vh 2px 0 rgba(255, 211, 109, 0.28),
    69vw 39vh 1px 1px rgba(94, 255, 224, 0.44),
    75vw 97vh 7px 2px rgba(205, 174, 255, 0.18),
    82vw 22vh 0 0 rgba(255, 158, 117, 0.42),
    87vw 56vh 3px 1px rgba(126, 231, 255, 0.3),
    95vw 36vh 1px 0 rgba(143, 242, 189, 0.46),
    2vw 25vh 1px 0 rgba(126, 231, 255, 0.68),
    4vw 55vh 3px 1px rgba(94, 255, 224, 0.42),
    8vw 78vh 0 1px rgba(255, 247, 201, 0.4),
    10vw 31vh 9px 3px rgba(126, 231, 255, 0.26),
    12vw 64vh 1px 0 rgba(143, 242, 189, 0.58),
    15vw 11vh 2px 1px rgba(205, 174, 255, 0.5),
    20vw 45vh 5px 2px rgba(94, 255, 224, 0.36),
    22vw 96vh 1px 0 rgba(255, 211, 109, 0.5),
    26vw 18vh 0 1px rgba(126, 231, 255, 0.72),
    30vw 70vh 10px 4px rgba(255, 158, 117, 0.24),
    33vw 54vh 1px 0 rgba(255, 247, 201, 0.54),
    35vw 28vh 3px 1px rgba(143, 242, 189, 0.46),
    40vw 67vh 0 0 rgba(126, 231, 255, 0.76),
    43vw 39vh 6px 2px rgba(205, 174, 255, 0.34),
    46vw 97vh 2px 1px rgba(94, 255, 224, 0.48),
    50vw 23vh 1px 0 rgba(255, 211, 109, 0.44),
    53vw 52vh 8px 3px rgba(126, 231, 255, 0.28),
    55vw 3vh 0 1px rgba(143, 242, 189, 0.5),
    60vw 38vh 3px 1px rgba(255, 247, 201, 0.42),
    62vw 78vh 1px 0 rgba(205, 174, 255, 0.52),
    67vw 21vh 5px 2px rgba(94, 255, 224, 0.34),
    70vw 62vh 0 1px rgba(255, 158, 117, 0.46),
    73vw 4vh 2px 0 rgba(126, 231, 255, 0.68),
    78vw 89vh 9px 3px rgba(143, 242, 189, 0.24),
    80vw 31vh 1px 0 rgba(255, 247, 201, 0.5),
    85vw 53vh 4px 1px rgba(94, 255, 224, 0.42),
    90vw 72vh 0 1px rgba(255, 211, 109, 0.42),
    92vw 17vh 7px 2px rgba(126, 231, 255, 0.3),
    97vw 45vh 1px 0 rgba(205, 174, 255, 0.58),
    99vw 67vh 3px 1px rgba(94, 255, 224, 0.48),
    6vw 97vh 0 0 rgba(255, 158, 117, 0.44),
    18vw 88vh 4px 1px rgba(126, 231, 255, 0.34),
    27vw 62vh 1px 0 rgba(94, 255, 224, 0.62),
    41vw 82vh 2px 1px rgba(255, 211, 109, 0.36),
    57vw 61vh 0 0 rgba(143, 242, 189, 0.58),
    69vw 81vh 6px 2px rgba(126, 231, 255, 0.3),
    88vw 93vh 1px 0 rgba(255, 247, 201, 0.54),
    96vw 8vh 4px 1px rgba(255, 158, 117, 0.34),
    4vw 18vh 2px 0 rgba(126, 231, 255, 0.62),
    6vw 61vh 6px 2px rgba(94, 255, 224, 0.32),
    11vw 83vh 1px 1px rgba(255, 211, 109, 0.42),
    15vw 27vh 4px 1px rgba(205, 174, 255, 0.42),
    19vw 68vh 0 0 rgba(126, 231, 255, 0.68),
    24vw 6vh 7px 2px rgba(143, 242, 189, 0.28),
    28vw 88vh 2px 1px rgba(255, 247, 201, 0.48),
    33vw 33vh 1px 0 rgba(94, 255, 224, 0.66),
    36vw 57vh 8px 3px rgba(126, 231, 255, 0.26),
    40vw 14vh 0 1px rgba(255, 158, 117, 0.46),
    44vw 75vh 3px 1px rgba(143, 242, 189, 0.42),
    48vw 38vh 1px 0 rgba(255, 211, 109, 0.48),
    52vw 94vh 6px 2px rgba(205, 174, 255, 0.3),
    56vw 9vh 2px 1px rgba(126, 231, 255, 0.62),
    61vw 47vh 0 0 rgba(94, 255, 224, 0.72),
    65vw 83vh 5px 2px rgba(255, 247, 201, 0.3),
    69vw 26vh 1px 0 rgba(143, 242, 189, 0.58),
    74vw 57vh 8px 3px rgba(126, 231, 255, 0.24),
    78vw 15vh 2px 1px rgba(255, 158, 117, 0.44),
    82vw 76vh 0 1px rgba(94, 255, 224, 0.58),
    86vw 36vh 5px 2px rgba(205, 174, 255, 0.34),
    91vw 97vh 1px 0 rgba(255, 211, 109, 0.44),
    94vw 49vh 3px 1px rgba(126, 231, 255, 0.48),
    99vw 79vh 0 0 rgba(143, 242, 189, 0.6),
    2vw 94vh 4px 1px rgba(255, 158, 117, 0.34),
    13vw 7vh 1px 0 rgba(255, 247, 201, 0.52),
    22vw 39vh 6px 2px rgba(94, 255, 224, 0.3),
    31vw 74vh 0 1px rgba(126, 231, 255, 0.6),
    43vw 96vh 2px 0 rgba(205, 174, 255, 0.48),
    54vw 66vh 7px 2px rgba(143, 242, 189, 0.26),
    67vw 3vh 1px 0 rgba(255, 211, 109, 0.5),
    79vw 46vh 4px 1px rgba(94, 255, 224, 0.38),
    89vw 68vh 0 1px rgba(126, 231, 255, 0.56);
  mix-blend-mode: screen;
  opacity: 1;
  image-rendering: pixelated;
  filter: contrast(1.62) saturate(1.85) drop-shadow(0 0 8px rgba(126, 231, 255, 0.58));
  animation: pixel-drift 18s ease-in-out infinite alternate;
}

body::after {
  z-index: 0;
  background:
    radial-gradient(circle 11px at 14% 19%, rgba(126, 231, 255, 0.18), transparent 58%),
    radial-gradient(circle 7px at 29% 82%, rgba(255, 211, 109, 0.16), transparent 62%),
    radial-gradient(circle 15px at 68% 33%, rgba(94, 255, 224, 0.14), transparent 60%),
    radial-gradient(circle 9px at 84% 74%, rgba(205, 174, 255, 0.16), transparent 60%),
    radial-gradient(circle 3px at 44% 13%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(circle 5px at 93% 44%, rgba(255, 158, 117, 0.26), transparent 70%),
    radial-gradient(ellipse at 18% 23%, rgba(56, 189, 248, 0.36), transparent 27%),
    radial-gradient(ellipse at 74% 12%, rgba(248, 200, 107, 0.32), transparent 24%),
    radial-gradient(ellipse at 72% 82%, rgba(126, 231, 255, 0.28), transparent 28%),
    radial-gradient(ellipse at 42% 48%, rgba(94, 255, 224, 0.15), transparent 34%),
    linear-gradient(134deg, transparent 0 24%, rgba(34, 211, 238, 0.2) 34%, transparent 47% 100%),
    linear-gradient(180deg, rgba(3, 13, 19, 0.04), rgba(0, 0, 0, 0.58) 78%);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  opacity: 0.92;
  animation: particle-burst 9s ease-in-out infinite alternate;
}

@keyframes pixel-drift {
  from {
    transform: translate3d(-1.2%, -0.6%, 0) scale(1.035) rotate(-0.25deg);
  }
  to {
    transform: translate3d(1.6%, 1%, 0) scale(1.055) rotate(0.35deg);
  }
}

@keyframes particle-fast {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.68;
  }
  45% {
    opacity: 1;
  }
  to {
    transform: translate3d(3.8vw, -2.4vh, 0) scale(1.08);
    opacity: 0.9;
  }
}

@keyframes particle-burst {
  from {
    opacity: 0.66;
    filter: saturate(1.06) brightness(0.94);
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0.96;
    filter: saturate(1.55) brightness(1.18);
    transform: translate3d(1.7%, -1.1%, 0) scale(1.055);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

body.locked {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #152a8e 0%, #40204c 48%, #b1376c 100%);
}

.app-shell {
  position: relative;
  z-index: 2;
}

.login-screen.active {
  display: flex;
}

body.locked .app-shell {
  display: none;
}

.login-metaballs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(226, 73, 38, 0.38), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(177, 55, 108, 0.42), transparent 36%),
    linear-gradient(135deg, #152a8e, #40204c 54%, #b1376c);
}

.login-metaballs::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 0 42%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.32));
}

.login-metaballs-dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.14;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 206, 94, 0.56) 0 1px, transparent 1.5px);
  background-position: 0 0, 17px 23px;
  background-size: 34px 34px, 58px 58px;
  mix-blend-mode: screen;
}

#loginMetaballsCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.92;
}

.login-box {
  width: min(100%, 390px);
  display: grid;
  gap: 14px;
  border: 1px solid #6e5223;
  border-radius: 7px;
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, rgba(27, 24, 19, 0.88), rgba(15, 15, 14, 0.82));
  backdrop-filter: blur(14px) saturate(1.22);
  padding: 20px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 223, 156, 0.12);
}

.login-box .eyebrow {
  color: #c6a65f;
}

.login-error {
  min-height: 20px;
  color: #ff7767;
  font-size: 13px;
  font-weight: 800;
}

.app-shell {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) clamp(10px, 3vw, 14px) 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #f7e5bd;
  padding: 4px 2px 14px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-badge {
  max-width: 92px;
  overflow: hidden;
  border: 1px solid rgba(244, 200, 107, 0.42);
  border-radius: 6px;
  background: rgba(8, 8, 8, 0.58);
  color: #f4c86b;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-button {
  height: 38px;
  border: 1px solid #8f6b2d;
  border-radius: 7px;
  background: linear-gradient(180deg, #2a2419, #14110d);
  color: #f4c86b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px;
}

.eyebrow {
  margin: 0 0 3px;
  color: #c6a65f;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  color: #f7e5bd;
  font-size: 26px;
  line-height: 1.15;
  text-shadow: 0 1px 0 #000;
}

h2 {
  color: #f7e5bd;
  font-size: 18px;
}

.icon-button,
.lang-toggle,
.text-button,
.tab,
.primary {
  border: 0;
  cursor: pointer;
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid #8f6b2d;
  border-radius: 7px;
  background: linear-gradient(180deg, #2a2419, #14110d);
  color: #f4c86b;
  font-size: 22px;
}

.icon-button.is-loading span {
  display: inline-block;
  animation: spin-refresh 0.8s linear infinite;
}

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

.lang-toggle {
  min-width: 58px;
  height: 38px;
  border: 1px solid #8f6b2d;
  border-radius: 7px;
  background: linear-gradient(180deg, #2a2419, #14110d);
  color: #f4c86b;
  font-size: 14px;
  font-weight: 800;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stats article {
  min-width: 0;
  border: 1px solid #3b3325;
  border-radius: 7px;
  background: linear-gradient(180deg, #1b1813, #10100f);
  padding: 12px 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 223, 156, 0.08);
}

.stats span {
  display: block;
  color: #aa9a77;
  font-size: 12px;
  margin-bottom: 5px;
}

.stats strong {
  display: block;
  color: #f4c86b;
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  border: 1px solid #3b3325;
  border-radius: 7px;
  background: #11100e;
  padding: 5px;
  margin-bottom: 12px;
}

.tab {
  min-height: 46px;
  border-radius: 5px;
  color: #aa9a77;
  background: transparent;
  font-weight: 800;
  font-size: 16px;
}

.tab.active {
  color: #090909;
  background: linear-gradient(180deg, #f4c86b, #b48332);
}

.panel {
  display: none;
  border: 1px solid #3b3325;
  border-radius: 7px;
  background: linear-gradient(180deg, #171511, #0f0f0e);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 223, 156, 0.08);
}

.panel.active {
  display: block;
}

form,
.panel {
  gap: 12px;
}

form {
  display: grid;
}

label {
  display: grid;
  gap: 6px;
  color: #cbb98c;
  font-size: 13px;
  font-weight: 800;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #4c3d25;
  border-radius: 6px;
  background: #0a0a09;
  color: #f6ead0;
  min-height: 44px;
  padding: 10px 11px;
  outline: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #f4c86b;
  box-shadow: 0 0 0 3px rgba(244, 200, 107, 0.18);
}

.primary {
  min-height: 48px;
  border: 1px solid #f2ca70;
  border-radius: 7px;
  background: linear-gradient(180deg, #f4c86b, #a87628);
  color: #0a0907;
  font-weight: 900;
}

.secondary {
  margin-top: 12px;
}

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.text-button {
  color: #f4c86b;
  background: transparent;
  font-weight: 900;
}

.record-list {
  display: grid;
  gap: 8px;
}

.empty {
  color: #aa9a77;
  padding: 20px 4px;
  text-align: center;
}

.record {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border: 1px solid #3b3325;
  border-radius: 7px;
  padding: 10px;
  background: #11100e;
}

.record strong {
  display: block;
  color: #f7e5bd;
  font-size: 16px;
}

.record small {
  display: block;
  color: #aa9a77;
  margin-top: 3px;
}

.record .amount {
  color: #f4c86b;
  font-weight: 900;
  white-space: nowrap;
}

.record button {
  align-self: end;
  border: 0;
  background: transparent;
  color: #ff7767;
  font-weight: 900;
  padding: 2px 0;
}

#settingsPanel {
  display: none;
}

#settingsPanel.active {
  display: grid;
}

@media (max-width: 430px) {
  .app-shell {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stats strong {
    font-size: 17px;
  }

  .topbar {
    align-items: flex-start;
    gap: 10px;
  }

  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}


/* v29 管理员收入日志 + 当月营业额日历 */
.logs-panel.active {
  display: grid;
  gap: 12px;
}

.log-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.admin-note {
  margin-bottom: 4px;
  color: #f4c86b;
  font-size: 13px;
  font-weight: 800;
}

.date-picker {
  min-width: 158px;
}

.log-summary-grid,
.log-breakdown-grid,
.month-total-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.log-card,
.breakdown-card,
.month-total-cards article,
.monthly-calendar-panel {
  border: 1px solid #3b3325;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(27, 24, 19, 0.96), rgba(10, 10, 9, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 223, 156, 0.08);
}

.log-card {
  padding: 12px 11px;
}

.log-card span,
.month-total-cards span {
  display: block;
  color: #aa9a77;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.log-card strong,
.month-total-cards strong {
  color: #f4c86b;
  font-size: 23px;
  line-height: 1.1;
}

.breakdown-card {
  min-height: 112px;
  padding: 12px 11px;
}

.breakdown-card h3 {
  margin: 0 0 10px;
  color: #f7e5bd;
  font-size: 16px;
}

.breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(244, 200, 107, 0.12);
  padding: 6px 0;
  color: #f6ead0;
  font-size: 13px;
}

.breakdown-row:last-child {
  border-bottom: 0;
}

.breakdown-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breakdown-row strong {
  color: #f4c86b;
  white-space: nowrap;
}

.breakdown-row em {
  color: #aa9a77;
  font-style: normal;
  white-space: nowrap;
}

.empty-mini {
  color: #7d7057;
  font-size: 13px;
}

.log-list-head {
  margin: 4px 0 0;
}

.log-record .amount {
  align-self: start;
  font-size: 18px;
}

.monthly-calendar-panel {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 10px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-header h2 {
  font-size: 20px;
}

.calendar-month-control {
  display: grid;
  grid-template-columns: 34px minmax(112px, 1fr) 34px;
  align-items: center;
  gap: 8px;
  color: #f7e5bd;
  text-align: center;
}

.calendar-month-control button {
  width: 34px;
  height: 34px;
  border: 1px solid #4c3d25;
  border-radius: 6px;
  background: #0a0a09;
  color: #f4c86b;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.calendar-weekdays,
.revenue-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays {
  border: 1px solid #3b3325;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: rgba(244, 200, 107, 0.07);
}

.calendar-weekdays span {
  padding: 6px 0;
  color: #cbb98c;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.revenue-calendar {
  border-left: 1px solid #3b3325;
  border-top: 1px solid #3b3325;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

.calendar-cell {
  position: relative;
  min-height: 56px;
  border: 0;
  border-right: 1px solid #3b3325;
  border-bottom: 1px solid #3b3325;
  background: rgba(17, 16, 14, 0.95);
  color: #f6ead0;
  padding: 6px 5px;
  text-align: left;
}

.calendar-cell.muted {
  color: #6f6551;
  background: rgba(12, 12, 11, 0.72);
}

.calendar-cell.selected {
  z-index: 1;
  border: 1px solid #f4c86b;
  box-shadow: inset 0 0 0 1px rgba(244, 200, 107, 0.32), 0 0 16px rgba(244, 200, 107, 0.18);
  background: linear-gradient(180deg, rgba(51, 42, 25, 0.95), rgba(15, 15, 14, 0.98));
}

.day-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  min-height: 17px;
}

.day-line b {
  font-size: 13px;
}

.day-line em {
  border-radius: 999px;
  background: #f4c86b;
  color: #090909;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  padding: 1px 4px;
}

.calendar-cell strong {
  display: block;
  color: #f4c86b;
  font-size: 13px;
  line-height: 1.1;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.month-total-cards article {
  min-height: 76px;
  padding: 11px 12px;
}

.month-total-cards small {
  display: block;
  color: #aa9a77;
  font-size: 12px;
  margin-top: 2px;
}

@media (max-width: 430px) {
  .tabs { grid-template-columns: repeat(4, 1fr); }
  .tab { min-height: 46px; font-size: 15px; }
  .log-top { align-items: stretch; flex-direction: column; }
  .date-picker { min-width: 0; }
  .log-summary-grid,
  .log-breakdown-grid,
  .month-total-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .breakdown-card { min-height: 104px; padding: 10px; }
  .breakdown-row { grid-template-columns: 1fr; gap: 2px; }
  .calendar-header { align-items: flex-start; flex-direction: column; }
  .calendar-month-control { width: 100%; grid-template-columns: 34px 1fr 34px; }
  .calendar-cell { min-height: 51px; padding: 5px 4px; }
  .calendar-cell strong { font-size: 12px; margin-top: 7px; }
  .month-total-cards article { min-height: 68px; padding: 10px; }
  .month-total-cards strong { font-size: 18px; }
}


.meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.secondary-meta {
  margin-top: 6px;
}

.meta-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  border: 1px solid transparent;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-chip {
  color: #9fd4ff;
  background: rgba(73, 132, 196, 0.18);
  border-color: rgba(120, 177, 238, 0.35);
}

.payment-chip {
  color: #ffcf70;
  background: rgba(185, 124, 24, 0.2);
  border-color: rgba(255, 196, 79, 0.35);
}

.employee-chip {
  color: #93f2c0;
  background: rgba(30, 136, 95, 0.22);
  border-color: rgba(104, 230, 172, 0.35);
}

.customer-chip {
  color: #ff9cad;
  background: rgba(157, 49, 70, 0.2);
  border-color: rgba(255, 149, 170, 0.32);
}

.note-chip {
  color: #d5b7ff;
  background: rgba(93, 63, 170, 0.22);
  border-color: rgba(180, 148, 255, 0.35);
}

.log-record {
  align-items: start;
}

.log-record .amount,
.record .amount {
  font-size: 24px;
}


.plate-chip {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.26);
}


.record {
  align-items: start;
}

.record > div:first-child {
  min-width: 0;
}

.record strong {
  margin-bottom: 2px;
}

.log-record .amount,
.record .amount {
  min-width: 72px;
  text-align: right;
}

@media (max-width: 430px) {
  .meta-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .meta-chip {
    min-height: 27px;
    padding: 4px 6px;
    font-size: 11px;
  }
}


/* v33 compact record chips + mobile form fix */
.record {
  padding: 9px 10px;
}

.record strong {
  font-size: 15px;
  margin-bottom: 3px;
}

.record small.meta-row,
.log-record small.meta-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.record .meta-chip,
.log-record .meta-chip {
  width: auto !important;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1;
}

.secondary-meta {
  margin-top: 5px;
}

.log-record .amount,
.record .amount {
  min-width: 64px;
  font-size: 20px;
  line-height: 1.1;
  text-align: right;
}

.field-row > label {
  min-width: 0;
}

input,
select,
textarea {
  min-width: 0;
}

@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #entryPanel input,
  #entryPanel select,
  #entryPanel textarea {
    min-height: 42px;
  }

  .record {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .record .meta-chip,
  .log-record .meta-chip {
    min-height: 21px;
    padding: 2px 7px;
    font-size: 10.5px;
  }
}


/* v34 ultra clean compact cards */
.record,
.log-record {
  padding: 8px 10px;
  border-color: rgba(164, 126, 57, 0.34);
  background: linear-gradient(180deg, rgba(19, 17, 14, 0.98), rgba(12, 12, 11, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 223, 156, 0.04);
}

.record strong,
.log-record strong {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

.record small.meta-row,
.log-record small.meta-row {
  gap: 4px;
  margin-top: 4px;
}

.record .meta-chip,
.log-record .meta-chip {
  min-height: 18px;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.vehicle-chip {
  background: rgba(73, 132, 196, 0.12);
  border-color: rgba(120, 177, 238, 0.24);
}

.payment-chip {
  background: rgba(185, 124, 24, 0.12);
  border-color: rgba(255, 196, 79, 0.22);
}

.employee-chip {
  background: rgba(30, 136, 95, 0.14);
  border-color: rgba(104, 230, 172, 0.22);
}

.customer-chip {
  background: rgba(157, 49, 70, 0.13);
  border-color: rgba(255, 149, 170, 0.2);
}

.plate-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.note-chip {
  background: rgba(93, 63, 170, 0.13);
  border-color: rgba(180, 148, 255, 0.2);
}

.record .amount,
.log-record .amount {
  min-width: 56px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  padding-top: 1px;
}

.secondary-meta {
  margin-top: 4px;
}

@media (max-width: 560px) {
  .record,
  .log-record {
    padding: 7px 8px;
    gap: 7px;
  }

  .record strong,
  .log-record strong {
    font-size: 13px;
  }

  .record .meta-chip,
  .log-record .meta-chip {
    min-height: 17px;
    padding: 1px 6px;
    font-size: 9.5px;
  }

  .record .amount,
  .log-record .amount {
    min-width: 52px;
    font-size: 17px;
  }

  #entryPanel .field-row {
    gap: 9px;
  }

  #entryPanel label span {
    font-size: 12px;
  }

  #entryPanel input,
  #entryPanel select,
  #entryPanel textarea {
    min-height: 40px;
    padding: 9px 10px;
  }
}


/* v35 restore mobile 2-column entry layout */
@media (max-width: 560px) {
  #entryPanel .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #entryPanel label {
    gap: 5px;
  }

  #entryPanel label span {
    font-size: 12px;
    line-height: 1.2;
  }

  #entryPanel input,
  #entryPanel select,
  #entryPanel textarea {
    min-height: 39px;
    padding: 8px 10px;
    font-size: 14px;
  }

  #entryPanel textarea {
    min-height: 74px;
  }

  #entryPanel .primary {
    min-height: 46px;
    font-size: 15px;
  }
}

@media (max-width: 390px) {
  #entryPanel .field-row {
    gap: 8px;
  }

  #entryPanel input,
  #entryPanel select {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 13px;
  }

  #entryPanel textarea {
    padding: 8px 9px;
    font-size: 13px;
  }
}


/* v36 calendar mobile polish */
.calendar-cell {
  overflow: hidden;
}

.calendar-amount {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

@media (max-width: 430px) {
  .calendar-cell {
    min-height: 49px;
    padding: 5px 3px;
  }

  .calendar-cell .day-line b {
    font-size: 12px;
  }

  .calendar-cell .calendar-amount {
    color: #8fd8ff;
    font-size: 11px;
    line-height: 1;
    margin-top: 6px;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  .revenue-calendar {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
}


/* v37 mobile log typography + calendar refinements */
.calendar-month-control strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(244, 200, 107, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(31, 27, 20, 0.98), rgba(13, 12, 10, 0.98));
  color: #f8e9c1;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.calendar-month-control button {
  border-color: rgba(244, 200, 107, 0.24);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(33, 29, 22, 0.98), rgba(12, 11, 10, 0.98));
  color: #ffd777;
  box-shadow: inset 0 1px 0 rgba(255, 223, 156, 0.08);
}

.calendar-cell.selected {
  border-color: #ffd777;
  box-shadow: inset 0 0 0 1px rgba(255, 223, 156, 0.44), 0 0 18px rgba(255, 215, 119, 0.22);
  background: linear-gradient(180deg, rgba(63, 50, 24, 0.98), rgba(24, 20, 14, 0.98));
}

.calendar-cell.selected .day-line b {
  color: #fff2cf;
}

.calendar-cell.selected .calendar-amount {
  color: #9be4ff;
}

.calendar-cell.selected .day-line em {
  background: linear-gradient(180deg, #ffd777, #f0b93d);
  box-shadow: 0 0 10px rgba(255, 215, 119, 0.28);
}

.calendar-amount {
  color: #8fd8ff;
  font-weight: 900;
}

.calendar-cell.muted .calendar-amount {
  color: #6d93a8;
}

@media (max-width: 430px) {
  .log-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .log-card {
    padding: 10px 8px;
  }

  .log-card span {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .log-card strong {
    font-size: 18px;
  }

  .log-breakdown-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .breakdown-card {
    min-height: 0;
    padding: 10px;
  }

  .breakdown-card h3 {
    font-size: 14px;
    margin-bottom: 7px;
  }

  .breakdown-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    padding: 5px 0;
    font-size: 12px;
  }

  .breakdown-row span {
    white-space: nowrap;
  }

  .breakdown-row strong {
    color: #8fd8ff;
    font-size: 13px;
  }

  .breakdown-row em {
    font-size: 11px;
  }

  .calendar-header {
    gap: 8px;
  }

  .calendar-month-control {
    width: 100%;
    grid-template-columns: 38px 1fr 38px;
    gap: 7px;
  }

  .calendar-month-control button {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .calendar-month-control strong {
    min-height: 38px;
    font-size: 17px;
  }

  .calendar-weekdays span {
    font-size: 11px;
    padding: 5px 0;
  }

  .calendar-cell {
    min-height: 50px;
    padding: 5px 4px;
  }

  .calendar-cell .calendar-amount {
    color: #8fd8ff;
    font-size: 11px;
    line-height: 1;
    margin-top: 6px;
    white-space: nowrap;
  }

  .month-total-cards article {
    min-height: 66px;
    padding: 9px;
  }

  .month-total-cards span {
    font-size: 11px;
    margin-bottom: 5px;
  }

  .month-total-cards strong {
    font-size: 17px;
  }
}


/* v38 admin in-site unread notifications */
.tab-with-badge {
  position: relative;
}

.unread-badge {
  position: absolute;
  top: 5px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5d5d, #d82121);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 10px rgba(255, 67, 67, 0.45);
}

.admin-notice-bar {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  margin: -4px 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 96, 96, 0.45);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(70, 18, 18, 0.96), rgba(26, 10, 10, 0.96));
  color: #ffd9d9;
  text-align: left;
  cursor: pointer;
}

.admin-notice-bar strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ff4f4f;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.admin-notice-bar span {
  color: #ffe7e7;
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 430px) {
  .unread-badge {
    top: 3px;
    right: 4px;
    min-width: 17px;
    height: 17px;
    font-size: 10px;
    line-height: 17px;
  }

  .admin-notice-bar {
    margin-top: -3px;
    padding: 8px 10px;
  }
}


/* v39 mobile breakdown text repair */
.breakdown-row span {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .log-breakdown-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .breakdown-card {
    width: 100%;
    min-height: 0;
    padding: 10px 11px;
  }

  .breakdown-card h3 {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
  }

  .breakdown-row span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    word-break: normal;
    overflow-wrap: normal;
  }

  .breakdown-row strong {
    color: #8fd8ff !important;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }

  .breakdown-row em {
    color: #d1c19b;
    font-size: 11px;
    white-space: nowrap;
  }

  .log-card strong,
  .month-total-cards strong,
  .log-record .amount,
  .record .amount {
    color: #8fd8ff;
  }
}


/* v40 final mobile log layout / calendar / unread / amount color */
:root {
  --amount-cyan: #7ee7ff;
  --amount-gold: #ffd06a;
}

.log-card strong,
.breakdown-row strong,
.record .amount,
.log-record .amount,
.month-total-cards strong,
.calendar-amount {
  color: var(--amount-cyan) !important;
  text-shadow: 0 0 10px rgba(126, 231, 255, 0.12);
}

/* Make the three breakdown cards readable on phones and narrow webviews */
@media (max-width: 700px) {
  .logs-panel {
    padding-left: 12px;
    padding-right: 12px;
  }

  .log-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  .log-card {
    min-width: 0;
    padding: 10px 8px;
  }

  .log-card span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  .log-card strong {
    font-size: 18px;
    white-space: nowrap;
  }

  .log-breakdown-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .breakdown-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 11px 12px !important;
  }

  .breakdown-card h3 {
    margin-bottom: 8px !important;
    font-size: 15px !important;
    line-height: 1.15;
  }

  .breakdown-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 6px 0 !important;
    font-size: 13px !important;
  }

  .breakdown-row span {
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .breakdown-row strong {
    min-width: max-content !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 950 !important;
  }

  .breakdown-row em {
    min-width: max-content !important;
    color: #d8c8a2 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .log-record,
  .record {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .log-record .amount,
  .record .amount {
    min-width: 58px !important;
    font-size: 18px !important;
  }
}

/* Calendar: cleaner mobile month control and no wrapped money */
.calendar-month-control {
  align-items: stretch;
}

.calendar-month-control button,
.calendar-month-control strong {
  border-radius: 12px !important;
}

.calendar-cell {
  min-width: 0;
}

.calendar-amount {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-variant-numeric: tabular-nums;
}

.calendar-cell.selected {
  border-color: #ffe08a !important;
  background: linear-gradient(180deg, rgba(75, 56, 23, 0.98), rgba(24, 19, 12, 0.98)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.6), 0 0 18px rgba(255, 224, 138, 0.24) !important;
}

.calendar-cell.selected .calendar-amount {
  color: #7ee7ff !important;
}

.calendar-cell.selected .day-line em {
  color: #080808 !important;
  background: linear-gradient(180deg, #ffe08a, #e5ac2f) !important;
}

@media (max-width: 700px) {
  .calendar-header {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  .calendar-month-control {
    width: 100% !important;
    grid-template-columns: 40px 1fr 40px !important;
    gap: 8px !important;
  }

  .calendar-month-control button {
    width: 40px !important;
    height: 38px !important;
    font-size: 22px !important;
  }

  .calendar-month-control strong {
    min-height: 38px !important;
    font-size: 17px !important;
  }

  .calendar-weekdays span {
    padding: 5px 0 !important;
    font-size: 11px !important;
  }

  .calendar-cell {
    min-height: 49px !important;
    padding: 5px 3px !important;
  }

  .calendar-cell .day-line b {
    font-size: 12px !important;
  }

  .calendar-cell .day-line em {
    font-size: 9px !important;
    padding: 1px 3px !important;
  }

  .calendar-cell .calendar-amount {
    font-size: 10.5px !important;
    line-height: 1 !important;
    margin-top: 6px !important;
    letter-spacing: -0.04em !important;
  }

  .month-total-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .month-total-cards article {
    min-width: 0 !important;
    padding: 9px 7px !important;
  }

  .month-total-cards span,
  .month-total-cards small {
    font-size: 10.5px !important;
  }

  .month-total-cards strong {
    font-size: 17px !important;
    white-space: nowrap !important;
  }
}

/* Unread notice: smaller and cleaner */
.unread-badge {
  background: linear-gradient(180deg, #ff6a6a, #d91e1e) !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.admin-notice-bar {
  border-color: rgba(255, 106, 106, 0.42) !important;
  background: linear-gradient(180deg, rgba(52, 15, 15, 0.96), rgba(20, 8, 8, 0.96)) !important;
}

@media (max-width: 700px) {
  .admin-notice-bar {
    margin: -2px 0 10px !important;
    padding: 7px 9px !important;
    gap: 8px !important;
  }

  .admin-notice-bar strong {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }

  .admin-notice-bar span {
    font-size: 12px !important;
  }
}


/* v41: weak zero + classified amount highlight */
.calendar-cell .calendar-amount.amount-zero {
  color: rgba(203, 185, 140, 0.34) !important;
  text-shadow: none !important;
  font-weight: 800;
}

.amount-low,
.calendar-cell .calendar-amount.amount-low {
  color: #8fd8ff !important;
  text-shadow: 0 0 8px rgba(143, 216, 255, 0.12);
}

.amount-mid,
.calendar-cell .calendar-amount.amount-mid {
  color: #ffd36d !important;
  text-shadow: 0 0 8px rgba(255, 211, 109, 0.14);
}

.amount-high,
.calendar-cell .calendar-amount.amount-high {
  color: #8ff2bd !important;
  text-shadow: 0 0 8px rgba(143, 242, 189, 0.14);
}

.amount-top,
.calendar-cell .calendar-amount.amount-top {
  color: #ff9e75 !important;
  text-shadow: 0 0 10px rgba(255, 158, 117, 0.18);
}

.calendar-cell.selected .calendar-amount.amount-zero {
  color: rgba(255, 238, 203, 0.55) !important;
}

.calendar-cell.selected .calendar-amount.amount-low {
  color: #a7e6ff !important;
}

.calendar-cell.selected .calendar-amount.amount-mid {
  color: #ffe18a !important;
}

.calendar-cell.selected .calendar-amount.amount-high {
  color: #a5ffcd !important;
}

.calendar-cell.selected .calendar-amount.amount-top {
  color: #ffb08d !important;
}

@media (max-width: 700px) {
  .calendar-cell .calendar-amount.amount-zero {
    font-size: 12px !important;
    color: rgba(203, 185, 140, 0.30) !important;
  }
}


/* v42 saved login */
.remember-login-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  padding: 8px 0 2px;
  color: #d9cba4;
  font-size: 13px;
  font-weight: 800;
}

.remember-login-row input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: #f4c86b;
  padding: 0;
}

.remember-login-row span {
  line-height: 1.25;
}


/* v44: manual price input shown only when "Other / manual input" is selected */
.custom-amount-input {
  margin-top: 8px;
  border-color: #f2ca70;
  background: linear-gradient(180deg, rgba(18, 16, 12, 0.98), rgba(6, 6, 5, 0.98));
  color: #ffe4a3;
  font-weight: 800;
}

.custom-amount-input[hidden] {
  display: none !important;
}

.custom-amount-input::placeholder {
  color: rgba(255, 228, 163, 0.56);
}




/* v46 highlighted summary cards: larger, more premium, subtle motion */
.stats,
.log-summary-grid {
  gap: 10px;
}

.stats article,
.log-summary-grid .log-card {
  --accent: #74ecff;
  --accent-rgb: 116, 236, 255;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  min-height: 96px;
  padding: 14px 14px 15px;
  border-radius: 14px;
  border: 1px solid rgba(244, 200, 107, 0.22);
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.05), transparent 0 18%),
    radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.16), transparent 35%),
    linear-gradient(180deg, rgba(31, 28, 22, 0.98), rgba(10, 10, 9, 0.99));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 223, 156, 0.08),
    inset 0 -14px 22px rgba(0, 0, 0, 0.18);
}

.stats article:nth-child(1),
.log-summary-grid .log-card:nth-child(1) {
  --accent: #74ecff;
  --accent-rgb: 116, 236, 255;
}

.stats article:nth-child(2),
.log-summary-grid .log-card:nth-child(2) {
  --accent: #ffd777;
  --accent-rgb: 255, 215, 119;
}

.stats article:nth-child(3),
.log-summary-grid .log-card:nth-child(3) {
  --accent: #98f3b6;
  --accent-rgb: 152, 243, 182;
}

.stats article::before,
.log-summary-grid .log-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -32%;
  width: 55%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), var(--accent), transparent);
  opacity: 0.95;
  animation: statSheen 6.5s linear infinite;
}

.stats article::after,
.log-summary-grid .log-card::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.26), transparent 0 22%),
    radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 66%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 0 6px rgba(255, 255, 255, 0.015),
    0 0 22px rgba(var(--accent-rgb), 0.16);
  animation: statPulse 3.2s ease-in-out infinite;
}

.stats article span,
.log-summary-grid .log-card span {
  display: block;
  position: relative;
  z-index: 1;
  max-width: calc(100% - 52px);
  color: #ccb987;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 11px;
}

.stats article strong,
.log-summary-grid .log-card strong {
  display: inline-block;
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding-bottom: 8px;
  line-height: 1;
  font-size: clamp(28px, 4.6vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent) 56%, #dffcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.12);
}

.stats article strong::after,
.log-summary-grid .log-card strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: min(66px, 52%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.95;
}

@keyframes statPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes statSheen {
  from { transform: translateX(0); }
  to { transform: translateX(260%); }
}

@media (hover: hover) {
  .stats article:hover,
  .log-summary-grid .log-card:hover {
    transform: translateY(-1px);
    border-color: rgba(244, 200, 107, 0.35);
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(255, 223, 156, 0.05),
      inset 0 1px 0 rgba(255, 223, 156, 0.08),
      inset 0 -14px 22px rgba(0, 0, 0, 0.18);
  }
}

@media (max-width: 430px) {
  .stats,
  .log-summary-grid {
    gap: 8px;
  }

  .stats article,
  .log-summary-grid .log-card {
    min-height: 88px;
    padding: 12px 11px 13px;
    border-radius: 12px;
  }

  .stats article::after,
  .log-summary-grid .log-card::after {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
  }

  .stats article span,
  .log-summary-grid .log-card span {
    max-width: calc(100% - 44px);
    margin-bottom: 9px;
    font-size: 11px;
  }

  .stats article strong,
  .log-summary-grid .log-card strong {
    font-size: clamp(24px, 7vw, 30px);
    padding-bottom: 7px;
  }

  .stats article strong::after,
  .log-summary-grid .log-card strong::after {
    width: min(54px, 48%);
    height: 2.5px;
  }
}


/* v47 admin edit daily detail modal */
body.modal-open {
  overflow: hidden;
}

.record-actions,
.log-amount-box {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.record-actions button,
.log-amount-box button {
  min-height: 24px;
  border: 1px solid rgba(244, 200, 107, 0.34);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(38, 32, 22, 0.98), rgba(14, 13, 11, 0.98));
  color: #ffd777;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 9px;
}

.record-actions button[data-delete] {
  border-color: rgba(255, 119, 103, 0.32);
  color: #ff8d80;
}

.edit-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.edit-card {
  width: min(100%, 560px);
  max-height: min(92vh, 760px);
  overflow: auto;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(244, 200, 107, 0.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(28, 25, 19, 0.98), rgba(8, 8, 8, 0.99));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 223, 156, 0.08);
  padding: 16px;
}

.edit-card-head,
.edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.edit-card-head h2 {
  font-size: 21px;
}

.edit-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 200, 107, 0.28);
  border-radius: 50%;
  background: #0a0a09;
  color: #f6ead0;
  font-size: 25px;
  line-height: 1;
}

.edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.edit-actions {
  margin-top: 2px;
}

.edit-actions .primary {
  min-width: 150px;
}

@media (max-width: 430px) {
  .edit-modal {
    align-items: end;
    padding: 10px;
  }

  .edit-card {
    max-height: 88vh;
    border-radius: 16px 16px 12px 12px;
    padding: 14px;
  }

  .edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

.edit-card input,
.edit-card select,
.edit-card textarea {
  min-height: 40px;
  padding: 8px 9px;
  font-size: 13px;
}

  .edit-actions .primary {
    min-width: 128px;
  }
}

.edit-native-select {
  display: none;
}

.edit-select-wrap {
  position: relative;
}

.edit-select-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid #4c3d25;
  border-radius: 6px;
  background: #0a0a09;
  color: #f6ead0;
  padding: 10px 34px 10px 11px;
  text-align: left;
  font-weight: 900;
}

.edit-select-button::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 9px;
  color: #f6ead0;
}

.edit-select-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow: auto;
  border: 1px solid #6e5223;
  border-radius: 6px;
  background: #050505;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.52);
}

.edit-select-menu button {
  display: block;
  width: 100%;
  min-height: 40px;
  border: 0;
  border-bottom: 1px solid rgba(244, 200, 107, 0.14);
  background: transparent;
  color: #f6ead0;
  padding: 9px 11px;
  text-align: left;
  font-weight: 900;
}

.edit-select-menu button.active,
.edit-select-menu button:hover {
  background: #d3d3d3;
  color: #050505;
}