/* AirData v13 «warm glass» (owner, 19.09.2026: «liquid glass kulrang sovuq ko'rinish bergan», «ba'zi tablar juda oddiy»).
   Behind html.v13 only (?look=13 on the stand) until the owner approves the before/after. Every tab has its own colour; the
   glass takes it: a white sheen from the top, the colour from below, a luminous rim; the key cards keep a slow light on
   their edge. */
html.v13 body { --tint:247,201,72; --tint2:255,138,76; }
/* one warm gold for every tab (owner, 19.09.2026: «faqat sariq effektlisi yaxshi chiqqan»): the blue, violet and teal tabs went */

/* the air of the tab: its colour glows from the top of the photo */
html.v13 .scene .shade { background:
  radial-gradient(130% 55% at 50% -8%, rgba(var(--tint),.42), rgba(var(--tint),0) 62%),
  radial-gradient(90% 40% at 100% 100%, rgba(var(--tint2),.22), rgba(var(--tint2),0) 70%),
  linear-gradient(180deg, rgba(8,9,16,.30), rgba(8,9,16,.58) 45%, rgba(8,9,16,.84)) !important; transition:background 1s ease; }

/* warm glass: fill in the padding box, a luminous rim in the border box */
html.v13 #view :is(.card, .v2-card:not(.reason):not(.lq-ds), .lq:not(.askpill):not(.seg):not(.deckwrap), .tl, .go-card, .v2-flt, .me-tile, .me-list, .cin-tile, .tcard, .ev2, .near-cat, .v2-examples button, .trow),
html.v13 #view .deckwrap, html.v13 #view .rs-deck .reason > div, html.v13 #view .lq-evx {
  border:1px solid transparent !important;
  background:
    linear-gradient(158deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 38%, rgba(var(--tint),.07) 70%, rgba(var(--tint),.16)) padding-box,
    linear-gradient(rgba(16,18,30,.50), rgba(16,18,30,.50)) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.10) 32%, rgba(255,255,255,.04) 60%, rgba(var(--tint),.55)) border-box !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 34px rgba(0,0,0,.30), 0 0 28px rgba(var(--tint),.10) !important; }
html.v13 #view .lq-evx { background:linear-gradient(180deg, rgba(10,12,20,0), rgba(10,12,20,.78) 50%) padding-box, linear-gradient(145deg, rgba(255,255,255,.45), rgba(255,255,255,.05) 40%, rgba(var(--tint),.4)) border-box !important; }
/* a few key surfaces are real glass again (a handful on screen, not seventy) */
html.v13 #view :is(.deckwrap, .datecard, .v12-route, .card.wx, .card.pray, #lq-mw, .rs-deck .reason > div) { -webkit-backdrop-filter:blur(20px) saturate(175%); backdrop-filter:blur(20px) saturate(175%); }

/* the slow light on the rim of the key cards */
@property --v13a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
html.v13 #view :is(.deckwrap, #lq-mw, .v12-route, .v13-hero, .v13-mehead) { position:relative; }
html.v13 #view :is(.deckwrap, #lq-mw, .v12-route, .v13-hero, .v13-mehead)::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--v13a), rgba(255,255,255,0) 0deg, rgba(var(--tint),.0) 40deg, rgba(var(--tint),.95) 80deg, rgba(255,255,255,.9) 95deg, rgba(var(--tint2),.6) 115deg, rgba(255,255,255,0) 160deg, rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:v13Rim 7s linear infinite; opacity:.85; }
@keyframes v13Rim { to { --v13a:360deg; } }

