/* ============================================================
   designs.css — 5 ta dizayn mavzusi (designs.js bilan birga)
   html[data-design="default|rings|blinds|grid|prism"], html.design-fx = animatsion dizayn
   ============================================================ */

/* ---------- Fon canvas: UI ortida, bosishlarni to'smaydi ---------- */
#design-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: none; z-index: -1; pointer-events: none; user-select: none; }
html.design-fx:not(.design-nogl) #design-bg { display: block; opacity: 0; transition: opacity .5s ease; }
/* Birinchi WebGL kadri chizilgach — animatsiya statik rasm ustidan sekin paydo bo'ladi (eski/oddiy fon "miltillamaydi") */
html.design-fx.design-live:not(.design-nogl) #design-bg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.design-fx:not(.design-nogl) #design-bg { transition: none; } }

/* ---------- Har bir dizayn palitrasi ---------- */
html[data-design="galaxy"] {
  --d-base: #04050f;
  --bg: #060818; --surface: rgba(12, 16, 40, 0.62); --surface2: rgba(34, 42, 92, 0.5);
  --glass: rgba(9, 12, 32, 0.6); --glass-strong: rgba(10, 13, 34, 0.86);
  --border: rgba(140, 160, 255, 0.15); --border-hover: rgba(150, 165, 255, 0.36);
  --accent: #6E7BFF; --accent2: #A78BFA; --accent-glow: rgba(110, 123, 255, 0.32);
  --gold: #F7C25B; --gold-dim: rgba(247, 194, 91, 0.15);
  --green: #4ADE9B; --red: #FB7185; --info: #93A5FF;
  --text: #EEF1FF; --text-muted: rgba(238, 241, 255, 0.70); --text-dim: rgba(238, 241, 255, 0.66);
  --theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --char-shirt: #6E7BFF; --char-shirt-dark: #5560E0; --char-shirt-darker: #3F48B8;
  --char-pants-l: #A78BFA; --char-pants-r: #8B6EF0; --char-pants-l-dark: #6D4FD6; --char-pants-r-dark: #5639B8;
}
html[data-design="rings"] {
  --d-base: #07050f;
  --bg: #0a0716; --surface: rgba(20, 13, 38, 0.66); --surface2: rgba(46, 32, 82, 0.55);
  --glass: rgba(16, 10, 32, 0.62); --glass-strong: rgba(18, 11, 36, 0.86);
  --border: rgba(190, 140, 255, 0.16); --border-hover: rgba(190, 140, 255, 0.36);
  --accent: #A855F7; --accent2: #6366F1; --accent-glow: rgba(168, 85, 247, 0.32);
  --gold: #F7B84B; --gold-dim: rgba(247, 184, 75, 0.15);
  --green: #4ADE9B; --red: #FB7185; --info: #818CF8;
  --text: #F5F1FF; --text-muted: rgba(245, 241, 255, 0.70); --text-dim: rgba(245, 241, 255, 0.66);
  --theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --char-shirt: #A855F7; --char-shirt-dark: #8B3FD9; --char-shirt-darker: #6D28B8;
  --char-pants-l: #6366F1; --char-pants-r: #4F46E5; --char-pants-l-dark: #4338CA; --char-pants-r-dark: #3730A3;
}
html[data-design="blinds"] {
  --d-base: #0b0618;
  --bg: #0d0820; --surface: rgba(22, 12, 44, 0.68); --surface2: rgba(58, 34, 104, 0.52);
  --glass: rgba(18, 9, 38, 0.64); --glass-strong: rgba(20, 10, 42, 0.87);
  --border: rgba(255, 159, 252, 0.17); --border-hover: rgba(255, 159, 252, 0.38);
  --accent: #8657FF; --accent2: #FF9FFC; --accent-glow: rgba(134, 87, 255, 0.34);
  --gold: #FFC266; --gold-dim: rgba(255, 194, 102, 0.15);
  --green: #4ADE9B; --red: #FF6B8E; --info: #B79BFF;
  --text: #FFF4FE; --text-muted: rgba(255, 244, 254, 0.70); --text-dim: rgba(255, 244, 254, 0.66);
  --theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --char-shirt: #FF9FFC; --char-shirt-dark: #E07FDD; --char-shirt-darker: #B95FB6;
  --char-pants-l: #5227FF; --char-pants-r: #4520D6; --char-pants-l-dark: #3818B0; --char-pants-r-dark: #2C138A;
}
html[data-design="grid"] {
  --d-base: #07080c;
  --bg: #090a10; --surface: rgba(14, 15, 22, 0.76); --surface2: rgba(40, 42, 56, 0.6);
  --glass: rgba(12, 13, 19, 0.64); --glass-strong: rgba(14, 15, 22, 0.88);
  --border: rgba(125, 211, 252, 0.13); --border-hover: rgba(125, 211, 252, 0.34);
  --accent: #2F86D4; --accent2: #7DD3FC; --accent-glow: rgba(125, 211, 252, 0.28);
  --gold: #F5B547; --gold-dim: rgba(245, 181, 71, 0.15);
  --green: #4ADE9B; --red: #F87171; --info: #7DD3FC;
  --text: #EEF6FB; --text-muted: rgba(238, 246, 251, 0.68); --text-dim: rgba(238, 246, 251, 0.64);
  --theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --char-shirt: #7DD3FC; --char-shirt-dark: #4FB3E0; --char-shirt-darker: #2F86D4;
  --char-pants-l: #4D4757; --char-pants-r: #3E3947; --char-pants-l-dark: #322E3A; --char-pants-r-dark: #26232D;
}
html[data-design="prism"] {
  --d-base: #06040d;
  --bg: #0a0618; --surface: rgba(18, 11, 36, 0.68); --surface2: rgba(48, 30, 92, 0.54);
  --glass: rgba(14, 8, 30, 0.62); --glass-strong: rgba(16, 9, 34, 0.87);
  --border: rgba(168, 85, 247, 0.18); --border-hover: rgba(168, 85, 247, 0.40);
  --accent: #8B5CF6; --accent2: #6366F1; --accent-glow: rgba(139, 92, 246, 0.34);
  --gold: #F7B84B; --gold-dim: rgba(247, 184, 75, 0.15);
  --green: #4ADE9B; --red: #FB7185; --info: #A5B4FC;
  --text: #F6F2FF; --text-muted: rgba(246, 242, 255, 0.70); --text-dim: rgba(246, 242, 255, 0.66);
  --theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --char-shirt: #A855F7; --char-shirt-dark: #7C3AED; --char-shirt-darker: #5B21B6;
  --char-pants-l: #6366F1; --char-pants-r: #4F46E5; --char-pants-l-dark: #4338CA; --char-pants-r-dark: #3730A3;
}

