/* Cluster web app — base + login + home. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  background: var(--surface);
  color: var(--label);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Kullanıcı emri: ekrandaki metinler seçilemez. Bu bir UYGULAMA, bir
     belge değil — sürüklerken metin bloklarının maviye boyanması hem
     dokunma/sürükleme jestlerini bozuyor hem de masaüstü hissini kırıyor.
     İSTİSNALAR aşağıda: form alanları, metin girilen her yer ve sohbet. */
  -webkit-user-select: none;
  user-select: none;
}

/* Metin seçilebilen YERLER — tek liste, kural burada başlar ve biter:
     1) her türlü giriş alanı (input/textarea/contenteditable/arama),
     2) sohbet balonları (yapay zekâ yanıtı kopyalanabilmeli),
     3) `data-selectable` işaretli her düğüm (yeni ekranlar için kapı). */
input,
textarea,
select,
[contenteditable='true'],
[contenteditable=''],
.chat-text,
.chat-msgs,
[data-selectable],
[data-selectable] * {
  -webkit-user-select: text;
  user-select: text;
}

.screen {
  position: fixed;
  inset: 0;
  container-type: size;
  container-name: screen;
  overflow: hidden;
}
.screen[hidden] {
  display: none;
}

/* ============================ LOGIN ==================================== */
/* :not([hidden]) keeps the ID rule from out-specifying .screen[hidden], so the
   screen genuinely hides (display:none) instead of just being covered. */
#login-screen:not([hidden]) {
  display: grid;
  place-items: center;
}

.wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* the signature bleeds past the right edge on purpose — crop it here so
     it can never widen #home-screen's scroll box (a programmatic focus
     could then shift the whole screen with no gesture to bring it back) */
  overflow: hidden;
  background:
    radial-gradient(120% 78% at 50% -12%, #46356e 0%, transparent 58%),
    radial-gradient(85% 65% at 82% 16%, #2c3f7a 0%, transparent 55%),
    radial-gradient(90% 80% at 14% 108%, #241a44 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 44%, rgba(120, 90, 180, 0.18), transparent 60%),
    linear-gradient(180deg, #1b1733 0%, #100c22 58%, #070512 100%);
}
.wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: screen;
  opacity: 0.5;
}

/* ---- Cluster signature: an ambient node-cluster constellation, the motif
   the whole product is built around. Kept whisper-quiet so it reads as the
   app's own texture, never as decoration competing with content. ---- */
.wall-sig {
  position: absolute;
  right: -3%;
  bottom: -5%;
  width: min(70vw, 700px);
  height: auto;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  transform: rotate(-4deg);
}
html[data-theme='light'] .wall-sig {
  color: rgba(28, 24, 60, 0.05);
}
html[data-hc] .wall-sig {
  display: none; /* high-contrast: no ambient texture */
}

/* ---- brand lockup on the login screen: the same cluster mark + wordmark,
   establishing "Cluster" identity where iOS would show only a clock ---- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, 3cqh, 26px);
  color: var(--label);
}
.brand-mark {
  width: clamp(30px, 8cqmin, 40px);
  height: clamp(30px, 8cqmin, 40px);
  color: var(--blue);
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--blue) 45%, transparent));
}
.brand-core {
  fill: #fff;
  stroke: var(--blue);
  stroke-width: 1.4;
}
html[data-theme='light'] .brand-core {
  fill: var(--blue);
  stroke: #fff;
}
.brand-word {
  font: 700 clamp(1.25rem, 4.4cqmin, 1.75rem) / 1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}

.col {
  position: relative;
  z-index: 2;
  width: min(90cqmin, 380px);
  max-height: 92cqh;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2cqmin 0;
  opacity: 0;
  transform: translateY(1.4cqh);
  animation: rise 0.55s var(--ease-spring) forwards;
}
.col::-webkit-scrollbar {
  display: none;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

.ls-date {
  font-size: clamp(0.8125rem, 2.4cqmin, 1.125rem);
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}
.ls-time {
  font-size: clamp(3rem, 12cqmin, 5.75rem);
  font-weight: 590;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin-top: 0.3cqh;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}

/* inset-grouped glass form */
.form {
  width: 100%;
  margin-top: 5cqh;
  border-radius: var(--r-field);
  overflow: hidden;
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-spec), 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
}
.field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 16px;
  position: relative;
}
.field + .field::before {
  content: '';
  position: absolute;
  top: 0;
  left: 48px;
  right: 0;
  height: 1px;
  background: var(--sep);
}
.field .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--label-3);
  transition: color var(--dur-3) ease;
}
.field:focus-within .icon {
  color: var(--blue);
}
.field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--label);
  font: 500 clamp(0.9375rem, 3.4cqmin, 1.0625rem) / 1 var(--font);
  letter-spacing: -0.01em;
}
.field input::placeholder {
  color: var(--label-3);
  font-weight: 400;
}
.field input:focus,
.field input:focus-visible {
  box-shadow: none;
}
/* kill the browser autofill background/tint — keep the glass transparent */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--label);
  caret-color: var(--label);
  transition: background-color 9999s ease-in-out 0s;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.eye {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--label-3);
  cursor: pointer;
  border-radius: var(--r-md);
}
.eye:hover {
  color: var(--label-2);
}
/* the `hidden` attribute is not reliably honoured on inline SVG — force it */
.eye svg[hidden] {
  display: none;
}

.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 1.6cqh;
  font-size: clamp(0.6875rem, 2.3cqmin, 0.8125rem);
  color: var(--text-2, inherit);
  cursor: pointer;
  user-select: none;
}
.remember input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent, #2f7cf6);
}

.note {
  width: 100%;
  margin-top: 2.2cqh;
  text-align: center;
  font-size: clamp(0.6875rem, 2.3cqmin, 0.8125rem);
  font-weight: 500;
  border-radius: var(--r-md);
  padding: 8px 12px;
}
.note[hidden] {
  display: none;
}
.note.caps {
  color: var(--amber);
  background: rgba(255, 212, 38, 0.1);
  border: 1px solid rgba(255, 212, 38, 0.28);
}
.note.err {
  color: var(--red);
  background: rgba(255, 105, 97, 0.12);
  border: 1px solid rgba(255, 105, 97, 0.3);
}

/* Liquid Glass capsule button */
.login-btn {
  width: 100%;
  margin-top: 3cqh;
  height: 54px;
  border-radius: var(--r-capsule);
  cursor: pointer;
  color: var(--label);
  font: 600 clamp(0.9375rem, 3.4cqmin, 1.0625rem) / 1 var(--font);
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.09));
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-3) ease;
  display: grid;
  place-items: center;
}
.login-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.14));
}
.login-btn:active {
  transform: scale(0.97);
}
.login-btn:disabled {
  cursor: default;
  transform: none;
}
.spinner {
  width: 20px;
  height: 20px;
  border: 2.4px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* controls: language toggle */
.controls {
  margin-top: 3.4cqh;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* the login/signup forms and the verify panel toggle via [hidden] — it must
   beat .col's display */
#login-screen form[hidden],
#login-screen section[hidden] { display: none; }
/* SaaS membership door — same capsule language, blue accent so the ONE
   commercial action on the screen reads as such */
.signup-open {
  margin-top: 14px;
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
}
#signup-form .form .field { margin-bottom: 8px; }
/* signup privacy notice: readable, scrollable, the acceptance is explicit */
.notice-box { margin: 12px 0; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2, rgba(127,127,127,.08)); }
.notice-title { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 600; }
.notice-text { max-height: 200px; overflow: auto; font-size: var(--fs-sm); line-height: 1.5; }
.notice-text p { margin: 0 0 8px; }
.notice-text p:last-child { margin-bottom: 0; }
.notice-accept { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: var(--fs-sm); cursor: pointer; }
.notice-accept input { margin-top: 2px; }
/* a hidden action row must stay hidden even though .controls is a flex row */
.controls[hidden] { display: none; }
#signup-form .note:not(.err) { color: var(--label-2); }
.ctrl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-capsule);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--glass-thin);
  color: var(--label-2);
  font: 500 var(--fs-sm)/1 var(--font);
  cursor: pointer;
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  transition: background var(--dur-3) ease, color var(--dur-3) ease;
}
.ctrl:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--label);
}
.ctrl svg {
  width: 16px;
  height: 16px;
}

/* ============================ HOME (springboard) ====================== */
#home-screen {
  background: var(--surface);
}
.home-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: max(3cqh, 22px) clamp(18px, 5cqmin, 60px) max(2cqh, 14px);
}

/* horizontal pager (springboard pages) */
.pager {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}
.pager[hidden] {
  display: none;
}
.pager-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-4) var(--ease-snap);
}
.page {
  flex: 0 0 100%;
  min-width: 100%;
  overflow: hidden;
  /* a fixed 8×5 cell board: every item anchors at explicit (col, row)
     coordinates, so anything can sit anywhere — iOS-18-style free layout */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: clamp(10px, 1.8cqmin, 22px) clamp(8px, 1.4cqmin, 18px);
  justify-items: center;
  align-items: center;
  padding: 4px 2px;
}
.page::-webkit-scrollbar {
  display: none;
}

/* page indicator dots */
.page-dots {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 9px;
  padding: 12px 0 4px;
}
.page-dots[hidden] {
  display: none;
}
.pdot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background var(--dur-3) ease, transform var(--dur-3) ease;
}
.pdot.on {
  background: rgba(255, 255, 255, 0.88);
  transform: scale(1.15);
}

/* spotlight — entry points: the menu bar's search button + swipe-down */

/* the summoned overlay */
.spot-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
.spot-overlay[hidden] {
  display: none;
}
.spot-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 9vh clamp(18px, 5vw, 60px) 4vh;
}
.spot-panel .results {
  margin-top: clamp(20px, 4vh, 40px);
}

.spotlight {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--r-capsule);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-spec);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
}
.spot-ico {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--label-3);
}
#spotlight-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--label);
  font: 500 clamp(0.9375rem, 3cqmin, 1.0625rem) / 1 var(--font);
}
#spotlight-input::placeholder {
  color: var(--label-3);
  font-weight: 400;
}
.spot-clear {
  width: 22px;
  height: 22px;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--label);
  cursor: pointer;
  padding: 0;
}
.spot-clear[hidden] {
  display: none;
}

/* app grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: clamp(14px, 2.6cqmin, 30px) clamp(8px, 1.4cqmin, 18px);
  max-width: 1100px;
  margin: 0 auto;
  justify-items: center;
}
.grid[hidden] {
  display: none;
}
.results {
  margin-top: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  align-content: start;
  width: 100%;
}
.results::-webkit-scrollbar {
  display: none;
}
/* categorised spotlight results (apps · settings · records) */
.spot-results {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.spot-section {
  margin-bottom: 18px;
}
.spot-cat {
  font: 700 var(--fs-xs)/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label-3);
  padding: 0 6px 8px;
}
.spot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--label);
  cursor: pointer;
  text-align: left;
}
.spot-item:hover {
  background: color-mix(in srgb, var(--label) 8%, transparent);
}
.spot-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.spot-ico .app-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  /* 34px'te kil dokusu okunmuyor: yumuşatılmış zemin gliften ayrışmıyor ve
     beyaz glif AÇIK yüzeyde (Uygulamalar kitaplığındaki arama) kayboluyordu.
     Küçük boyda tam renk + düz yüzey kullanılır. */
  background: var(--c);
  box-shadow: none;
}
.spot-ico .app-glyph {
  filter: none;
}
.spot-ico .srow-ico {
  width: 30px;
  height: 30px;
}
.spot-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 var(--fs-md)/1 var(--font);
  color: var(--on-accent);
  background: hsl(var(--h), 62%, 52%);
}
.spot-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spot-title {
  font: 600 var(--fs-base)/1.2 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spot-sub {
  font: 500 var(--fs-sm)/1 var(--font);
  color: var(--label-3);
}
/* Dock'a sabitlenmiş yüzen tuş, EKRANDAKİ hâliyle BİREBİR aynı görünür
   (kullanıcı emri): yuvarlak cam kabuk, aynı glif — bir uygulama ikonu
   gibi durmaz, çünkü uygulama değil. Ölçü dock ikonlarıyla hizalıdır. */
.aw-switcher-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular);
  color: var(--label);
  opacity: 0.72;
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  box-shadow: var(--glass-spec), var(--elev-2);
}
.aw-item:hover .aw-switcher-btn {
  opacity: 1;
}
.aw-switcher-btn svg {
  width: 26px;
  height: 26px;
}

/* kayıt taraması sürerken görünen satır — "hiç çıkmıyor" izlenimini önler */
.spot-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  color: var(--label-3);
  font: 500 var(--fs-sm)/1.2 var(--font);
}
.spot-wait .spinner {
  width: 16px;
  height: 16px;
  flex: none;
}
/* command-palette hint bar: the palette teaches its own shortcuts and modes */
.spot-hints {
  width: min(560px, 100%);
  margin: 10px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--label-3);
  font: 500 var(--fs-xs)/1.2 var(--font);
}
.spot-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.spot-hint kbd,
.spot-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-stroke);
  background: color-mix(in srgb, var(--label) 8%, transparent);
  color: var(--label-2);
  font: 600 var(--fs-xs)/1 var(--font-mono, ui-monospace, monospace);
}
.spot-item.is-active {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  outline: 2px solid color-mix(in srgb, var(--blue) 55%, transparent);
  outline-offset: -2px;
}
.spot-empty {
  text-align: center;
  color: var(--label-3);
  font: 500 var(--fs-base)/1.4 var(--font);
  padding: 40px 10px;
}