/* chips and the segmented control carry the colour */
html.v13 #view .chip { border:1px solid transparent !important; background:linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.04)) padding-box, linear-gradient(145deg, rgba(255,255,255,.4), rgba(var(--tint),.25)) border-box !important; }
html.v13 #view .chip.on:not(.v12-moods .chip) { background:linear-gradient(135deg, #fff, rgb(var(--tint))) !important; color:#101018 !important; border-color:transparent !important; box-shadow:0 6px 18px rgba(var(--tint),.35) !important; }
html.v13 #view .seg { background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(var(--tint),.10)), rgba(16,18,30,.42) !important; border:1px solid rgba(255,255,255,.22) !important; }
html.v13 #view .seg.lq-segon::before { background:radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.62), rgba(255,255,255,.14) 60%), linear-gradient(135deg, rgba(var(--tint),.55), rgba(var(--tint2),.35)) !important; box-shadow:inset 0 1.5px 1px rgba(255,255,255,.9), 0 6px 18px rgba(var(--tint),.45) !important; }
/* icons wear the colour */
html.v13 #view :is(.v12-moods .mi, .v12-cats .mi, .near-cat svg.i) { color:rgb(var(--tint)) !important; }
html.v13 #view :is(.v12-moods button.on .mi, .v12-cats > button.on .mi) { background:linear-gradient(135deg, #fff, rgb(var(--tint))) !important; color:#101018 !important; box-shadow:0 8px 22px rgba(var(--tint),.45) !important; }
html.v13 #view .v12-moods .mi, html.v13 #view .v12-cats .mi { background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(var(--tint),.14)) !important; border:1px solid rgba(255,255,255,.18) !important; }
/* the dock takes the colour of the tab */
html.v13 nav#nav .lq-cap { box-shadow:inset 0 1px 1px rgba(255,255,255,.6), 0 12px 32px rgba(0,0,0,.4), 0 0 26px rgba(var(--tint),.18) !important; }
html.v13 nav#nav .lq-drop { background:radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.4), rgba(255,255,255,.08) 60%), linear-gradient(135deg, rgba(var(--tint),.45), rgba(var(--tint2),.25)) !important; }
/* the prayer list: the next prayer stands out */
html.v13 #view .card.pray .ring .rfg { stroke:rgb(var(--tint)) !important; }

/* ------------------------------------------------------------ «Savol»: an orb, a question, examples with their places */
html.v13 .v13-hero { position:relative; margin:4px 0 16px; padding:26px 20px 22px; border-radius:30px; text-align:center; overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%, rgba(var(--tint),.28), rgba(var(--tint),0) 70%), linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03)), rgba(16,18,30,.5); border:1px solid rgba(255,255,255,.18); }
html.v13 .v13-orb { position:relative; width:92px; height:92px; margin:0 auto 14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, rgba(var(--tint),.95) 35%, rgba(var(--tint2),.8) 70%, rgba(20,20,40,.2)); box-shadow:0 0 50px rgba(var(--tint),.65), inset 0 -8px 20px rgba(0,0,0,.25);
  animation:v13Orb 5s ease-in-out infinite; }