/* ---------- Animatsion dizaynlar: shisha (glass) UI ---------- */
html.design-fx { background: var(--d-base); color-scheme: dark; }
html.design-fx body { background: transparent; }
/* Galaxy: canvas shaffof — yulduzlar ilova foni (chuqur koinot + yumshoq tumanlik) ustida */
html[data-design="galaxy"] {
  background:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(88, 104, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 82% 86%, rgba(150, 100, 255, 0.13), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, #0a0d26 0%, var(--d-base) 75%) fixed;
  background-color: var(--d-base);
}
html.design-fx body::before, html.design-fx body::after { display: none; }
html.design-fx ::-webkit-scrollbar-track, html.design-fx ::-webkit-scrollbar-corner { background: transparent; }
html.design-fx ::-webkit-scrollbar-thumb { border-color: transparent; background-clip: padding-box; }

/* Katta konteynerlar — backdrop blur (soni oz: mobil GPU uchun) */
html.design-fx .modal,
html.design-fx .x-box,
html.design-fx #pomo-manage-panel,
html.design-fx .levelup-box,
html.design-fx #pomo-float,
html.design-fx [style*="background:#1C1C25"] {
  background: var(--glass-strong) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.design-fx .levelup-box { background: linear-gradient(135deg, var(--glass-strong), color-mix(in srgb, var(--accent) 22%, var(--glass-strong))) !important; }
html.design-fx #ds-sidebar,
html.design-fx #ds-aside {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
html.design-fx #x-bnav {
  background: color-mix(in srgb, var(--glass-strong) 92%, transparent);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}
html.design-fx .modal-overlay { background: rgba(3, 2, 8, 0.55); }
html.design-fx #pomo-modal-overlay { background: color-mix(in srgb, var(--d-base) 82%, transparent); }
html.design-fx .x-ov { background: rgba(3, 2, 8, 0.5); }

/* Kartalar: yarim shaffof + nozik yorug' chegarasi */
html.design-fx .stat,
html.design-fx .task-card,
html.design-fx .progress-wrap,
html.design-fx .settings-sub-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.22);
}
/* Rang (label) chizig'i shisha soyasi ostida yo'qolmasin */
html.design-fx .task-card.has-label {
  box-shadow: inset 4px 0 0 var(--tk-label), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.22);
}
html.design-fx .header-left h1 { background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--accent2) 60%, #fff) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.design-fx .tab.active,
html.design-fx #x-bnav button.active { text-shadow: 0 0 18px var(--accent-glow); }
html.design-fx .modal-overlay .modal input,
html.design-fx .modal-overlay .modal textarea,
html.design-fx .modal-overlay .modal select { background-color: rgba(255, 255, 255, 0.05); }