.app {
  width: 78px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: var(--label);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.app-ico {
  /* Kil (soft 3D) tile dili — kullanıcı onaylı örnek levha (ikon_kil_tam_set):
     yumuşak kabartma (çift iç gölge), büyük yarıçap, pastel kil yüzeyi. */
  width: 60px;
  height: 60px;
  border-radius: 34%;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: color-mix(in srgb, var(--c) 62%, #fff 18%);
  /* The specular glint (top-left white inset) scales its alpha with the scene
     light so the glossy reflection fades toward the material as brightness
     drops — never left as a gray blob (which is what filter:brightness does to
     a pure-white highlight). The dark insets are form geometry and stay. The
     bright LIT SHEEN of the face is dimmed by ::after below (icons carry a
     per-app inline gradient that would override a background change here). */
  box-shadow:
    inset -5px -6px 10px rgba(0, 0, 0, 0.16),
    inset 5px 6px 10px rgba(255, 255, 255, calc(0.38 * var(--icon-light, 1))),
    0 8px 16px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-2) var(--ease-spring);
  position: relative;
}
/* Scene-light on the icon face. The tile is a top-lit form (its gradient runs
   bright-top → accent → dark-bottom); lowering the light must fade the BRIGHT
   TOP where the white light hits, converging the sheen toward the material —
   exactly like turning a real light down. A top-weighted black veil whose
   strength is (1 − --icon-light) does this without touching the accent hue or
   the already-shadowed bottom (so it is a light model, not a gray filter). It
   sits over the inline per-app gradient the CSS background can't reach; the
   glyph is lifted above it so the symbol stays crisp. */
.app-ico::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, max(0, calc((1 - var(--icon-light, 1)) * 0.85))) 0%,
    rgba(0, 0, 0, max(0, calc((1 - var(--icon-light, 1)) * 0.28))) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}
.app:active .app-ico {
  transform: scale(0.9);
}
.app-glyph {
  /* above the ::after scene-light veil so the symbol stays crisp */
  position: relative;
  z-index: 1;
  width: 56%;
  height: 56%;
  /* kil dili: glif yüzeyden hafifçe kalkar */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}
.app-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  max-width: 76px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* folder tile */
.folder-ico {
  width: 60px;
  height: 60px;
  border-radius: 27%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, calc(0.14 * var(--icon-light, 1)));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(0.22 * var(--icon-light, 1)));
  transition: transform var(--dur-2) var(--ease-spring);
}
.app:active .folder-ico {
  transform: scale(0.9);
}
.folder-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 74%;
  height: 74%;
}
.mini {
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: var(--c);
}
.mini-glyph {
  width: 70%;
  height: 70%;
}

/* drag & drop */
.drag-ghost {
  position: fixed;
  z-index: var(--z-popup);
  pointer-events: none;
  opacity: 0.92;
  transform: scale(1.08);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}
.app.dragging {
  opacity: 0.25;
}

/* widget templates: empty, fillable glass panels spanning icon cells */
.widget {
  width: 100%;
  height: 100%;
  justify-self: stretch;
  align-self: stretch;
  justify-content: center;
  border-radius: 22px;
  background: var(--glass-thin);
  border: 1.5px dashed var(--glass-stroke);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  box-shadow: var(--glass-spec);
  color: var(--label-3);
  gap: 8px;
}
.widget-glyph {
  width: 30px;
  height: 30px;
}
.widget-size {
  font: 600 var(--fs-sm)/1 var(--font);
  letter-spacing: 0.04em;
}
.widget.drop-target {
  border-color: var(--blue);
  border-style: solid;
}
/* a real (registry) widget is a solid glass card, not a dashed placeholder */
.widget.widget-app {
  border-style: solid;
  border-color: var(--glass-stroke);
  background: var(--glass-regular);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  color: var(--label);
  padding: 0 clamp(12px, 2cqmin, 20px);
  overflow: hidden;
}
/* ── the OS-style menu bar, top right: ONE slim glass capsule carrying
   (right→left) time · date · notifications · AI · search · language.
   Minimal: quiet icons, a hairline between controls and the clock. ── */
.home-status {
  flex: none;
  position: relative; /* the page dots centre themselves on this strip */
  display: flex;
  justify-content: flex-end;
  /* FLUSH against the TRUE screen corner: cancel the home-body inset the
     row inherits, then a hair of its own breathing room */
  margin: calc(-1 * max(3cqh, 22px)) calc(-1 * clamp(18px, 5cqmin, 60px)) 0;
  padding: 4px 10px 2px 0;
  transition: padding var(--dur-4) ease;
}
html[data-dock-edge='top'] .home-status {
  padding-top: 148px; /* a top-edge dock owns the upper strip, pinned or not */
}
/* FRAMELESS by binding user order: no capsule, no border, no fill — the
   elements sit directly on the wallpaper, like a real OS menu bar */
.hst-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
}
.hst-bar > * {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}
.hst-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-capsule);
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--label-2);
  cursor: pointer;
  transition: background var(--dur-2) ease, color var(--dur-2) ease;
}
.hst-btn:hover {
  background: color-mix(in srgb, var(--label) 9%, transparent);
  color: var(--label);
}
.hst-btn svg {
  width: 16px;
  height: 16px;
}
.hst-btn.hst-lang {
  width: auto;
  padding: 0 9px;
  font: 700 var(--fs-2xs)/1 var(--font);
  letter-spacing: 0.08em;
}
.hst-div {
  width: 1px;
  height: 16px;
  margin: 0 7px 0 5px;
  background: var(--glass-stroke);
  flex: none;
}
.hst-date {
  font: 500 var(--fs-sm)/1 var(--font);
  letter-spacing: 0.01em;
  color: var(--label-2);
  white-space: nowrap;
  margin-right: 8px;
}
.hst-time {
  font: 700 var(--fs-sm)/1 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--label);
}
/* the language menu the chip opens — same glass card family as the dock's */
.hst-lang-menu {
  position: fixed;
  z-index: 95;
  min-width: 170px;
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--elev-3), var(--glass-spec);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
}
.hst-lang-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: var(--r-md);
  font: 600 var(--fs-sm)/1.2 var(--font);
  color: var(--label);
  cursor: pointer;
  text-align: left;
}
.hst-lang-item:hover {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.hst-lang-check {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: transparent;
}
.hst-lang-item.on .hst-lang-check {
  color: var(--blue);
}
.hst-lang-check svg {
  width: 14px;
  height: 14px;
}
.app.drop-target .app-ico,
.app.drop-target .folder-ico {
  transform: scale(1.16);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4);
}
/* dwell (pause) over an icon while dragging an app → it "opens" to accept a
   folder; a plain drop just reorders, so this is the only folder cue */
.app.folder-accept .app-ico,
.app.folder-accept .folder-ico {
  transform: scale(1.28);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 70%, transparent), 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* ---- app view (opened app, e.g. Settings) ---- */
.app-view {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--dur-4) var(--ease-spring), transform var(--dur-4) var(--ease-spring);
}
/* the surface lives on its own layer so brightness can target it alone */
.app-view::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 60% at 50% -10%, #241d3d 0%, transparent 60%),
    var(--surface);
}
.app-view.open {
  opacity: 1;
  transform: none;
}
.app-view[hidden] {
  display: none;
}
.navbar {
  position: relative;
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid var(--sep);
}
/* GERİ — ürünün kendi malzemesiyle: KİL.
   Uygulama kutucukları (.app-ico) bu ürünün imzasıdır; geri düğmesi onların
   küçük kardeşidir. Böylece kontrol "iOS mavi bağlantısı" değil, ekrandaki
   diğer nesnelerle aynı fizikten yapılmış bir NESNE olur: basınca kil gibi
   içeri çöker. Glif icons.js registry'sinden (24×24 / 2px / round). */
.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  padding: 0 15px 0 8px;
  border: 0;
  border-radius: var(--r-capsule);
  /* The back control speaks the SAME house capsule as every navbar action —
     tinted ground, specular top edge, soft lift. Not the bare-iOS chevron
     (we left that copy behind) and not the old clay coin (clay is for APP
     icons, controls are tinted glass). */
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  box-shadow: var(--glass-spec), 0 1px 3px rgba(0, 0, 0, 0.08);
  color: var(--blue);
  font: 600 var(--fs-body)/1 var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--dur-2) ease, transform var(--dur-1) var(--ease-snap);
}
.nav-back:hover {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
}
.nav-back:active {
  transform: scale(0.97);
}
.nav-back-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: inherit;
}
.nav-back-chip svg {
  width: 20px;
  height: 20px;
}
/* .nav-back's inline-flex would otherwise beat the UA [hidden] rule */
.nav-back[hidden] {
  display: none;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: 600 var(--fs-lg)/1 var(--font);
  color: var(--label);
}
.app-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: clamp(16px, 4cqh, 32px) clamp(16px, 5cqmin, 40px);
}
.app-content::-webkit-scrollbar {
  display: none;
}

/* iOS inset-grouped settings list */
.settings-group {
  max-width: 560px;
  margin: 0 auto 22px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-spec);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
}
.settings-title {
  max-width: 560px;
  margin: 0 auto 8px;
  padding: 0 6px;
  font: 600 var(--fs-sm)/1 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-3);
}
.srow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  position: relative;
  border: 0;
  background: transparent;
  color: var(--label);
  font: 500 var(--fs-body)/1.2 var(--font);
  text-align: left;
  cursor: pointer;
}
.srow + .srow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 46px;
  right: 0;
  height: 1px;
  background: var(--sep);
}
.srow-ico {
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--on-accent);
  /* soft top-lit gradient + specular edge + a hint of depth */
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--c, var(--blue)) 86%, #fff 14%),
    var(--c, var(--blue)) 55%,
    color-mix(in srgb, var(--c, var(--blue)) 82%, #000 18%)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 1px rgba(0, 0, 0, 0.18),
    0 1.5px 4px rgba(0, 0, 0, 0.32);
}
.srow-ico svg {
  width: 17px;
  height: 17px;
}
.srow-label {
  flex: 1;
  min-width: 0;
}
.srow.danger {
  color: var(--red);
  justify-content: center;
  font-weight: 600;
}
.srow.danger .srow-label {
  flex: none;
}
.chev {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--label-3);
}

/* value shown at the right of a settings row (e.g. the current language) */
.srow-value {
  flex: none;
  color: var(--label-3);
  font-size: var(--fs-base);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* language picker: each row is a language; a checkmark marks the active one */
.srow.lang-opt .srow-label {
  flex: 1;
}
.srow-check {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--blue);
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.srow.lang-opt.on .srow-check {
  opacity: 1;
}
.srow-check svg {
  width: 20px;
  height: 20px;
}

/* signed-in user card (top of Settings) */
.profile-row {
  min-height: 78px;
}
.avatar {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  font: 600 var(--fs-2xl)/1 var(--font);
  letter-spacing: 0.02em;
  background: linear-gradient(160deg, #7d7aff, #3b7be0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 8px rgba(0, 0, 0, 0.28);
}
.profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.profile-name {
  font: 600 var(--fs-lg)/1.2 var(--font);
  color: var(--label);
}
.profile-sub {
  font: 400 var(--fs-sm)/1.2 var(--font);
  color: var(--label-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-row + .srow::before,
.srow + .profile-row::before {
  left: 82px;
}

/* ---- app manager ---- */
.mgr-search {
  max-width: 560px;
  width: 100%;
  margin: 0 auto 20px;
  height: 42px;
}
.mgr-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--label);
  font: 500 var(--fs-base)/1 var(--font);
}
.mgr-search input::placeholder {
  color: var(--label-3);
  font-weight: 400;
}
.arow {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 66px;
  padding: 11px 14px;
  position: relative;
}
.arow + .arow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 71px;
  right: 0;
  height: 1px;
  background: var(--sep);
}
.arow-ico {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--c) 88%, #fff 12%),
    color-mix(in srgb, var(--c) 78%, #000 22%)
  );
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.arow-ico .app-glyph {
  width: 56%;
  height: 56%;
}
.arow-name {
  flex: 1;
  min-width: 0;
  font: 600 var(--fs-base)/1.25 var(--font);
  color: var(--label);
}
.abtn {
  flex: none;
  border: 0;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: var(--r-capsule);
  /* tinted from the accent so it reads on EVERY theme (was a dark-only white
     overlay that vanished on the light theme) */
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  font: 700 var(--fs-sm)/1 var(--font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background var(--dur-3) ease, transform var(--dur-1) var(--ease-spring);
}
.abtn:hover {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
}
.abtn:active {
  transform: scale(0.94);
}
.abtn.remove {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
.abtn.remove:hover {
  background: color-mix(in srgb, var(--red) 18%, transparent);
}
.atag {
  flex: none;
  font: 600 var(--fs-sm)/1 var(--font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--label-3);
  padding: 8px 6px;
}
.mgr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 16px;
  color: var(--label-3);
  font: 500 var(--fs-md)/1.4 var(--font);
  text-align: center;
}
.mgr-empty svg {
  width: 34px;
  height: 34px;
  opacity: 0.7;
}

/* segmented control (language) */
.segmented {
  flex: none;
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.1);
}
.segmented button {
  border: 0;
  background: transparent;
  color: var(--label-2);
  font: 600 var(--fs-sm)/1 var(--font);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-3) ease, color var(--dur-3) ease;
}
.segmented button.on {
  background: rgba(255, 255, 255, 0.22);
  color: var(--label);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* folder overlay */
.folder-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(6, 5, 16, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* animate open/close instead of snapping (JS toggles .open) */
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-spring);
}
.folder-overlay.open {
  opacity: 1;
}
.folder-overlay[hidden] {
  display: none;
}
.folder-panel {
  width: min(92vw, 460px);
  padding: 22px;
  border-radius: 28px;
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-spec), var(--elev-4);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  /* collapsed toward the tapped folder icon; JS sets transform-origin to the
     folder's on-screen position so it grows out from there (iOS-style) */
  transform: scale(0.2);
  opacity: 0;
  transform-origin: center;
  transition: transform var(--dur-5) var(--ease-spring), opacity var(--dur-4) ease;
}
.folder-overlay.open .folder-panel {
  transform: scale(1);
  opacity: 1;
}
.folder-name {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--label);
  font: 600 clamp(1rem, 4cqmin, 1.25rem) / 1 var(--font);
  margin-bottom: 18px;
}
.folder-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (prefers-reduced-motion: reduce) {
  .col {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .spinner {
    animation: none;
  }
}

/* --- çevrimdışı banner (UI kitap CH29-R13/R14) — dil+renk+ikon üçlüsü --- */
.net-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(90vw, 520px);
  padding: 9px 16px;
  border-radius: var(--r-capsule);
  background: var(--glass-regular);
  border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  box-shadow: var(--elev-2), var(--glass-spec);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  color: var(--label);
  font: 600 var(--fs-md)/1.3 var(--font);
  z-index: var(--z-toast);
  pointer-events: none;
}
.net-banner-ico {
  flex: none;
  display: inline-flex;
  color: var(--amber);
}
.net-banner-ico svg {
  width: 16px;
  height: 16px;
}

