/* Shared sky / space theme */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"] {
  --bg:#020617; --bg-soft:#0b1630; --card:#0c172d; --card-soft:#111f3b;
  --border:#263a5f; --text:#f1f5f9; --muted:#a4b2c8; --shadow:0 18px 45px rgba(0,0,0,.38);
}

html[data-theme="light"] {
  --bg:#cfeeff; --bg-soft:#e7f7ff; --card:#fff; --card-soft:#f0faff;
  --border:#bddcec; --text:#17324a; --muted:#627d91; --shadow:0 16px 38px rgba(36,105,143,.13);
}

body { position:relative; isolation:isolate; transition:background-color .6s ease,color .3s ease; }

/* Keep the animated sky above the body paint and below every page element. */
body > * { position:relative; z-index:2; }

/* Calm daylight: plain clear sky */
html[data-theme="light"] body {
  color:var(--text) !important;
  background:#cfeeff !important;
  background-image:linear-gradient(180deg,#bfe8ff 0%,#dff5ff 70%,#edfaff 100%) !important;
  background-attachment:fixed !important;
}

/* Deep-space night */
html[data-theme="dark"] body {
  color:var(--text) !important;
  background:#020617 !important;
  background-image:radial-gradient(ellipse at bottom,#0d2448 0%,#061128 48%,#020617 100%) !important;
  background-attachment:fixed !important;
}

/* Two star fields move at different speeds to mimic Earth's slow rotation. */
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after {
  position:fixed !important; inset:-35vh -35vw !important; z-index:1 !important;
  width:auto !important; height:auto !important; content:"" !important; border:0 !important;
  border-radius:0 !important; opacity:1 !important; pointer-events:none !important;
  transform:none; filter:none !important; will-change:transform;
}

html[data-theme="dark"] body::before {
  background-image:
    radial-gradient(circle,#fff 0 1px,transparent 1.4px),
    radial-gradient(circle,#bedbff 0 1.2px,transparent 1.7px),
    radial-gradient(circle,#fff 0 .7px,transparent 1.1px);
  background-position:0 0,47px 73px,91px 29px;
  background-size:127px 127px,181px 181px,73px 73px;
  animation:earth-star-drift 125s linear infinite;
  opacity:.92 !important;
}

html[data-theme="dark"] body::after {
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1.8px,transparent 2.3px),
    radial-gradient(circle,rgba(150,199,255,.8) 0 1px,transparent 1.5px);
  background-position:28px 14px,110px 85px;
  background-size:283px 283px,211px 211px;
  animation:earth-star-drift-far 205s linear infinite;
  opacity:.68 !important;
}

html[data-theme="light"] body::before,
html[data-theme="light"] body::after { display:none !important; }

@keyframes earth-star-drift {
  from { transform:translate3d(-7vw,-4vh,0) rotate(-3deg); }
  to { transform:translate3d(22vw,13vh,0) rotate(5deg); }
}
@keyframes earth-star-drift-far {
  from { transform:translate3d(8vw,-7vh,0) rotate(4deg); }
  to { transform:translate3d(-18vw,12vh,0) rotate(-4deg); }
}

/* Occasional planets crossing the night sky. */
.space-planets {
  position:fixed !important; inset:0 !important; z-index:1 !important;
  overflow:hidden; pointer-events:none; display:none;
}
html[data-theme="dark"] .space-planets { display:block; }

.space-planet {
  position:absolute; display:block; border-radius:50%; will-change:transform;
  filter:drop-shadow(0 0 18px rgba(125,211,252,.2));
}
.planet-blue {
  top:16%; left:-110px; width:72px; height:72px;
  background:
    radial-gradient(ellipse at 35% 28%,rgba(255,255,255,.75) 0 4%,transparent 5%),
    repeating-linear-gradient(16deg,transparent 0 11px,rgba(7,89,133,.35) 12px 17px),
    radial-gradient(circle at 34% 30%,#67e8f9 0,#0284c7 47%,#082f49 76%,#020617 100%);
  box-shadow:inset -15px -10px 22px rgba(0,0,0,.58),0 0 26px rgba(56,189,248,.18);
  animation:planet-pass-one 88s linear -24s infinite;
}
.planet-gold {
  top:69%; right:-90px; width:48px; height:48px;
  background:
    radial-gradient(circle at 34% 27%,#fef3c7 0,#f59e0b 38%,#92400e 72%,#1c1917 100%);
  box-shadow:inset -10px -8px 15px rgba(0,0,0,.55),0 0 20px rgba(245,158,11,.16);
  animation:planet-pass-two 112s linear -67s infinite;
}
.planet-ringed {
  top:40%; left:-160px; width:40px; height:40px;
  background:radial-gradient(circle at 34% 28%,#dbeafe 0,#3b82f6 42%,#172554 76%,#020617 100%);
  box-shadow:inset -8px -6px 12px rgba(0,0,0,.58);
  animation:planet-pass-three 142s linear -91s infinite;
}
.planet-ringed::after {
  position:absolute; top:14px; left:-15px; width:68px; height:13px; content:"";
  border:3px solid rgba(186,230,253,.72); border-top-color:rgba(186,230,253,.2);
  border-radius:50%; transform:rotate(-17deg);
}

@keyframes planet-pass-one {
  0%,8% { transform:translate3d(-150px,8vh,0) rotate(0); opacity:0; }
  12% { opacity:.92; }
  66% { opacity:.92; }
  72%,100% { transform:translate3d(calc(100vw + 280px),-18vh,0) rotate(90deg); opacity:0; }
}
@keyframes planet-pass-two {
  0%,18% { transform:translate3d(130px,-5vh,0); opacity:0; }
  22% { opacity:.88; }
  72% { opacity:.88; }
  78%,100% { transform:translate3d(calc(-100vw - 230px),13vh,0); opacity:0; }
}
@keyframes planet-pass-three {
  0%,30% { transform:translate3d(-190px,3vh,0) rotate(-12deg); opacity:0; }
  34% { opacity:.82; }
  76% { opacity:.82; }
  82%,100% { transform:translate3d(calc(100vw + 310px),10vh,0) rotate(8deg); opacity:0; }
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .login-shell,
html[data-theme="dark"] .shell,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .item-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .subcategory-card,
html[data-theme="dark"] .child-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .year-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .order-box,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .topbar {
  color:var(--text) !important; background:rgba(10,23,45,.9) !important;
  border-color:var(--border) !important; box-shadow:var(--shadow) !important;
  backdrop-filter:blur(14px);
}

/* Night containers: neutral near-black glass, never pink/orange. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .shell,
html[data-theme="dark"] .login-shell,
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .welcome,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .home-sidebar,
html[data-theme="dark"] .catalog-sections,
html[data-theme="dark"] .category-section,
html[data-theme="dark"] .child-tabs-section,
html[data-theme="dark"] .items-section,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .item-card,
html[data-theme="dark"] .days-item-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .subcategory-card,
html[data-theme="dark"] .child-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .year-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .order-box,
html[data-theme="dark"] .facts,
html[data-theme="dark"] .days-price-box,
html[data-theme="dark"] .year-info-box,
html[data-theme="dark"] .year-number-box,
html[data-theme="dark"] .year-summary-box,
html[data-theme="dark"] .year-confirm-box,
html[data-theme="dark"] .year-complete-box,
html[data-theme="dark"] .recharge-card-box,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .error-box {
  color:#eef4ff !important;
  background:rgba(7,14,27,.74) !important;
  background-image:none !important;
  border-color:rgba(112,137,174,.28) !important;
  box-shadow:0 15px 38px rgba(0,0,0,.26) !important;
  backdrop-filter:blur(12px) saturate(115%) !important;
}

html[data-theme="dark"] .section-header,
html[data-theme="dark"] .item-content,
html[data-theme="dark"] .recharge-card-head,
html[data-theme="dark"] .breadcrumb {
  color:#e8eef8 !important;
  background-color:transparent !important;
  background-image:none !important;
}

html[data-theme="dark"] .category-icon,
html[data-theme="dark"] .subcategory-image,
html[data-theme="dark"] .child-image,
html[data-theme="dark"] .service-image,
html[data-theme="dark"] .item-visual,
html[data-theme="dark"] .item-image,
html[data-theme="dark"] .home-sidebar-mark {
  color:#dcecff !important;
  background:rgba(17,29,49,.82) !important;
  background-image:none !important;
  border-color:rgba(125,151,188,.25) !important;
}

html[data-theme="dark"] .child-card.active,
html[data-theme="dark"] .service-card.active,
html[data-theme="dark"] .home-sidebar-link.active {
  color:#fff !important;
  background:rgba(28,43,67,.9) !important;
  border-color:rgba(125,211,252,.58) !important;
}

/* Large middle wrappers stay completely invisible; only their inner cards show. */
html[data-theme="dark"] .catalog-sections,
html[data-theme="dark"] .category-section,
html[data-theme="dark"] .child-tabs-section,
html[data-theme="dark"] .items-section,
html[data-theme="dark"] .activity-list,
html[data-theme="dark"] .years-list,
html[data-theme="dark"] .items-grid,
html[data-theme="dark"] .child-grid,
html[data-theme="dark"] .numbers-grid,
html[data-theme="dark"] .year-info-grid,
html[data-theme="dark"] .year-numbers-grid,
html[data-theme="dark"] .year-summary-grid,
html[data-theme="dark"] .days-price-grid {
  background:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* Home: exact night surfaces. */
html[data-theme="dark"] .topbar {
  background:rgba(8,16,29,.76) !important;
  background-image:none !important;
  border-color:rgba(120,145,180,.28) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
  backdrop-filter:blur(11px) !important;
}

html[data-theme="dark"] .summary-chip,
html[data-theme="dark"] .summary-chip.role-chip {
  color:#f8fafc !important;
  background:rgba(4,10,20,.78) !important;
  background-image:none !important;
  border-color:rgba(125,151,188,.32) !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px) !important;
}

html[data-theme="dark"] .summary-chip .chip-label {
  color:#9fb0c8 !important;
}

html[data-theme="dark"] .summary-chip .chip-value {
  color:#f8fafc !important;
}

/* Activity page: dark neutral surfaces with no warm/pink remnants. */
html[data-theme="dark"] .activity-page .topbar,
html[data-theme="dark"] .activity-page .panel,
html[data-theme="dark"] .activity-page .activity-card,
html[data-theme="dark"] .activity-page .activity-item,
html[data-theme="dark"] .activity-page .filters,
html[data-theme="dark"] .activity-page .navbar,
html[data-theme="dark"] .activity-page .empty,
html[data-theme="dark"] .activity-page .error-box {
  color:#eef4ff !important;
  background:rgba(7,14,27,.82) !important;
  background-image:none !important;
  border-color:rgba(112,137,174,.3) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.25) !important;
  backdrop-filter:blur(10px) !important;
}

html[data-theme="dark"] .activity-page .activity-list,
html[data-theme="dark"] .activity-page .toolbar,
html[data-theme="dark"] .activity-page .section-header {
  background:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

html[data-theme="dark"] .activity-page .filter-button,
html[data-theme="dark"] .activity-page .button.secondary,
html[data-theme="dark"] .activity-page .count,
html[data-theme="dark"] .activity-page .status,
html[data-theme="dark"] .activity-page .badge {
  color:#dbeafe !important;
  background:#111d32 !important;
  background-image:none !important;
  border-color:#304563 !important;
}

html[data-theme="dark"] .activity-page .filter-button.active {
  color:#fff !important;
  background:#1e3a5f !important;
  border-color:#38bdf8 !important;
}

html[data-theme="dark"] .activity-page .search-input,
html[data-theme="dark"] .activity-page input {
  color:#f8fafc !important;
  background:#091426 !important;
  border-color:#304563 !important;
}

/* Global night audit: replace every warm pink/orange surface with dark navy. */
html[data-theme="dark"] {
  --primary:#17263d !important;
  --primary-dark:#0a1322 !important;
  --primary-hover:#223754 !important;
  --primary-soft:#1a2c46 !important;
  --card-soft:#111f34 !important;
}

html[data-theme="dark"] body .welcome,
html[data-theme="dark"] body .navbar,
html[data-theme="dark"] body .filters,
html[data-theme="dark"] body .currency-switch,
html[data-theme="dark"] body .package-order-panel,
html[data-theme="dark"] body .counter-summary,
html[data-theme="dark"] body .price-box,
html[data-theme="dark"] body .otp-number,
html[data-theme="dark"] body .message,
html[data-theme="dark"] body .count,
html[data-theme="dark"] body .category-empty {
  color:#e5edf8 !important;
  background:#101d31 !important;
  background-image:none !important;
  border-color:#2d4261 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] body .button,
html[data-theme="dark"] body .year-button,
html[data-theme="dark"] body .save-button,
html[data-theme="dark"] body .package-buy-button,
html[data-theme="dark"] body .logout-button {
  color:#f8fafc !important;
  background:#17263d !important;
  background-image:none !important;
  border-color:#334b6d !important;
  box-shadow:none !important;
}

html[data-theme="dark"] body .button:hover,
html[data-theme="dark"] body .year-button:hover,
html[data-theme="dark"] body .save-button:hover,
html[data-theme="dark"] body .package-buy-button:hover {
  background:#223754 !important;
  border-color:#4d6c96 !important;
}

html[data-theme="dark"] body .button.secondary,
html[data-theme="dark"] body .filter-button,
html[data-theme="dark"] body .item-type-button,
html[data-theme="dark"] body .currency-button {
  color:#cdd9ea !important;
  background:#101d31 !important;
  background-image:none !important;
  border-color:#2d4261 !important;
}

html[data-theme="dark"] body .nav-link.active,
html[data-theme="dark"] body .filter-button.active,
html[data-theme="dark"] body .item-type-button.active,
html[data-theme="dark"] body .currency-button.active,
html[data-theme="dark"] body .child-card.active,
html[data-theme="dark"] body .service-card.active {
  color:#fff !important;
  background:#1b304d !important;
  background-image:none !important;
  border-color:#4d6c96 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] body .child-card.active::before {
  background:#1b304d !important;
  border-color:#4d6c96 !important;
}

html[data-theme="dark"] body .item-visual,
html[data-theme="dark"] body .days-item-link,
html[data-theme="dark"] body .year-result,
html[data-theme="dark"] body .year-result-box {
  color:#e5edf8 !important;
  background:#0d192b !important;
  background-image:none !important;
  border-color:#2d4261 !important;
}

html[data-theme="dark"] body a,
html[data-theme="dark"] body .breadcrumb a,
html[data-theme="dark"] body .child-arrow,
html[data-theme="dark"] body .item-arrow,
html[data-theme="dark"] body .eyebrow,
html[data-theme="dark"] body .toggle {
  color:#7dd3fc !important;
}

html[data-theme="dark"] body input,
html[data-theme="dark"] body select,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body .input,
html[data-theme="dark"] body .filter-input,
html[data-theme="dark"] body .search-input,
html[data-theme="dark"] body .package-target-input,
html[data-theme="dark"] body .year-input {
  color:#f1f5f9 !important;
  background:#091426 !important;
  background-image:none !important;
  border-color:#304563 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] #catalogContainer {
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

html[data-theme="dark"] .subcategory-grid {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  filter:none !important;
}

html[data-theme="dark"] .home-sidebar {
  color:#eef4ff !important;
  background:rgba(8,16,29,.82) !important;
  background-image:none !important;
  border-color:rgba(120,145,180,.28) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(12px) !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important;
}

html[data-theme="dark"] .home-sidebar-title,
html[data-theme="dark"] .home-sidebar-link {
  color:#dfe9f7 !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
}

html[data-theme="dark"] .home-sidebar-link:hover {
  color:#fff !important;
  background:rgba(25,40,63,.82) !important;
}

/* Subcategory tile: icon/image and name only, with no container paint. */
.subcategory-card,
html[data-theme="dark"] .subcategory-card,
html[data-theme="light"] .subcategory-card {
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.subcategory-image,
html[data-theme="dark"] .subcategory-image,
html[data-theme="light"] .subcategory-image {
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

.subcategory-card:hover .subcategory-image {
  border:0 !important;
  box-shadow:none !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .login-shell,
html[data-theme="light"] .shell,
html[data-theme="light"] .account-card,
html[data-theme="light"] .action-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .item-card,
html[data-theme="light"] .activity-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .child-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .year-card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .order-box,
html[data-theme="light"] .empty {
  color:var(--text); background:rgba(255,255,255,.92); border-color:var(--border); box-shadow:var(--shadow);
}

html[data-theme="dark"] .input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .filter-input {
  color:var(--text) !important; background:#101d35 !important; border-color:#30466e !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#8292aa !important; }
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .field-help,
html[data-theme="dark"] .item-description,
html[data-theme="dark"] p { color:var(--muted); }
html[data-theme="dark"] a:not(.button) { color:#7dd3fc; }

.theme-toggle {
  position:fixed !important; right:18px; bottom:18px; z-index:99999 !important; display:grid;
  width:52px; height:52px; place-items:center; padding:0; border:1px solid var(--border);
  border-radius:50%; color:var(--text); background:var(--card); box-shadow:var(--shadow);
  font-family:inherit; font-size:23px; line-height:1; cursor:pointer;
  transition:transform .2s,border-color .2s,background .3s;
}
.theme-toggle:hover { transform:translateY(-3px) rotate(8deg); border-color:#38bdf8; }
.theme-toggle:focus-visible { outline:3px solid rgba(56,189,248,.35); outline-offset:3px; }

@media (prefers-reduced-motion:reduce) {
  html[data-theme="dark"] body::before,
  html[data-theme="dark"] body::after,
  .space-planet { animation:none; }
}
@media(max-width:650px) {
  .theme-toggle { right:14px; bottom:14px; width:48px; height:48px; }
  .planet-blue { width:56px; height:56px; }
  .planet-gold { width:38px; height:38px; }
}

/* Draw the frame progressively around the element without external padding. */
@property --frame-progress {
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}

.subcategory-grid .subcategory-card,
.items-grid .item-card,
.items-grid .days-item-card {
  position:relative;
  z-index:0;
  border-radius:10% !important;
}

.subcategory-grid .subcategory-image,
.items-grid .item-card,
.items-grid .days-item-card {
  border-radius:10% !important;
  transition:transform .34s ease,box-shadow .34s ease !important;
  will-change:transform;
}

.subcategory-grid .subcategory-card::before,
.items-grid .item-card::before,
.items-grid .days-item-card::before {
  --frame-progress:0%;
  position:absolute;
  z-index:8;
  content:"";
  pointer-events:none;
  border-radius:10%;
  padding:3px;
  background:conic-gradient(
    from -90deg,
    #38bdf8 0 var(--frame-progress),
    transparent var(--frame-progress) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:
    --frame-progress .34s linear,
    opacity .08s linear,
    transform .34s ease;
}

/* The subcategory frame covers only the square image, not its label. */
.subcategory-grid .subcategory-card::before {
  top:0;
  left:0;
  width:100%;
  aspect-ratio:1;
}

.items-grid .item-card::before,
.items-grid .days-item-card::before { inset:0; }

@media (hover:hover) and (pointer:fine) {
  .subcategory-card:hover .subcategory-image,
  .items-grid .item-card:hover,
  .items-grid .days-item-card:hover {
    z-index:5;
    transform:scale(1.1);
    box-shadow:0 12px 28px rgba(2,132,199,.2) !important;
  }

  .subcategory-grid .subcategory-card:hover::before,
  .items-grid .item-card:hover::before,
  .items-grid .days-item-card:hover::before {
    --frame-progress:100%;
    opacity:1;
    transform:scale(1.1);
  }
}

.subcategory-grid .subcategory-card:focus-visible::before,
.items-grid .item-card:focus-visible::before,
.items-grid .days-item-card:focus-visible::before {
  --frame-progress:100%;
  opacity:1;
}

@media (prefers-reduced-motion:reduce) {
  .subcategory-grid .subcategory-image,
  .items-grid .item-card,
  .items-grid .days-item-card,
  .subcategory-grid .subcategory-card::before,
  .items-grid .item-card::before,
  .items-grid .days-item-card::before { transition:none !important; }
}

/* Reserve room for the 10% scale so cards never get clipped by their grids. */
.category-section {
  overflow:visible !important;
}

.subcategory-grid {
  padding-top:12px !important;
  padding-right:12px !important;
  padding-bottom:16px !important;
  padding-left:12px !important;
  scroll-padding-inline:12px;
}

.items-grid {
  box-sizing:border-box;
  padding:14px !important;
  overflow:visible !important;
}

.items-section,
.child-tabs-section {
  overflow:visible !important;
}

@media(max-width:650px) {
  .subcategory-grid {
    padding-top:8px !important;
    padding-right:8px !important;
    padding-bottom:12px !important;
    padding-left:8px !important;
    scroll-padding-inline:8px;
  }
  .items-grid { padding:10px !important; }
}