/* backdrop-filter yo'q brauzerlar — qalinroq (deyarli to'liq) fon, matn o'qilishi uchun */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-design="rings"]  { --surface: rgba(20, 13, 38, 0.86); --glass: rgba(16, 10, 32, 0.9); --glass-strong: rgba(18, 11, 36, 0.97); }
  html[data-design="blinds"] { --surface: rgba(22, 12, 44, 0.88); --glass: rgba(18, 9, 38, 0.9); --glass-strong: rgba(20, 10, 42, 0.97); }
  html[data-design="grid"]   { --surface: rgba(16, 17, 24, 0.88); --glass: rgba(12, 13, 19, 0.9); --glass-strong: rgba(14, 15, 22, 0.97); }
  html[data-design="prism"]  { --surface: rgba(18, 11, 36, 0.88); --glass: rgba(14, 8, 30, 0.9); --glass-strong: rgba(16, 9, 34, 0.97); }
  html[data-design="galaxy"] { --surface: rgba(12, 16, 40, 0.88); --glass: rgba(9, 12, 32, 0.9); --glass-strong: rgba(10, 13, 34, 0.97); }
}

/* WebGL yo'q — statik gradient fon */
html.design-nogl[data-design="galaxy"],
html.design-fx:not(.design-live)[data-design="galaxy"] {
  background:
    radial-gradient(1.2px 1.2px at 20% 30%, #fff 50%, transparent 100%) 0 0 / 137px 151px,
    radial-gradient(1px 1px at 70% 60%, rgba(200,210,255,.9) 50%, transparent 100%) 0 0 / 89px 97px,
    radial-gradient(1.6px 1.6px at 40% 80%, rgba(255,255,255,.85) 50%, transparent 100%) 0 0 / 211px 199px,
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(88,104,255,.16), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, #0a0d26 0%, #04050f 75%) fixed;
  background-color: #04050f;
}
html.design-nogl[data-design="rings"], html.design-fx:not(.design-live)[data-design="rings"] { background: radial-gradient(circle at 50% 46%, rgba(168,85,247,.28), transparent 38%), repeating-radial-gradient(circle at 50% 46%, transparent 0 46px, rgba(150,90,245,.35) 47px 48px, transparent 49px 92px), #07050f fixed; }
html.design-nogl[data-design="blinds"], html.design-fx:not(.design-live)[data-design="blinds"] { background: repeating-linear-gradient(110deg, rgba(0,0,0,.5) 0 2px, transparent 2px 60px), linear-gradient(110deg, #6b3a80, #2a1580) fixed; }
html.design-nogl[data-design="grid"], html.design-fx:not(.design-live)[data-design="grid"] { background: radial-gradient(ellipse at 50% 50%, rgba(125,211,252,.12), transparent 50%), linear-gradient(rgba(77,71,87,.5) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(77,71,87,.5) 1px, transparent 1px) 0 0 / 48px 48px, #07080c fixed; }
html.design-nogl[data-design="prism"], html.design-fx:not(.design-live)[data-design="prism"] { background: radial-gradient(circle at 50% 45%, rgba(168,85,247,.45), transparent 40%), repeating-conic-gradient(from 0deg at 50% 45%, rgba(124,58,237,.22) 0 6deg, transparent 6deg 20deg), #06040d fixed; }

/* ---------- Sozlamalar: dizayn tanlash kartalari ---------- */
.dz-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin-bottom: 10px; }
.dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.dz-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px 6px 9px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.dz-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.dz-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dz-card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.dz-name { font-size: var(--fs-sm); font-weight: 700; padding: 4px 3px 0; line-height: 1.2; }
.dz-desc { font-size: var(--fs-2xs); color: var(--text-muted); padding: 0 3px; line-height: 1.3; }
.dz-prev { position: relative; display: block; height: 64px; border-radius: 9px; overflow: hidden; background: #0E0E12; }
.dz-prev-in { position: absolute; inset: 0; }
.dz-check { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.4); }

.dz-prev-default { background: radial-gradient(circle at 18% 22%, rgba(124,92,252,.45), transparent 45%), radial-gradient(circle at 85% 90%, rgba(245,166,35,.28), transparent 45%), #0E0E12; }
.dz-prev-default .dz-prev-in { background: linear-gradient(#18181F, #18181F) 12px 36px / 46% 9px no-repeat, linear-gradient(#22222C, #22222C) 12px 18px / 30% 9px no-repeat; border-radius: 4px; }
body.light .dz-prev-default { background: radial-gradient(circle at 18% 22%, rgba(124,92,252,.25), transparent 45%), #F4F3FF; }
body.light .dz-prev-default .dz-prev-in { background: linear-gradient(#fff, #fff) 12px 36px / 46% 9px no-repeat, linear-gradient(#E3E2F4, #E3E2F4) 12px 18px / 30% 9px no-repeat; }

.dz-prev-rings { background: radial-gradient(circle at 50% 50%, rgba(168,85,247,.35), transparent 55%), #07050f; }
.dz-prev-rings .dz-prev-in { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(176,104,250,.95) 7.5px 8.5px, rgba(140,100,245,.25) 9.5px, transparent 11px 15px); -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 46px, transparent 54px); mask: radial-gradient(circle at 50% 50%, #000 0 46px, transparent 54px); filter: drop-shadow(0 0 3px rgba(168,85,247,.8)); animation: dz-pulse 2.6s ease-in-out infinite; }
.dz-prev-blinds { background: linear-gradient(110deg, #FF9FFC, #5227FF); }
.dz-prev-blinds .dz-prev-in { background: radial-gradient(circle at 35% 40%, rgba(255,255,255,.35), transparent 45%), repeating-linear-gradient(110deg, rgba(255,255,255,.18) 0 2px, rgba(0,0,0,0) 4px 9px, rgba(0,0,0,.45) 13px 14px); animation: dz-sway 4s ease-in-out infinite alternate; }
.dz-prev-grid { background: #07080c; perspective: 70px; }
.dz-prev-grid .dz-prev-in { inset: 30% -40% -60%; background: linear-gradient(transparent 0 46%, rgba(125,211,252,.85) 50%, transparent 54%) 0 0 / 100% 200%, linear-gradient(rgba(110,100,125,.9) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgba(110,100,125,.9) 1px, transparent 1px) 0 0 / 12px 12px; transform: rotateX(62deg); transform-origin: 50% 0; animation: dz-scan 2.8s linear infinite; }
.dz-prev-prism { background: radial-gradient(circle at 50% 55%, #fff 0, rgba(168,85,247,.9) 6%, rgba(99,102,241,.35) 30%, transparent 60%), #06040d; }
.dz-prev-prism .dz-prev-in { inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(168,85,247,.75) 0 4deg, transparent 6deg 16deg, rgba(99,102,241,.6) 18deg 21deg, transparent 23deg 34deg); -webkit-mask: radial-gradient(circle, #000 0 10%, transparent 48%); mask: radial-gradient(circle, #000 0 10%, transparent 48%); animation: dz-spin 14s linear infinite; }
.dz-prev-galaxy { background: radial-gradient(ellipse at 30% 25%, rgba(88,104,255,.35), transparent 60%), radial-gradient(ellipse at 80% 85%, rgba(150,100,255,.28), transparent 60%), #05061a; }
.dz-prev-galaxy .dz-prev-in::before, .dz-prev-galaxy .dz-prev-in::after {
  content: ''; position: absolute; inset: -30%;
  background:
    radial-gradient(1.3px 1.3px at 20% 30%, #fff 50%, transparent 100%) 0 0 / 23px 19px,
    radial-gradient(1px 1px at 70% 60%, rgba(205,215,255,.95) 50%, transparent 100%) 0 0 / 17px 21px,
    radial-gradient(1.8px 1.8px at 45% 80%, #fff 45%, transparent 100%) 0 0 / 41px 37px;
  animation: dz-warp 3.2s linear infinite;
}
.dz-prev-galaxy .dz-prev-in::after { animation-delay: -1.6s; background-position: 7px 5px, 3px 9px, 13px 11px; }
@keyframes dz-warp { 0% { transform: scale(.55); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes dz-pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes dz-sway { from { transform: translateX(-4px) skewX(-2deg); } to { transform: translateX(4px) skewX(2deg); } }
@keyframes dz-scan { from { background-position: 0 100%, 0 0, 0 0; } to { background-position: 0 -100%, 0 0, 0 0; } }
@keyframes dz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dz-prev-in, .dz-prev-in::before, .dz-prev-in::after { animation: none !important; } }
.dz-prev-galaxy .dz-prev-in::after { opacity: .6; }
/* Animatsiya o'chiq bo'lsa — kartadagi kichik preview'lar ham to'xtaydi */
html.lu-still .dz-prev-in, html.lu-still .dz-prev-in::before, html.lu-still .dz-prev-in::after { animation: none !important; }
html.lu-still .dz-prev-galaxy .dz-prev-in::before { opacity: 1; transform: scale(1); }

/* 🔒 Qulflangan (sotib olinmagan) dizayn kartasi */
.dz-card.locked .dz-prev { filter: saturate(.55) brightness(.72); }
.dz-lock { position: absolute; top: 5px; left: 6px; font-size: 14px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.dz-price { position: absolute; right: 5px; bottom: 5px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.62); color: #FFD27A; font-size: 11px; font-weight: 800; line-height: 1.4; }
.dz-tag { position: absolute; left: 5px; bottom: 5px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.dz-buy { font-size: var(--fs-2xs); color: var(--accent); font-weight: 700; padding: 0 3px; line-height: 1.3; }
.dz-card.locked:hover .dz-buy { text-decoration: underline; }

.dz-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 4px; }
.dz-row-t { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.dz-row-d { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.dz-switch { flex-shrink: 0; width: 46px; height: 26px; border-radius: var(--radius-full); background: var(--surface2); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background .2s, border-color .2s; }
.dz-switch .dz-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: left .2s ease, background .2s; }
.dz-switch.on { background: var(--accent); border-color: var(--accent); }
.dz-switch.on .dz-knob { left: 22px; background: #fff; }
.dz-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dz-note { margin-top: 10px; padding: 9px 11px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size: var(--fs-xs); color: var(--text); line-height: 1.45; }