/* ==================== accessibility integration ======================== */
/* brightness targets the surface layers only (like the desktop, which
   brightens surfaces, never text) */
.wall,
.app-view::before {
  filter: brightness(var(--a11y-bright, 1));
}

/* rise-in keeps content visible when animations are disabled */
html[data-rm='1'] .col {
  opacity: 1;
  transform: none;
}

/* reading background: a calm flat warm surface replaces the wallpaper */
html[data-rbg] .wall,
html[data-rbg] .app-view::before {
  background: var(--surface);
  /* A reading colour is a CHOSEN flat comfort surface. brightness() dims only
     the backdrop, never the cards, so filtering it turned the header to mud
     under bright cards (the "ucube"). Keep the reading surface at its picked
     colour; brightness still dims the icons + the non-reading wallpaper. */
  filter: none;
}
html[data-rbg] .wall::after {
  display: none;
}

/* high contrast: hard flat surfaces, no glass, no glow */
html[data-hc] .wall,
html[data-hc] .app-view::before {
  background: var(--surface);
}
html[data-hc] .wall::after {
  display: none;
}
html[data-hc] .form,
html[data-hc] .settings-group,
html[data-hc] .spotlight,
html[data-hc] .folder-panel {
  background: var(--glass-regular);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
html[data-hc] .login-btn {
  background: var(--glass-regular);
  border-color: var(--glass-stroke);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-hc] .ls-date,
html[data-hc] .ls-time,
html[data-hc] .app-label {
  text-shadow: none;
}

/* ==================== accessibility screen controls ==================== */
.a11y-banner {
  max-width: 560px;
  margin: 0 auto 22px;
  border-radius: var(--r-2xl);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 38%, transparent);
}
.a11y-banner h3 {
  font: 600 var(--fs-base)/1.3 var(--font);
  color: var(--label);
  margin-bottom: 4px;
}
.a11y-banner p {
  font: 400 var(--fs-sm)/1.45 var(--font);
  color: var(--label-2);
  margin-bottom: 10px;
}
.a11y-banner button {
  border: 0;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: var(--r-capsule);
  background: var(--blue);
  color: var(--on-accent);
  font: 600 var(--fs-sm)/1 var(--font);
}

.seg-row {
  padding: 10px 14px;
}
.segmented.wide {
  flex: 1;
  display: flex;
}
.segmented.wide button {
  flex: 1;
}

/* footnote under a group (iOS style) */
.sfoot {
  max-width: 560px;
  margin: -14px auto 22px;
  padding: 0 10px;
  font: 400 var(--fs-sm)/1.4 var(--font);
  color: var(--label-3);
}

/* On/off toggle — the app's own control: a rounded-rectangle track with a
   squircle knob that fills with the brand accent (blue = "active", the same
   language as selection) when on. Deliberately not a stock platform switch. */
.switch {
  position: relative;
  width: 46px;
  height: 28px;
  flex: none;
  cursor: pointer;
}
.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.switch .track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--label-3) 30%, transparent);
  border: 1px solid var(--glass-stroke);
  transition: background var(--dur-3) ease, border-color var(--dur-3) ease;
  pointer-events: none;
}
.switch input:checked + .track {
  background: var(--blue);
  border-color: var(--blue);
}
.switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-3) var(--ease-snap);
}
.switch input:checked + .track .thumb {
  transform: translateX(18px);
}

/* ===== custom dropdown: replaces the native <select> popup app-wide. The
   native select stays in the DOM (hidden) as the value source; this styled
   trigger + glass popup are what the user sees. ===== */
.cs {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* kept in the DOM as the value source: full-size but transparent and
   non-interactive (users use the trigger), so programmatic selection and
   test tooling still see a real, sized element. */
.cs-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  border: 0;
}
.cs-trigger {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: var(--label-2);
  font: 500 var(--fs-base)/1.3 var(--font);
  cursor: pointer;
  padding: 0;
}
.cs-trigger:disabled {
  opacity: 0.5;
  cursor: default;
}
/* forms put the value on the right of the row */
.gf-row .cs,
.gf-fk .cs,
.gfilter .cs {
  flex: 1;
}
.gf-row .cs-trigger,
.gf-fk .cs-trigger {
  justify-content: flex-end;
}
.cs-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--label-3);
}
.cs-popup {
  position: fixed;
  z-index: var(--z-popup);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the option list (.cs-list) owns the scroll; max-height set inline */
  padding: 6px;
  border-radius: var(--r-xl);
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38), var(--glass-spec);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
}
.cs-search-wrap {
  flex: none;
  padding: 2px 2px 6px;
}
.cs-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--label) 6%, transparent);
  color: var(--label);
  font: 500 var(--fs-base)/1.2 var(--font);
  outline: none;
}
.cs-search::placeholder {
  color: var(--label-3);
}
.cs-search:focus {
  border-color: var(--blue);
}
.cs-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.cs-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--label);
  font: 500 var(--fs-base)/1.2 var(--font);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
}
.cs-opt:hover,
.cs-opt.active {
  background: color-mix(in srgb, var(--label) 8%, transparent);
}
.cs-opt.on {
  color: var(--blue);
}
.cs-opt-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-check {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0;
}
.cs-opt.on .cs-check {
  opacity: 1;
}
.cs-opt:disabled {
  opacity: 0.4;
  cursor: default;
}

/* brightness slider */
.slider-row {
  gap: 14px;
}
.slider-row input[type='range'] {
  flex: 1;
  min-width: 0;
  accent-color: var(--blue);
}
.bval {
  flex: none;
  width: 3.4rem;
  text-align: right;
  font: 500 var(--fs-md)/1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--label-2);
}

/* reading background swatches */
.swatches {
  display: flex;
  gap: 10px;
  flex: none;
}
.swatch {
  width: 44px;
  height: 32px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch.none {
  width: auto;
  padding: 0 12px;
  background: rgba(120, 120, 128, 0.24);
  color: var(--label-2);
  font: 500 var(--fs-sm)/1 var(--font);
}
.swatch.on {
  border-color: var(--blue);
  box-shadow: 0 0 0 1.5px var(--blue);
}
/* custom colour + eyedropper: neutral swatches matching the "None" pill and the
   preset shapes — a restrained glyph, never a rainbow. The native colour input
   fills the swatch invisibly, so a click opens the palette. */
.swatch-custom,
.swatch-eyedrop {
  position: relative;
  display: grid;
  place-items: center;
  background: rgba(120, 120, 128, 0.16);
  color: var(--label-2);
  overflow: hidden;
}
.swatch-custom input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  cursor: pointer;
}
.swatch-glyph {
  width: 17px;
  height: 17px;
  pointer-events: none;
}
/* once a colour is picked the swatch shows it flat (inline bg) — hide the + */
.swatch-custom.has-color .swatch-glyph {
  display: none;
}

/* Cluster confirm card — not the iOS alert: a glass panel with a squircle
   action medallion, left-aligned copy, and two separated pill buttons. */
.alert-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-alert);
  display: grid;
  place-items: center;
  padding: 24px;
  /* the card uses the app's own accent colour — no bespoke red that fights
     the theme */
  --alert-accent: var(--blue);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: alert-scrim var(--dur-3) var(--ease-spring) both;
}
/* light theme keeps its light feel — a lighter scrim, not a dark wash */
html[data-theme='light'] .alert-overlay {
  background: rgba(0, 0, 0, 0.28);
}
.alert {
  position: relative;
  width: min(88vw, 352px);
  padding: 24px 22px 20px;
  border-radius: 26px;
  text-align: left;
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    var(--glass-spec);
  animation: alert-pop var(--dur-4) var(--ease-spring) both;
}
/* a hairline of the action colour rides the top edge — the signature */
.alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: var(--r-xs);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--alert-accent) 85%, transparent),
    transparent
  );
}
.alert-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 15px;
  border-radius: var(--r-2xl);
  color: var(--alert-accent);
  background: color-mix(in srgb, var(--alert-accent) 15%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--alert-accent) 22%, transparent) inset,
    0 8px 22px color-mix(in srgb, var(--alert-accent) 26%, transparent);
}
.alert-ico svg {
  width: 26px;
  height: 26px;
}
.alert-title {
  font: 700 var(--fs-lg)/1.3 var(--font);
  color: var(--label);
}
.alert-msg {
  margin-top: 6px;
  font: 500 var(--fs-md)/1.5 var(--font);
  color: var(--label-2);
}
.alert-input {
  width: 100%;
  margin-top: 16px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke);
  background: rgba(120, 120, 128, 0.16);
  color: var(--label);
  font: 500 var(--fs-base)/1 var(--font);
  outline: none;
}
.alert-input:focus {
  border-color: color-mix(in srgb, var(--alert-accent) 55%, transparent);
}
/* Deactivation dialog: reason picker + conditional explanation */
.alert-field {
  margin-top: 14px;
  text-align: left;
}
.alert-flabel {
  display: block;
  margin-bottom: 6px;
  font: 600 var(--fs-xs)/1.2 var(--font);
  color: var(--label-3);
}
.alert-field .alert-reason,
.alert-field .alert-note {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke);
  background: rgba(120, 120, 128, 0.16);
  color: var(--label);
  font: 500 var(--fs-base)/1.3 var(--font);
  outline: none;
}
.alert-field .alert-reason {
  height: 44px;
  padding: 0 14px;
}
.alert-field .alert-note {
  padding: 10px 14px;
  resize: vertical;
  min-height: 60px;
}
.alert-field .alert-note:focus,
.alert-field .alert-reason:focus {
  border-color: color-mix(in srgb, var(--alert-accent) 55%, transparent);
}
/* The custom-select wrapper inside the dialog stretches full width */
.alert-field .cs {
  width: 100%;
}
.alert-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.alert-actions button {
  flex: 1;
  height: 46px;
  border: 0;
  border-radius: var(--r-xl);
  cursor: pointer;
  font: 650 var(--fs-base)/1 var(--font);
  font-weight: 600;
  transition: filter var(--dur-2) ease, background var(--dur-3) ease;
}
.alert-actions button:disabled {
  opacity: 0.4;
  cursor: default;
}
/* cancel: tonal, quiet */
.alert-actions button[data-r='0'] {
  background: rgba(120, 120, 128, 0.2);
  color: var(--label);
}
.alert-actions button[data-r='0']:hover {
  background: rgba(120, 120, 128, 0.3);
}
html[data-theme='light'] .alert-actions button[data-r='0'] {
  background: rgba(120, 120, 128, 0.16);
}
html[data-theme='light'] .alert-actions button[data-r='0']:hover {
  background: rgba(120, 120, 128, 0.26);
}
/* primary confirm: the app's own primary button language (.gbtn-primary) —
   a solid fill in the app accent, white text. */