html.v13 .v13-orb::before { content:""; position:absolute; inset:-14px; border-radius:50%; border:1.5px solid rgba(var(--tint),.45); animation:v13Ring 2.6s cubic-bezier(.22,1,.36,1) infinite; }
html.v13 .v13-orb svg.i { position:absolute; inset:0; margin:auto; width:38px; height:38px; color:#0c1a1a; }
@keyframes v13Orb { 50% { transform:scale(1.06); box-shadow:0 0 70px rgba(var(--tint),.8), inset 0 -8px 20px rgba(0,0,0,.25); } }
@keyframes v13Ring { from { transform:scale(.85); opacity:.9; } to { transform:scale(1.45); opacity:0; } }
html.v13 .v13-hero h2 { font-size:28px; font-weight:850; letter-spacing:-.03em; margin:0 0 6px; }
html.v13 .v13-hero p { font-size:14.5px; color:rgba(255,255,255,.72); margin:0 auto; max-width:290px; }
html.v13 #view .v2-examples { display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important; }
html.v13 #view .v2-examples button { position:relative; display:flex !important; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:4px; height:150px !important; padding:12px !important; border-radius:24px !important; overflow:hidden; text-align:left; }
html.v13 #view .v2-examples button .v13-ph { position:absolute; inset:0; background-size:cover; background-position:center; z-index:-1; transition:transform 6s cubic-bezier(.22,1,.36,1); }
html.v13 #view .v2-examples button .v13-ph::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.78)); }
html.v13 #view .v2-examples button svg.i { width:22px; height:22px; padding:5px; border-radius:10px; background:rgba(var(--tint),.9); color:#081414; box-sizing:content-box; }
html.v13 #view .v2-examples button span { font-size:14px; font-weight:750; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.6); }
html.v13 #view .v2-examples button:active .v13-ph { transform:scale(1.08); }

/* ------------------------------------------------------------ «Men»: a greeting card with counts, tiles with coloured icons */
html.v13 .v13-mehead { position:relative; margin:4px 0 14px; padding:18px; border-radius:30px; overflow:hidden;
  background:radial-gradient(100% 90% at 0% 0%, rgba(var(--tint),.34), rgba(var(--tint),0) 60%), radial-gradient(80% 80% at 100% 100%, rgba(var(--tint2),.26), rgba(var(--tint2),0) 65%), rgba(16,18,30,.5); border:1px solid rgba(255,255,255,.18); }
html.v13 .v13-mehead img { height:22px; display:block; margin-bottom:10px; }
html.v13 .v13-mehead b { display:block; font-size:22px; font-weight:850; letter-spacing:-.02em; }
html.v13 .v13-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:14px; }
html.v13 .v13-stats span { padding:10px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); text-align:center; }
html.v13 .v13-stats em { display:block; font-style:normal; font-size:24px; font-weight:850; color:#fff; }
html.v13 .v13-stats small { font-size:11px; color:rgba(255,255,255,.65); }
html.v13 #view .me-tile { position:relative; }
html.v13 #view .me-tile > svg.i:first-child { width:24px; height:24px; padding:9px; border-radius:14px; box-sizing:content-box; color:#fff; background:linear-gradient(135deg, var(--c1), var(--c2)); box-shadow:0 8px 18px color-mix(in srgb, var(--c1) 45%, transparent); }
html.v13 #view .me-tile:nth-child(1) { --c1:#F7C948; --c2:#FF8A4C; } html.v13 #view .me-tile:nth-child(2) { --c1:#5CA8FF; --c2:#78DCFF; }
html.v13 #view .me-tile:nth-child(3) { --c1:#3DD68C; --c2:#2BB7A8; } html.v13 #view .me-tile:nth-child(4) { --c1:#FF6B9A; --c2:#FF9A6B; }
html.v13 #view .me-tile:nth-child(5) { --c1:#A878FF; --c2:#6B7BFF; } html.v13 #view .me-tile:nth-child(6) { --c1:#34C759; --c2:#A8E05F; }
html.v13 #view .me-tile .v13-n { position:absolute; right:12px; top:12px; min-width:24px; height:24px; padding:0 7px; border-radius:12px; background:rgba(255,255,255,.14); font-size:12px; font-weight:800; display:grid; place-items:center; }
@media (prefers-reduced-motion: reduce) { html.v13 #view *::after, html.v13 .v13-orb, html.v13 .v13-orb::before { animation:none !important; } }
/* the examples show their places: the photo sits inside the card, not behind its glass */
html.v13 #view .v2-examples button { isolation:isolate; background:rgba(16,18,30,.35) !important; }
html.v13 #view .v2-examples button .v13-ph { z-index:-1; }
/* mood and category tiles: a darker glass so the coloured icon reads */
html.v13 #view .v12-moods .mi, html.v13 #view .v12-cats .mi { background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(var(--tint),.10)), rgba(12,14,24,.62) !important; }

/* «Savol»: the AirData logo instead of the orb (owner, 19.09.2026), in a warm glow with a light passing over it */
html.v13 .v13-logo { position:relative; height:74px; margin:6px auto 14px; display:grid; place-items:center; }
html.v13 .v13-logo::before { content:""; position:absolute; left:50%; top:50%; width:260px; height:90px; margin:-45px 0 0 -130px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--tint),.55), rgba(var(--tint),0)); filter:blur(8px); animation:v13Glow 4.5s ease-in-out infinite; }
html.v13 .v13-logo img { position:relative; height:34px; width:auto;
  -webkit-mask:linear-gradient(100deg, #000 40%, rgba(0,0,0,.55) 50%, #000 60%) 0 0/300% 100%; mask:linear-gradient(100deg, #000 40%, rgba(0,0,0,.55) 50%, #000 60%) 0 0/300% 100%;
  animation:v13Shine 4.5s cubic-bezier(.45,0,.55,1) infinite; filter:drop-shadow(0 0 14px rgba(var(--tint),.55)); }
@keyframes v13Glow { 50% { transform:scale(1.12); opacity:.75; } }
@keyframes v13Shine { from { -webkit-mask-position:100% 0; mask-position:100% 0; } to { -webkit-mask-position:0 0; mask-position:0 0; } }
@media (prefers-reduced-motion: reduce) { html.v13 .v13-logo::before, html.v13 .v13-logo img { animation:none !important; } }