/* DezoCloud — «Flux» (shisha) dizayni.
   app.css ustiga qo'yiladigan qatlam: ranglar, orqa fon dog'lari, shisha yuzalar va kompyuterda chap tomondagi tor (mini) menyu.
   Qaytarish uchun index.html dagi flux.css havolasini olib tashlash kifoya. */

:root {
  --ground: #e8ecf1;
  --sun: #ffe24a; --sun-ink: #2a2300;
  --glass: rgba(255, 255, 255, .58); --glass-strong: rgba(255, 255, 255, .82); --glass-line: rgba(255, 255, 255, .85);
  --bg: #e8ecf1; --bg-2: rgba(255, 255, 255, .62); --bg-3: rgba(20, 24, 30, .1);
  --fg: #15171a; --muted: #5d6470; --line: rgba(20, 24, 30, .1);
  --accent: #2389e8; --accent-bg: rgba(35, 137, 232, .14); --accent-fg: #fff; --danger: #e5484d; --ok: #23a55a;
  --bar-bg: rgba(255, 255, 255, .86);
  --a1: #ffd84d; --a2: #8fc3ff; --a3: #ffe9a8;
  --shadow: 0 1px 2px rgba(20, 30, 50, .04), 0 10px 30px rgba(20, 30, 50, .07);
  --flux-font: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f1217; --sun: #ffd93d;
    --glass: rgba(30, 35, 44, .55); --glass-strong: rgba(36, 41, 51, .85); --glass-line: rgba(255, 255, 255, .07);
    --bg: #0f1217; --bg-2: rgba(255, 255, 255, .07); --bg-3: rgba(255, 255, 255, .12);
    --fg: #eef1f5; --muted: #a3abb7; --line: rgba(255, 255, 255, .08);
    --accent: #5aa8ff; --accent-bg: rgba(90, 168, 255, .16); --accent-fg: #0f1217; --danger: #ff6b6f; --ok: #4cc883;
    --bar-bg: rgba(36, 41, 51, .9);
    --a1: #8a6a00; --a2: #1d4f8a; --a3: #4a3a10;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  --ground: #0f1217; --sun: #ffd93d;
  --glass: rgba(30, 35, 44, .55); --glass-strong: rgba(36, 41, 51, .85); --glass-line: rgba(255, 255, 255, .07);
  --bg: #0f1217; --bg-2: rgba(255, 255, 255, .07); --bg-3: rgba(255, 255, 255, .12);
  --fg: #eef1f5; --muted: #a3abb7; --line: rgba(255, 255, 255, .08);
  --accent: #5aa8ff; --accent-bg: rgba(90, 168, 255, .16); --accent-fg: #0f1217; --danger: #ff6b6f; --ok: #4cc883;
  --bar-bg: rgba(36, 41, 51, .9);
  --a1: #8a6a00; --a2: #1d4f8a; --a3: #4a3a10;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
}

body { font-family: var(--flux-font); font-size: 15px; background: var(--ground); }

/* Orqa fondagi xira rangli dog'lar */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 62% 22%, color-mix(in srgb, var(--a1) 75%, transparent), transparent 70%),
    radial-gradient(40vw 40vw at 8% 38%, color-mix(in srgb, var(--a2) 55%, transparent), transparent 70%),
    radial-gradient(34vw 30vw at 96% 96%, color-mix(in srgb, var(--a3) 60%, transparent), transparent 70%);
}