.alert-actions button.destructive {
  color: var(--on-accent);
  background: var(--alert-accent);
}
.alert-actions button.destructive:hover {
  filter: brightness(1.06);
}
@keyframes alert-scrim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes alert-pop {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* iOS sheet (accessibility from the login screen) */
.ctrl-round {
  width: 38px;
  padding: 0;
  justify-content: center;
}
.ctrl-round svg {
  width: 19px;
  height: 19px;
}
.sheet-overlay[hidden] {
  display: none;
}
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sheet {
  display: flex;
  flex-direction: column;
  width: min(94vw, 640px);
  max-height: 86vh;
  border-radius: 22px;
  overflow: hidden;
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  box-shadow: var(--elev-4);
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}
.sheet-title {
  font: 700 var(--fs-lg)/1.2 var(--font);
  color: var(--label);
}
.sheet-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--label-2);
  cursor: pointer;
}
.sheet-close svg {
  width: 15px;
  height: 15px;
}
.sheet-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--label);
}
.sheet-body {
  overflow-y: auto;
  padding: 0 18px 18px;
}
/* the shared a11y panel uses settings groups; give them contrast on glass */
.sheet-body .settings-group {
  background: rgba(255, 255, 255, 0.06);
}
html[data-hc] .sheet {
  background: var(--glass-regular);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* ==================== logs (activity + error) & profile ==================== */
.logs-loading {
  margin: 48px auto;
  display: block;
  width: 24px;
  height: 24px;
  opacity: 0;
  animation: gskel-appear var(--dur-3) ease var(--dur-2) forwards;
  /* .spinner's ring is tuned for on-accent surfaces (buttons); on the page
     ground a white ring disappears — recolor with theme tokens here */
  border-color: var(--sep);
  border-top-color: var(--blue);
}
.logs-search {
  max-width: 560px;
  width: 100%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.log-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-capsule);
  background: var(--glass-thin);
  color: var(--label);
  font: 500 var(--fs-base)/1 var(--font);
  outline: none;
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
}
.log-input::placeholder {
  color: var(--label-3);
  font-weight: 400;
}
.pill-btn {
  flex: none;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-capsule);
  background: var(--glass-thin);
  color: var(--label);
  font: 600 var(--fs-md)/1 var(--font);
  cursor: pointer;
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
}
.pill-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.pill-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* filter rows: value control on the right, iOS-style */
.fval {
  flex: none;
  max-width: 55%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--label-2);
  font: 500 var(--fs-base)/1.2 var(--font);
  text-align: right;
  color-scheme: dark;
  cursor: pointer;
}
select.fval option {
  background: var(--surface);
  color: var(--label);
}
html[data-hc='light'] .fval {
  color-scheme: light;
}
/* rows without a leading icon separate from the row edge, not the icon inset */
.srow + .srow:not(:has(.srow-ico))::before {
  left: 16px;
}

/* list rows */
.log-row {
  min-height: 60px;
}
.log-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.log-title {
  font: 500 var(--fs-base)/1.3 var(--font);
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-sub {
  font: 400 var(--fs-sm)/1.2 var(--font);
  color: var(--label-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font: 600 var(--fs-sm)/1 var(--font);
}
.log-ms {
  font: 400 var(--fs-2xs)/1 var(--font);
  color: var(--label-3);
}
.st-ok {
  color: var(--green);
}
.st-warn {
  color: var(--amber);
}
.st-err {
  color: var(--red);
}
.st-mute {
  color: var(--label-3);
}

/* pagination */
.logs-pager {
  max-width: 560px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pg-label {
  font: 500 var(--fs-md)/1 var(--font);
  color: var(--label-2);
}

/* empty / inline notes */
.logs-empty {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
  font: 500 var(--fs-base)/1.4 var(--font);
  color: var(--label-3);
}
.logs-note {
  max-width: 560px;
  margin: -10px auto 16px;
  padding: 0 6px;
  font: 500 var(--fs-sm)/1.3 var(--font);
  color: var(--amber);
}

/* detail: key/value rows + header card + monospace blocks */
.log-head {
  max-width: 560px;
  margin: 0 auto 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 6px;
}
.log-head-title {
  font: 700 var(--fs-xl)/1.3 var(--font);
  color: var(--label);
}
.log-head-sub {
  font: 400 var(--fs-md)/1.4 var(--font);
  color: var(--label-2);
}
.srow.kv {
  cursor: default;
}
.kv-label {
  flex: none;
  max-width: 40%;
  color: var(--label);
}
.kv-value {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--label-2);
  font: 400 var(--fs-md)/1.35 var(--font);
  overflow-wrap: anywhere;
}
.mono {
  margin: 0;
  padding: 14px 16px;
  max-height: 40vh;
  overflow: auto;
  font: 400 var(--fs-sm)/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color: var(--label-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* profile */
.profile-hero {
  max-width: 560px;
  margin: 6px auto 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.avatar-xl {
  width: 92px;
  height: 92px;
  font: 600 2.1rem/1 var(--font);
  margin-bottom: 8px;
}
.profile-hero-name {
  font: 700 var(--fs-3xl)/1.2 var(--font);
  color: var(--label);
}
.profile-hero-sub {
  font: 400 var(--fs-md)/1.2 var(--font);
  color: var(--label-2);
}

/* ============================ light theme ============================ */
/* Day-sky wallpaper with the same gradient structure as the dark dusk. */
html[data-theme='light'] .wall {
  background:
    radial-gradient(120% 78% at 50% -12%, #f2f5ff 0%, transparent 58%),
    radial-gradient(85% 65% at 82% 16%, #b8d0f5 0%, transparent 55%),
    radial-gradient(90% 80% at 14% 108%, #e4d9f2 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 44%, rgba(150, 130, 215, 0.14), transparent 60%),
    linear-gradient(180deg, #e6ecfb 0%, #d3ddf3 58%, #bfcbe9 100%);
}
html[data-theme='light'] .wall::after {
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px);
}
html[data-theme='light'] .app-view::before {
  background:
    radial-gradient(90% 60% at 50% -10%, #dde3f7 0%, transparent 60%),
    var(--surface);
}
/* A reading background must replace the day-sky wallpaper on the HOME screen
   too — not just the cards. The light-theme .wall / .app-view::before rules
   above out-specify the generic html[data-rbg] ones (0,3,0 vs 0,2,0), so this
   theme+rbg-qualified rule (placed after them) wins. Dark theme already wins
   (its wall is a bare .wall). */
html[data-theme='light'][data-rbg] .wall,
html[data-theme='light'][data-rbg] .app-view::before {
  background: var(--surface);
}
html[data-theme='light'][data-rbg] .wall::after {
  display: none;
}
html[data-theme='light'] .ls-date,
html[data-theme='light'] .ls-time {
  color: var(--label);
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.4);
}
html[data-theme='light'] .app-label {
  color: var(--label);
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);
}
html[data-theme='light'] .ctrl {
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .ctrl:hover {
  background: rgba(255, 255, 255, 0.75);
  color: var(--label);
}
html[data-theme='light'] .spotlight {
  background: rgba(255, 255, 255, 0.55);
}
html[data-theme='light'] .segmented {
  background: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .segmented button.on {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
html[data-theme='light'] .pill-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.8);
}
html[data-theme='light'] .sheet-close {
  background: rgba(0, 0, 0, 0.07);
}
html[data-theme='light'] .sheet-close:hover {
  background: rgba(0, 0, 0, 0.12);
}
html[data-theme='light'] .sheet-body .settings-group {
  background: rgba(0, 0, 0, 0.045);
}
html[data-theme='light'] .fval {
  color-scheme: light;
}
html[data-theme='light'] .folder-ico {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.06);
}
html[data-theme='light'] .spot-overlay {
  background: rgba(255, 255, 255, 0.3);
}

/* ==================== AI assistant (chat) ==================== */
/* the app-content switches to an edge-to-edge fixed chat layout */
.app-content.chat-mode {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-toolbar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 8px 14px 0;
}
.chat-clear {
  border: 0;
  background: transparent;
  color: var(--label-2);
  font: 600 var(--fs-sm)/1 var(--font);
  padding: 6px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.chat-clear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--label);
}

/* messages over the desktop's own tiled wallpaper (assets cloned verbatim) */
.chat-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background-image: url('../assets/chat_bg_dark.png');
  background-repeat: repeat;
  background-size: 380px 380px;
}
.chat-msgs::-webkit-scrollbar {
  display: none;
}
html[data-theme='light'] .chat-msgs {
  background-image: url('../assets/chat_bg_light.png');
}
html[data-hc] .chat-msgs,
html[data-rbg] .chat-msgs {
  background-image: none; /* hard/reading surfaces drop the decoration */
}

/* display:flex would defeat the UA [hidden] rule — restate it explicitly */
.chat-row[hidden],
.chat-voice[hidden],
.chat-files[hidden],
.chat-input-bar[hidden] {
  display: none !important;
}
.chat-row {
  display: flex;
}
.chat-row.user {
  justify-content: flex-end;
}
.chat-row.assistant {
  justify-content: flex-start;
}
.chat-bubble {
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 7px;
  border-radius: var(--r-field);
  box-shadow: var(--elev-1);
}
.chat-row.assistant .chat-bubble {
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
}
.chat-row.user .chat-bubble {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--blue) 88%, #fff 12%),
    var(--blue)
  );
  color: var(--on-accent);
}
.chat-text {
  font: 400 var(--fs-md)/1.45 var(--font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--label);
  user-select: text;
}
.chat-row.user .chat-text {
  color: var(--on-accent);
}
.chat-time {
  align-self: flex-end;
  font: 400 var(--fs-3xs)/1 var(--font);
  color: var(--label-3);
}
.chat-row.user .chat-time {
  color: rgba(255, 255, 255, 0.72);
}

/* typing: three bouncing dots, like the desktop */
.chat-typing {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: 68px;
  height: 36px;
  justify-content: center;
  padding: 0;
}
.chat-typing .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--label-3);
  animation: chat-dot 1.2s infinite;
}
.chat-typing .dot:nth-child(2) {
  animation-delay: 0.4s;
}
.chat-typing .dot:nth-child(3) {
  animation-delay: 0.8s;
}
@keyframes chat-dot {
  0%, 60%, 100% { opacity: 0.35; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.4); }
}

/* action buttons under a reply */
.chat-actions {
  display: flex;
  gap: 8px;
  padding: 2px 4px;
  flex-wrap: wrap;
}
.chat-act {
  border: 1px solid var(--glass-stroke);
  background: var(--glass-thin);
  color: var(--label);
  font: 600 var(--fs-sm)/1 var(--font);
  padding: 8px 18px;
  border-radius: var(--r-lg);
  cursor: pointer;
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
}
.chat-act.pri {
  background: var(--blue);
  border-color: transparent;
  color: var(--on-accent);
}
.chat-act:disabled {
  opacity: 0.55;
  cursor: default;
}

