:root { --bg:#0b1220; --card:#111a2b; --fg:#e6efff; --muted:#9db2d7; --accent:#5ee7ff; --ok:#6ee7a6; --err:#ff7878; }
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 10% -10%, #1b2a4a, #0b1220);color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}
.container{max-width:960px;margin:2rem auto;padding:1rem}
.card{background:var(--card);border:1px solid #23314f;border-radius:16px;padding:1rem;box-shadow:0 10px 30px rgba(0,0,0,.25)}
h1,h2{line-height:1.2}
label{display:block;margin:.75rem 0}
input[type=text],input[type=password]{width:100%;padding:.6rem .75rem;border-radius:10px;border:1px solid #30415f;background:#0d172b;color:var(--fg)}
button{background:var(--accent);color:#001018;border:0;border-radius:10px;padding:.65rem 1rem;font-weight:600;cursor:pointer}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.day{background:#0e1a30;border:1px solid #25314a;border-radius:10px;padding:.5rem;min-height:70px}
.day h4{margin:.25rem 0;font-size:.9rem}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-size:.75rem;border:1px solid #2b3a57;background:#0c1a30}
.flex{display:flex;gap:.5rem;align-items:center}
.center{text-align:center}
.warn{color:var(--err)}
.ok{color:var(--ok)}
.footer{margin-top:2rem;color:var(--muted);font-size:.9rem;text-align:center}

/* Floating total badge (top-right inside .card) */
.card { position: relative; }
.floating-total {
  position: absolute; top: 12px; right: 16px;
  background: #0e1a30; border: 1px solid #2b3a57;
  padding: .35rem .6rem; border-radius: 10px; font-weight: 600;
}

/* === SVG Radial Menu (wheel) === */
.radial {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 340px; margin: 1rem 0 1.25rem;
}
.wheel { overflow: visible; }

/* Make slices clickable reliably */
.slice { cursor: pointer; }
.slice.disabled { cursor: not-allowed; }
.slice path { pointer-events: auto; }     /* clicks land on the shape */
.slice .count { pointer-events: none; }   /* text doesn’t steal clicks */

/* Image + overlay */
.slice path.img { stroke: #2b3a57; stroke-width: 1.5; }
.slice path.shade { fill: rgba(0,0,0,.35); transition: filter 180ms ease; }

/* Hover/frozen brighten a bit */
.slice:not(.disabled).active path.shade,
.slice.frozen path.shade { filter: brightness(1.15); }

/* Common stroke + transitions for both paths */
.slice path{
  stroke:#2b3a57;
  stroke-width:1.5;
  transition:transform 180ms ease, filter 180ms ease, fill 180ms ease, opacity 180ms ease;
  transform-origin:150px 150px;
}

/* The dark overlay that sits above the image */
.slice path.shade{
  fill:rgba(0,0,0,.35);
}

/* Optional: fallback color ONLY if there is no pattern/image */
.slice path.img.noimg{
  fill:#10243a;
}

.slice .count,
.slice .desc {
  font: 600 14px/1.2 system-ui, Segoe UI, Roboto, sans-serif;
  fill: #e6efff;
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms ease;
}
.slice .desc { opacity: 0; font-weight: 600; font-size: 15px; }

/* Hover/focus: zoom slice & swap count→desc (kept for fallback if desc shown in-SVG) */
.slice:not(.disabled).active path,
.slice:not(.disabled):hover path { transform: scale(1.05); filter: brightness(1.2); }
.slice:not(.disabled).active .count,
.slice:not(.disabled):hover .count { opacity: 0; }
.slice:not(.disabled).active .desc,
.slice:not(.disabled):hover .desc { opacity: 1; }

/* Disabled slice */
.slice.disabled path   { fill: #1a2435; opacity: 0.45; }
.slice.disabled .count { fill: #9aa7bd; opacity: 0.65; }
.slice.disabled .desc  { display: none; }

/* Count styling */
.slice .count { paint-order: stroke; stroke: rgba(0,0,0,0.35); stroke-width: 1; font-size: 16px; }

/* Golden star for custom-needed items (data-custom="1" set in HTML) */
.slice[data-custom="1"] .count { fill: #ffd95e; }

/* === Center overlay for descriptions (HTML overlay, always readable) === */
.slice .desc { display: none; } /* hide in-SVG desc if using overlay */

.wheel-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  text-align: center;
  pointer-events: none;
  transition: opacity 150ms ease, transform 180ms ease;
  opacity: 0;
}
.wheel-center.active { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
.wheel-center .bubble {
  display: inline-block;
  padding: .35rem .6rem;
  background: rgba(14,26,48,.92);
  border: 1px solid #2b3a57;
  border-radius: 10px;
  font: 600 15px/1.3 system-ui, Segoe UI, Roboto, sans-serif;
  color: #e6efff;
}

/* --- Mobile niceties --- */
@media (max-width: 480px) {
  .container { padding: 0 .75rem; }
  .wheel { width: 260px; height: 260px; }
}

/* Status badge + muted text for Big page */
.badge {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  border: 1px solid #2b3a57;
  background: #0c1a30;
  color: #9db2d7;
  margin-right: .35rem;
}
.muted { color: #9db2d7; }

/* Optional: tighter list spacing for review items */
.card ul { margin:.5rem 0 1rem; padding-left:1.1rem; }
.card li { margin:.25rem 0; }
/* Make the whole slice obviously clickable, even on SVG <g> */
.slice { cursor: pointer; }
.slice.disabled { cursor: not-allowed; }

/* Ensure the path can receive pointer events; keep text non-interactive */
.slice path { pointer-events: auto; }
.slice .count { pointer-events: none; }