/* Tugmalar */
.btn.primary { background: var(--sun); color: var(--sun-ink); font-weight: 600; box-shadow: 0 6px 18px rgba(255, 200, 0, .3); }
.btn.primary:hover { filter: none; background: var(--sun); box-shadow: 0 8px 22px rgba(255, 200, 0, .42); }
.btn { border-color: var(--glass-line); }
.avatar { background: linear-gradient(140deg, #f7b733, #fc4a1a); color: #fff; box-shadow: 0 0 0 3px var(--glass-line); }
.search { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.search:focus-within { background: var(--glass-strong); }

/* Statistika kartalari uchun rang belgilari */
:root { --sky: #2389e8; --leaf: #23a55a; --ember: #f37a1f; --plum: #9b5de5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sky: #5aa8ff; --leaf: #4cc883; --ember: #ff8a3d; --plum: #b48cff; } }
:root[data-theme="dark"] { --sky: #5aa8ff; --leaf: #4cc883; --ember: #ff8a3d; --plum: #b48cff; }

/* Matnli logotip (rasm o'rniga): sariq doira + DezoCloud */
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--flux-font); font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--fg); white-space: nowrap; }
.wordmark i { width: 26px; height: 26px; border-radius: 50%; background: var(--sun); flex: none; }
.auth .wordmark { font-size: 26px; justify-content: center; margin: 0 auto 4px; }
.auth .wordmark i { width: 30px; height: 30px; }

/* Kompyuter va ochilgan katlanuvchi telefon (Galaxy Z Fold, ≥700px): chap tomonda tor menyu + yuqorida suzuvchi shisha panel.
   700–900px oralig'ida app.css telefon ko'rinishini yoqadi — quyida uni bekor qilamiz. */
@media (min-width: 700px) {
  .app {
    --side: 112px; grid-template-columns: var(--side) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "side head" "side main";
  }
  header.top {
    margin: 18px 18px 0 0; height: 64px; padding: 0 12px; border-radius: 26px; border: 1px solid var(--glass-line); background: var(--glass);
    box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  }
  header.top.scrolled { border-bottom-color: var(--glass-line); }
  header.top .brand { display: none; }
  header.top .search { display: flex; background: var(--bg-2); }
  .top .only-wide { display: inline-grid !important; }
  .top .only-narrow { display: none; }
  .top .spacer { display: block !important; }
  nav.tabbar { display: none; }

  aside.side {
    position: static; transform: none; width: auto; z-index: auto;
    margin: 18px; padding: 14px 8px; border-radius: 30px; align-items: center; overflow: visible;
    background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
    backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  }
  .scrim { display: none !important; }
  .side-brand { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; margin-bottom: 14px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-weight: 600; font-size: 22px; flex: none; }
  .side-brand::before { content: 'D'; }
  .side-brand > * { display: none !important; }
  .nav { gap: 6px; width: 100%; justify-items: center; }
  /* Nomlar yashirinadi (font-size:0), piktogramma o'z o'lchamini saqlaydi; nomi sichqoncha ustida ko'rinadi (title) */
  .nav button, .nav button:first-child {
    width: 46px; height: 46px; padding: 0; margin: 0; gap: 0; justify-content: center; border-radius: 16px; font-size: 0; position: relative;
  }
  .nav button .count, .nav .navlabel { display: none; }
  .nav hr { width: 30px; margin: 4px 0; }
  .nav button.on { background: var(--sun); color: var(--sun-ink); }
  .nav button.on span[data-icon] { color: inherit; }
  .nav button:hover:not(.on) { background: var(--bg-2); }

  /* Xotira: menyu pastida bulut belgisi, ingichka chiziq va foiz; bosilsa «Xotirani boshqarish» */
  .meter { margin: auto 0 0; padding: 12px 0 2px; width: 56px; border-top: 1px solid var(--line); justify-items: center; gap: 6px; text-align: center; }
  .meter .mtitle { height: auto; margin: 0; gap: 0; font-size: 0; color: var(--muted); }
  .meter:hover .mtitle { color: var(--fg); }
  .meter .bar { width: 44px; }
  .meter #meter-text, .meter .btn { display: none; }
  .meter::after { content: attr(data-pct); font-size: 11px; font-weight: 500; color: var(--muted); }

  main.main { padding: 0 18px 24px 0; }
  /* Keng ekranda sana sarlavhalari yopishqoq emas — fon kerak emas (aura ko'rinib tursin) */
  .day, .dayblock .day, h3.month { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Past ekranlarda (Fold ochilganda ~740px balandlik) menyu sig'ishi uchun ixchamlashadi */
@media (min-width: 700px) and (max-height: 760px) {
  aside.side { padding: 10px 6px; }
  .side-brand { width: 40px; height: 40px; font-size: 19px; margin-bottom: 8px; }
  .nav { gap: 3px; }
  .nav button, .nav button:first-child { width: 42px; height: 42px; border-radius: 14px; }
}

/* Fotolar boshi: salomlashish, tezkor amallar, statistika kartalari */
.fx-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 24px 8px 4px 16px; }
.fx-hero h1 { margin: 0; font-size: 38px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.fx-hero p { margin: 6px 0 0; color: var(--muted); font-size: 15px; min-height: 22px; }
.fx-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fx-actions .btn { height: 44px; padding: 0 18px; border-radius: 22px; background: var(--glass); color: var(--fg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fx-actions .btn.primary { background: var(--sun); color: var(--sun-ink); }
.fx-actions svg { width: 20px; height: 20px; }
.fx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 18px 8px 10px 16px; }
.fx-card {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; padding: 18px 20px; border-radius: 22px; min-width: 0;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); color: var(--fg); text-decoration: none;
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); transition: transform .15s, background .15s;
}
.fx-card:hover { transform: translateY(-2px); background: var(--glass-strong); }
.fx-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.fx-ic svg { width: 22px; height: 22px; }
.fx-l { color: var(--muted); font-weight: 500; }
.fx-card b { grid-column: 1 / -1; font-size: 32px; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-card small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.fx-bar i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
/* Tor ekranda (Fold) ham 4 ta karta bir qatorda — ixchamroq, suratlar pastga surilib ketmasin */
@media (max-width: 1180px) {
  .fx-stats { gap: 10px; }
  .fx-card { padding: 14px 14px; gap: 8px 10px; border-radius: 18px; }
  .fx-ic { width: 32px; height: 32px; border-radius: 11px; }
  .fx-ic svg { width: 18px; height: 18px; }
  .fx-l { font-size: 13px; }
  .fx-card b { font-size: 24px; }
  .fx-card small { font-size: 12px; }
  .fx-hero h1 { font-size: 30px; }
}
@media (max-width: 699px) { .fx-hero, .fx-stats { display: none; } }

/* Kirish sahifasi: shisha karta */
.auth-wrap { background: transparent; grid-template-columns: minmax(0, min(400px, 100%)); justify-content: center; }
.auth {
  background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
@media (max-width: 420px) { .auth { width: 100%; padding: 26px 18px 22px; } }

/* Telefonda yopishqoq sana/oy sarlavhalari: aura dog'lari ko'rinib tursin, o'qilishi uchun xira shisha */
@media (max-width: 699px) {
.day, .dayblock .day, h3.month {
  background: color-mix(in srgb, var(--ground) 62%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
}