/* file chips (pending + inside bubbles) */
.chat-files {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 6px 16px 2px;
  flex-wrap: wrap;
}
.chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-thin);
}
.chip-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chip-name {
  font: 500 var(--fs-sm)/1.2 var(--font);
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.chip-size {
  font: 400 var(--fs-2xs)/1.2 var(--font);
  color: var(--label-3);
}
.chip-remove {
  border: 0;
  background: transparent;
  color: var(--label-3);
  cursor: pointer;
  font-size: var(--fs-xs);
}
.chip-remove:hover {
  color: var(--red);
}
.chat-row.user .chat-chip {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
}
.chat-row.user .chip-name {
  color: var(--on-accent);
}
.chat-row.user .chip-size {
  color: rgba(255, 255, 255, 0.7);
}

/* voice recording bar (cosmetic recorder, like the desktop) */
.chat-voice {
  flex: none;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--sep);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-rec-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-rec-dot {
  color: var(--red);
  animation: rec-blink 1s steps(1) infinite;
}
@keyframes rec-blink {
  50% { opacity: 0; }
}
.chat-rec-label {
  flex: 1;
  font: 500 var(--fs-md)/1 var(--font);
  color: var(--label);
}
.chat-rec-time {
  font: 600 var(--fs-xl)/1 var(--font);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.chat-rec-btns {
  display: flex;
  justify-content: space-between;
}

/* input pill */
.chat-input-bar {
  flex: none;
  padding: 8px 12px 14px;
}
.chat-pill {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 5px 6px;
  border-radius: 22px;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
.chat-pill:focus-within {
  border-color: var(--blue);
}
.chat-text-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  max-height: 120px;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--label);
  font: 400 var(--fs-md)/1.4 var(--font);
  padding: 6px 6px;
  scrollbar-width: none;
}
.chat-text-input::placeholder {
  color: var(--label-3);
}
.chat-icon-btn {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--label-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--label);
}
.chat-icon-btn svg {
  width: 18px;
  height: 18px;
}
.chat-send {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat-send svg {
  width: 16px;
  height: 16px;
}
.chat-send:disabled {
  background: transparent;
  color: var(--label-3);
  cursor: default;
}

/* ---- task card (the desktop TaskCard, web twin) ---- */
.tc-card {
  max-width: min(480px, 92%);
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.tc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px 16px;
}
.tc-title {
  flex: 1;
  font: 600 var(--fs-base)/1.2 var(--font);
  color: var(--label);
}
.tc-step {
  font: 500 var(--fs-xs)/1 var(--font);
  color: var(--label-3);
}
.tc-close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--label-3);
  cursor: pointer;
}
.tc-close:hover:not(:disabled) {
  color: var(--red);
  background: rgba(255, 255, 255, 0.08);
}
.tc-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.tc-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width var(--dur-3) ease;
}
.tc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 8px;
}
.tc-field-label {
  font: 500 var(--fs-md)/1.3 var(--font);
  color: var(--label);
}
.tc-hint {
  font: 400 var(--fs-xs)/1.3 var(--font);
  color: var(--label-3);
}
.tc-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-stroke);
  background: rgba(255, 255, 255, 0.05);
  color: var(--label);
  font: 400 var(--fs-md)/1.3 var(--font);
  outline: none;
  color-scheme: dark;
}
html[data-theme='light'] .tc-input,
html[data-hc='light'] .tc-input {
  color-scheme: light;
  background: rgba(0, 0, 0, 0.04);
}
.tc-input:focus {
  border-color: var(--blue);
}
.tc-textarea {
  resize: vertical;
  max-height: 120px;
}
.tc-fk-row {
  display: flex;
  gap: 6px;
}
.tc-fk-go {
  flex: none;
}
.tc-fk-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tc-fk-result {
  text-align: left;
  padding: 7px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-stroke);
  background: rgba(255, 255, 255, 0.06);
  color: var(--label);
  font: 400 var(--fs-sm)/1.2 var(--font);
  cursor: pointer;
}
.tc-fk-result:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-accent);
}
.tc-error {
  padding: 0 16px 4px;
  font: 500 var(--fs-xs)/1.3 var(--font);
  color: var(--red);
}
.tc-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 12px;
  border-top: 1px solid var(--sep);
}
.tc-spacer {
  flex: 1;
}
.tc-btn-pri {
  border: 0;
  border-radius: var(--r-md);
  padding: 8px 18px;
  background: var(--blue);
  color: var(--on-accent);
  font: 600 var(--fs-sm)/1 var(--font);
  cursor: pointer;
}
.tc-btn-pri:disabled {
  opacity: 0.5;
  cursor: default;
}
.tc-btn-sec {
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  padding: 7px 14px;
  background: transparent;
  color: var(--label-2);
  font: 500 var(--fs-sm)/1 var(--font);
  cursor: pointer;
}
.tc-btn-sec:hover {
  color: var(--label);
  background: rgba(255, 255, 255, 0.07);
}
.tc-btn-icon {
  border: 0;
  background: transparent;
  color: var(--label-3);
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.tc-btn-icon:hover {
  color: var(--label);
  background: rgba(255, 255, 255, 0.08);
}
.tc-sum-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tc-sum-key {
  flex: none;
  width: 130px;
  font: 400 var(--fs-sm)/1.35 var(--font);
  color: var(--label-3);
}
.tc-sum-val {
  flex: 1;
  font: 500 var(--fs-md)/1.35 var(--font);
  color: var(--label);
  overflow-wrap: anywhere;
}
.tc-success {
  font: 600 var(--fs-base)/1.35 var(--font);
  color: var(--green);
}
.tc-code {
  font: 400 var(--fs-md)/1.35 var(--font);
  color: var(--label);
}
.tc-err-title {
  font: 600 var(--fs-base)/1.35 var(--font);
  color: var(--red);
}
.tc-err-detail {
  font: 400 var(--fs-sm)/1.4 var(--font);
  color: var(--label-2);
}
html[data-theme='light'] .chat-clear:hover,
html[data-theme='light'] .chat-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ==================== widget gallery ==================== */
.sheet-narrow {
  width: min(94vw, 440px);
}
.wg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-bottom: 4px;
}
.wg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  border: 0;
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  color: var(--label-2);
}
.wg-card:hover {
  background: rgba(255, 255, 255, 0.11);
}
html[data-theme='light'] .wg-card {
  background: rgba(0, 0, 0, 0.045);
}
html[data-theme='light'] .wg-card:hover {
  background: rgba(0, 0, 0, 0.08);
}
.wg-preview {
  /* proportional to the widget's w×h cell footprint */
  width: calc(var(--pw) * 22px);
  height: calc(var(--ph) * 22px);
  max-width: 132px;
  max-height: 110px;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--glass-stroke);
  background: var(--glass-thin);
}
.wg-label {
  font: 600 var(--fs-md)/1 var(--font);
}
/* picker sections: registry widgets first, then blank templates */
.wg-section + .wg-section {
  margin-top: 18px;
}
.wg-section-title {
  display: block;
  margin: 0 2px 10px;
  font: 600 var(--fs-xs)/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label-3);
}
.wg-apps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.wg-app {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  color: var(--label);
  text-align: left;
}
.wg-app:hover {
  background: rgba(255, 255, 255, 0.11);
}
html[data-theme='light'] .wg-app {
  background: rgba(0, 0, 0, 0.045);
}
html[data-theme='light'] .wg-app:hover {
  background: rgba(0, 0, 0, 0.08);
}
.wg-app-preview {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--pw) * 26px);
  height: calc(var(--ph) * 26px);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--glass-stroke);
  background: var(--glass-thin);
  color: var(--label-2);
}
.wg-app-glyph {
  width: 24px;
  height: 24px;
}
.wg-app-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wg-app-name {
  font: 600 var(--fs-base)/1 var(--font);
  color: var(--label);
}
.wg-app-size {
  font: 500 var(--fs-sm)/1 var(--font);
  letter-spacing: 0.03em;
  color: var(--label-3);
}

/* ===================== Share sheet (bottom, our own take) ================= */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-snap);
}
.sheet-scrim.open {
  opacity: 1;
}
.share-sheet {
  width: 100%;
  max-width: 520px;
  margin: 0 12px 12px;
  padding: 12px 20px 18px;
  border-radius: 26px;
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-spec), 0 -8px 40px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: var(--blur-regular);
  backdrop-filter: var(--blur-regular);
  transform: translateY(110%);
  transition: transform var(--dur-4) var(--ease-spring);
}
.sheet-scrim.open .share-sheet {
  transform: translateY(0);
}
.share-grabber {
  width: 40px;
  height: 5px;
  border-radius: var(--r-xs);
  background: var(--label-3);
  margin: 2px auto 12px;
}
.share-head {
  text-align: center;
  margin-bottom: 18px;
  padding: 0 8px;
}
.share-title {
  font: 700 var(--fs-xl)/1.3 var(--font);
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-sub {
  font: 500 var(--fs-sm)/1.3 var(--font);
  color: var(--label-2);
  margin-top: 2px;
}
.share-grid {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.share-opt {
  width: 92px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  padding: 4px;
}
.share-opt-ico {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #5ac8fa 0%, var(--blue) 60%, #0060df 100%);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 10px rgba(0, 0, 0, 0.28);
  transition: transform var(--dur-1) var(--ease-snap);
}
.share-opt:active .share-opt-ico {
  transform: scale(0.93);
}
.share-opt-ico svg {
  width: 30px;
  height: 30px;
}
.share-opt-label {
  font: 500 var(--fs-sm)/1.2 var(--font);
  color: var(--label);
}
.share-opt.soon .share-opt-ico {
  background: var(--glass-thin);
  color: var(--label-2);
  box-shadow: none;
}
.share-opt.soon .share-opt-label {
  color: var(--label-3);
}
.share-soon {
  position: absolute;
  top: -4px;
  right: 4px;
  font: 700 var(--fs-4xs)/1 var(--font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  border-radius: var(--r-capsule);
  padding: 3px 7px;
}
.share-cancel {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--r-capsule);
  background: var(--glass-thin);
  color: var(--blue);
  font: 600 var(--fs-body)/1 var(--font);
  cursor: pointer;
}

/* ---- bottom action card: metadata actions as tappable rows -------------- */
/* Same glass family as the share sheet; the options are a rows list (they
   carry verbs, not share targets), each with a soft tonal icon chip. */
.action-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--glass-thin);
  color: var(--label);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-2) ease, transform var(--dur-1) var(--ease-snap);
}
.action-row:hover {
  background: color-mix(in srgb, var(--blue) 10%, var(--glass-thin));
}
.action-row:active {
  transform: scale(0.985);
}
.action-row-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
}
.action-row-ico svg {
  width: 19px;
  height: 19px;
}
.action-row-label {
  flex: 1;
  min-width: 0;
  font: 600 var(--fs-base)/1.25 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-row .chev {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--label-3);
}

/* ============ floating open-apps button + task switcher =================== */
.float-btn {
  position: fixed;
  right: 16px;
  bottom: 96px;
  /* above the always-visible dock (89) — a pinned dock must never swallow
     the floating button's taps; the dup-home + (92) stays on top of all */
  z-index: var(--z-scrim);
  width: 52px;
  height: 52px;
  border: 1px solid var(--glass-stroke);
  border-radius: 50%;
  background: var(--glass-regular);
  color: var(--label);
  opacity: 0.62;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  box-shadow: var(--glass-spec), var(--elev-2);
  transition: opacity var(--dur-3) ease, transform var(--dur-1) var(--ease-snap);
}
/* `display: grid` [hidden]'ı ezer — tuş dock'a sabitlendiğinde (ya da çıkış
   yapıldığında) gerçekten kaybolsun diye açıkça bastırılır. */
.float-btn[hidden] {
  display: none;
}
.float-btn:hover {
  opacity: 0.92;
}
.float-btn.dragging {
  opacity: 0.98;
  transform: scale(1.12);
  cursor: grabbing;
}
.float-btn svg {
  width: 26px;
  height: 26px;
}

/* Recents-overview style: a horizontal rail of app "windows", each showing a
   live thumbnail of that app's actual page. */
.task-switcher {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 26px 0;
  background: rgba(8, 8, 12, 0.8);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-snap);
}
.task-switcher.open {
  opacity: 1;
}
.ts-head {
  flex: none;
  font: 600 var(--fs-lg)/1.2 var(--font);
  color: rgba(255, 255, 255, 0.86);
}
.ts-rail {
  flex: 1;
  min-height: 0;
  display: block;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 28px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  line-height: 0;
}
.ts-rail::-webkit-scrollbar {
  display: none;
}
.ts-card {
  display: inline-flex;
  vertical-align: middle;
  white-space: normal;
  margin: 0 10px;
  width: min(410px, 76vw);
  height: min(66vh, 580px);
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.55);
  scroll-snap-align: center;
  will-change: transform;
  contain: paint; /* keep the scaled page thumbnail clipped to the card */
}
.ts-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--glass-regular);
  border-bottom: 1px solid var(--glass-stroke);
}
.ts-bar-ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ts-bar-ico svg,
.ts-bar-ico .app-glyph {
  width: 19px;
  height: 19px;
}
.ts-bar-name {
  flex: 1;
  min-width: 0;
  color: var(--label);
  font: 600 var(--fs-base)/1.2 var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--label) 12%, transparent);
  color: var(--label);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ts-close svg {
  width: 15px;
  height: 15px;
}
.ts-shot {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  display: block;
  background: var(--surface);
  cursor: pointer;
  touch-action: pan-x;
}
.ts-shot-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  pointer-events: none;
}
.ts-shot-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--on-accent);
}
.ts-shot-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c, var(--blue));
  opacity: 0.92;
}
.ts-shot-ph svg,
.ts-shot-ph .app-glyph {
  position: relative;
  width: 38%;
  height: 38%;
  opacity: 0.95;
}
.ts-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.7);
  font: 500 var(--fs-body)/1.4 var(--font);
}
/* alt sıra: "Kapat" ve "Tümünü kapat" yan yana */
.ts-foot {
  flex: none;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.ts-cancel,
.ts-close-all {
  flex: none;
  min-width: 140px;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-capsule);
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-accent);
  font: 600 var(--fs-body)/1 var(--font);
  cursor: pointer;
}
/* Yıkıcı komut ayırt edilir: aynı kapsül gövdesi, uyarı rengi kenarı.
   AYRI SINIF — `ts-cancel`ı paylaşmaz, çünkü paylaşmak testlerin ve
   kodun "kapat" seçicisini belirsizleştiriyordu. */
.ts-close-all {
  background: rgba(255, 105, 97, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 105, 97, 0.55);
}

/* Table leading avatar column (products, and any entity with a photo). */
.gtable th.gt-avatar, .gtable td.gt-avatar { width: 46px; padding: 4px 8px; text-align: center; }
.gtable td.gt-avatar .gavatar { width: 34px; height: 34px; font-size: var(--fs-sm); }

/* Zebra striping — alternating row tone in lists and tables (açık/koyu). */
.glist .grow:nth-child(even),
.gtable tbody tr.gt-row:nth-child(even) { background: rgba(255, 255, 255, 0.045); }
html[data-theme='light'] .glist .grow:nth-child(even),
html[data-theme='light'] .gtable tbody tr.gt-row:nth-child(even) { background: rgba(0, 0, 0, 0.038); }

/* Abbreviated-column legend under a table (e.g. "A = Alınabilir · S = Satılabilir"). */
.gt-legend { padding: 8px 12px 10px; font-size: var(--fs-xs); opacity: 0.62; }

/* ═══════════ PC launcher wheel (çark) — desktop-only, left edge ═══════════ */
.app-wheel {
  position: fixed;
  /* above the app content, below sheets (110) / alerts (120) / the
     switcher (96) AND the dup-home + button (90) — that button is
     always on top by binding design rule */
  z-index: 89;
  overflow: visible;
  /* The host band itself must NEVER swallow clicks: while open it spans a
     136px edge strip, and buttons that merely ALIGN with the dock (without
     overlapping it) were unreachable. Interaction lives on the children —
     the hot strip, the rail crescent and the icons. */
  pointer-events: none;
}
/* the always-armed summon strip — exactly the old collapsed hot edge */
.aw-hot {
  position: fixed;
  pointer-events: auto;
}
.app-wheel[data-edge='left'] .aw-hot { left: 0; top: 0; bottom: 0; width: 14px; }
.app-wheel[data-edge='right'] .aw-hot { right: 0; top: 0; bottom: 0; width: 14px; }
.app-wheel[data-edge='top'] .aw-hot { top: 0; left: 0; right: 0; height: 14px; }
.app-wheel[data-edge='bottom'] .aw-hot { bottom: 0; left: 0; right: 0; height: 14px; }
/* the hot strip the host occupies per edge (children are viewport-fixed).
   While OPEN the host grows to cover the whole dock area, so travelling
   from the strip to an icon never crosses a "dead" gap that would fire
   pointerleave and slam the dock shut. */
.app-wheel[data-edge='left'] {
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
}
.app-wheel[data-edge='right'] {
  right: 0;
  top: 0;
  bottom: 0;
  width: 14px;
}
.app-wheel[data-edge='top'] {
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
}
.app-wheel[data-edge='bottom'] {
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
}
.app-wheel[data-edge='left'].aw-open,
.app-wheel[data-edge='right'].aw-open {
  width: 136px;
}
.app-wheel[data-edge='top'].aw-open,
.app-wheel[data-edge='bottom'].aw-open {
  height: 136px;
}
/* the glass slab the icons ride in — a crescent clipped from the wheel's
   own circle (clip-path set by JS in SCREEN coordinates, so the rail is
   viewport-fixed). clip-path also clips HIT-TESTING: only the crescent
   itself is grabbable (for dragging the dock to another edge). The
   parent paints the 1.3px rim, the child the blurred glass fill. */
/* the carryable dock body: rail + ring together follow the pointer while
   moving, then settle to the target edge with a glide */
.aw-body {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.aw-body.aw-settle {
  transition: transform var(--dur-4) var(--ease-spring);
}
.aw-rail {
  position: fixed;
  inset: 0;
  background: var(--glass-stroke);
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.3));
  transition: opacity var(--dur-3) ease, transform var(--dur-4) var(--ease-spring), clip-path var(--dur-4) var(--ease-spring);
  cursor: grab;
  pointer-events: auto;
}
.app-wheel.aw-moving .aw-rail {
  cursor: grabbing;
}
/* hold-to-move armed: the slab visibly "lifts" so the intent is clear */
.app-wheel.aw-moving .aw-rail-fill {
  background: color-mix(in srgb, var(--blue) 16%, var(--glass-regular));
}
.aw-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--glass-regular);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  transition: clip-path var(--dur-4) var(--ease-spring);
  pointer-events: none;
}
/* the icon ring — viewport-fixed like the rail; only the ITEMS hit-test */
.aw-ring {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.aw-ring .aw-item {
  pointer-events: auto;
}
/* the wrap-seam departure ghost — same coordinate space as the items */
.aw-wrap-ghost {
  position: absolute;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  scale: var(--aw-scale, 0.5);
  pointer-events: none;
  transition:
    left var(--dur-4) var(--ease-glide),
    top var(--dur-4) var(--ease-glide),
    scale var(--dur-4) var(--ease-glide),
    opacity var(--dur-4) ease;
}
/* auto-hide (everywhere): collapsed to the strip until hovered */
.app-wheel.aw-collapsed .aw-rail {
  opacity: 0;
  pointer-events: none;
}
.app-wheel.aw-collapsed .aw-item {
  opacity: 0 !important;
  pointer-events: none !important;
}
.app-wheel[data-edge='left'].aw-collapsed .aw-rail {
  transform: translateX(-36px);
}
.app-wheel[data-edge='right'].aw-collapsed .aw-rail {
  transform: translateX(36px);
}
.app-wheel[data-edge='top'].aw-collapsed .aw-rail {
  transform: translateY(-36px);
}
.app-wheel[data-edge='bottom'].aw-collapsed .aw-rail {
  transform: translateY(36px);
}
/* the collapsed handle — a soft pill hinting the dock is there */
.app-wheel::after {
  content: '';
  position: absolute;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--label) 42%, transparent);
  opacity: 0.55;
  transition: opacity var(--dur-3) ease;
  pointer-events: none;
}
.app-wheel[data-edge='left']::after,
.app-wheel[data-edge='right']::after {
  top: 50%;
  translate: 0 -50%;
  width: 4px;
  height: 88px;
}
.app-wheel[data-edge='left']::after {
  left: 3px;
}
.app-wheel[data-edge='right']::after {
  right: 3px;
}
.app-wheel[data-edge='top']::after,
.app-wheel[data-edge='bottom']::after {
  left: 50%;
  translate: -50% 0;
  height: 4px;
  width: 88px;
}
.app-wheel[data-edge='top']::after {
  top: 3px;
}
.app-wheel[data-edge='bottom']::after {
  bottom: 3px;
}
.app-wheel.aw-open::after {
  opacity: 0;
}
/* the dock's right-click menu — one labeled toggle, glass card */
.aw-menu {
  position: fixed;
  z-index: 95;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--elev-3), var(--glass-spec);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
}
.aw-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: var(--r-md);
  font: 600 var(--fs-sm)/1.2 var(--font);
  color: var(--label);
  cursor: pointer;
  text-align: left;
}
.aw-menu-item:hover {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.aw-menu-check {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: transparent;
  border: 1.5px solid var(--label-3);
  border-radius: var(--r-sm);
}
.aw-menu-item.on .aw-menu-check {
  color: var(--on-accent);
  background: var(--blue);
  border-color: var(--blue);
}
.aw-menu-check svg {
  width: 15px;
  height: 15px;
}
.aw-menu-item.aw-menu-danger {
  color: var(--red);
}
.aw-menu-x {
  border: 0;
  color: inherit;
}
/* the icon riding the pointer while dragging OUT of the dock */
.aw-drag-ghost {
  position: fixed;
  z-index: 96;
  width: 56px;
  height: 56px;
  translate: -50% -50%;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4));
  transition: opacity var(--dur-4) ease, scale var(--dur-4) ease;
}
.aw-drag-ghost .app-ico {
  width: 56px;
  height: 56px;
}
.aw-drag-ghost.aw-ghost-drop {
  opacity: 0;
  scale: 1.35; /* melts INTO the popping tile */
}
.aw-drag-ghost.aw-ghost-back {
  opacity: 0;
  scale: 0.5;
}
/* the just-dropped tile pops in */
.tile.tile-pop,
.app.tile-pop {
  animation: tile-pop 0.45s var(--ease-spring, cubic-bezier(0.34, 1.4, 0.5, 1));
}
@keyframes tile-pop {
  0% { transform: scale(0.25); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
/* the dock's edge strip is reserved by EDGE, pinned or hidden alike — the
   pager keeps ONE constant aspect, and no tile ever sits under the slab */
#home-pages {
  transition: padding var(--dur-4) ease;
}
/* first dock publish lands INSTANTLY — no post-login slide */
html.no-dock-anim #home-pages,
html.no-dock-anim #page-dots,
html.no-dock-anim .home-status {
  transition: none !important;
}
html[data-dock-edge='left'] #home-pages {
  padding-left: 132px;
}
html[data-dock-edge='right'] #home-pages {
  padding-right: 132px;
}
html[data-dock-edge='top'] #home-pages {
  padding-top: 132px;
}
html[data-dock-edge='bottom'] #home-pages {
  padding-bottom: 12px; /* the lifted dots block below carries the band */
}
/* dots at their classic bottom seat, lifted clear of a bottom-edge dock —
   EDGE-keyed (pinned or hidden alike) so the pager aspect never changes */
html[data-dock-edge='bottom'] #page-dots {
  margin-bottom: 126px;
}
/* with a BOTTOM dock (even auto-hidden), app bottom bars step slightly up
   so using them never grazes the hot strip and summons the dock */
html[data-dock-edge='bottom'] .mapp-tabs {
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
html[data-dock-edge='bottom'] .gselbar {
  bottom: 24px;
}
.aw-item {
  position: absolute;
  /* the item box IS the icon box — the label hangs outside the flow, so
     every icon centres on the arc regardless of its name's length */
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: var(--label);
  opacity: var(--aw-op, 1);
  transform: translate(-50%, -50%) scale(var(--aw-scale, 1));
  transform-origin: center;
  /* NO overshoot on position — a springy left/top makes the arc wobble
     into an S mid-rotation; positions glide, only the scale may spring */
  transition:
    left var(--dur-4) var(--ease-glide),
    top var(--dur-4) var(--ease-glide),
    transform var(--dur-4) var(--ease-glide),
    opacity var(--dur-4) ease;
  -webkit-user-select: none;
  user-select: none;
}
/* wrap-around seam: the item teleports to the far end without animating */
.aw-item.aw-snap {
  transition: none;
}
.aw-item .app-ico,
.aw-item .folder-ico {
  width: 56px;
  height: 56px;
  flex: none;
}
/* hover: the icon comes to FULL size, nudges out of the slab, name shows */
.aw-item:hover {
  opacity: 1;
}
.app-wheel[data-edge='left'] .aw-item:hover {
  transform: translate(calc(-50% + 7px), -50%) scale(1);
}
.app-wheel[data-edge='right'] .aw-item:hover {
  transform: translate(calc(-50% - 7px), -50%) scale(1);
}
.app-wheel[data-edge='top'] .aw-item:hover {
  transform: translate(-50%, calc(-50% + 7px)) scale(1);
}
.app-wheel[data-edge='bottom'] .aw-item:hover {
  transform: translate(-50%, calc(-50% - 7px)) scale(1);
}
/* running-app marker: an unmistakable ACCENT dot on the edge side + an
   accent ring around the icon — instantly reads as "this one is open" */
.aw-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px color-mix(in srgb, var(--blue) 85%, transparent),
    0 0 2px color-mix(in srgb, var(--blue) 90%, transparent);
  opacity: 0;
  pointer-events: none;
}
.aw-item.aw-running .aw-dot {
  opacity: 1;
}
.aw-item.aw-running .app-ico {
  /* white top light scales with scene light; the blue ring/glow is a selection
     signal, not reflected light, so it stays at full strength. */
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, calc(0.28 * var(--icon-light, 1))),
    0 0 0 2.5px color-mix(in srgb, var(--blue) 80%, transparent),
    0 0 12px color-mix(in srgb, var(--blue) 45%, transparent);
}
.app-wheel[data-edge='left'] .aw-dot {
  left: -17px;
  top: 50%;
  translate: 0 -50%;
}
.app-wheel[data-edge='right'] .aw-dot {
  right: -17px;
  top: 50%;
  translate: 0 -50%;
}
.app-wheel[data-edge='top'] .aw-dot {
  top: -17px;
  left: 50%;
  translate: -50% 0;
}
.app-wheel[data-edge='bottom'] .aw-dot {
  bottom: -17px;
  left: 50%;
  translate: -50% 0;
}
/* the name — a glass chip beside the icon, like a macOS dock label;
   it opens AWAY from whichever edge the dock lives on */
.aw-label {
  position: absolute;
  opacity: 0;
  transition: opacity var(--dur-3) ease, transform var(--dur-3) var(--ease-spring);
  font: 600 var(--fs-sm)/1.2 var(--font);
  color: var(--label);
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: var(--r-lg);
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28), var(--glass-spec);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  pointer-events: none;
}
.app-wheel[data-edge='left'] .aw-label {
  left: calc(100% + 16px);
  top: 50%;
  translate: 0 -50%;
  transform: translateX(-6px);
}
.app-wheel[data-edge='right'] .aw-label {
  right: calc(100% + 16px);
  top: 50%;
  translate: 0 -50%;
  transform: translateX(6px);
}
.app-wheel[data-edge='top'] .aw-label {
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  transform: translateY(-6px);
}
.app-wheel[data-edge='bottom'] .aw-label {
  bottom: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  transform: translateY(6px);
}
.aw-item:hover .aw-label {
  opacity: 1;
  transform: translate(0, 0);
}

/* ═══ Projects widgets (wprj-*) — İKİ AYRI widget: Pano ve Takvim ═══════ */
/* Sekme çubuğu kalktı: her tile tek bir şeyi anlatır ve kimliğini üstteki
   ince başlık satırından alır. .widget.widget-app `padding: 0 …` veriyor —
   aynı özgüllükle ezilir. */
.widget.widget-app.widget-projects,
.widget.widget-app.widget-projects-calendar {
  padding: 13px 14px 12px;
  align-items: stretch;
  justify-content: flex-start;
}
/* Approvals inbox widget: like the projects tiles, it manages its own header
   and padding, so cancel the icon-tile's centering (align-items:center from
   .app) and horizontal padding — otherwise the content is centered wider than
   the tile and both edges clip. */
.widget.widget-app.widget-approvals {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}
.wprj {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
}
.wprj-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 2px;
}
.wprj-head-t {
  font: 800 var(--fs-sm)/1.15 var(--font);
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wprj-head-x {
  margin-left: auto;
  font: 600 var(--fs-2xs)/1 var(--font);
  color: var(--label-3);
  font-variant-numeric: tabular-nums;
}
.wprj-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Pano page: hero count + lifecycle story bar + attention rows */
.wprj-hero {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 2px 2px;
}
.wprj-hero b {
  font: 800 2.1rem/0.95 var(--font);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.wprj-hero span {
  font: 600 var(--fs-2xs)/1.15 var(--font);
  color: var(--label-2);
  max-width: 74px;
}
.wprj-hero em {
  margin-left: auto;
  font: 600 var(--fs-sm)/1 var(--font);
  font-style: normal;
  color: var(--label-3);
  font-variant-numeric: tabular-nums;
}
.wprj-stack {
  display: flex;
  gap: 2.5px;
  height: 9px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: 8px 0 4px;
}
.wprj-seg {
  border-radius: var(--r-xs);
  min-width: 5px;
}
.wprj-seg.is-muted { background: rgba(120, 120, 128, 0.5); }
.wprj-seg.is-info { background: var(--blue); }
.wprj-seg.is-live { background: var(--green); }
.wprj-seg.is-warn { background: var(--amber); }
.wprj-seg.is-done { background: color-mix(in srgb, var(--green) 55%, #fff 20%); }
.wprj-seg.is-off { background: rgba(120, 120, 128, 0.3); }
/* labeled legend under the story bar: dot + name + count, wrap 2-col */
.wprj-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 2px 2px 0;
}
.wprj-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 var(--fs-3xs)/1.25 var(--font);
  color: var(--label-2);
  max-width: 100%;
  min-width: 0;
}
.wprj-leg b {
  color: var(--label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wprj-projs {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* rows spread over the remaining height — no dead slab under the list */
  justify-content: space-evenly;
  gap: 8px;
  min-height: 0;
  margin-top: 4px;
}
.wprj-proj {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--label) 4.5%, transparent);
}
.wprj-proj-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--fs-2xs)/1.2 var(--font);
  color: var(--label);
}
.wprj-flag {
  font: 700 var(--fs-3xs)/1 var(--font);
  color: var(--label-2);
  padding: 4px 7px;
  border-radius: var(--r-sm);
  background: rgba(120, 120, 128, 0.16);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wprj-flag.is-late {
  color: var(--on-accent);
  background: color-mix(in srgb, var(--red) 82%, transparent);
}
.wprj-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.wprj-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.wprj-dot.is-muted {
  background: rgba(120, 120, 128, 0.55);
}
.wprj-dot.is-info {
  background: var(--blue);
}
.wprj-dot.is-live {
  background: var(--green);
}
.wprj-dot.is-warn {
  background: var(--amber);
}
.wprj-dot.is-done {
  background: color-mix(in srgb, var(--green) 55%, #fff 20%);
}
.wprj-dot.is-off {
  background: rgba(120, 120, 128, 0.35);
}
.wprj-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 var(--fs-2xs)/1.2 var(--font);
  color: var(--label-2);
}
.wprj-count {
  font: 700 var(--fs-sm)/1 var(--font);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
/* Takvim widget'ının alt şeridi: noktalar dokunmatikte okunamaz (hover
   yok), sıradaki iki olay YAZIYLA durur. */
.wprj-next {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--label) 10%, transparent);
}
.wprj-next-t {
  font: 700 var(--fs-4xs)/1 var(--font);
  color: var(--label-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wprj-next-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.wprj-next-row b {
  flex: none;
  min-width: 15px;
  font: 800 var(--fs-2xs)/1.2 var(--font);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.wprj-next-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 var(--fs-3xs)/1.25 var(--font);
  color: var(--label-2);
}
.wprj-next-row em {
  flex: none;
  font: 700 var(--fs-4xs)/1 var(--font);
  font-style: normal;
  color: var(--label-3);
}
.wprj-next-empty {
  font: 500 var(--fs-3xs)/1.3 var(--font);
  color: var(--label-3);
}
.wprj-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
}
.wprj-dow {
  display: grid;
  place-items: center;
  font: 700 var(--fs-4xs)/1 var(--font);
  color: var(--label-3);
  text-transform: uppercase;
}
.wprj-day {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--label-2);
}
.wprj-day i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 500 var(--fs-3xs)/1 var(--font);
  font-style: normal;
}
.wprj-dow.is-we,
.wprj-day.is-we {
  color: color-mix(in srgb, var(--label-3) 80%, transparent);
}
.wprj-day.is-out {
  color: var(--label-3);
  opacity: 0.4;
}
.wprj-day.is-today i {
  background: var(--blue);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 0 10px color-mix(in srgb, var(--blue) 65%, transparent);
}
.wprj-day.has-ev::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
}
.wprj-err {
  margin: auto;
  font: 500 var(--fs-2xs)/1.4 var(--font);
  color: var(--label-3);
}
/* hover detail — a glass chip listing the day's / row's story (PC) */
.wprj-tip {
  position: fixed;
  z-index: var(--z-tip);
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 250px;
  padding: 8px 11px;
  border-radius: var(--r-lg);
  background: var(--glass-regular);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32), var(--glass-spec);
  backdrop-filter: var(--blur-regular);
  -webkit-backdrop-filter: var(--blur-regular);
  font: 500 var(--fs-2xs)/1.35 var(--font);
  color: var(--label);
  pointer-events: none;
}
.wprj-tip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wprj-tip .wprj-tip-more {
  color: var(--label-3);
}
.wprj-flag.is-amber {
  /* amber is a LIGHT fill, so it needs dark text (unlike the red fill above
     which takes --on-accent white); derive a dark amber that tracks the hue. */
  color: color-mix(in srgb, var(--amber) 30%, #101010);
  background: color-mix(in srgb, var(--amber) 85%, transparent);
}

/* ═══════════ AI Assistant widget (wai-*) — a mini face of the chat ═══ */
/* Not a launcher: the widget renders the assistant's own transcript with
   the app's own bubble classes over the app's own chat wallpaper, so the
   springboard IS the conversation. */
.widget.widget-app.widget-ai {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}
.wai {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.wai-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--glass-stroke);
}
.wai-glyph {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--blue);
  flex: none;
}
.wai-glyph svg {
  width: 100%;
  height: 100%;
}
.wai-title {
  flex: 1;
  font: 700 var(--fs-sm)/1.2 var(--font);
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wai-expand {
  flex: none;
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--label-2);
  cursor: pointer;
}
.wai-expand:hover {
  background: color-mix(in srgb, var(--label) 8%, transparent);
  color: var(--label);
}
.wai-expand svg {
  width: 14px;
  height: 14px;
}
.wai-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
  background-image: url('../assets/chat_bg_dark.png');
  background-repeat: repeat;
  background-size: 380px 380px;
}
.wai-msgs::-webkit-scrollbar {
  display: none;
}
html[data-theme='light'] .wai-msgs {
  background-image: url('../assets/chat_bg_light.png');
}
html[data-hc] .wai-msgs,
html[data-rbg] .wai-msgs {
  background-image: none; /* hard/reading surfaces drop the decoration */
}
/* the app's bubbles at widget scale */
.wai-msgs .chat-bubble {
  max-width: 86%;
  padding: 7px 10px 5px;
  border-radius: var(--r-xl);
  gap: 3px;
}
.wai-msgs .chat-text {
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.wai-msgs .chat-time {
  font-size: var(--fs-4xs);
}
.wai-msgs .chat-typing {
  width: 54px;
  height: 30px;
}
.wai-file {
  font: 500 var(--fs-2xs)/1.3 var(--font);
  color: inherit;
  opacity: 0.85;
}
.wai-suggs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 2px;
}
.wai-sugg,
.wai-rich {
  border: 1px solid var(--glass-stroke);
  text-align: left;
  max-width: 86%;
  padding: 7px 12px;
  border-radius: var(--r-xl);
  background: var(--glass-regular);
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  color: var(--blue);
  font: 600 var(--fs-2xs)/1.25 var(--font);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.wai-sugg:hover,
.wai-rich:hover {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}
.wai-ask {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 10px 10px;
  padding: 4px 4px 4px 12px;
  border-radius: var(--r-capsule);
  border: 1px solid var(--glass-stroke);
  background: rgba(120, 120, 128, 0.12);
}
.wai-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--label);
  font: 500 var(--fs-xs)/1.2 var(--font);
  outline: none;
}
.wai-input::placeholder {
  color: var(--label-3);
}
.wai-send {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--on-accent);
  cursor: pointer;
  flex: none;
}
.wai-send svg {
  width: 13px;
  height: 13px;
}

/* ═══════════ Scheduling widget (wsc-*) — the week's factory pulse ═════ */
.widget.widget-app.widget-sched {
  padding: 14px;
  align-items: stretch;
  justify-content: flex-start;
}
.wsc {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* "Mine | All" on the summarising widgets: a compact labeled segment in
   the header — it must not grow like the form-level .gseg */
.gseg.wg-scope {
  flex: none;
  padding: 2px;
  border-radius: var(--r-md);
}
.gseg.wg-scope button {
  flex: none;
  padding: 4px 8px;
  font: 700 var(--fs-3xs)/1 var(--font);
  border-radius: calc(var(--r-md) - 2px);
}
.wprj-head .wg-scope {
  margin-left: auto;
  align-self: center;
}
/* "Mine" on an account with no employee link: the reason, centred in the
   body, with the one useful action right there — no silent fallback, no
   dead space pretending to be an empty week */
.wg-noemp {
  flex: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 8px;
  color: var(--label-2);
  font: 500 var(--fs-2xs)/1.4 var(--font);
  text-align: center;
  white-space: normal;
}
.wg-noemp .gbtn {
  flex: none;
  height: 32px;
  padding: 0 14px;
  font-size: var(--fs-2xs);
}
.wsc-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.wsc-title {
  flex: 1;
  font: 700 var(--fs-2xs)/1.2 var(--font);
  color: var(--label-2);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wsc-open {
  flex: none;
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--label-2);
  cursor: pointer;
}
.wsc-open:hover {
  background: color-mix(in srgb, var(--label) 8%, transparent);
  color: var(--label);
}
.wsc-open svg {
  width: 14px;
  height: 14px;
}
.wsc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* leftover height spreads — no dead slab */
  gap: 7px;
  cursor: pointer;
}
.wsc-hero {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.wsc-hero b {
  font: 800 2rem/0.95 var(--font);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.wsc-hero span {
  font: 600 var(--fs-2xs)/1.15 var(--font);
  color: var(--label-2);
}
.wsc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* 7-day density strip: how loaded is each coming day, today in blue */
.wsc-days {
  display: flex;
  gap: 5px;
}
.wsc-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 0 4px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--label) 4%, transparent);
}
.wsc-day.is-today {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.wsc-day-n {
  height: 11px;
  font: 700 var(--fs-3xs)/1.1 var(--font);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.wsc-day-bar {
  width: 6px;
  height: 24px;
  border-radius: var(--r-xs);
  background: rgba(120, 120, 128, 0.18);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.wsc-day-bar i {
  display: block;
  width: 100%;
  border-radius: var(--r-xs);
  background: var(--blue);
}
.wsc-day-l {
  font: 600 var(--fs-4xs)/1 var(--font);
  color: var(--label-3);
}
.wsc-sec {
  font: 700 var(--fs-3xs)/1.1 var(--font);
  color: var(--label-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wsc-rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  min-height: 0;
}
.wsc-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.wsc-wc {
  flex: none;
  width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--fs-3xs)/1.2 var(--font);
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.wsc-bar {
  flex: 1;
  height: 7px;
  border-radius: var(--r-xs);
  background: rgba(120, 120, 128, 0.18);
  overflow: hidden;
}
.wsc-bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-xs);
}
.wsc-bar i.is-live {
  background: var(--green);
}
.wsc-bar i.is-warn {
  background: var(--amber);
}
.wsc-bar i.is-late {
  background: var(--red);
}
.wsc-pct {
  flex: none;
  width: 38px;
  text-align: right;
  font: 700 var(--fs-3xs)/1 var(--font);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
/* the next jobs in line */
.wsc-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.wsc-next-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.wsc-next-when {
  flex: none;
  font: 700 var(--fs-3xs)/1.2 var(--font);
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.wsc-next-row.has-conf .wsc-next-when {
  color: var(--red);
}
.wsc-next-what {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 var(--fs-2xs)/1.2 var(--font);
  color: var(--label);
}
.wsc-next-wc {
  flex: none;
  font: 600 var(--fs-3xs)/1.2 var(--font);
  color: var(--label-3);
}
.wsc-empty {
  font: 500 var(--fs-2xs)/1.3 var(--font);
  color: var(--label-3);
}

/* ---------------- deployment license (banner + Ayarlar > Lisans) -------- */
.lic-banner {
  margin: 0 0 10px;
  padding: 10px 16px;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(10px);
}
.lic-banner.lic-grace {
  /* the warning rung between green "ok" and red "read-only": var(--orange). */
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  color: var(--orange-fg);
}
.lic-banner.lic-read_only {
  background: color-mix(in srgb, var(--red) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 50%, transparent);
  color: var(--red);
}
.lic-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.lic-textarea {
  width: 100%;
  resize: vertical;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font: 0.75rem/1.5 ui-monospace, monospace;
  padding: 10px;
}

/* role assignment console (App Manager) */
.arow-nav { cursor: pointer; }
.asg-segs { display: flex; gap: 6px; margin-left: auto; }
.asg-seg {
  border: 1px solid var(--stroke);
  /* a faint fill so an unselected segment reads as a chip on EVERY theme (the
     bare-border version vanished on light — --stroke was undefined) */
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: var(--label-2);
  border-radius: var(--r-capsule);
  padding: 5px 12px;
  font-size: var(--fs-2xs);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-2) ease;
}
.asg-seg:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.asg-seg.on {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-accent);
}

/* ------------------------------ store (Magaza) -------------------------- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.store-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-2xl);
  /* the settings-group material: theme tokens, never white-on-white —
     the light theme lost the card boundary with literal overlays */
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular);
  box-shadow: var(--glass-spec);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.store-card:hover { background: color-mix(in srgb, var(--blue) 8%, var(--glass-regular)); }
.store-card .app-ico { width: 46px; height: 46px; flex: 0 0 auto; }
.store-card-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.store-card-name { font-weight: 600; font-size: var(--fs-md); }
.store-card-tag {
  font-size: var(--fs-xs);
  opacity: 0.65;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-card-act {
  margin-left: auto;
  flex: 0 0 auto;
  /* a long status label ("Yönetici gerekir") must never spill over the
     card meta — the pill clamps, the full state lives on the detail page */
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--r-capsule);
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  color: var(--blue-fg);
}
/* Differentiated so the state survives the grayscale/squint test, not colour
   alone: Open = green tint, Install = FILLED primary (the acquisition CTA),
   Request = blue tint. */
.store-card-act.st-open { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-fg); }
.store-card-act.st-install { background: var(--blue); color: var(--on-accent); }
.store-card-act.st-request { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue-fg); }
.store-card-act.st-license, .store-card-act.st-admin { background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; opacity: 0.7; }

/* Detail hero: a cohesive card aligned with the 560px content column below —
   icon + name/tagline together, the action beside them (not stranded at the
   far screen edge, which read as unbalanced). */
.store-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 16px;
  border-radius: var(--r-2xl);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular);
  box-shadow: var(--glass-spec);
}
.store-hero-ico { width: 60px; height: 60px; flex: none; }
.store-hero-meta { min-width: 0; flex: 1; }
.store-hero-name { font-size: var(--fs-2xl); font-weight: 700; }
.store-hero-tag { font-size: var(--fs-sm); opacity: 0.7; margin-top: 2px; }
/* the CTA sits at the card's right (meta flex:1 pushes it), not margin:auto */
.store-hero-act { flex: none; padding: 9px 20px; }
.store-hero-act.st-install { background: var(--blue); color: var(--on-accent); }
.store-hero-act.st-open { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green-fg); }
.store-hero-act.st-request { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue-fg); }
/* a dead-end state (license/admin) is a STATUS chip, never a control */
.store-hero-status {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-capsule);
  background: color-mix(in srgb, currentColor 8%, transparent);
  opacity: 0.75;
}
.store-desc { padding: 16px; font-size: var(--fs-md); line-height: 1.55; opacity: 0.9; }
/* screenshot strip: horizontal scroll, 16:10 frames, click → unified viewer */
.store-shots {
  display: flex;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 4px 2px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.store-shot {
  flex: 0 0 min(78%, 400px);
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular);
  box-shadow: var(--glass-spec);
  overflow: hidden;
  cursor: zoom-in;
}
.store-shot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.store-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: color-mix(in srgb, var(--label) 6%, transparent);
}
.store-shot figcaption {
  padding: 8px 12px;
  font: 500 var(--fs-xs)/1.3 var(--font);
  color: var(--label-2);
}


/* --------------------- global calendar (Takvimler app) ------------------ */
.gcal-root { max-width: 1040px; margin: 0 auto; }
.gcal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gcal-title { flex: 1; text-align: center; font-size: var(--fs-lg); font-weight: 700; }
.gbtn.gcal-nav { flex: 0 0 auto; width: 42px; min-width: 42px; padding: 8px 0; }
.gcal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gcal-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--stroke, rgba(255,255,255,0.14));
  background: transparent; color: inherit; border-radius: var(--r-capsule);
  padding: 5px 12px; font-size: var(--fs-xs); cursor: pointer; opacity: 0.55;
}
.gcal-chip.on { opacity: 1; border-color: color-mix(in srgb, var(--cc) 55%, transparent); background: color-mix(in srgb, var(--cc) 12%, transparent); }
.gcal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); display: inline-block; }
.gcal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.gcal-week span { text-align: center; font-size: var(--fs-2xs); opacity: 0.55; text-transform: capitalize; }
.gcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.gcal-day {
  min-height: 74px; border-radius: var(--r-lg); padding: 8px 8px 6px;
  border: 1px solid var(--stroke, rgba(255,255,255,0.09));
  background: rgba(255,255,255,0.04); color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.gcal-day:hover { background: rgba(255,255,255,0.07); }
.gcal-day.is-out { opacity: 0.32; }
.gcal-day.is-today .gcal-num { background: var(--blue); color: var(--on-accent); }
.gcal-day.is-sel { border-color: var(--blue); box-shadow: 0 0 0 1.5px rgba(10,132,255,0.5); }
.gcal-num {
  font-size: var(--fs-sm); font-weight: 650; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.gcal-bars { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; }
.gcal-bar { height: 5px; border-radius: var(--r-xs); flex: 1 1 30%; min-width: 14px; }
.gcal-bar.is-open { background: var(--cc); }
.gcal-bar.is-closed { background: color-mix(in srgb, var(--cc) 22%, transparent); border: 1px dashed color-mix(in srgb, var(--cc) 45%, transparent); }
.gcal-detail { padding: 6px 0; }
.gcal-det-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.gcal-det-row + .gcal-det-row { border-top: 1px solid var(--stroke, rgba(255,255,255,0.08)); }
.gcal-det-name { font-weight: 650; font-size: var(--fs-md); }
.gcal-det-val { margin-left: auto; font-size: var(--fs-sm); opacity: 0.75; }
.gcal-search {
  border: 1px solid var(--stroke, rgba(255,255,255,0.14));
  background: rgba(0,0,0,0.16); color: inherit; border-radius: var(--r-capsule);
  padding: 5px 14px; font-size: var(--fs-xs); width: 180px;
}
.gcal-more { font-size: var(--fs-2xs); opacity: 0.55; align-self: center; }

/* calendars management */
.gbtn.gcal-manage { flex: 0 0 auto; width: auto; min-width: 0; padding: 8px 16px; font-size: var(--fs-sm); }
.gcal-in {
  border: 1px solid var(--stroke, rgba(255,255,255,0.14));
  background: rgba(0,0,0,0.16); color: inherit; border-radius: var(--r-md);
  padding: 9px 12px; font-size: var(--fs-sm); width: 100%;
}
.gcal-week-ed { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.gcal-day-ed { display: flex; align-items: center; gap: 12px; }
.gcal-downame { width: 110px; flex: 0 0 auto; font-size: var(--fs-sm); opacity: 0.75; text-transform: capitalize; }
.gcal-lines { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gcal-line { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.gcal-time {
  border: 1px solid var(--stroke, rgba(255,255,255,0.14));
  background: rgba(0,0,0,0.16); color: inherit; border-radius: var(--r-md);
  padding: 4px 6px; font-size: var(--fs-xs);
}
.gcal-x, .gcal-addline {
  border: none; background: rgba(255,255,255,0.08); color: inherit;
  border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: var(--fs-xs);
}
.gcal-x:hover { background: rgba(255,69,58,0.3); }
.gcal-holiday { flex-direction: row; align-items: center; }
.gcal-holiday .gcal-in { width: auto; flex: 1; }
.gcal-holiday .gbtn { flex: 0 0 auto; width: auto; }
.gcal-kv { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: var(--fs-md); }
.gcal-kv + .gcal-kv { border-top: 1px solid var(--stroke, rgba(255,255,255,0.08)); }
.gcal-kv span { opacity: 0.65; }
.gcal-kv b { font-weight: 600; }
.gcal-add .srow-label { color: var(--blue); font-weight: 650; }
.gcal-holiday select.gcal-in { min-width: 110px; flex: 0 0 auto; }
.gcal-holiday input.gcal-in { flex: 1; }

/* --------------------------- nesting viewer ----------------------------- */
.nst-root { max-width: 1180px; margin: 0 auto; }
.nst-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
/* theme-aware glass — dark-only white literals washed out on the light theme
   (KPI cards + job rows invisible, same class of bug as the store cards). */
.nst-kpi {
  border: 1px solid var(--glass-stroke);
  background: var(--glass-regular); box-shadow: var(--glass-spec);
  border-radius: var(--r-xl);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.nst-kpi b { font-size: var(--fs-xl); font-weight: 750; color: var(--label); font-variant-numeric: tabular-nums; }
.nst-kpi span { font-size: var(--fs-2xs); color: var(--label-2); }
.nst-body { display: flex; gap: 14px; align-items: flex-start; }
.nst-side { flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px; }
.nst-jobs { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.nst-job {
  display: flex; align-items: center; gap: 8px; text-align: left;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-thin); color: var(--label);
  border-radius: var(--r-lg); padding: 9px 12px; cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.nst-job:hover { background: color-mix(in srgb, var(--blue) 8%, var(--glass-thin)); }
.nst-job.on {
  border-color: var(--blue-fg);
  background: color-mix(in srgb, var(--blue) 10%, var(--glass-thin));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--blue) 45%, transparent);
}
.nst-job-code { font-weight: 700; font-size: var(--fs-sm); flex: 0 0 auto; color: var(--label); }
.nst-job-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nst-job-status { flex: 0 0 auto; margin-left: auto; font-size: var(--fs-3xs); font-weight: 600; color: var(--label-3); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.nst-job-status.st-completed { color: var(--green-fg); }
.nst-job-status.st-failed { color: var(--red); }
.nst-job-status.st-running { color: var(--blue-fg); }
.nst-main { flex: 1; min-width: 0; }
.nst-actions { display: flex; gap: 10px; margin: 12px 0; }
.gbtn.nst-dl { flex: 0 0 auto; width: auto; min-width: 0; padding: 8px 18px; font-size: var(--fs-sm); }
/* the layout preview is a technical drawing — kept on white "paper" in both
   themes (CAD convention), framed with a theme-aware border. */
.nst-svg {
  border: 1px solid var(--glass-stroke);
  background: #fff; border-radius: var(--r-xl); padding: 10px; overflow: auto;
}
.nst-svg svg { max-width: 100%; height: auto; display: block; }

/* ── analytics widget (wan-*): a saved model on the springboard ── */
/* The tile host centers its children (icon tiles); this widget must STRETCH
   instead — otherwise the body takes its max-content width (one long line) and
   overflows the tile on both sides. */
.wg-analytics { display: flex; flex-direction: column; align-items: stretch; padding: var(--sp-3); gap: var(--sp-2); }
.wg-analytics .wan-head, .wg-analytics .wan-body { width: 100%; min-width: 0; }
.wan-head { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.wan-head:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); }
.wprj:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.wan-title { font-weight: 700; font-size: var(--fs-sm); color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wan-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.wan-row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--label); }
.wan-lbl { flex: 0 0 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wan-bar { flex: 1; height: 8px; border-radius: var(--r-xs); background: var(--glass-thin); overflow: hidden; }
.wan-bar i { display: block; height: 100%; background: var(--blue); border-radius: var(--r-xs); }
.wan-val { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.wan-spark { width: 100%; height: 46px; }
.wan-spark path { fill: none; stroke: var(--blue); stroke-width: 2; }
.wan-big { font-size: var(--fs-3xl); font-weight: 800; color: var(--label); }
.wan-note { font-size: var(--fs-2xs); color: var(--label-2); }
.wan-warn { font-size: var(--fs-2xs); font-weight: 700; color: var(--amber); }
.wan-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* KPI delta: glyph + colour + text, and the base it was measured against */
.wan-delta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--label-2);
}
.wan-delta-ico { width: 14px; height: 14px; flex: none; }
.wan-delta-up { color: var(--green); }
.wan-delta-down { color: var(--red); }
.wan-delta-flat { color: var(--label-2); }
.wan-delta-none { font-weight: 600; color: var(--label-3); }
.wan-delta-vs { font-weight: 500; color: var(--label-3); }
.wan-base { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; font-size: var(--fs-2xs); color: var(--label-3); }
.wan-base > span { flex: none; }
.wan-base-sel {
  font: inherit; font-size: var(--fs-2xs); color: var(--label); background: var(--glass-thin);
  border: 1px solid var(--glass-stroke); border-radius: var(--r-sm); padding: 2px 6px; flex: 1; min-width: 0; width: 100%;
}
.wan-delta { min-width: 0; }
.wan-delta-vs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wan-chip { font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--r-sm); background: var(--glass-thin); border: 1px solid var(--glass-stroke); color: var(--label); }
.wan-chip-A { background: color-mix(in srgb, var(--green) 22%, transparent); }
.wan-chip-B { background: color-mix(in srgb, var(--amber) 22%, transparent); }
.wan-pick {
  display: block; width: 100%; text-align: left; font: inherit; font-size: var(--fs-2xs);
  color: var(--label); background: var(--glass-thin); border: 1px solid var(--glass-stroke);
  border-radius: var(--r-sm); padding: 5px 8px; cursor: pointer; margin-top: 4px;
}