/* ---------- themes ---------- */
:root,
[data-theme="phosphor"] {
  --bg: #020a04;
  --bg-2: #04120a;
  --bg-3: #082010;
  --fg: #9dff9d;
  --muted: #4fcf62;
  --faint: #5c9a5e;
  --line: #0f3a1a;
  --accent: #c6ff6b;
  --accent-2: #7dff8a;
  --ok: #9dff9d;
  --warn: #e9ff70;
  --err: #ff8d6b;
  --info: #7dffd8;
  --vio: #b6ffb0;
  --sel: #9dff9d33;
  --chip: #06180c;
  --glow: 0 0 6px #4fff6a66;
}
[data-theme="paper"] {
  --bg: #f3efe4;
  --bg-2: #ebe6d8;
  --bg-3: #e1dbca;
  --fg: #1d1b16;
  --muted: #5f5a4e;
  --faint: #6d6a63;
  --line: #d6cfbd;
  --accent: #c2410c;
  --accent-2: #a16207;
  --ok: #2f7d3b;
  --warn: #a16207;
  --err: #b42318;
  --info: #1d5fa8;
  --vio: #6d3fb0;
  --sel: #c2410c26;
  --chip: #e9e3d3;
}
[data-theme="ember"] {
  --bg: #0f0e0c;
  --bg-2: #161511;
  --bg-3: #1f1d18;
  --fg: #e9e4d6;
  --muted: #a39d8f;
  --faint: #8b8578;
  --line: #2a2822;
  --accent: #ff7a45;
  --accent-2: #ffb347;
  --ok: #8fd694;
  --warn: #f2c14e;
  --err: #ff6b6b;
  --info: #7cc4ff;
  --vio: #c79bff;
  --sel: #ff7a4533;
  --chip: #1c1a16;
  --glow: 0 0 0 transparent;
}
[data-theme="midnight"] {
  --bg: #0b1020;
  --bg-2: #10172b;
  --bg-3: #172038;
  --fg: #dfe6f5;
  --muted: #93a0bd;
  --faint: #7a8195;
  --line: #222c47;
  --accent: #7aa2ff;
  --accent-2: #5eead4;
  --ok: #86efac;
  --warn: #fcd34d;
  --err: #fb7185;
  --info: #67e8f9;
  --vio: #c4b5fd;
  --sel: #7aa2ff33;
  --chip: #131b31;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
[hidden] {
  display: none !important;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(
    --font-mono,
    "JetBrains Mono",
    ui-monospace,
    Menlo,
    monospace
  );
  font-size: var(--base-font, 14px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition:
    background 0.3s,
    color 0.3s;
}
::selection {
  background: var(--sel);
}
a {
  color: var(--info);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Visually hidden, but still announced by screen readers. Hardened so the
   inline links inside can never contribute to the document's scroll width. */
.sr-only {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.sr-only * {
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}
.noscript {
  padding: 2rem;
  font-family: sans-serif;
}
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- app frame ---------- */
.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  text-shadow: var(--glow);
  font-family: var(--font-mono, inherit);
}
.tbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--win-bar-bg, var(--bg-2));
  font-size: 12px;
  user-select: none;
  flex: none;
}
.tbar__dots {
  display: flex;
  gap: 7px;
}
.tbar__dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.tbar__dots span:nth-child(1) {
  background: #ff5f57;
  border-color: #e0443e;
}
.tbar__dots span:nth-child(2) {
  background: #febc2e;
  border-color: #dea123;
}
.tbar__dots span:nth-child(3) {
  background: #28c840;
  border-color: #1aab29;
}
.tbar__dots span {
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.tbar__dots span:hover {
  filter: brightness(1.3);
  transform: scale(1.18);
}
.tbar__title {
  flex: 1;
  text-align: center;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbar__quick {
  display: flex;
  gap: 4px;
  position: relative;
}
/* Language picker: a single flag chip that drops a flag list below. */
.tbar__lang { position: relative; display: inline-flex; }
.tbar__lang-btn {
  padding: 3px 8px; line-height: 1.35; font-size: 11px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px;
}
.tbar__lang-btn:hover, .tbar__lang-btn[aria-expanded="true"] { color: var(--fg); border-color: var(--accent); }
.tbar__lang-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 400;
  display: grid; gap: 2px; padding: 6px; min-width: 168px;
  max-height: min(60vh, 420px); overflow: auto;
  background: var(--bg-2, var(--bg)); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 18px 40px -14px #000c;
}
.tbar__lang-list[hidden] { display: none; }
.tbar__lang-list button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 9px; font-size: 12px; text-align: left; cursor: pointer;
  background: transparent; color: var(--fg); border: 0; border-radius: 6px;
}
.tbar__lang-list button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tbar__lang-list button.on { background: color-mix(in srgb, var(--accent) 24%, transparent); font-weight: 700; }
@media (max-width: 720px) {
  .tbar__lang-list { position: fixed; top: 46px; right: 8px; left: 8px; min-width: 0; }
}
.tbar__quick a {
  color: var(--muted);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
}
.tbar__quick a:hover {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
.faint {
  color: var(--faint);
}
.muted {
  color: var(--muted);
}

.screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px clamp(14px, 3vw, 36px) 12px;
  overscroll-behavior: contain;
}
.screen::-webkit-scrollbar {
  width: 10px;
}
.screen::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: 10px;
  border: 2px solid var(--bg);
}
.out {
  max-width: 1100px;
}
.ln {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.6em;
  animation: ln-in 0.2s ease both;
}
@keyframes ln-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
.blk {
  margin: 2px 0 10px;
  white-space: pre-wrap;
  word-break: break-word;
  animation: rise 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.blk .man {
  white-space: normal;
}
.blk .man .opt,
.blk .man > span:first-child {
  white-space: pre;
}
.helpcols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 20px;
  margin: 2px 0;
}
.helpcols > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.echo {
  color: var(--fg);
  margin-top: 30px;
}
.echo .ps1 {
  margin-right: 0.6ch;
}

/* prompt */
.ps1 {
  white-space: nowrap;
  user-select: none;
}
.ps1 .u {
  color: var(--ok);
  font-weight: 700;
}
.ps1 .h {
  color: var(--accent);
  font-weight: 700;
}
.ps1 .p {
  color: var(--info);
}
.ps1 .g {
  color: var(--vio);
}
.ps1 .s {
  color: var(--fg);
}
.prompt {
  display: flex;
  gap: 0.6ch;
  align-items: center;
  max-width: 1100px;
  margin-top: 10px;
  padding-bottom: 6px;
  position: relative;
}
.field {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 1.6em;
}
.field input,
.mirror {
  position: absolute;
  inset: 0;
  font: inherit;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre;
  padding: 0;
  margin: 0;
  border: 0;
}
.field input {
  width: 100%;
  background: transparent;
  color: transparent;
  caret-color: var(--accent);
  outline: none;
  font-size: inherit;
}
.field input::placeholder {
  color: var(--faint);
  opacity: 0.7;
}
.mirror {
  pointer-events: none;
  overflow: hidden;
  color: var(--fg);
}
.mirror .c-ok {
  color: var(--ok);
}
.mirror .c-bad {
  color: var(--err);
}
.mirror .c-arg {
  color: var(--fg);
}
.mirror .c-str {
  color: var(--accent-2);
}
.mirror .c-flag {
  color: var(--info);
}
.mirror .c-pipe {
  color: var(--vio);
}
.mirror .ghost {
  color: var(--faint);
}
.prompt.is-busy {
  opacity: 0.35;
}
body.busy .chip,
body.busy .cl,
body.busy .btnl,
body.busy .opt,
body.busy .aci {
  pointer-events: none;
  opacity: 0.35;
}

/* chips */
.chips {
  display: flex;
  gap: 6px;
  padding: 8px clamp(14px, 3vw, 36px);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  flex: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chips .hint {
  color: var(--faint);
  font-size: 12px;
  white-space: nowrap;
  align-self: center;
  margin-right: 4px;
}
.chip {
  flex: none;
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  color: var(--fg);
  white-space: nowrap;
  transition:
    border-color 0.15s,
    color 0.15s,
    transform 0.15s,
    opacity 0.2s;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.chip:active {
  transform: translateY(1px);
}
.chip b {
  color: var(--accent);
  font-weight: 500;
}

/* tmux */
.tmux {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background: var(--accent);
  color: var(--bg);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: none;
  flex: none;
}
.tmux b {
  font-weight: 800;
}
.tmux__win {
  background: var(--bg);
  color: var(--accent);
  padding: 0 6px;
  margin-left: 6px;
}
.tmux__m {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmux__r {
  display: flex;
  gap: 14px;
}
.app.degraded .tmux {
  background: var(--err);
  animation: blink 0.5s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0.7;
  }
}

/* ---------- output elements ---------- */
.cl {
  color: var(--accent);
  border-bottom: 1px dashed color-mix(in oklab, var(--accent) 55%, transparent);
  padding: 0;
  line-height: 1.3;
}
.cl:hover {
  background: var(--accent);
  color: var(--bg);
  border-bottom-color: transparent;
}
.btnl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg-2));
  padding: 7px 13px;
  border-radius: 10px;
  margin: 2px 4px 2px 0;
  line-height: 1.35;
  font: inherit;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}
.btnl:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  text-decoration: none;
}
.btnl:active { transform: translateY(1px); }
.btnl:disabled { opacity: 0.45; cursor: not-allowed; }
/* The terminal keeps its own tighter, squarer buttons so log output still reads
   like a console rather than a settings pane. */
.app.win #out .btnl,
#out .btnl {
  border-radius: 4px;
  padding: 0 8px;
  background: none;
  font-weight: 500;
  line-height: 1.7;
}
.k {
  color: var(--accent);
}
.s {
  color: var(--accent-2);
}
.n {
  color: var(--vio);
}
.b {
  color: var(--info);
}
.ok {
  color: var(--ok);
}
.warn {
  color: var(--warn);
}
.err {
  color: var(--err);
}
.info {
  color: var(--info);
}
.vio {
  color: var(--vio);
}
.fg {
  color: var(--fg);
}
.bold {
  font-weight: 700;
}
.it {
  font-style: italic;
}
.dim {
  /* 0.6 dropped the ink to 4.30:1 on the light theme, under the 4.5 minimum.
     0.72 keeps the "quieter" look while staying readable in every theme. */
  opacity: 0.72;
}
mark {
  background: var(--warn);
  color: var(--bg);
  border-radius: 2px;
}
.banner {
  color: var(--accent);
  line-height: 1.05;
  font-size: min(14px, calc((100vw - 56px) / 66 / 0.6));
  margin: 6px 0 10px;
  white-space: pre;
  overflow: hidden;
  font-weight: 400;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.banner span {
  color: var(--accent-2);
}
.box {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 6px 0 12px;
  max-width: 820px;
  background: var(--bg-2);
}
.box--feat {
  border-color: color-mix(in oklab, var(--accent) 60%, var(--line));
  position: relative;
}
.box--feat::before {
  content: attr(data-label);
  position: absolute;
  top: -0.8em;
  left: 12px;
  background: var(--bg);
  padding: 0 6px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.row {
  display: grid;
  grid-template-columns: var(--cols, 18ch 1fr);
  gap: 0 2ch;
}
.tbl {
  white-space: pre;
  line-height: 1.2;
  overflow-x: auto;
  display: block;
  max-width: 100%;
}
.bar {
  color: var(--accent);
}
.pill {
  display: inline-block;
  font-size: 11px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  line-height: 1.5;
  margin-left: 4px;
}
.neo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 3ch;
  align-items: start;
}
.neo pre {
  margin: 0;
  color: var(--accent);
  line-height: 1.1;
  font-size: 12px;
}
.swatch {
  display: inline-block;
  width: 2.2ch;
  height: 1em;
  vertical-align: middle;
}
.man h4 {
  margin: 14px 0 4px;
  color: var(--fg);
  font-weight: 700;
}
.man p {
  margin: 0 0 10px 7ch;
  max-width: 78ch;
}
.man .opt {
  margin-left: 7ch;
}
.graph {
  color: var(--vio);
}
.tea {
  color: var(--accent-2);
  line-height: 1.15;
}
.ach-toast b {
  color: var(--accent);
}
.img-inline {
  max-width: min(520px, 100%);
  border-radius: 6px;
  border: 1px solid var(--line);
  margin: 6px 0;
  display: block;
}
.typing::after {
  content: "▌";
  color: var(--accent);
  animation: blink 0.8s steps(2) infinite;
}

/* chaos */
.app.chaos .ln {
  transition:
    transform 0.5s,
    filter 0.4s,
    opacity 0.4s;
}
.app.chaos .ln:nth-child(3n) {
  transform: translateX(calc(var(--j, 1) * 8px)) skewX(-4deg);
  filter: blur(1px);
}
.app.chaos .ln:nth-child(5n) {
  opacity: 0.25;
}
.app.chaos .ln:nth-child(7n) {
  transform: translateX(-14px);
  color: var(--err);
}
.app.shake {
  animation: shake 0.25s linear 6;
}
.app.win {
  position: absolute;
  left: 11%;
  top: 40px;
  width: min(880px, 82vw);
  height: min(560px, calc(100vh - 90px));
  z-index: 10;
  box-shadow: 0 30px 80px -20px #000c;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  pointer-events: auto;
  background: var(--win-bg, var(--bg));
}
.app.win.max {
  border-radius: 0;
}
@keyframes shake {
  25% {
    transform: translate(3px, -2px);
  }
  50% {
    transform: translate(-3px, 1px);
  }
  75% {
    transform: translate(2px, 2px);
  }
}
.app.wipe .out {
  opacity: 0;
  transition: opacity 0.4s;
}

/* sl train */
.train {
  white-space: pre;
  color: var(--fg);
  line-height: 1.1;
  font-size: 12px;
  overflow: hidden;
  position: relative;
  height: 9em;
}
.train pre {
  position: absolute;
  left: 100%;
  margin: 0;
  animation: choo 4.2s linear forwards;
}
@keyframes choo {
  to {
    transform: translateX(calc(-100vw - 100%));
  }
}

/* matrix */
.matrix {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  cursor: pointer;
}

/* toast */
.toast {
  position: fixed;
  right: 16px;
  bottom: 44px;
  z-index: 80;
  max-width: min(380px, calc(100vw - 32px));
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12px;
  box-shadow: 0 12px 40px -12px #000a;
  animation: tin 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast b {
  color: var(--accent);
}
@keyframes tin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- pager (reader) ---------- */
.pager {
  position: absolute;
  inset: 38px 0 26px;
  z-index: 40;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  animation: pin 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pager[hidden] {
  display: none;
}
@keyframes pin {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.pager__bar {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 32px;
  padding: 0 clamp(14px, 3vw, 36px);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.pager__cmd {
  flex: 1;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pager__pct {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pager__q {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 8px;
  color: var(--muted);
}
.pager__q:hover {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.pager__progress {
  height: 2px;
  background: var(--bg-2);
}
.pager__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}
.pager__scroll {
  overflow-y: auto;
  scroll-behavior: smooth;
}
.pager__grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 48px;
  justify-content: center;
  padding: 40px clamp(16px, 4vw, 48px) 80px;
}
.pager__toc {
  position: sticky;
  top: 24px;
  align-self: start;
  font-size: 12px;
  max-height: calc(100dvh - 200px);
  overflow: auto;
}
.pager__toc p {
  color: var(--faint);
  margin: 0 0 8px;
}
.pager__toc a {
  display: block;
  color: var(--muted);
  padding: 3px 0 3px 10px;
  border-left: 1px solid var(--line);
  line-height: 1.4;
}
.pager__toc a:hover,
.pager__toc a.on {
  color: var(--accent);
  border-left-color: var(--accent);
  text-decoration: none;
}
.pager__foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 6px clamp(14px, 3vw, 36px);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 12px;
  color: var(--faint);
}
.pager__foot .btnl {
  font-size: 12px;
}

.prose {
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--fg);
  text-shadow: none;
  min-width: 0;
}
.prose .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--faint);
  margin-bottom: 14px;
}
.prose .meta .k {
  color: var(--accent);
}
.prose h1.title {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-weight: 800;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: "JetBrains Mono", monospace;
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: 20px;
}
.prose h1 {
  font-size: 1.6em;
}
.prose h2 {
  font-size: 1.35em;
}
.prose h3 {
  font-size: 1.2em;
  margin: 2em 0 0.6em;
}
.prose h4 {
  font-size: 1.02em;
  margin: 1.6em 0 0.4em;
  color: var(--accent-2);
}
.prose h3::before,
.prose h4::before {
  content: none;
}
.prose p {
  margin: 0 0 1.1em;
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose strong,
.prose b {
  color: var(--fg);
  font-weight: 700;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  background: var(--bg-2);
}
.prose figure {
  margin: 1.6em 0;
}
.prose figcaption {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--faint);
  text-align: center;
  margin-top: 8px;
}
.prose blockquote {
  margin: 1.4em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}
.prose ul,
.prose ol {
  padding-left: 1.4em;
  margin: 0 0 1.1em;
}
.prose li {
  margin: 0.3em 0;
}
.prose pre {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  white-space: pre;
}
.prose code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.86em;
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.prose hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 2em 0;
}
.prose table {
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
  margin: 1em 0;
}
.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}
.prose .notice {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: 14px 16px;
  color: var(--muted);
  margin: 1.4em 0;
}
.prose [align="center"] {
  text-align: center;
}
.prose .end {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--faint);
  margin-top: 3em;
  border-top: 1px dashed var(--line);
  padding-top: 1em;
}

/* vim */
.vim {
  color: var(--info);
}

@media (max-width: 900px) {
  .pager__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 24px;
  }
  .pager__toc {
    display: none;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
  .app {
    grid-template-rows: auto 1fr auto auto;
  }
  .tbar {
    height: 40px;
    padding: 0 10px;
    gap: 8px;
  }
  .tbar__dots {
    display: flex;
    gap: 6px;
  }
  .tbar__dots span:nth-child(3) {
    display: none;
  }
  .tbar__title {
    text-align: left;
    font-size: 11px;
  }
  .tbar__quick {
    gap: 3px;
  }
  .tbar__quick a {
    padding: 3px 6px;
    font-size: 10px;
  }
  .screen {
    padding: 12px 12px 10px;
  }
  .chips {
    padding: 7px 12px;
    gap: 8px;
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
  .chips .hint {
    display: none;
  }
  .chip {
    font-size: 13px;
    padding: 8px 13px;
  }
  .tmux {
    display: none;
  }
  .tmux__r {
    gap: 8px;
  }
  .tmux__l .tmux__win,
  .tmux__r [data-ach] {
    display: none;
  }
  .neo {
    grid-template-columns: 1fr;
  }
  .neo pre {
    font-size: 9px;
  }
  .prose {
    font-size: 16px;
  }
  .field input {
    font-size: 16px;
  }
  .field {
    height: 1.8em;
  }
  .mirror {
    font-size: 16px;
  }
  .helpcols {
    grid-template-columns: 1fr;
  }
  .row {
    grid-template-columns: 1fr !important;
  }
  .opt {
    font-size: 14px;
    padding: 9px 14px;
    margin: 4px 8px 4px 0;
  }
  .opt.skip {
    font-size: 13px;
    padding: 4px 10px;
  }
  .btnl {
    display: inline-block;
    padding: 6px 11px;
    line-height: 1.5;
    margin: 3px 6px 3px 0;
  }
}
.opt {
  display: inline-block;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 11px;
  margin: 3px 8px 3px 0;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    border-color 0.12s,
    color 0.12s,
    box-shadow 0.12s;
  animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.opt:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px #000a;
}
.opt:active {
  transform: translateY(0) scale(0.98);
}
.opt.skip {
  font-size: 12px;
  padding: 2px 9px;
  margin-left: 6px;
  color: var(--muted);
}
.opt b {
  color: var(--accent);
  font-weight: 700;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
}
.rise {
  animation: rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.alert {
  border: 1px solid var(--err);
  border-left: 3px solid var(--err);
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--bg-2);
  margin: 6px 0;
  max-width: 820px;
  animation: flash 0.5s ease 2;
}
@keyframes flash {
  0%,
  100% {
    border-color: var(--err);
  }
  50% {
    border-color: transparent;
  }
}
.ac {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 170px;
  max-width: 320px;
  max-height: 190px;
  overflow-y: auto;
  padding: 4px;
  z-index: 40;
  pointer-events: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px -12px #000c;
}
.ac[hidden] {
  display: none;
}
.ac .aci {
  pointer-events: auto;
  font: inherit;
  font-size: 12px;
  color: var(--faint);
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background 0.12s,
    color 0.12s;
}
.ac .aci:hover {
  background: var(--accent);
  color: var(--bg);
}
.cv {
  font: inherit;
  line-height: 1.55;
  margin: 8px 0 14px;
  color: var(--fg);
  overflow-x: auto;
  white-space: pre;
}

/* ============================================================================
   ABOUT · özet görünümü (yeniden)
   ============================================================================
   Tasarım hedefi: pencereyi aşağı kaydırmadan "kim, kanıt, ne yapıyor, nasıl
   çalışır, iletişim" sırasını tek ekranda okutmak. Yapı bilinçli olarak düz:
     üst satır (etiket + görünüm anahtarı)
     kimlik (ad, rol, tek cümle, durum çipleri)
     üç gerçek sayı
     iki sütun: solda seçili işler, sağda ilkeler + stack
     alt satır: eylemler
   Hiçbir katman, gölge kopya (ghost) veya opaklık animasyonu yok; bu yüzden
   görünüm değişirken pencere "kapanmış" gibi görünemez.
   ========================================================================== */
.win--about .win__body:has(.abz) { background: var(--bg, #0d0c10); }

.abz {
  --abz-rule: color-mix(in srgb, var(--fg, #fff) 11%, transparent);
  --abz-tint: color-mix(in srgb, var(--fg, #fff) 4%, transparent);
  min-height: 100%;
  padding: 16px 20px 16px;
  background:
    radial-gradient(120% 55% at 100% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(90% 50% at 0% 106%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%);
}
.abz-wrap {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}

/* ---- üst satır ---------------------------------------------------------- */
.abz-top { display: flex; align-items: center; gap: 10px; }
.abz-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .54em; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 900; color: var(--accent);
}
.abz-kicker i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.abz-top .ab-seg { margin-left: auto; }

/* ---- görünüm anahtarı (Tam | Özet) --------------------------------------
   Tek düğme yerine iki seçenekli segment: hangi görünümde olduğun bir bakışta
   belli, geri dönüş yolu da aynı yerde duruyor. */
.ab-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  flex: none;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg, #fff) 16%, transparent);
  background: color-mix(in srgb, var(--fg, #fff) 6%, transparent);
  -webkit-app-region: no-drag;
}
.ab-seg::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 2px 10px -3px var(--accent);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}
.ab-seg[data-active="sum"]::before { transform: translateX(100%); }
.ab-seg-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 64px;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .6em;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--muted, #9a9aa8);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: color .2s ease;
}
.ab-seg-btn:hover { color: var(--fg, #fff); }
.ab-seg-btn.on { color: var(--bg, #0b0b0f); }
.ab-seg-btn.on:hover { color: var(--bg, #0b0b0f); }
.ab-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .ab-seg-btn { min-width: 54px; padding: 5px 10px; }
}

/* ---- kimlik ------------------------------------------------------------- */
.abz-id h1 {
  margin: 0;
  font-size: 2.15em;
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 800;
}
.abz-role {
  margin: 6px 0 0;
  font-size: .68em;
  font-weight: 700;
  color: color-mix(in srgb, var(--fg, #fff) 74%, transparent);
}
.abz-lead {
  margin: 8px 0 0;
  max-width: 64ch;
  font-size: .72em;
  line-height: 1.6;
  color: var(--muted, #9a9aa8);
}
.abz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.abz-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--abz-rule);
  font-size: .56em;
  font-weight: 700;
  color: var(--muted, #9a9aa8);
  white-space: nowrap;
}
.abz-chip--live {
  color: var(--ok, #7ddb8a);
  border-color: color-mix(in srgb, var(--ok, #7ddb8a) 45%, transparent);
}
.abz-chip--live i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 7px currentColor;
}

/* ---- üç gerçek sayı ----------------------------------------------------- */
.abz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.abz-stats > div {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--abz-rule);
  background: var(--abz-tint);
}
.abz-stats b { font-size: 1.5em; line-height: 1; letter-spacing: -.03em; }
.abz-stats span { font-size: .56em; line-height: 1.3; color: var(--muted, #9a9aa8); }

/* ---- iki sütun ---------------------------------------------------------- */
.abz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 18px;
  align-items: start;
}
.abz-work, .abz-pr, .abz-stack { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.abz-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.abz h2 {
  margin: 0;
  font-size: .54em;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 900;
  color: color-mix(in srgb, var(--fg, #fff) 52%, transparent);
}

/* iş kartları */
.abz-card {
  position: relative;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--abz-rule);
  background: var(--abz-tint);
  overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease;
}
.abz-card:hover { border-color: color-mix(in srgb, var(--tint, var(--accent)) 50%, transparent); }
.abz-card::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tint, var(--accent));
}
.abz-card-top { display: flex; align-items: baseline; gap: 8px; }
.abz-card-top b { font-size: .88em; letter-spacing: -.01em; }
.abz-card-top em {
  margin-left: auto;
  font-style: normal;
  font-size: .55em;
  font-weight: 800;
  white-space: nowrap;
  color: var(--tint, var(--accent));
}
.abz-card p { margin: 5px 0 9px; font-size: .66em; line-height: 1.55; color: var(--muted, #9a9aa8); }

.abz-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.abz-tags i {
  font-style: normal;
  font-size: .53em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--abz-rule);
  background: color-mix(in srgb, var(--fg, #fff) 6%, transparent);
  color: color-mix(in srgb, var(--fg, #fff) 80%, transparent);
  white-space: nowrap;
}

/* ilkeler */
.abz-pr { gap: 0; }
.abz-pr h2 { margin-bottom: 9px; }
.abz-pr-row {
  display: flex;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--abz-rule);
}
.abz-pr-row:last-child { border-bottom: 0; padding-bottom: 0; }
.abz-pr-row > span {
  flex: none;
  padding-top: 2px;
  font-size: .53em;
  font-weight: 900;
  color: var(--accent);
}
.abz-pr-row b { font-size: .72em; }
.abz-pr-row p { margin: 2px 0 0; font-size: .62em; line-height: 1.5; color: var(--muted, #9a9aa8); }

/* ---- alt satır ---------------------------------------------------------- */
.abz-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--abz-rule);
}
.abz-foot .ab3-btn { font-size: .63em; padding: 8px 13px; }

/* ---- dar pencere -------------------------------------------------------- */
@media (max-width: 720px) {
  .abz { padding: 16px 14px 22px; }
  .abz-wrap { gap: 14px; }
  .abz-grid { grid-template-columns: 1fr; gap: 16px; }
  .abz-id h1 { font-size: 1.85em; }
  .abz-lead { font-size: .68em; }
  .abz-stats { gap: 6px; }
  .abz-stats > div { padding: 10px 11px; border-radius: 12px; }
  .abz-stats b { font-size: 1.2em; }
  .abz-stats span { font-size: .5em; }
  .abz-foot .ab3-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.man p + p {
  margin-top: 0.7em;
}

html,
body {
  overflow-x: hidden;
}
body {
  font-variant-ligatures: none;
  font-feature-settings:
    "liga" 0,
    "calt" 0;
}
.prose {
  font-feature-settings: normal;
}
.pager {
  grid-template-columns: minmax(0, 1fr);
}
.pager__grid > *,
.pager__cmd {
  min-width: 0;
}
.menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px 24px;
  max-width: 960px;
  margin: 2px 0 4px;
  white-space: normal;
}
.menu > div {
  display: flex;
  gap: 1.2ch;
  align-items: baseline;
}
.menu .cl {
  min-width: 11ch;
  text-align: left;
}
.menu .d {
  color: var(--muted);
}
.inv {
  background: var(--accent);
  color: var(--bg);
  border-radius: 2px;
}
.wx {
  color: var(--warn);
  margin: 0;
  line-height: 1.15;
  font-size: 13px;
}
.qr {
  line-height: 1;
  font-size: 11px;
  letter-spacing: 0;
  margin: 4px 0;
  color: var(--fg);
  display: inline-block;
  background: #fff;
  color: #000;
  padding: 8px;
  border-radius: 4px;
}
.snake {
  margin: 0;
  line-height: 1.15;
  font-size: 13px;
}

/* ---------- desktop ---------- */
#desktop {
  position: fixed;
  /* Sit flush under the menu bar. `top` must never animate: while the bar height
     changes the old value left a strip of this element's own background visible
     right under the menu bar (the "siyah kutu"). */
  top: var(--mb-h, 28px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  background: #180f2b;
}
#wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 72% 20%,
      rgba(255, 214, 150, 0.85) 0%,
      rgba(255, 214, 150, 0) 46%
    ),
    radial-gradient(
      circle at 72% 20%,
      #ffe0a8 0%,
      #ffb96b 16%,
      rgba(255, 185, 107, 0) 42%
    ),
    linear-gradient(180deg, #2b1650 0%, #4a3a8a 36%, #b06ab3 64%, #ff9a76 100%);
}
#icons {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}
.desk-ic {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 78px;
  padding: 8px 4px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 1px 3px #0008;
  font-size: 11px;
  transition: background 0.12s;
  user-select: none;
}
.desk-ic:hover {
  background: rgba(255, 255, 255, 0.16);
}
.desk-ic.dragging {
  opacity: 0.65;
}
html {
  --gi: 58px;
}
html[data-isize="sm"] {
  --gi: 38px;
}
html[data-isize="md"] {
  --gi: 46px;
}
#icons[data-size="sm"] {
  --gi: 38px;
}
#icons[data-size="lg"] {
  --gi: 58px;
}
.desk-ic .gi {
  width: var(--gi);
  height: var(--gi);
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: calc(var(--gi) * 0.5);
  color: #fff;
  box-shadow: 0 4px 12px -2px #0006;
}
.desk-ic .gl {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desk-ic .gi-folder {
  background: linear-gradient(135deg, #6a86d6, #4a5fa0);
}
.desk-ic .gi-folder-grid {
  width: var(--gi);
  height: var(--gi);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(110, 135, 220, 0.22);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 12px -2px #0006;
}
.gi-mini {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  overflow: hidden;
}
.gi-mini svg {
  width: 60%;
  height: 60%;
}
#dock {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(18, 11, 32, 0.62);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -8px #000a;
  z-index: 150;
  max-width: calc(100vw - 20px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#dock::-webkit-scrollbar { display: none; }
.dock-it {
  flex: 0 0 auto;
  width: var(--gi, 46px);
  height: var(--gi, 46px);
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  position: relative;
  border: none;
  transition: transform 0.13s;
}
.dock-it:hover {
  transform: translateY(-3px);
}
.dock-it.on::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}
#windows {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
#snap-preview {
  position: fixed;
  z-index: 4;
  background: var(--accent);
  opacity: 0.15;
  border: 2px solid var(--accent);
  border-radius: 10px;
  pointer-events: none;
}
#snap-preview[hidden] {
  display: none;
}
.win {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  min-height: 160px;
  background: var(--win-bg, var(--bg));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 60px -18px #000c;
  overflow: hidden;
  pointer-events: auto;
}
.win.max {
  border-radius: 0;
}
/* Mobile: every window is a fixed full-screen sheet, never an off-screen rect. */
.win.mobile {
  position: fixed;
  left: 0 !important;
  top: var(--mb-h, 28px) !important; /* below the menu bar so the dots stay visible */
  width: 100% !important;
  /* Stops above the dock (see the mobile geometry block at the end of this file) */
  height: calc(100dvh - var(--mb-h, 28px) - var(--dock-h, 64px)) !important;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  /* NO transparent gap around the sheet. `border: none` left the window
     background trimmed by the base border-box, so the wallpaper showed as a
     light strip along the top/sides of EVERY app on a phone. Paint edge to
     edge instead. */
  border: none;
  box-shadow: none;
  background: var(--win-bg, var(--bg));
  overflow: hidden;
}
.win.mobile .win__rz {
  display: none;
}
/* Mobile: the control bar is in-flow at the top, so the body needs no extra pad. */
.win.mobile .win__body {
  padding-top: 10px;
}
.win__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Matches --winbar-h exactly; the body reserves the same amount of room. */
  height: var(--winbar-h, 30px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  background: transparent;
  border-bottom: none;
  pointer-events: none; /* let app content underneath stay clickable */
  user-select: none;
  z-index: 60;
}
/* only the dots capture pointer events */
.win__bar .wdots { pointer-events: auto; cursor: grab; }
/* The bar only holds the traffic lights; it overlays the app (no separate strip). */
.win__name { display: none; }
/* Desktop keeps each app's own header, so this bar stays dots-only there. It is
   only shown on phones, where the bar acts as an iOS navigation bar. */
.win__title {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.win__body {
  flex: 1;
  overflow: auto;
  padding: 12px 12px 12px;
  padding-top: var(--winbar-h, 30px);
  font-size: var(--base-font, 14px);
  min-height: 0;
}
.win__rz {
  position: absolute;
  z-index: 3;
  touch-action: none;
}
.win__rz-n {
  top: 0;
  left: 52px;
  right: 14px;
  height: 6px;
  cursor: ns-resize;
}
.win__rz-s {
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 6px;
  cursor: ns-resize;
}
.win__rz-e {
  right: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;
  cursor: ew-resize;
}
.win__rz-w {
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;
  cursor: ew-resize;
}
.win__rz-ne {
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: nesw-resize;
}
.win__rz-nw {
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}
.win__rz-se {
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}
.win__rz-sw {
  bottom: 0;
  left: 0;
  width: 14px;
  height: 14px;
  cursor: nesw-resize;
}
.wdots {
  display: flex;
  gap: 7px;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.win:hover .wdots,
.wdots:hover {
  opacity: 1;
}
.wdot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  color: transparent;
  transition: filter 0.12s;
}
.wdot:hover {
  filter: brightness(0.9);
}
.wdot.wc {
  background: #ff5f57;
  border: 1px solid #e0443e;
}
.wdot.wm {
  background: #febc2e;
  border: 1px solid #dea123;
}
.wdot.wx {
  background: #28c840;
  border: 1px solid #1aab29;
}
.wdot.wc::before {
  content: "✕";
}
.wdot.wm::before {
  content: "−";
}
.wdot.wx::before {
  content: "＋";
}
.wdots:hover .wdot {
  color: rgba(0, 0, 0, 0.55);
}
.file-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: 0.9em;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  margin: 1px 0;
}
.file-row:hover {
  background: var(--chip);
  color: var(--accent);
}
.app[hidden],
.win[hidden] {
  display: none !important;
}
.screen {
  min-height: 0;
}
.btnl--primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 700;
  padding: 0 14px;
}
.btnl--primary:hover {
  background: var(--bg);
  color: var(--accent);
}
.btnl--danger {
  background: transparent;
  color: var(--err);
  border-color: var(--err);
}
.btnl--danger:hover {
  background: var(--err);
  color: var(--bg);
}
.about-card {
  padding: 4px 2px;
}
.about-name {
  font-size: 1.6em;
  font-weight: 800;
  color: var(--fg);
}
.about-role {
  color: var(--accent);
  font-size: 1em;
  margin: 2px 0 10px;
}
.about-line {
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 56ch;
}
.about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sec-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  font-size: 0.9em;
}
.sec-ok {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ok);
  font-weight: 700;
  font-size: 0.9em;
}
.app.win {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.dock-it,
.desk-ic .gi {
  font-variant-emoji: text;
  line-height: 1;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.9em;
}
.contact-row .k {
  min-width: 7ch;
}
.contact-row a {
  color: var(--fg);
}
.contact-row a:hover {
  color: var(--accent);
}
.blog-row {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-size: 0.9em;
  text-decoration: none;
}
.blog-row:hover {
  color: var(--accent);
}
.blog-row .t {
  color: var(--accent);
}
.blog-row .m {
  color: var(--muted);
  font-size: 0.8em;
}

/* ---------- menubar ---------- */
#menubar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background: rgba(18, 11, 32, 0.72);
  backdrop-filter: blur(16px);
  color: #fff;
  font-size: 12px;
  z-index: 200;
  user-select: none;
}
.mb-logo {
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 5px;
}
.mb-logo:hover {
  background: rgba(255, 255, 255, 0.14);
}
.mb-app {
  font-weight: 600;
}
.mb-spacer {
  flex: 1;
}
.mb-clock {
  font-variant-numeric: tabular-nums;
}
#mb-drop {
  position: fixed;
  top: 30px;
  left: 10px;
  z-index: 210;
  background: rgba(30, 20, 50, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 40px -12px #000c;
  padding: 5px;
  min-width: 190px;
  backdrop-filter: blur(16px);
}
#clock-drop {
  position: fixed;
  top: 30px;
  right: 10px;
  z-index: 210;
  background: rgba(20, 16, 34, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 16px 40px -12px #000c;
  padding: 12px;
  min-width: 230px;
  backdrop-filter: blur(16px);
}
.mb-clock {
  cursor: pointer;
  padding: 0 6px;
  border-radius: 5px;
}
.mb-clock:hover {
  background: rgba(255, 255, 255, 0.14);
}
.clock-date {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.clock-wx {
  font-size: 12px;
  color: #b9a8dd;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cal-head {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-wd {
  font-size: 10px;
  color: var(--faint);
  text-align: center;
  padding: 2px 0;
}
.cal-cell {
  font-size: 11px;
  color: #ccc;
  text-align: center;
  padding: 3px 0;
  border-radius: 5px;
}
.cal-today {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.mb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.mb-item:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ---------- login ---------- */
#login {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The user's wallpaper sits behind the card, under a neutral scrim, so the
     lock screen belongs to the desktop. No purple anywhere. */
  background:
    radial-gradient(circle at 50% 32%, rgba(20, 18, 16, 0.72) 0%, rgba(8, 8, 7, 0.94) 72%),
    var(--login-wall, none) center / cover no-repeat,
    #0a0a09;
  transition:
    opacity 0.45s,
    visibility 0.45s;
}
/* Blur lives on a pseudo layer so the card itself stays crisp. */
#login::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: var(--login-wall, none) center / cover no-repeat;
  filter: blur(26px) saturate(1.15) brightness(0.55);
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
#login.login-wall-on::before { opacity: 1; }
#login.bye {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 44px;
  border-radius: 16px;
  background: rgba(20, 12, 34, 0.6);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px -20px #000c;
  min-width: 280px;
  will-change: transform, opacity;
  animation: card-rise 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.login-logo {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}
.login-sub {
  font-size: 12px;
  color: #b9a8dd;
}
.login-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, #ff9a76, #b06ab3);
  margin: 8px 0 2px;
}
.login-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.login-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  outline: none;
  width: 200px;
}
.login-input:focus {
  border-color: var(--accent);
}
.login-btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 22px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
}
.login-btn:hover {
  filter: brightness(1.1);
}
.login-hint {
  font-size: 11px;
  color: #7d6ba6;
}

/* ---------- launcher ---------- */
#launcher {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 250;
}
#launcher.start {
  top: auto;
  bottom: 96px;
  transform: translateX(-50%);
}
#launcher[hidden] {
  display: none;
}
.launch-panel {
  background: var(
    --win-bar-bg,
    color-mix(in srgb, var(--bg-2) 82%, transparent)
  );
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px -16px #000c;
  padding: 14px 16px 16px;
  animation: tin 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(20px);
}
.launch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 0 4px 14px;
}
.launch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.launch-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  padding: 14px 6px;
  border-radius: 14px;
  cursor: pointer;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 12px;
  transition:
    background 0.15s,
    transform 0.15s;
}
.launch-app:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
.launch-app .gi {
  width: calc(var(--gi, 46px) * 1.17);
  height: calc(var(--gi, 46px) * 1.17);
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: calc(var(--gi, 46px) * 0.56);
  color: #fff;
  box-shadow: 0 8px 20px -6px #000a;
}

/* ---------- wallpaper variants ---------- */
#wallpaper[data-w="night"] {
  background:
    radial-gradient(
      circle at 78% 22%,
      #eef2ff 0%,
      #eef2ff 3.5%,
      rgba(238, 242, 255, 0) 13%
    ),
    radial-gradient(
      1.5px 1.5px at 12% 16%,
      #fff 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(1px 1px at 34% 8%, #fff 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(
      1.5px 1.5px at 52% 22%,
      #fff 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(1px 1px at 66% 30%, #fff 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(1px 1px at 90% 14%, #fff 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(
      1.5px 1.5px at 44% 40%,
      #fff 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(180deg, #04030d 0%, #0b1030 50%, #16224e 100%);
}
#wallpaper[data-w="forest"] {
  background:
    radial-gradient(
      circle at 70% 18%,
      #fff1c9 0%,
      #fff1c9 5%,
      rgba(255, 241, 201, 0) 30%
    ),
    linear-gradient(180deg, #081c12 0%, #0e3220 45%, #17603a 100%);
}
#wallpaper[data-w="ocean"] {
  background:
    radial-gradient(
      circle at 80% 16%,
      #ffd9a0 0%,
      #ffd9a0 6%,
      rgba(255, 217, 160, 0) 28%
    ),
    linear-gradient(180deg, #02152a 0%, #063f56 52%, #0f7a8a 100%);
}
#wallpaper[data-w="mono"] {
  background: linear-gradient(180deg, #0e0e10 0%, #2a2a2e 100%);
}
#wallpaper[data-w="aurora"] {
  background:
    radial-gradient(
      ellipse at 30% -20%,
      rgba(60, 255, 160, 0.35) 0%,
      rgba(60, 255, 160, 0) 55%
    ),
    radial-gradient(
      ellipse at 75% -10%,
      rgba(120, 80, 255, 0.35) 0%,
      rgba(120, 80, 255, 0) 55%
    ),
    linear-gradient(180deg, #04121f 0%, #0b2b45 45%, #124b3c 80%, #2a6f5e 100%);
}

/* ---------- terminal quick actions ---------- */
#chips {
  display: flex;
  gap: 6px;
  padding: 7px clamp(10px, 2vw, 20px);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
#chips::-webkit-scrollbar {
  display: none;
}
#chips .hint {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  align-self: center;
}
.chip {
  flex: none;
  font-size: 12px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.app.win {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

/* ---------- app body helpers ---------- */
.mail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.mail-field label {
  font-size: 0.8em;
  color: var(--muted);
}
.mail-field input,
.mail-field textarea {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 0.9em;
  padding: 6px 9px;
  border-radius: 6px;
  outline: none;
}
.mail-field input:focus,
.mail-field textarea:focus {
  border-color: var(--accent);
}
.mail-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.set-row {
  /* One row: label left, controls right. This earlier rule stacked the row
     vertically and centred it, which pushed every settings label to the middle
     ("the theme writing slid left") on the Appearance page. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9em;
  text-align: left;
}
.set-row .lbl {
  color: var(--muted);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sw {
  width: 52px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid var(--line);
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.sw:hover {
  transform: translateY(-2px);
}
.sw.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.proto-pill {
  font-size: 0.8em;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}
.set-warn {
  font-size: 0.75em;
  color: var(--warn);
  margin-top: 6px;
  display: block;
}
.reader-body {
  font-size: 15px;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}
.reader-body h1,
.reader-body h2,
.reader-body h3,
.reader-body h4 {
  color: var(--fg);
  line-height: 1.25;
  margin: 28px 0 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.reader-body h2 {
  font-size: 22px;
}
.reader-body h3 {
  font-size: 19px;
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}
.reader-body h4 {
  font-size: 16px;
}
.reader-body p {
  margin: 0 0 16px;
}
.reader-body img,
.reader-body figure img {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  border-radius: 12px;
  margin: 16px auto;
  display: block;
  cursor: zoom-in;
}
.reader-body figure {
  margin: 0;
}
.reader-body figcaption {
  font-size: 12px;
  color: var(--faint);
  text-align: center;
  margin: 6px 0 16px;
}
.reader-body pre {
  background: var(--chip);
  padding: 16px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--line);
  white-space: pre;
  tab-size: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.reader-body code {
  background: var(--chip);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.reader-body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.tok-k {
  color: #ff7b72;
}
.tok-s {
  color: #a5d6ff;
}
.tok-c {
  color: #8b949e;
  font-style: italic;
}
.tok-n {
  color: #79c0ff;
}
.tok-b {
  color: #d2a8ff;
}
.tok-t {
  color: #7ee787;
}
.reader-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 16px;
  color: var(--muted);
  margin: 16px 0;
  font-style: italic;
}
.reader-body ul,
.reader-body ol {
  padding-left: 24px;
  margin: 0 0 16px;
}
.reader-back {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
}
.reader-cover {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  background-color: var(--bg-2);
}
.lightbox {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: po-boot 0.18s ease both;
  overflow: hidden;
}
.lightbox img {
  max-width: 96%;
  max-height: 96%;
  border-radius: 10px;
  box-shadow: 0 20px 60px -20px #000;
  object-fit: contain;
  transition: transform 0.2s ease;
}
@media (max-width: 720px) {
  .reader-body {
    font-size: 14px;
  }
  .reader-body img,
  .reader-body figure img {
    max-width: 100vw;
    max-height: none;
    border-radius: 0;
    margin: 14px -12px;
    width: calc(100% + 24px);
  }
}
.lightbox.zoom {
  overflow: auto;
}
.lightbox.zoom img {
  max-width: none;
  max-height: none;
  transform: none;
}

/* ---------- app polish ---------- */
.mail-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.about-links {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.snake-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#snake-cv {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: #0c0f14;
}
.snake-ui {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
}
.snake-pad {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  width: min(210px, 78%);
  margin: 2px auto 0;
}
.snake-pad button {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--chip);
  color: var(--fg);
  font-size: 15px;
  cursor: pointer;
  touch-action: none;
}
.snake-pad button:active {
  background: var(--accent);
  color: var(--bg);
}
.snake-pad [data-dir="0,-1"] {
  grid-column: 2;
  grid-row: 1;
}
.snake-pad [data-dir="-1,0"] {
  grid-column: 1;
  grid-row: 2;
}
.snake-pad [data-dir="0,1"] {
  grid-column: 2;
  grid-row: 2;
}
.snake-pad [data-dir="1,0"] {
  grid-column: 3;
  grid-row: 2;
}
.snake-ctl {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.snake-ctl .btnl {
  font-size: 0.78em;
  padding: 5px 12px;
}
/* Snake+ button */
.snake-plus-btn.on {
  background: linear-gradient(180deg, #22d3ee, #0891b2);
  color: #02202b;
  border-color: #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.6);
}
/* glitch transition when entering Snake+ */
.snake-glitch {
  animation: snake-glitch 0.7s steps(2, end) both;
}
@keyframes snake-glitch {
  0% { filter: none; transform: translate(0); }
  15% { filter: hue-rotate(90deg) saturate(2); transform: translate(-3px, 2px) skewX(3deg); }
  30% { filter: invert(0.2) hue-rotate(180deg); transform: translate(4px, -3px) skewX(-4deg); }
  45% { filter: hue-rotate(300deg) contrast(1.5); transform: translate(-4px, 0) skewX(5deg); }
  60% { filter: invert(0.1) hue-rotate(120deg); transform: translate(3px, 3px) skewX(-3deg); }
  80% { filter: none; transform: translate(-1px, 1px); }
  100% { filter: none; transform: translate(0); }
}
.snake-ctl .btnl.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--chip);
}
.snake-lives {
  font-size: 0.95em;
  letter-spacing: 1px;
  color: var(--err);
}
.proto-pill.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--chip);
}
.cv-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.cv-name {
  font-size: 16px;
  font-weight: 800;
}
.cv-role {
  color: var(--muted);
  font-size: 12px;
}
.cv-frame {
  width: 100%;
  height: 460px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.cv-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ---------- window / desktop polish ---------- */
.win {
  backdrop-filter: blur(2px);
}
.dock-it {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dock-it[data-app="__all"] {
  font-size: 27px;
  font-weight: 700;
}
/* App-drawer tile: a frosted glass square with a live nine-dot grid, matching
   the weight of the app icons instead of a lone box-drawing character. */
.dock-it--all {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  color: var(--fg, #fff) !important;
}
.dock-it--all svg {
  width: 62%;
  height: 62%;
  opacity: 0.92;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s;
}
.dock-it--all:hover svg {
  transform: scale(1.03);
  opacity: 1;
}
.dock-it--all:active svg {
  transform: scale(0.94);
}
.dock-it:hover {
  transform: translateY(-3px) scale(1.02);
}
#wallpaper {
  transition: background 0.6s ease;
}
.desk-ic .gi {
  transition: transform 0.15s;
}
.desk-ic:hover .gi {
  transform: scale(1.08);
}
.mb-logo {
  transition: background 0.12s;
}

/* ---------- context menu ---------- */
#ctx {
  position: fixed;
  z-index: 400;
  min-width: 170px;
  background: rgba(30, 20, 50, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 40px -12px #000c;
  padding: 5px;
  backdrop-filter: blur(16px);
}
#ctx[hidden] {
  display: none;
}
.ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.ctx-item:hover {
  background: var(--accent);
  color: var(--bg);
}
.ctx-head {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  padding: 6px 10px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ctx-walls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 2px 10px 10px;
  width: 240px;
}
.ctx-wall {
  height: 40px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  background-size: cover;
  background-position: center;
}
.ctx-wall:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.ctx-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}
.folder-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
}
.folder-overlay[hidden] {
  display: none;
}
.folder-sheet {
  width: min(340px, 92vw);
  background: var(
    --win-bar-bg,
    color-mix(in srgb, var(--bg-2) 90%, transparent)
  );
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 30px 80px -24px #000d;
  backdrop-filter: blur(24px);
  animation: folderpop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
#ask-name {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ask-card {
  width: min(320px, 90vw);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 30px 70px -20px #000d;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: rise 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ask-card--wide {
  width: min(420px, 92vw);
}
.ask-head {
  font-weight: 800;
  font-size: 0.95em;
  color: var(--fg);
}
.ask-input {
  font: inherit;
  font-size: 0.95em;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--fg);
  outline: none;
}
.ask-input:focus {
  border-color: var(--accent);
}
.ask-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
@keyframes folderpop {
  from {
    opacity: 0;
    transform: scale(0.72) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.folder-title {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 14px;
  color: var(--fg);
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
}
.folder-title:hover {
  background: var(--chip);
}
.folder-rename {
  width: 100%;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 14px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--fg);
  border-radius: 8px;
  padding: 4px 6px;
  outline: none;
}
.folder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.folder-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 6px 2px;
  border-radius: 10px;
}
.folder-app:hover {
  background: var(--chip);
}
.folder-app .gi {
  width: calc(var(--gi, 46px) * 1.2);
  height: calc(var(--gi, 46px) * 1.2);
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: calc(var(--gi, 46px) * 0.56);
  color: #fff;
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  #menubar {
    font-size: 11px;
    gap: 8px;
    padding: 0 8px;
  }
  .mb-app {
    display: none;
  }
  #desktop {
    top: var(--mb-h, 28px);
  }
  #icons {
    display: none;
  }
  .desk-ic {
    width: 64px;
    gap: 3px;
    padding: 6px 2px;
  }
  .desk-ic .gi {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }
  .app.win {
    left: 0 !important;
    top: var(--mb-h) !important;
    width: 100vw !important;
    height: calc(100dvh - var(--mb-h) - var(--dock-h)) !important;
    border-radius: 0;
  }
  .win {
    left: 0 !important;
    top: var(--mb-h) !important;
    width: 100vw !important;
    height: calc(100dvh - var(--mb-h) - var(--dock-h)) !important;
    border-radius: 0;
  }
  .win__rz {
    display: none;
  }
  .tbar__dots span {
    width: 15px;
    height: 15px;
  }
  .wdots .wdot {
    width: 15px;
    height: 15px;
  }
  .wdots .wdot.wx {
    display: none;
  }
  .snake-pad {
    display: grid;
  }
  /* pastaay on a phone: chips get tighter and the board takes the spare room. */
  .px-chip {
    font-size: 0.6em;
    padding: 2px 7px;
  }
  .px-chip b {
    font-size: 1.3em;
  }
  .px-logo {
    font-size: 1em;
  }
  .px-grid3 {
    gap: 8px;
    min-height: 0;
  }
  .px-cell {
    min-height: 74px;
    border-radius: 12px;
  }
  .px-seg button {
    padding: 5px 11px;
  }
  .px-foot-hint {
    display: none;
  }
  .launch-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .launch-panel {
    max-width: 94vw;
  }
  .launch-app {
    width: auto;
    padding: 12px 10px;
  }
  #dock {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    gap: 10px;
    /* 46px icons + 8px padding top/bottom + the home-indicator inset. Kept in
       sync with --dock-h so windows always stop above this bar. */
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    border-radius: 0;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
    box-shadow: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #dock::before,
  #dock::after {
    content: "";
    margin: auto;
  }
  #dock::-webkit-scrollbar {
    display: none;
  }
  .dock-it {
    flex: none;
    width: 46px;
    height: 46px;
    font-size: 21px;
    border-radius: 13px;
  }
  .toast {
    left: 16px;
    right: 16px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    max-width: none;
    text-align: center;
    border-radius: 12px;
  }
  .px-strike {
    padding: 12px 26px;
  }
  .px-toggle {
    padding: 10px 16px;
  }
  .nt-btn {
    padding: 8px 14px;
  }
  .nt-body {
    padding: 14px;
  }
}

/* ---------- about avatar ---------- */
.about-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 6px;
  background: var(--bg-2);
  box-shadow: 0 4px 14px -4px #000c;
}

/* ---------- CV preview ---------- */
.cv-exp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9em;
}
.cv-exp-date {
  color: var(--muted);
  font-size: 0.8em;
  min-width: 96px;
}
.cv-sec {
  margin-top: 14px;
}
.about-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.about-hero .about-avatar {
  margin-bottom: 0;
}
.about-id {
  display: flex;
  flex-direction: column;
}
.edu-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.edu-card:last-child {
  border-bottom: none;
}
.edu-img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 4px 12px -4px #0008;
  overflow: hidden;
  background: #fff;
}
.edu-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.edu-mono {
  color: #222;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.edu-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88em;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.9em;
  text-decoration: none;
}
.contact-row .k {
  min-width: 7ch;
  color: var(--muted);
}
.contact-v {
  flex: 1;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-ic {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--chip);
  color: var(--accent);
  font-weight: 800;
  font-size: 12px;
}
.contact-row:hover .contact-v {
  color: var(--accent);
}
.cv-sec-t {
  display: block;
  font-size: 0.85em;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* ---------- blog (Medium-style) ---------- */
.blog-list {
  display: flex;
  flex-direction: column;
}
.post {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.12s;
}
.post:hover {
  background: var(--chip);
}
.post-img {
  flex: none;
  width: 140px;
  height: 92px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-2);
}
.post-img--ph {
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--muted);
}
.post-body {
  flex: 1;
  min-width: 0;
}
.post-title {
  font-size: 1.15em;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--fg);
  line-height: 1.3;
}
.post-excerpt {
  font-size: 0.9em;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-meta {
  font-size: 0.8em;
  color: var(--faint);
}

/* ---------- pastaay experience ---------- */
/* ---------- pastaay (chaos drill) ---------- */
.px {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  position: relative;
  /* Escalation: the board tint deepens as the level climbs (see data-level). */
  --px-heat: 0;
}
.px[data-level="0"] {
  --px-heat: 0;
}
.px-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.px-logo {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.01em;
  flex: none;
}
.px-chips {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: nowrap;
  overflow: hidden;
}
.px-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.px-chip b {
  font-size: 1.35em;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.px-chip--lvl b {
  color: var(--accent);
}
.px-chip--best b {
  color: var(--warn);
}
.px-help {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--chip);
  color: var(--muted);
  font-weight: 800;
  font-size: 0.8em;
  cursor: pointer;
  flex: none;
  line-height: 1;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.px-help:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* SLA row: label · bar · number, on one calm line */
.px-sla-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.px-sla-label {
  font-size: 0.66em;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--faint);
  flex: none;
}
.px-sla-val {
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  min-width: 3.2em;
  text-align: right;
  flex: none;
}
.px-barwrap {
  flex: 1;
  min-width: 0;
}
.px-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 220px;
  align-content: center;
}
.px-cell {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  transition:
    transform 0.08s,
    background 0.12s,
    border-color 0.12s;
  touch-action: none;
}
.px-cell:active {
  transform: scale(0.94);
}
.px-cell-name {
  font-weight: 800;
  font-size: 1.05em;
}
.px-cell-fault {
  font-size: 1.6em;
  color: #fff;
  height: 1.2em;
}
.px-cell-taps {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
}
.px-cell.faulty {
  background: rgba(255, 95, 87, 0.16);
  border-color: var(--err);
  animation: pxblink 0.32s ease infinite;
}
.px-cell.hit {
  background: rgba(125, 255, 216, 0.2);
  border-color: var(--ok);
}
.px-cell.hit::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  border: 2px solid var(--ok);
  animation: pxburst 0.3s ease forwards;
  pointer-events: none;
}
@keyframes pxburst {
  from {
    transform: scale(0.92);
    opacity: 1;
  }
  to {
    transform: scale(1.15);
    opacity: 0;
  }
}
.px-grid3.shake {
  animation: gridshake 0.3s ease;
}
@keyframes gridshake {
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-2px);
  }
}
@keyframes pxblink {
  50% {
    box-shadow: 0 0 0 6px rgba(255, 95, 87, 0.18);
  }
}
.px-combo {
  text-align: center;
  font-size: 1em;
  font-weight: 800;
  color: var(--warn);
  min-height: 1.4em;
  flex: none;
}
.px-combo.fever {
  color: #ffd700;
  animation: pxoutage 0.5s ease infinite alternate;
}
.px.fever {
  box-shadow: inset 0 0 90px rgba(255, 215, 0, 0.25);
}
.px-praise.px-milestone {
  color: #7dffd8;
  font-size: 1.5em;
}
.px-pop {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translate(-50%, -100%);
  font-weight: 800;
  font-size: 15px;
  color: #7dffd8;
  pointer-events: none;
  animation: pxpop 0.7s ease forwards;
  z-index: 3;
}
@keyframes pxpop {
  to {
    transform: translate(-50%, -280%);
    opacity: 0;
  }
}
.px-part {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: pxpart 0.6s cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
  z-index: 5;
}
@keyframes pxpart {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.3);
    opacity: 0;
  }
}
.px-praise {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  font-size: 1.7em;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 7;
  animation: pxpraise 0.85s ease forwards;
}
@keyframes pxpraise {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: 0; }
}
/* Milestone praise lives in its OWN lane (higher up) so it never overlaps combo praise. */
.px-praise.px-milestone {
  top: 16%;
  color: #7dffd8;
  font-size: 1.4em;
}
/* Combo counter lives in its own reserved row, not floating over the board. */
.px-combo {
  position: relative;
  text-align: center;
  font-size: 0.82em;
  font-weight: 800;
  color: var(--warn);
  min-height: 1.4em;
  flex: none;
}
.px-cell.gold {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.28);
}
.px-tut {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 20, 0.82);
  backdrop-filter: blur(2px);
}
.px-tut[hidden] {
  display: none;
}
.px-tut-card {
  max-width: 340px;
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 18px;
}
/* Telefonda ortada yüzen kart, arkasındaki bulanık tahtayla birlikte
   "kayıp kutu" gibi duruyordu. Alt sayfa (bottom sheet) olarak otur. */
@media (max-width: 720px) {
  .px-tut { align-items: flex-end; padding: 10px; }
  .px-tut-card {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px;
    text-align: left;
  }
  .px-tut-avatar { flex-direction: row; justify-content: flex-start; gap: 10px; }
  .px-tut-monkey .px-tut-pet { width: 44px; }
  .px-tut-bubble { min-height: 0; margin: 8px 0 12px; font-size: 0.92em; }
  .px-tut-actions { justify-content: stretch; }
  .px-tut-go { flex: 1 1 auto; }
  .px-tut-shapes { grid-template-columns: 1fr 1fr; }
}
.px-tut-card h3 {
  margin: 0 0 8px;
  font-size: 1.2em;
}
.px-tut-card p {
  margin: 0 0 16px;
  font-size: 0.92em;
  color: var(--muted);
  line-height: 1.5;
}
.px-tut-monkey {
  font-size: 3em;
  line-height: 1;
  transition: transform 0.2s;
}
/* Rehber artık gerçek pastaay kedisi. Boy, eski emojinin optik boyutuna yakın
   tutuldu ki balon aynı hizada kalsın. */
.px-tut-monkey .px-tut-pet {
  display: block;
  width: 58px; height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
  user-select: none; -webkit-user-drag: none;
}
.px-tut-monkey.bounce {
  animation: monkeybounce 0.5s ease;
}
@keyframes monkeybounce {
  30% {
    transform: translateY(-12px) rotate(-8deg);
  }
  60% {
    transform: translateY(0) rotate(5deg);
  }
}
.px-tut-bubble {
  font-size: 0.95em;
  color: var(--fg);
  line-height: 1.5;
  margin: 10px 0 14px;
  min-height: 3.4em;
}
.px-tut-demo {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}
.px-tut-demo[hidden] {
  display: none;
}
.px-tut-demo .px-cell {
  width: 150px;
  min-height: 84px;
}
.px-tut-shapes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}
.px-tut-shape {
  font-size: 0.88em;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--fg);
  text-align: center;
}
.px-tut-shape b {
  font-size: 1.25em;
  margin-right: 4px;
}
.px-tut-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.px-tut-go {
  padding: 9px 20px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  cursor: pointer;
}
.px-tut-skip {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.px.glow {
  animation: pxglow 0.5s ease;
}
@keyframes pxglow {
  50% {
    box-shadow: inset 0 0 60px rgba(125, 255, 216, 0.18);
  }
}
.px-over {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 20, 0.86);
  backdrop-filter: blur(2px);
}
.px-over[hidden] {
  display: none;
}
.px-over-card {
  text-align: center;
  animation: pxoverin 0.4s ease;
}
.px-over-title {
  font-size: 2.4em;
  font-weight: 900;
  color: #ff5f57;
  text-shadow: 0 0 24px rgba(255, 95, 87, 0.5);
  animation: pxoutage 0.6s ease infinite alternate;
}
.px-over-sub {
  margin: 10px 0 18px;
  color: var(--muted);
  font-size: 0.95em;
}
.px-over-sub b {
  color: var(--fg);
  font-size: 1.2em;
}
.px-over-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  cursor: pointer;
  font-size: 1em;
}
@keyframes pxoverin {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pxoutage {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 1;
  }
}
.px-barwrap {
  height: 7px;
  border-radius: 4px;
  background: var(--chip);
  overflow: hidden;
}
/* Segmented difficulty control (iOS-style) + live combo badge */
.px-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 26px;
}
.px-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 9px;
  flex: none;
}
.px-seg button {
  font: inherit;
  font-size: 0.72em;
  font-weight: 700;
  padding: 4px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.14s,
    color 0.14s;
}
.px-seg button:hover {
  color: var(--fg);
}
.px-seg button.on {
  background: var(--accent);
  color: var(--bg);
}
.px-bar {
  height: 100%;
  width: 100%;
  background: var(--ok);
  transition: width 0.3s ease;
}
.px-bubble {
  flex: 1;
  font-size: 0.86em;
  color: var(--fg);
  line-height: 1.45;
  padding: 8px 12px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 12px;
  border-top-left-radius: 4px;
}
.px-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.px-strike {
  font-size: 1em;
  font-weight: 800;
  padding: 10px 24px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  cursor: pointer;
  transition:
    transform 0.12s,
    filter 0.12s;
}
.px-strike:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.px-strike:active {
  transform: translateY(0) scale(0.98);
}
.px-toggle {
  font-size: 0.82em;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.px-toggle.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--chip);
}
.px-links {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.px-links a {
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.px-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Footer: a quiet hint line + the outbound links, kept out of the play area. */
.px-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
}
.px-foot-hint {
  font-size: 0.7em;
  color: var(--faint);
  line-height: 1.4;
  flex: 1 1 140px;
  min-width: 0;
}
.px-links {
  display: flex;
  gap: 6px;
  flex: none;
  margin-left: auto;
}
.px-links a {
  font-size: 0.7em;
  font-weight: 700;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.px-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* The combo badge now lives inline in the toolbar instead of floating. */
.px-toolbar .px-combo {
  margin-left: auto;
  min-height: 0;
  font-size: 0.8em;
}

/* ---------- notes ---------- */
.nt {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
  padding: 14px;
}
.nt2 {
  position: relative;
  display: flex;
  height: 100%;
  overflow: hidden;
}
.nt2-side {
  width: 230px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  transition: width 0.25s ease, opacity 0.25s ease;
}
.nt2.collapsed .nt2-side {
  width: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  border-right: none;
}
.nt2-searchrow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nt2-searchrow .nt2-search {
  flex: 1;
  min-width: 0;
}
.nt2-collapse {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.nt2-collapse:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.nt2-reopen {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 20px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 11px 11px 0;
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  color: var(--fg);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.6;
  transition: width 0.16s, opacity 0.16s;
}
.nt2-reopen:hover {
  width: 26px;
  opacity: 1;
  background: var(--bg-2);
}
.nt2.collapsed .nt2-reopen {
  display: grid;
}
@media (max-width: 720px) {
  .nt2-side {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(280px, 84vw);
    z-index: 20;
    box-shadow: 24px 0 50px -20px #000c;
  }
  .nt2.collapsed .nt2-side {
    width: min(280px, 84vw);
    transform: translateX(-104%);
    opacity: 1;
    /* Kapalı ray ekranın solunda duruyor; görünmez olduğu hâlde DOM'da
       kalınca sekme sırası ve "ekran dışına taşan öğe" denetimleri onu
       hata sanıyordu. Görünürlüğü de kapatıyoruz. */
    visibility: hidden;
    pointer-events: none;
  }
  .nt2:not(.collapsed) .nt2-side {
    visibility: visible;
    pointer-events: auto;
  }
  .nt2-main {
    padding: 12px;
  }
}
.nt2-sidehead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.nt2-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 0.85em;
  font-weight: 800;
  cursor: pointer;
}
.nt2-new:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.nt2-search {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  font-size: 0.85em;
  padding: 7px 10px;
  outline: none;
}
.nt2-search:focus {
  border-color: var(--accent);
}
.nt2-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nt2-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nt2-item:hover {
  background: var(--chip);
}
.nt2-item.on {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.nt2-item-t {
  font-weight: 700;
  font-size: 0.88em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
}
.nt2-item-s {
  font-size: 0.76em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nt2-item-d {
  font-size: 0.68em;
  color: var(--muted);
  opacity: 0.7;
}
.nt2-empty {
  padding: 14px;
  text-align: center;
}
.nt2-main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-width: 0;
}
.nt2-main.focus .nt-bar,
.nt2-main.focus .nt-foot {
  display: none;
}
.nt-btn--danger {
  color: #ff6b6b;
}
.nt-btn--danger:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}
.nt-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.nt-title {
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--fg);
  border: none;
  border-bottom: 1px solid var(--line);
  font-size: 1.3em;
  font-weight: 800;
  padding: 2px 2px 8px;
  outline: none;
}
.nt-title:focus {
  border-bottom-color: var(--accent);
}
.nt-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: none;
}
.nt-tools button {
  min-width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.nt-tools button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.nt2-main.focus .nt-tools {
  display: none;
}
.nt-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.nt-btn {
  font-size: 0.8em;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.nt-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.nt-body {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 16px;
  background: var(--chip);
  color: var(--fg);
  outline: none;
  resize: none;
  font-size: 1em;
  line-height: 1.7;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.nt-body:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.nt-body:focus {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.nt-body h1,
.nt-body h2,
.nt-body h3,
.nt-body h4,
.nt-body h5,
.nt-body h6 {
  margin: 0.6em 0 0.35em;
  line-height: 1.2;
}
.nt-body h1 {
  font-size: 1.7em;
}
.nt-body h2 {
  font-size: 1.35em;
}
.nt-body p,
.nt-body ul,
.nt-body ol,
.nt-body blockquote,
.nt-body pre,
.nt-body table {
  margin: 0 0 0.8em;
}
.nt-body ul,
.nt-body ol {
  padding-left: 1.4em;
}
.nt-body li {
  margin: 0.2em 0;
}
.nt-body blockquote {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 0 10px 10px 0;
}
.nt-body pre {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, monospace);
  line-height: 1.5;
}
.nt-body code {
  padding: 0.15em 0.35em;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-mono, monospace);
  font-size: 0.94em;
}
.nt-body pre code {
  padding: 0;
  background: none;
  border: 0;
}
.nt-body a {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.nt-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.75em;
  color: var(--muted);
  flex: none;
}
.nt.focus .nt-bar,
.nt.focus .nt-foot {
  display: none;
}
.nt-exit {
  display: none;
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--bg-2);
  cursor: pointer;
  font-size: 14px;
}
.nt.focus .nt-exit {
  display: grid;
}
.nt2-main.focus .nt-exit {
  display: grid;
}
.finder {
  display: flex;
  height: 100%;
  gap: 0;
  overflow: hidden;
}
.finder-side {
  width: 150px;
  flex: none;
  border-right: 1px solid var(--line);
  padding: 8px;
}
.finder-item {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finder-item.on,
.finder-item:hover {
  background: var(--chip);
  color: var(--accent);
}
.finder-main {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.snake-best {
  font-size: 0.85em;
  color: var(--muted);
}

/* ---------- blog tool ---------- */
.blog-tool {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
#blog-search {
  flex: 1;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
}
#blog-cat {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  max-width: 150px;
}

/* ---------- power overlay ---------- */
#power-off {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
#power-off.on {
  opacity: 1;
  pointer-events: auto;
}
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: radial-gradient(circle at 50% 40%, #1c1233 0%, #0a0614 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
  overflow: hidden;
  isolation: isolate; /* keep the blur/blobs in one stacking context */
}
#boot-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
.po-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: rgba(7, 10, 18, 0.34);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  color: #999;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
}
.po-spin {
  width: 28px;
  height: 28px;
  border: 2px solid #333;
  border-top-color: #fff;
  border-radius: 50%;
  animation: po-spin 1s linear infinite;
}
@keyframes po-spin {
  to {
    transform: rotate(360deg);
  }
}
.po-logo,
.boot-logo {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}
.boot-logo span {
  color: var(--accent);
}
.po-msg {
  color: #ccc;
  font-size: 14px;
}
.po-sub {
  color: #666;
  font-size: 12px;
}
.po-mobile-boot {
  display: none;
  margin-top: 4px;
  padding: 9px 16px;
  border: 1px solid rgba(184, 255, 200, 0.22);
  border-radius: 999px;
  background: rgba(184, 255, 200, 0.08);
  color: #b8ffc8;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.boot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #999;
  font-family: var(--font-mono, monospace);
  animation: po-boot 0.5s ease both;
}
.boot-orb {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--accent),
    rgba(255, 154, 118, 0.1) 40%,
    var(--accent)
  );
  filter: blur(26px);
  opacity: 0.55;
  animation: orbspin 2.6s linear infinite;
  pointer-events: none;
}
.boot-logo {
  position: relative;
  text-shadow: 0 0 26px rgba(255, 154, 118, 0.35);
  animation: logoGlow 1.4s ease-in-out infinite alternate;
}
.boot-bar {
  width: 170px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.boot-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 99px;
  box-shadow: 0 0 12px var(--accent);
  transition: width 0.1s linear;
}
.boot-pct {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.boot-pct.done {
  color: color-mix(in srgb, var(--accent) 55%, white);
}
.boot-txt {
  font-size: 12px;
  color: color-mix(in srgb, var(--accent) 35%, var(--fg));
}
@keyframes po-boot {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bootfill {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes orbspin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes logoGlow {
  from {
    text-shadow: 0 0 18px rgba(255, 154, 118, 0.25);
  }
  to {
    text-shadow: 0 0 34px rgba(255, 154, 118, 0.6);
  }
}
.upd-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) 0%, rgba(255, 255, 255, 0.08) 0);
  position: relative;
}
.upd-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #0b0b12;
}
.upd-pct {
  position: relative;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}
#bsod {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a62c4;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.bsod-face {
  font-size: 110px;
  line-height: 1;
}
.bsod-hint {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 6px 12px;
  border-radius: 8px;
}
#bsod.bsod-boot {
  background: #05070a;
}
.bsod-txt {
  font-size: 20px;
  max-width: 560px;
  line-height: 1.5;
}
.bsod-sub {
  font-size: 13px;
  opacity: 0.85;
}

/* ---------- auto-hide bars ---------- */
#menubar.auto,
#dock.auto {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
body.bars-auto #desktop {
  top: 0;
}
body.bars-auto #menubar.auto {
  transform: translateY(-100%);
}
body.bars-auto #menubar.auto.show {
  transform: translateY(0);
}
body.bars-auto #dock.auto {
  transform: translate(-50%, 140%);
}
body.bars-auto #dock.auto.show {
  transform: translate(-50%, 0);
}
.gi svg,
.dock-it svg {
  width: 56%;
  height: 56%;
}
.post:hover {
  background: var(--chip);
}
.reader-body > h1 {
  font-size: 24px;
  line-height: 1.25;
  margin: 4px 0 8px;
  letter-spacing: -0.01em;
}
.reader-more {
  margin-top: 18px;
}
#menubar.auto.show,
#dock.auto.show {
  opacity: 1;
  pointer-events: auto;
}

.mb-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.mb-avatar:hover {
  transform: scale(1.08);
}
#mb-avatar-drop {
  background: var(--win-bar-bg, var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 18px 44px -18px #000c;
  backdrop-filter: blur(20px);
  animation: rise 0.18s ease both;
}
.mb-av-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}
.mb-av-row .chat-av {
  width: 38px;
  height: 38px;
  font-size: 15px;
}
.mb-av-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mb-av-info b {
  font-size: 0.92em;
  color: var(--fg);
}
.mb-av-info .faint {
  font-size: 0.78em;
}
.mb-av-go {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--accent);
  font: inherit;
  font-size: 0.82em;
  font-weight: 700;
  cursor: pointer;
}
.mb-av-go:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.mb-av-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.mb-av-head .chat-av {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.mb-av-head-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mb-av-head-info b {
  font-size: 0.92em;
  color: var(--fg);
}
.mb-av-head-info .faint {
  font-size: 0.78em;
}
.mb-av-head:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* ---------- menubar wifi / bluetooth ---------- */
.mb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  color: #e9e4f5;
  cursor: pointer;
  padding: 0 5px;
}
.mb-icon:hover {
  background: rgba(255, 255, 255, 0.14);
}
.mb-icon svg {
  width: 15px;
  height: 15px;
}
#wifi-drop,
#bt-drop {
  position: fixed;
  top: 30px;
  right: 74px;
  z-index: 210;
  background: rgba(20, 16, 34, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 16px 40px -12px #000c;
  padding: 6px;
  min-width: 220px;
  backdrop-filter: blur(16px);
}
#bt-drop {
  right: 40px;
}
.sys-head {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  padding: 7px 10px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sys-head .ok {
  color: var(--ok);
  text-transform: none;
}
.sys-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #ddd;
  font: inherit;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.sys-item:hover {
  background: var(--accent);
  color: var(--bg);
}
.sys-item .sys-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sys-item .sig {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 1px;
  flex: none;
}
.sys-foot {
  font-size: 10px;
  padding: 8px 10px 5px;
  color: var(--faint);
}
.mb-icon {
  position: relative;
}
.mb-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ff453a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
#notif-drop {
  position: fixed;
  top: 30px;
  right: 42px;
  z-index: 210;
  background: rgba(20, 16, 34, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 16px 40px -12px #000c;
  padding: 6px;
  min-width: 260px;
  max-height: 360px;
  overflow-y: auto;
  backdrop-filter: blur(16px);
}
.notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 8px;
}
.notif-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.notif-item b {
  font-size: 12px;
  color: #fff;
}
.notif-item span {
  font-size: 11px;
  color: #cbc4dd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-item .faint {
  color: var(--faint);
  font-size: 10px;
}
.notif-clear {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--faint);
  font: inherit;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  cursor: pointer;
}
.notif-clear:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.sys-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- launcher (start menu) ---------- */
.start-panel {
  width: min(380px, 92vw);
  padding: 12px;
}
.start-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.start-search svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: none;
}
.start-search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.start-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
}
.start-app {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 7px 10px;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s;
}
.start-app:hover {
  background: var(--chip);
}
.start-app .gi {
  width: calc(var(--gi, 46px) * 0.7);
  height: calc(var(--gi, 46px) * 0.7);
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: calc(var(--gi, 46px) * 0.35);
  color: #fff;
  flex: none;
}
.start-app-name {
  font-weight: 600;
}
.start-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.start-hint {
  font-size: 10px;
  color: var(--faint);
  margin-top: 8px;
  text-align: center;
}
.start-pw {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.start-pw:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.start-pw svg {
  width: 17px;
  height: 17px;
}

/* ---------- boot styles ---------- */
#boot-splash.boot--crt,
#boot-splash.boot--bios,
#boot-splash.boot--matrix {
  background: #000;
}
#boot-splash.boot--aurora {
  background: #05030f;
}
#boot-splash.boot--crt::after,
#boot-splash.boot--bios::after,
#boot-splash.boot--matrix::after,
#boot-splash.boot--aurora::after {
  display: none;
}
.crt-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #020604;
  border-radius: 0;
  overflow: hidden;
  animation: crt-on 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crt-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.32) 0 2px,
    transparent 2px 4px
  );
  z-index: 2;
  pointer-events: none;
}
.crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.65) 100%
  );
  z-index: 3;
  pointer-events: none;
}
.crt-static {
  position: absolute;
  inset: -40px;
  z-index: 1;
  opacity: 0.14;
  background-image:
    repeating-linear-gradient(90deg, #4aff9a 0 2px, transparent 2px 4px),
    repeating-linear-gradient(0deg, #4aff9a 0 2px, transparent 2px 4px);
  mix-blend-mode: screen;
  animation: crt-flicker 0.18s steps(2) infinite;
}
.crt-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 4;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(160, 255, 180, 0.14),
    transparent
  );
  animation: crt-roll 2.2s linear infinite;
  pointer-events: none;
}
.crt-inner {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #7dffb0;
  font-family: var(--font-mono, monospace);
  text-shadow: 0 0 8px rgba(125, 255, 176, 0.6);
}
#bios-term {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  color: #e6ffe6;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bt-out {
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.5;
}
.bt-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bt-ps {
  color: #4dff6a;
  font-weight: 700;
}
#bt-in {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #e6ffe6;
  font: inherit;
  caret-color: #4dff6a;
}
.crt-inner .boot-logo {
  color: #7dffb0;
  text-shadow: 0 0 14px rgba(125, 255, 176, 0.7);
}
.crt-inner .boot-logo span {
  color: #7dffb0;
}
.crt-inner .boot-bar {
  background: rgba(125, 255, 176, 0.18);
}
.crt-inner .boot-fill {
  background: #7dffb0;
  box-shadow: 0 0 12px #7dffb0;
}
.crt-inner .boot-txt {
  color: #5fd48c;
}
.crt-inner .boot-pct {
  color: #7dffb0;
}
@keyframes crt-on {
  0% {
    transform: scale(1, 0.008);
    opacity: 0;
  }
  60% {
    transform: scale(1, 0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes crt-roll {
  0% {
    top: -60px;
  }
  100% {
    top: 100%;
  }
}
@keyframes crt-flicker {
  0% {
    opacity: 0.09;
  }
  50% {
    opacity: 0.18;
  }
  100% {
    opacity: 0.12;
  }
}
.bios-screen {
  position: relative;
  width: min(520px, 92vw);
  padding: 22px;
  background: #000;
  color: #b8ffc8;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(184, 255, 200, 0.12),
    0 30px 70px -20px #000;
}
.bios-screen .boot-logo {
  font-size: 22px;
  color: #b8ffc8;
  text-shadow: none;
  animation: none;
  margin-bottom: 6px;
}
.bios-screen .boot-logo span {
  color: #b8ffc8;
}
.bios-lines {
  min-height: 5.6em;
  white-space: nowrap;
}
#bios-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
}
.bios-card {
  width: min(560px, 94vw);
  background: #011;
  color: #b8ffc8;
  border: 1px solid rgba(184, 255, 200, 0.2);
  box-shadow:
    0 0 0 4px #010,
    0 30px 70px -20px #000;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
}
.bios-bar {
  background: #0a2;
  color: #001;
  font-weight: 800;
  padding: 8px 14px;
  letter-spacing: 0.04em;
}
.bios-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(184, 255, 200, 0.08);
}
.bios-row.sel {
  background: rgba(184, 255, 200, 0.14);
}
.bios-row.sel span:first-child {
  color: #eafff0;
}
.bios-row span:first-child {
  color: #7fbf93;
}
.bios-val {
  color: #fff;
}
#boot-manager {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #05070a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
}
#recovery {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #05070a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
}
.rec-card {
  width: min(420px, 92vw);
  color: #b8ffc8;
  border: 1px solid rgba(184, 255, 200, 0.2);
  background: #011;
  box-shadow: 0 30px 70px -20px #000;
}
.rec-bar {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(184, 255, 200, 0.15);
  font-weight: 800;
  color: #7dffd8;
}
.rec-sub {
  padding: 12px 16px 4px;
  font-size: 0.82em;
  color: #7fbf8f;
}
.rec-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}
.rec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: #b8ffc8;
  font: inherit;
  font-size: 0.85em;
  text-align: left;
  cursor: pointer;
}
.rec-item.on {
  border-color: #7dffd8;
  background: rgba(125, 255, 216, 0.08);
}
.rec-item.busy {
  opacity: 0.8;
}
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7dffd8;
  flex: none;
}
.rec-dot.spin {
  background: transparent;
  border: 2px solid #7dffd8;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
.rec-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rec-body b {
  font-weight: 700;
}
.rec-body .faint {
  color: #7fbf8f;
  font-size: 0.8em;
}
.rec-foot {
  padding: 10px 16px;
  border-top: 1px solid rgba(184, 255, 200, 0.15);
  font-size: 0.78em;
  color: #7fbf8f;
}
.boot-mgr {
  width: min(440px, 92vw);
  color: #b8ffc8;
  border: 1px solid rgba(184, 255, 200, 0.2);
  background: #011;
  box-shadow: 0 30px 70px -20px #000;
}
.bm-head {
  background: #0a2;
  color: #001;
  font-weight: 800;
  padding: 10px 16px;
  letter-spacing: 0.04em;
  font-size: 14px;
}
.bm-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.bm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: none;
  border: none;
  color: #b8ffc8;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}
.bm-item .faint {
  color: #7fbf93;
  font-size: 12px;
}
.bm-item.on {
  background: rgba(184, 255, 200, 0.16);
  color: #fff;
}
.bm-foot {
  padding: 10px 16px;
  color: #7fbf93;
  font-size: 11px;
  border-top: 1px solid rgba(184, 255, 200, 0.12);
}
.bios-foot {
  padding: 10px 14px;
  color: #7fbf93;
  font-size: 11px;
  background: rgba(184, 255, 200, 0.04);
}
.bios-touch {
  display: none;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid rgba(184, 255, 200, 0.12);
}
.bios-touch button {
  flex: 1;
  padding: 9px 0;
  border: 1px solid rgba(184, 255, 200, 0.22);
  border-radius: 7px;
  background: rgba(184, 255, 200, 0.05);
  color: #b8ffc8;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.bios-touch button:active {
  background: rgba(184, 255, 200, 0.16);
}
.bios-lines .ok {
  color: #7dffb0;
}
.po-mobile-boot:active,
.bios-touch button:active {
  background: rgba(184, 255, 200, 0.16);
}

@media (max-width: 720px) {
  .bios-foot {
    display: block;
  }
  .bios-touch {
    display: flex;
  }
  .po-mobile-boot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .boot-glass {
    background: rgba(10, 6, 20, 0.42);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 24px 60px -20px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
  }
}
.bios-cur {
  display: inline-block;
  color: #b8ffc8;
  animation: blink 0.8s steps(1) infinite;
}
.mx-rain {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mx-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono, monospace);
}
.mx-inner .boot-logo {
  color: #39ff6a;
  text-shadow: 0 0 18px rgba(57, 255, 106, 0.7);
}
.mx-inner .boot-logo span {
  color: #39ff6a;
}
.mx-inner .boot-fill {
  background: #39ff6a;
  box-shadow: 0 0 12px #39ff6a;
}
.mx-inner .boot-pct {
  color: #39ff6a;
}
.mx-inner .boot-txt {
  color: #1fae47;
}
.aurora-bg {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    #2b1650,
    #0f4c5c,
    #3a2b7a,
    #0b6e4f,
    #2b1650
  );
  filter: blur(40px);
  animation: aurora-spin 9s linear infinite;
}
.aurora-parts {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.aurora-p {
  position: absolute;
  bottom: -12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--hue), 90%, 70%);
  filter: blur(1px);
  opacity: 0.7;
  animation: aurora-rise var(--d) linear var(--delay) infinite;
}
.aurora-inner {
  position: relative;
  z-index: 2;
}
@keyframes aurora-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes aurora-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-110vh) scale(0.4);
    opacity: 0;
  }
}

/* ---------- settings restyle ---------- */
.set-sec {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.set-sec-h {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  cursor: pointer;
  list-style: none;
}
.set-sec-h::-webkit-details-marker {
  display: none;
}
.sec-caret {
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.set-sec:not([open]) .sec-caret {
  transform: rotate(-90deg);
}
.set-sec:not([open]) .set-sec-h {
  border-bottom: none;
}
.sec-ic {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--bg);
  font-size: 12px;
  flex: none;
}
.set-sec-b {
  padding: 4px 14px 10px;
}
.set-sec-b .set-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.set-sec-b .set-row:last-child {
  border-bottom: none;
}
.set-shell {
  display: flex;
  gap: 0;
  height: 100%;
  min-height: 320px;
}
.set-nav {
  width: 150px;
  flex: none;
  border-right: 1px solid var(--line);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-2);
}
.set-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: 0.85em;
  text-align: left;
  cursor: pointer;
}
.set-nav-item:hover {
  background: var(--chip);
}
.set-nav-item.on {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.set-nav-ic {
  width: 22px;
  text-align: center;
  font-size: 15px;
  flex: none;
}
.set-panel {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 12px;
}
.set-profile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0;
}
/* "Hesabı sil" kutusu ile başarımlar kartı dib dibe duruyordu: kırmızı
   çerçeve, altındaki 16px'lik kartın gölgesini yiyordu. */
.set-profile > .ach { margin-top: 6px; }
.set-profile > .set-danger-zone { margin-bottom: 2px; }

/* ---- Achievements (Settings -> Profile) ---------------------------------- */
.set-ach {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.set-ach-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.set-ach-k { font-size: 0.84em; font-weight: 700; color: var(--fg); }
.set-ach-head b { font-variant-numeric: tabular-nums; font-size: 0.8em; color: var(--accent); }
.set-ach-bar {
  height: 6px;
  border-radius: 99px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
}
.set-ach-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.set-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 7px;
}
.set-ach-it {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.set-ach-it:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.set-ach-it:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.set-ach-it .set-ach-badge { font-size: 0.9em; line-height: 1; }
.set-ach-it .set-ach-name {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.set-ach-it .set-ach-desc {
  font-size: 0.7em;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.set-ach-it.on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.set-ach-it.on .set-ach-badge { color: var(--accent); }
.set-ach-it:not(.on) .set-ach-name { color: var(--muted); letter-spacing: 0.06em; }
.set-ach-it.pop { animation: setAchPop 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes setAchPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@media (max-width: 520px) {
  .set-ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .set-ach-it, .set-ach-bar > span { transition: none; }
  .set-ach-it.pop { animation: none; }
}
/* settings registration terms + consent */
.set-terms {
  margin-top: 2px;
}
.set-terms .chat-terms-body {
  max-height: 130px;
}
.set-consent {
  padding: 2px 0 0;
}
.set-avs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.set-avs .chat-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  border: 2px solid transparent;
}
.set-avs .chat-av-pick.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.set-input {
  font: inherit;
  font-size: 0.9em;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--fg);
  outline: none;
}
.set-input:focus {
  border-color: var(--accent);
}
#win-settings .win__body {
  padding: 0;
}
#win-settings .set-panel {
  padding-top: 12px;
}
.set-sub {
  margin: 6px 0 4px;
  padding: 10px 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  animation: rise 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.set-sub .set-row {
  border-bottom: none !important;
  padding: 5px 0;
}

/* ---------- mail restyle ---------- */
.mail {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 14px;
  animation: rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mail-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, #ff9a76, #b06ab3);
  flex: none;
}
.mail-name {
  font-weight: 800;
  color: var(--fg);
  font-size: 1.05em;
}
.mail-addr {
  font-size: 0.8em;
  color: var(--muted);
}
.mail-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mail-field label {
  font-size: 0.72em;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mail-field input,
.mail-field textarea {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 0.92em;
  padding: 9px 12px;
  border-radius: 9px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.mail-field input:focus,
.mail-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.mail-field--grow {
  flex: 1;
  min-height: 0;
}
.mail-field--grow textarea {
  flex: 1;
  resize: none;
  line-height: 1.6;
  min-height: 140px;
}
.mail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mail-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ---------- pastaay meter ---------- */
.px-meter {
  height: 5px;
  border-radius: 3px;
  background: var(--chip);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}
.px-meter.on {
  opacity: 1;
}
#px-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--warn), #ffd700);
  border-radius: 3px;
  transition: width 0.2s ease;
}

/* ---------- chat (iMessage-like) ---------- */
.set-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 0.85em;
  padding: 7px 10px;
  border-radius: 8px;
  outline: none;
}
.set-input:focus {
  border-color: var(--accent);
}
.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
.chat-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/* ---- pre-login gate: clean, calm, tasteful (no aurora/AI glow) ---- */
.chat-gate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  text-align: center;
  padding: 28px 24px;
  background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
}
/* Window buttons float at the top-right of the login gate, NO bar/box behind them. */
.cg-dots {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
}
.cg-dots .wdots { opacity: 0.85; }
.chat-auth {
  position: relative;
}
.chat-auth .cg-dots { top: 14px; right: 16px; }
.cg-title {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--fg);
}
.cg-sub {
  max-width: 330px;
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.55;
}
.cg-cta {
  margin-top: 4px;
  padding: 11px 26px;
  font-weight: 800;
}
.chat-auth-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: min(320px, 100%);
  padding: 26px 24px;
  border-radius: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  will-change: transform, opacity;
  animation: card-rise 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chat-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.3em;
  font-weight: 800;
  color: var(--fg);
}
.chat-logo svg {
  width: 26px;
  height: 26px;
  color: #34c759;
}
.chat-auth-sub {
  font-size: 0.85em;
  color: var(--muted);
  line-height: 1.5;
}
.chat-field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 0.95em;
  padding: 10px 12px;
  border-radius: 10px;
  outline: none;
}
.chat-field input:focus {
  border-color: var(--accent);
}
.chat-auth-err {
  font-size: 0.8em;
  color: var(--err);
  min-height: 1em;
}
.chat-auth-actions {
  display: flex;
  gap: 8px;
}
/* `.btnl` carries an asymmetric margin (2px 4px 2px 0) for inline rows. In a
   stretched auth action row that made the button 4px narrower on one side, so
   the label sat visibly off-centre. Reset it and centre explicitly. */
.chat-auth-actions .btnl {
  flex: 1 1 auto;
  margin: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Same for the Settings sign-in / sign-up button. */
.auth-card .auth-submit { margin-inline: 0; justify-content: center; text-align: center; }
.chat-shell {
  --chat-pad: 14px;
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.chat-side {
  width: 240px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--win-bar-bg, var(--bg-2));
  --chat-side-pad: 12px;
}
.chat-side-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
}
/* Row 1: hide · avatar · name · settings, one calm line, never crowded. */
.chat-side-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chat-me-name {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 0.92em;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-side-settings { flex: none; }
/* Row 3: a clearly-labelled admin toolbar, separate from the tabs above. */
.chat-admin-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  animation: chat-in 0.3s ease both;
}
.chat-admin-tag {
  font-size: 0.56em;
  font-weight: 900;
  letter-spacing: 0.09em;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--bg);
  flex: none;
}
.chat-admin-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 0.7em;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.chat-admin-btn span { overflow: hidden; text-overflow: ellipsis; }
.chat-admin-btn:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.chat-me {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 0.92em;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-side-btns {
  display: flex;
  gap: 3px;
}
.chat-logout {
  color: #ff453a;
}
.chat-logout:hover {
  background: #ff453a22;
}
.chat-side-foot {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}
.chat-foot-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.82em;
  font-weight: 700;
  cursor: pointer;
}
.chat-foot-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
@keyframes card-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.chat-icbtn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg);
  font-size: 15px;
  cursor: pointer;
}
.chat-icbtn:hover {
  background: var(--chip);
  border-color: var(--accent);
  color: var(--accent);
}
.chat-av-chan {
  background: linear-gradient(135deg, #34c759, #0ea5e9);
  color: #fff;
}
.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px var(--chat-side-pad, 12px);
}
.chat-chan {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 10px;
  padding: 8px 6px;
  cursor: pointer;
  color: var(--fg);
  box-sizing: border-box;
}
.chat-chan:hover {
  background: var(--chip);
}
.chat-chan.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.chat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.chat-chan-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-chan-name {
  font-weight: 700;
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-chan-last {
  font-size: 0.78em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.68em;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 5px;
  margin-left: 4px;
  flex: none;
  line-height: 1.1;
}
.chat-side-foot {
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  box-sizing: border-box;
}
.chat-side-foot .chat-foot-btn {
  height: 40px;
  padding: 0 12px;
}
.chat-side-foot #chat-conn {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-foot-hint {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--fg);
}
.chat-conn-line {
  font-size: 0.78em;
  color: var(--muted);
  padding: 4px 2px;
  margin-bottom: 6px;
}
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--win-bg, var(--bg));
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95em;
  color: var(--fg);
}
.chat-addfriend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 8px;
  padding: 9px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 0.85em;
  font-weight: 700;
  cursor: pointer;
}
.chat-addfriend:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--chat-pad, 14px);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-empty {
  margin: auto;
  font-size: 0.85em;
}
.tasks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tasks-hud {
  display: flex;
  gap: 20px;
  font-size: 0.85em;
  color: var(--muted);
  padding-bottom: 8px;
}
.tk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.tasks-hud b {
  color: var(--fg);
  margin-left: 5px;
}
.tasks-hud > span {
  display: inline-flex;
  align-items: center;
}
.tasks canvas {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0b0f14;
}
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8em;
  color: var(--fg);
}
.task-name {
  width: 100px;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-bar {
  flex: 1;
  height: 6px;
  background: var(--chip);
  border-radius: 99px;
  overflow: hidden;
}
.task-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #34c759);
  border-radius: 99px;
  transition: width 0.6s ease;
}
.task-nums {
  width: 92px;
  flex: none;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.task-glyph {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
}
.task-glyph svg {
  width: 14px;
  height: 14px;
}
.task-kill {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition:
    background 0.12s,
    color 0.12s;
}
.task-kill:hover {
  background: #ff5f57;
  color: #fff;
  border-color: #ff5f57;
}
.task-sec {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  padding: 6px 2px 2px;
}
.task-row.sys .task-name {
  color: var(--muted);
}
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  max-width: 78%;
}
.chat-msg.chat-in {
  animation: chat-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chat-msg.me {
  margin-left: auto;
  flex-direction: row-reverse;
}
.chat-msg-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}
.chat-msg.me .chat-msg-stack {
  align-items: flex-end;
}
.chat-msg-name {
  font-size: 0.7em;
  color: var(--muted);
  margin: 0 0 2px 4px;
}
.chat-bubble {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 0.92em;
  line-height: 1.4;
  word-break: break-word;
  border-bottom-left-radius: 5px;
}
.chat-msg.me .chat-bubble {
  background: linear-gradient(
    180deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 78%, #000)
  );
  border: none;
  color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 5px;
}
.chat-time {
  font-size: 0.62em;
  color: var(--faint);
  flex: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 3px;
}
.chat-msg:hover .chat-time { opacity: 1; }
/* always show the read-receipt ✓✓ marker on your own DMs (so you know it landed),
   but keep the rest of the meta hidden until hover */
.chat-time.has-receipt { opacity: 1; }
.chat-msg:hover .chat-time .t-edit { opacity: 1; }
.chat-time .t-edit { opacity: 0; transition: opacity 0.18s ease; }
.chat-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px var(--chat-pad, 14px) 10px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  min-height: 66px;
  box-sizing: border-box;
}
.chat-compose input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 0.95em;
  padding: 9px 13px;
  border-radius: 999px;
  outline: none;
}
.chat-compose input:focus {
  border-color: var(--accent);
}
.chat-compose .btnl {
  border-radius: 999px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  margin: 0;
  font-size: 17px;
  flex: none;
  justify-content: center;
}
.chat-compose .chat-icbtn {
  width: auto;
  height: 40px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 999px;
}
.chat-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 20, 0.6);
  backdrop-filter: blur(2px);
}
.chat-overlay[hidden] {
  display: none;
}
.chat-lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}
.chat-lightbox img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 40px -10px #000;
}
.chat-lightbox .chat-ov-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.chat-ov-card {
  width: min(320px, 90%);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: rise 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* hero profile card */
.up-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  width: min(340px, 92%);
}
.up-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.up-hero {
  height: 92px;
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--up-a) 70%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--up-a) 60%, #000), var(--bg-2));
  display: grid;
  place-items: center;
}
.up-av {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  transform: translateY(30px);
  border: 4px solid var(--bg-2);
  background: var(--up-a);
  color: #fff;
  font-weight: 800;
  font-size: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 12px 26px -10px #000a;
}
.up-av img { width: 100%; height: 100%; object-fit: cover; }
.up-on {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #28c840;
  border: 3px solid var(--bg-2);
}
.up-body {
  padding: 40px 18px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.up-name { font-size: 1.2em; font-weight: 800; color: var(--fg); }
.up-user { font-size: 0.86em; color: var(--muted); }
.up-status { font-size: 0.8em; }
.up-status .ok { color: #4ade80; }
.up-note {
  margin-top: 6px;
  font-size: 0.85em;
  color: var(--fg);
  background: var(--chip);
  border-radius: 10px;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.up-hint {
  margin-top: 4px;
  font-size: 0.72em;
  color: var(--muted);
  line-height: 1.4;
  opacity: 0.85;
}
.up-acts { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.up-acts .btnl { flex: 1; }
.up-badge { padding: 7px 10px; }
/* clickable avatars + friend search */
.chat-av-hit { cursor: pointer; display: inline-flex; flex: none; }
.chat-av-hit:hover { filter: brightness(1.08); }
.chat-fr-search { padding: 8px var(--chat-side-pad, 12px) 4px; }
.chat-fr-search input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--fg);
  padding: 7px 10px;
  font: inherit;
  font-size: 0.85em;
  outline: none;
}
.chat-fr-search input:focus { border-color: var(--accent); }
.chat-fr-results { padding: 0 var(--chat-side-pad, 12px); }
.chat-ov-note {
  font-size: 0.8em;
  color: var(--muted);
  line-height: 1.4;
}
.chat-confirm-body {
  font-size: 0.85em;
  color: var(--fg);
  line-height: 1.5;
}
.chat-confirm-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.chat-confirm-btns .btnl {
  min-width: 92px;
}
.chat-ov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 0.95em;
  color: var(--fg);
}
.chat-ov-x {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.chat-ov-q {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 0.9em;
  padding: 8px 12px;
  border-radius: 9px;
  outline: none;
}
.chat-ov-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  overflow-y: auto;
}
.chat-user {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--fg);
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}
.chat-user:hover {
  background: var(--chip);
}
@media (max-width: 720px) {
  .chat-shell {
    position: relative;
  }
  .chat-side {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 86vw);
    z-index: 30;
    box-shadow: 24px 0 50px -20px #000c;
    transition: transform 0.25s ease;
  }
  .chat-shell.collapsed .chat-side {
    width: min(300px, 86vw);
    min-width: 0;
    opacity: 1;
    transform: translateX(-104%);
    border-right: none;
    overflow: hidden;
  }
  .chat-chan-name {
    font-size: 0.85em;
  }
  .chat-chan-last {
    display: none;
  }
  .chat-me {
    display: none;
  }
  .chat-msg {
    max-width: 92%;
  }
  .chat-reopen {
    left: 6px;
  }
  /* Dim the thread behind the open conversation list; one tap dismisses it. */
  .chat-rail-veil {
    display: none; position: absolute; inset: 0; z-index: 28; border: 0; padding: 0;
    background: rgba(5, 7, 12, .55);
  }
  .chat-shell:not(.collapsed) .chat-rail-veil { display: block; }
  /* Popups opened from the list (group, friends, admin panels) must sit above
     the rail, otherwise their sheets were drawn underneath it and unreadable. */
  .chat-overlay { z-index: 60; }
}

/* ---------- chat v2 (avatars, friends, actions, gif, nudge) ---------- */
.chat-av {
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  flex: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 6px -2px #0006;
}
.chat-av::after {
  content: "";
  position: absolute;
  top: -18%;
  left: -18%;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff66, transparent 72%);
}
.chat-avatars {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.chat-av-pick {
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.12s;
  border: 2px solid transparent;
}
.chat-av-pick.on {
  border-color: var(--accent);
  transform: scale(1.08);
}
.chat-tabs {
  display: flex;
  gap: 2px;
  padding: 6px var(--chat-side-pad, 12px);
  border-bottom: 1px solid var(--line);
}
.chat-tabs button {
  flex: 1;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 6px 4px;
  font: inherit;
  font-size: 0.78em;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.chat-tabs button.on {
  background: var(--chip);
  color: var(--accent);
}
.chat-head-acts {
  display: flex;
  gap: 3px;
  margin-right: 8px;
}
.chat-head-acts .chat-icbtn.on {
  color: var(--accent);
}
.chat-msg .chat-actions {
  display: none;
  align-items: center;
  gap: 2px;
}
.chat-msg:hover .chat-actions {
  display: flex;
}
.chat-actions button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
}
.chat-actions button:hover {
  color: var(--accent);
}
.chat-gif {
  max-width: 220px;
  max-height: 160px;
  border-radius: 12px;
  display: block;
}
.chat-img {
  max-width: 260px;
  max-height: 280px;
  border-radius: 12px;
  display: block;
  cursor: pointer;
}
.chat-video {
  max-width: 260px;
  max-height: 260px;
  border-radius: 12px;
  display: block;
  background: #000;
}
.chat-cap {
  display: block;
  font-size: 0.85em;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-media-prev {
  max-width: 100%;
  max-height: 40vh;
  border-radius: 12px;
  display: block;
  margin: 0 auto 10px;
  background: #000;
}
.chat-edit {
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--fg);
  font: inherit;
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 8px;
  outline: none;
  min-width: 120px;
}
.chat-pin {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
}
.chat-bubble.pinned {
  outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.chat-mute-mark {
  color: var(--warn);
  font-size: 0.8em;
  flex: none;
}
.chat-req {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 10px;
}
.chat-req:hover {
  background: var(--chip);
}
.chat-req-btns {
  display: flex;
  gap: 5px;
  margin-left: auto;
}
.chat-req-btns .btnl {
  padding: 3px 10px;
  font-size: 0.85em;
}
.chat-add {
  margin-left: auto;
  color: var(--accent);
  font-size: 16px;
}
.chat-user-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-ov-card.wide {
  width: min(380px, 92%);
}
.chat-user.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.win.nudge {
  animation: nudge 0.5s ease;
}
@keyframes nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-9px);
  }
  40% {
    transform: translateX(9px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
}

/* ---------- boot: frosted glass + orbiting balls (pulse) ---------- */
.boot-pulse {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}
.boot-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: orbspin 18s linear infinite;
}
/* Boot blobs are derived from --accent (and --accent-2 when a theme defines
   one), so the splash follows whichever theme and accent colour is chosen
   instead of always being the same fixed rainbow. */
.boot-ball {
  position: absolute;
  border-radius: 50%;
}
.boot-ball:nth-child(1) {
  width: 70px;
  height: 70px;
  left: 12%;
  top: 14%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 40%, white), var(--accent));
  box-shadow: 0 0 50px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.boot-ball:nth-child(2) {
  width: 50px;
  height: 50px;
  right: 18%;
  top: 10%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 55%, white), color-mix(in srgb, var(--accent) 60%, black));
  box-shadow: 0 0 40px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.boot-ball:nth-child(3) {
  width: 58px;
  height: 58px;
  left: 20%;
  bottom: 16%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 25%, white), var(--accent));
  box-shadow: 0 0 44px 16px color-mix(in srgb, var(--accent) 38%, transparent);
}
.boot-ball:nth-child(4) {
  width: 80px;
  height: 80px;
  right: 12%;
  bottom: 14%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 70%, white), color-mix(in srgb, var(--accent) 70%, black));
  box-shadow: 0 0 56px 20px color-mix(in srgb, var(--accent) 42%, transparent);
}
.boot-ball:nth-child(5) {
  width: 42px;
  height: 42px;
  left: 44%;
  top: 6%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 15%, white), var(--accent));
  box-shadow: 0 0 34px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.boot-ball:nth-child(6) {
  width: 36px;
  height: 36px;
  left: 6%;
  top: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 55%, white), color-mix(in srgb, var(--accent) 50%, black));
  box-shadow: 0 0 30px 10px color-mix(in srgb, var(--accent) 34%, transparent);
}
/* On a light theme the backdrop is pale, so the splash glass must darken its
   own text rather than assume a dark scene. */
[data-mode="light"] .boot-glass { background: color-mix(in srgb, var(--bg) 65%, transparent); }
[data-mode="light"] .boot-logo { color: var(--fg); }
.boot-glass {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10, 6, 20, 0.28);
  backdrop-filter: blur(9px) saturate(130%);
  -webkit-backdrop-filter: blur(9px) saturate(130%);
  transform: translateZ(0); /* own layer → always composites above the blobs */
}
.boot-glass .boot-bar {
  width: 220px;
  height: 6px;
}

/* ---------- chat: legal consent ---------- */
.chat-terms {
  font-size: 0.74em;
  color: var(--muted);
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.chat-terms summary {
  cursor: pointer;
  padding: 8px 10px;
  font-weight: 700;
  color: var(--accent);
  font-size: 0.95em;
  list-style: none;
}
.chat-terms summary::-webkit-details-marker {
  display: none;
}
.chat-terms summary::after {
  content: "▾";
  float: right;
  transition: transform 0.15s;
}
.chat-terms[open] summary::after {
  transform: rotate(180deg);
}
.chat-terms-body {
  max-height: 150px;
  overflow-y: auto;
  padding: 4px 12px 12px;
  font-size: 0.84em;
  line-height: 1.55;
  color: var(--muted);
  white-space: pre-line;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.chat-terms-body::-webkit-scrollbar { width: 8px; }
.chat-terms-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.chat-av-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-av-lg {
  width: 52px;
  height: 52px;
  font-size: 22px;
  box-shadow: 0 0 20px -4px #0008;
}
.chat-consent {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.82em;
  color: var(--fg);
  cursor: pointer;
}
.chat-consent input {
  margin-top: 2px;
  accent-color: var(--accent);
}
.chat-me-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--fg);
}
/* The avatar inside the sidebar top row must be a fixed, small chip, without
   this it inherited a large size and blew the whole header apart. */
.chat-side-top .chat-me-btn .chat-av { width: 28px; height: 28px; font-size: 0.78em; flex: none; }
.chat-side-top .chat-icbtn { flex: none; }
/* Tabs span the full sidebar width as a segmented control in the new layout. */
.chat-side-head > .chat-tabs {
  display: flex;
  width: 100%;
  margin: 0;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.chat-side-head > .chat-tabs button { flex: 1 1 0; text-align: center; }
.chat-gif-search {
  display: flex;
  gap: 6px;
}
.chat-gif-search input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 0.9em;
  padding: 7px 10px;
  border-radius: 8px;
  outline: none;
}
.chat-msg .chat-av {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.chat-av-slot {
  width: 26px;
  height: 26px;
  flex: none;
}
.chat-msg.group-start {
  margin-top: 12px;
}
.chat-head .chat-av {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.chat-auth-switch {
  text-align: center;
}
.chat-auth-switch button {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.chat-replybar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 0.8em;
  color: var(--muted);
}
.chat-reply-lbl {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-reply {
  display: block;
  font-size: 0.78em;
  color: var(--muted);
  margin-bottom: 3px;
  padding-left: 6px;
  border-left: 2px solid var(--accent);
  opacity: 0.9;
  font-weight: 600;
}
.chat-msg.me .chat-reply {
  color: rgba(255, 255, 255, 0.88);
  border-left-color: rgba(255, 255, 255, 0.65);
}
.chat-msg-name {
  cursor: pointer;
}
.chat-pinned {
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
}
.chat-pinned-btn {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.82em;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.chat-msg.deleting {
  animation: msgdel 0.55s ease forwards;
}
@keyframes msgdel {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  60% {
    opacity: 0.55;
    transform: scale(0.88) translateY(-4px);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: scale(0.35) translateY(-14px);
    filter: blur(6px);
  }
}
.chat-msg.flash-msg .chat-bubble {
  animation: flashmsg 1.1s ease;
}
@keyframes flashmsg {
  0%,
  45% {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 14px -2px var(--accent);
  }
  100% {
    outline: 2px solid transparent;
    box-shadow: none;
  }
}
.chat-msg.admin .chat-bubble {
  border: 2px solid #ffd700;
  box-shadow: 0 0 10px -2px #ffd70088;
}
#win-chat .win__body {
  /* Chat fills the window edge to edge, but must still clear the nav bar that
     overlays the top of every window (otherwise the header row is unreachable). */
  padding: var(--winbar-h, 30px) 0 0;
  overflow: hidden;
  position: relative;
}
/* When the chat header exists, its dots are moved inline and the bar is hidden
   via JS; otherwise (pre-login gate) the bar stays so the window buttons show. */
/* The chat header is a full row: avatar + actions + name on the left, dots far right. */
.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--chat-pad, 14px);
  border-bottom: 1px solid var(--line);
  font-size: 0.95em;
  color: var(--fg);
  cursor: grab;
}
.chat-head:active { cursor: grabbing; }
.chat-head-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-head-dots {
  flex: none;
  display: inline-flex;
  align-items: center;
}
.chat-head-dots .wdots { opacity: 1; }
/* encryption / retention badge, small and unobtrusive, under the header */
/* An inline chip inside the header row: quiet by default, informative on hover. */
.chat-secbadge-row {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: 6px;
}
.chat-secbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--faint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  cursor: help;
  transition:
    color 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
/* Reveal the real meaning only when the user asks for it. */
.chat-secbadge:hover {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.chat-secbadge.e2ee {
  color: color-mix(in srgb, #4ade80 62%, var(--faint));
  border-color: color-mix(in srgb, #4ade80 26%, var(--line));
  background: transparent;
}
.chat-secbadge.e2ee:hover {
  color: #4ade80;
  border-color: color-mix(in srgb, #4ade80 55%, var(--line));
  background: color-mix(in srgb, #4ade80 8%, transparent);
}
.chat-me {
  max-width: 120px;
}
.chat-side {
  transition:
    width 0.25s ease,
    opacity 0.25s ease;
}
.chat-shell.collapsed .chat-side {
  width: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  border-right: none;
}
.chat-main {
  position: relative;
}
.chat-reopen {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 16px;
  height: 58px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 11px 11px 0;
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  color: var(--fg);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.55;
  transition:
    width 0.16s,
    opacity 0.16s;
}
.chat-shell.collapsed .chat-reopen {
  display: grid;
}
.chat-reopen:hover {
  width: 24px;
  opacity: 1;
  background: var(--bg-2);
}
.chat-av-emoji {
  font-size: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.chat-online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34c759;
  flex: none;
  box-shadow: 0 0 6px #34c759;
}
.chat-section {
  padding: 8px 12px 4px;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.chat-announce {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
  max-height: 150px;
  overflow-y: auto;
}
.chat-announce-head {
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  justify-content: flex-start;
  transition: background 0.15s;
}
.chat-announce-head:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.chat-announce-caret {
  transition: transform 0.2s;
  margin-left: auto;
}
.chat-announce-items {
  display: flex;
  flex-direction: column;
}
.chat-announce-items.closed {
  display: none;
}
.chat-announce-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 7px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.chat-announce-item .chat-av {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.chat-announce-body {
  display: flex;
  flex-direction: column;
  font-size: 0.87em;
  line-height: 1.4;
  min-width: 0;
  flex: 1;
}
.chat-announce-body b {
  font-size: 0.8em;
  color: var(--accent);
}
.chat-announce-time {
  font-size: 0.66em;
  color: var(--faint);
}
.chat-icbtn.on {
  background: var(--accent);
  color: var(--bg);
}
.chat-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.chat-emoji-pick {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.1s;
}
.chat-emoji-pick:hover {
  transform: scale(1.12);
}
.chat-emoji-pick.on {
  background: var(--accent);
  border-color: var(--accent);
}
.chat-council-slot {
  display: inline-flex;
  margin-left: 8px;
}
.chat-council-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--warn);
  border-radius: 99px;
  background: color-mix(in srgb, var(--warn) 16%, var(--bg-2));
  color: var(--fg);
  font: inherit;
  font-size: 0.8em;
  font-weight: 700;
  padding: 2px 9px;
  cursor: pointer;
}
.chat-council-btn:hover {
  border-color: var(--warn);
}
.council-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--faint);
  font: inherit;
  font-size: 0.72em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}
.chat-ov-head-btns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.council-info:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.council-help {
  font-size: 0.8em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  line-height: 1.45;
}
.chat-council-head {
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 6px;
}
.chat-council-item {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, var(--bg)), var(--bg));
  margin-bottom: 8px;
  animation: councilpop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-council-msg {
  font-size: 0.85em;
  margin-bottom: 8px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-council-msg b { color: var(--accent); }
.chat-council-vote {
  display: flex;
  height: 9px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg-2);
  margin-bottom: 7px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.cv-ban {
  background: linear-gradient(90deg, #ff5f57, #d63324);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cv-keep {
  background: linear-gradient(90deg, #28c840, #17a02f);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-council-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74em;
  color: var(--faint);
  margin-bottom: 8px;
}
.chat-council-meta .cv-ban-t { color: #ff8b7d; font-weight: 700; }
.chat-council-meta .cv-keep-t { color: #4ade80; font-weight: 700; }
.chat-council-meta .council-cd { margin-left: auto; }
.chat-council-meta .council-cd.urgent {
  color: #ff5f57;
  animation: councilPulse 0.7s ease-in-out infinite alternate;
}
@keyframes councilPulse {
  from { opacity: 0.5; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.06); }
}
.chat-council-btns {
  display: flex;
  gap: 8px;
}
.chat-council-btns .btnl { flex: 1; }
.chat-council-btns .btnl.on {
  box-shadow: 0 0 0 2px var(--fg) inset, 0 0 14px -2px currentColor;
}

/* full-window council verdict splash */
.council-fx {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(2px);
  border-radius: inherit;
}
.council-fx.on { opacity: 1; }
.council-fx.ban { background: radial-gradient(120% 90% at 50% 50%, rgba(214, 51, 36, 0.35), rgba(0, 0, 0, 0.55)); }
.council-fx.keep { background: radial-gradient(120% 90% at 50% 50%, rgba(23, 160, 47, 0.32), rgba(0, 0, 0, 0.5)); }
.council-fx-badge {
  text-align: center;
  transform: scale(0.7) rotate(-6deg);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1.4, 0.4, 1), opacity 0.35s ease;
}
.council-fx.on .council-fx-badge { transform: scale(1) rotate(0); opacity: 1; }
.council-fx-ico { font-size: 52px; filter: drop-shadow(0 8px 20px #000a); }
.council-fx-title {
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 4px 20px #000c;
}
.council-fx-sub { font-size: 0.82em; color: rgba(255, 255, 255, 0.75); margin-top: 4px; }
.council-fx-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 5px);
  animation: councilScan 0.6s linear infinite;
}
@keyframes councilScan {
  from { background-position-y: 0; }
  to { background-position-y: 12px; }
}
.chat-profile-status {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.88em;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}
.council-pop {
  animation: councilpop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes councilpop {
  0% {
    transform: translateY(-10px) scale(0.96);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.chat-cat {
  display: flex;
  flex-direction: column;
}
.chat-cat-kids {
  padding-left: 18px;
  border-left: 2px solid var(--line);
  margin-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-chan.sub {
  padding-left: 10px;
}
.chat-chan.sub .chat-av {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
select.chat-ov-q {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  outline: none;
  width: 100%;
}

/* ---------- mobile hardening ----------
   1) iOS Safari auto-zooms the page when an input smaller than 16px is focused.
      Force 16px on touch viewports so focusing the keyboard never resizes the site.
   2) Use dvh so the layout reacts to the on-screen keyboard instead of the
      viewport growing. */
@media (max-width: 720px) {
  input, textarea, select, .chat-ov-q, .set-input, .nt-title, .nt-body, #cmd {
    font-size: 16px !important;
  }
  html, body {
    height: 100%;
    overscroll-behavior: none;
  }
  #windows {
    height: 100dvh;
  }
}

/* ---------- mobile safe-area / bottom-bar geometry ----------
   The dock is a fixed bar at the bottom of the screen. Every "full screen" app
   sheet has to stop ABOVE it, otherwise the composer / last row of content sits
   underneath it and can never be reached or scrolled to.
   We model this with two variables so there is exactly one source of truth:
     --mb-h  = menu bar height at the top (28px)
     --dock-h = dock height incl. the iOS home-indicator inset
   A window is then simply: 100dvh - --mb-h - --dock-h. */
:root {
  --mb-h: 28px;
  --dock-h: 64px;
  --winbar-h: 30px;
}
@media (max-width: 720px) {
  :root {
    --dock-h: calc(52px + env(safe-area-inset-bottom, 0px));
    --winbar-h: 46px;
  }
}
.win.mobile {
  /* one definition, used everywhere, do not re-declare this per-media-query */
  height: calc(100dvh - var(--mb-h) - var(--dock-h)) !important;
  bottom: auto;
  max-height: calc(100dvh - var(--mb-h) - var(--dock-h));
}

/* ---------- mobile window controls ----------
   Touch devices have no :hover, so the traffic-light dots looked invisible.
   Keep them fully opaque, larger for tapping, and never hidden behind the bar. */
@media (max-width: 720px) {
  .win__bar {
    height: 44px;
    padding: 0 12px;
    align-items: center;
  }
  /* A full-bleed screen (`.win--auth`, Chirp, Club...) skips the usual body
     padding, which left its content glued to the title bar. Reserve the bar
     height for every mobile sheet, not only for the padded ones. */
  /* Bar şeffaf bir şerit: sadece trafik ışıkları var. Gövdeye 46px pay
     verince ışıkların altında ikinci bir boş bant oluşuyordu (Files/TayOne'da
     net görülüyordu). 36px, ışıkların bittiği yerin hemen altı. */
  .win.mobile .win__body {
    padding-top: 36px !important;
    box-sizing: border-box;
  }
  .win.mobile .win__bar {
    height: 46px;
    min-height: 46px;
  }
  .wdots {
    opacity: 1;
  }
  .wdots .wdot {
    width: 17px;
    height: 17px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  }
  .wdots .wdot.wx {
    display: grid;
  }
}

/* ---------- mobile desktop: show every app in a scrollable grid ----------
   The desktop uses absolute-positioned icons which overflow a small screen.
   On mobile we switch #icons to a normal grid so nothing is off-screen. */
@media (max-width: 720px) {
  #icons {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    grid-auto-rows: min-content;
    align-content: start;
    gap: 6px;
    padding: 12px 10px calc(96px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #icons .desk-ic {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto;
    justify-self: center;
  }
  #icons .desk-ic.dragging {
    opacity: 0.65;
  }
}

/* ============================================================
   Chat UI/UX, premium motion pass
   Richer bubble entry, hover lift, typing shimmer, depth & polish.
   ============================================================ */
.chat-thread {
  scroll-behavior: smooth;
}
/* Softer, springier message entrance with a subtle depth pop. */
.chat-msg.chat-in {
  animation: chat-in 0.36s cubic-bezier(0.22, 1.2, 0.32, 1) both;
}
@keyframes chat-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
    filter: blur(3px);
  }
  60% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/* Message bubbles get depth + a smooth hover lift. */
.chat-bubble {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  transition: transform 0.16s cubic-bezier(0.22, 1.2, 0.32, 1),
    box-shadow 0.16s ease, background 0.16s ease;
}
.chat-msg:hover .chat-bubble {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.4);
}
.chat-msg.me .chat-bubble {
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--accent) 60%, transparent);
}
.chat-msg.me:hover .chat-bubble {
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent) 75%, transparent);
}
/* New-message glow that fades away. */
.chat-msg.chat-in .chat-bubble {
  animation: chat-pop 0.5s ease-out both;
}
@keyframes chat-pop {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  }
  100% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}
/* Avatars gently scale in with the message. */
.chat-msg .chat-av {
  transition: transform 0.16s cubic-bezier(0.22, 1.2, 0.32, 1);
}
.chat-msg:hover .chat-av {
  transform: scale(1.08);
}
/* Action buttons slide in and glow on hover. */
.chat-actions button {
  transition: transform 0.14s cubic-bezier(0.22, 1.2, 0.32, 1),
    background 0.14s ease, color 0.14s ease;
}
.chat-actions button:hover {
  transform: translateY(-2px) scale(1.08);
}
/* Channel rows glide + highlight. */
.chat-chan {
  transition: background 0.16s ease, transform 0.16s ease;
}
.chat-chan:hover {
  transform: translateX(2px);
}
.chat-chan.on {
  position: relative;
}
.chat-chan.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  animation: chan-bar 0.28s cubic-bezier(0.22, 1.2, 0.32, 1) both;
}
@keyframes chan-bar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
/* Send button: lively press feedback. */
.chat-compose .btnl--primary {
  transition: transform 0.14s cubic-bezier(0.22, 1.2, 0.32, 1), filter 0.14s ease;
}
.chat-compose .btnl--primary:hover {
  transform: translateY(-2px) scale(1.06);
}
.chat-compose .btnl--primary:active {
  transform: scale(0.92);
}
/* Composer input focus glow. */
.chat-compose input {
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.chat-compose input:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Toolbar icons in the chat header lift on hover. */
.chat-icbtn {
  transition: transform 0.14s cubic-bezier(0.22, 1.2, 0.32, 1),
    background 0.14s ease, color 0.14s ease;
}
.chat-icbtn:hover {
  transform: translateY(-2px);
}
/* Typing / connection line shimmer. */
.chat-conn-line {
  animation: conn-shimmer 2.4s ease-in-out infinite;
}
@keyframes conn-shimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg.chat-in,
  .chat-msg.chat-in .chat-bubble,
  .chat-chan.on::before,
  .chat-conn-line {
    animation: none;
  }
}

/* ---------- mobile notes header: give the title its own row ----------
   On a narrow screen the title was crushed next to five action buttons.
   Stack them so the title field is full-width and comfortable to type in. */
@media (max-width: 720px) {
  .nt-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .nt-title {
    flex: 1 1 100%;
    width: 100%;
    font-size: 1.15em;
    padding: 6px 2px 10px;
  }
  .nt-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
  .nt-actions .nt-btn {
    flex: 1 1 auto;
    min-width: 60px;
    text-align: center;
  }
  .nt2-main {
    gap: 10px;
  }
  .nt-tools {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .nt-tools button {
    flex: none;
  }
}


/* ---------------- first-visit guided tour ---------------- */
.tour-ov {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(6, 4, 12, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s ease;
  padding: 20px;
}
.tour-card {
  position: relative;
  width: min(440px, 94vw);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px 20px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px #000d;
}
.tour-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 160px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  filter: blur(20px);
  pointer-events: none;
}
.tour-step {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 10px;
}
.tour-title {
  font-size: 1.35em;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 10px;
  line-height: 1.25;
}
.tour-desc {
  font-size: 0.95em;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 18px;
}
.tour-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.tour-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, transform 0.2s;
}
.tour-dots span.on {
  background: var(--accent);
  transform: scale(1.35);
}
.tour-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tour-next-wrap { display: flex; gap: 8px; }
.tour-skip {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
}
.tour-skip:hover { color: var(--fg); }

/* ============================================================================
   iOS LOOK & FEEL (mobile only)
   ============================================================================
   On a phone the site stops being "a small desktop" and becomes an iPhone-ish
   shell: grouped inset lists, a segmented control, translucent chrome, and a
   bottom bar with a real safe-area gap. All of it is scoped to <=720px so the
   desktop experience is untouched.
   ============================================================================ */
@media (max-width: 720px) {
  /* ---- translucency: the iOS "material" look ---- */
  #menubar {
    height: var(--mb-h);
    background: color-mix(in srgb, var(--bg-2) 78%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 0.5px solid color-mix(in srgb, var(--line) 70%, transparent);
    padding: 0 calc(10px + env(safe-area-inset-left, 0px)) 0
      calc(10px + env(safe-area-inset-right, 0px));
  }
  .mb-logo {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  #dock {
    background: color-mix(in srgb, var(--bg-2) 82%, transparent);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-top: 0.5px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .dock-it {
    border-radius: 14px;
  }
  .dock-it.on::after {
    width: 5px;
    height: 5px;
    bottom: -2px;
  }

  /* ---- windows become iOS sheets: no border, soft top corners ---- */
  .win,
  .app.win {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
  }
  .win.mobile .win__body {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    /* The bar is 46px tall and overlays the window; the body has to clear it or
       the first row of controls on every app sits under the traffic lights. */
    padding-top: var(--winbar-h, 46px);
  }
  /* Traffic lights read as an iOS nav bar control row. */
  .win__bar {
    height: var(--winbar-h, 46px);
    padding: 0 calc(12px + env(safe-area-inset-left, 0px)) 0
      calc(12px + env(safe-area-inset-right, 0px));
    background: color-mix(in srgb, var(--bg-2) 80%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 0.5px solid color-mix(in srgb, var(--line) 70%, transparent);
    pointer-events: auto;
  }
  .win__bar .wdots {
    cursor: default;
  }
  .win__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
  }
  .wdots .wdot {
    width: 15px;
    height: 15px;
  }

  /* ---- grouped inset lists (iOS Settings / Messages pattern) ---- */
  .set-row,
  .sec-row,
  .chat-chan,
  .chat-user,
  .file-row {
    border-radius: 12px;
  }
  .set-row {
    padding: 12px 14px;
    background: var(--bg-2);
    border: none;
    margin-bottom: 1px;
  }
  .set-row .lbl {
    font-size: 0.95em;
  }
  /* The settings nav becomes a horizontal scroll strip like iOS tabs. */
  .set-shell {
    display: block;
  }
  .set-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 10px;
    border-right: none;
    border-bottom: 0.5px solid var(--line);
    margin-bottom: 12px;
    scrollbar-width: none;
  }
  .set-nav::-webkit-scrollbar {
    display: none;
  }
  .set-nav-item {
    flex: none;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.85em;
    background: var(--chip);
  }
  .set-nav-item.on {
    background: var(--accent);
    color: var(--bg);
  }
  .set-nav-ic {
    display: none;
  }
  .set-input {
    border-radius: 10px;
    padding: 11px 13px;
  }

  /* ---- segmented controls: the iOS pill switcher ---- */
  .px-seg,
  .swatches.seg,
  .chat-tabs {
    background: var(--chip);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
  }
  .px-seg button,
  .chat-tabs button {
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.82em;
  }
  .px-seg button.on,
  .chat-tabs button.on {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 1px 3px #0003;
  }

  /* ---- chat: iOS Messages layout ---- */
  .chat-compose {
    padding: 10px calc(12px + env(safe-area-inset-left, 0px))
      calc(10px + env(safe-area-inset-bottom, 0px))
      calc(12px + env(safe-area-inset-right, 0px));
    background: color-mix(in srgb, var(--bg-2) 88%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 0.5px solid color-mix(in srgb, var(--line) 70%, transparent);
    min-height: 0;
  }
  .chat-compose input {
    border-radius: 18px;
    padding: 9px 14px;
    background: var(--bg);
    border: 0.5px solid var(--line);
  }
  .chat-compose .btnl,
  .chat-compose .chat-icbtn {
    height: 36px;
    border-radius: 18px;
  }
  .chat-compose .btnl {
    width: 36px;
  }
  /* The side panel slides over the thread like an iOS push. */
  .chat-side {
    border-right: none;
    box-shadow: 12px 0 40px -18px #000b;
  }
  .chat-head {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--bg-2) 80%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0.5px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .chat-msg {
    max-width: 86%;
  }
  .chat-bubble {
    border-radius: 18px;
  }

  /* ---- bottom sheets: iOS presents modals from the bottom ---- */
  .chat-overlay,
  .tour-ov {
    align-items: flex-end;
    padding: 0;
  }
  .chat-ov-card,
  .chat-confirm-btns {
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    animation: ios-sheet 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .tour-card {
    border-radius: 20px 20px 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
  }
  @keyframes ios-sheet {
    from {
      transform: translateY(100%);
    }
  }

  /* ---- large titles: iOS puts the screen name big and bold at the top ---- */
  .about-name,
  .cv-name,
  .reader-body > h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .about-role {
    font-size: 0.95em;
  }

  /* ---- buttons: full-width primary actions, iOS radii ---- */
  .btnl {
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.9em;
  }
  .btnl--primary {
    width: 100%;
    text-align: center;
  }
  .mail-actions,
  .cv-actions,
  .about-cta {
    flex-direction: column;
    gap: 8px;
  }
  .mail-actions .btnl,
  .cv-actions .btnl,
  .about-cta .btnl {
    width: 100%;
    text-align: center;
    margin: 0;
  }

  /* ---- toasts float above the dock, never under it ---- */
  .toast {
    bottom: calc(var(--dock-h) + 12px);
    border-radius: 14px;
  }

  /* ---- an "iPad-ish" wider phone gets a little more breathing room ---- */
  .screen {
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
  }
  /* A visible grab handle on the desktop-icon grid scroller. */
  #icons {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================================
   macOS LOOK & FEEL (desktop only)
   ============================================================================
   The desktop already behaves like a windowing system; this layer makes it
   *look* the part: a real frosted menu bar with the app name, windows that cast
   proper multi-layer shadows with a bright rim, a dock with a reflective
   shelf, and Mac-style context menus / launcher.
   ============================================================================ */
@media (min-width: 721px) {
  /* ---- menu bar: frosted, hairline bottom, app name in bold ---- */
  #menubar {
    height: var(--mb-h);
    background: color-mix(in srgb, var(--bg-2) 72%, transparent);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 0.5px solid color-mix(in srgb, var(--line) 65%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
    font-size: 12.5px;
  }
  .mb-logo {
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  /* Superseded by the real logo mark in .mb-logo .mb-mark. */
  .mb-logo::before {
    content: none;
  }
  .mb-app {
    font-weight: 700;
    color: var(--fg);
  }
  .mb-icon:hover {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 5px;
  }

  /* ---- windows: Mac depth (soft ambient + tight key shadow + inner rim) ---- */
  .win {
    border: 0.5px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 11px;
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.06) inset,
      0 1px 1px rgba(0, 0, 0, 0.28),
      0 12px 28px -6px rgba(0, 0, 0, 0.42),
      0 40px 80px -24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px) saturate(120%);
  }
  .win.max {
    border-radius: 0;
    box-shadow: none;
  }
  /* The focused window is brighter and lifts a touch. */
  .win.focus-win,
  .app.win.focus-win {
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.09) inset,
      0 2px 3px rgba(0, 0, 0, 0.3),
      0 18px 40px -8px rgba(0, 0, 0, 0.5),
      0 60px 110px -30px rgba(0, 0, 0, 0.58);
  }
  /* Traffic lights: Mac's ringed, desaturated-until-hovered dots. */
  .wdots {
    gap: 8px;
  }
  .wdots .wdot {
    width: 12px;
    height: 12px;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.22);
  }
  .wdots:hover .wdot {
    color: rgba(0, 0, 0, 0.55);
  }

  /* ---- dock: reflective shelf with a hairline border ---- */
  #dock {
    background: color-mix(in srgb, var(--bg-2) 58%, transparent);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 0.5px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 18px;
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.05) inset,
      0 10px 34px -10px rgba(0, 0, 0, 0.55);
    padding: 7px 10px;
  }
  .dock-it {
    border-radius: 13px;
    transition:
      transform 0.14s cubic-bezier(0.22, 1.2, 0.36, 1),
      filter 0.14s ease;
  }
  .dock-it:hover {
    transform: translateY(-4px) scale(1.03);
    filter: brightness(1.08);
  }
  .dock-it.on::after {
    background: var(--accent);
  }

  /* ---- context menus: Mac's rounded translucent panel ---- */
  #ctx,
  #mb-drop,
  #clock-drop,
  #wifi-drop,
  #bt-drop,
  #notif-drop {
    background: color-mix(in srgb, var(--bg-2) 88%, transparent);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 0.5px solid color-mix(in srgb, var(--line) 85%, transparent);
    border-radius: 8px;
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.05) inset,
      0 12px 34px -10px rgba(0, 0, 0, 0.55);
  }
  .ctx-item {
    border-radius: 5px;
    font-size: 12.5px;
    padding: 6px 10px;
  }
  /* Spotlight / launcher: centred, big, frosted, Mac-style. */
  #launcher:not(.start) .launch-panel {
    width: min(560px, 84vw);
    border-radius: 18px;
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.07) inset,
      0 30px 70px -18px rgba(0, 0, 0, 0.6);
  }
  .launch-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
  .launch-app {
    width: auto;
  }
}

/* ============================================================================
   CHAT, overflow + layout hardening
   ============================================================================
   The composer is a single flex row (attach · announce · gif · input · send).
   Without min-width:0 on the input, the row's intrinsic width exceeds the
   viewport and the whole message pane slides off to the right. These rules make
   the row shrink correctly at every width, and give the header badge a compact
   form that never wraps or overflows.
   ============================================================================ */
.chat-shell,
.chat-main,
.chat-side,
.chat-thread,
.chat-compose {
  min-width: 0;
  max-width: 100%;
}
.chat-thread {
  overflow-x: hidden;
}
.chat-compose input {
  min-width: 0;
  width: 100%;
}
.chat-msg,
.chat-bubble,
.chat-msg-stack {
  min-width: 0;
}
.chat-msg-stack {
  max-width: 100%;
}
/* The header badge row is a single quiet line under the title, not a permanent
   loud banner: it shrinks, ellipsises and can never push the layout wider. */
.chat-secbadge-row {
  padding: 2px 12px 0;
  overflow: hidden;
}
.chat-secbadge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  /* On a phone the badge collapses to just its icon; the full wording lives in
     the tooltip. That keeps the header clean instead of shouting a sentence. */
  .chat-secbadge {
    font-size: 0.6em;
    padding: 2px 7px;
    gap: 3px;
  }
  .chat-secbadge .secb-long {
    display: none;
  }
  .chat-secbadge-row {
    padding: 2px 10px 0;
  }
  /* Compose bar: tighten the paddings and let the input take every spare pixel. */
  .chat-compose {
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    min-height: 0;
    flex-wrap: nowrap;
  }
  .chat-compose .chat-icbtn {
    height: 36px;
    padding: 0 9px;
    font-size: 14px;
    flex: none;
  }
  .chat-compose .chat-icbtn .icbtn-label {
    display: none;
  }
  .chat-compose input {
    height: 36px;
    padding: 0 12px;
  }
  .chat-compose .btnl {
    width: 36px;
    height: 36px;
    flex: none;
  }
}

/* ============================================================================
   THEME FAMILIES, dark + light pairs
   ============================================================================
   Every theme now has a light and a dark variant so the whole app can be read
   comfortably in any room, and the icon/glyph contrast is tuned per mode.
   `data-mode` on <html> is the switch; `data-theme` selects the family.
   ============================================================================ */

/* ---- EMBER (warm, the site default) ---- */
/* ===========================================================================
   THEME FAMILIES - every family defines BOTH a dark and a light variant
   ===========================================================================
   Earlier only the dark side was designed properly and "light" was a pale
   afterthought, which is why midnight/phosphor looked washed out in light mode
   and paper had no dark side at all. Each variant below is its own palette with
   real contrast, so switching modes feels like switching themes.
   =========================================================================== */

/* ---- EMBER: warm, the site default ---- */
[data-theme="ember"][data-mode="dark"] {
  --bg: #0f0e0c;
  --bg-2: #161511;
  --bg-3: #1f1d18;
  --fg: #ece7d9;
  --muted: #a8a294;
  --faint: #8b8578;
  --line: #2a2822;
  --accent: #ff7a45;
  --accent-2: #ffb347;
  --ok: #8fd694;
  --warn: #f2c14e;
  --err: #ff6b6b;
  --info: #7cc4ff;
  --vio: #c79bff;
  --sel: #ff7a4533;
  --chip: #1c1a16;
  --glow: 0 0 0 transparent;
  --icon-bg: rgba(255, 255, 255, 0.08);
  --icon-ink: #ffffff;
  --icon-ring: rgba(255, 255, 255, 0.14);
}

/* ---- MIDNIGHT: deep blue. The light side is a crisp daylight blue, not a
   washed-out copy of the dark one. ---- */
[data-theme="midnight"][data-mode="dark"] {
  --bg: #0b1020;
  --bg-2: #10172b;
  --bg-3: #172038;
  --fg: #dfe6f5;
  --muted: #93a0bd;
  --faint: #7a8195;
  --line: #222c47;
  --accent: #7aa2ff;
  --accent-2: #5eead4;
  --ok: #86efac;
  --warn: #fcd34d;
  --err: #fb7185;
  --info: #67e8f9;
  --vio: #c4b5fd;
  --sel: #7aa2ff33;
  --chip: #131b31;
  --glow: 0 0 0 transparent;
  --icon-bg: rgba(255, 255, 255, 0.08);
  --icon-ink: #ffffff;
  --icon-ring: rgba(255, 255, 255, 0.14);
}

/* ---- PHOSPHOR: terminal green. The light side is a high-contrast "daylight
   terminal" (deep green ink on paper), not mint. ---- */
[data-theme="phosphor"][data-mode="dark"] {
  --bg: #020a04;
  --bg-2: #04120a;
  --bg-3: #082010;
  --fg: #9dff9d;
  --muted: #4fcf62;
  --faint: #5c9a5e;
  --line: #0f3a1a;
  --accent: #c6ff6b;
  --accent-2: #7dff8a;
  --ok: #9dff9d;
  --warn: #e9ff70;
  --err: #ff8d6b;
  --info: #7dffd8;
  --vio: #b6ffb0;
  --sel: #9dff9d33;
  --chip: #06180c;
  --glow: 0 0 6px #4fff6a66;
  --icon-bg: rgba(255, 255, 255, 0.08);
  --icon-ink: #ffffff;
  --icon-ring: rgba(255, 255, 255, 0.14);
}

/* ---- PAPER: ink on stock. It now has a real dark side: the same warm paper
   tones, read at night (soft charcoal with sepia warmth, not neutral grey). ---- */
[data-theme="paper"][data-mode="light"] {
  --bg: #f5f1e6;
  --bg-2: #ece7d7;
  --bg-3: #ded7c3;
  --fg: #1c1a15;
  --muted: #5c574a;
  --faint: #6d6a63;
  --line: #d3ccb9;
  --accent: #b8410c;
  --accent-2: #8a5205;
  --ok: #276b31;
  --warn: #8a5205;
  --err: #a81d13;
  --info: #1a5697;
  --vio: #6234a3;
  --sel: #b8410c26;
  --chip: #e8e2d1;
  --glow: 0 0 0 transparent;
  --icon-bg: #ffffff;
  --icon-ink: #1c1a15;
  --icon-ring: rgba(28, 26, 21, 0.14);
}

/* ---- Dark modes get their own icon treatment ---- */
[data-mode="dark"] {
  --icon-bg: rgba(255, 255, 255, 0.08);
  --icon-ink: #ffffff;
  --icon-ring: rgba(255, 255, 255, 0.14);
}

/* ---- Icons react to the mode so glyphs never wash out ---- */
.dock-it,
.desk-ic .gi,
.launch-app .gi,
.start-app .gi,
.gi-mini {
  color: var(--icon-ink);
}
/* A light-mode icon tile needs a ring, or pale tiles vanish on a pale bar. */
[data-mode="light"] .dock-it,
[data-mode="light"] .desk-ic .gi,
[data-mode="light"] .launch-app .gi,
[data-mode="light"] .start-app .gi {
  box-shadow:
    inset 0 0 0 1px var(--icon-ring),
    0 2px 6px -2px rgba(0, 0, 0, 0.18);
}
[data-mode="light"] .dock-it svg,
[data-mode="light"] .desk-ic .gi svg,
[data-mode="light"] .launch-app .gi svg,
[data-mode="light"] .start-app .gi svg {
  filter: saturate(1.1) brightness(0.92);
}
[data-mode="light"] #menubar,
[data-mode="light"] #dock {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
[data-mode="light"] .win {
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06) inset,
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 10px 24px -8px rgba(0, 0, 0, 0.18),
    0 30px 60px -24px rgba(0, 0, 0, 0.22);
}
[data-mode="light"] .mb-logo::before {
  opacity: 0.9;
}

/* ---- Theme picker swatches (settings) ---- */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.theme-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.theme-card.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.theme-card .tc-preview {
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 6px;
  overflow: hidden;
}
.theme-card .tc-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: none;
}
.theme-card .tc-name {
  font-size: 0.74em;
  font-weight: 800;
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.theme-card .tc-mode {
  font-size: 0.86em;
  opacity: 0.75;
}

/* ============================================================================
   PASTAAY, final visual design
   ============================================================================
   The earlier rules accumulated patch-on-patch (duplicate .px-combo and
   .px-praise blocks, ad-hoc spacing). This layer is the single source of truth
   for the look: a calm header, one clear status bar, a big tappable board, and
   a footer that stays out of the way. It is scoped to .px so it cannot leak.
   ============================================================================ */
.px {
  --px-gap: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--px-gap);
  min-height: 100%;
  position: relative;
  font-variant-numeric: tabular-nums;
}

/* ---- header: identity on the left, stats on the right, help at the edge ---- */
.px .px-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 30px;
}
.px .px-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg);
  flex: none;
}
.px .px-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  overflow: hidden;
}
.px .px-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chip);
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.px .px-chip b {
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--fg);
}
.px .px-chip--lvl {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.px .px-chip--lvl b {
  color: var(--accent);
}
.px .px-chip--best b {
  color: var(--warn);
}
.px .px-help {
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.14s,
    border-color 0.14s,
    transform 0.14s;
}
.px .px-help:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}

/* ---- the SLA bar: the one number that matters, given real weight ---- */
.px .px-sla-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.px .px-sla-label {
  font-size: 0.6em;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--faint);
  flex: none;
}
.px .px-barwrap {
  flex: 1;
  min-width: 0;
  height: 10px;
  border-radius: 6px;
  background: var(--chip);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.px .px-bar {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  transition:
    width 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease;
}
.px .px-sla-val {
  font-size: 0.86em;
  font-weight: 800;
  color: var(--fg);
  min-width: 3.4em;
  text-align: right;
  flex: none;
}
/* The bar pulses red when the SLA is critical, so the danger is felt, not read. */
.px .px-sla-row.crit .px-sla-val {
  color: var(--err);
  animation: px-crit 0.9s ease-in-out infinite;
}
@keyframes px-crit {
  50% {
    opacity: 0.45;
  }
}

/* ---- toolbar: difficulty on the left, combo on the right ---- */
.px .px-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}
.px .px-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--chip);
  flex: none;
}
.px .px-seg button {
  font: inherit;
  font-size: 0.7em;
  font-weight: 700;
  padding: 5px 13px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.14s,
    color 0.14s;
}
.px .px-seg button:hover {
  color: var(--fg);
}
.px .px-seg button.on {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.px .px-combo {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74em;
  font-weight: 800;
  color: var(--warn);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.px .px-combo:not(:empty) {
  opacity: 1;
  transform: none;
}
.px .px-combo.fever {
  color: var(--err);
  text-shadow: 0 0 12px color-mix(in srgb, var(--err) 50%, transparent);
}
.px .px-meter {
  height: 3px;
  border-radius: 2px;
  background: transparent;
  overflow: hidden;
  flex: none;
}
.px .px-meter span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--warn);
  transition: width 0.2s ease;
}
.px .px-meter.on span {
  background: var(--err);
}

/* ---- the board: big, calm targets with a clear fault affordance ---- */
.px .px-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 220px;
  align-content: stretch;
}
.px .px-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.09s cubic-bezier(0.3, 1.4, 0.5, 1),
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}
.px .px-cell:active {
  transform: scale(0.95);
}
.px .px-cell-name {
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}
.px .px-cell-fault {
  font-size: 1.7em;
  line-height: 1;
  color: var(--fg);
  min-height: 1.1em;
}
.px .px-cell-taps {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  font-size: 0.62em;
  font-weight: 800;
  color: var(--fg);
  text-align: center;
}
/* An active fault reads instantly: red wash, red ring, attention pulse. */
.px .px-cell.faulty {
  background: color-mix(in srgb, var(--err) 16%, var(--bg-2));
  border-color: var(--err);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--err) 40%, transparent);
  animation: px-tick 0.5s ease-in-out infinite;
}
@keyframes px-tick {
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 16%, transparent);
  }
}
/* A repaired cell flashes green briefly (this is a transient, never a state). */
.px .px-cell.hit {
  background: color-mix(in srgb, var(--ok) 20%, var(--bg-2));
  border-color: var(--ok);
}
.px .px-cell.hit::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--ok);
  border-radius: 16px;
  pointer-events: none;
  animation: px-burst 0.32s ease-out forwards;
}
@keyframes px-burst {
  from {
    transform: scale(0.94);
    opacity: 1;
  }
  to {
    transform: scale(1.12);
    opacity: 0;
  }
}
.px .px-cell.gold {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ffd700 26%, transparent);
}
.px .px-cell.gold::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #ffd700, #ffb347);
}
.px .px-grid3.shake {
  animation: px-shake 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes px-shake {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(3px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-5px);
  }
  40%,
  60% {
    transform: translateX(5px);
  }
}

/* ---- footer: quiet, out of the play area ---- */
.px .px-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 2px;
}
.px .px-foot-hint {
  flex: 1;
  min-width: 0;
  font-size: 0.68em;
  color: var(--faint);
  line-height: 1.4;
}
.px .px-links {
  display: flex;
  gap: 6px;
  flex: none;
  margin-left: auto;
}
.px .px-links a {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition:
    color 0.14s,
    border-color 0.14s;
}
.px .px-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---- combo praise: one reserved slot, so it can never stack on the board ---- */
.px .px-praise {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  text-align: center;
  font-size: 1.5em;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--warn);
  text-shadow: 0 2px 18px color-mix(in srgb, var(--warn) 45%, transparent);
  pointer-events: none;
  animation: px-praise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  z-index: 3;
}
.px .px-praise.px-milestone {
  color: var(--accent);
  font-size: 1.25em;
  top: 36%;
}
@keyframes px-praise {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(8px);
  }
  25% {
    opacity: 1;
    transform: scale(1.04);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1) translateY(-10px);
  }
}
.px .px-pop {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  font-size: 0.85em;
  font-weight: 800;
  color: var(--ok);
  pointer-events: none;
  animation: px-pop 0.7s ease-out both;
  z-index: 4;
}
@keyframes px-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.9);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -22px) scale(1);
  }
}
.px .px-part {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  pointer-events: none;
  animation: px-part 0.65s ease-out forwards;
  z-index: 2;
}
@keyframes px-part {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.3);
    opacity: 0;
  }
}
/* Fever washes the board in a warm glow rather than rearranging anything. */
.px.fever .px-grid3 {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: 16px;
}

@media (max-width: 720px) {
  .px {
    --px-gap: 8px;
  }
  .px .px-logo {
    font-size: 0.95em;
  }
  .px .px-chip {
    padding: 2px 7px;
    font-size: 0.56em;
  }
  .px .px-chip b {
    font-size: 1.4em;
  }
  .px .px-grid3 {
    gap: 8px;
    min-height: 0;
  }
  .px .px-cell {
    min-height: 76px;
    border-radius: 12px;
    padding: 6px;
  }
  .px .px-cell-fault {
    font-size: 1.5em;
  }
  .px .px-cell-name {
    font-size: 0.74em;
  }
  .px .px-seg button {
    padding: 6px 12px;
  }
  .px .px-foot-hint {
    display: none;
  }
  .px .px-praise {
    font-size: 1.2em;
  }
}

/* ============================================================================
   SETTINGS, mobile layout fix
   ============================================================================
   On a phone the settings window was broken: the desktop 150px sidebar stayed in
   the flow, .set-shell kept `height:100%` while its content grew to ~830px, and
   the panel could not scroll, so everything below the fold was unreachable.
   The fix: on mobile the nav becomes a horizontal scrolling strip that is taken
   OUT of the height calculation, and the panel becomes the one scrollable area.
   ============================================================================ */
#win-settings .win__body {
  overflow: hidden;
  padding: var(--winbar-h, 30px) 0 0;
}
@media (max-width: 720px) {
  .set-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0;
  }
  /* The nav is a fixed-height strip, not a 200px-tall block. */
  .set-nav {
    flex: none;
    width: auto;
    min-width: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .set-nav::-webkit-scrollbar {
    display: none;
  }
  .set-nav-item {
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.82em;
    background: var(--chip);
    white-space: nowrap;
  }
  .set-nav-item.on {
    background: var(--accent);
    color: var(--bg);
  }
  .set-nav-ic {
    display: none;
  }
  /* The panel is the ONLY thing that scrolls, and it fills the remaining room. */
  .set-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .set-profile {
    gap: 14px;
  }
  /* Rows become iOS-style grouped cards. */
  .set-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 0;
  }
  .set-row .lbl {
    font-size: 0.72em;
  }
  .set-row .swatches,
  .set-row .theme-grid {
    width: 100%;
  }
  .set-input {
    width: 100%;
    min-width: 0;
  }
  .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .set-avs {
    justify-content: flex-start;
  }
  /* A long swatch list wraps instead of scrolling off the edge. */
  .swatches {
    flex-wrap: wrap;
  }
}
@media (max-width: 380px) {
  .theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   GAMES, fit the window, never scroll to reach the controls
   ============================================================================
   On a short phone the Snake board was 500px tall inside a 478px body, so the
   arrow pad ended up under the dock and the player had to scroll mid-game.
   The canvas now takes whatever height is left after the HUD and the pad, and
   the whole stack is capped to the body height.
   ============================================================================ */
.snake-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
#snake-cv {
  display: block;
  width: 100%;
  /* Grow to fill the leftover space, but never push the pad out of view. */
  flex: 1 1 auto;
  min-height: 120px;
  border-radius: 8px;
  background: #0c0f14;
}
.snake-ctl,
.snake-ui {
  flex: none;
}
.snake-ctl {
  flex-wrap: wrap;
}
.snake-pad {
  flex: none;
}
/* The keyboard hint is the first thing to go when space is tight. */
@media (max-height: 720px) {
  .snake-wrap {
    gap: 7px;
  }
  .snake-wrap > span.muted {
    display: none;
  }
  .snake-pad {
    width: min(190px, 70%);
  }
  .snake-pad button {
    height: 40px;
  }
}
@media (max-width: 720px) {
  /* Phones play with the on-screen pad, so it must always be reachable. */
  .snake-wrap {
    height: auto;
    min-height: 0;
  }
  #snake-cv {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .snake-pad {
    width: min(230px, 82%);
    margin-bottom: 2px;
  }
}

/* On a phone the 3x2 board would stretch into very tall columns. Cap the board
   so the cells read as tappable cards, and let the free space sit below. */
@media (max-width: 720px) {
  .px {
    /* Let the board float in the middle of the free space instead of leaving a
       big empty band at the bottom of the window. */
    justify-content: flex-start;
  }
  .px .px-grid3 {
    flex: 0 0 auto;
    max-height: 58vh;
    align-content: start;
    /* Centre the capped board in the leftover room. */
    margin-top: auto;
    margin-bottom: auto;
  }
  .px .px-cell {
    min-height: clamp(74px, 15vh, 130px);
  }
  /* The footer always keeps to the bottom edge. */
  .px .px-foot {
    margin-top: 0;
  }
}

/* ============================================================================
   CHAT, barless window (dots live inside the app's own header)
   ============================================================================
   The chat app hides the window's own title bar and renders the traffic-light
   dots inside its header instead, so it reads as one integrated app rather than
   "a window with a chat taped inside it".

   The body, however, was still reserving `--winbar-h` (46px on a phone) of
   padding for that hidden bar. That dead band is what made the app look like it
   was opening "with a gap at the top" on mobile. With the bar gone the padding
   goes too, and the shell fills the window edge to edge.
   ============================================================================ */
.win.chat-barless .win__body {
  padding: 0;
}
/* The header IS the title bar here: it carries the dots, so it gets the drag
   cursor and a little drag handle affordance. */
.win.chat-barless .chat-head {
  cursor: grab;
}
.win.chat-barless .chat-head:active {
  cursor: grabbing;
}
/* Buttons inside the header must not inherit the grab cursor. */
.win.chat-barless .chat-head button,
.win.chat-barless .chat-head .chat-icbtn,
.win.chat-barless .chat-head .chat-head-dots {
  cursor: pointer;
}
@media (max-width: 720px) {
  /* On a phone the header is a real iOS nav bar: taller, with the title centred
     between the dots and the actions. */
  .win.chat-barless .chat-head {
    min-height: 52px;
    padding: 0 12px;
  }
  .win.chat-barless .chat-head-dots {
    margin-right: auto;
  }
}

/* Specificity guard: `.win.mobile .win__body` (0,3,0) beat `.win.chat-barless
   .win__body` (0,3,0) by source order in some bundles. State it explicitly for
   every combination the app can produce so the chat is always edge-to-edge. */
.win.chat-barless .win__body,
.win.mobile.chat-barless .win__body,
.win.chat-barless.mobile .win__body,
#win-chat .win__body,
#win-chat.win.mobile .win__body {
  padding-top: 0;
}

/* ============================================================================
   CHAT HEADER, one clean line
   ============================================================================
   Order is dots · avatar · name · status-chip · actions. The name leads, the
   chip is quiet, and the action buttons sit at the far right where they belong.
   Earlier the actions came first and shoved the name into the middle, which read
   like a patch rather than a header.
   ============================================================================ */
.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  flex: none;
}
.chat-head-dots {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.chat-head-name {
  font-weight: 700;
  font-size: 0.98em;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* The avatar must not shrink into an ellipse. */
.chat-head .chat-av {
  flex: none;
}
/* Push the action row to the right, then the window dots sit at the very edge
   (they are the last child in the DOM). */
.chat-head-acts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex: none;
}
.chat-council-slot {
  flex: none;
}
/* The status chip tucks in right after the name, before the actions. */
.chat-secbadge-row {
  margin-left: 0;
  margin-right: 0;
  flex: none;
}
@media (max-width: 720px) {
  .chat-head {
    gap: 6px;
    min-height: 52px;
  }
  .chat-head-name {
    font-size: 0.94em;
  }
  /* The action row would wrap on a narrow phone; let it scroll horizontally
     instead so the input never gets pushed off screen. */
  .chat-head-acts {
    max-width: 46%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chat-head-acts::-webkit-scrollbar {
    display: none;
  }
  .chat-head-acts .chat-icbtn {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
}

/* ============================================================================
   THEME PICKER, side-by-side grid
   ============================================================================
   Eight real choices (four families x dark/light), laid out in a responsive
   grid so they sit next to each other instead of stacking into a long list.
   Each card shows the actual palette it will apply.
   ============================================================================ */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  width: 100%;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.theme-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.theme-card.on {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent),
    0 8px 20px -10px rgba(0, 0, 0, 0.5);
}
.theme-card .tc-preview {
  height: 46px;
  border-radius: 9px;
  border: 1px solid rgba(128, 128, 128, 0.22);
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 7px;
  overflow: hidden;
}
.theme-card .tc-dot {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  flex: none;
}
.theme-card .tc-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 0.72em;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.theme-card .tc-mode {
  font-size: 0.92em;
  opacity: 0.7;
  line-height: 1;
}
@media (max-width: 720px) {
  /* Two per row on a phone keeps them side by side without cramping. */
  .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .theme-card .tc-preview {
    height: 38px;
  }
}
@media (max-width: 360px) {
  .theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Settings section icons are inline SVGs now: size them and let them inherit
   the row colour (selected rows are accent-on-dark, so they must follow). */
.set-nav-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
}
.set-nav-ic svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* ============================================================================
   MENUBAR LOGO, a designed mark, not a white text blob
   ============================================================================
   The old logo was plain white text on a hardcoded dark bar, which read as a
   white smudge in light themes. It is now a terminal-prompt mark plus a wordmark
   that follows the theme's own ink and accent colours.
   ============================================================================ */
#menubar {
  /* Theme-driven instead of a fixed dark slab so light themes look right. */
  background: color-mix(in srgb, var(--bg-2, #161511) 72%, transparent);
  color: var(--fg, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--line, #2a2822) 70%, transparent);
}
.mb-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 4px;
  height: 20px;
  border-radius: 6px;
  color: var(--fg, #fff);
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
.mb-logo:hover {
  background: color-mix(in srgb, var(--fg, #fff) 12%, transparent);
}
/* The mark: accent-tinted rounded tile holding a prompt glyph. */
.mb-logo .mb-mark {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent, #ff7a45) 92%, transparent),
    color-mix(in srgb, var(--accent-2, #ffb347) 92%, transparent));
  color: color-mix(in srgb, var(--bg, #000) 88%, transparent);
  flex: none;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent, #ff7a45) 40%, transparent);
}
.mb-logo .mb-mark svg {
  width: 11px;
  height: 11px;
  display: block;
}
.mb-logo .mb-word {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--fg, #fff);
}
.mb-logo .mb-word em {
  font-style: normal;
  font-weight: 800;
  color: var(--accent, #ff7a45);
}

/* The menubar logo uses the real brand asset (assets/favicon.svg) with the
   wordmark beside it. The little tile already carries its own colours, so we
   only round it slightly to sit on the bar. */
.mb-logo .mb-logo-img {
  width: 17px;
  height: 17px;
  display: block;
  border-radius: 5px;
  flex: none;
}
.mb-logo .mb-mark {
  display: none;
}

/* ---------------------------------------------------------------------------
   ACCENT PICKER, a wide palette plus a custom colour and a reset
   --------------------------------------------------------------------------- */
.accents {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.accents .sw {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.14s ease;
}
.accents .sw:hover {
  transform: translateY(-2px) scale(1.06);
}
.accents .sw.on {
  border-color: var(--fg);
  box-shadow:
    0 0 0 2px var(--bg-2),
    0 0 0 3.5px var(--accent);
}
/* Reset-to-theme-default */
.accents .sw-reset {
  display: grid;
  place-items: center;
  background: var(--chip);
  color: var(--muted);
  border-color: var(--line);
  font-size: 13px;
  line-height: 1;
}
/* Custom colour: a "+" tile that opens the native picker. */
.accents .sw-custom {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--chip);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, var(--line));
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
}
.accents .sw-custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.accents .sw-custom span {
  pointer-events: none;
}


/* ============================================================================
   CHAT PANELS, one continuous seam
   ============================================================================
   The sidebar stacked TWO bordered rows (identity bar 57px + tabs 42px) while
   the message pane had a single 48px header. Result: three horizontal rules at
   three different heights and the app looked like two UI kits stitched together.

   Fix: the sidebar is now a single header row of exactly the same height as the
   message header, with the tabs inline in that row. One seam across the whole
   window.
   ============================================================================ */
.chat-shell {
  /* The one true header height. Both panels key off it. */
  --chat-head-h: 48px;
}
.chat-side {
  min-width: 0;
}
.chat-side-head {
  min-height: var(--chat-head-h);
  padding: 10px var(--chat-side-pad, 12px);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  gap: 9px;
}
.chat-head {
  height: var(--chat-head-h);
  min-height: var(--chat-head-h);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
/* Tabs live INSIDE the sidebar header row so they add no second rule. */
.chat-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 0;
  border-bottom: none;
  margin-left: 2px;
  flex: none;
}
.chat-tabs button {
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.76em;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.chat-tabs button:hover {
  color: var(--fg);
  background: var(--chip);
}
.chat-tabs button.on {
  color: var(--bg);
  background: var(--accent);
}

/* ---------------------------------------------------------------------------
   Collapsible sub-channel groups
   --------------------------------------------------------------------------- */
.chat-cat {
  display: flex;
  flex-direction: column;
}
.chat-cat-head {
  display: flex;
  align-items: center;
  gap: 2px;
}
.chat-cat-head .chat-chan {
  flex: 1;
  min-width: 0;
}
.chat-cat-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  margin-right: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font: inherit;
  font-size: 0.64em;
  font-weight: 800;
  cursor: pointer;
  transition:
    color 0.14s ease,
    border-color 0.14s ease;
}
.chat-cat-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.chat-cat-toggle svg {
  width: 10px;
  height: 10px;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-cat.open .chat-cat-toggle svg {
  transform: rotate(180deg);
}
/* Children are indented with a rail so the hierarchy reads at a glance. */
.chat-cat-kids {
  display: flex;
  flex-direction: column;
  margin-left: 17px;
  padding-left: 8px;
  border-left: 1.5px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.chat-chan.sub {
  font-size: 0.94em;
}
.chat-chan.sub .chat-av {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

/* ---------------------------------------------------------------------------
   Chat panel chrome: both header rows share ONE background so the seam reads as
   a single bar across the window. Previously the sidebar pulled --win-bar-bg
   (an opacity-derived value) while the message header had none, so the two ends
   of the same row could end up different colours.
   --------------------------------------------------------------------------- */
.chat-side-head,
.chat-head {
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
}
.chat-side {
  background: var(--bg, var(--bg-2));
}
.chat-announce,
.chat-pinned {
  background: var(--bg-2);
}

/* ============================================================================
   CHAT · STORAGE & RETENTION PANEL
   ============================================================================
   Lives in the message app (not Settings): the memory a conversation uses is a
   property of that conversation. Cards, one clear primary number, and presets
   instead of raw inputs.
   ============================================================================ */
.storep {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.storep-lead {
  font-size: 0.8em;
  color: var(--muted);
  line-height: 1.5;
}
/* Usage summary: a slim meter plus the numbers that matter. */
.storep-ch {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.storep-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--chip);
  overflow: hidden;
  margin-bottom: 9px;
}
.storep-bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.storep-stat {
  font-size: 0.78em;
  color: var(--muted);
}
.storep-stat b {
  color: var(--fg);
  font-weight: 800;
}
.storep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.storep-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.storep-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
/* The little "i" that reveals the explanation on tap/hover. */
.storep-i {
  width: 17px; height: 17px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--muted);
  font: inherit; font-size: 0.62em; font-weight: 800;
  cursor: help; padding: 0;
  text-transform: none;
}
.storep-i:hover { border-color: var(--accent); color: var(--accent); }
.storep-note {
  font-size: 0.72em;
  color: var(--faint);
  line-height: 1.4;
}
.storep-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.storep-opt {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font: inherit;
  font-size: 0.74em;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease;
}
.storep-opt:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
.storep-opt.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
/* Actions: three short buttons on one row, each with its own "i"-style balloon
   on hover. The old version stacked three tall two-line buttons, this is flat. */
.storep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.storep-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78em;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg);
  transition: border-color 0.15s, background 0.15s;
}
.storep-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); }
.storep-btn-ic { font-size: 1em; }
.storep-btn--danger { color: var(--err, #b42318); border-color: color-mix(in srgb, var(--err, #b42318) 35%, var(--line)); }
.storep-btn--danger:hover { background: color-mix(in srgb, var(--err, #b42318) 10%, var(--bg-2)); border-color: var(--err, #b42318); }
@media (max-width: 720px) {
  .storep-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .storep-actions .btnl,
  .storep-actions .storep-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ============================================================================
   SETTINGS · STORAGE
   ============================================================================
   This panel had no styling at all, which is why it looked unfinished. It now
   leads with a usage ring and four labelled figures, followed by the quota bar.
   ============================================================================ */
.set-storage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.sts-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
}
/* Conic-gradient ring driven by --pct (0..100). */
.sts-hero-ring {
  --pct: 0;
  position: relative;
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--accent) calc(var(--pct) * 1%),
    var(--chip) calc(var(--pct) * 1%)
  );
}
.sts-hero-ring::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--bg-2);
}
.sts-hero-ring span {
  position: relative;
  z-index: 1;
  font-size: 0.86em;
  font-weight: 800;
  color: var(--fg);
}
.sts-hero-body {
  min-width: 0;
}
.sts-hero-title {
  font-size: 0.95em;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 3px;
}
.sts-hero-note {
  font-size: 0.76em;
  color: var(--muted);
  line-height: 1.45;
}
/* Four clear figures instead of one run-on sentence. */
.sts-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}
.sts-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
}
.sts-k {
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
.sts-v {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.sts-bar {
  height: 8px;
  border-radius: 5px;
  background: var(--chip);
  overflow: hidden;
}
.sts-bar span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--ok), var(--accent));
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sts-note {
  font-size: 0.74em;
  color: var(--faint);
  line-height: 1.45;
}
.sts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================================
   KLIPY GIF PICKER  (single source of truth)
   ============================================================================
   Written from scratch because the previous version collided with an older
   `.chat-gifs img` rule: images were given width:100% AND height:100% inside a
   square button, so every tile overflowed and they piled on top of each other.

   Layout contract:
     .gifp            fixed-height card, column flex, never grows
     .chat-gifs       the ONLY scrollable region, a strict square grid
     .gifp-item       square tile, overflow hidden - nothing can escape it
   ============================================================================ */
.gifp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(520px, 94vw);
  height: min(78vh, 620px);
  padding: 14px 14px 0;
  overflow: hidden;
  box-sizing: border-box;
}
.gifp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}
.gifp-title {
  font-size: 0.95em;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--fg);
}
.chat-gif-search {
  display: flex;
  gap: 8px;
  flex: none;
}
.chat-gif-search input {
  flex: 1;
  min-width: 0;
}
.chat-gif-cats {
  display: flex;
  gap: 6px;
  flex: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-gif-cats:empty {
  display: none;
}
.chat-gif-cats::-webkit-scrollbar {
  display: none;
}
.gifp-cat {
  flex: none;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font: inherit;
  font-size: 0.72em;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.14s,
    border-color 0.14s;
}
.gifp-cat:hover,
.gifp-cat.on {
  color: var(--accent);
  border-color: var(--accent);
}
/* --- the scrollable grid ------------------------------------------------- */
.chat-gifs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  /* Fixed-width columns: a column can never be squeezed by a wide child. */
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  grid-auto-rows: min-content;
  gap: 8px;
  align-content: start;
  padding-bottom: 8px;
}
/* --- one tile ------------------------------------------------------------ */
.gifp-item {
  position: relative;
  display: block;
  width: 100%;
  /* Square, sized by the COLUMN width - not by the image inside it. */
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--chip);
  cursor: pointer;
  transition:
    transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.14s ease;
}
.gifp-item:hover {
  transform: scale(1.03);
  border-color: var(--accent);
  z-index: 1;
}
/* The image FILLS its tile and can never define the tile's size. */
.gifp-item > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
}
/* While an image is still arriving the tile shows a quiet shimmer instead of a
   flat empty box, so the grid never looks half-rendered. */
.gifp-item {
  background-image: linear-gradient(
    100deg,
    var(--chip) 30%,
    color-mix(in srgb, var(--fg) 7%, var(--chip)) 50%,
    var(--chip) 70%
  );
  background-size: 220% 100%;
  animation: gifp-shimmer 1.4s linear infinite;
}
.gifp-item:has(img[src]) {
  animation: none;
  background-image: none;
}
@keyframes gifp-shimmer {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -30% 0;
  }
}
/* Footer keeps KLIPY's required attribution inside the card. */
.gifp-foot {
  flex: none;
  padding: 9px 0 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.gifp-powered {
  font-size: 0.7em;
  color: var(--faint);
  letter-spacing: 0.02em;
}
.gifp-powered b {
  color: var(--fg);
  font-weight: 800;
}
@media (max-width: 720px) {
  .gifp {
    width: 96vw;
    height: min(72vh, 560px);
    padding: 12px 12px 0;
  }
  .chat-gifs {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 6px;
  }
}

/* ============================================================================
   CHAT HEADER, action buttons fixed
   ============================================================================
   Symptoms: storage / mute / archive / block rendered as one fused blob, and
   the conversation name was ellipsised to "hcmv9ink…" despite free space.

   Causes:
     * `gap: 2px` and no explicit button size, so the 28px tiles touched;
     * the row was given `max-width: 46%` + `overflow-x: auto`, which CLIPPED the
       buttons into a scroll strip instead of letting them size naturally;
     * the name was inside a flex row where the (over-wide) action group won the
       space, so the title shrank even though it did not need to.
   ============================================================================ */
.chat-head {
  gap: 10px;
  overflow: hidden;
}
/* The title takes the free space and ellipsises only when it must. */
.chat-head-name {
  flex: 1 1 auto;
  min-width: 0;
}
.chat-head .chat-av,
.chat-head-dots,
.chat-secbadge-row,
.chat-council-slot {
  flex: 0 0 auto;
}
/* Circular icon buttons of a consistent, tappable size with real separation. */
.chat-head-acts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.chat-head-acts .chat-icbtn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition:
    color 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease;
}
.chat-head-acts .chat-icbtn:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--chip);
}
.chat-head-acts .chat-icbtn.on {
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 720px) {
  /* Never clip the actions - shrink the whole row instead. */
  .chat-head-acts {
    max-width: none;
    overflow: visible;
    gap: 5px;
  }
  .chat-head-acts .chat-icbtn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 13px;
  }
  .chat-head {
    gap: 8px;
  }
  /* On a phone the status chip collapses to its icon, so keep it tight. */
  .chat-head .chat-secbadge {
    padding: 2px 6px;
  }
}

/* ---------------------------------------------------------------------------
   Header space priority on a phone:  name  >  status chip  >  actions  >  dots
   The name only needed ~10px more than it was given; the chip was holding a
   fixed 44px it did not need. Let the chip give way first.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .chat-head .chat-secbadge-row {
    flex: 0 1 auto;
    min-width: 0;
  }
  .chat-head .chat-secbadge {
    max-width: 100%;
    overflow: hidden;
  }
  /* The name is the one thing that must stay readable. */
  .chat-head-name {
    flex: 1 1 auto;
    min-width: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Phones: keep only the two primary actions visible and fold the rest into a
   "⋯" menu. Four circles plus the status chip plus the window dots left the
   conversation name with ~10px less than it needed, so it always ellipsised.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Secondary actions collapse into the "⋯" button. */
  .chat-head-acts .chat-icbtn--secondary {
    display: none;
  }
}

/* The "⋯" button only appears on a phone, and only when there is something to
   reveal. When tapped it expands the row so the hidden actions slide into view. */
.chat-head-acts .chat-icbtn--more {
  display: none;
}
@media (max-width: 720px) {
  .chat-head-acts .chat-icbtn--more {
    display: inline-grid;
  }
  /* Collapsed: the secondary buttons are hidden. */
  .chat-head-acts:not(.expanded) .chat-icbtn--secondary {
    display: none;
  }
  /* Expanded: show them and let the row scroll if it must. */
  .chat-head-acts.expanded {
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
  }
  .chat-head-acts.expanded::-webkit-scrollbar {
    display: none;
  }
  .chat-head-acts.expanded .chat-icbtn--more {
    transform: rotate(180deg);
  }
}

/* ============================================================================
   TERMS + AUTH PANEL
   ============================================================================
   The old terms were a single run-on paragraph that also printed literal
   `" + "` separators, so nobody could read them. They are now numbered cards
   that can be scanned in a few seconds, and the surrounding auth card gets a
   proper entrance animation instead of appearing all at once.
   ============================================================================ */
.chat-terms-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
}
.terms-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.terms-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
}
.terms-head b {
  display: block;
  font-size: 0.88em;
  color: var(--fg);
  font-weight: 800;
}
.terms-sub {
  display: block;
  font-size: 0.7em;
  color: var(--faint);
  margin-top: 1px;
}
/* The list scrolls so the card never grows taller than the screen. */
.terms-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.terms-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.terms-num {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--chip);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.62em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.terms-body {
  min-width: 0;
}
.terms-t {
  display: block;
  font-size: 0.76em;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 2px;
}
.terms-d {
  margin: 0;
  font-size: 0.72em;
  line-height: 1.5;
  color: var(--muted);
}
.chat-consent {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78em;
  color: var(--fg);
  cursor: pointer;
  padding-top: 2px;
}
.chat-consent input {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ============================================================================
   CHAT GATE, clear hierarchy + entrance animation
   ============================================================================
   Before: a pile of floating bubbles, a second brand row and a headline all
   fighting for attention. Now: one mark, one headline, one promise, one action.
   Animated in sequence so the eye is led down the page instead of everything
   appearing at once.
   ============================================================================ */
.chat-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px 24px;
  min-height: 100%;
  box-sizing: border-box;
}
/* --- the mark, with two quiet accents instead of a bubble pile --- */
.cg-stage {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  animation: cg-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cg-mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  color: var(--bg);
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow:
    0 10px 26px -8px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
  animation: cg-float 4.5s ease-in-out infinite;
}
.cg-mark svg {
  width: 34px;
  height: 34px;
}
.cg-tag {
  position: absolute;
  font-size: 0.62em;
  font-weight: 700;
  color: var(--muted);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  opacity: 0;
  animation: cg-tag-in 0.5s ease forwards;
}
.cg-tag.t1 {
  left: -34px;
  top: 10px;
  animation-delay: 0.5s;
}
.cg-tag.t2 {
  right: -30px;
  bottom: 12px;
  animation-delay: 0.8s;
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.cg-typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
  animation: cg-blink 1.2s ease-in-out infinite;
}
.cg-typing i:nth-child(2) {
  animation-delay: 0.2s;
}
.cg-typing i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes cg-blink {
  0%,
  60%,
  100% {
    opacity: 0.28;
  }
  30% {
    opacity: 1;
  }
}
@keyframes cg-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes cg-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cg-tag-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* --- copy --- */
.cg-title {
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  animation: cg-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.cg-sub {
  font-size: 0.82em;
  line-height: 1.55;
  color: var(--muted);
  max-width: 30ch;
  margin: 0;
  animation: cg-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
/* Three promises, so the value is legible before you commit. */
.cg-points {
  list-style: none;
  margin: 6px 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  max-width: 260px;
}
.cg-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76em;
  color: var(--muted);
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  animation: cg-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cg-points li:nth-child(1) {
  animation-delay: 0.35s;
}
.cg-points li:nth-child(2) {
  animation-delay: 0.43s;
}
.cg-points li:nth-child(3) {
  animation-delay: 0.51s;
}
.cg-points li span {
  font-size: 1.05em;
  flex: none;
}
.cg-cta {
  width: 100%;
  max-width: 260px;
  animation: cg-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
  position: relative;
}
/* A soft pulse so the primary action is unmistakably the thing to press. */
.cg-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: cg-pulse 2.6s ease-out 1.4s infinite;
  pointer-events: none;
}
@keyframes cg-pulse {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}
.cg-hint {
  font-size: 0.7em;
  color: var(--faint);
  animation: cg-in 0.5s ease 0.75s both;
}
@media (prefers-reduced-motion: reduce) {
  .cg-mark,
  .cg-cta::after,
  .cg-typing i {
    animation: none;
  }
}

/* ============================================================================
   PAPER, dark ink everywhere (no white text)
   ============================================================================
   A lot of chrome was written with a hardcoded `color: #fff` because it always
   sat on a dark surface. Paper is a light theme, so all of that turned into
   white-on-cream. This layer forces every text surface to the theme ink while
   keeping genuinely dark components (terminal canvas, boot screen) white.
   ============================================================================ */
[data-theme="paper"] {
  /* Ink that must never be white. */
  --paper-ink: var(--fg);
  --paper-soft: var(--muted);
}

/* Menubar + its controls */
[data-theme="paper"] #menubar,
[data-theme="paper"] .mb-logo,
[data-theme="paper"] .mb-word,
[data-theme="paper"] .mb-app,
[data-theme="paper"] .mb-clock,
[data-theme="paper"] .mb-icon,
[data-theme="paper"] .mb-avatar,
[data-theme="paper"] .clock-date,
[data-theme="paper"] .clock-time {
  color: var(--fg);
}
[data-theme="paper"] .mb-logo:hover {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}
[data-theme="paper"] .mb-badge {
  color: #fff; /* badge sits on an accent pill */
}

/* Desktop icons + dock */
[data-theme="paper"] .desk-ic,
[data-theme="paper"] .desk-ic .gl,
[data-theme="paper"] .dock-it,
[data-theme="paper"] .gi-mini {
  color: var(--fg);
}
[data-theme="paper"] .desk-ic.on .gl,
[data-theme="paper"] .desk-ic:hover .gl {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Launcher, folders, context menus */
[data-theme="paper"] .launch-head,
[data-theme="paper"] .start-app,
[data-theme="paper"] .folder-app,
[data-theme="paper"] .folder-title,
[data-theme="paper"] .ctx-item,
[data-theme="paper"] .sys-head,
[data-theme="paper"] .launch-app {
  color: var(--fg);
}
[data-theme="paper"] .ctx-item:hover,
[data-theme="paper"] .start-app:hover,
[data-theme="paper"] .folder-app:hover {
  background: var(--chip);
  color: var(--fg);
}
/* Keep the folder sheet readable too. */
[data-theme="paper"] .folder-sheet,
[data-theme="paper"] .launch-panel,
[data-theme="paper"] #mb-drop,
[data-theme="paper"] #clock-drop,
[data-theme="paper"] #wifi-drop,
[data-theme="paper"] #bt-drop,
[data-theme="paper"] #notif-drop {
  color: var(--fg);
}

/* Boot / login splash text */
[data-theme="paper"] .login-logo,
[data-theme="paper"] .login-sub,
[data-theme="paper"] .login-hint {
  color: var(--fg);
}
[data-theme="paper"] .login-sub,
[data-theme="paper"] .login-hint {
  color: var(--muted);
}

/* Dropdown / panel surfaces must become light too, not stay dark slabs. */
[data-theme="paper"] #mb-drop,
[data-theme="paper"] #clock-drop,
[data-theme="paper"] #wifi-drop,
[data-theme="paper"] #bt-drop,
[data-theme="paper"] #notif-drop,
[data-theme="paper"] .folder-sheet {
  background: color-mix(in srgb, var(--bg-2) 97%, transparent);
  border-color: var(--line);
  box-shadow: 0 18px 44px -14px rgba(28, 26, 21, 0.28);
}
[data-theme="paper"] .ctx-menu,
[data-theme="paper"] #ctx-menu {
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border-color: var(--line);
  box-shadow: 0 16px 36px -12px rgba(28, 26, 21, 0.3);
}

/* Toast / dialogs */
[data-theme="paper"] .toast {
  background: color-mix(in srgb, var(--bg-3) 97%, transparent);
  color: var(--fg);
  border-color: var(--line);
}

/* Games: board chrome, HUD labels, tutorial cards */
[data-theme="paper"] .px,
[data-theme="paper"] .px-cell,
[data-theme="paper"] .snake-wrap,
[data-theme="paper"] .snake-ui,
[data-theme="paper"] .px-chip,
[data-theme="paper"] .px-tut-card,
[data-theme="paper"] .px-tut-card h3,
[data-theme="paper"] .px-tut-card p {
  color: var(--fg);
}
[data-theme="paper"] .px-tut-card h3,
[data-theme="paper"] .px-tut-card p {
  color: var(--fg);
}
[data-theme="paper"] .px-tut-card p {
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Avatars always own a background.
   White initials are only legible if the circle actually has a fill, and a few
   call sites rendered `.chat-av` without an inline gradient. Give it a sensible
   default so the initials can never end up white-on-light.
   --------------------------------------------------------------------------- */
.chat-av {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
/* Selected avatar pick: a ring, not a colour change. */
.chat-av-pick.on {
  box-shadow:
    0 0 0 2px var(--bg-2),
    0 0 0 4px var(--accent);
}


/* ============================================================================
   TERMINAL, inherits the theme, but stays legible on light themes
   ============================================================================
   The terminal shares the window chrome (including the translucency driven by
   --win-bg), so the fix is NOT to repaint the window. It is to re-point the few
   *content* colour variables at terminal-appropriate values inside the terminal
   only, leaving the background, blur and translucency completely alone.

   Previously an over-eager override forced `background: #0d0c0a !important` and
   `#app #out * { color: ... }`, which destroyed the translucency and flattened
   every syntax colour. This does neither.
   ============================================================================ */
.app.win {
  /* Content palette only. --win-bg, --line and the blur are untouched. */
  --term-accent: #ff7a45;
  --term-accent-2: #ffb347;
  --term-ok: #8fd694;
  --term-warn: #f2c14e;
  --term-err: #ff6b6b;
  --term-info: #7cc4ff;
  --term-vio: #c79bff;
  /* The terminal's own text colour, independent of the page ink. */
  --term-ink: var(--fg);
  /* Dim text inside the terminal, readable, not invisible. --faint was too
     washed out for log output, which made the terminal look broken. */
  --term-faint: #b9a79c;
}
/* On a LIGHT theme the window is pale, so the terminal uses the deep inks. */
[data-mode="light"] .app.win {
  --term-accent: #c2410c;
  --term-accent-2: #a16207;
  --term-ok: #2b7a37;
  --term-warn: #8a5200;
  --term-err: #b91c1c;
  --term-info: #1a5fa8;
  --term-vio: #6d28d9;
  --term-ink: var(--fg);
  --term-faint: #6b5a4d;
}
/* Route the existing colour classes through the terminal palette, but ONLY
   inside the terminal window, and without touching layout or the background. */
.app.win .k {
  color: var(--term-accent);
}
.app.win .s {
  color: var(--term-accent-2);
}
.app.win .n,
.app.win .vio {
  color: var(--term-vio);
}
.app.win .b,
.app.win .info {
  color: var(--term-info);
}
.app.win .ok {
  color: var(--term-ok);
}
.app.win .warn {
  color: var(--term-warn);
}
.app.win .err {
  color: var(--term-err);
}
/* The prompt segments keep their own tints but must stay readable. */
.app.win .ps1 {
  color: var(--term-ink);
}
.app.win .faint {
  color: var(--term-faint, var(--faint));
}
.app.win .ps1 .u {
  color: var(--term-ok);
}
.app.win .ps1 .h {
  color: var(--term-info);
}
.app.win .ps1 .p {
  color: var(--term-vio);
}
.app.win .ps1 .g {
  color: var(--term-accent);
}
.app.win .ps1 .s {
  color: var(--term-accent-2);
}
.app.win a {
  color: var(--term-info);
}

/* ============================================================================
   LOGIN / REGISTER / PRE-APP ANIMATIONS
   ============================================================================
   The login screen used to fade in as one flat card. It now performs a short
   choreography, mark, avatar, name, action, hint, so the eye is led to the
   button, and the "enter" moment gets its own exit transition instead of the
   whole overlay just disappearing.
   ============================================================================ */
#login {
  /* Neutral, deep scrim - NOT purple. It layers under the wallpaper so the lock
     screen always matches the desktop; when a wallpaper is present the image
     shows through, otherwise this is a calm near-black. */
  background:
    radial-gradient(circle at 50% 32%, rgba(20, 18, 16, 0.72) 0%, rgba(8, 8, 7, 0.94) 72%),
    var(--login-wall, none) center / cover no-repeat,
    #0a0a09;
}
#login .login-card {
  animation: login-card-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
  overflow: hidden;
}
/* A soft light sweep across the card while it settles. */
#login .login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: login-sheen 1.5s ease 0.35s both;
  pointer-events: none;
}
#login .login-logo,
#login .login-sub,
#login .login-avatar,
#login .login-name,
#login .login-btn,
#login .login-hint {
  opacity: 0;
  animation: login-item-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#login .login-logo { animation-delay: 0.05s; }
#login .login-sub { animation-delay: 0.13s; }
#login .login-avatar {
  animation-delay: 0.2s;
  animation-name: login-avatar-in;
}
#login .login-name { animation-delay: 0.3s; }
#login .login-btn { animation-delay: 0.38s; }
#login .login-hint { animation-delay: 0.5s; }

@keyframes login-card-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.94); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes login-item-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes login-avatar-in {
  0% { opacity: 0; transform: scale(0.5) rotate(-14deg); }
  60% { opacity: 1; transform: scale(1.1) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes login-sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
/* While logging in the card leaves. The generic fallback is overridden per
   variant further down (see "LOGIN EXIT PER VARIANT"), so pressing login looks
   different depending on the animation the user picked. */
#login.leaving .login-card {
  animation: login-card-leave 0.5s cubic-bezier(0.5, 0, 0.75, 0) both;
}
#login.leaving[data-variant] .login-card { animation-name: none; }
#login.leaving .login-avatar {
  animation: login-avatar-out 0.5s ease both;
}
@keyframes login-card-leave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-34px) scale(1.06); filter: blur(8px); }
}
@keyframes login-avatar-out {
  from { transform: scale(1); }
  50% { transform: scale(1.14); box-shadow: 0 0 0 8px var(--sel); }
  to { transform: scale(0.4); opacity: 0; }
}

/* Register / auth card: staggered field entrance + a gentle shake on error. */
.chat-auth-card {
  animation: auth-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chat-auth-card .chat-logo,
.chat-auth-card .chat-auth-sub,
.chat-auth-card .chat-field,
.chat-auth-card .chat-auth-err,
.chat-auth-card .chat-auth-actions,
.chat-auth-card .chat-auth-switch,
.chat-auth-card .chat-terms-wrap,
.chat-auth-card .chat-av-row {
  animation: auth-field-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chat-auth-card .chat-logo { animation-delay: 0.04s; }
.chat-auth-card .chat-auth-sub { animation-delay: 0.1s; }
.chat-auth-card .chat-av-row { animation-delay: 0.16s; }
.chat-auth-card .chat-field:nth-of-type(1) { animation-delay: 0.2s; }
.chat-auth-card .chat-field:nth-of-type(2) { animation-delay: 0.26s; }
.chat-auth-card .chat-field:nth-of-type(3) { animation-delay: 0.32s; }
.chat-auth-card .chat-terms-wrap { animation-delay: 0.38s; }
.chat-auth-card .chat-auth-actions { animation-delay: 0.44s; }
.chat-auth-card .chat-auth-switch { animation-delay: 0.5s; }
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auth-field-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.chat-auth-err.on {
  animation: auth-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes auth-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* Pre-app: the desktop "zooms in" from the login rather than snapping in. */
#desktop.app-enter {
  animation: desktop-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes desktop-enter {
  from { opacity: 0; transform: scale(1.06); filter: blur(10px) brightness(1.3); }
  to { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}
#menubar.app-enter,
#dock.app-enter {
  animation: bar-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
/* The dock is centred with translateX(-50%), so the entrance animation MUST
   carry that same translate or it would snap the bar off-centre while (and
   after) it plays. That was the "navbar kaymis" bug: the shift-left was lost. */
@keyframes bar-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* The menubar is not centred, so it animates on its own without the X shift. */
#menubar.app-enter { animation-name: bar-enter-mb; }
@keyframes bar-enter-mb {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   REGISTER · "ASSEMBLY" CHOREOGRAPHY
   ============================================================================
   Signing IN is a return visit: quick, familiar, the card simply rises.
   Creating an account is a first arrival, so it gets its own, bigger idea -
   the card *assembles*: a ring draws itself around the avatar, the fields drop
   in one after another, and a completion sweep fires across the submit button.
   Two distinct feelings, so the two screens are never mistaken for each other.
   ============================================================================ */
.auth-register .chat-auth-card {
  animation: reg-card-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes reg-card-in {
  0% { opacity: 0; transform: translateY(30px) scale(0.96) rotateX(8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}
/* A ring that draws itself around the avatar mark. */
.chat-auth-card .chat-logo { position: relative; }
.auth-register .chat-auth-card .chat-logo::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: color-mix(in srgb, var(--accent) 50%, transparent);
  animation: reg-ring 0.9s cubic-bezier(0.5, 0, 0.2, 1) 0.15s both;
  pointer-events: none;
}
@keyframes reg-ring {
  from { opacity: 0; transform: rotate(-90deg) scale(0.7); }
  30% { opacity: 1; }
  to { opacity: 0; transform: rotate(220deg) scale(1.05); }
}
/* Fields drop in from above, in sequence, with a touch of overshoot. */
.auth-register .chat-auth-card .chat-field {
  animation: reg-field-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.auth-register .chat-auth-card .chat-field:nth-of-type(1) { animation-delay: 0.18s; }
.auth-register .chat-auth-card .chat-field:nth-of-type(2) { animation-delay: 0.25s; }
.auth-register .chat-auth-card .chat-field:nth-of-type(3) { animation-delay: 0.32s; }
@keyframes reg-field-drop {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* The submit button gets a light sweep when the card has finished assembling. */
.auth-register .chat-auth-card .chat-auth-actions {
  position: relative;
  overflow: hidden;
  animation-delay: 0.42s;
}
.auth-register .chat-auth-card .chat-auth-actions::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: reg-sweep 1s ease 0.7s both;
  pointer-events: none;
}
@keyframes reg-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
/* The switch link ("already have an account?") breathes once, drawing the eye. */
.auth-register .chat-auth-card .chat-auth-switch {
  animation: reg-switch-in 0.5s ease 0.55s both;
}
@keyframes reg-switch-in {
  0% { opacity: 0; transform: translateY(8px); }
  60% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Leaving the register screen: the card collapses toward the avatar. */
#login.register-leaving .chat-auth-card {
  animation: reg-card-leave 0.5s cubic-bezier(0.5, 0, 0.75, 0) both;
}
@keyframes reg-card-leave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-10px) scale(0.9); filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-register .chat-auth-card,
  .auth-register .chat-auth-card .chat-field,
  .auth-register .chat-auth-card .chat-logo::before,
  .auth-register .chat-auth-card .chat-auth-actions::after,
  .auth-register .chat-auth-card .chat-auth-switch {
    animation: none !important;
  }
}

/* ============================================================================
   SOUND SETTINGS PANEL
   ============================================================================
   Rebuilt after feedback: the old panel was a wall of fifteen "preview" chips
   and a paragraph of marketing text. It is now three calm blocks, master +
   level, sound pack, categories, with the selected pack clearly marked and a
   single "play selected pack" button.
   ============================================================================ */
.set-sound { display: flex; flex-direction: column; gap: 14px; }
.snd-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.snd-hero:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.snd-hero.on { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); }
.snd-hero-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.snd-hero-tx b { color: var(--fg); font-size: 0.95em; }
.snd-hero-tx i { color: var(--muted); font-style: normal; font-size: 0.72em; margin-top: 1px; }
.snd-sw {
  width: 44px; height: 25px; flex: none;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.2s;
}
.snd-hero.on .snd-sw { background: color-mix(in srgb, var(--accent) 75%, var(--bg)); }
.snd-sw > span {
  position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--fg);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.snd-hero.on .snd-sw > span { transform: translateX(19px); background: #fff; }

.snd-block {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.snd-block-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 0.72em; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--faint);
}
.snd-block-head b { color: var(--accent); font-size: 1.1em; font-variant-numeric: tabular-nums; }
.snd-range { width: 100%; accent-color: var(--accent); height: 22px; }
.snd-hint { font-size: 0.68em; color: var(--muted); line-height: 1.45; }

/* Sound packs: a 2x2 grid of clearly-selected cards. */
.snd-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.snd-pack {
  position: relative;
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); color: var(--fg); font: inherit; cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}
.snd-pack:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.snd-pack.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
}
.snd-pack b { font-size: 0.84em; text-transform: capitalize; }
.snd-pack i { font-style: normal; font-size: 0.68em; color: var(--muted); }
.snd-pack-tick {
  position: absolute; top: 8px; right: 10px;
  font-size: 0.8em; font-weight: 800; color: var(--accent);
}
.snd-test {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 11px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  color: var(--fg); font: inherit; font-size: 0.8em; font-weight: 700;
}
.snd-test:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg-2)); }
.snd-test:active { transform: scale(0.98); }

/* Categories: three tidy toggle cards. */
.snd-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.snd-cat {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 10px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--muted); font: inherit;
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.snd-cat b { font-size: 0.78em; }
.snd-cat i { font-style: normal; font-size: 0.62em; color: var(--faint); text-align: center; }
.snd-cat.on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  color: var(--fg);
}
.snd-cat.on i { color: var(--muted); }

/* ---- Per-sound mixer (collapsible) ---- */
.snd-mixer {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  overflow: hidden;
}
.snd-mixer > summary {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.snd-mixer > summary::-webkit-details-marker { display: none; }
.snd-mixer > summary::after {
  content: "▾";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  transition: transform 0.2s;
}
.snd-mixer[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.mix-sum-t { font-size: 0.82em; font-weight: 700; color: var(--fg); }
.mix-sum-s { font-size: 0.68em; color: var(--muted); }
.mix-body {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 12px 14px;
  border-top: 1px solid var(--line);
  animation: chat-in 0.24s ease both;
}
.mix-head {
  display: grid;
  grid-template-columns: 26px 1fr 96px 34px 78px 26px;
  gap: 6px;
  font-size: 0.58em; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--faint);
  padding: 8px 2px 4px;
}
.mix-head span:nth-child(1) { grid-column: 1 / 3; }
.mix-head span:nth-child(2) { grid-column: 3; text-align: center; }
.mix-head span:nth-child(3) { grid-column: 4 / 7; text-align: right; padding-right: 4px; }
.mix-cat {
  font-size: 0.6em; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--accent);
  margin: 8px 2px 3px;
}
.mix-row {
  display: grid;
  grid-template-columns: 26px 1fr 96px 34px 78px 26px;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-radius: 8px;
  transition: opacity 0.15s, background 0.15s;
}
.mix-row:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.mix-row.off { opacity: 0.5; }
.mix-eye {
  width: 26px; height: 24px; border: none; background: none;
  cursor: pointer; font-size: 0.85em; border-radius: 6px;
  display: grid; place-items: center;
}
.mix-eye:hover { background: var(--chip); }
.mix-name { font-size: 0.76em; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-range { width: 100%; accent-color: var(--accent); height: 18px; }
.mix-val {
  font-size: 0.64em; color: var(--faint); text-align: center;
  font-variant-numeric: tabular-nums;
}
.mix-pack {
  font: inherit; font-size: 0.68em;
  padding: 3px 4px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg);
  cursor: pointer; width: 100%;
}
.mix-play {
  width: 26px; height: 24px; border: none; background: none;
  cursor: pointer; color: var(--accent); font-size: 0.72em;
  border-radius: 6px; display: grid; place-items: center;
}
.mix-play:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.mix-reset { margin-top: 12px; align-self: flex-start; }


/* ============================================================================
   CHANNEL WRITE-LOCK + MEDIA PERMISSIONS
   ============================================================================ */
/* Read-only chip under a locked channel's messages, compact, not a paragraph. */
.chat-ro-bar {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  margin: 0 12px 8px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--fg);
  font-size: 0.72em;
  font-weight: 600;
  animation: chat-in 0.3s ease both;
}
.chat-ro-ic { flex: none; font-size: 1em; }
/* Disabled composer: visually inert, never invisible. */
.chat-compose.read-only { opacity: 0.55; }
.chat-compose.read-only input,
.chat-compose.read-only button { cursor: not-allowed; }
/* A disabled attach button still shows, dimmed, so the reason can be explained. */
.chat-icbtn.disabled,
.chat-icbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-icbtn.disabled:hover,
.chat-icbtn:disabled:hover { background: none; border-color: var(--line); }
.chat-lock-mark { margin-left: 5px; font-size: 0.85em; opacity: 0.85; }
.chat-icbtn.on { border-color: var(--accent); color: var(--accent); }

/* Media permissions panel */
.mediap { display: flex; flex-direction: column; gap: 12px; }
.mediap-lead { font-size: 0.76em; color: var(--muted); line-height: 1.55; }
.mediap-lead b { color: var(--fg); }
.mediap-master {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-2); color: var(--fg); font: inherit; cursor: pointer;
  transition: border-color 0.18s;
}
.mediap-master.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.mediap-sw {
  width: 42px; height: 24px; flex: none; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--line); position: relative;
  transition: background 0.2s;
}
.mediap-master.on .mediap-sw { background: color-mix(in srgb, var(--accent) 70%, var(--bg)); }
.mediap-sw > span {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--fg);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.mediap-master.on .mediap-sw > span { transform: translateX(18px); background: #fff; }
.mediap-master-tx { display: flex; flex-direction: column; }
.mediap-master-tx b { font-size: 0.84em; }
.mediap-master-tx i { font-style: normal; font-size: 0.72em; color: var(--muted); }
.mediap-sub {
  font-size: 0.66em; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--faint);
}
.mediap-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
/* Search row with the magnifier pinned inside the field. */
.mediap-search { position: relative; }
.mediap-search .chat-ov-q { width: 100%; padding-right: 34px; }
.mediap-search-ic {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 0.82em; opacity: 0.65; pointer-events: none;
}
.mediap-count {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 2px;
  border-radius: 999px; background: var(--accent); color: var(--bg);
  font-size: 0.9em; text-align: center;
}

/* Blocked-usernames panel */
.namep { display: flex; flex-direction: column; gap: 12px; }
.nb-add { display: flex; gap: 8px; }
.nb-add .chat-ov-q { flex: 1; }
.nb-add .btnl { flex: none; }
.nb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--err, #b42318) 40%, var(--line));
  background: color-mix(in srgb, var(--err, #b42318) 10%, var(--bg-2));
  color: var(--fg); font: inherit; font-size: 0.74em;
}
.nb-chip span { color: var(--muted); font-size: 0.9em; }
.nb-chip:hover span { color: var(--err, #b42318); }
.nb-note { font-size: 0.68em; color: var(--faint); line-height: 1.5; }
.mediap-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg-2); color: var(--fg); font: inherit; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mediap-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.mediap-row.on { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.mediap-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.82em; }
.mediap-name .faint { font-size: 0.85em; }
.mediap-check {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  font-size: 0.72em; color: var(--muted);
}
.mediap-row.on .mediap-check { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ============================================================================
   HOVER BALLOONS, explain p2p protection & daily wipe on hover
   ============================================================================ */
.cem-tip {
  position: fixed;
  z-index: 900;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-3) 97%, transparent);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 0.74em;
  line-height: 1.5;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.16s, transform 0.16s;
}
.cem-tip.on { opacity: 1; transform: translateY(0) scale(1); }
.cem-tip b { color: var(--fg); }
.cem-tip .tip-t { display: block; font-weight: 800; margin-bottom: 3px; }
.cem-tip .tip-d { color: var(--muted); }
.cem-tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 10px; height: 10px;
  margin-left: -5px;
  background: inherit;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.cem-tip.below::after {
  bottom: auto; top: -6px;
  border: none;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
/* The secure/retention badge is interactive now: it opens a balloon. */
.chat-secbadge { cursor: help; }
.chat-tip-target { cursor: help; }

/* ============================================================================
   PAPER THEME, THE INK LAYER  (all text dark, white text forbidden)
   ============================================================================
   Paper is a light theme, so a dozen components that were written with a
   hardcoded `color: #fff` (because they only ever sat on a dark surface) turned
   into white-on-cream. This block is the final word: every text surface inside
   `[data-theme="paper"]` resolves to the theme ink, and the few places that
   genuinely need light text (coloured accent pills) are pinned to a value that
   is dark enough to read on their own background.
   ============================================================================ */
[data-theme="paper"] {
  color: var(--fg);
}

/* Menubar + every dropdown panel it opens (this is the wifi/bluetooth report). */
[data-theme="paper"] #menubar,
[data-theme="paper"] #menubar *,
[data-theme="paper"] #wifi-drop,
[data-theme="paper"] #wifi-drop *,
[data-theme="paper"] #bt-drop,
[data-theme="paper"] #bt-drop *,
[data-theme="paper"] #clock-drop,
[data-theme="paper"] #clock-drop *,
[data-theme="paper"] #notif-drop,
[data-theme="paper"] #notif-drop *,
[data-theme="paper"] #mb-drop,
[data-theme="paper"] #mb-drop * {
  color: var(--fg);
}
/* Muted tiers must stay muted, not forced to full ink. */
[data-theme="paper"] .faint,
[data-theme="paper"] .sys-item .faint,
[data-theme="paper"] .notif-item .faint,
[data-theme="paper"] .mb-av-info .faint,
[data-theme="paper"] .mb-av-head-info .faint {
  color: var(--faint);
}
[data-theme="paper"] .muted {
  color: var(--muted);
}
/* Hover/active states paint an accent background: the label flips to the
   background colour so it stays legible ON the accent, not white on cream. */
[data-theme="paper"] .sys-item:hover,
[data-theme="paper"] .mb-item:hover,
[data-theme="paper"] .ctx-item:hover,
[data-theme="paper"] .start-app:hover,
[data-theme="paper"] .folder-app:hover {
  color: var(--bg-2);
}
[data-theme="paper"] .sys-item:hover .faint,
[data-theme="paper"] .mb-item:hover .faint {
  color: color-mix(in srgb, var(--bg-2) 70%, transparent);
}
[data-theme="paper"] .sys-item .sig,
[data-theme="paper"] .sys-head .ok,
[data-theme="paper"] .ok {
  color: var(--ok);
}
[data-theme="paper"] .sys-item:hover .sig,
[data-theme="paper"] .sys-item:hover .ok {
  color: var(--bg-2);
}

/* Windows, launcher, context menus, folders, dialogs, text is ink. */
[data-theme="paper"] .win,
[data-theme="paper"] .win *,
[data-theme="paper"] .launch-panel,
[data-theme="paper"] .launch-panel *,
[data-theme="paper"] #launcher,
[data-theme="paper"] #launcher *,
[data-theme="paper"] #ctx,
[data-theme="paper"] #ctx *,
[data-theme="paper"] .folder-sheet,
[data-theme="paper"] .folder-sheet *,
[data-theme="paper"] #power-off,
[data-theme="paper"] #recovery,
[data-theme="paper"] #boot-manager,
[data-theme="paper"] #bios-menu {
  color: var(--fg);
}
/* Keep the terminal's own palette (it defines --term-* and must stay legible).
   The blanket "#out *" rule below sets one ink for everything, which used to
   flatten the syntax colours; every class the terminal actually emits is now
   re-declared at matching specificity so the palette survives on paper. */
[data-theme="paper"] .app.win #out,
[data-theme="paper"] .app.win #out * {
  color: var(--term-ink);
}
[data-theme="paper"] .app.win #out .k { color: var(--term-accent); }
[data-theme="paper"] .app.win #out .s { color: var(--term-accent-2); }
[data-theme="paper"] .app.win #out .n,
[data-theme="paper"] .app.win #out .vio { color: var(--term-vio); }
[data-theme="paper"] .app.win #out .b,
[data-theme="paper"] .app.win #out .info { color: var(--term-info); }
[data-theme="paper"] .app.win #out .ok { color: var(--term-ok); }
[data-theme="paper"] .app.win #out .warn { color: var(--term-warn); }
[data-theme="paper"] .app.win #out .err { color: var(--term-err); }
[data-theme="paper"] .app.win #out .faint { color: var(--term-faint, var(--faint)); }
[data-theme="paper"] .app.win #out .ps1 { color: var(--term-ink); }
[data-theme="paper"] .app.win #out .ps1 .u { color: var(--term-ok); }
[data-theme="paper"] .app.win #out .ps1 .h { color: var(--term-info); }

/* Accent pills keep their light label because their own bg is dark. */
[data-theme="paper"] .mb-badge,
[data-theme="paper"] .chat-badge,
[data-theme="paper"] .btnl--primary,
[data-theme="paper"] .login-btn,
[data-theme="paper"] .proto-pill.on,
[data-theme="paper"] .sw.on {
  color: #fff;
}
/* But a `.chat-badge` on a muted channel must not be white-on-cream. */
[data-theme="paper"] .chat-badge { color: #fff; }

/* Boot / BSOD / splash are intentionally dark surfaces, keep them light-on-dark. */
[data-theme="paper"] #boot-splash,
[data-theme="paper"] #boot-splash *,
[data-theme="paper"] #bsod,
[data-theme="paper"] #bsod *,
[data-theme="paper"] #power-off,
[data-theme="paper"] #power-off * {
  /* These screens paint their own dark background, so the ink rule above would
     otherwise make them dark-on-dark. Reset to a light ink. */
}
[data-theme="paper"] #bsod,
[data-theme="paper"] #bsod * { color: #fff; }
[data-theme="paper"] #boot-splash .boot-logo,
[data-theme="paper"] #boot-splash .boot-txt,
[data-theme="paper"] #boot-splash .boot-pct,
[data-theme="paper"] #boot-splash .bios-screen,
[data-theme="paper"] #boot-splash .bios-screen * { color: #cfe8cf; }
[data-theme="paper"] #power-off .po-msg,
[data-theme="paper"] #power-off .po-sub,
[data-theme="paper"] #power-off .boot-logo { color: #eee; }

/* Games render on dark canvases: keep their HUD light. */
[data-theme="paper"] .snake-wrap .snake-ui,
[data-theme="paper"] .snake-wrap .snake-ui * { color: var(--fg); }
[data-theme="paper"] .px .px-hud,
[data-theme="paper"] .px .px-hud * { color: var(--fg); }

/* ============================================================================
   SURPRISE PACK, command palette, focus mode, timer, reactions, drafts
   ============================================================================ */
/* 1. Command palette (⌘K) */
#cmdk {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: radial-gradient(
    circle at 50% 22%,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--bg) 58%, transparent) 42%
  );
  backdrop-filter: blur(12px) saturate(120%);
  animation: cmdk-fade 0.2s ease both;
}
#cmdk[hidden] { display: none; }
@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk-panel {
  width: min(560px, calc(100vw - 32px));
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-2) 97%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  overflow: hidden;
  animation: cmdk-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cmdk-in {
  from { opacity: 0; transform: translateY(-22px) scale(0.95); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Items slide in one after another, a short, cheap stagger. This runs ONCE,
   when the palette opens. Re-rendering on every arrow key must NOT replay it,
   or the list shimmers as you scroll (which looked awful), so the animation is
   gated behind a class the JS adds only on open and removes right after. */
#cmdk.animating .cmdk-item {
  animation: cmdk-item-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#cmdk.animating .cmdk-item:nth-child(1) { animation-delay: 0.02s; }
#cmdk.animating .cmdk-item:nth-child(2) { animation-delay: 0.04s; }
#cmdk.animating .cmdk-item:nth-child(3) { animation-delay: 0.06s; }
#cmdk.animating .cmdk-item:nth-child(4) { animation-delay: 0.08s; }
#cmdk.animating .cmdk-item:nth-child(5) { animation-delay: 0.1s; }
#cmdk.animating .cmdk-item:nth-child(6) { animation-delay: 0.12s; }
#cmdk.animating .cmdk-item:nth-child(n+7) { animation-delay: 0.14s; }
@keyframes cmdk-item-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
/* The selected row must never move, the highlight is the only feedback. */
.cmdk-item.on { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cmdk-panel, .cmdk-item, #cmdk { animation: none; }
}
.cmdk-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.cmdk-head input {
  flex: 1; border: none; background: none; outline: none;
  font: inherit; font-size: 1em; color: var(--fg);
}
.cmdk-head kbd {
  font: inherit; font-size: 0.62em; font-weight: 800;
  padding: 3px 6px; border-radius: 6px;
  background: var(--chip); border: 1px solid var(--line); color: var(--muted);
}
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 9px 11px; border: none; border-radius: 10px;
  background: none; color: var(--fg);
}
.cmdk-item.on { background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); }
.cmdk-ic { width: 20px; text-align: center; flex: none; color: var(--accent); }
.cmdk-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-hint { font-size: 0.68em; color: var(--faint); flex: none; }
.cmdk-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 0.82em; }

/* 2. Focus mode indicator in the menubar */
.mb-icon.on { color: var(--accent); }
#mb-focus.on { position: relative; }
#mb-focus.on::after {
  content: "";
  position: absolute; right: 1px; bottom: 1px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
[data-focus="on"] #mb-focus { opacity: 1; }

/* 3. Focus timer badge, lives ON the focus icon (one icon, not two). Only
   shown while a pomodoro session is running. */
#mb-focus { position: relative; }
#mb-focus.timing { color: var(--accent); }
.mb-timer {
  position: absolute;
  top: calc(100% - 2px); left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--accent) 60%, transparent);
}
[data-mode="light"] .mb-timer { color: #10161c; }
.mb-timer[hidden] { display: none; }

/* 5. Message reactions, a small badge hugging the bubble's bottom corner. */
.chat-bubble-wrap {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  max-width: 100%;
}
.chat-msg.me .chat-bubble-wrap { flex-direction: row-reverse; }
.chat-react {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  font-size: 0.74em; line-height: 1; cursor: pointer;
  flex: none;
  margin-bottom: 1px;
  animation: chat-pop 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chat-react:hover { background: color-mix(in srgb, var(--accent) 24%, var(--bg-2)); }
/* The picker is a small popover anchored next to the message, not a full modal. */
#chat-overlay.reactp-open {
  background: transparent;
  backdrop-filter: none;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
  padding: 0;
}
#chat-overlay.reactp-open .chat-ov-card { pointer-events: auto; }
/* The composer emoji popover lives in the same overlay, so it needs the same
   pointer-events escape hatch. Without this the overlay's pointer-events:none
   let every emoji click fall straight through to the message list. */
#chat-overlay.reactp-open .emoji-pop,
#chat-overlay.reactp-open .emoji-pop * { pointer-events: auto; }
.reactp {
  position: fixed;
  width: auto !important;
  padding: 6px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-3) 98%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
  animation: react-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes react-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.reactp-row { display: flex; gap: 2px; }
.reactp-emo {
  font-size: 20px; line-height: 1;
  padding: 5px 6px; border-radius: 50%;
  border: 1px solid transparent; background: none; cursor: pointer;
  transition: transform 0.12s, background 0.12s;
}
.reactp-emo:hover { transform: scale(1.28) translateY(-2px); background: var(--chip); }
.reactp-emo.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* Draft badge in the sidebar */
.chat-chan-name .chat-draft-mark { margin-left: 4px; color: var(--accent); font-size: 0.85em; }

/* ============================================================================
   SETTINGS · COMPACT DROPDOWN (used by the Effects section)
   ============================================================================
   The four window-transition rows each had nine pill buttons (36 in total),
   which buried the setting you wanted under a wall of choices. Each is now a
   single native select, familiar, keyboard-friendly and tiny.
   ============================================================================ */
.set-drop { position: relative; display: inline-flex; align-items: center; width: 100%; }
.set-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: 0.84em;
  font-weight: 600;
  padding: 9px 34px 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.15s;
}
.set-select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.set-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.set-drop-ic {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--muted);
  font-size: 0.8em;
}
/* Native option list inherits the OS theme; force readable colours where the
   platform allows it so it never comes up white-on-white on paper. */
.set-select option { background: var(--bg-2); color: var(--fg); }

/* ============================================================================
   SETTINGS · CALM PASS
   ============================================================================
   The settings pane had accumulated a lot of little hover flourishes, every
   pill scaled up, changed colour and dropped a shadow at once. That reads as
   noise: dozens of bubbles competing for attention, and the eye cannot settle.
   Inside settings only, motion is reduced to a quiet border/background shift.
   One accent (the selected option) is the only thing that "pops".
   ============================================================================ */
.set-shell button,
.set-panel button,
.chat-ov-card button {
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    color 0.14s ease;
}
.set-shell button:hover,
.set-panel button:hover,
.chat-ov-card button:hover {
  transform: none !important;
  box-shadow: none !important;
}
.set-shell button:active,
.set-panel button:active,
.chat-ov-card button:active {
  transform: none !important;
}
/* Kill the entrance animations on rows, they made the whole panel shimmer. */
.set-panel .set-row,
.set-panel .proto-pill,
.set-panel .storep-opt,
.set-panel .swatches > * {
  animation: none !important;
}
/* Selected pills: flat fill, no glow, no shadow, just clearly "on". */
.set-panel .proto-pill.on,
.set-panel .storep-opt.on {
  box-shadow: none !important;
  transform: none !important;
}
/* Reduced-motion users get the calm treatment everywhere, by definition. */
@media (prefers-reduced-motion: reduce) {
  .set-shell *,
  .set-panel *,
  .chat-ov-card * {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ============================================================================
   SURPRISE PACK II, scratchpad, clipboard, ambient
   ============================================================================ */
/* Scratchpad: a small floating note, draggable by its head. */
.scratch {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 640;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: scratch-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes scratch-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.scratch-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  font-size: 0.76em; font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  cursor: grab;
}
.scratch-tools { display: flex; gap: 2px; }
.scratch-head button {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 1em; padding: 2px 5px;
  border-radius: 6px;
}
.scratch-head button:hover { background: var(--chip); color: var(--fg); }
.scratch textarea {
  width: 100%; min-height: 150px; resize: vertical;
  border: none; outline: none; background: none;
  color: var(--fg); font: inherit; font-size: 0.86em; line-height: 1.55;
  padding: 11px 12px;
}
.scratch-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.68em; color: var(--faint);
}
.scratch-foot #scratch-saved { transition: color 0.2s; }
.scratch-foot #scratch-saved.pulse { color: var(--term-ok, #4ade80); }

/* Clipboard history list. */
.clip { display: flex; flex-direction: column; gap: 10px; }
.clip-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.clip-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2); color: var(--fg); font: inherit; font-size: 0.8em;
  cursor: pointer;
}
.clip-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.clip-tx {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clip-cp { flex: none; color: var(--accent); }

/* ============================================================================
   AUTOMATIC GREETING (admin)
   ============================================================================
   The owner's first-contact DM greeting: an ordered list of steps (a GIF, then
   text, …) that the server relays on their behalf.
   ============================================================================ */
.arp { display: flex; flex-direction: column; gap: 12px; }
.arp-toggles { display: flex; flex-direction: column; gap: 10px; }
.arp-mode { display: flex; gap: 6px; flex-wrap: wrap; }
.arp-steps { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.arp-step {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg-2);
}
.arp-ord {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--bg);
  font-size: 0.62em; font-weight: 800;
}
.arp-thumb { width: 46px; height: 34px; object-fit: cover; border-radius: 7px; flex: none; }
.arp-txt { flex: 1; min-width: 0; font-size: 0.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arp-tools { display: flex; gap: 2px; flex: none; }
.arp-tools button {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font: inherit; font-size: 0.82em; padding: 3px 6px; border-radius: 6px;
}
.arp-tools button:hover { background: var(--chip); color: var(--fg); }
.arp-add { display: flex; gap: 8px; }
.arp-add .chat-ov-q { flex: 1; }
.arp-add .btnl { flex: none; }

/* ============================================================================
   FOCUS POPOVER (menubar 🎯 / ⏱)
   ============================================================================
   A small, self-contained panel: focus mode, pomodoro, ambient bed, and a
   notification mute. It opens under whichever menubar icon was tapped.
   ============================================================================ */
.focus-pop {
  position: fixed;
  z-index: 660;
  width: 244px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5);
  animation: fp-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.focus-pop[hidden] { display: none; }
@keyframes fp-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.fp-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72em; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 2px 2px;
}
.fp-x { border: none; background: none; cursor: pointer; color: var(--muted); font: inherit; padding: 2px 5px; border-radius: 6px; }
.fp-x:hover { background: var(--chip); color: var(--fg); }
.fp-sec {
  font-size: 0.58em; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
  padding: 4px 2px 0;
}
.fp-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg);
  font: inherit; text-align: left;
}
.fp-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fp-tx b { font-size: 0.8em; font-weight: 700; }
.fp-tx i { font-size: 0.66em; font-style: normal; color: var(--muted); }
.fp-toggle.on { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.fp-sw {
  flex: none; width: 32px; height: 18px; border-radius: 999px;
  background: var(--chip); position: relative; transition: background 0.18s;
}
.fp-sw > span {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--muted); transition: transform 0.18s, background 0.18s;
}
.fp-toggle.on .fp-sw { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.fp-toggle.on .fp-sw > span { transform: translateX(14px); background: var(--accent); }
.fp-pill { flex: none; font-size: 0.9em; }
.fp-pomo { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.fp-time {
  flex: 1; font-size: 1.5em; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--fg);
  letter-spacing: 0.02em;
}
.fp-btn {
  flex: none; padding: 7px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  color: var(--fg); font: inherit; font-size: 0.76em; font-weight: 700;
}
.fp-btn.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.fp-lens, .fp-amb { display: flex; gap: 5px; }
.fp-len, .fp-a {
  flex: 1; padding: 6px 4px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--muted); font: inherit; font-size: 0.7em; font-weight: 700;
}
.fp-len.on, .fp-a.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ============================================================================
   IN-GAME SOUND SETTINGS
   ============================================================================
   Games own their audio now. The ⚙ inside the game window opens this small
   panel; the Settings app no longer carries a "Game" category.
   ============================================================================ */
.snake-gear {
  margin-left: auto;
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 1.05em;
  padding: 2px 7px; border-radius: 7px;
}
.snake-gear:hover { background: var(--chip); color: var(--fg); }
.px-gear {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 1em;
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
}
.px-gear:hover { background: var(--chip); color: var(--fg); }

.gsound {
  position: absolute;
  top: 46px; right: 12px;
  z-index: 30;
  width: 260px;
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 22px 55px -16px rgba(0, 0, 0, 0.5);
  animation: gsound-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gsound-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.gsound-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  font-size: 0.72em; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.gsound-x { border: none; background: none; cursor: pointer; color: var(--muted); font: inherit; padding: 2px 5px; border-radius: 6px; }
.gsound-x:hover { background: var(--chip); color: var(--fg); }
.gsound-body { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.gsound-master {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; font-size: 0.76em; font-weight: 700; color: var(--fg);
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.gsound-sw {
  width: 34px; height: 19px; border-radius: 999px; border: none;
  background: var(--chip); position: relative; cursor: pointer;
}
.gsound-sw > span {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--muted); transition: transform 0.16s, background 0.16s;
}
.gsound-sw.on { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.gsound-sw.on > span { transform: translateX(15px); background: var(--accent); }
.gsound-row {
  display: grid;
  grid-template-columns: 24px 1fr 72px 26px 22px;
  align-items: center; gap: 6px;
  padding: 3px 4px; border-radius: 8px;
}
.gsound-row:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.gsound-eye, .gsound-play { border: none; background: none; cursor: pointer; color: var(--muted); font: inherit; font-size: 0.8em; border-radius: 6px; padding: 2px; }
.gsound-eye:hover, .gsound-play:hover { background: var(--chip); color: var(--fg); }
.gsound-play { color: var(--accent); }
.gsound-name { font-size: 0.72em; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsound-row input[type="range"] { width: 100%; accent-color: var(--accent); height: 16px; }
.gsound-val { font-size: 0.62em; color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; }
.gsound-foot {
  padding: 8px 12px 10px;
  font-size: 0.66em; color: var(--faint);
  border-top: 1px solid var(--line);
}

/* The in-game settings popover anchors to the game body, so the game container
   must establish a positioning context. */
.snake-wrap, .px { position: relative; }

/* Friend row = the chat row plus a remove button on the right. */
.chat-friend-row { display: flex; align-items: center; gap: 4px; }
.chat-friend-row .chat-chan { flex: 1; min-width: 0; }
.chat-unfriend {
  flex: none;
  width: 26px; height: 26px;
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 0.8em;
  border-radius: 7px; display: grid; place-items: center;
}
.chat-unfriend:hover { background: color-mix(in srgb, var(--err, #b42318) 14%, transparent); color: var(--err, #b42318); }

/* Delivery-queue hint chip in the chat header (only shows when a DM/group has
   something still owed to us). */
.chat-pending-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.68em; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--fg);
}

/* ============================================================================
   ADMIN "SERVER" PANEL (Settings → Server, admin only)
   ============================================================================ */
.set-admin { display: flex; flex-direction: column; gap: 14px; }
.adm-head { display: flex; align-items: center; justify-content: space-between; }
.adm-title { font-size: 0.95em; font-weight: 800; letter-spacing: 0.01em; }
.adm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 560px) { .adm-cards { grid-template-columns: repeat(2, 1fr); } }
.adm-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.adm-k { font-size: 0.62em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.adm-v { font-size: 1.15em; font-variant-numeric: tabular-nums; color: var(--fg); }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .adm-grid { grid-template-columns: 1fr; } }
.adm-block { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.adm-block-head { font-size: 0.66em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; }
.adm-feed { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow: auto; }
.adm-row { display: flex; align-items: center; gap: 8px; font-size: 0.76em; }
.adm-row b { color: var(--fg); font-weight: 700; }
.adm-when { margin-left: auto; color: var(--faint); font-size: 0.86em; white-space: nowrap; }
/* Grouped sign-ins: one row per account. The name keeps its width, the IP can
   shrink, and the count chip never wraps. */
.adm-login-row { padding: 2px 0; }
.adm-login-who { display: inline-flex; align-items: center; gap: 6px; min-width: 72px; }
.adm-login-n { font-size: 0.82em; font-weight: 700; color: var(--muted); background: var(--chip); border-radius: 999px; padding: 0 6px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.adm-login-ip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-variant-numeric: tabular-nums; }
.adm-ipcount { font-style: normal; font-size: 0.9em; opacity: 0.8; }
.adm-err { color: var(--err, #b42318); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-usage { display: flex; flex-direction: column; gap: 6px; }
.adm-urow { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 8px; font-size: 0.74em; }
.adm-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.adm-ubar { height: 7px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.adm-ubar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.adm-utime { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }
.adm-report { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.adm-report-head { font-size: 0.66em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; }
.adm-report-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-report-row .set-select { flex: 1; min-width: 140px; }

/* ============================================================================
   WINDOW MANAGER, snap preview + tiled state
   ============================================================================ */
.wm-ind {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: inset 0 0 40px -8px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: left 0.12s ease, top 0.12s ease, width 0.12s ease, height 0.12s ease;
}
.wm-ind[hidden] { display: none; }
.wm-ind--label {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}
/* A tiled window loses its free-floating shadow so the edges read as "docked". */
.win.tiled {
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .wm-ind { transition: none; }
}

/* Window-management help block in Settings → System. */
.set-windowhelp {
  margin: 4px 0 10px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.set-wh-head {
  font-size: 0.66em; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 5px;
}
.set-wh-note { font-size: 0.76em; line-height: 1.5; color: var(--fg); opacity: 0.9; }
.set-wh-note b { color: var(--accent); font-weight: 700; }

/* Workspace chip in the menubar (shows 1 or 2, only when a second space has
   something in it). */
.mb-space {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer; user-select: none;
}
.mb-space:hover { color: var(--fg); border-color: var(--accent); }
.mb-space[hidden] { display: none; }
.mb-space-n { line-height: 1; }

/* The flash a window gets when it takes focus via the cycle shortcut. */
@keyframes winPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.win.win-pulse { animation: winPulse 0.35s ease-out; }

/* ============================================================================
   SHORTCUTS PANEL (Settings -> Shortcuts)
   ============================================================================ */
.set-keys { display: flex; flex-direction: column; gap: 14px; }
.set-keys-intro {
  font-size: 0.78em; line-height: 1.5; color: var(--muted);
  padding: 10px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.set-keys-group {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--bg-2);
}
.set-keys-head {
  padding: 8px 12px; font-size: 0.66em; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.kbd-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 8px; padding: 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.kbd-row:last-child { border-bottom: none; }
.kbd-name { font-size: 0.8em; color: var(--fg); display: flex; align-items: center; gap: 7px; }
.kbd-custom {
  font-size: 0.62em; font-weight: 800; text-transform: uppercase;
  padding: 1px 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.kbd-arrow { color: var(--muted); }
.kbd-rec {
  font: inherit; font-size: 0.74em; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 5px 11px; min-width: 92px;
  border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  white-space: nowrap;
}
.kbd-rec:hover { border-color: var(--accent); color: var(--accent); }
.kbd-rec.listening {
  border-color: var(--accent); color: var(--accent);
  animation: kbdPulse 1s ease-in-out infinite;
}
.kbd-rec.on { border-color: var(--accent); color: var(--accent); }
@keyframes kbdPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}
.kbd-clear {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 0.85em;
  width: 26px; height: 26px; border-radius: 7px;
}
.kbd-clear:hover { background: var(--chip); color: var(--fg); }
.kbd-add {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px;
}
.kbd-add .set-select { flex: 1; min-width: 130px; }
.kbd-list { padding: 0 12px 10px; display: flex; flex-direction: column; }
.kbd-list .kbd-row { padding-left: 0; padding-right: 0; }

/* ============================================================================
   INTERACTIVE TUTORIAL (the menubar "i" button)
   ============================================================================ */
.mb-help:hover { color: var(--accent); }
.tut-layer {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
}
.tut-hole {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px color-mix(in srgb, #05070a 72%, transparent);
  transition: left 0.28s cubic-bezier(.16,1,.3,1), top 0.28s cubic-bezier(.16,1,.3,1),
              width 0.28s cubic-bezier(.16,1,.3,1), height 0.28s cubic-bezier(.16,1,.3,1);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  pointer-events: none;
}
.tut-card {
  position: absolute;
  pointer-events: auto;
  padding: 16px 17px 14px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-2) 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 26px 60px -18px rgba(0,0,0,0.62);
  animation: tutIn 0.3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes tutIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.tut-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tut-step {
  font-size: 0.64em; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
.tut-x { border: none; background: none; cursor: pointer; color: var(--muted); font: inherit; padding: 2px 6px; border-radius: 6px; }
.tut-x:hover { background: var(--chip); color: var(--fg); }
.tut-title { font-size: 1em; font-weight: 800; color: var(--fg); margin-bottom: 6px; }
.tut-body { font-size: 0.82em; line-height: 1.55; color: var(--fg); opacity: 0.92; }
.tut-body b { color: var(--accent); font-weight: 700; }
.tut-try {
  margin-top: 10px; padding: 7px 10px; border-radius: 9px;
  font-size: 0.76em; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--fg);
}
.tut-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tut-actions .btnl--primary { margin-left: auto; }
.tut-skip { border: none; background: none; cursor: pointer; color: var(--muted); font: inherit; font-size: 0.72em; }
.tut-skip:hover { color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  .tut-hole { transition: none; }
  .tut-card { animation: none; }
}

/* ============================================================================
   SIGN-IN / SIGN-OUT CHOREOGRAPHY (round 7)
   A matched pair: unlocking expands a ripple of light and the card lifts into
   the desktop; logging out plays the reverse so it reads as one motion.
   ============================================================================ */
#login.unlocking .login-card {
  animation: unlockCard 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes unlockCard {
  0% { transform: scale(1); }
  45% { transform: scale(0.965); }
  100% { transform: scale(1.02); filter: brightness(1.08); }
}
#login.unlocking::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.5);
  animation: unlockRipple 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes unlockRipple {
  from { transform: scale(0.4); opacity: 0.85; }
  to { transform: scale(46); opacity: 0; }
}
/* The whole desktop dips and blurs slightly on the way out. */
#desktop.app-leave { animation: deskLeave 0.42s ease both; }
#menubar.app-leave, #dock.app-leave { animation: barLeave 0.42s ease both; }
@keyframes deskLeave {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to { opacity: 0; transform: scale(0.965); filter: blur(7px); }
}
@keyframes barLeave {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* One thin band of light that travels across the screen on unlock. */
.unlock-sweep {
  position: fixed;
  top: 0; bottom: 0;
  width: 34vw;
  left: -40vw;
  z-index: 8000;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent) 45%, rgba(255,255,255,0.16) 50%, transparent 60%);
  filter: blur(6px);
  animation: unlockSweep 0.85s ease-out forwards;
}
@keyframes unlockSweep {
  from { left: -40vw; opacity: 0; }
  20% { opacity: 1; }
  to { left: 120vw; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #login.unlocking .login-card,
  #desktop.app-leave, #menubar.app-leave, #dock.app-leave { animation: none; }
  #login.unlocking::after { display: none; }
  .unlock-sweep { display: none; }
}

/* ============================================================================
   SETTINGS UI/UX POLISH (round 7)
   A calmer, more macOS-like settings pane: a wider rail with a clear active
   bar, comfier rows, and consistent radii and spacing throughout.
   ============================================================================ */
.set-shell {
  --set-gap: 16px;
  background: var(--bg-2);
}
.set-nav {
  width: 186px;
  padding: 14px 10px;
  gap: 3px;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg-2));
}
.set-nav-item {
  position: relative;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.86em;
  transition: background 0.14s ease, color 0.14s ease;
}
.set-nav-item:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.set-nav-item.on {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--fg);
  font-weight: 700;
}
.set-nav-item.on::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.set-nav-ic { opacity: 0.85; }
.set-nav-item.on .set-nav-ic { opacity: 1; color: var(--accent); }
.set-panel { padding: 10px 22px 20px; }
/* Every panel gets a consistent rhythm. */
.set-panel > * + * { margin-top: 12px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 11px 13px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.set-row .lbl { font-size: 0.84em; font-weight: 600; color: var(--fg); }
.set-input {
  border-radius: 11px;
  padding: 9px 12px;
  background: var(--bg);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.set-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Proto pills (on/off, sizes) get a nicer press feel. */
.proto-pill {
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.14s ease, color 0.14s ease, transform 0.08s ease;
}
.proto-pill:active { transform: scale(0.96); }
@media (max-width: 640px) {
  .set-nav { width: 62px; padding: 10px 6px; }
  .set-nav-item span:not(.set-nav-ic) { display: none; }
  .set-nav-item { justify-content: center; padding: 11px 0; }
}

/* Keyboard cheat sheet with real key-caps. */
.kbd-cheat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
  padding: 13px 15px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
}
@media (max-width: 560px) { .kbd-cheat { grid-template-columns: 1fr; } }
.kbd-cheat-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 0.76em;
}
.kbd-cheat-l { color: var(--muted); }
.kbd-cheat-k { display: inline-flex; align-items: center; gap: 3px; }
kbd {
  display: inline-block;
  min-width: 20px; padding: 3px 6px;
  font: inherit; font-size: 0.85em; font-weight: 700;
  text-align: center; line-height: 1;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 7%, var(--bg));
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent);
}
/* Slider row used by the gap control. */
.set-slider-row {
  display: grid; grid-template-columns: 1fr 130px 46px;
  align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px;
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.set-slider-row .lbl { font-size: 0.84em; font-weight: 600; }
.set-slider-row b { font-size: 0.78em; text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ============================================================================
   WORKSPACE SWITCHER (menubar dots + macOS-style popup)
   ============================================================================ */
.ws-dots {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 4px;
}
.ws-dots[hidden] { display: none; }
.ws-dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  background: transparent;
  transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.ws-dot:hover { background: color-mix(in srgb, var(--fg) 30%, transparent); transform: scale(1.15); }
.ws-dot.on {
  background: var(--fg);
  border-color: var(--fg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.ws-dot.drop { transform: scale(1.5); background: var(--accent); border-color: var(--accent); }
.ws-add {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 12px; line-height: 1;
  padding: 0 3px; border-radius: 5px;
}
.ws-add:hover { color: var(--fg); background: var(--chip); }

.ws-pop {
  position: fixed; z-index: 9500;
  width: min(440px, 92vw);
  padding: 12px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  animation: wsPop 0.24s cubic-bezier(.16,1,.3,1) both;
}
@keyframes wsPop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.ws-pop[hidden] { display: none; }
.ws-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7em; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 10px;
}
.ws-pop-x { border: none; background: none; cursor: pointer; color: var(--muted); font: inherit; padding: 2px 6px; border-radius: 6px; }
.ws-pop-x:hover { background: var(--chip); color: var(--fg); }
.ws-pop-row { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; }
.ws-cell {
  flex: none; width: 96px;
  border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.ws-cell:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); transform: translateY(-2px); }
.ws-cell.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.ws-cell.drop { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.ws-cell-n {
  font-size: 0.6em; font-weight: 800; color: var(--muted);
  padding: 4px 7px 2px;
}
.ws-cell-body {
  min-height: 54px; padding: 4px 7px 7px;
  display: flex; flex-direction: column; gap: 3px;
}
.ws-chip {
  font-size: 0.64em; font-weight: 600;
  padding: 3px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: grab;
}
.ws-chip.dragging { opacity: 0.5; }
.ws-pop-foot { display: flex; gap: 8px; margin-top: 12px; }
.ws-pop-foot .btnl[disabled] { opacity: 0.4; cursor: default; }

/* ---------------------------------------------------------------------------
   POMODORO IN THE MENUBAR
   The old design crammed "25:00" inside a 22px circle at 8.5px, which was
   genuinely unreadable. Now the icon keeps its normal size and a separate,
   legible pill appears beside it: a tiny progress ring plus mm:ss at a real
   size. The pill is a first-class menubar chip, not squeezed into the icon.
   --------------------------------------------------------------------------- */
#mb-focus.timing { position: relative; }
/* The bell fades out and a slim progress ring takes its place, in place. */
#mb-focus.timing::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pomo-pct, 1) * 360deg), color-mix(in srgb, var(--fg) 14%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
  mask: radial-gradient(circle, transparent 60%, #000 62%);
  animation: pomoPulse 2.4s ease-in-out infinite;
}
@keyframes pomoPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
/* The pill itself: readable size, tabular digits, sits to the right of the icon. */
.mb-timer {
  position: absolute;
  top: 50%; left: calc(100% + 6px);
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 4px 8px 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 92%, #000);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 1px color-mix(in srgb, #fff 18%, transparent) inset;
}
.mb-timer::before {
  content: "";
  display: inline-block; width: 6px; height: 6px; margin-right: 5px;
  border-radius: 50%; background: #fff;
  animation: pomoDot 1.6s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes pomoDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
[data-mode="light"] .mb-timer { color: #fff; }
/* When running we never want the old "inside the icon" treatment. */
#mb-focus.timing .mb-timer { position: absolute; }

/* ============================================================================
   WINDOW RADIUS + FOCUS RING (user-controlled, from Appearance)
   ============================================================================ */
:root { --win-radius: 12px; }
.win, .win.tiled, .win.max { border-radius: var(--win-radius); }
.win__body { border-radius: 0 0 var(--win-radius) var(--win-radius); }
.win__bar { border-radius: var(--win-radius) var(--win-radius) 0 0; }

/* The focused window wears a thin accent outline, so on a busy tiled desktop you
   can always tell which one has keyboard focus. It follows the theme colour. */
html[data-focus-ring="1"] .win {
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
html[data-focus-ring="1"] .win.focus-win {
  border-color: color-mix(in srgb, var(--fring-col, var(--accent)) 70%, var(--line));
  box-shadow: 0 0 0 var(--fring-w, 2px) color-mix(in srgb, var(--fring-col, var(--accent)) 70%, transparent),
              0 0 var(--fring-glow, 14px) color-mix(in srgb, var(--fring-col, var(--accent)) 42%, transparent),
              0 22px 55px -18px color-mix(in srgb, var(--fring-col, var(--accent)) 30%, rgba(0, 0, 0, 0.5));
}
@media (prefers-reduced-motion: reduce) {
  html[data-focus-ring="1"] .win { transition: none; }
}

/* Local storage viewer (Settings -> System). */
.set-ls { margin-top: 14px; }
.set-ls-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; font-size: 0.86em; font-weight: 700;
}
.set-ls-note { font-size: 0.74em; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.set-ls-list {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg-2);
}
.ls-sum {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 11px; font-size: 0.68em; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--fg) 4%, var(--bg-2));
  border-bottom: 1px solid var(--line);
}
.ls-row {
  display: grid; grid-template-columns: 62px 1fr 1fr 24px;
  align-items: center; gap: 8px;
  padding: 6px 11px; font-size: 0.72em;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.ls-row:last-child { border-bottom: none; }
.ls-tag {
  font-size: 0.82em; font-weight: 800; text-transform: uppercase;
  color: var(--accent); opacity: 0.85;
}
.ls-name { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-val { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ls-del { border: none; background: none; cursor: pointer; color: var(--muted); font: inherit; border-radius: 5px; }
.ls-del:hover { background: color-mix(in srgb, var(--err, #b42318) 15%, transparent); color: var(--err, #b42318); }
.btnl--danger { border-color: color-mix(in srgb, var(--err, #b42318) 50%, var(--line)); color: var(--err, #b42318); }
.btnl--danger:hover { background: color-mix(in srgb, var(--err, #b42318) 12%, transparent); }

/* ============================================================================
   THEME-UNIQUE APP ICONS
   The dock/launcher glyphs stay the same symbols, but each theme family gives
   them a different shape language, so switching theme visibly changes the
   whole desktop, not just the colours.
   ============================================================================ */
/* Ember: soft squircles with a warm inner glow. */
[data-theme="ember"] .dock-it {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px -6px rgba(255, 120, 60, 0.5);
}
[data-theme="ember"] .dock-it:hover { transform: translateY(-3px) rotate(-2deg); }

/* Midnight: flatter, cooler tiles with a thin rim. */
[data-theme="midnight"] .dock-it {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(150, 180, 255, 0.18);
}
[data-theme="midnight"] .dock-it:hover { transform: translateY(-3px) scale(1.03); }

/* Phosphor: hard terminal squares with a scanline sheen. */
[data-theme="phosphor"] .dock-it {
  border-radius: 4px;
  font-family: var(--mono, monospace);
  box-shadow: inset 0 0 0 1px rgba(120, 255, 170, 0.28);
  position: relative;
}
[data-theme="phosphor"] .dock-it::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
[data-theme="phosphor"] .dock-it:hover { transform: translateY(-2px); }

/* Paper: flat circles, ink outlines, no shadow. Very "printed". */
[data-theme="paper"] .dock-it {
  border-radius: 50%;
  box-shadow: none;
  border: 2px solid rgba(20, 18, 24, 0.85) !important;
}
[data-theme="paper"] .dock-it:hover { transform: translateY(-3px) rotate(3deg); }

/* ============================================================================
   SETTINGS AUTH CARD (Profile panel): tabs, aligned fields, success animations
   ============================================================================ */
.auth-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 2.5%, var(--bg-2));
  padding: 16px;
  display: flex; flex-direction: column; gap: 13px;
  position: relative; overflow: hidden;
}
.auth-tabs {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.auth-tab {
  position: relative; z-index: 1;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.84em; font-weight: 700;
  color: var(--muted); padding: 9px 0; border-radius: 9px;
  transition: color 0.16s ease;
}
.auth-tab.on { color: var(--fg); }
.auth-tab-ink {
  position: absolute; z-index: 0;
  top: 4px; left: 4px; bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: var(--bg);
  box-shadow: 0 2px 8px -3px rgba(0,0,0,0.35);
  transition: transform 0.22s cubic-bezier(.16,1,.3,1);
}
.auth-body { display: flex; flex-direction: column; gap: 11px; animation: authBodyIn 0.3s ease both; }
@keyframes authBodyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-lbl { font-size: 0.72em; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.auth-field .set-input { width: 100%; box-sizing: border-box; }
.auth-consent { display: flex; align-items: center; gap: 8px; font-size: 0.78em; color: var(--fg); }
.auth-submit { width: 100%; justify-content: center; padding: 11px; font-weight: 700; }
.auth-submit--ghost { background: none; }
/* Signed-in header row */
.auth-card--signed .auth-head {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 12px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.auth-ava {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 17px;
  flex: none;
}
.auth-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.auth-who b { font-size: 0.92em; }
.auth-who span { font-size: 0.74em; color: var(--muted); }
.auth-badge {
  margin-left: auto; font-size: 0.62em; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ok, #1a7f37);
  background: color-mix(in srgb, var(--ok, #1a7f37) 14%, transparent);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
/* The success gestures */
.auth-card.fx-register { animation: authRegister 0.75s cubic-bezier(.16,1,.3,1); }
@keyframes authRegister {
  0% { transform: scale(1); }
  30% { transform: scale(0.97); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  60% { transform: scale(1.02); box-shadow: 0 0 0 10px transparent; }
  100% { transform: scale(1); }
}
.auth-card.fx-login { animation: authLogin 0.65s cubic-bezier(.16,1,.3,1); }
@keyframes authLogin {
  0% { transform: translateY(0); }
  35% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
.auth-card.fx-logout { animation: authLogout 0.7s ease; }
@keyframes authLogout {
  0% { opacity: 1; transform: none; }
  45% { opacity: 0.45; transform: scale(0.985); filter: blur(1.5px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.auth-fx-ring {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
  animation: authRing 0.9s ease-out forwards;
}
.auth-fx-logout { border-color: var(--muted); animation-direction: reverse; }
@keyframes authRing {
  from { transform: scale(0.4); opacity: 0.8; }
  to { transform: scale(16); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card.fx-register, .auth-card.fx-login, .auth-card.fx-logout,
  .auth-body, .auth-tab-ink { animation: none; transition: none; }
  .auth-fx-ring { display: none; }
}

/* Full-width settings blocks (used by the theme picker so the cards really sit
   in a grid instead of being squeezed into a label|value row). */
.set-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* A block paints a panel behind its content (see the background-color list
     further down), so it has to be rounded like every card inside it. With a
     0px radius the square corners poked out around the first and last theme /
     icon-pack cards — that is the "kare kalmış" corner people kept seeing. */
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 18px;
}
.set-block-head {
  font-size: 0.78em; font-weight: 700; color: var(--fg);
  letter-spacing: 0.01em;
}
.set-block .theme-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.theme-card .tc-preview { height: 46px; }

/* Menubar app menu (click the app name in the menubar). */
.appmenu {
  position: fixed; z-index: 9400;
  min-width: 230px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  animation: wsPop 0.2s cubic-bezier(.16,1,.3,1) both;
}
.appmenu[hidden] { display: none; }
.appmenu-it {
  display: block; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.82em; color: var(--fg);
  padding: 8px 10px; border-radius: 8px;
}
.appmenu-it:hover { background: var(--accent); color: var(--bg); }
.appmenu-sep { height: 1px; margin: 5px 8px; background: var(--line); }
.mb-app { cursor: pointer; }
.mb-app:hover { color: var(--accent); }

/* ============================================================================
   WORKSPACE MISSION CONTROL (centered overlay, drag cards between spaces)
   ============================================================================ */
.ws-overlay {
  position: fixed; inset: 0; z-index: 9600;
  display: grid; place-items: center;
  padding: 40px;
  background: color-mix(in srgb, #05070a 62%, transparent);
  backdrop-filter: blur(9px);
  opacity: 0; transition: opacity 0.18s ease;
}
.ws-overlay.in { opacity: 1; }
.ws-ov-card {
  width: min(1100px, 94vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  padding: 20px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 46px 110px -32px rgba(0, 0, 0, 0.7);
  transform: scale(0.97); transition: transform 0.22s cubic-bezier(.16,1,.3,1);
}
.ws-overlay.in .ws-ov-card { transform: scale(1); }
.ws-ov-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.ws-ov-title { font-size: 1.05em; font-weight: 800; color: var(--fg); }
.ws-ov-sub { font-size: 0.76em; color: var(--muted); margin-top: 3px; max-width: 60ch; line-height: 1.45; }
.ws-ov-row {
  display: flex; gap: 14px;
  overflow-x: auto; padding: 4px 2px 10px;
  flex: 1;
}
.ws-space {
  flex: none; width: 256px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.ws-space:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ws-space.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.ws-space.hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); transform: scale(1.02); }
.ws-space-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 11px;
  font-size: 0.76em;
  border-bottom: 1px solid var(--line);
}
.ws-space-head b { color: var(--fg); font-weight: 800; }
.ws-space-head span { color: var(--muted); font-size: 0.86em; }
.ws-space-stage {
  position: relative;
  height: 150px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--fg) 4%, var(--bg));
}
.ws-card {
  position: absolute;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.ws-card:hover { box-shadow: 0 6px 16px -6px rgba(0,0,0,0.5); z-index: 2; }
.ws-card.grabbing { opacity: 0.35; }
.ws-card.ghost {
  z-index: 9999; opacity: 0.92;
  box-shadow: 0 20px 44px -14px rgba(0,0,0,0.7);
  transform: rotate(2deg) scale(1.06);
}
.ws-card-name {
  display: block; padding: 2px 4px;
  font-size: 8px; font-weight: 700; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.72em; color: var(--faint);
}
.ws-space-mini {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px; min-height: 30px;
  border-top: 1px solid var(--line);
}
.ws-mini-chip {
  font-size: 0.6em; font-weight: 700;
  padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--muted);
}
.ws-ov-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ws-ov-hint { font-size: 0.72em; color: var(--muted); margin-left: auto; }
/* Nicer workspace dots in the menubar */
.ws-dots { gap: 7px; }
.ws-dot {
  width: 10px; height: 10px;
  border-width: 1.5px;
  transition: background 0.18s cubic-bezier(.16,1,.3,1), transform 0.18s cubic-bezier(.16,1,.3,1), box-shadow 0.18s ease;
}
.ws-dot.on { transform: scale(1.25); }
.ws-dot.drop { transform: scale(1.7); }
.ws-add {
  width: 18px; height: 18px;
  border-radius: 6px;
  display: inline-grid; place-items: center;
  transition: background 0.14s ease, color 0.14s ease;
}
@media (max-width: 640px) { .ws-space { width: 210px; } .ws-space-stage { height: 120px; } }

/* ============================================================================
   DATA SECTION (grouped local settings)
   ============================================================================ */
.set-data { display: flex; flex-direction: column; gap: 14px; }
.set-data-hero {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.set-data-ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.set-data-ic svg { width: 22px; height: 22px; }
.set-data-title { font-size: 0.94em; font-weight: 800; color: var(--fg); }
.set-data-sub { font-size: 0.74em; color: var(--muted); line-height: 1.5; margin-top: 2px; max-width: 62ch; }
.set-data-hero .btnl { margin-left: auto; flex: none; }
.set-data-groups { display: flex; flex-direction: column; gap: 9px; }
.set-data-clear { align-self: flex-start; }
.ls-group {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); overflow: hidden;
}
.ls-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; cursor: pointer;
  font-size: 0.82em; font-weight: 700; color: var(--fg);
  list-style: none;
}
.ls-group-head::-webkit-details-marker { display: none; }
.ls-group-head::before {
  content: "▸"; color: var(--muted); font-size: 0.9em;
  transition: transform 0.16s ease;
}
.ls-group[open] .ls-group-head::before { transform: rotate(90deg); }
.ls-group-ic { font-size: 1.05em; }
.ls-group-name { flex: 1; }
.ls-group-meta { font-size: 0.78em; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ls-group-clear {
  border: 1px solid var(--line); background: none; cursor: pointer;
  font: inherit; font-size: 0.7em; font-weight: 700;
  color: var(--muted); padding: 3px 9px; border-radius: 7px;
}
.ls-group-clear:hover { color: var(--err, #b42318); border-color: color-mix(in srgb, var(--err, #b42318) 45%, var(--line)); }
.ls-group-rows { padding: 0 13px 10px; }
.ls-group .ls-row { padding: 6px 0; grid-template-columns: 1fr 1fr 24px; }
.ls-group .ls-name { font-size: 0.78em; }
.ls-group .ls-val { font-size: 0.74em; }
@media (max-width: 620px) {
  .set-data-hero { flex-wrap: wrap; }
  .set-data-hero .btnl { margin-left: 0; }
}

/* Storage pie + shallow group cards (Data section). */
.set-data-storage {
  display: flex; align-items: center; gap: 22px;
  padding: 16px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.sd-pie {
  position: relative; flex: none;
  width: 124px; height: 124px; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  transition: background 0.3s ease;
}
.sd-pie-hole {
  position: absolute; inset: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  display: grid; place-items: center; align-content: center;
  text-align: center; line-height: 1.1;
}
.sd-pie-hole b { font-size: 1.15em; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; }
.sd-pie-hole span { font-size: 0.6em; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sd-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sd-leg-row { display: flex; align-items: center; gap: 9px; font-size: 0.8em; }
.sd-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sd-leg-name { flex: 1; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-leg-val { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.set-data-groups { display: flex; flex-direction: column; gap: 7px; }
.ls-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.ls-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ls-card-ic {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; font-size: 15px;
}
.ls-card-name { font-size: 0.85em; font-weight: 700; color: var(--fg); flex: 1; min-width: 0; }
.ls-card-meta { font-size: 0.74em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-card-clear {
  border: 1px solid var(--line); background: none; cursor: pointer;
  font: inherit; font-size: 0.7em; font-weight: 700;
  color: var(--muted); padding: 4px 10px; border-radius: 7px;
}
.ls-card-clear:hover { color: var(--err, #b42318); border-color: color-mix(in srgb, var(--err, #b42318) 45%, var(--line)); }
@media (max-width: 560px) {
  .set-data-storage { flex-direction: column; }
  .sd-pie { width: 104px; height: 104px; }
}
/* Workspace card miniatures. */
.ws-card-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 3px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.ws-card-ic {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  display: grid; place-items: center;
  font-size: 7px; color: #fff; overflow: hidden;
}
.ws-card-ic svg { width: 8px; height: 8px; }
.ws-card-name { font-size: 7.5px; font-weight: 800; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-card-thumb {
  flex: 1; display: grid; place-items: center; opacity: 0.5;
  min-height: 0; overflow: hidden;
}
.ws-card-thumb svg { width: 55%; height: 55%; max-height: 46px; }
.ws-card-thumb--txt {
  font-size: 7px; font-weight: 700; color: var(--muted);
  background: color-mix(in srgb, var(--fg) 6%, transparent) !important;
  border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
  border-radius: 4px; margin: 3px;
}
.ws-mini-chip { display: inline-flex; align-items: center; gap: 4px; }
.ws-mini-ic {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
  display: grid; place-items: center;
  font-size: 7px; color: #fff; overflow: hidden;
}

/* App menu icons + window right-click quick actions. */
.appmenu-ic {
  display: inline-block; width: 18px;
  text-align: center; margin-right: 7px;
  opacity: 0.85; font-size: 0.95em;
}
.win-ctx { min-width: 250px; }
.mb-app.is-app { color: var(--fg); font-weight: 700; }
.mb-app.is-app::after {
  content: ""; display: inline-block;
  width: 4px; height: 4px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; background: var(--accent);
}

/* ============================================================================
   NEW BOOT ANIMATIONS: warp (star stream) and nova (light burst)
   ============================================================================ */
.warp-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 50%, #0b1020 0%, #04050a 75%);
}
.warp-inner, .nova-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.nova-burst { position: absolute; inset: 0; overflow: hidden; }
.nova-burst span {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 80%, #fff);
  animation: novaRing 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
.nova-burst span:nth-child(2) { animation-delay: 0.5s; }
.nova-burst span:nth-child(3) { animation-delay: 1s; }
@keyframes novaRing {
  from { transform: scale(0.2); opacity: 0.9; }
  to { transform: scale(38); opacity: 0; }
}
/* A bright core flare behind the logo for nova. */
.nova-inner::before {
  content: ""; position: absolute; z-index: -1;
  width: 220px; height: 220px; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 70%);
  animation: novaCore 2.6s ease-in-out infinite;
}
@keyframes novaCore {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.85); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .nova-burst span, .nova-inner::before { animation: none; }
}

/* Real app icon inside a workspace card miniature. */
.ws-card-bigic {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  opacity: 0.9;
}
.ws-card-bigic svg { width: 20px; height: 20px; }
.ws-card-hint {
  position: absolute; left: 6px; right: 6px; bottom: 5px;
  font-size: 7.5px; font-weight: 700; color: var(--muted);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-card-thumb { position: relative; }
.ws-card-ic svg { width: 9px; height: 9px; }
.ws-mini-ic svg { width: 9px; height: 9px; }

/* ============================================================================
   LOGIN SCREEN v2: starfield, orbit rings, staged card reveal
   ============================================================================ */
#login { overflow: hidden; }
.login-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.login-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.login-rings span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent, #ff7a45) 35%, transparent);
  animation: loginRing 6s linear infinite;
}
.login-rings span:nth-child(1) { width: 340px; height: 340px; animation-duration: 9s; }
.login-rings span:nth-child(2) { width: 520px; height: 520px; animation-duration: 14s; animation-direction: reverse; opacity: 0.6; }
.login-rings span:nth-child(3) { width: 720px; height: 720px; animation-duration: 20s; opacity: 0.35; }
@keyframes loginRing {
  from { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.03); }
  to { transform: rotate(360deg) scale(1); }
}
#login .login-card { z-index: 2; }
.login-badge {
  font-size: 0.62em; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #ff7a45) 80%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #ff7a45) 40%, transparent);
  border-radius: 999px; padding: 3px 12px; margin-bottom: 6px;
}
#login .login-logo { letter-spacing: -0.02em; }
#login .login-logo span { color: var(--accent, #ff7a45); }
.login-orb {
  position: relative;
  width: 78px; height: 78px;
  display: grid; place-items: center;
  margin: 6px 0;
}
.login-orb-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent, #ff7a45) 55%, transparent);
  border-top-color: transparent;
  animation: orbSpin 2.6s linear infinite;
}
.login-orb-ring.d2 { inset: -10px; animation-duration: 4s; animation-direction: reverse; opacity: 0.55; border-width: 1px; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
#login .login-avatar {
  width: 62px; height: 62px;
  font-size: 22px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent, #ff7a45) 12%, transparent),
              0 10px 30px -10px color-mix(in srgb, var(--accent, #ff7a45) 60%, transparent);
}
.login-status {
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent, #ff7a45) 85%, #fff);
  text-transform: lowercase;
  min-height: 1.1em;
  transition: color 0.2s ease;
}
#login.unlocking .login-orb-ring { border-color: color-mix(in srgb, var(--accent, #ff7a45) 90%, #fff); }
#login.unlocking .login-orb-ring { animation-duration: 0.6s; }
#login.unlocking .login-avatar {
  animation: orbCharge 0.95s cubic-bezier(.16,1,.3,1);
}
@keyframes orbCharge {
  0% { transform: scale(1); }
  40% { transform: scale(0.9); }
  70% { transform: scale(1.12); box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent, #ff7a45) 22%, transparent); }
  100% { transform: scale(1); }
}
/* The unlock spark burst. */
.unlock-burst { position: fixed; left: 50%; top: 50%; z-index: 8500; pointer-events: none; }
.unlock-burst span {
  position: absolute; left: 0; top: 0;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--accent, #ff7a45);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent, #ff7a45) 60%, transparent);
  animation: burstOut 0.9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes burstOut {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0.2); opacity: 0; }
}
.unlock-burst.leave span { animation-direction: reverse; animation-duration: 0.7s; }
@media (prefers-reduced-motion: reduce) {
  .login-rings span, .login-orb-ring, #login.unlocking .login-avatar { animation: none; }
  .unlock-burst { display: none; }
}

/* Collapsible sub-options under a settings row (focus-ring customisation). */
.set-sub {
  margin: -4px 0 6px;
  padding: 12px 13px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  display: flex; flex-direction: column; gap: 9px;
  animation: setSubIn 0.28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes setSubIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.set-sub-head {
  font-size: 0.68em; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent);
}
.set-sub .set-slider-row,
.set-sub .set-row {
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.reactp .rp-custom {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; padding: 0 4px;
}

/* ============================================================================
   TRANSPARENCY FIX: the Settings app ignored the window-opacity setting because
   its rail and panels painted solid `--bg-2`. They now follow --win-bg so the
   whole window (not just the frame) becomes see-through.
   ============================================================================ */
.set-nav { background: var(--win-bar-bg, var(--bg-2)) !important; }
.set-shell { background: transparent !important; }
.set-panel { background: transparent !important; }
.set-row,
.set-slider-row,
.auth-card,
.set-keys-group,
.set-block,
.ls-group,
.ls-card,
.set-data-storage,
.set-storage,
.sts-card,
.kbd-cheat,
.set-keys-intro,
.set-data-hero {
  background-color: color-mix(in srgb, var(--win-bg, var(--bg)) 88%, transparent);
}
/* The settings window needs a backdrop blur so transparency reads as glass. */
#win-settings .win__body { background: transparent; }
#win-settings { backdrop-filter: blur(14px) saturate(1.1); }
[data-theme="paper"] #win-settings { backdrop-filter: none; }

/* Auth button press feedback: spinner + card shimmer + error shake. */
.auth-submit { position: relative; overflow: hidden; }
.auth-submit.loading { color: transparent !important; pointer-events: none; }
.auth-submit.loading::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--bg) 50%, transparent);
  border-top-color: var(--bg);
  animation: authSpin 0.7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }
.auth-card.working { position: relative; }
.auth-card.working::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 70%);
  background-size: 240% 100%;
  animation: authShimmer 1.1s linear infinite;
}
@keyframes authShimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.auth-card.shake { animation: authShake 0.45s cubic-bezier(.36,.07,.19,.97); }
@keyframes authShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card.working::after, .auth-submit.loading::after, .auth-card.shake { animation: none; }
}

/* Real scaled-down app content inside a workspace miniature. */
.ws-card-shot { position: relative; overflow: hidden; padding: 0; }
.ws-shot-scale {
  position: absolute; left: 0; top: 0;
  width: 620px;
  transform: scale(0.19);
  transform-origin: left top;
  pointer-events: none;
  filter: saturate(1.05);
}
.ws-shot-scale .win__body { padding: 10px; font-size: 13px; }
.ws-shot-scale * { pointer-events: none !important; }
.ws-shot-scale input, .ws-shot-scale textarea { background: transparent; }
.ws-shot-scale canvas, .ws-shot-scale video { display: none; }
.ws-card { overflow: hidden; }

/* ============================================================================
   MUSIC APP (cemMusic), Spotify-style three-pane player
   ============================================================================ */
.mu {
  display: grid;
  grid-template-columns: 210px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "side main" "bar bar";
  height: 100%; min-height: 420px;
  gap: 10px; padding: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%);
  position: relative;
}
/* The library is a panel with the same manners as Messages: « tucks it away
   behind a narrow » tab, » brings it back, and on a phone it slides over the
   list with a dimmed backdrop. */
.mu-side-top { display: flex; align-items: center; gap: 8px; }
.mu-side-top .mu-brand { flex: 1; min-width: 0; }
.mu-side-x {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.mu-side-x:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mu-side-open, .mu-overlay { display: none; }
.mu.side-closed { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "bar"; }
.mu.side-closed .mu-side { display: none; }
.mu.side-closed .mu-side-open { display: grid; }
.mu-side-open {
  flex: none; width: 38px; height: 38px; place-items: center; padding: 0;
  border-radius: 11px; cursor: pointer; font: inherit; font-size: 15px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
}
.mu-side-open:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent); }
.mu-side {
  grid-area: side;
  display: flex; flex-direction: column; gap: 14px;
  padding: 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--win-bg, var(--bg)) 70%, transparent);
  border: 1px solid var(--line);
}
.mu-brand { display: flex; align-items: center; gap: 9px; font-size: 0.95em; }
.mu-brand-ic {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #a78bfa, #6d28d9);
}
.mu-brand-ic svg { width: 15px; height: 15px; }
.mu-nav { display: flex; flex-direction: column; gap: 3px; }
.mu-tab {
  text-align: left; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.84em; color: var(--muted);
  padding: 8px 10px; border-radius: 9px;
}
.mu-tab:hover { background: var(--chip); color: var(--fg); }
.mu-tab.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); font-weight: 700; }
.mu-add { display: flex; flex-direction: column; gap: 8px; }
.mu-addbtn { justify-content: center; }
.mu-note { font-size: 0.68em; color: var(--muted); line-height: 1.5; }
.mu-stats { margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 0.72em; color: var(--muted); }
.mu-stats b { color: var(--fg); }
.mu-main { grid-area: main; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mu-top { display: flex; gap: 10px; }
.mu-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 11px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--muted);
}
.mu-search input { flex: 1; border: none; background: none; outline: none; color: var(--fg); font: inherit; font-size: 0.88em; }
.mu-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.mu-row {
  display: grid; grid-template-columns: 38px 1fr auto 22px;
  align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px;
  border: none; background: none; cursor: pointer; text-align: left;
  color: var(--fg); font: inherit;
  transition: background 0.12s ease;
}
.mu-row:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.mu-row.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mu-row-art { width: 38px; height: 38px; border-radius: 8px; flex: none; }
.mu-row-meta { display: flex; flex-direction: column; min-width: 0; }
.mu-row-meta b { font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-row-meta span { font-size: 0.72em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-row-tag {
  font-size: 0.64em; font-weight: 700; text-transform: uppercase;
  color: var(--muted); background: color-mix(in srgb, var(--fg) 7%, transparent);
  padding: 3px 8px; border-radius: 999px;
}
.mu-row-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; opacity: 0; }
.mu-row.on .mu-row-eq { opacity: 1; }
.mu-row-eq i { width: 2px; background: var(--accent); animation: muEq 0.9s ease-in-out infinite; }
.mu-row-eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.mu-row-eq i:nth-child(2) { height: 90%; animation-delay: 0.2s; }
.mu-row-eq i:nth-child(3) { height: 60%; animation-delay: 0.4s; }
@keyframes muEq { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
.mu-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 0.82em; }

/* Bottom transport bar */
.mu-bar {
  grid-area: bar;
  display: grid; grid-template-columns: 1fr 1.6fr 1fr;
  align-items: center; gap: 14px;
  padding: 11px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--win-bg, var(--bg)) 82%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.mu-now { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mu-art {
  width: 46px; height: 46px; border-radius: 10px; flex: none;
  background: var(--chip);
  background-size: cover;
  position: relative;
}
.mu-art.spin { animation: muPulse 1.6s ease-in-out infinite; }
@keyframes muPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.mu-now-txt { display: flex; flex-direction: column; min-width: 0; }
.mu-now-txt b { font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-now-txt span { font-size: 0.72em; color: var(--muted); }
.mu-mid { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mu-ctrl { display: flex; align-items: center; gap: 8px; }
.mu-ic {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 1.05em;
  width: 30px; height: 30px; border-radius: 50%;
}
.mu-ic:hover { color: var(--fg); }
.mu-ic.on { color: var(--accent); }
.mu-ic[data-mode="one"]::after { content: "1"; font-size: 0.6em; vertical-align: super; }
.mu-play {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center;
  transition: transform 0.12s ease;
}
.mu-play:hover { transform: scale(1.08); }
.mu-play::before { content: "▶"; font-size: 14px; margin-left: 2px; }
.mu-play.playing::before { content: "❚❚"; font-size: 12px; margin: 0; }
.mu-prog { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; width: 100%; }
.mu-prog span { font-size: 0.68em; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.mu-seek {
  position: relative; height: 5px; border-radius: 3px; cursor: pointer;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
}
.mu-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--accent); }
.mu-knob {
  position: absolute; top: 50%; left: 0;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accent);
  opacity: 0; transition: opacity 0.14s ease;
}
.mu-seek:hover .mu-knob { opacity: 1; }
.mu-right { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.mu-vol-ic { color: var(--muted); }
.mu-vol { width: 110px; }
/* Phone: library is a slide-over panel (no longer deleted from the DOM) */
@media (max-width: 760px) {
  .mu { grid-template-columns: 1fr; grid-template-areas: "main" "bar"; }
  .mu-bar { grid-template-columns: 1fr auto; }
  .mu-mid { order: -1; }
  .mu-right { display: none; }
  .mu-side {
    display: flex; flex-direction: column; gap: 14px; align-items: stretch;
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 30;
    width: min(290px, 84vw); height: auto; max-height: none;
    overflow-x: hidden; overflow-y: auto;
    border-radius: 0 16px 16px 0;
    box-shadow: 24px 0 50px -20px #000c;
    transition: transform .25s ease;
  }
  .mu.side-closed .mu-side { display: flex; transform: translateX(-104%); }
  .mu-overlay {
    display: block; position: absolute; inset: 0; z-index: 25; border: 0; padding: 0;
    background: rgba(6, 6, 10, .55);
  }
  .mu.side-closed .mu-overlay { display: none; }
  .mu.side-closed .mu-side-open { display: grid; }
}

/* Theme + wallpaper creators (Appearance). */
.ct, .wp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; padding: 13px; border-radius: 13px;
  background: color-mix(in srgb, var(--fg) 2.5%, var(--bg-2));
  border: 1px solid var(--line);
}
.ct-sw {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.72em; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.ct-sw input[type="color"] {
  width: 100%; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px;
  background: none; cursor: pointer;
}
.ct-sw .set-select, .ct-sw .snd-range { width: 100%; }
.ct-preview, .wp-preview {
  grid-column: 1 / -1; height: 62px; border-radius: 11px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.ct-preview span { width: 20px; height: 20px; border-radius: 6px; font-weight: 800; display: grid; place-items: center; font-size: 12px; }
#ct-save, #ct-clear, #wp-save, #wp-clear { grid-column: span 1; justify-content: center; }
@media (max-width: 520px) { .ct, .wp { grid-template-columns: 1fr 1fr; } }
/* LEGACY FIX: this rule used to force `background-image: var(--wall-custom)
   !important` on BOTH #desktop and #wallpaper. That variable is never assigned
   any more, so it resolved to `none` with !important priority and wiped every
   generated wallpaper, which is why picking one gave a black screen.
   applyCustomWall() now paints #wallpaper inline, so we only need #desktop to
   stay out of the way. */
body.wall-custom #desktop { background-image: none; }

/* Music app polish: cover art, credit line, richer rows. */
.mu-credit { font-size: 0.64em; color: var(--muted); line-height: 1.5; }
.mu-credit a { color: var(--accent); text-decoration: none; }
.mu-credit a:hover { text-decoration: underline; }
.mu-row-art { background-size: cover; background-position: center; box-shadow: 0 3px 10px -4px rgba(0,0,0,.5); }
.mu-row { grid-template-columns: 40px 1fr auto 20px; }
.mu-row-art { width: 40px; height: 40px; border-radius: 9px; }
.mu-art { background-size: cover; background-position: center; }
.mu-empty .btnl { margin-top: 10px; }
/* nicers scrollbar inside the list */
.mu-list::-webkit-scrollbar { width: 9px; }
.mu-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg) 16%, transparent); border-radius: 9px; }
.mu-list::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
   CUSTOM CURSORS: five SVG sets, applied globally via --cur-arrow/--cur-point
   ============================================================================ */
html, body { cursor: var(--cur-arrow, auto); }
button, a, [role="button"], .proto-pill, .btnl, .dock-it, .ws-card,
.mu-row, .mu-tab, .mu-ic, .mu-play, .set-nav-item, .appmenu-it,
.ws-space, .theme-card, .sw, .cur-opt, .chat-side-item, summary {
  cursor: var(--cur-point, pointer);
}
input[type="text"], input[type="password"], input[type="search"],
input:not([type]), textarea, [contenteditable="true"] {
  cursor: text;
}
input[type="range"] { cursor: var(--cur-point, pointer); }
.win__bar, .tbar { cursor: var(--cur-arrow, auto); }
/* Terminal keeps its I-beam. */
#out, #cmd, .term-input { cursor: text; }

/* Cursor picker UI */
.cur-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.cur-opt {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 10px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--muted); font: inherit; font-size: 0.68em; font-weight: 700;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.cur-opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cur-opt.on { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.cur-ico { width: 26px; height: 26px; display: block; }
.cur-ico svg, .cur-ico img { width: 26px; height: 26px; }
.cur-lbl { text-transform: capitalize; }

/* Login entrance variations, chosen in Settings. */
#login { animation: none; }
#login[data-variant="rise"] .login-card { animation: lvRise 0.7s cubic-bezier(.16,1,.3,1) both; }
#login[data-variant="bloom"] .login-card { animation: lvBloom 0.85s cubic-bezier(.22,1.4,.36,1) both; }
#login[data-variant="portal"] .login-card { animation: lvPortal 0.8s cubic-bezier(.16,1,.3,1) both; }
#login[data-variant="glitch"] .login-card { animation: lvGlitch 0.6s steps(5, end) both; }
@keyframes lvRise {
  from { opacity: 0; transform: translateY(40px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes lvBloom {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); filter: blur(6px); }
  70% { opacity: 1; transform: scale(1.04) rotate(1deg); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvPortal {
  0% { opacity: 0; transform: scale(1.4) rotateY(60deg); filter: brightness(2); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes lvGlitch {
  0% { opacity: 0; transform: translateX(-14px) skewX(8deg); filter: hue-rotate(90deg); }
  40% { opacity: 1; transform: translateX(10px) skewX(-6deg); }
  70% { transform: translateX(-5px) skewX(3deg); filter: hue-rotate(-40deg); }
  100% { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #login .login-card { animation: none !important; }
}

/* ============================================================================
   THEME MAKER + WALLPAPER MAKER (full-screen builders)
   ============================================================================ */
.mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 8px; }
.mk-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px; border-radius: 13px; cursor: pointer; text-align: left;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
  color: var(--fg); font: inherit;
  transition: transform .14s cubic-bezier(.16,1,.3,1), border-color .14s, background .14s;
}
.mk-tile:hover { transform: translateY(-2px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }
.mk-tile-ic { font-size: 1.3em; font-weight: 800; color: var(--accent); line-height: 1; }
.mk-tile b { font-size: .9em; }
.mk-tile-sub { font-size: .74em; color: var(--muted); }
@media (max-width: 620px) { .mk-tiles { grid-template-columns: 1fr; } }

/* NOTE: the wallpaper maker's root is `.wm-app`, NOT `.wm`. A bare `.wm`
   selector also matched the window "minimize" dot (`.wdot.wm`) and rebuilt
   that 12px dot as a 218px two-column grid: every window bar gained a phantom
   gap and the Settings window silently overflowed to the right, which cut off
   controls in the Server panel (Code & service, Email delivery, the Google
   button and the email off switch among them). */
.mk, .wm-app {
  display: grid; grid-template-columns: 218px 1fr; gap: 14px;
  height: 100%; min-height: 380px; padding: 12px;
}
.mk-side, .wm-side {
  display: flex; flex-direction: column; gap: 9px; overflow-y: auto;
  padding-right: 4px;
}
.mk-head {
  font-size: .68em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent); margin-top: 6px;
}
.mk-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-preset {
  position: relative; height: 46px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); overflow: hidden; padding: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.mk-preset b { position: relative; z-index: 2; font-size: .6em; color: #fff; text-shadow: 0 1px 3px #000a; padding: 3px 5px; }
.mkp-sw { position: absolute; inset: 0; }
.mkp-ac { position: absolute; right: 5px; top: 5px; width: 12px; height: 12px; border-radius: 50%; z-index: 2; box-shadow: 0 0 0 2px #0006; }
.mk-preset:hover { transform: translateY(-2px); }
.mk-saved { display: flex; flex-direction: column; gap: 5px; }
.mk-sav {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); font: inherit; font-size: .76em; font-weight: 700;
  text-align: left;
}
.mk-sav span { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mk-sav i { margin-left: auto; font-style: normal; opacity: .5; padding: 0 3px; }
.mk-sav i:hover { opacity: 1; color: var(--danger, #ff6b6b); }
.mk-empty { font-size: .74em; color: var(--muted); }
.mk-main, .wm-main { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.mk-preview {
  flex: 1; min-height: 190px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.mkpv-bar { display: flex; align-items: center; gap: 6px; padding: 8px 11px; }
.mkpv-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .35; }
.mkpv-title { margin-left: 8px; font-size: .74em; font-weight: 800; opacity: .7; }
.mkpv-body { flex: 1; display: grid; grid-template-columns: 96px 1fr; }
.mkpv-side { padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.mkpv-side span { height: 9px; border-radius: 5px; background: currentColor; opacity: .18; }
.mkpv-content { padding: 16px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.mkpv-h1 { font-size: 1.3em; font-weight: 800; }
.mkpv-p { font-size: .84em; opacity: .8; }
.mkpv-btn { border: none; padding: 7px 14px; border-radius: 9px; font: inherit; font-weight: 700; cursor: default; }
.mk-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.mk-ctl { display: flex; flex-direction: column; gap: 4px; font-size: .72em; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mk-ctl input[type="color"] { width: 100%; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: none; cursor: pointer; }
.mk-ctl code { font-size: .95em; color: var(--fg); text-transform: none; letter-spacing: 0; }
.mk-ctl .set-select, .mk-ctl .snd-range { width: 100%; }
.mk-ctl.wm-row { flex-direction: row; align-items: center; justify-content: space-between; }
.mk-check { font-size: .76em; font-weight: 700; padding: 7px 10px; border-radius: 9px; }
.mk-check.ok { color: #22c55e; background: color-mix(in srgb, #22c55e 12%, transparent); }
.mk-check.warn { color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.mk-name input {
  width: 100%; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit;
}
.mk-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* Wallpaper stage */
.wm-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.wm-preset { height: 30px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.wm-preset:hover { transform: translateY(-2px); }
.wm-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.wm-stage { flex: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); min-height: 200px; }
.wm-canvas { width: 100%; height: 100%; display: grid; place-items: center; background-size: cover; }
.wm-logo { font-size: 1.6em; font-weight: 800; color: #fff; text-shadow: 0 3px 16px #0009; letter-spacing: -.02em; }
.wm-logo span { opacity: .7; }
@media (max-width: 720px) {
  .mk, .wm-app { grid-template-columns: 1fr; }
  .mk-side, .wm-side { flex-direction: row; flex-wrap: wrap; overflow: visible; }
}

/* Pre-login: the desktop sleeps behind the sign-in screen instead of showing
   through it, so the very first thing you ever see is the lock. */
/* NOTE: only opacity + filter are animated here. The dock is centred with
   translateX(-50%), so writing `transform` in this rule silently destroyed the
   centring and pushed the whole dock to the right (the "navbar kaymis" bug).
   We fade and blur instead, which never touches geometry. */
body.pre-login #desktop,
body.pre-login #menubar,
body.pre-login #dock {
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  transition: opacity .5s ease, filter .5s ease;
}
/* The terminal itself can paint for a frame or two between the first paint and
   DOMContentLoaded, before the lock screen is revealed. That is the "desktop
   flashes for a split second on restart" bug. Visibility (unlike display) is
   free to animate and keeps the inner layout intact. */
body.pre-login #app {
  visibility: hidden;
  opacity: 0;
}
/* While the lock is up, drop the duplicate branding: the wordmark on the login
   card is the only one needed, so the terminal footer stops repeating [cemOS]. */
body.pre-login #tmux .tmux__l b { visibility: hidden; }
body:not(.pre-login) #desktop,
body:not(.pre-login) #menubar,
body:not(.pre-login) #dock {
  opacity: 1;
  filter: none;
  transition: opacity .55s ease, filter .55s ease;
}
/* Menubar label: brand plus a search affordance when nothing is focused. */
.mb-app.is-search { opacity: .82; }
.mb-app .mb-sep { opacity: .4; margin: 0 2px; }
.mb-app .mb-search { text-decoration: underline dotted; text-underline-offset: 3px; }
/* Generic overlay used by clipboard history etc. */
.gen-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(4px);
}

/* ============================================================================
   SIGN-IN ANIMATION CATALOGUE (variant names)
   The keyframes themselves are further down. IMPORTANT: these only run while
   the sign-in layer is actually shown (`#login:not(.bye)`), and they use
   fill-mode `forwards` (never `both`), so a hidden/paused screen can never be
   left parked on a 0% keyframe (which used to render a pure-black page).
   ============================================================================ */
#login:not(.bye) .login-card { animation-duration: var(--loginfx-dur, 1s); animation-fill-mode: forwards; }
#login[data-variant="rise"]:not(.bye) .login-card { animation-name: lvRise; animation-timing-function: cubic-bezier(.16,1,.3,1); }
#login[data-variant="bloom"]:not(.bye) .login-card { animation-name: lvBloom; animation-timing-function: cubic-bezier(.22,1.4,.36,1); }
#login[data-variant="portal"]:not(.bye) .login-card { animation-name: lvPortal; animation-timing-function: cubic-bezier(.16,1,.3,1); }
#login[data-variant="glitch"]:not(.bye) .login-card { animation-name: lvGlitch; animation-timing-function: steps(5, end); }
#login[data-variant="orbit"]:not(.bye) .login-card { animation-name: lvOrbit; animation-timing-function: cubic-bezier(.16,1,.3,1); }
#login[data-variant="liquid"]:not(.bye) .login-card { animation-name: lvLiquid; animation-timing-function: cubic-bezier(.22,1.5,.36,1); }
#login[data-variant="shatter"]:not(.bye) .login-card { animation-name: lvShatter; animation-timing-function: cubic-bezier(.16,1,.3,1); }
#login[data-variant="flip3d"]:not(.bye) .login-card { animation-name: lvFlip; animation-timing-function: cubic-bezier(.16,1,.3,1); }
#login[data-variant="typewriter"]:not(.bye) .login-card { animation-name: lvType; animation-timing-function: steps(14, end); }
#login[data-variant="zoomblur"]:not(.bye) .login-card { animation-name: lvZoom; animation-timing-function: cubic-bezier(.16,1,.3,1); }
/* Safety net: a hidden sign-in card is always fully opaque, so no fill state
   can ever hide it or leave the page black. */
#login.bye .login-card, #login[hidden] .login-card { opacity: 1 !important; animation: none !important; }
@keyframes lvOrbit {
  0% { opacity: 0; transform: rotate(-25deg) translateY(60px) scale(.7); }
  60% { opacity: 1; transform: rotate(4deg) translateY(-8px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvLiquid {
  0% { opacity: 0; transform: scale(.6); border-radius: 46% 54% 40% 60% / 55% 40% 60% 45%; }
  45% { opacity: 1; transform: scale(1.06); border-radius: 40% 60% 55% 45% / 45% 55% 45% 55%; }
  75% { border-radius: 30% 30% 30% 30% / 30% 30% 30% 30%; }
  100% { opacity: 1; transform: none; border-radius: 16px; }
}
@keyframes lvShatter {
  0% { opacity: 0; transform: scale(1.3); filter: blur(10px) brightness(2); clip-path: polygon(0 0, 100% 0, 100% 12%, 0 12%, 0 40%, 100% 40%, 100% 62%, 0 62%, 0 100%, 100% 100%); }
  60% { opacity: 1; filter: blur(2px) brightness(1.2); clip-path: polygon(0 0, 100% 0, 100% 25%, 0 20%, 0 55%, 100% 50%, 100% 78%, 0 72%, 0 100%, 100% 100%); }
  100% { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }
}
@keyframes lvFlip {
  0% { opacity: 0; transform: perspective(1000px) rotateX(88deg) translateY(-30px); }
  100% { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0); }
}
@keyframes lvType {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes lvZoom {
  0% { opacity: 0; transform: scale(1.6); filter: blur(22px); }
  60% { opacity: 1; filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Theme-coloured glow behind the card while it animates. */
#login .login-card::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--loginfx-col, var(--accent)) 60%, transparent) 0%, transparent 70%);
  opacity: .5;
  animation: lvGlow var(--loginfx-dur, 1s) ease-in-out both;
}
@keyframes lvGlow { from { opacity: 0; transform: scale(.7); } to { opacity: .5; transform: none; } }
#login .login-card { position: relative; }
/* The accent-driven ring colour follows the chosen animation colour too. */
#login .login-orb-ring, #login .login-rings span { border-color: color-mix(in srgb, var(--loginfx-col, var(--accent)) 45%, transparent); }
#login .login-badge { color: color-mix(in srgb, var(--loginfx-col, var(--accent)) 85%, #fff); border-color: color-mix(in srgb, var(--loginfx-col, var(--accent)) 40%, transparent); }
#login .login-status { color: color-mix(in srgb, var(--loginfx-col, var(--accent)) 85%, #fff); }
@media (prefers-reduced-motion: reduce) {
  #login .login-card, #login .login-card::before { animation: none !important; }
}

/* ============================================================================
     Music: playlists, likes, equaliser
   ============================================================================ */
.mu-pls { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mu-pls-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .66em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.mu-pls-new {
  border: none; background: none; color: var(--accent); cursor: pointer;
  font-size: 1.3em; line-height: 1; padding: 0 4px;
}
.mu-pls-list { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; }
.mu-pls-it {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 8px; cursor: pointer;
  border: none; background: none; color: var(--fg); font: inherit; font-size: .8em;
  text-align: left;
}
.mu-pls-it:hover { background: var(--chip); }
.mu-pls-it.on { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; }
.mu-pls-it span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-pls-it i { font-style: normal; opacity: .4; }
.mu-pls-it i:hover { opacity: 1; color: #ff6b6b; }
.mu-pls-empty { font-size: .72em; color: var(--muted); padding: 2px 4px; }
.mu-eqbtn { justify-content: center; margin-top: 6px; }

.mu-row { grid-template-columns: 40px 1fr auto 24px 24px 20px; cursor: pointer; }
.mu-row-btn {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 1em;
  width: 24px; height: 24px; border-radius: 50%;
  opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.mu-row:hover .mu-row-btn { opacity: 1; }
.mu-row-btn.mu-like.on { opacity: 1; color: #ef4444; }
.mu-row-btn:hover { color: var(--accent); }

.mu-eq {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--win-bg, var(--bg)) 86%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  animation: setSubIn .28s cubic-bezier(.16,1,.3,1) both;
}
.mu-eq-head { display: flex; align-items: center; gap: 8px; }
.mu-eq-head b { flex: 1; font-size: .86em; }
.mu-eq-head .mu-ic.on { color: var(--accent); }
.mu-eq-cv { width: 100%; height: 46px; border-radius: 9px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
/* .mu-eq-bands / .mu-eq-band / .mu-eq-foot now live in the rebuilt equaliser
   block further down. The old 5-column grid + fixed 78px faders here fought
   the new layout (and the square slider thumb was invisible in Safari). */

.mu-plpick {
  position: fixed; z-index: 9500; min-width: 170px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6);
}
.mu-plpick button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 8px; border: none; background: none;
  color: var(--fg); font: inherit; font-size: .82em; cursor: pointer; text-align: left;
}
.mu-plpick button:hover { background: var(--chip); }
.mu-plpick i { font-style: normal; color: var(--accent); }
.mu-plpick-sep { height: 1px; background: var(--line); margin: 3px 0; }
.mu-plpick-empty { font-size: .76em; color: var(--muted); padding: 6px 8px; }

/* Storage pie polish: a soft ring around the donut and a hole that matches the
   card so it never looks like a stray circle. */
.sd-pie {
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 50%;
}
.sd-pie-hole {
  background: color-mix(in srgb, var(--win-bg, var(--bg)) 96%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
}
.sd-leg-row { display: flex; align-items: center; gap: 8px; font-size: .8em; }
.sd-leg-row i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sd-leg-row b { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Music tools (EQ + sleep timer) and sleep picker. */
.mu-tools { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.mu-tools .btnl { justify-content: center; }
.mu-sleepbtn.on { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   WINDOW DOTS: bullet-proof sizing.
   The traffic lights get relocated into each app's own header (chat gate,
   notes bar, ...). Inside a flex row/column parent they were stretching to the
   parent's cross size, which turned the yellow "minimise" dot into a long bar.
   These rules make each dot a rigid 12x12 no matter where it is mounted.
   ============================================================================ */
.wdots {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: center;
  gap: 7px;
  height: 12px;
  min-height: 12px;
  max-height: 12px;
}
.wdot {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  max-width: 12px;
  max-height: 12px;
  align-self: center;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 0;
}
/* Icons only appear when the group is hovered, drawn crisply centred. */
.wdots:hover .wdot {
  color: rgba(0, 0, 0, 0.6);
  font-size: 8px;
  line-height: 1;
}
/* The dots are a control cluster, never a drag surface. */
.win__bar .wdots { cursor: default; }
.cg-dots .wdots { height: 12px; }

/* ============================================================================
   SETTINGS AUTH FX v2: much more visible, theme-coloured success moments.
   Register = a bloom + spark burst, login = a rising lift + checkmark sweep,
   logout = a collapse + fade. Each draws on the active accent.
   ============================================================================ */
.auth-card { position: relative; }
.auth-card.fx-register { animation: authReg2 0.95s cubic-bezier(.16,1,.3,1); }
@keyframes authReg2 {
  0% { transform: scale(.94); opacity: .6; }
  25% { transform: scale(1.03); opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  55% { transform: scale(1); box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { transform: none; }
}
.auth-card.fx-login { animation: authLog2 0.8s cubic-bezier(.16,1,.3,1); }
@keyframes authLog2 {
  0% { transform: translateY(10px) scale(.98); opacity: .5; }
  40% { transform: translateY(-6px) scale(1.015); opacity: 1; }
  100% { transform: none; }
}
.auth-card.fx-logout { animation: authOut2 0.8s ease; }
@keyframes authOut2 {
  0% { transform: none; opacity: 1; }
  40% { transform: scale(.97); opacity: .35; filter: blur(2px) grayscale(.4); }
  100% { transform: none; opacity: 1; filter: none; }
}
/* A coloured glow that pulses behind the card during the gesture. */
.auth-card.fx-register::after,
.auth-card.fx-login::after {
  content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 22px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
  animation: authGlow2 0.95s ease-out forwards;
  pointer-events: none;
}
@keyframes authGlow2 { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .85; } 100% { opacity: 0; transform: scale(1.15); } }
/* Spark burst around the card centre. */
.auth-fx-ring {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; pointer-events: none; z-index: 4;
  border: 2px solid color-mix(in srgb, var(--accent) 85%, #fff);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: authRing2 0.95s cubic-bezier(.16,1,.3,1) forwards;
}
.auth-fx-ring.auth-fx-register { border-width: 3px; }
.auth-fx-logout { border-color: var(--muted); animation-direction: reverse; }
@keyframes authRing2 {
  0% { transform: scale(.3); opacity: 1; }
  70% { opacity: .5; }
  100% { transform: scale(14); opacity: 0; }
}
/* Success check that sweeps in after a successful register/login. */
.auth-okflash {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  font-size: 2.4em; font-weight: 800;
  color: var(--accent); pointer-events: none;
  animation: authOk 0.9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes authOk {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card.fx-register, .auth-card.fx-login, .auth-card.fx-logout,
  .auth-card.fx-register::after, .auth-card.fx-login::after,
  .auth-fx-ring, .auth-okflash { animation: none !important; }
}

/* "+" affordances: the last wallpaper swatch and the last theme card both open
   the full-screen builders. */
.sw-plus {
  display: grid !important;
  place-items: center;
  background: transparent !important;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
  color: var(--accent);
  font-size: 15px; font-weight: 800; line-height: 1;
  transition: transform .14s cubic-bezier(.16,1,.3,1), background .14s;
}
.sw-plus:hover { transform: scale(1.12); background: color-mix(in srgb, var(--accent) 14%, transparent) !important; }
.theme-card--plus {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  min-height: 78px;
}
.theme-card--plus:hover { border-color: var(--accent); transform: translateY(-2px); }
.tc-plus { font-size: 1.5em; font-weight: 800; color: var(--accent); line-height: 1; }

/* ============================================================================
   WINDOW TITLE BAR: give the reserved strip a real, readable top edge.
   The bar was fully transparent so the dots floated over whatever was behind
   the (semi-transparent) window, which read as a broken/cut title. A faint
   glass strip + hairline keeps it legible at any window-opacity setting while
   staying out of the way. Apps with their own header still sit underneath and
   are fully clickable (the strip is pointer-events:none).
   ============================================================================ */
.win__bar {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--win-bar-bg, var(--bg-2)) 92%, transparent),
    color-mix(in srgb, var(--win-bar-bg, var(--bg-2)) 70%, transparent)
  );
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* When the window is not focused, calm the strip down. */
.win:not(.focus-win) .win__bar { opacity: .72; }
/* Keep the dots vertically centred in the strip regardless of app. */
.win__bar .wdots { margin-left: auto; }
/* On desktop the title stays hidden (apps carry their own), but if a window has
   no in-app header we can show it as a fallback. */
.win__bar[data-emptytitle] .win__title { display: block; }

/* ============================================================================
   Window glass: with the window-opacity setting, a window can be translucent.
   Without a backdrop blur the text BEHIND it stayed sharp and bled through,
   which made every window look smudged/broken. A blur turns that into proper
   frosted glass: you sense the wallpaper, never read the content behind.
   ============================================================================ */
.win {
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
/* Paper is meant to be flat ink on paper; no glass there. */
[data-theme="paper"] .win { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  .win { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================================================
   CALCULATOR
   ============================================================================ */
.calc { display: flex; flex-direction: column; height: 100%; gap: 8px; padding: 4px; }
.calc-tape { min-height: 42px; max-height: 72px; overflow-y: auto; font-size: .72em; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.calc-tape div { padding: 1px 0; }
.calc-out { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.calc-out span { font-size: .72em; color: var(--muted); min-height: 1em; font-variant-numeric: tabular-nums; }
.calc-out b { font-size: 2.1em; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.calc-keys { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ck {
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg); font: inherit; font-size: 1.1em; font-weight: 600;
  transition: background .12s ease, transform .1s ease;
}
.ck:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.ck:active { transform: scale(.96); }
.ck-fn { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.ck-op { background: var(--accent); color: var(--bg); border-color: transparent; }
.ck-op:hover { filter: brightness(1.12); }
.ck-zero { grid-column: span 2; }

/* ============================================================================
   CALENDAR
   ============================================================================ */
.cal { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.cal-head { display: flex; align-items: center; gap: 10px; }
.cal-head b { flex: 1; font-size: 1.05em; text-transform: capitalize; }
.cal-nav { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: none; color: var(--fg); cursor: pointer; font-size: 1.1em; }
.cal-nav:hover { border-color: var(--accent); color: var(--accent); }
.cal-today { margin-left: auto; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: .8em; cursor: pointer; }
.cal-today:hover { border-color: var(--accent); color: var(--accent); }
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: .68em; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  position: relative; aspect-ratio: 1; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--fg);
  font: inherit; font-size: .86em; display: grid; place-items: center;
}
.cal-cell:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.cal-cell.empty { visibility: hidden; }
.cal-cell.today { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); font-weight: 800; }
.cal-cell.on { background: var(--accent); color: var(--bg); font-weight: 800; }
.cal-cell i { position: absolute; bottom: 4px; font-style: normal; font-size: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cal-cell.on i { background: var(--bg); }
.cal-day { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--line); padding-top: 8px; }
.cal-day-head { font-size: .8em; font-weight: 800; color: var(--muted); text-transform: capitalize; }
.cal-ev { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, var(--fg) 6%, transparent); font-size: .84em; }
.cal-ev span { flex: 1; }
.cal-ev button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1.1em; }
.cal-ev button:hover { color: #ff6b6b; }
.cal-empty { font-size: .78em; color: var(--muted); }
.cal-add { display: flex; gap: 6px; margin-top: auto; }
.cal-add input { flex: 1; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: .84em; }

/* Calculator: numbers must never overflow their display. The value line auto
   shrinks to fit and the tape wraps instead of pushing the layout. */
.calc-out { overflow: hidden; }
.calc-out b {
  font-size: clamp(1.3em, 9vw, 2.1em);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.calc-out span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc { min-width: 0; }
.calc-keys { min-height: 0; }
.ck { min-width: 0; overflow: hidden; }
/* Long results shrink instead of clipping mid-digit. */
.calc-out b[data-len="long"] { font-size: clamp(1em, 6.5vw, 1.5em); }
.calc-tape { overflow-wrap: anywhere; }

/* Music: loading skeleton while the online list is fetched. */
.mu-skel { display: flex; flex-direction: column; gap: 4px; }
.mu-skel-row { display: flex; align-items: center; gap: 11px; padding: 8px 11px; }
.mu-skel-row span {
  width: 40px; height: 40px; border-radius: 9px; flex: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 8%, transparent), color-mix(in srgb, var(--fg) 16%, transparent), color-mix(in srgb, var(--fg) 8%, transparent));
  background-size: 200% 100%;
  animation: muShimmer 1.2s linear infinite;
}
.mu-skel-row i {
  height: 12px; border-radius: 6px; flex: 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 8%, transparent), color-mix(in srgb, var(--fg) 16%, transparent), color-mix(in srgb, var(--fg) 8%, transparent));
  background-size: 200% 100%;
  animation: muShimmer 1.2s linear infinite;
}
@keyframes muShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================================================================
   SIGN-IN PAGE LAYOUTS (independent of the entrance animation)
   ============================================================================ */
#login { display: grid; place-items: center; }
.login-stage { display: flex; align-items: center; justify-content: center; gap: 42px; z-index: 2; }
.login-art { display: none; }
/* --- card (default, classic single card) --- */
#login[data-page="card"] .login-stage { gap: 0; }
/* --- split: brand art left, form right --- */
#login[data-page="split"] .login-stage { flex-direction: row; }
#login[data-page="split"] .login-art {
  display: flex; flex-direction: column; gap: 10px;
  padding: 30px 34px; border-radius: 18px; max-width: 320px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent, #ff7a45) 22%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--accent, #ff7a45) 30%, transparent);
}
.login-art-logo { font-size: 2.1em; font-weight: 800; letter-spacing: -.02em; }
.login-art-logo span { color: var(--accent, #ff7a45); }
.login-art-tag { font-size: .9em; color: var(--muted, #b6b0a6); }
.login-art-dots { display: flex; gap: 6px; margin-top: 6px; }
.login-art-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #ff7a45); opacity: .5; }
.login-art-dots i:nth-child(2) { opacity: .75; }
.login-art-dots i:nth-child(3) { opacity: 1; }
/* --- minimal: wordmark + button only --- */
#login[data-page="minimal"] .login-stage { flex-direction: column; }
#login[data-page="minimal"] .login-card {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 10px !important;
}
#login[data-page="minimal"] .login-badge,
#login[data-page="minimal"] .login-sub,
#login[data-page="minimal"] .login-orb,
#login[data-page="minimal"] .login-hint,
#login[data-page="minimal"] .login-status { display: none; }
#login[data-page="minimal"] .login-logo { font-size: 2.6em; }
#login[data-page="minimal"] .login-name { font-size: 1.1em; opacity: .8; }
/* --- glass: frosted wide panel --- */
#login[data-page="glass"] .login-card {
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  box-shadow: 0 30px 70px -24px #000b, inset 0 1px 0 #ffffff2a;
}
@media (max-width: 720px) {
  #login[data-page="split"] .login-stage { flex-direction: column; gap: 18px; }
  #login[data-page="split"] .login-art { max-width: none; width: min(340px, 88vw); }
}

/* ============================================================================
   REALISTIC (default) SIGN-IN ANIMATION: a calm, believable unlock.
   A short settle, a soft light wipe, no spinning or glitching.
   ============================================================================ */
#login[data-variant="realistic"]:not(.bye) .login-card { animation-name: lvRealistic; animation-timing-function: cubic-bezier(.2,.8,.25,1); }
@keyframes lvRealistic {
  0% { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(3px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
#login[data-variant="realistic"] .login-card::before { animation-duration: calc(var(--loginfx-dur, 1s) * 1.2); }

/* Calendar: world-day markers, special-day list, reminders. */
.cal-cell.world { position: relative; }
.cal-cell.world u { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #f5a524; }
.cal-cell.on u { background: var(--bg); }
.cal-cell i { left: 50%; transform: translateX(-50%); }
.cal-special { display: flex; flex-direction: column; gap: 4px; }
.cal-special span {
  font-size: .82em; font-weight: 700;
  color: color-mix(in srgb, #f5a524 90%, var(--fg));
  background: color-mix(in srgb, #f5a524 14%, transparent);
  padding: 6px 10px; border-radius: 9px;
}
.cal-rem { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .84em; }
.cal-rem span { flex: 1; }
.cal-rem button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1.1em; }
.cal-rem button:hover { color: #ff6b6b; }
.cal-add--rem { margin-top: 4px; }
.cal-add--rem input[type="time"] {
  padding: 8px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); font: inherit; font-size: .84em;
}
.cal-day { gap: 5px; }

/* ============================================================================
   MUSIC APP LAYOUT FIX
   The window body is a scroll container with a 30px top pad, so `height: 100%`
   on the app root resolved against the wrong box: the track list grew to its
   full content height (thousands of px), pushed the player bar off-screen and
   the app looked empty/unusable. Pin the app to the body's content box and make
   the list the only scrolling region.
   ============================================================================ */
#win-music .win__body { overflow: hidden; display: block; }
#win-music .win__body > .mu {
  height: calc(100% - var(--winbar-h, 30px));
  max-height: calc(100% - var(--winbar-h, 30px));
  min-height: 0;
}
/* On mobile the body already reserves the nav bar with its top padding, so
   subtracting --winbar-h a second time left a dead band under the player bar.
   There the app simply fills the body's content box. */
@media (max-width: 720px) {
  #win-music .win__body > .mu {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
}
.mu-main { min-height: 0; overflow: hidden; }
.mu-list { min-height: 0; }
.mu-side { min-height: 0; overflow-y: auto; }
.mu-pls { min-height: 0; }
.mu-pls-list { overflow-y: auto; }
/* The bar must always be visible, so it can never be squeezed to nothing. */
.mu-bar { flex: none; }

/* ============================================================================
   WORKSPACE SWITCHER v2: a proper segmented capsule.
   The old design was a row of bare 9px rings, which read as noise. Now it is a
   single rounded control: each space is a segment showing its number, the
   active one rides on an accent puck, and there is one clear "+" to add more.
   ============================================================================ */
.ws-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent);
}
.ws-dot {
  width: 20px; height: 16px;
  padding: 0; border: none; border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font: inherit; font-size: 10px; font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background .18s cubic-bezier(.16,1,.3,1), color .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.ws-dot:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); color: var(--fg); }
.ws-dot.on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 70%, transparent);
  transform: none;
}
[data-mode="light"] .ws-dot.on { color: #fff; }
/* A small dot under the number marks spaces that actually hold windows. */
.ws-dot.has-wins::after {
  content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .7;
}
.ws-dot.on.has-wins::after { background: #fff; opacity: .9; }
.ws-dot.drop { transform: scale(1.35); background: var(--accent); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-add {
  width: 18px; height: 16px; padding: 0; border: none; border-radius: 999px;
  background: transparent; color: color-mix(in srgb, var(--fg) 55%, transparent);
  font: inherit; font-size: 11px; font-weight: 800; line-height: 1;
  cursor: pointer; display: inline-grid; place-items: center;
  transition: background .14s ease, color .14s ease;
}
.ws-add:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); color: var(--fg); }

/* ============================================================================
   TRACKPAD GESTURE SETTINGS: one explained row per gesture.
   ============================================================================ */
.gest-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.gest-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.gest-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gest-txt b { font-size: .88em; font-weight: 700; }
.gest-txt span { font-size: .74em; color: var(--muted); line-height: 1.45; }
.sw-tog {
  flex: none; width: 42px; height: 24px; border-radius: 999px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  cursor: pointer; position: relative; transition: background .18s ease, border-color .18s ease;
}
.sw-tog i {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px #0006;
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.sw-tog.on { background: var(--accent); border-color: var(--accent); }
.sw-tog.on i { transform: translateX(18px); }
.gest-mod { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.gest-mod .lbl { font-size: .84em; font-weight: 600; }
.gest-note {
  margin-top: 10px; font-size: .74em; line-height: 1.5; color: var(--muted);
  padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ============================================================================
   SETTINGS PROFILE CARD: an actual entrance, plus unmistakable success FX.
   The old "success" was a 0.75s scale that most people never noticed. These are
   designed to be seen: the card lifts in, and success draws a coloured ring,
   a bloom and a big tick, with the buttons sweeping through a shine.
   ============================================================================ */
.auth-card { animation: authCardIn .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: none; }
}
/* A rotating conic border that flashes on success. */
.auth-card.fx-register::before,
.auth-card.fx-login::before,
.auth-card.fx-logout::before {
  content: ""; position: absolute; inset: -1px; border-radius: 17px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 55%, color-mix(in srgb, var(--accent) 85%, #fff) 78%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1.5px;
  animation: authSweep .9s cubic-bezier(.16,1,.3,1) forwards;
}
.auth-card.fx-logout::before { background: conic-gradient(from 0deg, transparent 0 60%, color-mix(in srgb, var(--fg) 55%, transparent) 80%, transparent 100%); }
@keyframes authSweep {
  0% { opacity: 0; transform: rotate(-40deg) scale(.96); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(20deg) scale(1); }
}
/* Big, obvious success tick in the middle of the card. */
.auth-okflash {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  font-size: 3.2em; font-weight: 800; line-height: 1;
  color: var(--accent);
  text-shadow: 0 6px 26px color-mix(in srgb, var(--accent) 75%, transparent);
  pointer-events: none;
  animation: authOkBig .95s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes authOkBig {
  0% { opacity: 0; transform: scale(.2) rotate(-25deg); }
  28% { opacity: 1; transform: scale(1.18) rotate(4deg); }
  46% { transform: scale(1) rotate(0); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}
/* A halo that expands behind the card. */
.auth-card.fx-register, .auth-card.fx-login { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.auth-card.fx-register { animation: authRegBig .85s cubic-bezier(.16,1,.3,1) both; }
@keyframes authRegBig {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  32% { transform: scale(1.025); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { transform: none; }
}
.auth-card.fx-login { animation: authLogBig .72s cubic-bezier(.16,1,.3,1) both; }
@keyframes authLogBig {
  0% { transform: translateY(10px); opacity: .55; }
  45% { transform: translateY(-5px); opacity: 1; }
  100% { transform: none; }
}
.auth-card.fx-logout { animation: authOutBig .8s ease both; }
@keyframes authOutBig {
  0% { opacity: 1; }
  40% { opacity: .35; transform: scale(.975); filter: blur(1.6px) saturate(.5); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Hold the card visible while the FX class is on it (opacity: both can park at 0). */
.auth-card.fx-register, .auth-card.fx-login, .auth-card.fx-logout { opacity: 1; }
.auth-card.shake { animation: authShake .45s ease; }
@keyframes authShake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-card.fx-register, .auth-card.fx-login, .auth-card.fx-logout,
  .auth-card.fx-register::before, .auth-card.fx-login::before, .auth-card.fx-logout::before,
  .auth-okflash { animation: none !important; }
}

/* ============================================================================
   MUSIC: equaliser panel + playlist modal + covers + playing animation.
   ============================================================================ */
/* The EQ used to be a 4th grid row, but .mu only defines two rows, so it was
   squeezed to nothing and looked like it never opened. Float it over the app. */
.mu { position: relative; }
.mu-eq {
  position: absolute;
  left: 10px; right: 10px; bottom: 96px;
  z-index: 30;
  grid-column: auto;
  max-height: 60%;
  overflow-y: auto;
  box-shadow: 0 20px 50px -18px #000c;
  animation: muEqIn .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes muEqIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mu-eq[hidden] { display: none; }

/* Playlist modal */
.mu-modal {
  position: fixed; inset: 0; z-index: 9600;
  display: grid; place-items: center;
  background: color-mix(in srgb, #05070a 55%, transparent);
  backdrop-filter: blur(6px);
  animation: muModalIn .2s ease both;
}
@keyframes muModalIn { from { opacity: 0; } to { opacity: 1; } }
.mu-modal-card {
  width: min(520px, 92vw);
  border-radius: 18px; padding: 20px;
  background: var(--win-bg, var(--bg));
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px #000d;
  display: flex; flex-direction: column; gap: 16px;
  animation: muCardIn .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes muCardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.mu-modal-head { font-size: 1.05em; font-weight: 800; }
.mu-modal-body { display: flex; gap: 18px; align-items: flex-start; }
.mu-modal-art {
  width: 104px; height: 104px; flex: none; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 2.6em;
  box-shadow: 0 12px 30px -12px #000a, inset 0 1px 0 #ffffff2e;
}
.mu-modal-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mu-modal-lbl { font-size: .7em; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 4px; }
.mu-modal-inp {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); font: inherit; font-size: .9em;
}
.mu-modal-inp:focus { outline: none; border-color: var(--accent); }
.mu-covers { display: flex; flex-wrap: wrap; gap: 5px; }
.mu-cover {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 5%, transparent);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
  transition: transform .12s ease, border-color .12s ease;
}
.mu-cover:hover { transform: scale(1.12); }
.mu-cover.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.mu-grads { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-grad {
  width: 34px; height: 22px; border-radius: 7px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  transition: transform .12s ease;
}
.mu-grad:hover { transform: scale(1.08); }
.mu-grad.on { border-color: var(--fg); }
.mu-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* Playlist rows with cover art */
.mu-pls-it {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 8px; border-radius: 10px;
  border: none; background: none; color: var(--fg); font: inherit;
  cursor: pointer; text-align: left;
  transition: background .12s ease;
}
.mu-pls-it:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.mu-pls-it.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mu-pls-art {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-size: 13px;
  box-shadow: inset 0 1px 0 #ffffff26;
}
.mu-pls-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: .82em; font-weight: 600; overflow: hidden; }
.mu-pls-nm i { font-style: normal; font-size: .82em; font-weight: 500; color: var(--muted); }
.mu-pls-it em { font-style: normal; opacity: 0; color: var(--muted); font-size: 12px; padding: 0 3px; border-radius: 5px; }
.mu-pls-it:hover em { opacity: .8; }
.mu-pls-it em:hover { color: var(--accent); opacity: 1; }

/* A slow "now playing" pulse on the artwork so playback is obvious. */
.mu-art.playing, .mu-now.playing .mu-art {
  animation: muArtPulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
@keyframes muArtPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); transform: scale(1.035); }
}
/* Live bars overlay the artwork while playing. */
.mu-art { position: relative; overflow: hidden; }
.mu-art.playing::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%);
  animation: muArtGlow 2.2s ease-in-out infinite;
}
@keyframes muArtGlow { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
/* The currently playing row gets an accent bar. */
.mu-row.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mu-row.on .mu-row-ic, .mu-row.on::before { color: var(--accent); }

@media (max-width: 640px) {
  .mu-modal-body { flex-direction: column; align-items: center; }
  .mu-modal-right { width: 100%; }
  .mu-eq { bottom: 120px; left: 6px; right: 6px; }
}

/* Spotify-style "now playing" bars on the active row. */
.mu-row-eq { display: none; align-items: flex-end; gap: 2px; width: 15px; height: 14px; }
.mu-row.on .mu-row-eq { display: inline-flex; }
.mu-row-eq i {
  width: 3px; border-radius: 2px; background: var(--accent);
  animation: muEqBar .9s ease-in-out infinite;
}
.mu-row-eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.mu-row-eq i:nth-child(2) { height: 90%; animation-delay: .18s; }
.mu-row-eq i:nth-child(3) { height: 60%; animation-delay: .36s; }
@keyframes muEqBar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.mu-row.on .mu-row-art { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* Nice, varied cover art for tracks that have no image: a soft two-tone tile. */
.mu-row-art, .mu-art {
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}

/* ============================================================================
   CALCULATOR + CALENDAR: proper internal scrolling and mobile fit.
   ============================================================================ */
#win-calc .win__body, #win-calendar .win__body { overflow: hidden; display: block; }
#win-calc .win__body > .calc { height: calc(100% - var(--winbar-h, 30px)); min-height: 0; }
#win-calendar .win__body > .cal { height: calc(100% - var(--winbar-h, 30px)); min-height: 0; }
/* The month grid never scrolls; only the day detail scrolls. */
.cal-grid { flex: none; }
.cal-day { min-height: 0; overflow-y: auto; }
.cal { overflow: hidden; }
/* Calculator keys keep a sane minimum so they never squash. */
.calc-keys { min-height: 220px; }

@media (max-width: 720px) {
  .cal { font-size: 0.94em; }
  .cal-cell { font-size: 0.8em; }
  .cal-add { flex-wrap: wrap; }
  .cal-add input { min-width: 0; }
  .calc-keys { min-height: 200px; gap: 6px; }
  .ck { font-size: 1em; }
  .calc-out b { font-size: clamp(1.2em, 7vw, 1.8em) !important; }
}
/* Landscape phones: the calculator must still fit. */
@media (max-height: 460px) {
  .calc-keys { min-height: 150px; }
  .calc-tape { display: none; }
}

/* ============================================================================
   AVATARS: give them depth and a sheen so they read as designed portraits,
   not flat colour chips. Each keeps its own gradient; we add a highlight, a
   soft inner ring and a subtle pattern on top.
   ============================================================================ */
.chat-av, .login-avatar, .auth-prev {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 16px -8px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.6);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  letter-spacing: 0;
}
.chat-av::before, .login-avatar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 25% 12%, rgba(255,255,255,.42), transparent 55%),
    radial-gradient(90% 70% at 80% 100%, rgba(255,255,255,.16), transparent 60%);
}
.chat-av::after, .login-avatar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.2px);
  background-size: 6px 6px;
  mix-blend-mode: overlay;
}
/* Bigger, ringed avatar in the profile panel. */
.auth-av-lg, .chat-av-lg { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 24px -10px rgba(0,0,0,.7); }
.chat-av-pick { cursor: pointer; transition: transform .14s cubic-bezier(.16,1,.3,1), box-shadow .14s ease; }
.chat-av-pick:hover { transform: scale(1.14); }
.chat-av-pick.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 3px var(--accent), 0 8px 20px -8px rgba(0,0,0,.7); transform: scale(1.08); }
/* The "use a photo" tile sits with the colour picks. */
.chat-av-photo { display: inline-grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--fg) 8%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); font-size: 15px; }
.chat-av-photo:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* ============================================================================
   MUSIC APP ON SMALL SCREENS: the library does not turn into a cramped strip.
   It becomes a slide-over panel: hidden behind the ☰ button, pulled in from
   the left, dismissed with ‹ or a tap on the dimmed list.
   ============================================================================ */
@media (max-width: 760px) {
  .mu { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "main" "bar"; gap: 8px; padding: 8px; }
  .mu-bar { grid-template-columns: 1fr auto; gap: 8px; padding: 9px 10px; }
  .mu-mid { display: none; }
  #win-music .win__body > .mu { height: 100%; max-height: 100%; }
}
@media (max-width: 480px) {
  .mu-row { grid-template-columns: 34px 1fr auto; gap: 9px; padding: 7px 8px; }
  .mu-row-tag { display: none; }
}

/* Sleep-timer picker popover */
.mu-plpick {
  position: fixed; z-index: 9700; min-width: 150px;
  padding: 6px; border-radius: 12px;
  background: var(--win-bg, var(--bg));
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -14px #000c;
  display: flex; flex-direction: column; gap: 2px;
  animation: muModalIn .16s ease both;
}
.mu-plpick button {
  border: none; background: none; color: var(--fg); font: inherit; font-size: .84em;
  text-align: left; padding: 8px 11px; border-radius: 8px; cursor: pointer;
}
.mu-plpick button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mu-plpick-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.mu-sleepbtn.on { border-color: var(--accent); color: var(--accent); }

/* Calendar: the day panel must be visible without any scrolling when the app
   opens. The month grid keeps a fixed height and the day list starts right
   under it, so the add/reminder row is always in view. */
.cal { display: flex; flex-direction: column; gap: 8px; }
.cal-head { flex: none; }
.cal-wd { flex: none; }
.cal-grid { flex: none; }
.cal-day {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* A gentle hint arrow so it is obvious there is more below to scroll. */
.cal-day::after {
  content: "";
  display: block;
  height: 4px;
  flex: none;
}

/* The calendar's "add event" rows are sticky at the bottom of the day panel so
   they are ALWAYS on screen the moment the app opens, with no hunting. */
.cal-day { padding-bottom: 0; }
.cal-add {
  position: sticky; bottom: 0;
  background: color-mix(in srgb, var(--win-bg, var(--bg)) 92%, transparent);
  backdrop-filter: blur(6px);
  padding: 6px 0 2px;
  margin-top: auto;
}
.cal-add--rem { margin-top: 0; }
.cal-day > *:not(.cal-add) { flex: none; }

/* Calendar footer: the add/reminder inputs, always visible, never scrolled. */
.cal-addbar {
  flex: none;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cal-addbar .cal-add { position: static; background: none; backdrop-filter: none; padding: 0; margin: 0; }
.cal-addbar .cal-add--rem { margin: 0; }
/* The day list scrolls between the grid and the fixed footer. */
.cal-day { flex: 1 1 auto; min-height: 60px; overflow-y: auto; }
.cal-day::after { display: none; }

/* Calendar grid must FIT, not dictate. Cells were aspect-ratio:1 so 7 rows
   demanded ~500px and pushed the day list and the add-bar off the window.
   Let the grid take a bounded share and scale the cells to it. */
#win-calendar .cal-grid {
  flex: 0 1 auto;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
  align-content: start;
}
#win-calendar .cal-cell {
  aspect-ratio: auto;
  min-height: 26px;
  max-height: 42px;
}
#win-calendar .cal-day { flex: 1 1 auto; min-height: 70px; }
#win-calendar .cal-addbar { flex: none; }

/* When a real photo fills the avatar, drop the pattern overlay so the face is
   clean and undistorted. */
.chat-av.has-photo::after, .login-avatar.has-photo::after { display: none; }
.chat-av.has-photo::before, .login-avatar.has-photo::before { background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.25), transparent 55%); }

/* ============================================================================
   SIGN-IN, TONED DOWN AND POLISHED
   The default "realistic" entrance was still surrounded by spinning orbit
   rings, a pulsing glow and a busy starfield, which read as over-the-top. This
   pass keeps the calm, believable motion and strips the visual noise, so the
   screen feels like a real OS lock screen rather than a landing page.
   ============================================================================ */
/* 1. The default variant: one gentle settle. No scale, no blur bloom. */
#login[data-variant="realistic"]:not(.bye) .login-card {
  animation: lvCalm 0.55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes lvCalm {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* 2. Quiet the orbit rings: slow, thin, low contrast. */
#login .login-orb-ring { border-width: 1px; opacity: .28; animation-duration: 9s; }
#login .login-orb-ring.d2 { opacity: .16; animation-duration: 14s; }
/* 3. Starfield becomes a very subtle dust, not a twinkle storm. */
#login .login-stars { opacity: .5; }
#login .login-rings { opacity: .35; }
/* 4. Drop the pulsing glow behind the card. */
#login .login-glow, #login .login-card::before { display: none !important; }
/* 5. A refined card: restrained border, soft depth, no neon. */
#login .login-card {
  background: color-mix(in srgb, var(--win-bg, #12101a) 94%, transparent);
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  border-radius: 20px;
  box-shadow: 0 26px 70px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 34px 30px 28px;
  gap: 0;
}
/* 6. Typographic hierarchy: the wordmark leads, everything else supports it. */
#login .login-badge {
  font-size: .62em; letter-spacing: .18em; text-transform: uppercase;
  opacity: .62; border: none; background: none; padding: 0;
}
#login .login-logo { font-size: 2.05em; letter-spacing: -.02em; margin-top: 4px; }
#login .login-sub { font-size: .78em; color: var(--muted); margin-top: 2px; }
/* 7. The avatar sits in a clean ring, no double halo. */
#login .login-orb { margin: 20px 0 10px; }
#login .login-avatar {
  width: 62px; height: 62px; font-size: 20px;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 14%, transparent), 0 8px 22px -10px rgba(0,0,0,.8);
}
#login .login-orb-ring { display: none; }
/* 8. Name + status: calm, not shouting. */
#login .login-name { font-size: 1.02em; font-weight: 700; }
#login .login-status {
  font-size: .66em; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}
/* 9. A single, confident primary action. */
#login .login-btn {
  margin-top: 18px; width: 100%;
  padding: 12px 20px; border-radius: 11px;
  font-size: .86em; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
#login .login-btn:hover { filter: brightness(1.06); }
#login .login-hint { font-size: .66em; opacity: .55; margin-top: 12px; }
/* 10. Stagger the sub-elements gently, once. */
#login:not(.bye) .login-badge,
#login:not(.bye) .login-logo,
#login:not(.bye) .login-sub,
#login:not(.bye) .login-orb,
#login:not(.bye) .login-name,
#login:not(.bye) .login-status,
#login:not(.bye) .login-btn,
#login:not(.bye) .login-hint { animation: lvItemIn .45s cubic-bezier(.22,.61,.36,1) both; }
#login:not(.bye) .login-badge { animation-delay: .02s; }
#login:not(.bye) .login-logo { animation-delay: .06s; }
#login:not(.bye) .login-sub { animation-delay: .10s; }
#login:not(.bye) .login-orb { animation-delay: .14s; }
#login:not(.bye) .login-name { animation-delay: .18s; }
#login:not(.bye) .login-status { animation-delay: .22s; }
#login:not(.bye) .login-btn { animation-delay: .26s; }
#login:not(.bye) .login-hint { animation-delay: .30s; }
@keyframes lvItemIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #login .login-card, #login .login-badge, #login .login-logo, #login .login-sub,
  #login .login-orb, #login .login-name, #login .login-status, #login .login-btn,
  #login .login-hint, #login .login-orb-ring { animation: none !important; }
}

/* Initials avatar: bold, crisp, with a subtle inner bevel. */
#login .login-avatar { font-weight: 800; letter-spacing: -.01em; }
#login .login-avatar.has-photo { font-size: 0; }

/* Music row artwork: a coloured tile underneath the cover image, so a row never
   shows as an empty grey square while its cover is still downloading. */
.mu-row-art {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  background-color: color-mix(in srgb, var(--accent) 30%, var(--bg-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  flex: none;
}
/* A soft note glyph sits behind the image while it loads. */
.mu-row-art::before {
  content: "♪";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 15px;
  color: rgba(255,255,255,.55);
  z-index: 0;
}
.mu-row-art { background-blend-mode: normal; }
/* The now-playing artwork gets the same treatment at a larger size. */
.mu-art {
  background-color: color-mix(in srgb, var(--accent) 26%, var(--bg-2));
}

/* ============================================================================
   MUSIC SIDEBAR: playlists must always be visible.
   The layout fix that made the track list scroll also set `min-height: 0` on
   .mu-pls, so the playlist block collapsed to 0px and created playlists were
   invisible even though they existed. Give the block its natural height and let
   ONLY the list inside it scroll.
   ============================================================================ */
.mu-pls {
  flex: 0 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mu-pls-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 168px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.mu-pls-empty { font-size: .74em; color: var(--muted); padding: 2px 2px 4px; }
/* The playlist row: cover, name + count, edit and delete. */
.mu-pls-it {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 9px;
  border: none;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.mu-pls-it:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.mu-pls-it.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mu-pls-art {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.mu-pls-nm {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  font-size: .8em; font-weight: 600;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mu-pls-nm i { font-style: normal; font-size: .86em; font-weight: 500; color: var(--muted); }
.mu-pls-it em, .mu-pls-it > i {
  font-style: normal; color: var(--muted); font-size: 12px;
  padding: 0 3px; border-radius: 4px; flex: none;
}
.mu-pls-it em:hover { color: var(--accent); }
.mu-pls-it > i:hover { color: #ff6b6b; }
/* The sidebar itself keeps its own scroll if the window is short. */
.mu-side { overflow-y: auto; }

/* ============================================================================
   LOGIN ANIMATION PREVIEW: a real, visible stage so each variant can be judged.
   ============================================================================ */
.lp-stage {
  position: fixed; inset: 0; z-index: 9700;
  display: grid; place-items: center; gap: 16px;
  grid-template-rows: 1fr auto;
  padding: 30px;
  background: color-mix(in srgb, #05070a 62%, transparent);
  backdrop-filter: blur(7px);
  animation: lpFade .18s ease both;
}
@keyframes lpFade { from { opacity: 0; } to { opacity: 1; } }
.lp-frame {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  perspective: 1200px;
}
.lp-card { animation: none; }
/* Each variant reuses its own keyframes, applied only while previewing. */
.lp-card.lp-run[data-fx="realistic"] { animation: lvRealistic .9s cubic-bezier(.22,.61,.36,1) both; }
.lp-card.lp-run[data-fx="rise"] { animation: lvRise .9s cubic-bezier(.16,1,.3,1) both; }
.lp-card.lp-run[data-fx="bloom"] { animation: lvBloom .9s cubic-bezier(.22,1.4,.36,1) both; }
.lp-card.lp-run[data-fx="portal"] { animation: lvPortal .9s cubic-bezier(.16,1,.3,1) both; }
.lp-card.lp-run[data-fx="glitch"] { animation: lvGlitch .9s steps(5, end) both; }
.lp-card.lp-run[data-fx="orbit"] { animation: lvOrbit .9s cubic-bezier(.16,1,.3,1) both; }
.lp-card.lp-run[data-fx="liquid"] { animation: lvLiquid .9s cubic-bezier(.22,1.5,.36,1) both; }
.lp-card.lp-run[data-fx="shatter"] { animation: lvShatter .9s cubic-bezier(.16,1,.3,1) both; }
.lp-card.lp-run[data-fx="flip3d"] { animation: lvFlip .9s cubic-bezier(.16,1,.3,1) both; }
.lp-card.lp-run[data-fx="typewriter"] { animation: lvType .9s steps(14, end) both; }
.lp-card.lp-run[data-fx="zoomblur"] { animation: lvZoom .9s cubic-bezier(.16,1,.3,1) both; }
.lp-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--win-bg, var(--bg));
  border: 1px solid var(--line);
  font-size: .82em;
}
.lp-bar b { color: var(--accent); }
.lp-bar .btnl { margin-left: auto; }
.lp-bar .btnl + .btnl { margin-left: 0; }
/* The preview card looks like the real one but is self-contained. */
.lp-card {
  background: color-mix(in srgb, var(--win-bg, #12101a) 96%, transparent);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  border-radius: 20px;
  padding: 30px 28px 24px;
  width: 300px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 26px 70px -28px rgba(0,0,0,.85);
}
.lp-card .login-avatar { width: 58px; height: 58px; font-size: 19px; }
.lp-card .login-orb-ring { display: none; }
.lp-card .login-btn { margin-top: 16px; width: 100%; padding: 11px; border-radius: 11px; }

/* ============================================================================
   EACH SIGN-IN ANIMATION NOW ENDS DIFFERENTLY
   The old set shared one identical particle burst at the end (the "strange
   arc"), so every choice looked the same. Each keyframe below has its own
   distinct settle, and there is no shared outro any more.
   ============================================================================ */
@keyframes lvRise {
  0% { opacity: 0; transform: translateY(46px); }
  70% { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvBloom {
  0% { opacity: 0; transform: scale(.72) rotate(-2deg); filter: blur(6px); }
  60% { opacity: 1; transform: scale(1.04) rotate(.4deg); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes lvPortal {
  0% { opacity: 0; transform: scale(.2) rotate(18deg); filter: brightness(2.4); }
  55% { opacity: 1; transform: scale(1.06) rotate(-2deg); filter: brightness(1.15); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes lvGlitch {
  0% { opacity: 0; transform: translateX(-14px) skewX(9deg); }
  20% { opacity: 1; transform: translateX(10px) skewX(-7deg); }
  40% { transform: translateX(-6px) skewX(4deg); }
  60% { transform: translateX(4px) skewX(-2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvOrbit {
  0% { opacity: 0; transform: rotate(-16deg) translateY(26px) scale(.9); }
  60% { opacity: 1; transform: rotate(3deg) translateY(-3px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvLiquid {
  0% { opacity: 0; transform: scale(.86, 1.14); }
  45% { opacity: 1; transform: scale(1.05, .96); }
  75% { transform: scale(.99, 1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvShatter {
  0% { opacity: 0; transform: scale(1.4); filter: blur(10px) contrast(2); }
  50% { opacity: 1; transform: scale(.97); filter: blur(0) contrast(1); }
  70% { transform: scale(1.02); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes lvFlip {
  0% { opacity: 0; transform: perspective(1000px) rotateY(96deg) scale(.9); }
  65% { opacity: 1; transform: perspective(1000px) rotateY(-7deg) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvType {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes lvZoom {
  0% { opacity: 0; transform: scale(1.9); filter: blur(14px); }
  55% { opacity: 1; transform: scale(.98); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ============================================================================
   ABOUT: a portfolio page that actually sells the person.
   Clear hierarchy: hero -> pitch -> numbers -> work -> stack -> education ->
   one obvious call to action.
   ============================================================================ */
#win-about .win__body { overflow: hidden; }
.ab {
  height: calc(100% - var(--winbar-h, 30px));
  overflow-y: auto;
  padding: 4px 2px 18px;
  display: flex; flex-direction: column; gap: 22px;
}
/* --- hero --- */
.ab-hero {
  position: relative;
  display: flex; align-items: center; gap: 20px;
  padding: 24px 22px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.ab-hero-glow {
  position: absolute; width: 320px; height: 320px; right: -90px; top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 68%);
  filter: blur(38px); pointer-events: none;
}
.ab-av {
  width: 92px; height: 92px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--accent) 30%, var(--bg-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent), 0 16px 34px -16px rgba(0,0,0,.85);
}
.ab-hero-txt { min-width: 0; position: relative; z-index: 1; }
.ab-name {
  margin: 0; font-size: 1.85em; font-weight: 800; letter-spacing: -.025em; line-height: 1.1;
}
.ab-dot { color: var(--accent); }
.ab-role { margin: 6px 0 0; font-size: .84em; color: var(--muted); }
.ab-role i { opacity: .45; font-style: normal; margin: 0 3px; }
.ab-avail {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px 0 0; padding: 5px 11px 5px 9px;
  border-radius: 999px; font-size: .72em; font-weight: 700;
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 14%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
}
.ab-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 70%, transparent);
  animation: abPulse 2s ease-out infinite;
}
@keyframes abPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 70%, transparent); }
  70% { box-shadow: 0 0 0 8px color-mix(in srgb, #22c55e 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 0%, transparent); }
}
/* --- pitch --- */
/* The opening paragraph is the one thing every visitor reads, so it gets the
   largest body size on the page, generous leading and full-strength ink. The
   old .9em / 82% ink read as fine print against the hero. */
.ab-pitch {
  margin: 0; font-size: 1.02em; line-height: 1.85;
  color: var(--fg);
  max-width: 62ch;
  text-wrap: pretty;
}
.ab-pitch b { color: var(--fg); font-weight: 700; }
/* --- numbers --- */
.ab-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.ab-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 8px; border-radius: 13px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.ab-stat b { font-size: 1.5em; font-weight: 800; color: var(--accent); line-height: 1; }
.ab-stat span { font-size: .66em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: center; }
/* --- section titles --- */
.ab-sec-title {
  font-size: .68em; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
  padding-bottom: 8px; margin-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}
/* --- work cards --- */
.ab-work { display: flex; flex-direction: column; gap: 12px; }
.ab-w {
  position: relative;
  padding: 16px 18px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  transition: transform .16s cubic-bezier(.16,1,.3,1), border-color .16s ease, background .16s ease;
}
.ab-w:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tint) 55%, transparent);
  background: color-mix(in srgb, var(--tint) 7%, transparent);
}
.ab-w-head { display: flex; align-items: center; gap: 11px; }
.ab-w-ic {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px; font-size: 17px;
  background: color-mix(in srgb, var(--tint) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
}
.ab-w-head b { display: block; font-size: .98em; font-weight: 700; }
.ab-w-head span { display: block; font-size: .74em; color: var(--muted); }
.ab-w-blurb { margin: 10px 0 0; font-size: .82em; line-height: 1.65; color: color-mix(in srgb, var(--fg) 76%, transparent); }
.ab-w-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.ab-w-tags span {
  font-size: .66em; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--muted);
}
.ab-w-link {
  display: inline-block; margin-top: 11px;
  font-size: .76em; font-weight: 700; color: var(--tint);
  text-decoration: none;
}
.ab-w-link:hover { text-decoration: underline; }
/* --- skills --- */
.ab-skills { display: flex; flex-direction: column; gap: 11px; }
.ab-skill { display: flex; align-items: flex-start; gap: 14px; }
.ab-skill-g {
  flex: 0 0 108px; font-size: .72em; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  padding-top: 4px;
}
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chips span {
  font-size: .74em; font-weight: 600;
  padding: 5px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--fg);
}
/* --- education --- */
.ab-edus { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ab-edu {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 13px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.ab-edu-logo {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px; overflow: hidden;
  background: #fff; color: #111;
  font-size: .72em; font-weight: 800;
}
.ab-edu-logo img { width: 100%; height: 100%; object-fit: contain; }
.ab-edu-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ab-edu-txt b { font-size: .8em; font-weight: 700; }
.ab-edu-txt span { font-size: .7em; }
/* --- contact --- */
.ab-contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.ab-contact-txt { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ab-contact-txt b { font-size: 1.02em; font-weight: 800; }
.ab-contact-txt span { font-size: .8em; color: var(--muted); line-height: 1.5; }
.ab-contact-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-cta { text-decoration: none; }
.ab-foot {
  font-size: .68em; color: var(--muted); text-align: center;
  padding-top: 4px; opacity: .75;
}
@media (max-width: 640px) {
  .ab-stats { grid-template-columns: repeat(2, 1fr); }
  .ab-hero { flex-direction: column; text-align: center; gap: 14px; }
  .ab-av { width: 76px; height: 76px; }
  .ab-skill { flex-direction: column; gap: 6px; }
  .ab-skill-g { flex: none; padding-top: 0; }
  .ab-name { font-size: 1.5em; }
}

/* About hero was collapsing: inside a flex column the hero shrank to 50px and
   clipped the 92px avatar. Give it its natural height and never let it shrink. */
.ab > * { flex: 0 0 auto; }
.ab-hero {
  flex: 0 0 auto;
  min-height: 132px;
  align-items: center;
}
.ab-av { flex: 0 0 92px; }
.ab-hero-txt { flex: 1 1 auto; }
/* The pitch and the work list should also keep their natural height. */
.ab-pitch, .ab-work, .ab-work .ab-w, .ab-stats, .ab-skills, .ab-edus, .ab-contact { flex: 0 0 auto; }

/* ============================================================================
   LOGIN EXIT PER VARIANT
   Before this, pressing "login" always played the same lift-and-blur, so the
   animation you picked only affected the entrance. Each variant now gets its
   own leave motion, matched to its character.
   ============================================================================ */
#login.leaving[data-variant="realistic"] .login-card { animation: lxRealistic .52s cubic-bezier(.4,0,.2,1) both; }
@keyframes lxRealistic {
  to { opacity: 0; transform: translateY(-26px); }
}
#login.leaving[data-variant="rise"] .login-card { animation: lxRise .5s cubic-bezier(.5,0,.75,0) both; }
@keyframes lxRise {
  to { opacity: 0; transform: translateY(-110px); }
}
#login.leaving[data-variant="bloom"] .login-card { animation: lxBloom .55s cubic-bezier(.4,0,.6,1) both; }
@keyframes lxBloom {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  45% { opacity: 1; transform: scale(1.08); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.5); filter: blur(14px); }
}
#login.leaving[data-variant="portal"] .login-card { animation: lxPortal .55s cubic-bezier(.6,0,.8,.2) both; }
@keyframes lxPortal {
  0% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(.08) rotate(28deg); filter: brightness(2.6); }
}
#login.leaving[data-variant="glitch"] .login-card { animation: lxGlitch .5s steps(6, end) both; }
@keyframes lxGlitch {
  0% { opacity: 1; transform: none; }
  20% { transform: translateX(-16px) skewX(12deg); }
  40% { transform: translateX(14px) skewX(-10deg); opacity: .8; }
  60% { transform: translateX(-8px) skewX(6deg); opacity: .5; }
  100% { opacity: 0; transform: translateX(0); }
}
#login.leaving[data-variant="orbit"] .login-card { animation: lxOrbit .55s cubic-bezier(.4,0,.7,.2) both; }
@keyframes lxOrbit {
  to { opacity: 0; transform: rotate(22deg) translateY(-40px) scale(.86); }
}
#login.leaving[data-variant="liquid"] .login-card { animation: lxLiquid .55s cubic-bezier(.4,0,.6,1) both; }
@keyframes lxLiquid {
  0% { opacity: 1; transform: scale(1); }
  40% { transform: scale(1.06, .9); opacity: 1; }
  100% { opacity: 0; transform: scale(.7, 1.3); filter: blur(6px); }
}
#login.leaving[data-variant="shatter"] .login-card { animation: lxShatter .5s cubic-bezier(.4,0,.9,.3) both; }
@keyframes lxShatter {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(.5); filter: blur(12px) contrast(3); }
}
#login.leaving[data-variant="flip3d"] .login-card { animation: lxFlip .55s cubic-bezier(.4,0,.7,.2) both; }
@keyframes lxFlip {
  to { opacity: 0; transform: perspective(1000px) rotateY(-92deg) scale(.9); }
}
#login.leaving[data-variant="typewriter"] .login-card { animation: lxType .48s steps(16, end) both; }
@keyframes lxType {
  from { opacity: 1; clip-path: inset(0 0 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 100%); }
}
#login.leaving[data-variant="zoomblur"] .login-card { animation: lxZoom .5s cubic-bezier(.4,0,.6,1) both; }
@keyframes lxZoom {
  to { opacity: 0; transform: scale(2.1); filter: blur(18px); }
}
/* The shared ripple only belongs to the neutral unlock, so tone it down and let
   the card do the talking. */
#login.unlocking::after { border-color: color-mix(in srgb, var(--accent) 70%, #fff); opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  #login.leaving .login-card { animation: lxRealistic .25s ease both !important; }
}

/* ============================================================================
   EQUALISER, REBUILT
   ----------------------------------------------------------------------------
   The old panel was a 44px strip of 32 tiny bars over five 4px sliders turned
   with `rotate(-90deg)` and negative margins. On a wide window the bars merged
   into one orange line, the sliders drifted out of their columns, and nothing
   ever told you what the sound curve actually looked like.

   The new panel is one square-ish stage:
     - a <canvas> that draws the frequency grid, a live spectrum and the real
       filter response curve, all in the theme accent;
     - ten vertical faders laid on top of that curve, one per octave band, with
       the dB value above and the frequency below, so you can read the curve
       and move it in the same place;
     - presets and an on/off switch in the header that really bypass.
   ============================================================================ */
#win-music .win__body > .mu { position: relative; }
.mu-eq {
  position: absolute;
  left: 10px; right: 10px; bottom: 88px;
  z-index: 40;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--win-bg, var(--bg)) 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.9);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column; gap: 10px;
  max-height: 78%;
}
.mu-eq[hidden] { display: none; }
.mu-eq-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.mu-eq-head b { flex: 1; font-size: .84em; font-weight: 800; letter-spacing: .01em; }
.mu-eq-head .mu-ic {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; font-size: 13px;
}
.mu-eq-head .mu-ic:hover { color: var(--fg); border-color: var(--fg); }
.mu-eq-head .mu-ic.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* The stage: canvas behind, faders in front, dB scale on the right. */
.mu-eq-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30px;
  height: clamp(150px, 30vh, 230px);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 6%, transparent), transparent 40%, color-mix(in srgb, var(--fg) 4%, transparent)),
    color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  overflow: hidden;
}
.mu-eq-canvas {
  position: absolute; inset: 0 30px 0 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  border-radius: 12px 0 0 12px;
}
.mu-eq-racks {
  position: absolute; inset: 0 30px 0 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  padding: 6px 4px 4px;
  z-index: 2;
}
.mu-eq-scale {
  position: absolute; right: 0; top: 6px; bottom: 20px; width: 30px;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; padding-right: 7px;
  font-size: .58em; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
  border-left: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  pointer-events: none;
}
.mu-eq-band {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0;
}
.mu-eq-db {
  font-size: .62em; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.mu-eq-band span {
  font-size: .58em; color: var(--muted); text-transform: none;
  letter-spacing: .02em; line-height: 1;
}
/* A real vertical fader: native vertical orientation, so the hit target is the
   whole column and the thumb travels top (+12) to bottom (-12). */
.mu-eq-band input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  background: transparent;
  cursor: ns-resize;
  accent-color: var(--accent);
}
@supports not (writing-mode: vertical-lr) {
  .mu-eq-band input[type="range"] {
    width: 120px; height: 16px;
    margin: 40px -52px;
    transform: rotate(-90deg);
  }
}
/* Firefox styling for the vertical fader. */
.mu-eq-band input[type="range"]::-moz-range-track {
  width: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 20%, transparent);
}
.mu-eq-band input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}
/* When the EQ is bypassed the faders stay readable but clearly inactive. */
.mu-eq.is-off .mu-eq-racks { opacity: .45; }
.mu-eq.is-off .mu-eq-db { color: var(--muted); }
/* Presets + hint */
.mu-eq-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.mu-eq-foot button { font-size: .72em; padding: 5px 12px; border-radius: 999px; }
.mu-eq-hint { margin-left: auto; font-size: .62em; color: var(--muted); }
@media (max-width: 640px) {
  .mu-eq { bottom: 96px; left: 6px; right: 6px; padding: 10px; }
  .mu-eq-stage { height: 170px; }
  .mu-eq-racks { padding: 4px 0 4px; }
  .mu-eq-hint { display: none; }
}

/* The now-playing tile: gradient while the cover decodes, image on top. */
#mu-art {
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}
#mu-art.playing { animation: muArtPulse 2.2s ease-in-out infinite; }
/* The cover must never be stretched: cover-fit, centred, no repeat. */
#mu-art { background-repeat: no-repeat; background-position: center; background-size: cover; }

/* ============================================================================
   ABOUT: project cards, rebuilt.
   Each card is now a two-column layout: a tinted visual panel on the left with
   a crisp SVG mark, and the copy on the right. No floating emoji, nothing
   overlapping, and the tags and link sit on one tidy row at the bottom.
   ============================================================================ */
.ab-w {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-radius: 15px;
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.ab-w:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tint) 55%, transparent); }
/* The tinted art panel */
.ab-w-art {
  position: relative;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--tint) 42%, transparent), transparent 68%),
    color-mix(in srgb, var(--tint) 12%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--tint) 22%, transparent);
}
/* A soft diagonal sheen so the panel has depth without an image. */
.ab-w-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(255,255,255,.14), transparent 55%);
  pointer-events: none;
}
.ab-w-mark {
  position: relative; z-index: 1;
  width: 34px; height: 34px;
  color: #fff;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
.ab-w-mark svg { width: 100%; height: 100%; display: block; }
/* The copy column */
.ab-w-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 15px 0; min-width: 0; }
.ab-w-head { display: flex; flex-direction: column; gap: 2px; }
.ab-w-head b { font-size: 1em; font-weight: 800; letter-spacing: -.01em; }
.ab-w-head span { font-size: .74em; color: var(--muted); font-weight: 500; }
.ab-w-blurb { margin: 0; font-size: .82em; line-height: 1.6; color: color-mix(in srgb, var(--fg) 78%, transparent); }
/* Bottom row: tags on the left, link pinned right */
.ab-w-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 4px;
  flex-wrap: wrap;
}
.ab-w-tags { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.ab-w-tags span {
  font-size: .64em; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 28%, transparent);
  color: color-mix(in srgb, var(--tint) 70%, var(--fg));
}
.ab-w-link {
  margin: 0; flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .74em; font-weight: 800; color: var(--tint);
  text-decoration: none; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--tint) 34%, transparent);
  background: color-mix(in srgb, var(--tint) 10%, transparent);
}
.ab-w-link:hover { background: color-mix(in srgb, var(--tint) 22%, transparent); text-decoration: none; }
.ab-w-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

/* Education cards: align the logo and the text cleanly. */
.ab-edu { align-items: center; }
.ab-edu-txt { gap: 2px; }

@media (max-width: 560px) {
  .ab-w { grid-template-columns: 1fr; }
  .ab-w-art { height: 74px; border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--tint) 22%, transparent); }
  .ab-w-body { padding: 14px 16px 16px; }
}

/* The project card copy must be left-aligned: the About page is a centred
   flex column, and that was inherited by the card body, centring every line. */
.ab-w, .ab-w-body, .ab-w-head, .ab-w-blurb, .ab-w-foot, .ab-w-tags {
  text-align: left;
}
.ab-w-head { align-items: flex-start; }
.ab-w-head b, .ab-w-head span { text-align: left; }
.ab-w-body { align-items: stretch; }
.ab-w-foot { justify-content: flex-start; }
.ab-w-blurb { text-align: left; }
/* Section titles and the stats stay centred on the cards, but the pitch is a
   reading column, so keep it left-aligned too. */
.ab-pitch { text-align: left; }
.ab-sec-title { text-align: left; }

/* ============================================================================
   AFTER-LOGIN SCENES  (Settings -> "Scene after login")
   ----------------------------------------------------------------------------
   The sign-in screen used to have eleven entrance animations, but the moment you
   pressed "login" there was ONE hardcoded exit: the same lift-and-blur every
   time. This block makes that second half a first-class, selectable thing.

   How it works: JS writes the chosen id to <html data-enter-scene> and adds
   `.app-enter` to #desktop, #menubar and #dock at the same instant the login
   card starts to leave. Everything below keys off that attribute, so desktop,
   menubar and dock always move together, and no per-scene JS is needed.

   The default, `apple`, is modelled on macOS: the lock screen fades away from
   underneath while the desktop settles in with a whisper of zoom, the menubar
   drops in from the top and the dock rises from the bottom, all on the same
   0.9s ease. Nothing flashes, nothing explodes. If someone wants that, the
   louder scenes are one click away.
   ============================================================================ */

/* The old generic rules must not fight the scenes. */
/* The legacy #desktop.app-enter rule earlier in this file loses to the more
   specific html[data-enter-scene="..."] selectors below, so no reset is needed. */

/* Shared timing. Scenes that want to be slower override duration below. */
#desktop.app-enter,
#menubar.app-enter,
#dock.app-enter {
  will-change: transform, opacity, filter;
}

/* ---- 1. apple: the calm one (default) ------------------------------------ */
/* Desktop: a barely-there push-in. 1.035 -> 1 reads as "waking up", not zoom. */
html[data-enter-scene="apple"] #desktop.app-enter {
  animation: appleDesk .95s cubic-bezier(.25,.46,.45,.94) both;
}
html[data-enter-scene="apple"] #menubar.app-enter {
  animation: appleBar .8s cubic-bezier(.25,.46,.45,.94) both;
}
html[data-enter-scene="apple"] #dock.app-enter {
  animation: appleDock .9s cubic-bezier(.25,.46,.45,.94) .06s both;
}
@keyframes appleDesk {
  from { opacity: 0; transform: scale(1.035); }
  to { opacity: 1; transform: none; }
}
@keyframes appleBar {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes appleDock {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- 2. zoom ------------------------------------------------------------- */
html[data-enter-scene="zoom"] #desktop.app-enter {
  animation: zDesk .85s cubic-bezier(.16,1,.3,1) both;
}
html[data-enter-scene="zoom"] #menubar.app-enter,
html[data-enter-scene="zoom"] #dock.app-enter { animation: fadeIn .5s ease .2s both; }
@keyframes zDesk {
  from { opacity: 0; transform: scale(1.22); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---- 3. slideup ---------------------------------------------------------- */
html[data-enter-scene="slideup"] #desktop.app-enter {
  animation: sDesk .8s cubic-bezier(.16,1,.3,1) both;
}
html[data-enter-scene="slideup"] #menubar.app-enter,
html[data-enter-scene="slideup"] #dock.app-enter { animation: fadeIn .45s ease .12s both; }
@keyframes sDesk {
  from { opacity: 0; transform: translateY(56px); }
  to { opacity: 1; transform: none; }
}

/* ---- 4. fade ------------------------------------------------------------- */
html[data-enter-scene="fade"] #desktop.app-enter,
html[data-enter-scene="fade"] #menubar.app-enter,
html[data-enter-scene="fade"] #dock.app-enter { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- 5. flash: one white frame, then the desktop -------------------------- */
html[data-enter-scene="flash"] #desktop.app-enter {
  animation: fDesk .7s ease both;
}
html[data-enter-scene="flash"] #menubar.app-enter,
html[data-enter-scene="flash"] #dock.app-enter { animation: fadeIn .4s ease .16s both; }
html[data-enter-scene="flash"]::after {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: color-mix(in srgb, var(--fg) 92%, var(--bg));
  animation: fFlash .6s ease-out forwards;
}
@keyframes fDesk { from { opacity: 0; } to { opacity: 1; } }
@keyframes fFlash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }

/* ---- 6. burst: an expanding ring of accent light -------------------------- */
html[data-enter-scene="burst"] #desktop.app-enter {
  animation: bDesk .8s cubic-bezier(.16,1,.3,1) both;
}
html[data-enter-scene="burst"] #menubar.app-enter,
html[data-enter-scene="burst"] #dock.app-enter { animation: fadeIn .45s ease .18s both; }
html[data-enter-scene="burst"]::before {
  content: ""; position: fixed; left: 50%; top: 50%; z-index: 9990; pointer-events: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 85%, #fff);
  box-shadow: 0 0 60px 10px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: bRing .9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes bDesk {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes bRing {
  0% { transform: scale(.3); opacity: 1; }
  100% { transform: scale(60); opacity: 0; }
}

/* ---- 7. iris: a circular reveal from the centre (lock-screen style) ------ */
html[data-enter-scene="iris"] #desktop.app-enter {
  animation: iDesk 1s cubic-bezier(.16,1,.3,1) both;
}
html[data-enter-scene="iris"] #menubar.app-enter,
html[data-enter-scene="iris"] #dock.app-enter { animation: fadeIn .5s ease .3s both; }
@keyframes iDesk {
  from { opacity: 1; clip-path: circle(0% at 50% 50%); }
  to { opacity: 1; clip-path: circle(150% at 50% 50%); }
}

/* ---- 8. blinds: horizontal slats opening from the middle ---------------- */
html[data-enter-scene="blinds"] #desktop.app-enter {
  animation: blDesk 1s cubic-bezier(.16,1,.3,1) both;
}
html[data-enter-scene="blinds"] #menubar.app-enter,
html[data-enter-scene="blinds"] #dock.app-enter { animation: fadeIn .45s ease .25s both; }
@keyframes blDesk {
  0% {
    opacity: 0;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%, 0 50%, 100% 50%, 100% 50%, 0 50%);
  }
  40% { opacity: 1; }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ---- 9. grid: the desktop assembles tile by tile ------------------------- */
html[data-enter-scene="grid"] #desktop.app-enter {
  animation: gDesk 1.15s cubic-bezier(.22,.61,.36,1) both;
}
html[data-enter-scene="grid"] #menubar.app-enter,
html[data-enter-scene="grid"] #dock.app-enter { animation: fadeIn .5s ease .35s both; }
@keyframes gDesk {
  from {
    opacity: 0;
    clip-path: polygon(0 0, 33.4% 0, 33.4% 33.4%, 66.7% 33.4%, 66.7% 66.7%, 100% 66.7%, 100% 100%, 0 100%, 0 0);
    filter: blur(4px);
  }
  50% { opacity: 1; }
  to {
    opacity: 1; filter: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
  }
}

/* ---- 10. warp: a quick jump to light speed ------------------------------ */
html[data-enter-scene="warp"] #desktop.app-enter {
  animation: wDesk .85s cubic-bezier(.16,1,.3,1) both;
}
html[data-enter-scene="warp"] #menubar.app-enter,
html[data-enter-scene="warp"] #dock.app-enter { animation: fadeIn .4s ease .2s both; }
@keyframes wDesk {
  from { opacity: 0; transform: scale(.35); filter: blur(18px) brightness(1.6); }
  55% { opacity: 1; filter: blur(0) brightness(1.05); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---- 11. wipe: a clean left-to-right sweep ------------------------------ */
html[data-enter-scene="wipe"] #desktop.app-enter {
  animation: wpDesk .7s cubic-bezier(.65,0,.35,1) both;
}
html[data-enter-scene="wipe"] #menubar.app-enter,
html[data-enter-scene="wipe"] #dock.app-enter { animation: fadeIn .4s ease .15s both; }
@keyframes wpDesk {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---- 12. glitch: the terminal person's scene ---------------------------- */
html[data-enter-scene="glitch"] #desktop.app-enter {
  animation: glDesk .75s steps(6, end) both;
}
html[data-enter-scene="glitch"] #menubar.app-enter {
  animation: glBar .6s steps(5, end) .1s both;
}
html[data-enter-scene="glitch"] #dock.app-enter {
  animation: glDock .65s steps(5, end) .12s both;
}
html[data-enter-scene="glitch"]::after {
  content: ""; position: fixed; inset: 0; z-index: 9989; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 4px);
  animation: glScan .75s ease-out forwards;
}
@keyframes glDesk {
  0% { opacity: 0; transform: translateX(-14px) skewX(6deg); filter: hue-rotate(60deg); }
  30% { opacity: 1; transform: translateX(10px) skewX(-3deg); filter: hue-rotate(-40deg); }
  60% { transform: translateX(-5px); filter: hue-rotate(20deg); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes glBar { from { opacity: 0; } 50% { opacity: .6; } to { opacity: 1; } }
@keyframes glDock {
  from { opacity: 0; transform: translateX(-50%) translateX(8px); }
  50% { opacity: 1; transform: translateX(-50%) translateX(-6px); }
  to { opacity: 1; transform: translateX(-50%); }
}
@keyframes glScan { from { opacity: 1; } to { opacity: 0; } }

/* Reduced motion: every scene becomes a plain, short fade. */
@media (prefers-reduced-motion: reduce) {
  html[data-enter-scene] #desktop.app-enter,
  html[data-enter-scene] #menubar.app-enter,
  html[data-enter-scene] #dock.app-enter {
    animation: fadeIn .3s ease both !important;
  }
  html[data-enter-scene]::before,
  html[data-enter-scene]::after { animation: none !important; opacity: 0 !important; }
}

/* The login card leaves as smoothly as the desktop arrives: the default
   "realistic" exit now glides instead of dropping 26px in half a second, so the
   hand-off to the `apple` scene has no visible seam. */
#login.leaving[data-variant="realistic"] .login-card { animation: lxApple .5s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes lxApple {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.97); }
}
/* Leftover unlock ripple is already themed; nothing else to tone down. */

/* ============================================================================
   IMPACT: problem -> fixed -> delivered
   The About page and `impact` both answer "so what?". These are the card styles
   for that section, kept deliberately quiet: the project's accent does the
   tinting, the copy stays in theme ink so it reads in every palette.
   ============================================================================ */
.imp-h {
  display: inline-block; margin: 6px 0 2px;
  font-size: .64em; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800; color: var(--accent);
}
.imp-h--p { color: var(--muted); }
.imp-h--g { color: #22c55e; }
.imp-box { line-height: 1.55; }
.imp-box b.imp-h { margin-top: 8px; }

.ab-impacts { display: flex; flex-direction: column; gap: 12px; }
.ab-impact {
  padding: 16px 18px 15px;
  border-radius: 15px;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--tint) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--fg) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 26%, transparent);
  text-align: left;
}
.ab-impact-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ab-impact-head b { font-size: 1em; font-weight: 800; }
.ab-impact-head span { font-size: .72em; color: var(--muted); flex: 1 1 auto; }
.ab-impact-head a {
  font-size: .74em; font-weight: 800; color: var(--tint);
  text-decoration: none; white-space: nowrap;
}
.ab-impact-head a:hover { text-decoration: underline; }
.ab-impact-problem {
  margin: 8px 0 10px; font-size: .82em; line-height: 1.65;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
}
.ab-impact-problem i {
  font-style: normal; font-weight: 800; font-size: .8em; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-right: 6px;
}
.ab-impact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-impact-cols > div > i {
  font-style: normal; display: block; margin-bottom: 5px;
  font-size: .66em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tint);
}
.ab-impact-cols ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.ab-impact-cols li {
  position: relative; padding-left: 14px;
  font-size: .79em; line-height: 1.55;
  color: color-mix(in srgb, var(--fg) 82%, transparent);
}
.ab-impact-cols li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--tint);
}
@media (max-width: 640px) {
  .ab-impact-cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   pastaay PROJECT CARD (what opens when you click the pastaay icon)
   A real project page: banner, repo/README/demo actions, then the short story.
   ============================================================================ */
.pj-proj {
  height: calc(100% - var(--winbar-h, 30px));
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 2px 2px 16px;
  text-align: left;
}
.pj-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, #ff7a45 26%, transparent), transparent 68%);
  border: 1px solid color-mix(in srgb, #ff7a45 30%, transparent);
}
.pj-banner-glow {
  position: absolute; right: -70px; top: -110px; width: 260px; height: 260px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, #ff7a45 45%, transparent), transparent 68%);
  filter: blur(30px);
}
.pj-mark {
  position: relative; z-index: 1;
  width: 66px; height: 66px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, #ff7a45 22%, transparent);
  border: 1px solid color-mix(in srgb, #ff7a45 45%, transparent);
  color: #ff9a6b;
}
.pj-mark svg { width: 30px; height: 30px; }
/* Gerçek pastaay logosu: çizim saydam, kutu turuncu cam plaka. Kedi en-boy
   oranı 1.27 olduğu için object-fit ile ortalanır; taşmaz. */
.pj-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.pj-mark--plate {
  /* Logonun kendi sarısı. Turuncu çizim turuncu cam üstünde kayboluyordu;
     sarı plaka orijinal çıkartma hissini koruyor ve banner'da öne çıkıyor. */
  background: #ffde59;
  border-color: color-mix(in srgb, #d98f00 40%, transparent);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.55);
}
.pj-banner-txt { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }
.pj-kicker {
  font-size: .62em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #ff9a6b;
}
.pj-banner-txt h1 { margin: 2px 0 4px; font-size: 1.7em; font-weight: 800; letter-spacing: -.02em; }
.pj-banner-txt p { margin: 0; font-size: .8em; line-height: 1.6; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.pj-stars {
  position: relative; z-index: 1; flex: none;
  font-size: .74em; font-weight: 800; color: #ffb08a;
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, #ff7a45 16%, transparent);
  border: 1px solid color-mix(in srgb, #ff7a45 32%, transparent);
}
.pj-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-link {
  font: inherit; font-size: .76em; font-weight: 700;
  padding: 8px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  color: var(--fg); text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pj-link:hover { transform: translateY(-1px); border-color: #ff7a45; }
.pj-link--primary {
  background: linear-gradient(135deg, #ff8a5c, #e2562c);
  color: #150b06; border-color: transparent;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, #ff7a45 80%, transparent);
}
.pj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pj-col {
  padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.pj-col h2 {
  margin: 0 0 8px; font-size: .68em; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
}
.pj-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pj-col li { position: relative; padding-left: 14px; font-size: .78em; line-height: 1.55; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.pj-col li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.pj-foot { margin: 0; font-size: .72em; color: var(--muted); }
.pj-inline {
  font: inherit; font-size: 1em; padding: 0; border: none; background: none;
  color: var(--accent); cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px;
}
@media (max-width: 620px) {
  .pj-cols { grid-template-columns: 1fr; }
  .pj-banner { flex-wrap: wrap; }
}

/* ============================================================================
   UNLOCK BEAT  (Settings -> Login screen -> "When you press login")
   ----------------------------------------------------------------------------
   The instant you press login. This used to be one hardcoded ripple, so every
   entrance choice looked the same at the end. It is now `#login.unlocking.u-*`
   with the picked id, plus `.login-demo-layer` for the in-settings preview.

   Old shared ripple/charge are neutralised first: the scene classes now own it.
   ============================================================================ */
/* Neutralise the legacy shared unlock effects. */
#login.unlocking::after { display: none !important; animation: none !important; }
#login.unlocking .login-card { animation: none !important; }
#login.unlocking .login-avatar { animation: none !important; }

/* Shared bits used by the scenes: a ring layer and a core that sits on the
   avatar. They are created with pseudo-elements so no extra markup is needed. */
#login.unlocking .login-orb { position: relative; }

/* ---- ring (default): a clean ring + card lift --------------------------- */
#login.unlocking.u-ring .login-card {
  animation: uRingCard .62s cubic-bezier(.16,1,.3,1) both;
}
#login.unlocking.u-ring .login-orb::before,
#login.unlocking.u-ring .login-orb::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--loginfx-col, var(--accent)) 80%, #fff);
  animation: uRingOut .7s cubic-bezier(.16,1,.3,1) forwards;
  pointer-events: none;
}
#login.unlocking.u-ring .login-orb::after { animation-delay: .12s; opacity: .6; }
@keyframes uRingCard {
  0% { transform: scale(1); }
  45% { transform: scale(.97); }
  100% { transform: scale(1.01); filter: brightness(1.06); }
}
@keyframes uRingOut {
  0% { transform: scale(.9); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ---- iris: the whole card becomes a camera aperture --------------------- */
#login.unlocking.u-iris .login-card {
  animation: uIrisCard .8s cubic-bezier(.4,0,.2,1) both;
}
#login.unlocking.u-iris::after {
  content: ""; display: block; position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--loginfx-col, var(--accent)) 70%, transparent) 60%, transparent 66%);
  animation: uIrisOpen 1s cubic-bezier(.16,1,.3,1) forwards;
  pointer-events: none;
}
@keyframes uIrisCard {
  0% { clip-path: circle(120% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}
@keyframes uIrisOpen {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(9); opacity: 0; }
}

/* ---- charge: the avatar "charges up", then the card pops ---------------- */
#login.unlocking.u-charge .login-avatar {
  animation: uChargeAvatar .7s cubic-bezier(.16,1,.3,1) both;
}
#login.unlocking.u-charge .login-orb::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--loginfx-col, var(--accent)) 85%, #fff);
  animation: uChargeSpin .7s linear forwards;
  pointer-events: none;
}
#login.unlocking.u-charge .login-card { animation: uChargeCard .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes uChargeAvatar {
  0% { transform: scale(1); }
  50% { transform: scale(.88); box-shadow: 0 0 0 10px color-mix(in srgb, var(--loginfx-col, var(--accent)) 22%, transparent); }
  100% { transform: scale(1.14); box-shadow: 0 0 0 22px color-mix(in srgb, var(--loginfx-col, var(--accent)) 0%, transparent); }
}
@keyframes uChargeSpin { to { transform: rotate(300deg) scale(1.15); opacity: 0; } }
@keyframes uChargeCard { 0%, 60% { transform: none; } 100% { transform: scale(1.02); } }

/* ---- fade: the quietest one, a breath and out --------------------------- */
#login.unlocking.u-fade .login-card { animation: uFadeCard .38s ease both; }
@keyframes uFadeCard { 0% { opacity: 1; } 100% { opacity: .45; } }

/* ---- scan: a horizontal light bar sweeps down the card ------------------ */
#login.unlocking.u-scan .login-card { animation: uScanCard .65s ease both; }
#login.unlocking.u-scan .login-card::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--loginfx-col, var(--accent)) 60%, transparent), transparent);
  background-size: 100% 40%;
  background-repeat: no-repeat;
  animation: uScanSweep .65s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes uScanSweep { 0% { background-position: 0 -40%; } 100% { background-position: 0 140%; } }
@keyframes uScanCard { 0%, 80% { transform: none; } 100% { opacity: .7; } }

/* ---- flip: a 3D half-turn, like flipping a card to unlock --------------- */
#login.unlocking.u-flip .login-card {
  animation: uFlipCard .56s cubic-bezier(.4,0,.2,1) both;
  transform-style: preserve-3d;
}
@keyframes uFlipCard {
  0% { transform: perspective(1200px) rotateY(0); opacity: 1; }
  100% { transform: perspective(1200px) rotateY(-92deg); opacity: 0; }
}

/* ---- the same scenes in the settings mini-stage ------------------------- */
.lco-stage.u-ring.play::before { animation: uRingOut .7s both; }
.lco-stage.u-iris.play::before { animation: uIrisOpen 1s forwards; }
.lco-stage.u-charge.play::before { animation: uChargeSpin .7s linear forwards; }
.lco-stage.u-fade.play { animation: uFadeCard .38s ease both; }
.lco-stage.u-scan.play::before { animation: uScanSweep .65s forwards; }
.lco-stage.u-flip.play { animation: uFlipCard .56s both; }

/* ============================================================================
   LOGIN SCREEN SETTINGS SECTION  (cards instead of a wall of pills)
   ============================================================================ */
.set-login { display: flex; flex-direction: column; gap: 4px; }
.set-note {
  margin: -2px 0 10px; font-size: .72em; line-height: 1.6;
  color: var(--muted);
}
.login-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; margin: 2px 0 14px;
}
.login-card-opt {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 8px 9px; border-radius: 13px; cursor: pointer;
  font: inherit; color: var(--fg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.login-card-opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.login-card-opt.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.login-card-opt b { font-size: .68em; font-weight: 700; }
/* mini stage: 44px circle with a ring and a core (the avatar) */
.lco-stage {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-2) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  overflow: hidden;
}
.lco-stage .lco-ring {
  position: absolute; inset: 9px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, #fff);
}
.lco-stage .lco-core {
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #ff9a76, #b06ab3);
  z-index: 1;
}
.lco-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.lco-stage.u-irq::before { display: none; }
.lco-stage.u-iris::before {
  background: radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--accent) 75%, transparent) 60%, transparent 70%);
}
.lco-stage.u-charge::before {
  inset: 6px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 85%, #fff);
}
.lco-stage.u-scan::before {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 65%, transparent), transparent);
  background-size: 100% 40%; background-repeat: no-repeat;
}
.lco-stage.u-fade { background: color-mix(in srgb, var(--bg-2) 65%, #000); }
.lco-stage.u-flip { transform-style: preserve-3d; }
/* scene preview tile: three stacked bars that play the scene's motion */
.lco-scene {
  position: relative; width: 44px; height: 34px; border-radius: 7px;
  background: color-mix(in srgb, var(--bg-2) 80%, #000);
  overflow: hidden; display: flex; flex-direction: column; gap: 3px; padding: 5px;
}
.lco-scene i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 60%, var(--fg)); opacity: .8; }
.login-card-opt--scene { padding: 10px 6px 8px; gap: 6px; }
.login-test-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }

@media (max-width: 560px) {
  .login-card-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .login-card-opt { padding: 9px 4px 7px; }
  .login-test-row .btnl { flex: 1 1 auto; }
}

/* The preview card used by "try the whole flow" (cloned lock screen). */
.login-demo {
  position: fixed; inset: 0; z-index: 9990;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(20, 18, 16, 0.72) 0%, rgba(8, 8, 7, 0.94) 72%),
    var(--login-wall, none) center / cover no-repeat,
    #0a0a09;
  animation: fadeIn .2s ease both;
  overflow: hidden;
}
.login-demo-layer {
  position: static !important; background: none !important;
  display: grid !important; place-items: center;
  width: 100%; height: 100%;
  transition: none !important;
}
.login-demo-layer.bye { opacity: 0; transition: opacity .35s ease !important; }
.login-demo-layer .login-card { animation: lvCalm .5s cubic-bezier(.22,.61,.36,1) both !important; }
/* each scene tile plays its own motion, looping gently so you can compare */
.lco-scene.s-zoom i { animation: scZoom 2.4s ease-in-out infinite; }
.lco-scene.s-slideup i { animation: scSlide 2.4s ease-in-out infinite; }
.lco-scene.s-fade i { animation: scFade 2.4s ease-in-out infinite; }
.lco-scene.s-flash i { animation: scFlash 2.4s ease-in-out infinite; }
.lco-scene.s-burst i { animation: scBurst 2.4s ease-in-out infinite; }
.lco-scene.s-iris i { animation: scIris 2.4s ease-in-out infinite; }
.lco-scene.s-blinds i { animation: scBlinds 2.4s ease-in-out infinite; }
.lco-scene.s-grid i { animation: scGrid 2.4s ease-in-out infinite; }
.lco-scene.s-warp i { animation: scWarp 2.4s ease-in-out infinite; }
.lco-scene.s-wipe i { animation: scWipe 2.4s ease-in-out infinite; }
.lco-scene.s-glitch i { animation: scGlitch 2.4s ease-in-out infinite; }
.lco-scene.s-apple i { animation: scApple 2.4s ease-in-out infinite; }
.lco-scene.s-apple i:nth-child(2) { animation-delay: .12s; }
.lco-scene.s-apple i:nth-child(3) { animation-delay: .24s; }
@keyframes scZoom { 0%, 100% { transform: none; opacity: .35; } 50% { transform: scale(1.35); opacity: .95; } }
@keyframes scSlide { 0%, 100% { transform: none; opacity: .35; } 50% { transform: translateY(-5px); opacity: .95; } }
@keyframes scFade { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes scFlash { 0%, 100% { opacity: .3; } 45% { opacity: 1; background: var(--fg); } 60% { opacity: .4; } }
@keyframes scBurst { 0%, 100% { transform: scale(.6); opacity: .3; } 50% { transform: scale(1); opacity: 1; } }
@keyframes scIris { 0%, 100% { clip-path: inset(0 50% 0 50%); } 50% { clip-path: inset(0 0 0 0); } }
@keyframes scBlinds { 0%, 100% { clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); } 50% { clip-path: none; } }
@keyframes scGrid { 0%, 100% { clip-path: polygon(0 0, 33% 0, 33% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 0 100%); } 50% { clip-path: none; } }
@keyframes scWarp { 0%, 100% { transform: scale(.3); filter: blur(2px); opacity: .3; } 50% { transform: none; filter: none; opacity: 1; } }
@keyframes scWipe { 0%, 100% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } }
@keyframes scGlitch { 0%, 100% { transform: translateX(-3px); opacity: .4; } 25% { transform: translateX(3px); } 50% { transform: none; opacity: 1; } }
@keyframes scApple { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ============================================================================
   MENUBAR FIXES
   ----------------------------------------------------------------------------
   1. Focus timer: the mm:ss pill used to be positioned at `left: 100% + 6px`,
      i.e. OUTSIDE the 26px icon, so it landed on top of the search icon next to
      it. It now lives inside the timer icon: the bell slides out, the ring
      shows progress and the time sits centred in the same 26px chip, so no
      icon ever overlaps another.
   2. The menubar never lets two menus be open at once any more (handled in JS
      via closeAllMenus()); this keeps the popovers above the bar and clips
      nothing.
   ============================================================================ */
#mb-focus.timing {
  width: 30px;
  color: var(--accent);
  overflow: visible;
}
#mb-focus.timing > svg { opacity: 0; transition: opacity .2s ease; }
#mb-focus.timing .mb-timer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 8.6px;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
#mb-focus.timing .mb-timer::before { display: none; }
[data-mode="light"] #mb-focus.timing .mb-timer { color: var(--accent); }
/* While a session runs the icon may need a touch more room; neighbours follow
   the flex layout, so nothing is pushed over anything else. */
#menubar:has(#mb-focus.timing) #mb-focus { margin-right: 2px; }

/* ============================================================================
   ROUND 8 — login light beat, settings IA, mobile polish, timer layout
   ============================================================================ */

/* ---- 1. LOGIN UNLOCK: a soft bloom of light (no rings / scope) ----------- */
#login .login-card { position: relative; }
#login.unlocking.u-glow::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(78vw, 640px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.62);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--loginfx-col, var(--accent)) 30%, transparent) 0%,
    color-mix(in srgb, var(--loginfx-col, var(--accent)) 12%, transparent) 34%,
    transparent 66%);
  filter: blur(2px);
  animation: uGlowBloom .72s cubic-bezier(.16,1,.3,1) forwards;
}
#login.unlocking.u-glow .login-card {
  animation: uGlowCard .64s cubic-bezier(.16,1,.3,1) both;
}
#login.unlocking.u-glow .login-card::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg,
    transparent 34%,
    rgba(255,255,255,.17) 48%,
    rgba(255,255,255,.03) 54%,
    transparent 68%);
  background-size: 260% 100%;
  background-position: 155% 0;
  animation: uGlowSweep .66s ease both;
}
#login.unlocking.u-glow .login-orb {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--loginfx-col, var(--accent)) 34%, transparent);
  animation: uGlowOrb .64s ease both;
}
@keyframes uGlowCard {
  0% { transform: scale(1); filter: brightness(1); }
  55% { transform: scale(.985); filter: brightness(1.04); }
  100% { transform: scale(1.012); filter: brightness(1.1); }
}
@keyframes uGlowBloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  35% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes uGlowSweep {
  0% { opacity: 0; background-position: 155% 0; }
  28% { opacity: 1; }
  100% { opacity: 0; background-position: -55% 0; }
}
@keyframes uGlowOrb {
  0% { filter: brightness(1); }
  60% { filter: brightness(1.18); }
  100% { filter: brightness(1.05); }
}
.lco-stage.u-glow .lco-core {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
}
.lco-stage.u-glow.play::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 65%);
  animation: uGlowBloom 1s ease both;
}
.lco-stage.u-glow.play .lco-core { animation: uGlowCard .7s ease both; }

/* ---- 2. SETTINGS: login block inside Appearance ------------------------- */
.set-login {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  display: flex; flex-direction: column; gap: 12px;
}
.set-sec-head {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px;
  border-radius: 13px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 13%, transparent),
    color-mix(in srgb, var(--accent) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
}
.set-sec-ic {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.set-sec-ic svg { width: 18px; height: 18px; }
.set-sec-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.set-sec-tx b { font-size: .88em; font-weight: 800; color: var(--fg); }
.set-sec-tx span { font-size: .7em; line-height: 1.45; color: var(--muted); }
.set-sec-try { flex: none; white-space: nowrap; }
.set-login-block { display: flex; flex-direction: column; }
.set-login-block .set-sub-head {
  font-size: .66em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent); margin: 2px 0 4px;
}

/* ---- 3. MENUBAR: pomodoro pill owns its own width ----------------------- */
#mb-focus.timing {
  width: 56px !important;
  flex: 0 0 56px;
  height: 22px;
  margin: 0 1px;
  padding: 0;
  border-radius: 7px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent);
}
#mb-focus.timing > svg { display: none !important; }
#mb-focus.timing::after {
  content: "";
  position: absolute;
  left: 5px; right: 5px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 16%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: none;
  -webkit-mask: none; mask: none;
}
#mb-focus.timing .mb-timer {
  position: static;
  inset: auto;
  transform: none;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  padding: 0 0 2px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
}
#mb-focus.timing .mb-timer::before { display: none; }
[data-mode="light"] #mb-focus.timing .mb-timer { color: var(--accent); }
#menubar:has(#mb-focus.timing) #mb-focus { margin-right: 3px; }
@media (max-width: 390px) {
  #mb-focus.timing { width: 48px !important; flex-basis: 48px; }
  #mb-focus.timing .mb-timer { font-size: 9px; }
}

/* ---- 4. ABOUT: the avatar is always a circle ---------------------------- */
@media (max-width: 640px) {
  .ab-av {
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
  }
}

/* ---- 5. SETTINGS ON A PHONE: real iOS-style grouped layout -------------- */
@media (max-width: 720px) {
  #win-settings .win__body { padding-top: var(--winbar-h, 46px) !important; }
  #win-settings .set-shell {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0; gap: 0;
  }
  #win-settings .set-nav {
    flex: none; width: auto !important; min-width: 0;
    height: auto !important; max-height: none;
    flex-direction: row !important;
    align-items: center; gap: 7px;
    padding: 10px 12px;
    overflow-x: auto; overflow-y: hidden;
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-2) 82%, transparent) !important;
    backdrop-filter: blur(14px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky; top: 0; z-index: 4;
  }
  #win-settings .set-nav::-webkit-scrollbar { display: none; }
  #win-settings .set-nav-item {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 15px !important;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
    font-size: .8em; font-weight: 700;
    white-space: nowrap;
  }
  #win-settings .set-nav-item.on {
    background: var(--accent); color: color-mix(in srgb, var(--bg) 92%, #000);
    border-color: transparent;
    box-shadow: 0 5px 14px -6px color-mix(in srgb, var(--accent) 80%, transparent);
  }
  #win-settings .set-nav-item.on::before { display: none; }
  #win-settings .set-nav-ic { display: none !important; }
  #win-settings .set-nav-item span:not(.set-nav-ic) { display: inline !important; }
  #win-settings .set-panel {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #win-settings .set-panel > * + * { margin-top: 10px; }
  #win-settings .set-row {
    flex-direction: column; align-items: stretch; gap: 9px;
    padding: 12px 13px; border-radius: 13px;
    background: color-mix(in srgb, var(--fg) 3.5%, transparent);
  }
  #win-settings .set-row .lbl { font-size: .72em; letter-spacing: .01em; color: var(--muted); }
  #win-settings .set-row .swatches { width: 100%; gap: 8px; }
  #win-settings .proto-pill { padding: 8px 13px; font-size: .78em; }
  #win-settings .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #win-settings .theme-card { padding: 8px; }
  #win-settings .sw { width: 38px; height: 38px; border-radius: 10px; }
  #win-settings .set-slider-row { flex-wrap: wrap; gap: 8px; }
  #win-settings .set-slider-row .snd-range { order: 3; width: 100%; }
  #win-settings .set-input { width: 100%; font-size: 16px; }
  #win-settings .login-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  #win-settings .login-card-opt { padding: 10px 5px 8px; }
  #win-settings .set-sec-head { flex-wrap: wrap; }
  #win-settings .set-sec-try { width: 100%; }
  #win-settings .login-test-row { flex-direction: column; }
  #win-settings .login-test-row .btnl { width: 100%; }
  #win-settings .set-profile { padding-bottom: 4px; }
  #win-settings .auth-card { border-radius: 16px; }
  #win-settings .kbd-cheat { grid-template-columns: 1fr; }
  #win-settings .kbd-row { flex-wrap: wrap; gap: 8px; }
  #win-settings .mix-row { grid-template-columns: 30px 1fr auto; row-gap: 4px; }
  #win-settings .mix-range { grid-column: 2 / -1; }
  #win-settings .set-data-hero { flex-wrap: wrap; }
  #win-settings .set-data-storage { flex-direction: column; align-items: flex-start; }
  #win-settings .sts-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  #win-settings .login-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #win-settings .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 6. WORKSPACES: a bottom sheet on touch screens --------------------- */
@media (max-width: 720px) {
  #ws-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .ws-ov-card {
    width: 100%;
    max-height: 90dvh;
    border-radius: 22px 22px 0 0;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
  }
  .ws-ov-head { gap: 10px; }
  .ws-ov-title { font-size: 1.12em; }
  .ws-ov-sub { font-size: .72em; max-width: none; }
  .ws-ov-row {
    flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    gap: 9px;
    padding: 2px 0 6px;
    -webkit-overflow-scrolling: touch;
  }
  .ws-space { width: 100% !important; flex: none; }
  .ws-space-stage { height: 118px; }
  .ws-space-mini { flex-wrap: wrap; }
  .ws-ov-foot { flex-wrap: wrap; gap: 7px; margin-top: 8px; }
  .ws-ov-hint { width: 100%; margin-left: 0; }
  .ws-card { touch-action: none; }
  .ws-dots { gap: 5px; }
  .ws-dot { width: 20px; height: 20px; font-size: 9px; }
}

/* ============================================================================
   ROUND 8 EXTRAS — now playing, window overview, mascot, desktop details
   ============================================================================ */

/* ---- menubar now-playing chip ------------------------------------------- */
.mb-now {
  display: inline-flex; align-items: center; gap: 6px;
  height: 20px; max-width: 220px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--fg); font: inherit; font-size: 10.5px; font-weight: 700;
  cursor: pointer; overflow: hidden; flex: none;
  transition: background .15s ease, transform .12s ease;
}
.mb-now[hidden] { display: none; }
.mb-now:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.mb-now:active { transform: scale(.97); }
.mb-now-tx { max-width: 168px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-now-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; flex: none; }
.mb-now-eq i { width: 2px; height: 4px; border-radius: 2px; background: var(--accent); opacity: .7; }
.mb-now.playing .mb-now-eq i { animation: mbEq .8s ease-in-out infinite; }
.mb-now.playing .mb-now-eq i:nth-child(2) { animation-delay: .18s; }
.mb-now.playing .mb-now-eq i:nth-child(3) { animation-delay: .36s; }
@keyframes mbEq { 0%,100% { height: 3px; opacity: .55; } 50% { height: 11px; opacity: 1; } }
@media (max-width: 720px) {
  .mb-now { max-width: 140px; }
  .mb-now-tx { max-width: 92px; }
}
@media (max-width: 390px) {
  .mb-now { max-width: 34px; padding: 0 6px; }
  .mb-now-tx { display: none; }
}

/* ---- window overview (F3) ----------------------------------------------- */
.expose {
  position: fixed; inset: 0; z-index: 420;
  display: grid; place-items: center;
  padding: 28px 18px;
  background: color-mix(in srgb, #05070c 58%, transparent);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .18s ease;
}
.expose.in { opacity: 1; }
.expose-card {
  width: min(940px, 100%);
  max-height: min(76dvh, 700px);
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  transform: scale(.96) translateY(8px);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.expose.in .expose-card { transform: none; }
.expose-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.expose-head b { display: block; font-size: 1.06em; color: var(--fg); }
.expose-head span { font-size: .74em; color: var(--muted); }
.expose-x {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  border: 1px solid var(--line); background: var(--chip); color: var(--fg);
  font: inherit; cursor: pointer; display: grid; place-items: center;
}
.expose-x:hover { background: var(--accent); color: var(--bg); }
.expose-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px; overflow-y: auto; padding: 2px; min-height: 0;
}
.expose-item {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 13px; border-radius: 14px; text-align: left;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  color: var(--fg); font: inherit; cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  min-width: 0;
}
.expose-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.expose-item.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.expose-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.expose-ic svg { width: 21px; height: 21px; }
.expose-name { font-weight: 800; font-size: .86em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expose-hint { font-size: .7em; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expose-space { position: absolute; top: 8px; right: 8px; font-size: .6em; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--chip); color: var(--muted); }
.expose-empty { grid-column: 1 / -1; padding: 26px 12px; text-align: center; color: var(--muted); font-size: .82em; }
.expose-foot { display: flex; justify-content: space-between; gap: 10px; font-size: .68em; color: var(--muted); }
@media (max-width: 720px) {
  .expose { padding: 0; align-items: flex-end; }
  .expose-card {
    width: 100%; max-height: 86dvh; padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
  }
  .expose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expose-foot { display: none; }
}

/* ---- mascot ------------------------------------------------------------- */
#mascot {
  position: fixed;
  left: 16px;
  bottom: calc(var(--dock-h, 64px) + 10px);
  width: 72px; height: 84px;
  z-index: 125;
  border: 0; padding: 0; background: none;
  cursor: pointer;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.42));
  transition: opacity .25s ease, transform .25s ease;
  touch-action: manipulation;
}
#mascot.ms-off { display: none; }
body.pre-login #mascot { opacity: 0; pointer-events: none; transform: translateY(10px); }
body.pre-login #desktop { /* keep the mascot hidden behind the lock */ }
#mascot:hover { transform: translateY(-3px); }
.ms-art { width: 100%; height: 100%; overflow: visible; animation: msFloat 4.6s ease-in-out infinite; }
.ms-shadow { fill: rgba(0,0,0,.35); }
.ms-body { fill: #262b38; stroke: #3a4251; stroke-width: 1; }
.ms-ear { fill: #262b38; stroke: #3a4251; stroke-width: 1; }
.ms-stripe { fill: color-mix(in srgb, var(--accent, #ff7a45) 55%, #262b38); opacity: .8; }
.ms-tail { stroke: color-mix(in srgb, var(--accent, #ff7a45) 60%, #3a4251); }
.ms-eye { fill: #f4f7ff; transition: transform .12s ease; transform-box: fill-box; transform-origin: center; }
.ms-pupil { fill: #10131a; transform: translate(calc(var(--mx, 0) * 2.2px), calc(var(--my, 0) * 2.2px)); transition: transform .12s ease; }
.ms-shine { fill: #fff; }
.ms-blush { fill: color-mix(in srgb, var(--accent, #ff7a45) 45%, transparent); }
.ms-mouth { stroke: #d7dbe8; }
.ms-scarf { fill: var(--accent, #ff7a45); }
.ms-scarf-tail { fill: var(--accent, #ff7a45); opacity: .85; }
.ms-paw { fill: #1b1f2a; }
#mascot.ms-blink .ms-eye, #mascot.ms-blink .ms-pupil, #mascot.ms-blink .ms-shine { transform: scaleY(.08); }
#mascot.ms-sleep .ms-eye, #mascot.ms-sleep .ms-pupil, #mascot.ms-sleep .ms-shine { transform: scaleY(.1); }
#mascot.ms-party .ms-art { animation: msParty .45s ease-in-out 3; }
#mascot.ms-party .ms-tail { animation: msTail .3s ease-in-out 4; }
@keyframes msFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes msParty { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-8px) rotate(-6deg); } 70% { transform: translateY(-5px) rotate(6deg); } }
.ms-bubble {
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  max-width: 240px; min-width: 90px;
  padding: 8px 11px;
  border-radius: 12px 12px 12px 4px;
  background: color-mix(in srgb, var(--bg-2) 94%, #000);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  font-size: 12px; line-height: 1.45; font-weight: 600;
  text-align: left;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.7);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
  z-index: 2;
}
.ms-bubble[hidden] { display: none; }
#mascot.ms-talking .ms-bubble { transform: translateX(-50%) translateY(0); }
@media (max-width: 720px) {
  #mascot { left: 10px; bottom: calc(var(--dock-h, 62px) + 6px); width: 56px; height: 65px; }
  .ms-bubble { max-width: 180px; font-size: 10.5px; left: 0; transform: translateX(0) translateY(4px); border-radius: 12px 12px 12px 4px; }
  #mascot.ms-talking .ms-bubble { transform: translateX(0) translateY(0); }
}

/* ---- desktop: parallax + atmosphere ------------------------------------- */
#wallpaper { transform: translate(var(--par-x, 0), var(--par-y, 0)) scale(1.045); transition: transform .35s ease-out, background .6s ease; }
@media (prefers-reduced-motion: reduce) { #wallpaper { transform: none; } .ms-art { animation: none; } }
#atmos {
  position: fixed;
  inset: var(--mb-h, 28px) 0 var(--dock-h, 64px);
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
#atmos i {
  position: absolute;
  left: var(--x);
  bottom: -10px;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: color-mix(in srgb, #fff 70%, var(--accent));
  opacity: .28;
  filter: blur(.3px);
  animation: atmosRise var(--d) linear infinite;
  animation-delay: var(--delay);
}
@keyframes atmosRise {
  0% { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  12% { opacity: .34; }
  85% { opacity: .2; }
  100% { transform: translate3d(24px, -108vh, 0) scale(1.15); opacity: 0; }
}
#desktop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 170px 34px rgba(0,0,0,.30);
}
#desktop .desk-ic, #desktop #icons { z-index: 3; }
body.pre-login #atmos { opacity: 0; }

/* ---- drop hints --------------------------------------------------------- */
#app.drop-app { box-shadow: inset 0 0 0 2px var(--accent), 0 0 30px -8px var(--accent) !important; }
#app.drop-app::after {
  content: "→ run <app>";
  position: absolute; right: 16px; bottom: 12px; z-index: 20;
  font-size: 10px; font-weight: 800; color: var(--accent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  padding: 4px 8px; border-radius: 7px; pointer-events: none;
}
#dock.dock-drop {
  box-shadow: 0 0 0 2px var(--accent), 0 18px 40px -14px color-mix(in srgb, var(--accent) 70%, transparent) !important;
  transform: translateX(-50%) translateY(-5px) !important;
}
#desktop.file-drop::after {
  content: "♪ Music";
  position: absolute; inset: 16px; z-index: 30;
  display: grid; place-items: center;
  border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent); font-size: 1.2em; font-weight: 800;
  pointer-events: none;
}

/* ---- about: merged outcomes label + today usage ------------------------- */
.ab-outcome-label {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 -6px;
  font-size: .68em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
}
.ab-outcome-label::after { content: ""; flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.task-row.usage-row .task-bar i { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #22c55e)); }

/* The big decorative rings behind the lock were reading like a rifle scope
   around the card. Keep a whisper of them, not a crosshair. */
#login .login-rings { opacity: .10; }

/* ---- mobile menubar: fit the essentials, never clip the right-hand icons --- */
@media (max-width: 720px) {
  #menubar { gap: 8px; padding: 0 8px; }
  #mb-wifi, #mb-bt, #mb-help { display: none !important; }
  .mb-app {
    max-width: 76px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #win-settings .set-nav {
    -webkit-mask-image: linear-gradient(to right, #000 91%, transparent 100%);
    mask-image: linear-gradient(to right, #000 91%, transparent 100%);
  }
}
@media (max-width: 360px) {
  #menubar { gap: 6px; }
  .mb-app { max-width: 56px; }
  .mb-clock { font-size: 10px; }
}
/* The mascot is a desktop character: it lives UNDER app windows (and under
   the dock), so it can never cover a control or a settings row on a phone. */
#mascot { z-index: 3; }

/* ---- app menu / window context menu on a phone: a compact bottom sheet ---- */
@media (max-width: 720px) {
  .appmenu {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(var(--dock-h, 64px) + 8px) !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: 62dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
  }
  .appmenu-it { padding: 11px 12px; font-size: .84em; }
}

/* The unlock scenes disable the avatar's entrance animation, which used to
   drop it back to its base opacity:0 and make the avatar vanish the instant
   you pressed login. Keep it visible while the scene plays. */
#login.unlocking .login-avatar { opacity: 1 !important; }

/* On a 320px phone the now-playing chip needs 26px more than exists. Hide the
   clock chip while a track is showing; time is one tap away on the lock screen
   and the player is the more useful thing at that moment. */
@media (max-width: 360px) {
  body.has-now .mb-clock { display: none; }
}

/* ============================================================================
   SETTINGS -> ANIMATIONS HUB
   A preview-first gallery: every tile replays the real motion on a tiny stage,
   then the "Apply to" row decides which window event it drives.
   ============================================================================ */
.fxhub { display: flex; flex-direction: column; gap: 14px; }
.fxhub-head h3 { margin: 0 0 4px; font-size: 1em; font-weight: 800; letter-spacing: -0.01em; color: var(--fg); }
.fxhub-head p { margin: 0; font-size: 0.78em; line-height: 1.5; color: var(--muted); max-width: 62ch; }

.fxhub-sec {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.fxhub-sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 0.84em; font-weight: 700; color: var(--fg);
}
.fxhub-sec-head em { font-style: normal; font-size: 0.82em; font-weight: 500; color: var(--muted); }

.fxhub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 9px;
}
.fxhub-grid--scenes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* Terminal-boot section: two wide on/off tiles plus a short explanation. */
.fxhub-note {
  margin: 2px 0 9px; max-width: 62ch;
  font-size: 0.78em; line-height: 1.5; color: var(--muted);
}
.fxhub-grid--pairs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fxtile--wide { align-items: stretch; }
.fxpv--tboot {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 3px; padding: 8px 9px; height: 74px; overflow: hidden;
  background: linear-gradient(180deg, #0b0f0c, #070a08);
  border: 1px solid #1e2a20; border-radius: 8px;
}
.fxpv--tboot .tb-l {
  font: 600 8.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #7ee787; white-space: nowrap;
}
.fxpv--tboot .tb-l2 { color: #4d6b55; }
.fxpv--tboot .tb-banner {
  font: 800 11px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em; color: #fff; white-space: nowrap;
}
.fxpv--tboot.run .tb-l { animation: tbootIn .5s ease both; }
.fxpv--tboot.run .tb-l2 { animation: tbootIn .5s .18s ease both; }
.fxpv--tboot.run .tb-banner { animation: tbootIn .5s .36s ease both; }
@keyframes tbootIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.fxtile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 6px 7px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.fxtile:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fxtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fxtile.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.fxtile b {
  font-size: 0.7em; font-weight: 600; color: var(--fg);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fxtile--scene { padding-bottom: 9px; }

/* The mini stage: a tiny desktop with a tiny window in the middle. */
.fxpv {
  position: relative;
  width: 100%; height: 74px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-3) 90%, #000), var(--bg));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  display: grid; place-items: center;
  perspective: 300px;
}
.fxpv-desk { position: absolute; inset: 0; display: flex; gap: 4px; padding: 5px; opacity: .5; }
.fxpv-desk i { width: 6px; height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 25%, transparent); }
.fxpv-win {
  position: relative;
  width: 62%; height: 52%;
  border-radius: 5px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  box-shadow: 0 6px 14px -6px #000a;
  overflow: hidden;
  will-change: transform, opacity;
}
.fxpv-bar { display: flex; align-items: center; gap: 3px; padding: 3px 4px; background: var(--bg-3); }
.fxpv-bar span { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 30%, transparent); }
.fxpv-bar span:first-child { background: #ff5f57; }
.fxpv-bar span:nth-child(2) { background: #febc2e; }
.fxpv-bar span:nth-child(3) { background: #28c840; }
.fxpv-bar em { margin-left: 3px; font-style: normal; font-size: 6px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.fxpv-body { display: flex; flex-direction: column; gap: 3px; padding: 5px; }
.fxpv-body b { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.fxpv-body b:nth-child(2) { width: 70%; opacity: .7; }
.fxpv-body b:nth-child(3) { width: 45%; opacity: .45; }
.fxpv-scan { position: absolute; inset: 0; pointer-events: none; }

/* Boot mini stage: its own compact layout, not a squashed real splash. */
.fxpv--boot {
  background: radial-gradient(circle at 50% 40%, #1a1226 0%, #07050c 72%);
  place-items: center;
}
.fxpv--boot .bx {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform-origin: center;
}
.fxpv--boot .bx-orb {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6, transparent 60%), var(--accent, #ff7a45);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #ff7a45) 70%, transparent);
}
.fxpv--boot .bx-logo {
  font-family: var(--font-mono, monospace);
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: #fff; line-height: 1;
}
.fxpv--boot .bx-logo b { color: var(--accent, #ff7a45); font-weight: 800; }
.fxpv--boot .bx-bar {
  display: block; width: 62px; height: 3px; border-radius: 99px;
  background: rgba(255,255,255,0.14); overflow: hidden;
}
.fxpv--boot .bx-bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--accent, #ff7a45);
}
.fxpv--boot.run .bx-bar i { animation: bxFill 1.05s ease both; }
@keyframes bxFill { from { width: 0; } to { width: 100%; } }

/* Variant personalities, all lightweight. */
.fxpv--boot.boot--pulse .bx-orb { animation: bxPulse 1s ease-in-out infinite; }
@keyframes bxPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }

.fxpv--boot.boot--crt .bx { animation: bxCrt 1s steps(7) both; }
.fxpv--boot.boot--crt::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
@keyframes bxCrt { 0% { transform: scaleY(.02); filter: brightness(3); } 55% { transform: scaleY(1.08); } 100% { transform: scaleY(1); filter: none; } }

.fxpv--boot.boot--bios { background: #000; }
.fxpv--boot.boot--bios .bx-logo { font-size: 9px; color: #cfe3cf; letter-spacing: 0; }
.fxpv--boot.boot--bios .bx-orb { background: #1fae47; box-shadow: none; width: 6px; height: 6px; }
.fxpv--boot.boot--bios .bx-bar { background: #1b3d24; }
.fxpv--boot.boot--bios .bx-bar i { background: #1fae47; }
.fxpv--boot.boot--bios .bx { animation: bxBios 1s steps(2) both; }
@keyframes bxBios { 0% { opacity: 0; } 20% { opacity: 1; } 60% { opacity: .6; } 100% { opacity: 1; } }

.fxpv--boot.boot--matrix { background: #010703; }
.fxpv--boot.boot--matrix .bx-logo, .fxpv--boot.boot--matrix .bx-logo b { color: #7dffa0; }
.fxpv--boot.boot--matrix .bx-orb { background: #0f5; box-shadow: 0 0 14px #0f5; }
.fxpv--boot.boot--matrix::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, #3f7 0 2px, transparent 2px 7px),
    repeating-linear-gradient(to bottom, #2d9 0 2px, transparent 2px 9px),
    repeating-linear-gradient(to bottom, #1a5 0 1px, transparent 1px 5px),
    repeating-linear-gradient(to bottom, #3f7 0 2px, transparent 2px 8px);
  background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%;
  background-position: 12% -30%, 27% 0, 74% -20%, 89% 10%;
  background-repeat: no-repeat;
  opacity: .55; pointer-events: none;
}

.fxpv--boot.boot--aurora { background: linear-gradient(140deg, #10243a, #24113a 55%, #0b2f2a); }
.fxpv--boot.boot--aurora .bx { animation: bxAurora 1.1s ease both; }
@keyframes bxAurora { 0% { opacity: 0; transform: rotate(-5deg) scale(.9); } 100% { opacity: 1; transform: none; } }

.fxpv--boot.boot--warp { background: #04040c; }
.fxpv--boot.boot--warp .bx { animation: bxWarp .95s cubic-bezier(.16,1,.3,1) both; }
.fxpv--boot.boot--warp::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,255,255,0.55) 0 1.2deg, transparent 1.2deg 14deg);
  -webkit-mask: radial-gradient(closest-side, transparent 34%, #000 92%);
          mask: radial-gradient(closest-side, transparent 34%, #000 92%);
  opacity: .5; pointer-events: none;
}
@keyframes bxWarp { 0% { opacity: 0; transform: scale(.1); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }

.fxpv--boot.boot--nova {
  background: radial-gradient(circle, #3a1440 0%, #120616 60%, #050208 100%);
}
.fxpv--boot.boot--nova::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle, transparent 30%, rgba(255,214,150,0.55) 31%, transparent 34%);
  opacity: .8; pointer-events: none;
}
.fxpv--boot.boot--nova .bx { animation: bxNova 1s ease both; }
@keyframes bxNova { 0% { filter: brightness(4) blur(3px); } 100% { filter: none; } }

/* Sign-in mini stage: a legible miniature card, not a shrunken real one. */
.fxpv--login { background: radial-gradient(circle at 50% 30%, #241a2e, #0b080f 78%); }
.fxpv--login .lx {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 74%; padding: 8px 6px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  transform-origin: center;
}
.fxpv--login .lx-logo {
  font-family: var(--font-mono, monospace);
  font-size: 11px; font-weight: 800; color: #fff; line-height: 1;
}
.fxpv--login .lx-logo b { color: var(--accent, #ff7a45); }
.fxpv--login .lx-av {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9a76, #b06ab3);
  color: #fff; font-size: 6px; font-weight: 900;
}
.fxpv--login .lx-btn {
  padding: 3px 10px; border-radius: 99px;
  background: var(--accent, #ff7a45); color: #fff;
  font-size: 6px; font-weight: 800; letter-spacing: 0.04em;
}

/* Per-variant motion, matching the names in the picker. */
.fxpv--login .lx.lp-run[data-fx="realistic"] { animation: lxR .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes lxR { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fxpv--login .lx.lp-run[data-fx="rise"] { animation: lxU .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes lxU { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.fxpv--login .lx.lp-run[data-fx="bloom"] { animation: lxB .6s cubic-bezier(.22,1.4,.36,1) both; }
@keyframes lxB { from { opacity: 0; transform: scale(.75); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.fxpv--login .lx.lp-run[data-fx="portal"] { animation: lxP .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes lxP { from { opacity: 0; transform: rotate(-160deg) scale(.3); } to { opacity: 1; transform: none; } }
.fxpv--login .lx.lp-run[data-fx="glitch"] { animation: lxG .5s steps(6) both; }
@keyframes lxG {
  0% { opacity: 0; transform: translateX(-6px); filter: hue-rotate(90deg); }
  40% { opacity: 1; transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.fxpv--login .lx.lp-run[data-fx="orbit"] { animation: lxO .65s cubic-bezier(.16,1,.3,1) both; }
@keyframes lxO { from { opacity: 0; transform: rotate(35deg) translate(24px) scale(.7); } to { opacity: 1; transform: none; } }
.fxpv--login .lx.lp-run[data-fx="liquid"] { animation: lxL .65s cubic-bezier(.22,1.5,.36,1) both; }
@keyframes lxL { from { opacity: 0; transform: scale(.6) skewX(-14deg); border-radius: 40%; } to { opacity: 1; transform: none; } }
.fxpv--login .lx.lp-run[data-fx="shatter"] { animation: lxS .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes lxS { from { opacity: 0; transform: scale(1.3) rotate(7deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.fxpv--login .lx.lp-run[data-fx="flip3d"] { animation: lxF .65s cubic-bezier(.16,1,.3,1) both; }
@keyframes lxF { from { opacity: 0; transform: perspective(200px) rotateY(85deg); } to { opacity: 1; transform: none; } }
.fxpv--login .lx.lp-run[data-fx="typewriter"] { animation: lxT .6s steps(9) both; }
@keyframes lxT { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.fxpv--login .lx.lp-run[data-fx="zoomblur"] { animation: lxZ .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes lxZ { from { opacity: 0; transform: scale(1.7); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* Scene tiles reuse the real scene previews. */
.fxtile--scene .lco-scene { transform: scale(.85); }

/* "Apply to" row. */
.fxhub-apply {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding-top: 2px;
}
.fxhub-apply-lbl { font-size: 0.74em; font-weight: 600; color: var(--muted); }
.fxapply {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--fg); font: inherit; font-size: 0.76em;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.fxapply:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.fxapply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fxapply i { font-style: normal; font-size: 0.86em; color: var(--muted); }
.fxapply.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fxapply.sel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

.fxhub-slider {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.78em; color: var(--muted);
}
.fxhub-slider input[type="range"] { flex: 1 1 auto; min-width: 0; }
.fxhub-slider b { color: var(--fg); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.fxhub-note { font-size: 0.72em; color: var(--muted); line-height: 1.5; }

@media (max-width: 520px) {
  .fxhub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fxhub-grid--scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fxhub-sec { padding: 12px; }
  .fxhub-slider { flex-wrap: wrap; }
  .fxhub-slider input[type="range"] { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .fxpv.run * , .fxpv.run { animation-duration: .01s !important; }
}

/* Browsing (not yet applied) selection in the Animations gallery. */
.fxtile.sel { border-color: color-mix(in srgb, var(--accent-2, var(--accent)) 75%, transparent); }
/* The mini sign-in card lives inside a <button>; a real <button> inside a
   button is invalid HTML and closes the outer one, so this one is a span that
   only looks like the real login button. */
.lp-btn-fake { display: inline-grid; place-items: center; pointer-events: none; }

/* ============================================================================
   ABOUT (executive rewrite)
   The old card was a two-column grid whose third child (the outcome block)
   landed in the icon column and overlapped the title. This block wins the
   cascade with a structure that cannot collapse: every card is a vertical
   stack, and the outcome lives in its own full-width band.
   ============================================================================ */
.ab { display: flex; flex-direction: column; gap: 16px; padding: 2px 0 10px; }

/* Compact masthead: one line, one action. */
.ab-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.ab-toolbar-k {
  font-size: 0.7em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
/* Summary | Full, as a segmented control with a sliding ink. */
.ab-viewseg {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.ab-viewbtn {
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .72em; font-weight: 700;
  color: var(--muted); background: transparent; border: none;
  transition: color .16s ease, background .16s ease;
}
.ab-viewbtn:hover { color: var(--fg); }
.ab-viewbtn.on {
  color: var(--bg);
  background: var(--accent);
}
.ab-viewbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ab-brief-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--fg); font: inherit; font-size: 0.78em; font-weight: 650;
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.ab-brief-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); transform: translateY(-1px); }
.ab-brief-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ab-brief-ic { font-size: 1.05em; }

/* Hero */
.ab-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
              color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.ab-hero-glow {
  position: absolute; right: -60px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.ab-av {
  width: 86px; height: 86px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 10px 26px -12px #000c;
  background: var(--bg-2);
}
.ab-hero-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.ab-kicker {
  font-size: 0.66em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, var(--fg));
}
.ab-name { margin: 0; font-size: 2em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--fg); }
.ab-dot { color: var(--accent); }
.ab-role { margin: 0; font-size: 0.84em; color: var(--muted); }
.ab-role i { opacity: 0.5; margin: 0 3px; font-style: normal; }
.ab-avail {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 6px 0 0; align-self: flex-start;
  font-size: 0.72em; font-weight: 650; color: var(--ok);
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.ab-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
  animation: abPulse 2s infinite;
}
@keyframes abPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Readable intro: full-strength ink and the largest body size on the page.
   This later rule wins, so keep it in sync with the one above. */
.ab-pitch { margin: 0; font-size: 1.02em; line-height: 1.85; color: var(--fg); max-width: 62ch; text-wrap: pretty; }
.ab-pitch b { color: var(--fg); font-weight: 800; }

/* Numbers: four equal cells, tabular figures so they line up. */
.ab-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.ab-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.ab-stat b {
  font-size: 1.5em; font-weight: 800; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.ab-stat span {
  font-size: 0.66em; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); line-height: 1.3;
}

.ab-sec-title {
  margin-top: 6px;
  font-size: 0.72em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.ab-work { display: flex; flex-direction: column; gap: 14px; }

/* Work card: vertical stack. The tinted header strip, then the outcome band. */
.ab-w.ab-w--merged {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  grid-template-columns: none;
  align-items: stretch;
}
.ab-w--merged .ab-w-top { display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 14px; }
.ab-w--merged .ab-w-art {
  position: relative; flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--tint) 35%, transparent);
  background:
    radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--tint) 55%, transparent), transparent 70%),
    color-mix(in srgb, var(--tint) 16%, transparent);
}
.ab-w--merged .ab-w-art::after { display: none; }
.ab-w--merged .ab-w-mark { width: 26px; height: 26px; }
.ab-w--merged .ab-w-body { display: flex; flex-direction: column; gap: 8px; padding: 0; min-width: 0; flex: 1 1 auto; }
.ab-w--merged .ab-w-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-direction: row; flex-wrap: wrap;
}
.ab-w-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ab-w-title b { font-size: 1.05em; font-weight: 800; letter-spacing: -0.01em; color: var(--fg); }
.ab-w-title span { font-size: 0.74em; color: var(--muted); }
.ab-w-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-w--merged .ab-w-link { margin: 0; font-size: 0.75em; font-weight: 700; color: var(--tint); text-decoration: none; }
.ab-w--merged .ab-w-link:hover { text-decoration: underline; }
.ab-w--merged .ab-w-pj { font-size: 0.72em; padding: 4px 9px; }
.ab-w--merged .ab-w-blurb { margin: 0; font-size: 0.82em; line-height: 1.6; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.ab-w--merged .ab-w-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ab-w--merged .ab-w-tags span {
  font-size: 0.64em; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  color: color-mix(in srgb, var(--tint) 85%, var(--fg));
}

/* Outcome band: full width, tinted, three clear rows. */
.ab-outcome {
  padding: 14px 16px 16px;
  border-top: 1px solid color-mix(in srgb, var(--tint) 22%, transparent);
  background: color-mix(in srgb, var(--tint) 5%, transparent);
}
.ab-outcome-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.ab-outcome-k {
  font-size: 0.64em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tint) 90%, var(--fg));
}
.ab-outcome-lbl {
  font-size: 0.68em; font-weight: 600; color: var(--muted);
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.ab-outcome-head a { margin-left: auto; font-size: 0.72em; font-weight: 700; color: var(--tint); text-decoration: none; }
.ab-outcome-problem { margin: 0 0 12px; font-size: 0.79em; line-height: 1.65; color: color-mix(in srgb, var(--fg) 72%, transparent); }
.ab-outcome-problem i {
  font-style: normal; font-size: 0.82em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--err); margin-right: 6px;
}
.ab-outcome-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-outcome-col i {
  display: block; margin-bottom: 6px;
  font-style: normal; font-size: 0.64em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.ab-outcome-col ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.ab-outcome-col li { font-size: 0.76em; line-height: 1.55; color: color-mix(in srgb, var(--fg) 74%, transparent); }
.ab-outcome-col li::marker { color: color-mix(in srgb, var(--tint) 70%, transparent); }
.ab-outcome-col--gain i { color: var(--ok); }

/* Skills / education / contact */
.ab-skills { display: flex; flex-direction: column; gap: 14px; }
/* Label above the chips, sized by its own text. It used to inherit
   `flex: 0 0 108px` from the old ROW layout, which in a column container is a
   108px *height* and produced a huge empty band under every label. */
.ab-skill { display: flex; flex-direction: column; gap: 7px; }
.ab-skill-g {
  flex: 0 0 auto;
  font-size: 0.68em; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chips span {
  font-size: 0.68em; font-weight: 600;
  padding: 4px 9px; border-radius: 7px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--muted);
}
.ab-edus { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ab-edu {
  display: flex; gap: 11px; align-items: center;
  padding: 12px; border-radius: 13px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.ab-edu-logo {
  width: 40px; height: 40px; flex: none; overflow: hidden;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--tint);
  font-size: 0.7em; font-weight: 800; color: #fff;
}
.ab-edu-logo img { width: 100%; height: 100%; object-fit: cover; }
.ab-edu-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ab-edu-txt b { font-size: 0.8em; font-weight: 700; color: var(--fg); }
.ab-edu-txt span { font-size: 0.7em; color: var(--muted); line-height: 1.35; }

.ab-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px; padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2, var(--accent)) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.ab-contact-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ab-contact-txt b { font-size: 1em; font-weight: 800; color: var(--fg); }
.ab-contact-txt span { font-size: 0.78em; color: color-mix(in srgb, var(--fg) 72%, transparent); }
.ab-contact-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ab-foot { text-align: center; font-size: 0.7em; color: var(--muted); padding: 6px 0 4px; }

/* Brief mode: the hero/sections hide, the summary owns the window. */
.ab.brief-on .ab-hero,
.ab.brief-on .ab-pitch,
.ab.brief-on .ab-stats,
.ab.brief-on .ab-sec-title,
.ab.brief-on .ab-work,
.ab.brief-on .ab-skills,
.ab.brief-on .ab-edus,
.ab.brief-on .ab-contact,
.ab.brief-on .ab-foot { display: none; }
.ab-brief {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
              color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.ab-brief-orb {
  position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%);
  filter: blur(12px); pointer-events: none;
}
.ab-brief-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; }
.ab-brief-av { width: 58px; height: 58px; border-radius: 50%; flex: none; object-fit: cover; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.ab-brief-av--ca { display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; }
.ab-brief-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ab-brief-who b { font-size: 1.15em; font-weight: 800; color: var(--fg); }
.ab-brief-who span { font-size: 0.76em; color: var(--muted); }
.ab-brief-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ab-brief-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  border-radius: 11px; background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.ab-brief-stat b { font-size: 1.2em; font-weight: 800; color: var(--accent); line-height: 1; }
.ab-brief-stat span { font-size: 0.62em; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ab-brief-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ab-brief-list li {
  position: relative; padding-left: 18px;
  font-size: 0.8em; line-height: 1.6; color: color-mix(in srgb, var(--fg) 80%, transparent);
}
.ab-brief-list li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }
.ab-brief-list b { color: var(--fg); font-weight: 750; }
.ab-brief-cta { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .ab-hero { flex-direction: column; align-items: flex-start; text-align: left; }
  .ab-name { font-size: 1.6em; }
  .ab-stats, .ab-brief-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-outcome-cols { grid-template-columns: 1fr; }
  .ab-w--merged .ab-w-top { flex-direction: column; }
  .ab-contact { flex-direction: column; align-items: stretch; }
  .ab-contact-btns .btnl { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-pulse { animation: none; }
}

/* ============================================================================
   WORKSPACE DOTS: pinned to the true centre of the menubar.
   The bar is a flex row, so anything that changes width on the left (the app
   name appearing/disappearing) dragged the dots sideways. Absolute centring
   removes them from that flow; fixed dot size means switching spaces never
   nudges the neighbours.
   ============================================================================ */
#menubar .ws-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  gap: 2px;
  padding: 2px;
  z-index: 1;
}
#menubar .ws-dot,
#menubar .ws-add {
  flex: none;
  width: 20px;
  height: 16px;
  transform: none;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
#menubar .ws-dot:hover,
#menubar .ws-dot.on,
#menubar .ws-dot.drop { transform: none; }
#menubar .ws-dot.drop { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
/* The spacer next to the dots would otherwise fight the absolute position. */
#menubar .ws-dots + .mb-spacer { flex: 1; }
/* Very narrow screens: let the dots sit a bit lower-key rather than overlap. */
@media (max-width: 420px) {
  #menubar .ws-dot, #menubar .ws-add { width: 17px; height: 15px; }
  #menubar .ws-dots { gap: 1px; }
}

/* ============================================================================
   MENUBAR CALENDAR
   The calculator app styles `.cal-cell` globally (aspect-ratio: 1, .86em), so
   the little calendar under the clock inherited those and turned into a huge
   grid. These rules scope it back down to a compact menu.
   ============================================================================ */
#clock-drop {
  width: 264px;
  min-width: 0;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
#clock-drop .clock-date {
  font-size: 0.82em; font-weight: 650; color: var(--fg);
  line-height: 1.3;
}
#clock-drop .clock-wx {
  margin-top: 3px;
  font-size: 0.72em; color: var(--muted);
}
#clock-drop .clock-wx b { color: var(--fg); font-weight: 700; }
#clock-drop .cal-head {
  margin: 10px 0 6px;
  font-size: 0.68em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
#clock-drop .cal-grid { gap: 1px; }
#clock-drop .cal-wd {
  font-size: 0.58em; font-weight: 700; text-align: center;
  color: var(--muted); padding-bottom: 3px;
}
#clock-drop .cal-cell {
  aspect-ratio: auto;
  height: 24px;
  border-radius: 6px;
  font-size: 0.7em;
  display: grid; place-items: center;
  color: var(--fg);
  background: none;
  border: 1px solid transparent;
  cursor: default;
}
#clock-drop .cal-cell:hover { background: none; }
#clock-drop .cal-cell.cal-today {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 800;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ============================================================================
   LOGIN LEAVE: fade the BACKDROP with the card.
   Only the card animated out; the opaque purple/violet background stayed on
   screen for the whole scene delay and then vanished, which read as "a purple
   screen flashes and goes away". The scrim now dissolves at the same pace.
   ============================================================================ */
#login.leaving {
  background: none;
  animation: loginScrimOut 0.42s ease forwards;
  pointer-events: none;
}
#login.leaving::before { opacity: 0 !important; transition: opacity 0.34s ease; }
@keyframes loginScrimOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
#login.unlocking {
  background:
    radial-gradient(circle at 50% 30%, rgba(20, 18, 16, 0.68) 0%, rgba(8, 8, 7, 0.92) 72%),
    var(--login-wall, none) center / cover no-repeat,
    #0a0a09;
}

/* ---- Message actions on touch devices --------------------------------------
   The action row (react, reply, delete) was hover-only. A phone has no hover,
   so emoji reactions were unreachable on mobile, including on your own
   messages. On coarse pointers the row is always shown, quietly. */
@media (hover: none), (pointer: coarse) {
  .chat-msg .chat-actions {
    display: flex;
    opacity: 0.55;
  }
  .chat-msg .chat-actions button { width: 26px; height: 26px; font-size: 13px; }
  .chat-msg:hover .chat-actions, .chat-msg:focus-within .chat-actions { opacity: 1; }
  /* Your own bubbles sit on the right; keep the row from hugging the edge. */
  .chat-msg.me .chat-actions { margin-inline-end: 2px; }
}

/* ---- Emoji picker in the composer ---- */
.emoji-pop {
  position: fixed;
  z-index: 5;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  box-shadow: 0 24px 50px -18px #000d;
  backdrop-filter: blur(14px);
}
.emoji-pop-head { display: flex; align-items: center; gap: 6px; }
.emoji-q {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 8px; padding: 6px 9px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--fg); font: inherit; font-size: 0.78em;
  outline: none;
}
.emoji-q:focus { border-color: var(--accent); }
.emoji-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.emoji-tab {
  flex: 1 1 auto;
  padding: 4px 6px; border-radius: 7px; border: none;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  color: var(--muted); font: inherit; font-size: 0.62em; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.emoji-tab.on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); }
.emoji-grid {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 2px;
  padding-right: 2px;
}
.emoji-e {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: none; border-radius: 8px;
  background: none; cursor: pointer;
  font-size: 1.15em; line-height: 1;
  transition: background 0.1s ease, transform 0.1s ease;
}
.emoji-e:hover { background: color-mix(in srgb, var(--fg) 9%, transparent); transform: scale(1.12); }
.emoji-e:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.emoji-none { grid-column: 1 / -1; padding: 16px; text-align: center; color: var(--muted); font-size: 0.8em; }

/* Reaction popover: a tidy strip that never lands half off-screen. */
.reactp { padding: 6px; }
.reactp .reactp-row { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.reactp .reactp-emo {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; border-radius: 8px; background: none;
  font-size: 1.05em; cursor: pointer;
  transition: background 0.1s ease, transform 0.1s ease;
}
.reactp .reactp-emo:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); transform: scale(1.15); }
.reactp .reactp-emo.on { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Your own messages: the action row also appears when the pointer is over the
   bubble's own column, so reacting to your own message never feels hidden. */
.chat-msg.me:hover .chat-actions,
.chat-msg.me:focus-within .chat-actions { display: flex; }
/* When something is already reacted, the chip is clickable on its own. */
.chat-react { cursor: pointer; }

/* ============================================================================
   ACHIEVEMENTS (Settings -> Profile)
   A trophy case: progress ring, then one card per badge with a readable hint.
   ============================================================================ */
.ach {
  display: block;
  padding: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
/* Katlanabilir başlık: <details><summary>. Tarayıcının varsayılan üçgenini
   gizleyip yerine temaya uyan bir ok koyuyoruz; tıklama alanı tüm satır. */
.ach-sum {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  list-style: none;
  border-radius: 10px;
  outline-offset: 6px;
}
.ach-sum::-webkit-details-marker { display: none; }
.ach-sum::marker { content: ""; }
.ach-sum:hover .ach-sum-txt h3 { color: var(--accent); }
.ach-sum:focus-visible { outline: 2px solid var(--accent); }
.ach[open] .ach-sum { margin-bottom: 14px; }
/* KAPALIYKEN içerik gizlenmeli: `.ach-grid { display:grid }` yazar kuralı,
   tarayıcının "kapalı details çocuklarını gizle" kuralını ezer. Açıkça yaz. */
.ach:not([open]) > .ach-grid { display: none; }
.ach-chev {
  flex: none; margin-left: auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  transition: transform .18s cubic-bezier(.16,1,.3,1), color .18s ease;
}
.ach-chev svg { width: 15px; height: 15px; }
.ach-sum:hover .ach-chev { color: var(--fg); }
.ach[open] .ach-chev { transform: rotate(180deg); }
.ach-ring {
  position: relative; flex: none;
  width: 62px; height: 62px;
  display: grid; place-items: center;
}
.ach-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ach-ring circle { fill: none; stroke-width: 4; }
.ach-ring-bg { stroke: color-mix(in srgb, var(--fg) 10%, transparent); }
.ach-ring-fg {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dasharray .6s cubic-bezier(.16,1,.3,1);
}
.ach-ring b {
  font-size: 0.95em; font-weight: 800; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.ach-ring b i { font-style: normal; font-size: 0.6em; color: var(--muted); margin-left: 1px; }
.ach-sum-txt { min-width: 0; }
.ach-sum-txt h3 { margin: 0 0 3px; font-size: 0.95em; font-weight: 800; color: var(--fg); }
.ach-sum-txt p { margin: 0; font-size: 0.76em; line-height: 1.5; color: var(--muted); }

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.ach-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 12px 11px 40px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.ach-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ach-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ach-medal {
  position: absolute; left: 12px; top: 11px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 0.85em;
  color: color-mix(in srgb, var(--fg) 30%, transparent);
}
.ach-card.on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.ach-card.on .ach-medal { color: var(--accent); }
.ach-name {
  font-size: 0.82em; font-weight: 750; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ach-card:not(.on) .ach-name { letter-spacing: 0.08em; color: color-mix(in srgb, var(--fg) 55%, transparent); }
.ach-desc { font-size: 0.7em; line-height: 1.4; color: var(--muted); }
.ach-hint {
  margin-top: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 0.64em;
  padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: color-mix(in srgb, var(--fg) 60%, transparent);
}
.ach-card.pop { animation: achPop .45s cubic-bezier(.16,1,.3,1); }
@keyframes achPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@media (max-width: 520px) {
  .ach-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ach-card, .ach-ring-fg, .ach-chev { transition: none; }
  .ach-card.pop { animation: none; }
}

/* ---- Admin: SMTP settings block ---- */
.adm-smtp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.adm-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adm-f > span { font-size: 0.7em; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.adm-f .set-input, .adm-f .set-select { width: 100%; font-size: 0.82em; }
.adm-f--sm { max-width: 100%; }
.adm-smtp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-smtp-state {
  margin-left: auto;
  font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--err) 14%, transparent);
  color: var(--err);
}
.adm-smtp-state.on { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.adm-smtp-log { margin-top: 10px; min-height: 1.2em; font-size: 0.76em; }
.adm-smtp-msg { color: var(--muted); }
.adm-smtp-msg.ok { color: var(--ok); }
.adm-smtp-msg.bad { color: var(--err); }
.adm-block-head { display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .adm-smtp-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   MENUBAR SOUND PANEL
   The sound menu had NO styles at all, so it rendered as raw stacked labels and
   a default range input. This gives it the same language as the other menus.
   ============================================================================ */
#sound-drop {
  position: fixed;
  top: calc(var(--mb-h, 28px) + 6px);
  right: 10px;
  z-index: 640;
  width: 280px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 13%, transparent);
  box-shadow: 0 26px 60px -22px #000e;
  backdrop-filter: blur(18px);
  color: var(--fg);
  font-size: 12px;
}
#sound-drop[hidden] { display: none; }

#sound-drop .sd-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
#sound-drop .sd-head b { font-size: 0.82em; font-weight: 800; letter-spacing: 0.02em; }
#sound-drop .sd-mute {
  font: inherit; font-size: 0.76em; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--fg); cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
#sound-drop .sd-mute:hover { background: color-mix(in srgb, var(--ok) 26%, transparent); }
#sound-drop .sd-mute.off {
  border-color: color-mix(in srgb, var(--err) 45%, transparent);
  background: color-mix(in srgb, var(--err) 14%, transparent);
}

#sound-drop .sd-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
}
#sound-drop .sd-row > span { font-size: 0.72em; color: var(--muted); }
#sound-drop .sd-row > b { font-size: 0.72em; font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
#sound-drop .sd-vol {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  outline: none; cursor: pointer;
}
#sound-drop .sd-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-2);
  box-shadow: 0 0 0 1px var(--accent);
}
#sound-drop .sd-vol::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-2);
}

#sound-drop .sd-now {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
#sound-drop .sd-now[hidden] { display: none; }
#sound-drop .sd-now-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
#sound-drop .sd-now-tx {
  font-size: 0.75em; font-weight: 600; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sound-drop .sd-now-btns { display: flex; align-items: center; gap: 6px; }
#sound-drop .sd-rnd {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--fg); font-size: 12px; cursor: pointer;
  transition: background 0.12s ease;
}
#sound-drop .sd-rnd:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
#sound-drop .sd-play {
  width: 34px; height: 34px;
  background: var(--accent); color: #fff; border-color: transparent;
  font-size: 13px;
}
#sound-drop .sd-open {
  margin-left: auto;
  padding: 6px 10px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: none; color: var(--fg);
  font: inherit; font-size: 0.72em; font-weight: 700; cursor: pointer;
}
#sound-drop .sd-open:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }

#sound-drop .sd-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
#sound-drop .sd-eq i {
  width: 2px; border-radius: 1px;
  background: var(--accent);
  animation: sdEq 0.9s ease-in-out infinite;
}
#sound-drop .sd-eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
#sound-drop .sd-eq i:nth-child(2) { height: 90%; animation-delay: 0.2s; }
#sound-drop .sd-eq i:nth-child(3) { height: 60%; animation-delay: 0.4s; }
@keyframes sdEq {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

#sound-drop .sd-foot {
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
#sound-drop .sd-all {
  width: 100%;
  padding: 7px 10px; border-radius: 9px;
  border: none; background: none;
  color: var(--muted); font: inherit; font-size: 0.72em; font-weight: 650;
  cursor: pointer; text-align: left;
}
#sound-drop .sd-all:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }

/* The menubar icon shows it is actively playing. */
#mb-sound { position: relative; }
#mb-sound.active { color: var(--accent); }
#mb-sound-dot {
  position: absolute; top: 4px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg);
}
#mb-sound-dot[hidden] { display: none; }

@media (max-width: 420px) {
  #sound-drop { width: calc(100vw - 20px); }
}

/* ============================================================================
   AVATAR PICKER
   26 identical mini bubbles in one row read as visual noise. Now: one large
   live preview, then an evenly sized grid with a clear selected ring.
   ============================================================================ */
.av-pick {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 12px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.av-pick-big {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 26px; line-height: 1;
  box-shadow: 0 8px 22px -10px #000b, inset 0 0 0 2px rgba(255,255,255,0.18);
  transition: background 0.2s ease;
}
.av-pick-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av-pick-txt b { font-size: 0.82em; font-weight: 750; color: var(--fg); }
.av-pick-txt span { font-size: 0.72em; color: var(--muted); line-height: 1.4; }

.av-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
}
.av-swatch {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 13px;
  border: 2px solid transparent;
  background: var(--av-g);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.av-swatch span {
  font-size: 20px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  transition: transform 0.14s ease;
}
.av-swatch:hover { transform: translateY(-2px); }
.av-swatch:hover span { transform: scale(1.12); }
.av-swatch:focus-visible { outline: 2px solid var(--bg-2); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent); }
.av-swatch.on {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent);
}
.av-swatch.on::after {
  content: "✓";
  position: absolute; right: -3px; bottom: -3px;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 900;
  box-shadow: 0 0 0 2px var(--bg-2);
}
@media (max-width: 420px) {
  .av-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 7px; }
  .av-swatch span { font-size: 18px; }
}

/* ============================================================================
   ANIMATION TILES: a distinct visual signature per motion
   Every tile used to draw the same static mini window, so the gallery read as
   twelve copies of one picture. Each style now gets its own ghost/trail shape
   and a badge, and the real animation still plays on hover, focus and click.
   ============================================================================ */
.fxpv { --ghost-o: 0.28; }

/* Ghost/trail layer behind the live window. */
.fxpv-ghost {
  position: absolute;
  left: 50%; top: 50%;
  width: 46%; height: 46%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}
.fxpv-badge {
  position: absolute;
  right: 5px; bottom: 4px;
  min-width: 15px; height: 15px;
  display: grid; place-items: center;
  padding: 0 3px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  color: var(--muted);
  font-size: 9px; font-weight: 800; line-height: 1;
}
.fxtile.on .fxpv-badge,
.fxtile.sel .fxpv-badge { background: var(--accent); color: #fff; }

/* none: the window simply is there - no trail */
.sig-none .fxpv-badge { color: color-mix(in srgb, var(--fg) 35%, transparent); }

/* fade: soft halo rings */
.sig-fade .fxpv-ghost {
  opacity: 1;
  width: 58%; height: 58%;
  border: none;
  border-radius: 6px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fg) 22%, transparent), transparent 70%);
}
/* zoom: expanding corner brackets */
.sig-zoom .fxpv-ghost {
  opacity: 1;
  width: 34%; height: 38%;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent);
}
/* pop: a ring just outside the window */
.sig-pop .fxpv-ghost {
  opacity: 1; width: 60%; height: 60%;
  border-style: solid; border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
/* slime: squashed shadow under it */
.sig-slime .fxpv-ghost {
  opacity: 1;
  width: 56%; height: 8%;
  top: auto; bottom: 8px;
  border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 16%, transparent);
}
/* genie: rising dots */
.sig-genie .fxpv-ghost {
  opacity: 1; width: 2px; height: 26%;
  border: none; border-radius: 2px;
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--accent) 75%, transparent));
  left: 50%; top: 6px; transform: translateX(-50%);
}
/* flip: a thin vertical edge line */
.sig-flip .fxpv-ghost {
  opacity: 1; width: 1px; height: 46%;
  border: none;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}
/* portal: a ring the window is coming out of */
.sig-portal .fxpv-ghost {
  opacity: 1;
  width: 74%; height: 74%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent),
              0 0 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* matrix: falling code columns, kept to the sides of the window */
.sig-matrix .fxpv-ghost {
  opacity: 1;
  width: 100%; height: 100%;
  border: none; border-radius: 0;
  background-image:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ok) 70%, transparent) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(to bottom, transparent 0 3px, color-mix(in srgb, var(--ok) 45%, transparent) 3px 5px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ok) 55%, transparent) 0 3px, transparent 3px 8px);
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-position: 9% 0, 20% 30%, 91% 10%;
  background-repeat: no-repeat;
}
/* spring: a coil under the window, not a row of blocks */
.sig-spring .fxpv-ghost {
  opacity: 1;
  width: 46%; height: 12px;
  top: auto; bottom: 6px;
  border: none; border-radius: 0;
  background:
    radial-gradient(circle at 50% 0, transparent 5px, color-mix(in srgb, var(--accent) 65%, transparent) 5.5px 6.5px, transparent 7px) center/100% 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--accent) 55%, transparent) 3px 4px);
  -webkit-mask: none; mask: none;
}
/* iris: an aperture opening around the window */
.sig-iris .fxpv-ghost {
  opacity: 1;
  width: 84%; height: 84%;
  border-radius: 50%;
  border: none;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 0 9deg,
    transparent 9deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%);
          mask: radial-gradient(closest-side, transparent 72%, #000 74%);
}
/* crystal: a faceted diamond behind the window */
.sig-crystal .fxpv-ghost {
  opacity: 1;
  width: 60%; height: 60%;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.78);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 0 50%,
    transparent 50% 100%);
  box-shadow: 6px 6px 0 -2px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Boot tiles: play on their own once the panel appears, not just on hover. */
.fxhub-sec .fxpv--boot { animation: fxpvBootIn 0.5s ease both; }
.fxhub-sec .fxpv--boot .boot-fill { width: 0; }
.fxhub-sec .fxpv--boot.run .boot-fill { animation: fxMiniFill 1.1s ease both; }
/* When reduced motion is requested, show the finished state instead. */
@media (prefers-reduced-motion: reduce) {
  .fxpv-badge { background: color-mix(in srgb, var(--fg) 10%, transparent); }
  .fxhub-sec .fxpv--boot .boot-fill { width: 100%; }
}
@keyframes fxpvBootIn {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* ============================================================================
   ADMIN: LIVE SERVER + ACTIVITY
   ============================================================================ */
.adm-live {
  display: flex; flex-direction: column; gap: 12px;
  margin: 4px 0 14px;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.adm-live-head, .adm-act-head { display: flex; align-items: center; gap: 10px; }
/* Maintenance & cleanup card in the admin Server panel. */
.adm-maint { margin: 14px 0 4px; padding: 12px 13px; border-radius: 13px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 3%, transparent); display: flex; flex-direction: column; gap: 9px; }
.adm-maint-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adm-maint-result { font-size: .7em; color: var(--muted); min-height: 1.2em; line-height: 1.5; }
.adm-maint-result b { color: #22c55e; }
.adm-maint-result i { font-style: normal; opacity: .75; margin-left: 6px; }
.adm-maint.off .adm-maint-thresholds { opacity: .45; }
.adm-switch { display: flex; align-items: center; gap: 8px; font-size: .72em; cursor: pointer; }
.adm-switch input { accent-color: var(--accent); }
.adm-maint-thresholds { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: .68em; color: var(--muted); }
.adm-maint-thresholds label { display: inline-flex; align-items: center; gap: 6px; }
.adm-maint-thresholds b { color: var(--fg); min-width: 3.2em; }
.adm-maint-thresholds .snd-range { width: 90px; }
.adm-maint-thresholds .set-input { padding: 2px 6px; font-size: .95em; }
.adm-live-at {
  margin-left: auto;
  font-size: 0.66em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ok);
}
.adm-gauges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.adm-gauge {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 11px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  min-width: 0;
}
.adm-gauge-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.adm-gauge-top span { font-size: 0.68em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.adm-gauge-top b { font-size: 0.95em; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; }
.adm-gauge-bar {
  height: 5px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}
.adm-gauge-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  transition: width 0.5s cubic-bezier(.16,1,.3,1);
}
.adm-gauge[data-tone=""] .adm-gauge-bar i { background: linear-gradient(90deg, var(--ok), var(--accent-2, var(--ok))); }
.adm-gauge-sub { font-size: 0.66em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-gauge--kv { justify-content: center; gap: 3px; }
.adm-gauge--kv span { font-size: 0.66em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.adm-gauge--kv b { font-size: 0.78em; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.adm-act-q { max-width: 190px; margin-left: auto; font-size: 0.78em; padding: 6px 10px; }
.adm-act { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.adm-act-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.adm-act-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.adm-act-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 25%, transparent); }
.adm-act-dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.adm-act-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.adm-act-who b { font-size: 0.78em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-act-who i { font-style: normal; font-size: 0.7em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-act-meta { font-size: 0.66em; color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-act-time { font-size: 0.66em; color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-act-empty { padding: 14px; text-align: center; font-size: 0.76em; color: var(--muted); }

@media (max-width: 640px) {
  .adm-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-act-q { max-width: none; width: 100%; margin-left: 0; }
  .adm-act-head { flex-wrap: wrap; }
}

/* Avatar chip + sheet: three dots, then the grid on demand. */
.av-pick {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.av-pick:hover, .av-pick.open { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.av-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.av-pick-big { width: 44px; height: 44px; font-size: 20px; }
.av-pick-txt { display: flex; flex-direction: column; gap: 1px; }
.av-pick-txt b { font-size: .84em; font-weight: 750; color: var(--fg); }
.av-pick-txt span { font-size: .72em; color: var(--muted); }
.av-pick-dots { display: inline-flex; gap: 3px; }
.av-pick-dots i { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 40%, transparent); }
.av-grid { margin-top: 10px; animation: avgIn .18s ease both; }
.av-grid[hidden] { display: none; }
@keyframes avgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Chat: pin marker, context menu, media download ---- */
.chat-pin-mark {
  display: inline-flex; align-items: center;
  width: 11px; height: 11px; margin-left: 4px;
  color: var(--accent); vertical-align: -1px;
}
.chat-pin-mark svg { width: 11px; height: 11px; }

.chat-ctx {
  position: fixed;
  z-index: 900;
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 98%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  box-shadow: 0 22px 48px -18px #000d;
  backdrop-filter: blur(16px);
  animation: ctxIn .12s ease both;
  /* Hard stops: whatever the header contains can never stretch the panel. */
  max-width: min(320px, calc(100vw - 16px));
  overflow: hidden;
}
@keyframes ctxIn { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-ctx-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px 7px;
  font-size: 0.72em; font-weight: 800; color: var(--fg);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  margin-bottom: 4px;
}
/* The avatar preview in the menu header is always a small, floor-and-cap sized
   circle. Without an explicit box the shared avatar/icon classes can blow up
   inside a flex row and take over the whole menu. */
.chat-ctx-head .chat-ctx-av {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; max-width: 22px;
  min-height: 22px; max-height: 22px; overflow: hidden; border-radius: 50%;
}
.chat-ctx-head .chat-ctx-av > * {
  width: 22px !important; height: 22px !important;
  min-width: 0 !important; min-height: 0 !important;
  max-width: 22px !important; max-height: 22px !important;
  font-size: 11px !important; line-height: 1 !important; flex: none;
  border-radius: 50% !important;
}
.chat-ctx-head .chat-ctx-av svg { width: 13px !important; height: 13px !important; }
.chat-ctx-head .chat-ctx-av::before { border-radius: 50%; }
.chat-ctx-name {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.chat-ctx-it {
  display: block; width: 100%;
  padding: 8px 10px; border-radius: 7px; border: none;
  background: none; color: var(--fg);
  font: inherit; font-size: 0.78em; text-align: left; cursor: pointer;
}
.chat-ctx-it:hover, .chat-ctx-it:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }

.chat-media-wrap { position: relative; display: inline-block; max-width: 100%; }
.chat-dl {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; border-radius: 9px;
  background: rgba(10, 10, 12, 0.62);
  color: #fff; cursor: pointer;
  opacity: 0; transition: opacity .15s ease, background .15s ease;
  backdrop-filter: blur(6px);
}
.chat-dl svg { width: 15px; height: 15px; }
.chat-media-wrap:hover .chat-dl, .chat-dl:focus-visible { opacity: 1; }
.chat-dl:hover { background: var(--accent); }
@media (hover: none) { .chat-dl { opacity: .9; } }

.chat-lightbox video, .chat-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 12px; display: block; }
.lb-bar {
  position: absolute; top: 12px; right: 12px;
  display: flex; gap: 8px; align-items: center;
}
.lb-bar .btnl { background: rgba(15,14,12,.8); color: #fff; border-color: rgba(255,255,255,.2); }

/* Lock screen: no background motion. The starfield is gone and the rotating
   rings are still, so the sign-in screen is a calm wallpaper and a card. */
#login-stars { display: none !important; }
.login-rings { display: none !important; }

/* ---- Password strength meter, auth links, modal, forgot/reset ---- */
.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pw-bar { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.pw-bar i {
  width: 26px; height: 4px; border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  transition: background .18s ease;
}
.pw-meter[data-score="1"] .pw-bar i:nth-child(-n+1) { background: var(--err); }
.pw-meter[data-score="2"] .pw-bar i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-score="3"] .pw-bar i:nth-child(-n+3) { background: var(--accent-2, var(--accent)); }
.pw-meter[data-score="4"] .pw-bar i { background: var(--ok); }
.pw-txt { font-size: 0.7em; color: var(--muted); }
.pw-meter.bad .pw-txt { color: var(--err); }

/* Live rule checklist: compact two-column list that ticks green as each rule
   is satisfied. It replaces the single vague sentence with exactly what is
   still missing. */
.pw-rules-box { margin-top: 7px; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); }
.pw-rules-box.all { border-color: color-mix(in srgb, var(--ok, #2e9e5b) 45%, transparent); background: color-mix(in srgb, var(--ok, #2e9e5b) 10%, transparent); }
.pw-rules-hd { display: block; font-size: 0.68em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.pw-rules-box.all .pw-rules-hd { color: var(--ok, #2e9e5b); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.pw-rules li { display: flex; align-items: baseline; gap: 6px; font-size: 0.72em; line-height: 1.45; color: var(--muted); transition: color .15s ease; }
.pw-rules li i { font-style: normal; width: 1em; flex: 0 0 auto; text-align: center; }
.pw-rules li.ok { color: var(--ok, #2e9e5b); }
.pw-rules li.ok i { font-weight: 800; }
.pw-rules li em { font-style: normal; opacity: 0.75; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .pw-rules { grid-template-columns: 1fr; } }

.auth-link {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0; border: none; background: none;
  color: var(--accent); font: inherit; font-size: 0.74em; font-weight: 650;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.auth-link:hover { filter: brightness(1.15); }
.auth-hint { margin-top: 4px; font-size: 0.68em; color: var(--muted); line-height: 1.4; }

.pw-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(6, 6, 8, 0.66);
  backdrop-filter: blur(6px);
  animation: fadeIn .14s ease both;
}
.pw-card {
  width: min(400px, 100%);
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  border-radius: 16px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  box-shadow: 0 30px 70px -24px #000e;
}
.pw-card h3 { margin: 0; font-size: 1em; font-weight: 800; color: var(--fg); }
.pw-msg { min-height: 1.1em; font-size: 0.76em; color: var(--muted); }
.pw-msg.ok { color: var(--ok); }
.pw-msg.bad { color: var(--err); }
.pw-btns { display: flex; justify-content: flex-end; gap: 8px; }

.adm-check {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 0 10px;
  font-size: 0.78em; color: var(--fg); cursor: pointer;
}
.adm-check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------- text customisation (Appearance → Text colour / Bold) ----------
   Choosing a colour writes an inline `--fg` on <html>, so it overrides the
   active theme palette without fighting it. Bold mode thickens body copy and
   light weights only; headings that are already heavy stay as they are, so the
   page gains weight instead of turning into one solid slab. */
[data-textbold="1"] body {
  font-weight: 600;
}
[data-textbold="1"] body :is(p, span, li, td, label, b, strong, em, i, button, input, textarea, select, div) {
  font-weight: 600;
}
[data-textbold="1"] body :is(.faint, small, .set-nav-item span:last-child, .mb-item) {
  font-weight: 550;
}
[data-textbold="1"] body :is(h1, h2, h3, h4, h5, h6, .set-sec-head b) {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Password modal header: an icon + title + one-line explanation, so the
   "reset your password" dialog reads as a purposeful step, not a bare field
   floating in a box. */
.pw-head { display: flex; gap: 12px; align-items: flex-start; }
.pw-head-ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pw-head-ic svg { width: 20px; height: 20px; }
.pw-sub { margin: 4px 0 0; font-size: 0.78em; line-height: 1.5; color: var(--muted); }

/* App-aware window menu: a small header names the app, and an icon column
   keeps the app-specific actions visually distinct from the window controls. */
#ctx .ctx-head { padding: 6px 10px 4px; font-size: 0.62em; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
#ctx .ctx-ic { display: inline-block; width: 1.15em; margin-right: 7px; opacity: 0.9; }

/* ---------- pastaay tutorial (rewritten) ----------
   A small top row (step counter + progress dots), an avatar with the mascot's
   name, then the message. It reads as one colleague walking you through a
   shift instead of a bare emoji above a wall of text. */
.px-tut-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.px-tut-step { font-size: 0.62em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.px-tut-dots { display: inline-flex; gap: 5px; align-items: center; }
.px-tut-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 16%, transparent);
  transition: background .2s ease, transform .2s ease;
}
.px-tut-dots i.on { transform: scale(1.35); }
.px-tut-dots i.on { background: var(--accent); }
.px-tut-avatar { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.px-tut-name { font-size: 0.66em; font-weight: 800; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
.px-tut-card { max-width: 360px; }

/* ---------- live pastaay demo (About) ---------- */
.ab-demo {
  border-radius: 16px; padding: 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, #ff7a45 14%, transparent), transparent 60%),
    color-mix(in srgb, var(--fg) 4%, transparent);
}
.ab-demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ab-demo-k { font-size: .64em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ff7a45; }
.ab-demo-hint { font-size: .72em; color: var(--muted); }
.ab-demo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 620px) { .ab-demo-grid { grid-template-columns: repeat(2, 1fr); } }
.ab-demo-svc {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 70px; padding: 8px 6px;
  border-radius: 11px; cursor: pointer; font: inherit;
  background: color-mix(in srgb, #22c55e 12%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 28%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .1s ease;
}
.ab-demo-svc:active { transform: scale(.97); }
.ab-demo-name { font-size: .68em; font-weight: 700; color: var(--fg); }
.ab-demo-fault { font-size: 1.25em; line-height: 1.1; font-weight: 800; min-height: 1.1em; }
.ab-demo-taps { position: absolute; top: 4px; right: 6px; font-size: .6em; font-weight: 800; color: var(--muted); }
.ab-demo-svc.faulty {
  background: color-mix(in srgb, #ff7a45 18%, transparent);
  border-color: color-mix(in srgb, #ff7a45 55%, transparent);
  animation: abDemoPulse 1.1s ease-in-out infinite;
}
.ab-demo-svc.healed { background: color-mix(in srgb, #22c55e 34%, transparent); border-color: #22c55e; }
@keyframes abDemoPulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #ff7a45 16%, transparent); } }
.ab-demo-foot { display: flex; align-items: center; gap: 12px; margin-top: 11px; flex-wrap: wrap; }
.ab-demo-sla, .ab-demo-stat { font-size: .72em; color: var(--muted); }
.ab-demo-sla b, .ab-demo-stat b { color: var(--fg); font-variant-numeric: tabular-nums; }
.ab-demo-sla b.low { color: #ff5f57; }
.ab-demo-chaos {
  margin-left: auto; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .72em; font-weight: 800;
  color: #ff7a45; background: color-mix(in srgb, #ff7a45 14%, transparent);
  border: 1px solid color-mix(in srgb, #ff7a45 40%, transparent);
}
.ab-demo-chaos:hover { background: color-mix(in srgb, #ff7a45 24%, transparent); }

/* ---------- profile sign-in / sign-out transitions ----------
   The card plays its effect, fades down, and the rebuilt profile rises in. */
.set-profile .auth-card--out { animation: authCardOut .6s cubic-bezier(.4, 0, .8, .4) forwards; }
@keyframes authCardOut {
  to { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(2px); }
}
.set-panel.auth-card--in { animation: authPaneIn .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes authPaneIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .set-profile .auth-card--out, .set-panel.auth-card--in { animation-duration: .01ms; }
}

/* ---------- profile: login mode (account password vs password-free) ---------- */
.auth-loginmode {
  margin-top: 14px; padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.alm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.alm-head b { font-size: .82em; color: var(--fg); }
.alm-state { font-size: .64em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.alm-state.is-locked { color: var(--err, #ff5f57); }
.alm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .alm-opts { grid-template-columns: 1fr; } }
.alm-opt {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font: inherit;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  transition: border-color .16s ease, background .16s ease;
}
.alm-opt:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.alm-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.alm-opt:disabled { cursor: not-allowed; opacity: .55; }
.alm-ic { font-size: 1.1em; line-height: 1; }
.alm-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.alm-tx b { font-size: .76em; color: var(--fg); }
.alm-tx i { font-style: normal; font-size: .66em; color: var(--muted); }
.alm-hint { margin: 9px 0 0; font-size: .68em; line-height: 1.5; color: var(--muted); }
.auth-loginmode.locked .alm-hint { color: var(--err, #ff5f57); }

/* ---------- wallpaper mark (cemOS yazısı) ----------
   One component, used by the maker preview AND the real desktop. Position is
   expressed as inset + a translate pair in CSS variables, so rotation can be
   composed on top without fighting the centring transform. */
.wallmark, .wm-logo {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: baseline; justify-content: center;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
  white-space: nowrap; pointer-events: none; user-select: none;
  transform: translate(var(--mk-tx, 0%), var(--mk-ty, 0%)) rotate(var(--mark-rot, 0deg));
  transform-origin: center center;
  transition: font-size .15s ease, color .15s ease, opacity .2s ease;
}
.wallmark[hidden], .wm-logo[hidden] { display: none; }
.wallmark i, .wm-logo i { font-style: normal; opacity: .62; }

/* glass: frosted slab with a hairline */
.wallmark[data-wstyle="glass"], .wm-logo[data-wstyle="glass"] {
  padding: .24em .46em .3em; border-radius: .34em;
  background: linear-gradient(150deg, rgba(255,255,255,.20), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 16px 40px -18px #000b, inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow: 0 1px 2px #0005;
}
/* solid: an opaque accent slab */
.wallmark[data-wstyle="solid"], .wm-logo[data-wstyle="solid"] {
  padding: .23em .44em .29em; border-radius: .28em;
  background: color-mix(in srgb, var(--accent) 90%, #000);
  color: #fff !important;
  box-shadow: 0 14px 34px -16px #000c;
}
.wallmark[data-wstyle="solid"] i, .wm-logo[data-wstyle="solid"] i { opacity: .85; }
/* outline: hollow letters */
.wallmark[data-wstyle="outline"], .wm-logo[data-wstyle="outline"] {
  color: transparent !important;
  -webkit-text-stroke: .02em var(--mark-stroke, #fff);
  opacity: .95;
}
/* neon: accent glow */
.wallmark[data-wstyle="neon"], .wm-logo[data-wstyle="neon"] {
  color: var(--accent) !important;
  text-shadow:
    0 0 .16em color-mix(in srgb, var(--accent) 90%, #fff),
    0 0 .5em color-mix(in srgb, var(--accent) 65%, transparent);
}
/* shadow: plain ink with a long soft shadow, reads on busy photos */
.wallmark[data-wstyle="shadow"], .wm-logo[data-wstyle="shadow"] {
  color: #fff !important;
  text-shadow: 0 .06em .18em rgba(0,0,0,.55), 0 .02em .04em rgba(0,0,0,.45);
}

/* The preview canvas must clip and position its mark; without `position:
   relative` the absolute mark escaped to the window and landed anywhere. */
.wm-canvas { position: relative; overflow: hidden; }

/* maker: 3x3 position picker */
.wm-pos { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 108px; }
.wm-posb {
  display: grid; place-items: center; height: 30px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .8em;
  color: var(--muted); background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.wm-posb.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wm-mark[hidden] { display: none; }

/* Keep the mark controls compact so the whole sidebar fits without a long
   scroll inside a 620px-tall window. */
.wm-mark .mk-head { margin-top: 2px; }
.wm-mark .mk-ctl { margin: 0; }
.wm-mark .wm-seg { flex-wrap: wrap; }
.wm-mark .proto-pill { padding: 3px 8px; font-size: .66em; }
.wm-mark .wm-pos { width: 96px; }
.wm-mark .wm-posb { height: 24px; font-size: .7em; }
.wm-side .wm-presets { grid-template-columns: repeat(4, 1fr); }
.wm-side .mk-preset { height: 34px; }

/* Window buttons must never be clipped: `overflow: hidden` here hid the chat
   window's close/minimise/maximise dots completely. Keep the group sized by its
   content instead, and let the gate itself absorb any overflow. */
.cg-dots { flex: 0 0 auto; }
.chat-gate { overflow: hidden; }

/* ---------- About: alignment + brief polish ----------
   The card blocks are inset by their own padding; the free-standing
   paragraphs and chips must line up with that visual edge instead of hugging
   the window border. */
.ab { padding: 4px 18px 26px; }
.ab-pitch, .ab-sec-title, .ab-skills, .ab-edus, .ab-work { margin-inline: 0; }
.ab-sec-title { display: flex; align-items: center; gap: 10px; }
.ab-sec-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 14%, transparent), transparent);
}
/* Brief: a lead line, then three labelled proofs. The old version had no
   hierarchy, so it read as a wall of grey text. */
.ab-brief { gap: 16px; }
.ab-brief-lead {
  margin: 0; font-size: .96em; line-height: 1.7; color: var(--fg);
  max-width: 60ch; text-wrap: pretty;
}
.ab-brief-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ab-brief-list li {
  display: grid; grid-template-columns: 108px 1fr; gap: 14px;
  align-items: baseline;
  padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.ab-brief-list b { font-size: .8em; font-weight: 800; color: var(--fg); }
.ab-brief-list span { font-size: .8em; line-height: 1.55; color: var(--muted); }
@media (max-width: 560px) { .ab-brief-list li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- mascot-guided tour ----------
   A spotlight cut-out over the thing being explained, plus a card the mascot
   sits in. The overlay itself never blocks clicks outside the card, so the
   desktop stays usable while the tour is open. */
.mtour { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
.mtour-out { opacity: 0; transition: opacity .24s ease; }
.mtour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(4, 4, 8, 0.55), 0 0 0 2px var(--accent), 0 0 30px 2px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: left .26s cubic-bezier(.22,1,.36,1), top .26s cubic-bezier(.22,1,.36,1),
              width .26s cubic-bezier(.22,1,.36,1), height .26s cubic-bezier(.22,1,.36,1);
}
.mtour-card {
  position: fixed; pointer-events: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: 0 30px 80px -30px #000f, inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.mtour-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mtour-step { font-size: .62em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.mtour-dots { display: inline-flex; gap: 4px; }
.mtour-dots i { width: 13px; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 14%, transparent); transition: background .2s ease; }
.mtour-dots i.on { background: var(--accent); }
.mtour-body { display: flex; align-items: flex-start; gap: 12px; }
.mtour-face { flex: 0 0 auto; width: 46px; }
.mtour-mascot { width: 46px; height: 53px; display: block; }
.mtour-mascot .ms-body { fill: var(--accent); }
.mtour-mascot .ms-ear { fill: var(--accent); }
.mtour-mascot .ms-stripe { fill: color-mix(in srgb, #000 22%, var(--accent)); }
.mtour-mascot .ms-eye { fill: #fff; }
.mtour-mascot .ms-pupil { fill: #1a1a1a; }
.mtour-mascot .ms-shine { fill: #fff; }
.mtour-mascot .ms-mouth, .mtour-mascot .ms-tail { stroke: #1a1a1a; }
.mtour-mascot .ms-scarf { fill: color-mix(in srgb, #000 35%, var(--accent)); }
.mtour-mascot .ms-shadow { fill: rgba(0,0,0,.28); }
.mtour-text { min-width: 0; }
.mtour-title { display: block; font-size: .92em; font-weight: 800; color: var(--fg); margin-bottom: 3px; }
.mtour-desc { margin: 0; font-size: .8em; line-height: 1.6; color: var(--muted); }
.mtour-btns { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mtour-right { display: flex; gap: 8px; margin-left: auto; }
.mtour-skip {
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; font-size: .74em; font-weight: 650; color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.mtour-skip:hover { color: var(--fg); }

/* While touring, the real mascot waits at the side instead of floating over
   the card. */
#mascot.ms-touring { opacity: 0; pointer-events: none; }
#mascot.ms-goodbye { animation: msWave 1s ease; }
@keyframes msWave {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-8px) rotate(-9deg); }
  45% { transform: translateY(-4px) rotate(9deg); }
  70% { transform: translateY(-7px) rotate(-6deg); }
}

/* ---------- animated wallpapers ----------
   The generated wallpaper is an inline background on #wallpaper, so motion is
   driven by a data attribute instead of extra elements. Only transform/opacity/
   filter are animated (compositor-friendly), and reduced-motion users get none. */
#wallpaper[data-anim="drift"] { animation: wallDrift 26s ease-in-out infinite alternate; }
#wallpaper[data-anim="pulse"] { animation: wallPulse 9s ease-in-out infinite; }
#wallpaper[data-anim="hue"]   { animation: wallHue 38s linear infinite; }
#wallpaper[data-anim="spin"]  { animation: wallSpin 70s linear infinite; }
#wm-canvas[data-anim="drift"] { animation: wallDrift 26s ease-in-out infinite alternate; }
#wm-canvas[data-anim="pulse"] { animation: wallPulse 9s ease-in-out infinite; }
#wm-canvas[data-anim="hue"]   { animation: wallHue 38s linear infinite; }
#wm-canvas[data-anim="spin"]  { animation: wallSpin 70s linear infinite; }

@keyframes wallDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 40%; }
  100% { background-position: 30% 70%; }
}
@keyframes wallPulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.16) saturate(1.22); }
}
@keyframes wallHue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes wallSpin {
  0%   { transform: scale(1.18) rotate(0deg); }
  100% { transform: scale(1.18) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #wallpaper[data-anim], #wm-canvas[data-anim] { animation: none !important; }
}

/* ---------- auth feedback v3: quiet ----------
   Overrides the old bloom/spark/glow set (still present earlier in the file).
   One short lift + fade per action; nothing scales past 1.01 and nothing
   pulses, blurs or flashes. */
.auth-card.fx-register { animation: authQuietIn .5s cubic-bezier(.22,1,.36,1) both !important; }
.auth-card.fx-login    { animation: authQuietIn .45s cubic-bezier(.22,1,.36,1) both !important; }
.auth-card.fx-logout   { animation: authQuietOut .5s ease both !important; }
.auth-card.fx-register::after,
.auth-card.fx-login::after { content: none !important; animation: none !important; }
.auth-fx-ring, .auth-okflash { display: none !important; }

@keyframes authQuietIn {
  from { opacity: .55; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes authQuietOut {
  from { opacity: 1; transform: none; }
  to   { opacity: .5; transform: translateY(-4px); }
}

/* ---------- lock screen: PC unlock password ---------- */
.login-pass { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; width: min(280px, 84%); }
.login-pass[hidden] { display: none; }
.login-pass-input {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 12px; border-radius: 10px;
  font: inherit; font-size: .86em;
  color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  outline: none;
}
.login-pass-input:focus { border-color: var(--accent); }
.login-pass-input.shake { animation: lpShake .4s ease; }
@keyframes lpShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.login-pass-eye {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; cursor: pointer; font-size: .8em;
  color: var(--muted); background: color-mix(in srgb, var(--fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}
.login-pass-eye:hover { color: var(--fg); }

/* ---------- settings: PC sign-in block ---------- */
.pcpass { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 4%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); }
.pcpass-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pcpass-row .lbl { font-size: .82em; color: var(--fg); }
.pcpass-set { display: flex; gap: 8px; flex-wrap: wrap; }
.pcpass-set[hidden] { display: none; }
.pcpass-set .set-input { flex: 1 1 140px; min-width: 120px; }
.pcpass-hint { margin: 0; font-size: .68em; line-height: 1.5; color: var(--muted); }

/* ============================================================================
   AUTH FEEDBACK v4 — calm, readable, and long enough to actually be seen.
   The old stack of rings/sparks/flashes is overridden here: one soft lift, a
   centred status panel with a tick, and a thin progress line. The JS holds it
   for ~2.4s before swapping the card.
   ============================================================================ */
.auth-card.fx-login,
.auth-card.fx-register {
  animation: authSoftIn .62s cubic-bezier(.22, 1, .36, 1) both !important;
}
.auth-card.fx-logout {
  animation: authSoftOut .55s ease both !important;
}
.auth-card.fx-login::after,
.auth-card.fx-register::after,
.auth-card.fx-login::before,
.auth-card.fx-register::before,
.auth-card.fx-logout::before {
  content: none !important;
  animation: none !important;
}
.auth-fx-ring, .auth-okflash { display: none !important; }
@keyframes authSoftIn {
  from { opacity: .72; transform: translateY(7px) scale(.988); }
  to   { opacity: 1; transform: none; }
}
@keyframes authSoftOut {
  0%   { opacity: 1; transform: none; }
  45%  { opacity: .62; transform: translateY(3px) scale(.994); }
  100% { opacity: 1; transform: none; }
}
.auth-status {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  text-align: center;
}
.auth-card.auth-status-on .auth-status { opacity: 1; }
.auth-card.auth-status-on .auth-submit,
.auth-card.auth-status-on .auth-tab,
.auth-card.auth-status-on input,
.auth-card.auth-status-on button { pointer-events: none; }
.auth-status-ic {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--accent) 70%, transparent);
}
.auth-status-ic svg { width: 25px; height: 25px; }
.auth-status b { font-size: .98em; letter-spacing: -.01em; }
.auth-status i { font-style: normal; font-size: .74em; color: var(--muted); line-height: 1.35; }
.auth-status-bar {
  width: 156px;
  height: 3px;
  margin-top: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}
.auth-status-bar em {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  animation: authStatusBar 2.15s linear forwards;
}
@keyframes authStatusBar { from { width: 0; } to { width: 100%; } }
.auth-card.fx-logout .auth-status-ic { color: var(--muted); border-color: var(--line); background: color-mix(in srgb, var(--fg) 6%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .auth-card.fx-login, .auth-card.fx-register, .auth-card.fx-logout,
  .auth-status-bar em { animation-duration: .01ms !important; }
}

/* Guest escape hatch on the lock screen. */
.login-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  margin-top: 9px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.login-guest[hidden] { display: none; }
.login-guest span { font-size: .78em; font-weight: 700; }
.login-guest i { font-style: normal; font-size: .63em; color: var(--muted); }
.login-guest:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-1px);
}

/* ============================================================================
   FILES APP
   ============================================================================ */
#win-files .win__body,
#win-screenshot .win__body,
#win-paint .win__body {
  padding: 0;
  padding-top: var(--winbar-h, 30px);
  overflow: hidden;
  display: block;
}
#win-files .win__body { position: relative; }
.fxa {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  height: 100%;
  position: relative;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--base-font, 14px);
}
.fxa svg, .shot svg, .pnt svg { width: 16px; height: 16px; flex: none; }
.fxa-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 11px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, var(--bg-2));
  /* The folders list is the only part allowed to shrink; without this the
     storage footer is pushed out of the sidebar and its text is cut in half. */
  overflow: hidden;
}
.fxa-brand { display: flex; align-items: center; gap: 10px; padding: 3px 6px 12px; }
.fxa-brand-ic {
  width: 35px; height: 35px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #f3c357, #b97a15);
  box-shadow: 0 8px 18px -10px #0008;
}
.fxa-brand div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fxa-brand b { font-size: .92em; }
.fxa-brand span { font-size: .64em; color: var(--muted); }
.fxa-nav { display: flex; flex-direction: column; gap: 3px; }
.fxa-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--muted); font: inherit; font-size: .76em;
  font-weight: 600; cursor: pointer; text-align: left;
  transition: background .14s ease, color .14s ease;
}
.fxa-nav-item svg { opacity: .85; }
.fxa-nav-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxa-nav-item em {
  font-style: normal; font-size: .82em; min-width: 19px; text-align: center;
  padding: 1px 5px; border-radius: 99px; color: var(--muted);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.fxa-nav-item:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.fxa-nav-item.on {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.fxa-nav-item.on svg { color: var(--accent); opacity: 1; }
/* Folders take the leftover height and scroll; the storage card stays pinned. */
.fxa-folders { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.fxa-store-hint { display: block; line-height: 1.4; overflow-wrap: anywhere; }
.fxa-quota { display: block; margin-top: 2px; color: var(--muted); font-size: .92em; white-space: nowrap; }
.fxa-store {
  flex: 0 0 auto; min-width: 0;
  margin-top: auto; display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.fxa-store-t { display: flex; justify-content: space-between; gap: 6px; font-size: .68em; }
.fxa-store-t b { font-size: 1.05em; }
.fxa-store-t span { color: var(--muted); }
.fxa-meter { height: 4px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.fxa-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .35s ease; }
.fxa-store-hint { font-size: .6em; color: var(--muted); line-height: 1.35; }
.fxa-main { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.fxa-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px 11px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.fxa-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fxa-title h2 { margin: 0; font-size: 1.03em; letter-spacing: -.02em; }
.fxa-title span { font-size: .67em; color: var(--muted); white-space: nowrap; }
.fxa-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fxa-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--muted); min-width: 148px;
}
.fxa-search:focus-within { border-color: var(--accent); }
.fxa-search input {
  border: none; background: none; outline: none; color: var(--fg);
  font: inherit; font-size: .74em; width: 130px; min-width: 0;
}
.fxa-sort {
  padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--fg); font: inherit; font-size: .7em;
}
.fxa-iconbtn {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--muted); cursor: pointer;
}
.fxa-iconbtn:hover, .fxa-iconbtn.on { color: var(--fg); border-color: var(--accent); }
.fxa-upload { padding: 7px 12px; font-size: .72em; }
.fxa-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px 18px; }
.fxa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}
.fxa-card {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 7px;
  padding: 8px; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fxa-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 12px 24px -18px #000b;
}
.fxa-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fxa-thumb {
  position: relative; display: grid; place-items: center;
  width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}
.fxa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fxa-ftype { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; }
.fxa-ftype svg { width: 24px; height: 24px; }
.fxa-ftype--image { color: #4fa3ff; background: #4fa3ff1c; }
.fxa-ftype--video { color: #ff8a5c; background: #ff8a5c1c; }
.fxa-ftype--audio { color: #a78bfa; background: #a78bfa1c; }
.fxa-ftype--pdf { color: #ff6b6b; background: #ff6b6b1c; }
.fxa-ftype--text { color: #8fd694; background: #8fd6941c; }
.fxa-ftype--archive { color: #f2c14e; background: #f2c14e1c; }
.fxa-ftype--file { color: var(--muted); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.fxa-ext {
  position: absolute; left: 5px; bottom: 5px;
  padding: 1px 5px; border-radius: 5px; font-size: .55em; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; color: var(--fg);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.fxa-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; background: rgba(0,0,0,.22);
}
.fxa-play svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 5px #0008); }
.fxa-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fxa-info b { font-size: .72em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxa-info span { font-size: .62em; color: var(--muted); }
.fxa-acts {
  position: absolute; top: 12px; right: 12px; display: flex; gap: 3px;
  opacity: 0; transform: translateY(-3px); transition: opacity .14s ease, transform .14s ease;
}
.fxa-card:hover .fxa-acts, .fxa-card:focus-within .fxa-acts { opacity: 1; transform: none; }
.fxa-acts button {
  width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  color: var(--fg); cursor: pointer;
}
.fxa-acts button:hover { color: var(--accent); border-color: var(--accent); }
.fxa-acts button svg { width: 13px; height: 13px; }
.fxa-grid.is-list { display: flex; flex-direction: column; gap: 6px; }
.fxa-grid.is-list .fxa-card { flex-direction: row; align-items: center; padding: 6px 10px; }
.fxa-grid.is-list .fxa-thumb { width: 44px; height: 44px; aspect-ratio: auto; flex: none; }
.fxa-grid.is-list .fxa-ftype { width: 34px; height: 34px; }
.fxa-grid.is-list .fxa-ftype svg { width: 18px; height: 18px; }
.fxa-grid.is-list .fxa-info { flex: 1 1 auto; }
.fxa-grid.is-list .fxa-acts { position: static; opacity: 1; transform: none; margin-left: auto; }
.fxa-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 54px 18px; }
.fxa-empty[hidden] { display: none; }
.fxa-empty-ic {
  width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center;
  color: var(--muted); background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px dashed color-mix(in srgb, var(--fg) 18%, transparent);
}
.fxa-empty-ic svg { width: 27px; height: 27px; }
.fxa-empty b { font-size: .92em; }
.fxa-empty p { margin: 0; max-width: 330px; font-size: .72em; line-height: 1.5; color: var(--muted); }
.fxa-drop {
  position: absolute; inset: 8px; z-index: 20; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  backdrop-filter: blur(5px); pointer-events: none;
}
.fxa-drop[hidden] { display: none; }
.fxa-drop > span:first-child { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fxa-drop svg { width: 25px; height: 25px; }
.fxa-drop b { font-size: 1em; }
.fxa-drop > span:last-child { font-size: .72em; color: var(--muted); }
.fxa-prev {
  position: absolute; inset: var(--winbar-h, 30px) 0 0; z-index: 30;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6, 5, 9, .62); backdrop-filter: blur(7px);
}
.fxa-prev[hidden] { display: none; }
.fxa-prev-card {
  width: min(780px, 100%); height: 100%; max-height: 100%;
  display: flex; flex-direction: column; gap: 10px; padding: 13px;
  border-radius: 15px; border: 1px solid var(--line);
  background: var(--bg-2); box-shadow: 0 30px 70px -30px #000;
}
.fxa-prev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fxa-prev-head div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fxa-prev-head b { font-size: .86em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxa-prev-head span { font-size: .64em; color: var(--muted); }
.fxa-prev-body { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--fg) 4%, transparent); }
.fxa-prev-body img, .fxa-prev-body video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.fxa-prev-body audio { width: min(420px, 86%); }
.fxa-pdf { width: 100%; height: 100%; border: none; background: #fff; }
.fxa-text {
  margin: 0; width: 100%; height: 100%; overflow: auto; padding: 14px;
  white-space: pre-wrap; word-break: break-word; color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72em; line-height: 1.55;
}
.fxa-prev-file { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); }
.fxa-prev-file svg { width: 46px; height: 46px; }
.fxa-prev-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.fxa-prev-acts .btnl { padding: 7px 11px; font-size: .72em; }

/* ============================================================================
   SCREENSHOT APP
   ============================================================================ */
.shot { display: grid; grid-template-columns: minmax(0, 1fr) 286px; height: 100%; background: var(--bg); }
.shot-stage {
  min-width: 0; padding: 15px; display: grid; place-items: stretch;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--bg);
}
.shot-preview {
  display: grid; place-items: center; min-height: 0; overflow: hidden;
  border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--fg) 16%, transparent);
  background: repeating-conic-gradient(color-mix(in srgb, var(--fg) 3%, transparent) 0 25%, transparent 0 50%) 0 / 22px 22px;
}
.shot-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 9px; box-shadow: 0 18px 44px -22px #000c; }
.shot-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 24px; max-width: 320px; }
.shot-empty > span {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.shot-empty svg { width: 27px; height: 27px; }
.shot-empty b { font-size: .94em; }
.shot-empty p { margin: 0; font-size: .71em; line-height: 1.5; color: var(--muted); }
.shot-side {
  min-width: 0; display: flex; flex-direction: column; gap: 13px;
  padding: 16px; border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, var(--bg-2));
}
.shot-head h2 { margin: 0; font-size: 1em; letter-spacing: -.02em; }
.shot-head p { margin: 3px 0 0; font-size: .66em; color: var(--muted); }
.shot-group { display: flex; flex-direction: column; gap: 5px; }
.shot-lbl { font-size: .62em; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.shot-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.shot-pill {
  border: none; border-radius: 7px; padding: 6px 4px;
  background: none; color: var(--muted); font: inherit; font-size: .68em;
  font-weight: 700; cursor: pointer;
}
.shot-pill.on { background: var(--bg); color: var(--fg); box-shadow: 0 2px 8px -4px #0008; }
.shot-go { width: 100%; justify-content: center; padding: 10px; font-weight: 700; }
.shot-go:disabled { opacity: .6; cursor: wait; }
.shot-status { font-size: .68em; color: var(--muted); min-height: 1.4em; }
.shot-status.ok { color: var(--ok); }
.shot-status.bad { color: var(--err); }
.shot-acts { display: grid; gap: 5px; }
.shot-acts[hidden] { display: none; }
.shot-acts .btnl { justify-content: center; padding: 8px 10px; font-size: .72em; }
.shot-note { margin-top: auto; font-size: .61em; line-height: 1.5; color: var(--muted); }

/* ============================================================================
   PAINT APP
   ============================================================================ */
.pnt { display: flex; flex-direction: column; height: 100%; background: var(--bg); }
.pnt-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, var(--bg-2));
}
.pnt-tools { display: flex; gap: 3px; flex-wrap: wrap; }
.pnt-tool {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 8px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--muted); font: inherit; font-size: .68em;
  font-weight: 700; cursor: pointer;
}
.pnt-tool span { display: none; }
.pnt-tool:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.pnt-tool.on { color: var(--fg); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.pnt-tool.on svg { color: var(--accent); }
.pnt-sep { width: 1px; height: 22px; background: var(--line); flex: none; }
.pnt-size { display: flex; align-items: center; gap: 6px; font-size: .64em; color: var(--muted); white-space: nowrap; }
.pnt-size input { width: 82px; accent-color: var(--accent); }
.pnt-size b { color: var(--fg); min-width: 18px; text-align: right; }
.pnt-colors { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pnt-sw {
  width: 21px; height: 21px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px #0003;
}
.pnt-sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.pnt-sw--custom {
  position: relative; display: grid; place-items: center;
  background: conic-gradient(#ff6b6b, #facc15, #22c55e, #3b82f6, #8b5cf6, #ff6b6b);
  border: 1px solid var(--line); color: #fff; font-weight: 900; font-size: .8em;
  text-shadow: 0 1px 3px #000b;
}
.pnt-sw--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pnt-bar-acts { margin-left: auto; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pnt-icon {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--muted); cursor: pointer;
}
.pnt-icon:hover { color: var(--fg); border-color: var(--accent); }
.pnt-icon--danger:hover { color: var(--err); border-color: var(--err); }
.pnt-bar-acts .btnl { padding: 6px 10px; font-size: .68em; }
.pnt-stage {
  flex: 1 1 auto; min-height: 0; display: grid; place-items: center;
  padding: 12px; overflow: auto;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%), var(--bg-3);
}
#pnt-canvas {
  display: block; border-radius: 8px; background: #fff; touch-action: none;
  cursor: crosshair; box-shadow: 0 16px 36px -24px #000c, 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent);
  max-width: 100%; max-height: 100%;
}
.pnt-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; border-top: 1px solid var(--line);
  font-size: .63em; color: var(--muted);
}

@media (max-width: 760px) {
  .fxa { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .fxa-side {
    flex-direction: row; align-items: center; gap: 6px; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--line); padding: 7px 8px;
  }
  .fxa-brand { padding: 0 6px 0 2px; flex: none; }
  .fxa-brand span { display: none; }
  .fxa-nav { flex-direction: row; flex: 1 1 auto; overflow-x: auto; }
  .fxa-nav-item { padding: 6px 9px; flex: none; }
  .fxa-nav-item em { display: none; }
  .fxa-store { margin: 0; padding: 4px 7px; border: none; background: none; min-width: 92px; }
  .fxa-store-hint { display: none; }
  .fxa-top { padding: 9px 10px; }
  .fxa-search { min-width: 0; flex: 1 1 140px; }
  .fxa-search input { width: 100%; }
  .fxa-sort { display: none; }
  .fxa-scroll { padding: 10px; }
  .fxa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fxa-card { padding: 6px; }
  .fxa-acts { opacity: 1; transform: none; }
  .fxa-prev { padding: 8px; }
  .fxa-prev-card { padding: 9px; }
  .shot { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .shot-stage { padding: 9px; }
  .shot-side { border-left: none; border-top: 1px solid var(--line); padding: 11px; gap: 9px; max-height: 50%; overflow: auto; }
  .shot-note { margin-top: 2px; }
  .pnt-bar { padding: 7px 8px; gap: 5px; }
  .pnt-tool { padding: 6px; }
  .pnt-size { display: none; }
  .pnt-bar-acts { margin-left: 0; width: 100%; justify-content: flex-end; }
  .pnt-stage { padding: 7px; }
  .pnt-foot { font-size: .56em; }
}

/* The three traffic-light dots are absolutely positioned in the chat gate.
   Their glyph pseudo-elements can report a wider scroll box than the 50px
   control, which made the gate (and therefore the chat pane) look like it had
   horizontal overflow on desktop. Clip the control itself so the gate stays
   exactly as wide as the window. */
.cg-dots, .cg-dots .wdots { overflow: hidden; }

/* ==========================================================================
   NEW FEATURES — Paint zoom, designed dialogs, Trash, Market, Files selection,
   dynamic chrome, dock positions, voice rooms, settings search.
   ========================================================================== */

/* Paint: the canvas fills the app; zoom is a CSS transform so export stays 1:1. */
.pnt-stage { overflow: auto; align-content: start; justify-content: start; }
.pnt-stage.zoomed { padding: 18px; }
.pnt-zoom {
  display: flex; align-items: center; gap: 4px; padding: 3px 5px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--chip);
}
.pnt-zoom b { min-width: 42px; text-align: center; font-size: 0.72em; color: var(--muted); }
.pnt-zoom .pnt-icon { width: 26px; height: 26px; }

/* Designed confirm / prompt dialogs (no native popups anywhere). */
.cfm-layer {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center;
  padding: 18px; background: rgba(4, 6, 12, 0.58); backdrop-filter: blur(7px);
  animation: cfmFade .16s ease both;
}
.cfm-card {
  width: min(390px, calc(100vw - 32px));
  border-radius: 18px; padding: 20px 20px 16px;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  box-shadow: 0 30px 80px -22px rgba(0,0,0,.75);
  animation: cfmIn .22s cubic-bezier(.16,1,.3,1) both;
}
.cfm-card--danger { border-color: color-mix(in srgb, #ef4444 52%, var(--line)); }
.cfm-ic {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 13px; font-size: 21px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.cfm-card--danger .cfm-ic { background: color-mix(in srgb, #ef4444 14%, transparent); border-color: color-mix(in srgb, #ef4444 40%, transparent); }
.cfm-title { display: block; font-size: 1.04em; letter-spacing: -.01em; }
.cfm-msg { margin: 7px 0 15px; font-size: .8em; line-height: 1.55; color: var(--muted); }
.cfm-input {
  width: 100%; box-sizing: border-box; margin: 0 0 15px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  color: var(--fg); font: inherit; outline: none;
}
.cfm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cfm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cfm-out { animation: cfmFade .16s ease reverse both; }
@keyframes cfmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cfmIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* Trash app. */
.tra { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tra-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.tra-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tra-big-ic {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
}
.tra-big-ic svg { width: 23px; height: 23px; }
.tra-title h2 { margin: 0; font-size: 1.02em; }
.tra-title span:not(.tra-big-ic) { font-size: .72em; color: var(--muted); }
.tra-actions { display: flex; gap: 6px; }
.tra-scroll { flex: 1; overflow: auto; padding: 0 12px 12px; }
.tra-sec { padding: 12px 6px 6px; font-size: .66em; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 800; }
.tra-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg-2) 72%, transparent);
}
.tra-item:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.tra-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: var(--chip); overflow: hidden; }
.tra-ic svg { width: 20px; height: 20px; }
.tra-ic--app svg { width: 60%; height: 60%; color: #fff; }
.tra-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tra-info b { font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tra-info span { font-size: .68em; color: var(--muted); }
.tra-item .btnl { padding: 5px 8px; font-size: .68em; }
.tra-empty { text-align: center; padding: 58px 18px; color: var(--muted); }
.tra-empty > span { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 21px; background: var(--chip); margin-bottom: 12px; }
.tra-empty svg { width: 30px; height: 30px; }
.tra-empty b { display: block; color: var(--fg); font-size: .94em; margin-bottom: 4px; }
.tra-empty p { margin: 0; font-size: .75em; }
.tra-foot { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: .68em; color: var(--muted); }
.tra-hint { color: var(--accent); font-weight: 700; }

/* Market app. */
.mkt { height: 100%; overflow: auto; padding: 16px; }
.mkt-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--bg-2)), var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}
.mkt-kicker { font-size: .64em; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; color: var(--accent); }
.mkt-hero h1 { margin: 4px 0 3px; font-size: 1.4em; letter-spacing: -.02em; }
.mkt-hero p { margin: 0; max-width: 56ch; font-size: .76em; color: var(--muted); line-height: 1.5; }
.mkt-hero-ic { width: 74px; height: 74px; flex: 0 0 74px; display: grid; place-items: center; border-radius: 23px; background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.mkt-hero-ic svg { width: 35px; height: 35px; }
.mkt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.mkt-search { flex: 1 1 220px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.mkt-search svg { width: 15px; height: 15px; color: var(--muted); }
.mkt-search input { border: none; background: none; color: var(--fg); font: inherit; outline: none; width: 100%; font-size: .78em; }
.mkt-cats { display: flex; gap: 5px; flex-wrap: wrap; }
.mkt-cat { border: 1px solid var(--line); background: var(--chip); color: var(--muted); border-radius: 999px; padding: 6px 10px; font: inherit; font-size: .7em; font-weight: 700; cursor: pointer; }
.mkt-cat.on { color: #101116; background: var(--accent); border-color: var(--accent); }
.mkt-grid { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.mkt-card { border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: color-mix(in srgb, var(--bg-2) 84%, transparent); transition: transform .16s, border-color .16s; }
.mkt-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.mkt-art { height: 88px; display: grid; place-items: center; color: #fff; text-shadow: 0 2px 10px #0006; }
.mkt-art span { font-size: 1.7em; font-weight: 900; letter-spacing: -.04em; }
.mkt-info { padding: 10px 11px 11px; }
.mkt-tag { font-size: .6em; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 900; }
.mkt-info b { display: block; margin-top: 2px; font-size: .9em; }
.mkt-info p { margin: 3px 0 9px; color: var(--muted); font-size: .7em; line-height: 1.4; min-height: 2.6em; }
.mkt-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mkt-stars { color: #fbbf24; letter-spacing: 1px; font-size: .68em; }
.mkt-bottom .btnl { padding: 5px 9px; font-size: .68em; }
.mkt-empty { padding: 42px; text-align: center; color: var(--muted); font-size: .8em; }

/* Files selection / marquee / toolbar + desktop file icons. */
.fxa-scroll { position: relative; }
.fxa-marquee {
  position: absolute; z-index: 4; border: 1px solid #4c9dff;
  background: rgba(76, 157, 255, 0.18); border-radius: 4px; pointer-events: none;
}
.fxa-card.selected { outline: 2px solid #4c9dff; outline-offset: -1px; border-color: #4c9dff !important; background: color-mix(in srgb, #4c9dff 12%, var(--bg-2)) !important; }
.fxa-card.selected .fxa-thumb { box-shadow: inset 0 0 0 2px #4c9dff; }
.fxa-selbar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border-radius: 13px; background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  border: 1px solid #4c9dff; box-shadow: 0 18px 40px -14px #000a; z-index: 7;
}
.fxa-selbar > b { min-width: 20px; text-align: center; color: #4c9dff; }
.fxa-selbar > span { font-size: .7em; color: var(--muted); }
.fxa-selbar .btnl { padding: 5px 8px; font-size: .68em; }
.gi-file { background: linear-gradient(160deg, #f8fafc, #cbd5e1); color: #334155; display: grid; place-items: center; }
.gi-file svg { width: 52%; height: 52%; }
.gi-file--pdf { background: linear-gradient(160deg, #ff8a8a, #c81e1e); color: #fff; }

/* Settings search + dynamic chrome controls. */
.set-search { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.set-search svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 14px; }
.set-search input { flex: 1; min-width: 0; border: none; background: none; color: var(--fg); font: inherit; outline: none; font-size: .76em; }
.set-search button { border: none; background: none; color: var(--muted); cursor: pointer; font: inherit; }
.set-results { position: absolute; top: 104px; left: 12px; right: 12px; z-index: 20; padding: 5px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 22px 50px -16px #000b; max-height: 300px; overflow: auto; }
.set-result { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: none; background: none; color: var(--fg); padding: 7px 8px; border-radius: 8px; cursor: pointer; font: inherit; }
.set-result:hover { background: var(--chip); }
.set-result b { font-size: .76em; }
.set-result span { font-size: .66em; color: var(--muted); line-height: 1.35; }
.set-result-empty { padding: 10px; font-size: .72em; color: var(--muted); }
.set-search-hit { animation: setHit 2.2s ease; border-radius: 9px; }
@keyframes setHit { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 18%, 70% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } }
.set-row-hint { margin-left: 6px; color: var(--muted); font-size: .7em; font-weight: 400; }

/* Dynamic wallpaper chrome. */
body.dyn-wall #menubar {
  background: var(--dyn-bar) !important;
  color: var(--dyn-ink) !important;
  border-bottom: 1px solid var(--dyn-line);
  backdrop-filter: blur(18px) saturate(1.18);
}
body.dyn-wall #menubar .mb-logo,
body.dyn-wall #menubar .mb-app,
body.dyn-wall #menubar .mb-clock,
body.dyn-wall #menubar .mb-icon,
body.dyn-wall #menubar .mb-user { color: var(--dyn-ink) !important; }
body.dyn-wall #dock {
  background: var(--dyn-bar-2) !important;
  border: 1px solid var(--dyn-line);
  box-shadow: 0 12px 38px -12px #000b, inset 0 1px 0 color-mix(in srgb, var(--dyn-ink) 12%, transparent);
}
body.dyn-wall #dock .dock-it { color: #fff; text-shadow: 0 1px 6px #0007; }
body.dyn-wall .win.focus-win { box-shadow: 0 0 0 1px var(--dyn-line), 0 22px 62px -24px var(--dyn-glow); }
/* Eski kural barı TAMAMEN saydam yapıyordu (background:none + blur:none) →
   açık duvar kağıdında yazı okunmuyor, bar "bozuk" görünüyordu. Artık
   okunabilir bir cam: hafif dolgu + güçlü blur + ince hairline. */
body.mb-transparent #menubar {
  background: color-mix(in srgb, var(--bg, #0b1020) 38%, transparent) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
body.mb-transparent #menubar .mb-icon:hover,
body.mb-transparent #menubar .mb-logo:hover { background: rgba(255,255,255,.14); }

/* Dock left / right. The bottom rules stay as the default. */
body[data-dock-pos="left"] #dock {
  left: 10px; right: auto; bottom: auto; top: 50%;
  transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 90px); overflow: auto;
}
body[data-dock-pos="right"] #dock {
  right: 10px; left: auto; bottom: auto; top: 50%;
  transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 90px); overflow: auto;
}
body[data-dock-pos="left"] #dock .dock-it:hover { transform: translateX(5px); }
body[data-dock-pos="right"] #dock .dock-it:hover { transform: translateX(-5px); }
body.bars-auto[data-dock-pos="left"] #dock.auto { transform: translate(-140%, -50%); }
body.bars-auto[data-dock-pos="left"] #dock.auto.show { transform: translate(0, -50%); }
body.bars-auto[data-dock-pos="right"] #dock.auto { transform: translate(140%, -50%); }
body.bars-auto[data-dock-pos="right"] #dock.auto.show { transform: translate(0, -50%); }

/* Chat: view-once, voice notes, voice rooms, channel access. */
.chat-once-toggle, .chat-mode-toggle { display: flex; align-items: center; gap: 7px; margin: 8px 0; font-size: .75em; color: var(--muted); cursor: pointer; }
.chat-once-toggle input, .chat-mode-toggle input { accent-color: var(--accent); }
.chat-once {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--fg); font: inherit; font-size: .78em; font-weight: 700; cursor: pointer;
}
.chat-once.done, .chat-once:disabled { opacity: .54; cursor: default; border-style: solid; }
.chat-audio { width: min(240px, 50vw); height: 34px; }
.chat-audio-wrap { display: inline-flex; align-items: center; gap: 7px; }
.chat-voice-btn.rec { color: #fff; background: #ef4444; border-color: #ef4444; animation: voicePulse 1.1s ease-in-out infinite; }
@keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 #ef444466; } 50% { box-shadow: 0 0 0 7px #ef444400; } }
.chat-voice-room {
  display: flex; align-items: center; gap: 9px; margin: 0 12px 7px; padding: 8px 10px;
  border-radius: 11px; border: 1px solid color-mix(in srgb, #22c55e 36%, var(--line));
  background: color-mix(in srgb, #22c55e 10%, var(--bg-2));
}
.chat-vr-ic { font-size: 1.15em; }
.chat-vr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-vr-txt b { font-size: .78em; }
.chat-vr-txt i { font-size: .68em; color: var(--muted); font-style: normal; }
.chat-voice-room .btnl { padding: 5px 8px; font-size: .68em; }
.chat-ov-card--wide { width: min(540px, calc(100vw - 28px)); }
.chat-access-users { max-height: 230px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin: 7px 0; }
.chat-access-user { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--chip); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.chat-access-user.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--chip)); }
.chat-access-user > span { flex: 1; min-width: 0; font-size: .76em; display: flex; flex-direction: column; }
.chat-access-user i { font-style: normal; font-size: .82em; color: var(--muted); }
.chat-access-user > b { color: var(--accent); }
.chat-chsettings-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; }
.chat-chsettings-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--chip); font-size: 1.2em; }
.chat-chsettings-head div { display: flex; flex-direction: column; gap: 2px; }
.chat-chsettings-head b { font-size: .9em; }
.chat-chsettings-head span { font-size: .7em; color: var(--muted); }
.chat-chsettings-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }

/* Mobile: keep the dock horizontal and the tutorial card inside the viewport. */
@media (max-width: 720px) {
  body[data-dock-pos] #dock {
    left: 50% !important; right: auto !important; top: auto !important; bottom: 0 !important;
    transform: translateX(-50%) !important; flex-direction: row !important;
    max-height: none; overflow: visible; max-width: calc(100vw - 16px); overflow-x: auto;
  }
  body.bars-auto[data-dock-pos] #dock.auto { transform: translate(-50%, 140%) !important; }
  body.bars-auto[data-dock-pos] #dock.auto.show { transform: translateX(-50%) !important; }
  .tut-card { max-width: calc(100vw - 24px); }
  .tut-actions { gap: 6px; }
  .tut-actions .btnl { padding: 6px 8px; font-size: .72em; }
  .cfm-card { padding: 17px 15px 13px; }
  .tra-item { flex-wrap: wrap; }
  .tra-item .btnl { flex: 1 1 auto; }
  .mkt { padding: 10px; }
  .mkt-hero { padding: 14px; }
  .mkt-hero h1 { font-size: 1.12em; }
  .mkt-hero-ic { display: none; }
  .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mkt-art { height: 66px; }
  .mkt-info { padding: 8px; }
  .fxa-selbar { width: calc(100% - 24px); justify-content: center; }
  .set-results { left: 6px; right: 6px; top: 100px; }
  .set-search input { font-size: .8em; }
}

/* Search dropdown anchors to the settings rail. */
.set-nav { position: relative; }
.set-results { top: 46px; left: 0; right: 0; }

/* Ten-language picker wraps instead of running off the row. */
.set-row .swatches { flex-wrap: wrap; }
@media (max-width: 720px) {
  :root { --dock-h: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   THIRD PASS — market/account/ratings, PDF, tools, private channels, voice
   rooms, maintenance gate, folder cards and mobile bar breathing room.
   ========================================================================== */

/* Market account + featured + ratings */
.mkt-account { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.mkt-av { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #111)); }
.mkt-acct-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mkt-acct-tx b { font-size: .74em; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-acct-tx i { font-style: normal; font-size: .62em; color: var(--muted); }
.mkt-account .btnl { padding: 4px 7px; font-size: .66em; }
.mkt-featured { margin: 0 0 14px; }
.mkt-feature { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 44%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mkt-feature span { font-size: .62em; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.mkt-feature b { font-size: .82em; }
.mkt-feature i { font-style: normal; font-size: .68em; color: var(--muted); }
.mkt-rating { display: flex; align-items: center; gap: 6px; margin: 7px 0 4px; }
.mkt-star-row { display: inline-flex; gap: 1px; }
.mkt-star { border: none; background: none; padding: 0; color: color-mix(in srgb, var(--fg) 24%, transparent); font-size: .9em; cursor: pointer; }
.mkt-star.on { color: #fbbf24; }
.mkt-star:hover:not(:disabled) { transform: scale(1.2); color: #fde047; }
.mkt-score { font-size: .64em; color: var(--muted); }
.mkt-score i { font-style: normal; opacity: .7; }
.mkt-bottom { align-items: flex-end; }
.mkt-stars-hint { font-size: .58em; color: var(--muted); }
.mkt-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.mkt-legal { margin-top: 18px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 50%, transparent); font-size: .64em; line-height: 1.5; color: var(--muted); }
.mkt-sound-bars { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 2px; align-items: flex-end; height: 18px; }
.mkt-sound-bars b { width: 3px; border-radius: 2px; background: #fff9; animation: mktBar 1s ease-in-out infinite alternate; }
.mkt-sound-bars b:nth-child(1) { height: 7px; animation-delay: -.2s; }
.mkt-sound-bars b:nth-child(2) { height: 15px; animation-delay: -.5s; }
.mkt-sound-bars b:nth-child(3) { height: 10px; animation-delay: -.8s; }
.mkt-sound-bars b:nth-child(4) { height: 17px; animation-delay: -.35s; }
@keyframes mktBar { to { transform: scaleY(.35); opacity: .55; } }
.mkt-art { position: relative; }

/* PDF reader */
.pdf-app { display: grid; grid-template-columns: 220px minmax(0,1fr); height: 100%; min-height: 0; }
.pdf-side { border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 46%, transparent); display: flex; flex-direction: column; min-height: 0; }
.pdf-side-head { padding: 13px 13px 8px; display: flex; flex-direction: column; gap: 2px; }
.pdf-side-head b { font-size: .82em; }
.pdf-side-head span { font-size: .64em; color: var(--muted); }
.pdf-list { padding: 0 8px 10px; overflow: auto; }
.pdf-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--fg); font: inherit; cursor: pointer; }
.pdf-item:hover, .pdf-item.on { background: var(--chip); border-color: var(--line); }
.pdf-item > span:first-child { width: 26px; height: 30px; color: #ef4444; flex: 0 0 26px; }
.pdf-item > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pdf-item b { font-size: .7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-item i { font-style: normal; font-size: .6em; color: var(--muted); }
.pdf-list-empty { padding: 16px 10px; font-size: .7em; color: var(--muted); }
.pdf-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pdf-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.pdf-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pdf-name span { width: 22px; height: 25px; color: #ef4444; flex: 0 0 22px; }
.pdf-name b { font-size: .78em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-actions { display: flex; gap: 6px; }
.pdf-actions .btnl { padding: 5px 8px; font-size: .68em; }
.pdf-frame-wrap { position: relative; flex: 1; min-height: 0; background: #20232a; }
#pdf-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.pdf-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; text-align: center; padding: 24px; color: #cbd5e1; background: #20232a; }
.pdf-empty span { width: 50px; height: 58px; color: #f87171; }
.pdf-empty b { font-size: .95em; }
.pdf-empty p { margin: 0; max-width: 44ch; font-size: .72em; color: #94a3b8; line-height: 1.5; }

/* Official service windows */
.svc-app { height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; padding: 28px; gap: 7px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--svc) 25%, transparent), transparent 62%); }
.svc-mark { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: var(--svc); color: #fff; font-size: 2em; font-weight: 900; box-shadow: 0 16px 36px -14px var(--svc); }
.svc-kicker { font-size: .62em; letter-spacing: .12em; text-transform: uppercase; color: var(--svc); font-weight: 900; }
.svc-app h1 { margin: 0; font-size: 1.5em; letter-spacing: -.03em; }
.svc-app p { margin: 0; max-width: 42ch; color: var(--muted); font-size: .76em; line-height: 1.55; }
.svc-actions { display: flex; gap: 7px; margin-top: 7px; }
.svc-legal { margin-top: 8px; font-size: .6em; color: var(--muted); max-width: 46ch; line-height: 1.45; }

/* Media hub */
.mhub { height: 100%; overflow: auto; padding: 18px; }
.mhub header { margin-bottom: 14px; }
.mhub h1 { margin: 3px 0; font-size: 1.4em; }
.mhub header p { margin: 0; max-width: 62ch; font-size: .75em; color: var(--muted); line-height: 1.5; }
.mhub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.mhub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 13px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 80%, transparent); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: transform .16s, border-color .16s; }
.mhub-card:hover { transform: translateY(-3px); border-color: var(--svc); }
.mhub-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--svc); color: #fff; font-weight: 900; font-size: 1.1em; margin-bottom: 4px; }
.mhub-card b { font-size: .86em; }
.mhub-card i { font-style: normal; font-size: .68em; color: var(--muted); }
.mhub-card em { font-style: normal; font-size: .66em; color: var(--svc); font-weight: 800; }

/* Club */
.club-app { height: 100%; display: flex; flex-direction: column; padding: 18px; gap: 12px; overflow: auto; }
.club-hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px; border-radius: 18px; background: radial-gradient(circle at 82% 20%, #14b8a644, transparent 50%), linear-gradient(135deg,#042f2e,#0f766e); color: #f0fdfa; }
.club-hero h1 { margin: 2px 0; font-size: 1.5em; }
.club-hero p { margin: 0; font-size: .74em; max-width: 50ch; color: #99f6e4; line-height: 1.5; }
.club-orb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2em; background: #5eead433; border: 1px solid #99f6e466; }
.club-list { display: flex; flex-direction: column; gap: 7px; }
.club-room { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.club-room > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.club-room b { font-size: .82em; }
.club-room i { font-style: normal; font-size: .66em; color: var(--muted); }
.club-live { color: #22c55e; animation: clubPulse 1.4s infinite; }
@keyframes clubPulse { 50% { opacity: .3; } }
.club-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.club-foot span { font-size: .66em; color: var(--muted); line-height: 1.4; }
.club-empty { padding: 38px; text-align: center; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); }
.club-empty b { color: var(--fg); display: block; margin-bottom: 4px; }
.club-empty p { margin: 0; font-size: .72em; }

/* CemGram */
.cgapp { display: grid; grid-template-columns: 270px minmax(0,1fr); height: 100%; min-height: 0; }
.cg-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 42%, transparent); }
.cg-brand { padding: 14px 13px 8px; font-weight: 900; letter-spacing: -.02em; color: #60a5fa; }
.cg-side input { margin: 0 10px 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--fg); font: inherit; font-size: .74em; outline: none; }
.cg-list { overflow: auto; padding: 0 7px 9px; display: flex; flex-direction: column; gap: 3px; }
.cg-item { display: flex; align-items: center; gap: 8px; border: none; background: none; color: var(--fg); padding: 7px; border-radius: 9px; text-align: left; font: inherit; cursor: pointer; }
.cg-item:hover { background: var(--chip); }
.cg-av { width: 33px; height: 33px; flex: 0 0 33px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#60a5fa,#1d4ed8); color: #fff; font-weight: 800; }
.cg-item > span:last-of-type { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cg-item b { font-size: .76em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-item i { font-style: normal; font-size: .62em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-item em { font-style: normal; font-size: .6em; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; background: #3b82f6; color: #fff; }
.cg-main { display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 40%, #1d4ed81c, transparent 55%); }
.cg-empty { text-align: center; color: var(--muted); max-width: 36ch; }
.cg-empty span { font-size: 2.8em; color: #60a5fa; }
.cg-empty b { display: block; color: var(--fg); margin: 5px 0; }
.cg-empty p { margin: 0; font-size: .73em; line-height: 1.5; }
.cg-no { padding: 18px; font-size: .72em; color: var(--muted); }

/* Focus studio */
.focus-app { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: radial-gradient(circle at 50% 20%, #7c3aed22, transparent 58%); }
.focus-kicker { font-size: .64em; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 900; }
.focus-ring { width: 180px; height: 180px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 8px solid color-mix(in srgb, var(--accent) 28%, transparent); box-shadow: inset 0 0 40px color-mix(in srgb, var(--accent) 18%, transparent); }
.focus-ring span { font-size: 2.2em; font-weight: 800; letter-spacing: -.04em; }
.focus-ring i { font-style: normal; font-size: .64em; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.focus-pills { display: flex; gap: 5px; }
.focus-actions { display: flex; gap: 7px; }
.focus-note { margin: 0; font-size: .65em; color: var(--muted); max-width: 34ch; line-height: 1.45; }

/* Radar */
.radar-app { height: 100%; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 11px; }
.radar-app header h1 { margin: 2px 0; font-size: 1.45em; }
.radar-app header p { margin: 0; font-size: .74em; color: var(--muted); line-height: 1.5; }
.radar-card { border: 1px solid var(--line); border-radius: 13px; background: var(--bg-2); padding: 12px; }
.radar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.radar-grid { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; font-size: .72em; }
.radar-grid span { color: var(--muted); }
.radar-grid b { text-align: right; }
.radar-list { display: flex; flex-direction: column; gap: 5px; }
.radar-dev { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; background: var(--chip); }
.radar-dev > div { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.radar-dev b { font-size: .76em; }
.radar-dev i { font-style: normal; font-size: .6em; color: var(--muted); word-break: break-all; }
.radar-dev em { font-style: normal; font-size: .6em; color: #22c55e; }
.radar-live { color: #22c55e; animation: clubPulse 1.4s infinite; }

/* Arcade */
.arcade-app { height: 100%; overflow: auto; padding: 18px; }
.arcade-app h1 { margin: 2px 0; font-size: 1.5em; }
.arcade-app header p { margin: 0 0 14px; color: var(--muted); font-size: .74em; }
.arcade-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 11px; }
.arcade-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(145deg, var(--bg-2), color-mix(in srgb, #db2777 13%, var(--bg-2))); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: transform .16s, border-color .16s; }
.arcade-card:hover { transform: translateY(-3px); border-color: #f472b6; }
.arcade-card span { font-size: 2em; }
.arcade-card b { font-size: 1em; }
.arcade-card i { font-style: normal; color: var(--muted); font-size: .7em; }
.arcade-card em { margin-top: 8px; font-style: normal; color: #f472b6; font-size: .7em; font-weight: 800; }

/* Private channel */
.chat-chan--private { opacity: .78; }
.chat-chan--private .chat-chan-name { color: var(--muted); }
.chat-head-lock { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--chip); }
.chat-private-chip { font-size: .58em; font-weight: 800; letter-spacing: .04em; padding: 3px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.chat-private { position: relative; display: grid; place-items: center; min-height: 100%; padding: 18px; overflow: hidden; }
.chat-private-blur { position: absolute; inset: 16px; display: flex; flex-direction: column; gap: 12px; filter: blur(9px); opacity: .33; pointer-events: none; user-select: none; }
.cpb-row { display: flex; align-items: flex-start; gap: 8px; }
.cpb-row.right { flex-direction: row-reverse; }
.cpb-av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--muted); }
.cpb-row div { display: flex; flex-direction: column; gap: 4px; width: 46%; }
.cpb-row i { height: 9px; border-radius: 5px; background: var(--muted); width: 100%; }
.cpb-row b { height: 28px; border-radius: 9px; background: var(--muted); width: 85%; }
.chat-private-card { position: relative; z-index: 1; width: min(420px, 100%); padding: 22px; text-align: center; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--bg-2) 94%, transparent); box-shadow: 0 24px 60px -20px #000b; backdrop-filter: blur(16px); }
.chat-private-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--chip); font-size: 1.4em; margin-bottom: 8px; }
.chat-private-card > b { display: block; font-size: 1em; }
.chat-private-card p { margin: 6px 0 13px; color: var(--muted); font-size: .76em; line-height: 1.55; }
.chat-private-actions { display: flex; gap: 7px; justify-content: center; }
.chat-private-note { display: block; margin-top: 10px; font-size: .62em; color: var(--muted); line-height: 1.4; }

/* Voice room participants, speaking ring, per-peer volume */
.chat-voice-room { flex-direction: column; align-items: stretch; }
.chat-vr-top { display: flex; align-items: center; gap: 8px; }
.chat-vr-top .chat-vr-txt { flex: 1; }
.chat-vr-people { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.chat-vr-person { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 86px; max-width: 108px; padding: 7px 5px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 48%, transparent); position: relative; }
.chat-vr-person.speaking { border-color: #22c55e; box-shadow: 0 0 0 2px #22c55e55; }
.chat-vr-ring { display: grid; place-items: center; border-radius: 50%; padding: 2px; background: transparent; }
.chat-vr-person.speaking .chat-vr-ring { background: conic-gradient(#22c55e, #4ade80, #22c55e); animation: vrRing 1.4s linear infinite; }
@keyframes vrRing { to { transform: rotate(360deg); } }
.chat-vr-ring .chat-av { width: 31px; height: 31px; font-size: .9em; }
.chat-vr-person b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64em; }
.chat-vr-person i { font-style: normal; font-size: .55em; color: var(--muted); }
.chat-vr-controls { display: flex; align-items: center; gap: 3px; width: 100%; }
.chat-vr-controls input[type="range"] { width: 100%; min-width: 0; height: 3px; accent-color: #22c55e; }
.chat-vr-mini { border: none; background: none; padding: 0; cursor: pointer; font-size: .7em; }
.chat-vr-top .btnl { padding: 5px 7px; font-size: .64em; }

/* File messages */
.chat-file-msg { display: inline-flex; align-items: center; gap: 8px; min-width: min(280px, 60vw); max-width: 100%; padding: 8px 9px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 48%, transparent); }
.chat-file-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center; background: var(--chip); font-size: 1.1em; }
.chat-file-msg > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-file-msg b { font-size: .74em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-msg i { font-style: normal; font-size: .6em; color: var(--muted); }
.chat-file-prev { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 22px; border-radius: 12px; border: 1px dashed var(--line); background: var(--chip); font-size: 1.6em; }
.chat-file-prev b { font-size: .55em; word-break: break-all; }
.chat-file-prev span { font-size: .4em; color: var(--muted); }

/* Sound pack install list */
.snd-installed { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.snd-installed > span { font-size: .64em; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.snd-installed-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--chip); }
.snd-installed-row b { font-size: .72em; }
.snd-installed-row .btnl { padding: 4px 7px; font-size: .62em; }

/* Permission panel with three independent chips */
.mediap-masters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-bottom: 8px; }
.mediap-masters .mediap-master { margin: 0; }
.mediap-row--multi { align-items: center; }
.mediap-chips { display: inline-flex; gap: 3px; margin-left: auto; }
.mediap-chip { border: 1px solid var(--line); background: var(--chip); color: var(--muted); border-radius: 7px; padding: 4px 6px; font-size: .8em; cursor: pointer; }
.mediap-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); }
.chat-access-search { margin: 4px 0 7px; }

/* Folder cards */
.fxa-card--folder { background: linear-gradient(160deg, color-mix(in srgb, #eab308 8%, var(--bg-2)), var(--bg-2)); }
.fxa-card--folder .fxa-thumb--folder { background: linear-gradient(160deg, #fef3c7, #f59e0b); color: #78350f; }
.fxa-card--folder .fxa-thumb svg { width: 48%; height: 48%; }
.fxa-card.drop-target { outline: 2px solid var(--accent); outline-offset: -2px; transform: translateY(-2px); }
.fxa-thumb--folder { display: grid; place-items: center; }

/* Maintenance / queue gate */
#server-gate { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 0%, #312e81aa, transparent 55%), #05060a; color: #f8fafc; overflow: auto; }
.sg-card { width: min(590px, calc(100vw - 28px)); padding: 28px; border-radius: 24px; border: 1px solid #6366f144; background: linear-gradient(160deg, #0e1016ee, #171a25f2); box-shadow: 0 40px 100px -30px #000, inset 0 1px 0 #ffffff12; text-align: center; }
.sg-orb { width: 74px; height: 74px; border-radius: 24px; display: grid; place-items: center; margin: 0 auto 12px; font-size: 2em; background: linear-gradient(135deg,#312e81,#7c3aed); box-shadow: 0 18px 38px -15px #7c3aed; }
.sg-kicker { font-size: .62em; letter-spacing: .16em; text-transform: uppercase; color: #a5b4fc; font-weight: 900; }
.sg-card h1 { margin: 5px 0 7px; font-size: 1.7em; letter-spacing: -.03em; }
.sg-card > p { margin: 0 auto; max-width: 52ch; color: #94a3b8; font-size: .8em; line-height: 1.6; }
.sg-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 16px 0 10px; }
.sg-metrics > div { padding: 10px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff12; }
.sg-metrics b { display: block; font-size: 1.3em; }
.sg-metrics span { font-size: .6em; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; }
.sg-progress { height: 5px; border-radius: 5px; background: #ffffff12; overflow: hidden; }
.sg-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#818cf8,#c084fc,#22d3ee); animation: sgPulse 2.2s ease-in-out infinite alternate; }
@keyframes sgPulse { to { filter: brightness(1.25); } }
.sg-actions { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 15px; }
.sg-actions .btnl { background: #ffffff10; color: #f8fafc; border-color: #ffffff22; text-decoration: none; }
.sg-actions .btnl--primary { background: #6366f1; border-color: #6366f1; color: #fff; }
.sg-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font-size: .64em; color: #94a3b8; }
.sg-foot select { margin-left: 5px; padding: 4px 5px; border-radius: 7px; border: 1px solid #ffffff22; background: #111827; color: #f8fafc; font: inherit; }
body.server-gate-on #win-about { z-index: 12000 !important; }

/* Admin server control */
.adm-serverctl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-srv-toggle { display: flex; align-items: center; gap: 9px; padding: 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.adm-srv-toggle.on { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, var(--chip)); }
.adm-srv-orb { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--bg); }
.adm-srv-toggle > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.adm-srv-toggle b { font-size: .74em; }
.adm-srv-toggle i { font-style: normal; font-size: .62em; color: var(--muted); }
.adm-srv-led { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.adm-srv-toggle.on .adm-srv-led { background: #22c55e; box-shadow: 0 0 0 4px #22c55e22; }
.adm-server-live { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 9px; }
.adm-server-live > div { padding: 9px; border-radius: 9px; background: var(--chip); text-align: center; }
.adm-server-live b { display: block; font-size: 1.1em; }
.adm-server-live span { font-size: .6em; color: var(--muted); text-transform: uppercase; }
.adm-server-users { margin-top: 10px; max-height: 230px; overflow: auto; }
.adm-user { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-bottom: 1px solid var(--line); font-size: .7em; }
.adm-user-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.adm-user.on .adm-user-dot { background: #22c55e; box-shadow: 0 0 0 3px #22c55e22; }
.adm-user b { font-size: .95em; }
.adm-user i { font-style: normal; color: var(--muted); font-size: .9em; }
.adm-user em { margin-left: auto; font-style: normal; font-size: .8em; color: var(--accent); font-weight: 900; }
.adm-smtp-state.on { color: #22c55e; }

/* Tutorial mascot + mobile card */
.tut-title-row { display: flex; align-items: center; gap: 9px; }
.tut-mascot { width: 42px; height: 48px; flex: 0 0 42px; display: grid; place-items: center; filter: drop-shadow(0 6px 10px #0005); }
.tut-mascot svg { width: 100%; height: 100%; }
.tut-mascot .ms-body { fill: var(--accent); }
.tut-mascot .ms-ear, .tut-mascot .ms-scarf { fill: color-mix(in srgb, var(--accent) 72%, #111); }
.tut-mascot .ms-eye { fill: #101116; }
.tut-mascot .ms-pupil { fill: #fff; }
.tut-mascot .ms-mouth { stroke: #101116; }
.tut-mascot .ms-shadow { fill: #0003; }
@media (max-width: 720px) {
  .tut-card { position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: 10px !important; width: auto !important; max-height: 66vh; overflow: auto; }
  .tut-title-row { align-items: flex-start; }
  .tut-mascot { width: 34px; height: 40px; flex-basis: 34px; }
  .tut-body { font-size: .96em; line-height: 1.45; }
  .tut-actions { flex-wrap: wrap; }
  .tut-actions .tut-skip { margin-left: auto; }
  .mediap-masters { grid-template-columns: 1fr; }
  .pdf-app { grid-template-columns: 1fr; grid-template-rows: 132px minmax(0,1fr); }
  .pdf-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .pdf-list { display: flex; gap: 5px; overflow-x: auto; }
  .pdf-item { flex: 0 0 165px; }
  .pdf-bar { flex-wrap: wrap; }
  .pdf-actions { width: 100%; justify-content: flex-end; }
  .cgapp { grid-template-columns: 1fr; }
  .cg-side { display: none; }
  .mhub-grid, .arcade-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .club-hero { padding: 13px; }
  .club-foot { flex-direction: column; align-items: stretch; }
  .adm-serverctl-grid { grid-template-columns: 1fr; }
  .adm-server-live { grid-template-columns: repeat(3,1fr); }
  .sg-card { padding: 20px 16px; }
  .sg-card h1 { font-size: 1.35em; }
  .sg-foot { flex-direction: column; }
  .chat-private-card { padding: 17px 14px; }
  .chat-vr-person { min-width: 74px; }
  .chat-vr-top { flex-wrap: wrap; }
  .chat-vr-top .chat-vr-txt { flex-basis: 100%; }
}

/* Mobile bars: shrink, not squeeze. */
@media (max-width: 720px) {
  #menubar { gap: 1px !important; padding-left: 6px !important; padding-right: 6px !important; }
  #menubar .mb-icon { width: 27px !important; height: 27px !important; flex-basis: 27px; }
  #menubar .mb-logo { font-size: 12px !important; }
  #menubar .mb-clock, #menubar #mb-clock { font-size: 9.5px !important; letter-spacing: 0 !important; }
  #menubar .mb-app { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px !important; }
  #menubar .mb-user { max-width: 60px; }
  #dock { gap: 4px !important; padding: 6px 8px calc(6px + env(safe-area-inset-bottom,0px)) !important; border-radius: 16px 16px 0 0 !important; }
  .dock-it { width: 40px !important; height: 40px !important; font-size: 18px !important; flex: 0 0 40px; }
  .dock-sep { margin: 0 1px !important; }
  :root { --dock-h: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

/* Pre-login language picker */
.login-lang { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: .62em; color: var(--muted); }
.login-lang select { border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 65%, transparent); color: var(--fg); border-radius: 7px; padding: 3px 5px; font: inherit; outline: none; }

.set-installed { display: flex; flex-direction: column; gap: 5px; }
.set-installed-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--chip); }
.set-installed-row > span { width: 22px; text-align: center; }
.set-installed-row b { font-size: .74em; flex: 1; }
.set-installed-row i { font-style: normal; font-size: .62em; color: var(--muted); }
.set-installed-row .btnl { padding: 4px 7px; font-size: .62em; }

.chat-chsettings-edit { display: grid; grid-template-columns: 1fr 80px; gap: 7px; }
.chat-chsettings-edit label { display: flex; flex-direction: column; gap: 3px; font-size: .62em; color: var(--muted); }
.chat-chsettings-edit .cfm-input { margin: 0; }

/* Full voice-room stage: intentionally different from a text channel. */
.chat-vr-full { flex: 1; margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; background: radial-gradient(circle at 50% 0%, #22c55e1c, transparent 52%), var(--bg-2); padding: 16px; overflow: auto; }
.chat-vr-head-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg,#0f766e,#22c55e); font-size: 1.15em; }
.chat-vr-live { font-size: .6em; font-weight: 900; color: #22c55e; letter-spacing: .05em; }
.chat-vr-hero { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 15px; border: 1px solid color-mix(in srgb, #22c55e 30%, var(--line)); background: color-mix(in srgb, #22c55e 9%, var(--bg)); }
.chat-vr-hero-ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg,#065f46,#22c55e); font-size: 1.5em; }
.chat-vr-hero > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-vr-hero b { font-size: 1em; }
.chat-vr-hero i { font-style: normal; font-size: .68em; color: var(--muted); }
.chat-vr-hero .btnl { padding: 6px 9px; font-size: .7em; }
.chat-vr-stage-label { margin: 15px 2px 7px; font-size: .62em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 900; }
.chat-vr-full .chat-vr-people { display: grid; grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); gap: 8px; }
.chat-vr-full .chat-vr-person { max-width: none; min-height: 105px; padding: 11px 6px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 54%, transparent); }
.chat-vr-full .chat-vr-ring .chat-av { width: 42px; height: 42px; font-size: 1.15em; }
.chat-vr-full .chat-vr-person b { font-size: .7em; }
.chat-vr-waiting { margin-top: 14px; padding: 11px 12px; border-radius: 12px; border: 1px dashed var(--line); background: color-mix(in srgb, var(--bg) 40%, transparent); }
.chat-vr-waiting b { font-size: .76em; display: block; }
.chat-vr-waiting > span { font-size: .64em; color: var(--muted); }
.chat-vr-wait-avatars { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chat-vr-wait-av { display: inline-grid; place-items: center; border-radius: 50%; opacity: .8; }
.chat-vr-wait-av .chat-av { width: 29px; height: 29px; font-size: .82em; }
.chat-vr-voice-note { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--muted); font-size: .64em; line-height: 1.5; }
@media (max-width: 720px) {
  .chat-vr-full { padding: 10px; }
  .chat-vr-hero { flex-wrap: wrap; }
  .chat-vr-hero .btnl { flex: 1 1 auto; }
  .chat-vr-full .chat-vr-people { grid-template-columns: repeat(auto-fill,minmax(86px,1fr)); }
}

.chat-trans { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--fg); font-size: .88em; line-height: 1.5; }
.chat-trans i { display: block; font-style: normal; font-size: .62em; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.chat-actions [data-act="translate"].on { color: var(--accent); }

/* About bio: centered within the portfolio column, not drifted left. */
.ab .ab-pitch { text-align: center; margin-inline: auto; max-width: 68ch; }
@media (max-width: 720px) { .ab .ab-pitch { text-align: left; } }

/* ==========================================================================
   ACCESSIBILITY PANEL + real global effects
   ========================================================================== */
:root { --a11y-scale: 1; }
/* Text scale. The whole UI sizes itself in `em` on top of `body`, but `body`
   also carries a hard `14px`, so scaling `html` alone changed nothing: every
   label stayed exactly the same size. The scale therefore has to be driven from
   `body` (and from the px-bearing chrome that does not inherit it), which is what
   makes the 90%-140% slider actually move the text. */
html { font-size: calc(16px * var(--a11y-scale, 1)); }
body { font-size: calc(var(--base-font, 14px) * var(--a11y-scale, 1)); }
html[data-a11y-scale-on="1"] .mb, html[data-a11y-scale-on="1"] .dock,
html[data-a11y-scale-on="1"] .win__bar { font-size: calc(1em * var(--a11y-scale, 1)); }
/* Settings rows are written at a fixed small size, which ignored the slider. */
html[data-a11y-scale-on="1"] .set-row b, html[data-a11y-scale-on="1"] .set-row span,
html[data-a11y-scale-on="1"] .set-row-hint, html[data-a11y-scale-on="1"] .set-group-head,
html[data-a11y-scale-on="1"] .mkt-info p, html[data-a11y-scale-on="1"] .mkt-info b {
  font-size: calc(1em * var(--a11y-scale, 1));
}
html[data-a11y-contrast="1"] { --line: color-mix(in srgb, var(--fg) 42%, transparent); --muted: color-mix(in srgb, var(--fg) 76%, transparent); }
html[data-a11y-contrast="1"] .win { border-width: 2px; }
html[data-a11y-contrast="1"] :is(.mkt-info p, .set-row span, .set-row-hint, .faint, .muted) { color: var(--fg) !important; opacity: .92; }
html[data-a11y-contrast="1"] :is(.btnl, .dock-it, .win__bar) { border-color: color-mix(in srgb, var(--fg) 55%, transparent) !important; }
html[data-a11y-motion="1"] *, html[data-a11y-motion="1"] *::before, html[data-a11y-motion="1"] *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html[data-a11y-focus="1"] :focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 2px !important; }
html[data-a11y-links="1"] a { text-decoration: underline !important; }
html[data-a11y-font="1"] body, html[data-a11y-font="1"] button, html[data-a11y-font="1"] input, html[data-a11y-font="1"] select, html[data-a11y-font="1"] textarea { font-family: "Atkinson Hyperlegible", "Trebuchet MS", "Segoe UI", sans-serif !important; letter-spacing: .02em; }
html[data-a11y-line="1"] p, html[data-a11y-line="1"] .tut-body, html[data-a11y-line="1"] .set-row-hint, html[data-a11y-line="1"] .mkt-info p { line-height: 1.9 !important; }
html[data-a11y-cb="protanopia"] body { filter: grayscale(.28) sepia(.2) hue-rotate(-16deg) saturate(1.25); }
html[data-a11y-cb="deuteranopia"] body { filter: grayscale(.24) sepia(.16) hue-rotate(16deg) saturate(1.2); }
html[data-a11y-cb="tritanopia"] body { filter: grayscale(.2) hue-rotate(175deg) saturate(1.1); }

.set-group-head { display: flex; align-items: center; gap: 9px; margin: 18px 0 9px; font-size: .64em; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.set-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.set-a11y { display: flex; flex-direction: column; gap: 10px; }
.set-a11y-hero { display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)); }
.a11y-hero-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4em; background: color-mix(in srgb, var(--accent) 16%, var(--chip)); }
.set-a11y-hero > div { display: flex; flex-direction: column; gap: 2px; }
.set-a11y-hero b { font-size: .92em; }
.set-a11y-hero span { font-size: .7em; color: var(--muted); line-height: 1.4; }
.a11y-scale { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.a11y-scale > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.a11y-scale b { font-size: .8em; }
.a11y-scale span { font-size: .66em; color: var(--muted); }
.a11y-scale .snd-range { width: 140px; }
.a11y-scale > b { min-width: 43px; text-align: right; font-size: .76em; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.a11y-toggle { display: flex; align-items: center; gap: 9px; padding: 11px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--fg); font: inherit; cursor: pointer; }
.a11y-toggle:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.a11y-ic { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 9px; display: grid; place-items: center; background: var(--chip); font-weight: 800; }
.a11y-toggle > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a11y-toggle b { font-size: .75em; }
.a11y-toggle i { font-style: normal; font-size: .63em; color: var(--muted); line-height: 1.35; }
.a11y-sw { width: 34px; height: 19px; flex: 0 0 34px; border-radius: 10px; background: var(--line); position: relative; transition: background .18s; }
.a11y-sw span { position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); transition: transform .18s; }
.a11y-toggle.on .a11y-sw { background: var(--accent); }
.a11y-toggle.on .a11y-sw span { transform: translateX(15px); }
.a11y-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.a11y-select > span { display: flex; flex-direction: column; gap: 2px; }
.a11y-select b { font-size: .78em; }
.a11y-select i { font-style: normal; font-size: .64em; color: var(--muted); }
.a11y-preview { padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg) 45%, transparent); }
.a11y-preview-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--chip); }
.a11y-preview-card b { font-size: .95em; }
.a11y-preview-card span { flex: 1; font-size: .7em; color: var(--muted); }
.a11y-note { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--muted); font-size: .66em; line-height: 1.5; }
.adm-f--note .adm-note { padding: 8px 10px; border-radius: 8px; background: var(--chip); color: var(--muted); font-size: .7em; line-height: 1.45; }

@media (max-width: 720px) {
  .a11y-grid { grid-template-columns: 1fr; }
  .a11y-scale { flex-wrap: wrap; }
  .a11y-scale .snd-range { width: 100%; order: 3; }
}

/* Market install progress, community cards, publish dialog */
.mkt-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #0007; overflow: hidden; }
.mkt-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#22c55e,#a3e635,#facc15); box-shadow: 0 0 10px #22c55e; transition: width .12s linear; }
.mkt-card.installing .mkt-art > span { opacity: .3; filter: grayscale(.5); }
.mkt-card.installing .mkt-art::after { content: "↓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.8em; color: #fff; text-shadow: 0 2px 12px #000; animation: mktDl 1s ease-in-out infinite; }
@keyframes mktDl { 50% { transform: translateY(5px); opacity: .55; } }
.mkt-author { display: flex; align-items: center; gap: 6px; margin: 7px 0 3px; padding: 5px 6px; border-radius: 8px; background: color-mix(in srgb, var(--fg) 4%, transparent); }
.mkt-author > span .chat-av { width: 22px; height: 22px; font-size: .68em; }
.mkt-author b { font-size: .64em; font-weight: 800; }
.mkt-author i { font-style: normal; font-size: .58em; color: var(--muted); margin-left: auto; }
.mkt-gate { grid-column: 1/-1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 7px; padding: 46px 20px; border: 1px dashed var(--line); border-radius: 18px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); }
.mkt-gate-orb { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; font-size: 1.8em; background: color-mix(in srgb, var(--accent) 15%, var(--chip)); animation: gateFloat 2.4s ease-in-out infinite; }
@keyframes gateFloat { 50% { transform: translateY(-7px) rotate(-3deg); } }
.mkt-gate h2 { margin: 2px 0; font-size: 1.05em; }
.mkt-gate p { margin: 0 0 5px; max-width: 48ch; color: var(--muted); font-size: .74em; line-height: 1.5; }

.pub-layer { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: #0009; backdrop-filter: blur(8px); }
.pub-card { width: min(660px, calc(100vw - 24px)); max-height: calc(100vh - 28px); overflow: auto; padding: 20px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 30px 90px -24px #000; color: var(--fg); animation: pubIn .22s ease both; }
@keyframes pubIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.pub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pub-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 15%, var(--chip)); font-size: 1.2em; }
.pub-head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pub-head b { font-size: .95em; }
.pub-head span { font-size: .68em; color: var(--muted); line-height: 1.35; }
.pub-x { border: none; background: none; color: var(--muted); font-size: 1.1em; cursor: pointer; }
.pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pub-field { display: flex; flex-direction: column; gap: 4px; }
.pub-field--wide { grid-column: 1/-1; }
.pub-field > span { font-size: .64em; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pub-field input, .pub-field select, .pub-field textarea { border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--fg); padding: 8px 9px; font: inherit; font-size: .76em; outline: none; }
.pub-field textarea { min-height: 62px; resize: vertical; }
.pub-controls { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pub-colors { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.pub-colors label { display: flex; flex-direction: column; gap: 3px; font-size: .62em; color: var(--muted); }
.pub-colors input { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: none; }
.pub-preview { min-height: 100px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); display: grid; place-items: center; overflow: hidden; }
.pub-preview--theme { flex-direction: column; }
.pub-preview--theme b { font-size: 2em; }
.pub-preview--icons { display: flex; gap: 8px; }
.pub-preview--icons span { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.pub-preview--icons svg { width: 22px; height: 22px; }
.pub-preview--shortcut { color: var(--muted); font-size: .75em; }
.pub-note { margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, #22c55e 8%, transparent); color: var(--muted); font-size: .64em; line-height: 1.45; }
.pub-foot { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
@media (max-width: 720px) { .pub-grid { grid-template-columns: 1fr; } .pub-colors { grid-template-columns: 1fr 1fr; } }

/* Forum app */
.forum { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: hidden; }
.forum-head { display: flex; align-items: center; gap: 12px; }
.forum-head > div { flex: 1; }
.forum-kicker { font-size: .6em; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 900; }
.forum-head h1 { margin: 2px 0; font-size: 1.45em; }
.forum-head p { margin: 0; color: var(--muted); font-size: .72em; }
.forum-body { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 12px; min-height: 0; flex: 1; }
.forum-side { display: flex; flex-direction: column; gap: 4px; }
.forum-cat { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.forum-cat.on, .forum-cat:hover { background: var(--chip); border-color: var(--line); }
.forum-cat em { margin-left: auto; font-style: normal; font-size: .62em; color: var(--muted); }
.forum-main { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.forum-toolbar { display: flex; align-items: center; gap: 8px; }
.forum-toolbar .cfm-input { flex: 1; margin: 0; }
.forum-toolbar span { font-size: .64em; color: var(--muted); white-space: nowrap; }
.forum-list { display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.forum-thread { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.forum-thread:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); transform: translateY(-1px); }
.forum-thread-ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: grid; place-items: center; background: var(--chip); }
.forum-thread-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forum-thread-tx b { font-size: .8em; }
.forum-thread-tx i { font-style: normal; color: var(--muted); font-size: .68em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 58ch; }
.forum-thread-tx em { font-style: normal; color: var(--muted); font-size: .6em; }
.forum-detail { overflow: auto; padding: 2px; }
.forum-detail h2 { margin: 8px 0 3px; font-size: 1.1em; }
.forum-meta { font-size: .62em; color: var(--muted); }
.forum-op { font-size: .78em; line-height: 1.6; margin: 10px 0; }
.forum-replies { display: flex; flex-direction: column; gap: 7px; }
.forum-reply { padding: 9px 10px; border-radius: 10px; background: var(--chip); border: 1px solid var(--line); }
.forum-reply b { font-size: .72em; }
.forum-reply i { font-style: normal; margin-left: 7px; font-size: .6em; color: var(--muted); }
.forum-reply p { margin: 4px 0 0; font-size: .74em; line-height: 1.5; }
.forum-reply-form { display: flex; gap: 7px; margin-top: 10px; }
.forum-reply-form textarea { flex: 1; min-height: 56px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--fg); padding: 8px; font: inherit; font-size: .74em; }
.forum-empty, .forum-signin { padding: 24px; text-align: center; color: var(--muted); font-size: .72em; }
@media (max-width: 720px) { .forum-body { grid-template-columns: 1fr; } .forum-side { flex-direction: row; overflow-x: auto; } .forum-cat { white-space: nowrap; } .forum-cat em { display: none; } }

.adm-log { margin-top: 10px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: #05070b; }
.adm-log-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: var(--chip); border-bottom: 1px solid var(--line); }
.adm-log-head b { font-size: .72em; flex: 1; }
.adm-log-head span { font-size: .6em; color: var(--muted); }
.adm-log-head .btnl { padding: 3px 6px; font-size: .6em; }
#adm-log-pre { margin: 0; padding: 10px; max-height: 220px; overflow: auto; color: #a7f3d0; font: .68em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }

.fxa-builtin { font-size: .58em; font-weight: 800; color: var(--accent); padding: 2px 5px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 12%, transparent); white-space: nowrap; }
.tut-card { max-height: calc(100vh - 24px); overflow: auto; }
.mu-toroom { font-size: .72em; }
.adm-f--note { display: flex; flex-direction: column; gap: 4px; }

/* One-click pin in the chat sidebar */
.chat-chan { position: relative; }
.chat-pin-btn { position: absolute; right: 7px; bottom: 5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; font-size: .66em; opacity: 0; background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid var(--line); cursor: pointer; transition: opacity .15s, transform .15s; }
.chat-chan:hover .chat-pin-btn, .chat-pin-btn:focus-visible, .chat-pin-btn.on { opacity: 1; }
.chat-pin-btn:hover { transform: scale(1.12); border-color: var(--accent); }
.chat-pin-btn.on { background: color-mix(in srgb, var(--accent) 20%, var(--bg)); }
@media (max-width: 720px) { .chat-pin-btn { opacity: 1; right: 4px; bottom: 4px; width: 18px; height: 18px; } }

/* Maintenance and queue are deliberately two different screens. */
#server-gate[data-mode="maint"] { background: radial-gradient(circle at 50% 0%, #4338ca66, transparent 55%), #05060a; }
#server-gate[data-mode="maint"] .sg-card { border-color: #818cf855; }
#server-gate[data-mode="maint"] .sg-orb { background: linear-gradient(135deg,#312e81,#818cf8); }
/* Maintenance: a slow, quiet ring and a short calm card. No counters, no
   progress bar - there is nothing to count while the site is closed. */
.sg-orb--maint { position: relative; }
.sg-orb--maint span { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #e0e7ff99; border-top-color: #e0e7ff; animation: sgMaintSpin 2.4s linear infinite; }
@keyframes sgMaintSpin { to { transform: rotate(360deg); } }
.sg-card--maint { width: min(470px, calc(100vw - 28px)); padding: 30px 28px 24px; }
.sg-card--maint h1 { font-size: 1.55em; }
.sg-card--maint .sg-foot { justify-content: center; }
/* Queue: its own palette and left-aligned layout with a seat counter, so the
   two screens can never be mistaken for one another at a glance. */
.sg-orb--queue { position: relative; }
.sg-orb--queue i { width: 24px; height: 24px; border-radius: 50%; border: 3px solid #032f3a; border-right-color: #a7f3d0; animation: sgQueueSpin 1.1s linear infinite; }
#server-gate[data-mode="queue"] { background: radial-gradient(circle at 20% 10%, #0e7490aa, transparent 48%), #03151b; }
#server-gate[data-mode="queue"] .sg-card { border-color: #22d3ee55; text-align: left; }
#server-gate[data-mode="queue"] .sg-orb { margin-left: 0; background: linear-gradient(135deg,#0f766e,#22d3ee); animation: sgQueueSpin 3s linear infinite; }
#server-gate[data-mode="queue"] .sg-kicker { color: #67e8f9; }
#server-gate[data-mode="queue"] .sg-progress { height: 9px; }
#server-gate[data-mode="queue"] .sg-progress i { background: linear-gradient(90deg,#22d3ee,#34d399,#a3e635); }
@keyframes sgQueueSpin { to { transform: rotate(360deg); } }
.sg-admin-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 10px; border-radius: 12px; border: 1px solid #ffffff18; background: #ffffff08; text-align: left; }
.sg-admin-form[hidden] { display: none; }
.sg-admin-form input { flex: 1 1 150px; min-width: 0; padding: 8px 9px; border-radius: 8px; border: 1px solid #ffffff22; background: #0b1020; color: #f8fafc; font: inherit; font-size: .75em; outline: none; }
.sg-admin-form input:focus { border-color: #818cf8; }
.sg-admin-form .btnl { background: #6366f1; border-color: #6366f1; color: #fff; }
.sg-admin-err { flex-basis: 100%; min-height: 1em; font-size: .66em; color: #fca5a5; }

.set-danger-zone { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb,#ef4444 35%,var(--line)); border-radius: 12px; background: color-mix(in srgb,#ef4444 7%,var(--bg-2)); }
.set-danger-zone > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.set-danger-zone b { font-size: .78em; }
.set-danger-zone span { font-size: .66em; color: var(--muted); line-height: 1.4; }
.set-danger-zone .btnl { font-size: .7em; white-space: nowrap; }

/* Club v2: independent rooms, invites, stage */
.club-app--v2 { gap: 10px; }
.club-kicker { font-size: .6em; letter-spacing: .12em; text-transform: uppercase; color: #5eead4; font-weight: 900; }
.club-tabs { display: flex; gap: 5px; }
.club-tab { border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); border-radius: 9px; padding: 6px 10px; font: inherit; font-size: .72em; cursor: pointer; }
.club-tab.on { color: var(--fg); border-color: #2dd4bf; background: color-mix(in srgb,#2dd4bf 10%,var(--bg-2)); }
.club-tab b { color: #2dd4bf; }
.club-room.on { border-color: #2dd4bf; }
.club-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: .9em; }
.club-room-stage { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.club-stage-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.club-stage-head > div { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 1px; }
.club-stage-head b { font-size: .86em; }
.club-stage-head i { font-style: normal; font-size: .64em; color: var(--muted); }
.club-stage-head .btnl { font-size: .66em; padding: 5px 7px; }
.club-stage-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 50% 0%, #14b8a622, transparent 58%), var(--bg-2); }
.club-stage-ring { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-size: 2.4em; color: #5eead4; border: 2px solid #2dd4bf; box-shadow: 0 0 0 12px #2dd4bf11; animation: clubPulse 2s infinite; }
.club-people { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; padding: 0 14px; }
.club-person { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 7px 8px; border-radius: 11px; background: var(--chip); border: 1px solid var(--line); }
.club-person > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#0f766e,#2dd4bf); color: #041; font-weight: 900; }
.club-person b { font-size: .62em; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.club-person i { font-style: normal; font-size: .6em; }
.club-person.me { border-color: #2dd4bf; }
.club-mic-note { font-size: .66em; color: var(--muted); }
.club-invite-list { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 0 12px 12px; }
.club-friend { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; font-size: .66em; }
.club-friend > span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); }
.club-friend em { font-style: normal; color: #2dd4bf; }
@media (max-width:720px){ .club-hero { flex-wrap: wrap; } .club-stage-head { flex-direction: column; align-items: stretch; } .club-stage-head .btnl { width: 100%; } }

/* App-Store-like market: compact header, categories first, roomy cards. */
.mkt-hero--store { align-items: center; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%,var(--bg-2)), var(--bg-2)); }
.mkt-hero--store .mkt-hero-copy { flex: 1; }
.mkt-hero--store h1 { margin: 2px 0 0; font-size: 1.45em; letter-spacing: -.03em; }
.mkt-hero--store .mkt-account { min-width: 260px; }
.mkt-profile-btn { margin-left: auto; padding: 4px 8px; font-size: .66em; }
.mkt-bar { position: sticky; top: 0; z-index: 3; padding: 8px 0; background: color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter: blur(12px); }
.mkt-cats { overflow-x: auto; flex-wrap: nowrap; }
.mkt-cat { white-space: nowrap; }
.mkt-grid { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 12px; }
.mkt-card { border-radius: 16px; overflow: hidden; }
.mkt-card .mkt-art { height: 112px; }
.mkt-card .mkt-info { padding: 10px; }
.mkt-card .mkt-info > b { font-size: .9em; }
.mkt-card .mkt-info > p { font-size: .68em; line-height: 1.4; min-height: 2.8em; }
.mkt-card--apps .mkt-art, .mkt-card--games .mkt-art { display: grid; place-items: center; }
.mkt-card--games .mkt-art > span { font-size: 2.2em; }
.mkt-card--apps .mkt-art > span { font-size: 2em; }
.pub-hint { margin: 2px 0 0; font-size: .64em; color: var(--muted); line-height: 1.4; }
.mkt-gate .btnl { margin-top: 4px; }

/* Tracker apps */
.track-app { height: 100%; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.track-head { display: flex; align-items: center; gap: 12px; }
.track-head > div:first-child { flex: 1; }
.track-kicker { font-size: .6em; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 900; }
.track-head h1 { margin: 2px 0; font-size: 1.4em; }
.track-head p { margin: 0; color: var(--muted); font-size: .72em; line-height: 1.45; }
.track-stat { display: flex; flex-direction: column; align-items: center; padding: 10px 16px; border-radius: 13px; background: var(--chip); border: 1px solid var(--line); }
.track-stat b { font-size: 1.35em; color: var(--accent); }
.track-stat span { font-size: .6em; color: var(--muted); text-transform: uppercase; }
.drink-form, .daily-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.drink-form select, .drink-form input, .daily-meta select, .daily-form textarea { border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--fg); padding: 8px 9px; font: inherit; font-size: .74em; outline: none; }
.drink-form input { width: 90px; }
.track-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 9px; }
.track-card { border: 1px solid var(--line); border-radius: 13px; background: var(--bg-2); padding: 10px; min-height: 150px; }
.track-card-head { display: flex; justify-content: space-between; gap: 8px; font-size: .7em; margin-bottom: 8px; }
.track-card-head span { color: var(--muted); }
.track-bars { display: flex; align-items: flex-end; gap: 5px; height: 105px; }
.track-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; min-width: 0; }
.track-bar i { width: 100%; max-width: 24px; min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg,#22d3ee,#0e7490); }
.track-bar b { font-size: .5em; color: var(--muted); }
.track-bar span { font-size: .52em; color: var(--muted); }
.track-bars--month i { background: linear-gradient(180deg,#a78bfa,#6d28d9); }
.track-list { display: flex; flex-direction: column; gap: 4px; }
.track-row { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; background: var(--chip); font-size: .68em; }
.track-row b { min-width: 54px; }
.track-row span { color: var(--muted); }
.track-row i { margin-left: auto; font-style: normal; color: var(--muted); font-size: .9em; }
.track-ic { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: var(--bg-2); }
.track-empty { padding: 24px; text-align: center; color: var(--muted); font-size: .72em; }
.habit-list { display: flex; flex-direction: column; gap: 7px; }
.habit-row { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 9px; }
.habit-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.habit-top b { flex: 1; font-size: .8em; }
.habit-days { display: flex; gap: 4px; }
.habit-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); font: inherit; font-size: .6em; cursor: pointer; }
.habit-day.on { border-color: #22c55e; background: color-mix(in srgb,#22c55e 16%,var(--bg)); color: var(--fg); }
.habit-day b { color: #22c55e; }
/* --- Habits v4: tap-target first, readable week, quiet reminder --- */
/* Sits above the days strip: same 34px columns, same 4px gap, pushed right by
   the check + name columns so each date is above its own cell. */
.habit-week-head { display: flex; justify-content: flex-end; gap: 10px; padding: 0 36px 4px 10px; font-size: .6em; color: var(--muted); }
.habit-week-head > span { display: grid; grid-template-columns: repeat(7, 34px); gap: 4px; width: 244px; }
.habit-week-head b { font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.habit-week-head b.today { color: var(--accent); font-weight: 800; }
.habit-week-head i { font-style: normal; }
.habit-row--v4 { display: grid; grid-template-columns: 34px 1fr auto 26px; align-items: center; gap: 10px; padding: 10px 10px; }
.habit-row--v4.done { background: color-mix(in srgb, #22c55e 8%, var(--bg-2)); border-color: color-mix(in srgb, #22c55e 34%, var(--line)); }
.habit-check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fg) 22%, transparent); background: transparent; color: transparent; display: grid; place-items: center; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.habit-check svg { width: 16px; height: 16px; }
.habit-check:hover { border-color: #22c55e; }
.habit-check.on { background: #22c55e; border-color: #22c55e; color: #04180b; }
.habit-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.habit-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.habit-name-line b { font-size: .8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-row--v4.done .habit-name-line b { color: color-mix(in srgb, var(--fg) 72%, transparent); text-decoration: line-through; text-decoration-thickness: 1px; }
.habit-streak { font-size: .6em; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 18%, transparent); color: #f59e0b; white-space: nowrap; }
.habit-streak--none { background: none; color: color-mix(in srgb, var(--fg) 38%, transparent); font-weight: 500; }
.habit-meta { display: flex; align-items: center; gap: 5px; }
.habit-remindpill { border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent); background: none; color: var(--muted); font: inherit; font-size: .62em; padding: 2px 8px; border-radius: 999px; cursor: pointer; }
.habit-remindpill:hover { color: var(--fg); border-color: var(--accent); }
.habit-remindpill.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.habit-time-input { font: inherit; font-size: .66em; padding: 1px 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.habit-remind-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .62em; padding: 0 2px; }
.habit-remind-x:hover { color: #ef4444; }
.habit-row--v4 .habit-days { gap: 4px; }
.habit-row--v4 .habit-day { width: 34px; flex: 0 0 auto; min-height: 34px; justify-content: center; font-size: .62em; }
.habit-row--v4 .habit-day span { font-weight: 700; }
.habit-row--v4 .habit-day b { font-size: .95em; line-height: 1; min-height: .95em; }
.habit-row--v4 .habit-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.habit-row--v4 .habit-day:not(.on):hover { background: color-mix(in srgb, #22c55e 10%, var(--bg)); }
.habit-del { border: 0; background: none; color: color-mix(in srgb, var(--fg) 30%, transparent); cursor: pointer; font-size: .7em; opacity: 0; transition: opacity .15s ease, color .15s ease; }
.habit-row--v4:hover .habit-del, .habit-row--v4:focus-within .habit-del { opacity: 1; }
.habit-del:hover { color: #ef4444; }
@media (max-width: 620px) {
  .habit-row--v4 { grid-template-columns: 30px 1fr 26px; row-gap: 8px; }
  .habit-row--v4 .habit-days { grid-column: 1 / -1; justify-content: space-between; }
  .habit-row--v4 .habit-day { flex: 1 1 0; width: auto; }
  .habit-week-head { display: none; }
}
.daily-form { display: flex; flex-direction: column; gap: 6px; }
.daily-form textarea { min-height: 80px; resize: vertical; }
.daily-list { display: flex; flex-direction: column; gap: 6px; }
.daily-card { border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); padding: 9px 11px; }
.daily-card-head { display: flex; justify-content: space-between; gap: 8px; font-size: .66em; color: var(--muted); }
.daily-card p { margin: 5px 0 0; font-size: .76em; line-height: 1.5; }
/* ---------------- Daily journal: a warm paper diary ---------------- */
/* The page is deliberately cream in every theme: a journal should not look
   like a settings panel. Warm ink, ruled lines, a soft spine shadow. */
.diary { height: 100%; overflow-y: auto; padding: 18px; background: radial-gradient(120% 80% at 50% -10%, #fbf3e2 0%, #f6ead3 55%, #efe0c4 100%); }
.diary-book { max-width: 640px; margin: 0 auto; }
.diary-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px 6px 12px; }
.diary-kicker { display: block; font-size: .62em; letter-spacing: .14em; text-transform: uppercase; color: #a97c3f; font-weight: 700; }
.diary-head h1 { margin: 2px 0 2px; font-size: 1.45em; color: #4a3419; letter-spacing: -.02em; font-family: Georgia, "Iowan Old Style", serif; }
.diary-date { font-size: .72em; color: #8a6a3d; }
.diary-count { text-align: center; min-width: 58px; padding: 7px 10px; border-radius: 14px; background: #fffaf0; border: 1px solid #e6d5b4; box-shadow: 0 3px 10px -6px #7a5a2a55; }
.diary-count b { display: block; font-size: 1.35em; color: #6b4a1e; line-height: 1; }
.diary-count span { font-size: .56em; letter-spacing: .1em; text-transform: uppercase; color: #a3824f; }
/* The writing sheet: ruled lines via a repeating gradient, with a red margin. */
.diary-sheet {
  position: relative; padding: 16px 18px 14px 46px; border-radius: 6px 16px 16px 6px;
  background: #fffdf7;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #efe3c8 27px, #efe3c8 28px);
  border: 1px solid #e8d8b8;
  box-shadow: 0 14px 30px -18px #6b4a1e66, inset 3px 0 0 #e9d4ae;
}
.diary-sheet::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 1px; background: #efc9c0; }
.diary-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.diary-stamp { color: #c08a4a; font-size: .95em; }
.diary-label { font-size: .72em; font-weight: 700; color: #7a5a2a; letter-spacing: .01em; }
.diary-text {
  display: block; width: 100%; min-height: 140px; resize: vertical; box-sizing: border-box;
  border: 0; outline: none; background: transparent; color: #3f2e17;
  font-family: Georgia, "Iowan Old Style", serif; font-size: .95em; line-height: 28px;
  padding: 0; margin: 0 0 10px;
}
.diary-text::placeholder { color: #b39a76; font-style: italic; }
.diary-picks { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 12px; }
.diary-pick-group { display: flex; flex-direction: column; gap: 5px; }
.diary-pick-group > span { font-size: .58em; letter-spacing: .1em; text-transform: uppercase; color: #a3824f; font-weight: 700; }
.diary-chips { display: flex; gap: 5px; }
.diary-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; cursor: pointer;
  border-radius: 999px; border: 1px solid #e6d5b4; background: #fffaf0; color: #7a5a2a;
  font: inherit; font-size: .68em; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.diary-chip span { font-size: 1.15em; line-height: 1; }
.diary-chip i { font-style: normal; }
.diary-chip:hover { transform: translateY(-1px); border-color: #d3b581; }
.diary-chip.on { background: #fff1d6; border-color: #c9954f; color: #5b3f18; box-shadow: 0 2px 8px -4px #a97c3f99; font-weight: 700; }
/* Weather labels are wordy; hide the word on narrow windows, keep the emoji. */
.diary-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px dashed #e8d8b8; }
.diary-hint { font-size: .64em; color: #a3824f; }
.diary-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.diary-entry {
  padding: 12px 14px; border-radius: 14px; background: #fffdf7; border: 1px solid #e8d8b8;
  box-shadow: 0 6px 16px -14px #6b4a1e88; color: #3f2e17;
}
.diary-entry.today { border-color: #d9a55f; background: #fff8e9; }
.diary-entry header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.diary-entry-date { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 700; color: #6b4a1e; font-size: .72em; min-width: 62px; }
.diary-entry-date i { font-style: normal; font-weight: 500; color: #a3824f; font-size: .9em; }
.diary-entry-tags { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.diary-tag { font-size: .62em; padding: 2px 8px; border-radius: 999px; background: #fdf1da; border: 1px solid #eeddc0; color: #7a5a2a; }
.diary-del { border: 0; background: none; color: #c9b08a; cursor: pointer; font-size: .7em; opacity: 0; transition: opacity .15s ease, color .15s ease; }
.diary-entry:hover .diary-del, .diary-entry:focus-within .diary-del { opacity: 1; }
.diary-del:hover { color: #b91c1c; }
.diary-entry p { margin: 0; font-size: .82em; line-height: 1.65; white-space: pre-wrap; font-family: Georgia, "Iowan Old Style", serif; }
.diary-empty { text-align: center; padding: 30px 12px; color: #a3824f; }
.diary-empty-art { font-size: 2em; display: block; margin-bottom: 8px; filter: drop-shadow(0 4px 8px #a97c3f44); }
.diary-empty b { display: block; color: #6b4a1e; font-size: .86em; margin-bottom: 3px; font-family: Georgia, serif; }
.diary-empty span:last-child { font-size: .72em; line-height: 1.5; }
@media (max-width: 560px) {
  .diary { padding: 12px; }
  .diary-sheet { padding-left: 34px; }
  .diary-sheet::before { left: 22px; }
  .diary-chip i { display: none; }
  .diary-chip { padding: 5px 8px; }
}

/* Games */
.game-app { height: 100%; overflow: auto; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.game-head { text-align: center; }
.game-kicker { font-size: .6em; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 900; }
.game-head h1 { margin: 2px 0; font-size: 1.55em; }
.game-head p { margin: 0; font-size: .7em; color: var(--muted); }
.game-hint { font-size: .64em; color: var(--muted); text-align: center; }
.xoxo-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; width: min(320px, 80vw); }
.xoxo-cell { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--fg); font-size: 2.4em; font-weight: 900; cursor: pointer; }
.xoxo-cell.on { background: color-mix(in srgb,var(--accent) 13%,var(--bg-2)); }
.g2048-score { display: flex; align-items: center; gap: 10px; }
.g2048-score b { font-size: 1.4em; color: var(--accent); }
.g2048-board { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 8px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); width: min(360px, 82vw); }
.g2048-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; background: var(--chip); font-weight: 900; font-size: 1.1em; color: var(--fg); }
.g2048-cell.v1 { background: #f8fafc; color: #1e293b; } .g2048-cell.v2 { background: #e2e8f0; color: #1e293b; } .g2048-cell.v3 { background: #fde68a; color: #78350f; } .g2048-cell.v4 { background: #fdba74; color: #7c2d12; } .g2048-cell.v5 { background: #f87171; color: #fff; } .g2048-cell.v6 { background: #c084fc; color: #fff; } .g2048-cell.v7 { background: #818cf8; color: #fff; } .g2048-cell.v8 { background: #22d3ee; color: #083344; } .g2048-cell.v9 { background: #34d399; color: #052e16; } .g2048-cell.v10, .g2048-cell.v11 { background: #facc15; color: #422006; }
.mines-board { display: grid; grid-template-columns: repeat(9,1fr); gap: 2px; width: min(380px, 86vw); }
.mine-cell { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; background: var(--chip); color: var(--fg); font: inherit; font-size: .8em; cursor: pointer; }
.mine-cell.open { background: var(--bg-2); }
.mine-cell.flag { background: color-mix(in srgb,#ef4444 18%,var(--chip)); }
.tetris-wrap { display: flex; gap: 12px; align-items: flex-start; }
#tetris-cv { border-radius: 12px; border: 1px solid var(--line); background: #080b12; max-width: 60vw; }
.tetris-side { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.tetris-side b { font-size: 1.6em; color: var(--accent); text-align: center; }
.tetris-side span { font-size: .6em; color: var(--muted); text-align: center; }
.memory-board { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; width: min(340px, 82vw); }
.memory-card { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); color: var(--fg); font-size: 1.4em; cursor: pointer; }
.memory-card.open { background: color-mix(in srgb,var(--accent) 14%,var(--bg-2)); }
.memory-card.done { opacity: .55; border-color: #22c55e; }
@media (max-width:720px) { .track-grid { grid-template-columns: 1fr; } .mkt-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .mkt-hero--store { flex-wrap: wrap; } .mkt-hero--store .mkt-account { min-width: 100%; } .track-head { flex-wrap: wrap; } .tetris-wrap { flex-direction: column; } #tetris-cv { max-width: 100%; } }

/* About summary: a clear 30-second read, not a wall of cards. */
.ab-brief { border-radius: 20px; padding: 20px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 52%), var(--bg-2); }
.ab-brief-hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ab-brief-av { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; border: 1px solid var(--line); }
.ab-brief-av--ca { display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 900; }
.ab-brief-who { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ab-brief-who b { font-size: 1.18em; }
.ab-brief-who span { font-size: .72em; color: var(--muted); }
.ab-brief-lead { margin: 14px 0; max-width: 66ch; font-size: .9em; line-height: 1.65; text-align: left; }
.ab-brief-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ab-brief-list li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb,var(--fg) 4%,transparent); border: 1px solid var(--line); }
.ab-brief-list b { font-size: .72em; color: var(--accent); }
.ab-brief-list span { font-size: .7em; color: var(--muted); line-height: 1.45; }
.ab-brief-cta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ab-brief-cta .btnl { text-decoration: none; }
@media (max-width:720px) { .ab-brief-list li { grid-template-columns: 1fr; gap: 2px; } .ab-brief { padding: 14px; } }

/* Files sidebar folder shortcuts */
.fxa-folders { padding: 6px 8px 0; display: flex; flex-direction: column; gap: 2px; }
.fxa-folders-head { font-size: .6em; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 5px 4px; }
.fxa-folder-link { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--fg); font: inherit; font-size: .7em; padding: 5px 6px; cursor: pointer; text-align: left; }
.fxa-folder-link svg { width: 15px; height: 15px; color: #eab308; }
.fxa-folder-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxa-folder-link:hover, .fxa-folder-link.on { background: var(--chip); border-color: var(--line); }
.forum-del { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: auto; border-radius: 5px; background: color-mix(in srgb,#ef4444 12%,transparent); color: #ef4444; border: 1px solid color-mix(in srgb,#ef4444 30%,var(--line)); font-size: .7em; cursor: pointer; }

/* Social apps: CemGram / Chirp */
.social-app { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); }
.social-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.social-brand { display: flex; align-items: center; gap: 6px; font-size: .95em; }
.social-brand span { color: #ec4899; font-size: 1.25em; }
.social-chirp .social-brand span { color: #38bdf8; }
.social-search { flex: 1; min-width: 120px; }
.social-search input { width: 100%; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); border-radius: 999px; padding: 7px 11px; font: inherit; font-size: .7em; outline: none; }
.social-tabs { display: flex; gap: 3px; }
.social-tabs button { border: 1px solid transparent; background: none; color: var(--muted); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: .68em; cursor: pointer; }
.social-tabs button.on { color: var(--fg); background: var(--chip); border-color: var(--line); }
.social-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 270px; }
.social-feed { overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.social-post { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); padding: 10px; }
.social-post-head { display: flex; align-items: center; gap: 6px; }
.social-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#db2777,#f9a8d4); color: #fff; font-weight: 900; font-size: .75em; }
.social-post-head b { font-size: .78em; }
.social-post-head i { margin-left: auto; font-style: normal; color: var(--muted); font-size: .6em; }
.social-text { margin: 8px 0; font-size: .8em; line-height: 1.5; white-space: pre-wrap; }
.social-media { border-radius: 10px; overflow: hidden; max-height: 300px; background: var(--chip); }
.social-media img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.social-media.blur img { filter: blur(26px); transform: scale(1.08); }
.social-media.blur::after { content: "18+ · dokun"; position: absolute; }
.social-media { position: relative; }
.social-media.blur { cursor: pointer; }
.social-actions { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.social-actions button { border: 1px solid var(--line); background: var(--chip); color: var(--fg); border-radius: 999px; padding: 4px 7px; font: inherit; font-size: .64em; cursor: pointer; }
.social-comments { margin-top: 6px; }
.social-comment-list { display: flex; flex-direction: column; gap: 3px; font-size: .68em; }
.social-comment-list b { color: #ec4899; margin-right: 4px; }
.social-comment-add { display: flex; gap: 4px; margin-top: 5px; }
.social-comment-add input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: .65em; }
.social-comment-add button { border: none; border-radius: 7px; background: var(--accent); color: #fff; font: inherit; font-size: .64em; padding: 4px 7px; cursor: pointer; }
.social-side { border-left: 1px solid var(--line); padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.social-compose { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.social-compose b { font-size: .78em; }
.social-compose textarea { min-height: 78px; resize: vertical; border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 8px; padding: 7px; font: inherit; font-size: .72em; }
.social-compose input { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 7px; padding: 6px 7px; font: inherit; font-size: .66em; }
.social-18 { display: flex; align-items: center; gap: 5px; font-size: .65em; color: var(--muted); }
.social-note { font-size: .58em; color: var(--muted); line-height: 1.35; }
.social-stats { display: flex; gap: 4px; }
.social-stats > div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 7px; border-radius: 9px; background: var(--chip); }
.social-stats b { font-size: .95em; color: #ec4899; }
.social-stats span { font-size: .55em; color: var(--muted); }
.social-empty { padding: 30px; text-align: center; color: var(--muted); font-size: .72em; }
.social-del { margin-left: auto; border: none; background: none; color: #ef4444; cursor: pointer; }
@media (max-width: 760px) { .social-main { grid-template-columns: 1fr; } .social-side { border-left: none; border-top: 1px solid var(--line); } }

.ab.brief-on:not(.brief-on) .ab-hero,
.ab.brief-on:not(.brief-on) .ab-pitch,
.ab.brief-on:not(.brief-on) .ab-stats,
.ab.brief-on:not(.brief-on) .ab-sec-title,
.ab.brief-on:not(.brief-on) .ab-work,
.ab.brief-on:not(.brief-on) .ab-skills,
.ab.brief-on:not(.brief-on) .ab-edus,
.ab.brief-on:not(.brief-on) .ab-contact,
.ab.brief-on:not(.brief-on) .ab-foot { display: revert; }

/* ============================================================================
   MARKET — App Store layout (rail + hero + rails + product page)
   ============================================================================ */
.appstore { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 100%; min-height: 0; }
/* Apps added in this round painted an opaque background, so the window-opacity
   setting had no effect on them. They now sit on --win-bg like every older app. */
.appstore, .track-app, .game-app, .chirp-wrap, .club4, .forum, .pdf-app { background: transparent; }
.as-rail { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 55%, transparent); min-height: 0; }
.as-brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-size: .82em; }
.as-brand-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(140deg, #34d399, #0f766e); }
.as-brand-ic svg { width: 15px; height: 15px; }
.as-nav { display: flex; flex-direction: column; gap: 1px; overflow: auto; min-height: 0; }
.as-navitem { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--fg); font: inherit; font-size: .74em; font-weight: 600; cursor: pointer; text-align: left; }
.as-navitem span { width: 16px; text-align: center; color: var(--muted); font-size: 1em; }
.as-navitem:hover { background: var(--chip); }
.as-navitem.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); color: var(--fg); }
.as-navitem.on span { color: var(--accent); }
.as-rail-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.as-acct { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.as-acct:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.as-av { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: .72em; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #111)); }
.as-av--guest { background: var(--chip); color: var(--muted); }
.as-acct-tx { display: flex; flex-direction: column; min-width: 0; }
.as-acct-tx b { font-size: .68em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-acct-tx i { font-style: normal; font-size: .58em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.as-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.as-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.as-search { flex: 1; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.as-search svg { width: 14px; height: 14px; color: var(--muted); }
.as-search input { flex: 1; border: none; background: none; color: var(--fg); font: inherit; font-size: .76em; outline: none; }
.as-back { border: 1px solid var(--line); background: var(--chip); color: var(--fg); font: inherit; font-size: .72em; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.as-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }

.as-hero { position: relative; display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 16px; align-items: center; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--bg-2)), var(--bg-2)); margin-bottom: 18px; cursor: pointer; overflow: hidden; }
.as-hero-art { width: 112px; height: 112px; border-radius: 26px; display: grid; place-items: center; color: #fff; box-shadow: 0 16px 34px -12px #0009; }
.as-hero-art svg { width: 54px; height: 54px; }
.as-kicker { font-size: .58em; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; color: var(--accent); }
.as-hero h1 { margin: 4px 0 6px; font-size: 1.5em; letter-spacing: -.03em; }
.as-hero p { margin: 0 0 12px; font-size: .76em; color: var(--muted); line-height: 1.5; max-width: 56ch; }

.as-sec { margin-bottom: 20px; }
.as-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.as-sec-head h2 { margin: 0; font-size: .92em; letter-spacing: -.01em; }
.as-sec-all { border: none; background: none; color: var(--accent); font: inherit; font-size: .68em; font-weight: 700; cursor: pointer; }
/* Muted aside next to a shelf title (e.g. "ships with cemOS"). */
.as-sec-note { color: color-mix(in srgb, var(--fg) 55%, transparent); font-size: .68em; font-weight: 600; letter-spacing: .02em; }
.as-by-builtin { font-size: .92em; font-weight: 600; color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.as-rail-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.as-rail-scroll .as-tile { scroll-snap-align: start; }

.as-tile { display: flex; flex-direction: column; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--bg-2) 75%, transparent); cursor: pointer; transition: transform .15s, border-color .15s; }
.as-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.as-tile-art { height: 74px; border-radius: 11px; display: grid; place-items: center; color: #fff; margin-bottom: 4px; }
.as-tile-art svg { width: 30px; height: 30px; }
.as-glyph { font-size: 1.5em; font-weight: 900; }
.as-tile b { font-size: .7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-tile i { font-style: normal; font-size: .62em; color: var(--muted); line-height: 1.35; height: 2.7em; overflow: hidden; }
.as-tile-row { margin-top: 4px; display: flex; align-items: center; gap: 4px; }

.as-get { flex: 1; padding: 4px 8px; border: none; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, var(--chip)); color: var(--accent); font: inherit; font-size: .62em; font-weight: 900; letter-spacing: .05em; cursor: pointer; text-align: center; }
.as-get:hover { background: color-mix(in srgb, var(--accent) 30%, var(--chip)); }
.as-get--open { background: var(--chip); color: var(--fg); }
.as-get--hero { flex: 0 0 auto; padding: 7px 16px; font-size: .7em; background: var(--accent); color: #0b0d12; }
.as-remove { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; font-size: .6em; cursor: pointer; flex: 0 0 22px; }
.as-remove:hover { color: #f87171; border-color: #f8717155; }

.as-results > h2 { margin: 0 0 12px; font-size: 1em; }
.as-results > h2 i { font-style: normal; font-size: .7em; color: var(--muted); margin-left: 4px; }
.as-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.as-row { display: flex; align-items: center; gap: 11px; padding: 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.as-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.as-row-art { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.as-row-art svg { width: 24px; height: 24px; }
.as-row-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.as-row-tx b { font-size: .76em; }
.as-row-tx i { font-style: normal; font-size: .66em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-row-meta { font-size: .6em; color: var(--muted); opacity: .85; }
.as-row .as-get { flex: 0 0 auto; min-width: 62px; }
.as-empty { padding: 40px; text-align: center; color: var(--muted); font-size: .78em; }

/* Product page */
.as-detail { display: flex; flex-direction: column; gap: 14px; }
.as-d-back { align-self: flex-start; border: none; background: none; color: var(--accent); font: inherit; font-size: .72em; font-weight: 700; cursor: pointer; padding: 0; }
.as-d-head { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 15px; align-items: start; }
.as-d-art { width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center; color: #fff; box-shadow: 0 14px 30px -12px #0009; }
.as-d-art svg { width: 46px; height: 46px; }
.as-d-tx { min-width: 0; }
.as-d-tag { font-size: .58em; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; color: var(--accent); }
.as-d-tx h1 { margin: 3px 0 5px; font-size: 1.35em; letter-spacing: -.03em; }
.as-d-tx p { margin: 0 0 8px; font-size: .76em; color: var(--muted); line-height: 1.5; }
.as-d-meta { display: flex; align-items: baseline; gap: 5px; font-size: .66em; color: var(--muted); flex-wrap: wrap; }
.as-d-meta b { color: var(--fg); font-size: 1.05em; }
.as-d-meta span { margin-right: 10px; }
.as-d-cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.as-d-cta .as-get { min-width: 96px; padding: 7px 14px; font-size: .68em; }
.as-d-author { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--bg-2) 60%, transparent); width: fit-content; }
.as-d-author div { display: flex; flex-direction: column; }
.as-d-author b { font-size: .72em; }
.as-d-author i { font-style: normal; font-size: .62em; color: var(--muted); }
.as-d-rate { display: flex; align-items: center; gap: 9px; font-size: .7em; color: var(--muted); }
.as-d-shots { height: 230px; border-radius: 14px; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.as-d-shot-inner { padding: 10px 16px; border-radius: 9px; background: #0009; color: #fff; font-size: .74em; font-weight: 700; }

.as-publish { max-width: 60ch; }
.as-publish h1 { font-size: 1.2em; margin: 0 0 8px; }
.as-publish p { font-size: .76em; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.as-publish-hint { display: block; margin-top: 10px; font-size: .72em; color: var(--muted); line-height: 1.5; }

@media (max-width: 780px) {
  .appstore { grid-template-columns: 1fr; }
  .as-rail { flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--line); padding: 8px; overflow-x: auto; }
  .as-brand, .as-rail-foot { display: none; }
  .as-nav { flex-direction: row; }
  .as-navitem { white-space: nowrap; }
  .as-d-head { grid-template-columns: 72px minmax(0,1fr); }
  .as-d-art { width: 72px; height: 72px; }
  .as-d-cta { grid-column: 1 / -1; align-items: stretch; }
}

/* ============================================================================
   BUILT-IN MEDIA HUB (YouTube / Netflix shelves)
   ============================================================================ */
.mediahub { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #08090c; color: #f4f4f5; overflow: auto; }
.mh-bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid #ffffff14; position: sticky; top: 0; background: #08090cf2; z-index: 2; }
.mh-logo { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-weight: 900; font-size: .8em; }
.mediahub--yt .mh-logo { background: #ff0000; color: #fff; }
.mediahub--nf .mh-logo { background: #e50914; color: #fff; }
.mh-search { flex: 1; }
.mh-search input { width: 100%; padding: 6px 11px; border-radius: 999px; border: 1px solid #ffffff1f; background: #14161c; color: #f4f4f5; font: inherit; font-size: .74em; outline: none; }
.mh-tag { font-size: .58em; text-transform: uppercase; letter-spacing: .1em; color: #a1a1aa; }
.mh-feature { padding: 16px 16px 4px; }
.mh-hero { padding: 20px; border-radius: 14px; background: linear-gradient(120deg, #ffffff12, #ffffff05); border: 1px solid #ffffff14; }
.mh-kicker { font-size: .58em; letter-spacing: .14em; text-transform: uppercase; color: #f87171; font-weight: 900; }
.mh-hero h1 { margin: 5px 0 5px; font-size: 1.5em; color: #fff; }
.mh-hero p { margin: 0 0 12px; font-size: .74em; color: #a1a1aa; }
.mh-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 11px; padding: 14px 16px 20px; }
.mh-card { display: flex; flex-direction: column; gap: 2px; padding: 0; border: none; background: none; color: #f4f4f5; font: inherit; cursor: pointer; text-align: left; }
.mh-thumb { height: 88px; border-radius: 10px; display: grid; place-items: center; font-size: 1.4em; color: #fff; background: linear-gradient(135deg, #1e293b, #0f172a); border: 1px solid #ffffff12; margin-bottom: 5px; transition: transform .15s; }
.mh-card:hover .mh-thumb { transform: scale(1.03); }
.mh-card b { font-size: .72em; }
.mh-card i { font-style: normal; font-size: .62em; color: #a1a1aa; }
.mh-player { position: absolute; inset: 0; display: grid; place-items: center; background: #000000e6; z-index: 5; }
.mh-screen { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 22px; }
.mh-screen b { font-size: 1.05em; }
.mh-screen span { font-size: .72em; color: #a1a1aa; max-width: 42ch; line-height: 1.5; }
.mh-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #ffffff2a; border-top-color: #f87171; animation: sgQueueSpin .9s linear infinite; }

/* ============================================================================
   DRINK LOG v2
   ============================================================================ */
.drink-kinds { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.drink-kind { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); color: var(--fg); font: inherit; font-size: .7em; font-weight: 700; cursor: pointer; }
.drink-kind.on { background: var(--c); border-color: var(--c); color: #0b0d12; }
.drink-amount { display: flex; gap: 7px; align-items: center; }
.drink-amount input { width: 92px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: .76em; }
.drink-delta { font-size: .8em; font-weight: 800; }
.drink-delta.up { color: #f87171; }
.drink-delta.down { color: #4ade80; }
.track-bar--thin b { display: none; }
.track-bar--thin { min-width: 4px; }
.track-bar--thin.today i { outline: 2px solid var(--accent); outline-offset: 1px; }
.drink-mix { margin-top: 8px; }
.drink-mix-bar { display: flex; height: 7px; border-radius: 99px; overflow: hidden; gap: 1px; }
.drink-mix-bar i { display: block; height: 100%; }
.drink-mix-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: .62em; color: var(--muted); }
.drink-mix-legend span { display: inline-flex; align-items: center; gap: 3px; }
.drink-mix-legend i { width: 7px; height: 7px; border-radius: 2px; }
.drink-mix-legend b { color: var(--fg); }
.track-del { margin-left: auto; border: none; background: none; color: var(--muted); cursor: pointer; font-size: .8em; padding: 0 3px; }
.track-del:hover { color: #f87171; }

/* ============================================================================
   PUZZLE + CONNECT FOUR
   ============================================================================ */
.pz-board { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 7px; width: min(340px, 100%); margin: 0 auto; }
.pz-tile { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--bg-2)), var(--bg-2)); color: var(--fg); font: inherit; font-size: 1.25em; font-weight: 900; cursor: pointer; transition: transform .12s; }
.pz-tile:hover { transform: scale(1.04); }
.pz-tile--blank { background: transparent; border-color: transparent; cursor: default; }
.pz-foot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; font-size: .72em; color: var(--muted); }
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 9px; border-radius: 14px; background: #1d4ed8; width: min(400px, 100%); margin: 0 auto; }
.c4-cell { aspect-ratio: 1; border-radius: 50%; border: none; background: #0b1220; cursor: pointer; }
.c4-cell:disabled { cursor: default; }
.c4-cell.c4-you { background: #fbbf24; }
.c4-cell.c4-ai { background: #f43f5e; }

/* Launcher group headings */
.start-group-head { display: flex; align-items: center; gap: 6px; padding: 9px 10px 4px; font-size: .62em; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.start-group-head i { font-style: normal; opacity: .6; }
.start-none { padding: 18px; text-align: center; color: var(--muted); font-size: .76em; }

/* ============================================================================
   CLUB (server-backed rooms)
   ============================================================================ */
.club-hero-actions { display: flex; align-items: center; gap: 9px; }
.club-stat { font-size: .68em; color: var(--muted); font-weight: 700; }
.club-room { display: flex; align-items: center; gap: 10px; }
.club-room-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.club-room-meta { font-size: .62em; color: var(--muted); }
.club-room-acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.club-room-acts .btnl { padding: 4px 8px; font-size: .66em; }
.club-18 { font-style: normal; font-weight: 900; color: #fb7185; border: 1px solid #fb718566; border-radius: 4px; padding: 0 3px; font-size: .92em; }
.club-stage-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 70%, transparent); display: flex; flex-direction: column; gap: 10px; }
.club-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.club-stage-head b { font-size: .9em; display: block; }
.club-stage-head span { font-size: .68em; color: var(--muted); }
.club-stage-members { display: flex; flex-wrap: wrap; gap: 6px; }
.club-person { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; background: var(--chip); font-size: .68em; }
.club-av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .8em; font-weight: 900; background: color-mix(in srgb, var(--accent) 30%, var(--chip)); color: var(--fg); flex: 0 0 20px; }
.club-stage-note { font-size: .66em; color: var(--muted); line-height: 1.5; }
.club-stage-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pick-card { max-width: 420px; width: min(420px, calc(100vw - 30px)); }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow: auto; margin: 8px 0; }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.pick-row:hover { background: var(--chip); }
.pick-row b { font-size: .78em; }
.pick-row i { font-style: normal; font-size: .66em; color: var(--muted); margin-left: auto; }

/* Club invitation card inside a DM */
.club-inv-msg { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); }
.club-inv-ic { font-size: 1.2em; }
.club-inv-tx { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.club-inv-tx b { font-size: .8em; }
.club-inv-tx i { font-style: normal; font-size: .66em; color: var(--muted); }

/* GIF picker: explicit retry card (the old dead text link looked broken). */
.gifp-err { display: grid; place-items: center; gap: 8px; padding: 26px 12px; text-align: center; }
.gifp-err .chat-empty { padding: 0; }

/* Admin-pinned chats and club rooms: top of every list, locked for members. */
.chat-chan--adminpin { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.chat-pin-btn.locked { cursor: default; opacity: 1; }
.chat-pin-mark--admin { color: var(--accent); }
.club4-pin {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid var(--line); background: transparent;
  font-size: 13px; cursor: pointer; color: var(--muted);
}
.club4-pin:hover { border-color: var(--accent); color: var(--accent); }
.club4-pin.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.club4-pin.locked { cursor: default; }
.club4-badge--pin { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }

/* Per-game record strip in the header. */
.game-best { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 0.74em; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }

/* ===================== Club (rooms) ===================== */
/* One continuous canvas: an aurora backdrop, a bolder header, a sticky tab
   bar and cards that read as "live rooms" rather than plain list tiles. */
.club4 {
  --h: 260;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.club4-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%, color-mix(in srgb, hsl(var(--h) 90% 60%) 26%, transparent), transparent 70%),
    radial-gradient(50% 45% at 92% 8%, color-mix(in srgb, hsl(calc(var(--h) + 90) 85% 62%) 22%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, #000) 0%, var(--bg) 55%);
}
.club4-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg) 14%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
}

/* header */
.club4-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px 12px;
}
.club4-title { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 200px; }
.club4-title b { display: block; font-size: 1.32em; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.club4-title i { display: block; font-style: normal; font-size: .72em; color: var(--muted); letter-spacing: .02em; }
.club4-mark {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 12px; font-size: 18px; color: #fff;
  background: linear-gradient(140deg, hsl(var(--h) 85% 62%), hsl(calc(var(--h) + 70) 80% 52%));
  box-shadow: 0 8px 22px -8px hsl(var(--h) 80% 50% / .7), inset 0 1px 0 #fff5;
}
.club4-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.club4-search {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px; height: 38px; min-width: 0; width: clamp(150px, 26vw, 260px);
  border-radius: 11px; background: color-mix(in srgb, var(--fg) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  transition: border-color .15s ease, background .15s ease;
}
.club4-search:focus-within { border-color: hsl(var(--h) 80% 60%); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.club4-search span { font-size: 16px; color: var(--muted); flex: none; }
.club4-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--fg); font: inherit; font-size: .86em;
}
.club4-new {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px;
  border: 0; border-radius: 11px; cursor: pointer; font: inherit; font-size: .84em; font-weight: 750;
  color: #06080c; background: linear-gradient(140deg, hsl(var(--h) 90% 66%), hsl(calc(var(--h) + 50) 90% 60%));
  box-shadow: 0 8px 20px -10px hsl(var(--h) 90% 55% / .9);
  transition: transform .12s ease, filter .15s ease;
}
.club4-new:hover { filter: brightness(1.08); transform: translateY(-1px); }
.club4-new:active { transform: translateY(0) scale(.98); }
.club4-new span { font-size: 15px; line-height: 1; }

/* tab bar */
.club4-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px 12px;
  position: sticky; top: 0; z-index: 4;
}
.club4-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.club4-tabs::-webkit-scrollbar { display: none; }
.club4-tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 14px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted);
  font: inherit; font-size: .8em; font-weight: 700; letter-spacing: .01em;
  transition: background .15s ease, color .15s ease;
}
.club4-tab i { font-style: normal; font-size: 1.05em; opacity: .8; }
.club4-tab:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.club4-tab.on {
  color: #fff;
  background: linear-gradient(140deg, hsl(var(--h) 80% 58%), hsl(calc(var(--h) + 55) 75% 52%));
  box-shadow: 0 6px 16px -10px hsl(var(--h) 80% 50% / .9);
}
.club4-tab b:empty { display: none; }
.club4-tab b {
  min-width: 17px; padding: 1px 5px; border-radius: 999px;
  background: var(--accent); color: #000; font-size: .86em; font-weight: 800; text-align: center;
}
.club4-count { margin-left: auto; font-size: .74em; color: var(--muted); white-space: nowrap; }

/* scrolling area */
.club4-stage:not([hidden]) { flex: none; padding: 0 18px 6px; }
.club4-grid {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 12px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  padding: 6px 18px 22px;
}

/* room card */
.club4-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 14px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--bg-2, var(--fg)) 55%, transparent);
  border: 1px solid color-mix(in srgb, hsl(var(--h) 70% 60%) 22%, color-mix(in srgb, var(--fg) 10%, transparent));
  cursor: pointer; color: var(--fg); text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  backdrop-filter: blur(8px);
}
.club4-card-glow {
  position: absolute; inset: -40% -20% auto -20%; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 20% 0%, hsl(var(--h) 90% 60% / .22), transparent 70%);
  opacity: .8; transition: opacity .2s ease;
}
.club4-card:hover { transform: translateY(-2px); border-color: hsl(var(--h) 75% 58% / .55); box-shadow: 0 18px 34px -22px hsl(var(--h) 80% 50% / .8); }
.club4-card:hover .club4-card-glow { opacity: 1; }
.club4-card.on { border-color: hsl(var(--h) 80% 60%); box-shadow: 0 0 0 1px hsl(var(--h) 80% 60% / .8) inset; }
.club4-card:focus-visible { outline: 2px solid hsl(var(--h) 90% 65%); outline-offset: 2px; }
.club4-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.club4-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  font-weight: 800; font-size: .95em; color: #fff;
  background: linear-gradient(140deg, hsl(var(--h) 80% 58%), hsl(calc(var(--h) + 80) 75% 46%));
  box-shadow: inset 0 1px 0 #fff4;
}
.club4-flags { display: inline-flex; gap: 4px; }
.club4-badge {
  display: inline-grid; place-items: center; min-height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: .66em; font-weight: 750; letter-spacing: .02em;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.club4-badge--m { color: #f5b545; border-color: #f5b54555; }
.club4-card-name { font-size: .98em; font-weight: 760; letter-spacing: -.015em; line-height: 1.25; }
.club4-card-desc {
  font-style: normal; font-size: .74em; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.1em;
}
.club4-card-people { display: flex; gap: -6px; padding-top: 2px; }
.club4-mini {
  display: grid; place-items: center; width: 22px; height: 22px; margin-right: -6px;
  border-radius: 50%; font-size: .6em; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, hsl(var(--i, 260) 75% 58%), hsl(calc(var(--i, 260) + 60) 70% 46%));
  border: 2px solid var(--bg-2, var(--bg));
}
.club4-mini--more { background: color-mix(in srgb, var(--fg) 16%, transparent); color: var(--fg); }
.club4-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 2px; padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.club4-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .7em; color: var(--muted); min-width: 0; }
.club4-dot { width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84aa; flex: none; }
.club4-dot--p { background: #f5b545; box-shadow: 0 0 8px #f5b54588; }
.club4-card-acts { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.club4-go {
  padding: 6px 12px; border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: .74em; font-weight: 750;
  color: #06080c; background: linear-gradient(140deg, hsl(var(--h) 88% 66%), hsl(calc(var(--h) + 50) 85% 58%));
  transition: filter .15s ease, transform .12s ease;
}
.club4-go:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* empty state */
.club4-empty {
  grid-column: 1 / -1; display: grid; place-items: center; gap: 6px;
  padding: 54px 20px; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--fg) 16%, transparent); border-radius: 18px;
  color: var(--muted);
}
.club4-empty b { font-size: 1.05em; color: var(--fg); }
.club4-empty span { font-size: .8em; }
.club4-empty .club4-new { margin-top: 10px; }

/* room detail ("stage") */
.club4-stage-card {
  --h: 260;
  overflow: hidden; border-radius: 18px;
  border: 1px solid color-mix(in srgb, hsl(var(--h) 75% 60%) 30%, color-mix(in srgb, var(--fg) 10%, transparent));
  background:
    radial-gradient(70% 120% at 0% 0%, hsl(var(--h) 90% 60% / .28), transparent 70%),
    color-mix(in srgb, var(--bg-2, var(--fg)) 60%, transparent);
  backdrop-filter: blur(10px);
  animation: club-stage-in .22s ease both;
}
@keyframes club-stage-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.club4-stage-hero { display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 12px; }
.club4-stage-av {
  display: grid; place-items: center; flex: none; width: 54px; height: 54px;
  border-radius: 15px; font-size: 1.35em; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, hsl(var(--h) 82% 60%), hsl(calc(var(--h) + 70) 78% 48%));
  box-shadow: 0 10px 24px -14px hsl(var(--h) 80% 50% / .9), inset 0 1px 0 #fff5;
}
.club4-stage-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.club4-stage-live {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: .64em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #4ade80;
}
.club4-stage-live i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: club-live 1.8s ease-in-out infinite; }
@keyframes club-live { 50% { opacity: .35; } }
.club4-stage-info b { font-size: 1.18em; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.club4-stage-info > i { font-style: normal; font-size: .8em; color: var(--muted); line-height: 1.45; }
.club4-stage-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.club4-chip {
  padding: 3px 9px; border-radius: 999px; font-size: .68em; font-weight: 650;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}
.club4-chip--pin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.club4-x {
  flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  background: transparent; color: var(--muted); font: inherit;
}
.club4-x:hover { color: var(--fg); border-color: var(--fg); }
.club4-stage-body { display: flex; gap: 12px; padding: 0 16px 16px; flex-wrap: wrap; }
.club4-stage-left { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.club4-stage-right {
  flex: 0 1 220px; min-width: 190px; display: flex; flex-direction: column; gap: 6px;
  padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}
.club4-cta {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px;
  border: 0; border-radius: 13px; cursor: pointer; text-align: left; font: inherit; color: #fff;
  background: linear-gradient(140deg, hsl(var(--h) 82% 56%), hsl(calc(var(--h) + 60) 78% 46%));
  box-shadow: 0 14px 28px -18px hsl(var(--h) 85% 50% / .95);
  transition: transform .12s ease, filter .15s ease;
}
.club4-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.club4-cta-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff2; font-size: 16px; flex: none; }
.club4-cta b { display: block; font-size: .86em; font-weight: 780; }
.club4-cta i { display: block; font-style: normal; font-size: .7em; opacity: .8; }
.club4-cta-arrow { margin-left: auto; font-size: 1.1em; opacity: .9; }
.club4-people-head { font-size: .66em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.club4-people { display: flex; flex-wrap: wrap; gap: 6px; }
.club4-person {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px;
  border-radius: 999px; font-size: .74em; font-weight: 600;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.club4-host {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: .72em; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, hsl(var(--i, 260) 75% 58%), hsl(calc(var(--i, 260) + 60) 70% 46%));
}
.club4-tool {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; font: inherit; font-size: .76em; font-weight: 620;
  color: var(--fg); text-align: left;
  background: transparent; border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  transition: background .15s ease, border-color .15s ease;
}
.club4-tool:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); border-color: color-mix(in srgb, var(--fg) 22%, transparent); }
.club4-tool--danger { color: #ff6b6b; }
.club4-tool--danger:hover { border-color: #ff6b6b66; background: #ff6b6b12; }
.club4-tool .club4-switch { margin-left: auto; }

/* a tiny iOS-style switch */
.club4-switch { position: relative; display: inline-flex; width: 34px; height: 19px; flex: none; cursor: pointer; }
.club4-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.club4-switch > span {
  position: absolute; inset: 0; border-radius: 999px; transition: background .18s ease;
  background: color-mix(in srgb, var(--fg) 20%, transparent);
}
.club4-switch > span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 1px 3px #0005;
}
.club4-switch input:checked + span { background: var(--accent); }
.club4-switch input:checked + span::after { transform: translateX(15px); }

/* mobile: one column, stacked stage, no side panel border */
@media (max-width: 720px) {
  .club4-head { padding: 12px 12px 8px; gap: 10px; }
  .club4-head-actions { flex: 1 1 100%; }
  .club4-search { flex: 1; width: auto; height: 36px; }
  .club4-new { height: 36px; padding: 0 12px; }
  .club4-bar { padding: 0 12px 10px; }
  .club4-stage:not([hidden]) { padding: 0 12px 6px; }
  .club4-grid { padding: 6px 12px 18px; grid-template-columns: 1fr 1fr; gap: 9px; }
  .club4-card { padding: 11px 11px 10px; border-radius: 14px; }
  .club4-card-desc { display: none; }
  .club4-card-people { display: none; }
  .club4-stage-right { flex: 1 1 100%; padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); padding-top: 10px; }
  .club4-stage-av { width: 44px; height: 44px; font-size: 1.1em; }
  .club4-count { display: none; }
}
@media (max-width: 420px) {
  .club4-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .club4-card, .club4-go, .club4-cta, .club4-new, .club4-stage-card, .club4-stage-live i { transition: none; animation: none; }
}

/* Files: breadcrumb path that doubles as a drag target (move up / to root). */
.fxa-title { flex-wrap: wrap; align-items: center; }
.fxa-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.fxa-crumb-sep { color: var(--muted); opacity: .55; font-size: .72em; flex: none; }
.fxa-crumb {
  padding: 2px 6px; border-radius: 6px; border: 1px dashed transparent;
  background: transparent; color: var(--muted); font: inherit; font-size: .74em;
  cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.fxa-crumb:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.fxa-crumb.on { color: var(--fg); font-weight: 700; }
.fxa-crumb.drop-target {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
@media (max-width: 640px) { .fxa-crumb { max-width: 90px; } }

/* Habits: footer shows the next pending reminder at a glance. */
.habit-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.habit-next { font-size: .78em; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.habit-next b { color: var(--fg); font-weight: 700; }
.habit-next i { font-style: normal; opacity: .7; }
@media (max-width: 640px) { .habit-next { flex: 1 1 100%; } }

/* ===================== Voice notes ===================== */
/* The bubble used to be unstyled inline spans: the wave, the time and the
   native <audio> all fought for space and blew the message up to full width.
   It is now a compact, fixed-size pill that matches a text bubble. */
.chat-voice {
  display: inline-flex; align-items: center; gap: 9px;
  width: 208px; max-width: 100%;
  padding: 7px 10px 7px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  vertical-align: middle;
}
.chat-voice-play {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  font-size: 11px; line-height: 1; color: #fff;
  background: var(--accent); color: var(--bg, #000);
  transition: transform .12s ease, filter .15s ease;
}
.chat-voice-play:hover { filter: brightness(1.1); }
.chat-voice-play:active { transform: scale(.93); }
.chat-voice-wave {
  flex: 1; display: flex; align-items: center; gap: 2px;
  height: 18px; min-width: 0; overflow: hidden;
}
.chat-voice-wave i {
  flex: 1 1 0; min-width: 2px; max-width: 3px;
  border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, var(--fg) 20%);
  opacity: .55; transition: opacity .15s ease;
}
.chat-voice-time {
  flex: none; font-size: .68em; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 30px; text-align: right;
}
/* The native audio element is only a decoder here, never shown. */
.chat-voice-el { display: none; }
.chat-voice .chat-dl { flex: none; width: 22px; height: 22px; opacity: .6; }
/* Playing: bars light up in sequence; played bars stay lit (--p set by JS). */
.chat-voice.playing .chat-voice-wave i { opacity: .95; }
.chat-voice.playing .chat-voice-play { background: var(--fg); color: var(--bg, #000); }
.chat-voice-wave i.on { background: var(--accent); opacity: 1; }
@media (max-width: 480px) {
  .chat-voice { width: min(200px, 62vw); gap: 7px; }
  .chat-voice-wave i:nth-child(n + 17) { display: none; }
}

/* Recording preview sheet: a slim custom player instead of a native one. */
.chat-audio {
  width: 100% !important; height: 38px !important;
  border-radius: 10px; accent-color: var(--accent);
}

/* ===================== Chirp ===================== */
/* Not a Twitter clone and not a photo grid: a single-column "wall" of whole
   frames, each one dated and counted down, on a warm gallery canvas. The app
   was previously unstyled, which is why it read as a random mix. */
.chirp-wrap { height: 100%; overflow: hidden; }
.chirp {
  --c-h: var(--accent);
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  height: 100%; min-height: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--ui, system-ui, -apple-system, "Segoe UI", sans-serif);
}
/* side rail */
.chirp-side {
  display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto;
  padding: 16px 14px;
  border-right: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.chirp-logo { display: flex; align-items: center; gap: 9px; font-size: 1.15em; letter-spacing: -.03em; }
.chirp-logo span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  font-size: 15px; color: #fff;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #7c3aed));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.chirp-nav { display: flex; flex-direction: column; gap: 2px; }
.chirp-navitem {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  font: inherit; font-size: .84em; font-weight: 650; text-align: left; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.chirp-navitem:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }
.chirp-navitem.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); font-weight: 760; }
/* Count pill on Wall / Mine so the two tabs are distinguishable at a glance. */
.chirp-navitem i { margin-left: auto; font-style: normal; font-size: .78em; font-weight: 700; color: color-mix(in srgb, var(--fg) 55%, transparent); }
.chirp-navitem.on i { color: var(--accent); }
/* "Wall vs Mine" explainer: a quiet card, not a shouting banner. */
.chirp-explain {
  margin-top: 14px; padding: 11px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  font-size: .72em; line-height: 1.5;
}
.chirp-explain b { display: block; font-size: 1.05em; margin-bottom: 7px; color: var(--fg); }
.chirp-explain dl { margin: 0 0 8px; display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: baseline; }
.chirp-explain dt { font-weight: 700; color: var(--fg); white-space: nowrap; }
.chirp-explain dd { margin: 0; color: var(--muted); }
.chirp-explain span { display: block; color: color-mix(in srgb, var(--fg) 50%, transparent); }
.chirp-sub { display: block; margin-top: 2px; font-size: .68em; color: var(--muted); font-weight: 500; }
.chirp-tagsbox, .chirp-rulebox {
  display: flex; flex-direction: column; gap: 6px; padding: 11px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.chirp-tagsbox b, .chirp-rulebox b {
  font-size: .62em; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.chirp-taglist { display: flex; flex-wrap: wrap; gap: 5px; }
.chirp-tag {
  padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: transparent; color: var(--fg); font: inherit; font-size: .72em; cursor: pointer;
}
.chirp-tag:hover { border-color: var(--accent); color: var(--accent); }
.chirp-tag.on { background: var(--accent); border-color: var(--accent); color: #05070b; font-weight: 700; }
.chirp-rulebox span { font-size: .73em; line-height: 1.5; color: var(--muted); }
.chirp-me {
  margin-top: auto; display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 12px; background: transparent; color: var(--fg); font: inherit;
  text-align: left; cursor: pointer;
}
.chirp-me span:last-child { display: flex; flex-direction: column; min-width: 0; }
.chirp-me b { font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chirp-me i { font-style: normal; font-size: .68em; color: var(--muted); }
.chirp-av {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border-radius: 50%; font-size: .78em; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, hsl(var(--h, 260) 75% 58%), hsl(calc(var(--h, 260) + 60) 70% 46%));
}
/* main column */
.chirp-main {
  display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto;
  padding: 16px clamp(12px, 4vw, 40px) 40px;
  overscroll-behavior: contain;
}
.chirp-main > * { width: 100%; max-width: 620px; margin-inline: auto; }
.chirp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chirp-top h1 { margin: 0; font-size: 1.16em; letter-spacing: -.03em; }
.chirp-countdown {
  font-size: .72em; color: var(--muted); padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.chirp-admin-note {
  padding: 7px 11px; border-radius: 9px; font-size: .74em;
  color: #c084fc; background: color-mix(in srgb, #a855f7 13%, transparent);
  border: 1px solid color-mix(in srgb, #a855f7 30%, transparent);
}
/* compose */
.chirp-compose {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.chirp-quota { display: flex; flex-direction: column; gap: 6px; }
.chirp-quota-tx { display: flex; justify-content: space-between; gap: 8px; font-size: .72em; color: var(--muted); flex-wrap: wrap; }
.chirp-quota-tx b { color: var(--fg); }
.chirp-pips { display: flex; gap: 4px; }
.chirp-pips i {
  flex: 1; height: 4px; border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  transition: background .2s ease;
}
.chirp-pips i.on { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #ec4899)); }
.chirp-drop {
  position: relative; border-radius: 13px; cursor: pointer; overflow: hidden;
  border: 1.5px dashed color-mix(in srgb, var(--fg) 16%, transparent);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  transition: border-color .15s ease, background .15s ease;
}
.chirp-drop:hover, .chirp-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.chirp-drop-in { display: grid; place-items: center; gap: 3px; padding: 26px 12px; text-align: center; color: var(--muted); }
.chirp-drop-in b { color: var(--fg); font-size: .86em; }
.chirp-drop-in small { font-size: .7em; }
.chirp-drop-ic { font-size: 22px; opacity: .55; }
.chirp-draft-img {
  display: block; width: 100%; max-height: 380px; object-fit: cover; border-radius: 12px;
}
.chirp-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chirp-filters::-webkit-scrollbar { display: none; }
.chirp-filter {
  flex: none; padding: 5px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .72em;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  background: transparent; color: var(--muted);
}
.chirp-filter.on { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }
.chirp-moods { display: flex; gap: 5px; flex-wrap: wrap; }
.chirp-mood {
  padding: 4px 9px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .71em;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: transparent; color: var(--muted);
}
.chirp-mood.on { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.chirp-textarea {
  width: 100%; min-height: 62px; max-height: 180px; resize: vertical; padding: 10px 12px;
  border-radius: 11px; border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--fg);
  font: inherit; font-size: .86em; line-height: 1.5;
}
.chirp-textarea:focus { outline: 0; border-color: var(--accent); }
.chirp-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chirp-hint { font-size: .68em; color: var(--muted); }
.chirp-compose-foot .btnl--primary { padding: 7px 18px; font-weight: 750; }
.chirp-compose-foot .btnl--primary[disabled] { opacity: .45; cursor: not-allowed; }
/* wall */
.chirp-feed { display: flex; flex-direction: column; gap: 18px; }
.chirp-card {
  border-radius: 18px; overflow: hidden;
  background: color-mix(in srgb, var(--bg-2, var(--fg)) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  animation: chirp-in .25s ease both;
}
@keyframes chirp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chirp-card-head { display: flex; align-items: center; gap: 9px; padding: 11px 13px; }
.chirp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chirp-who b { font-size: .84em; }
.chirp-who i { font-style: normal; font-size: .7em; color: var(--muted); }
.chirp-more {
  width: 28px; height: 28px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 15px;
}
.chirp-more:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.chirp-frame { position: relative; background: #07090e; margin: 0 13px; border-radius: 12px; overflow: hidden; }
.chirp-photo { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.chirp-frame.broken::after {
  content: attr(data-msg); display: grid; place-items: center; height: 130px;
  font-size: .75em; color: var(--muted);
}
.chirp-nophoto {
  display: grid; place-items: center; gap: 4px; padding: 44px 12px; text-align: center;
  background: radial-gradient(70% 100% at 50% 0%, hsl(var(--h, 260) 70% 50% / .35), transparent 70%), #0b0e15;
}
.chirp-nophoto span { font-size: 1.6em; font-weight: 800; color: #fff; }
.chirp-nophoto i { font-style: normal; font-size: .68em; color: #fff8; }
.chirp-text {
  margin: 10px 13px 0; font-size: .86em; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.chirp-text .chirp-tag { padding: 0 1px; border: 0; color: var(--accent); font-weight: 650; font-size: inherit; }
.chirp-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 13px 12px;
}
.chirp-act {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; cursor: pointer; font: inherit; font-size: .78em;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: transparent; color: var(--muted);
}
.chirp-act:hover { border-color: #f43f5e; color: #f43f5e; }
.chirp-act.on { color: #ff4d6d; border-color: #ff4d6d55; background: #ff4d6d14; font-weight: 700; }
.chirp-left { font-size: .68em; color: var(--muted); }
.chirp-empty {
  display: grid; place-items: center; gap: 5px; padding: 50px 16px; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--fg) 14%, transparent); border-radius: 16px; color: var(--muted);
}
.chirp-empty b { color: var(--fg); }
.chirp-empty span { font-size: .78em; }

/* The rail is a panel, not a strip. On a phone it slides in over the wall
   (Messages' conversation list does the same); on a desktop the ‹ button
   tucks it away and the › tab on the edge brings it back. */
.chirp-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chirp-icbtn {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border-radius: 9px; cursor: pointer; font: inherit; font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: transparent; color: var(--muted);
}
.chirp-icbtn:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 24%, transparent); }
.chirp-side-x, .chirp-menu, .chirp-reopen, .chirp-overlay, .chirp-bar { display: none; }
.chirp.side-closed { grid-template-columns: minmax(0, 1fr); }
.chirp.side-closed .chirp-side { display: none; }
.chirp.side-closed .chirp-menu,
.chirp.side-closed .chirp-reopen { display: grid; }
.chirp-reopen {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 20px; height: 58px; place-items: center; padding: 0;
  border: 1px solid var(--line); border-left: none; border-radius: 0 11px 11px 0;
  background: color-mix(in srgb, var(--bg-2, var(--bg)) 82%, transparent);
  color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; opacity: .6;
  transition: width .16s ease, opacity .16s ease;
}
.chirp-reopen:hover { width: 26px; opacity: 1; }
.chirp-menu { width: 34px; height: 34px; align-self: flex-start; margin-top: 2px; }

/* Phone: rail over the wall, dimmed backdrop, one tap anywhere to dismiss. */
@media (max-width: 720px) {
  .chirp { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); position: relative; }
  .chirp-side,
  #win-chirp .chirp-side {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 30;
    width: min(296px, 86vw); height: auto; max-height: none;
    overflow-x: hidden; overflow-y: auto;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-right: 1px solid color-mix(in srgb, var(--fg) 10%, transparent) !important;
    border-bottom: 0 !important;
    box-shadow: 24px 0 50px -20px #000c;
    transition: transform .25s ease;
  }
  .chirp.side-closed .chirp-side,
  #win-chirp .chirp.side-closed .chirp-side { display: flex !important; transform: translateX(-104%); }
  .chirp-side .chirp-logo { flex: none; }
  .chirp-side-x { display: grid; width: 32px; height: 32px; font-size: 18px; }
  .chirp-nav { flex-direction: column !important; gap: 2px !important; margin-top: 6px; }
  .chirp-navitem { width: 100% !important; padding: 11px 12px !important; border-radius: 10px !important; white-space: nowrap; }
  .chirp-tagsbox, .chirp-rulebox { display: flex !important; }
  .chirp-tip { display: block; }
  .chirp-me { margin: auto 0 0 !important; width: 100% !important; padding: 8px !important; border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent) !important; }
  .chirp-me span:last-child { display: flex !important; }
  .chirp-overlay {
    display: block; position: absolute; inset: 0; z-index: 25; border: 0; padding: 0;
    background: rgba(6, 9, 16, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .chirp.side-closed .chirp-overlay { display: none; }
  /* the big hero eats a whole screen on a phone; a slim sticky bar replaces it */
  .chirp-hero { display: none !important; }
  .chirp-bar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 8;
    margin: -10px -10px 0; padding: 9px 12px;
    background: color-mix(in srgb, var(--bg, #0b0f18) 92%, transparent);
    backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  }
  .chirp-bar-menu, .chirp-bar-add {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px;
    border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 10px;
    background: transparent; color: var(--fg); font: inherit; font-size: 15px; cursor: pointer;
  }
  .chirp-bar b { flex: 1; min-width: 0; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chirp-bar span {
    flex: none; font-size: .72em; font-weight: 750; color: var(--muted);
    padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .chirp-bar-add { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
  .chirp-main { padding: 10px 10px calc(30px + env(safe-area-inset-bottom, 0px)) !important; }
  .chirp-draft-img { max-height: 300px; }
  .chirp-photo { max-height: 420px; }
  .chirp-hint { display: none; }
}

/* ===================== Market: community-only layout ===================== */
.mk-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.mk-subhead h2 { margin: 0; }
.mk-subtabs {
  display: inline-flex; gap: 3px; padding: 3px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.mk-subtab {
  padding: 5px 14px; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .74em; font-weight: 700; color: var(--muted); background: transparent;
  transition: background .15s ease, color .15s ease;
}
.mk-subtab:hover { color: var(--fg); }
.mk-subtab.on { background: var(--accent); color: #05070b; }
.mk-subnote { margin: 2px 0 14px; font-size: .74em; line-height: 1.5; color: var(--muted); }

/* Empty-market welcome: explains the philosophy instead of showing fake items. */
.mk-welcome {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px; margin-bottom: 16px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background:
    radial-gradient(80% 140% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    color-mix(in srgb, var(--fg) 4%, transparent);
}
.mk-welcome-art {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px;
  border-radius: 16px; font-size: 24px; color: #fff;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #7c3aed));
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--accent) 80%, transparent);
}
.mk-welcome > div:last-child { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.mk-welcome b { font-size: 1.08em; letter-spacing: -.02em; }
.mk-welcome span { font-size: .78em; line-height: 1.55; color: var(--muted); }
.mk-welcome .btnl { align-self: flex-start; margin-top: 4px; }

@media (max-width: 720px) {
  .mk-welcome { padding: 14px; gap: 12px; }
  .mk-welcome-art { width: 44px; height: 44px; font-size: 19px; border-radius: 13px; }
  .mk-subhead { gap: 8px; }
  .mk-subtab { padding: 5px 11px; }
}

/* ===================== Market: community-only catalogue ===================== */
/* New/Top live INSIDE Community; Discover just windows them. */
.mk-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mk-subhead h2 { margin: 0; }
.mk-subtabs {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}
.mk-subtab {
  padding: 5px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: .76em; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.mk-subtab:hover { color: var(--fg); }
.mk-subtab.on { background: var(--accent); color: #07090e; }
.mk-subnote { margin: 6px 0 12px; font-size: .74em; color: var(--muted); line-height: 1.5; }

/* Empty market: a single, friendly invitation instead of a blank page. */
.mk-welcome {
  display: flex; align-items: center; gap: 16px; padding: 22px 20px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background:
    radial-gradient(80% 130% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    color-mix(in srgb, var(--fg) 4%, transparent);
}
.mk-welcome-art {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  font-size: 24px; color: #08090d;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #a855f7));
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--accent) 90%, transparent);
}
.mk-welcome > div:last-child { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mk-welcome b { font-size: 1.05em; }
.mk-welcome span { font-size: .78em; color: var(--muted); line-height: 1.55; }
.mk-welcome .btnl { align-self: flex-start; margin-top: 4px; }
@media (max-width: 600px) {
  .mk-welcome { flex-direction: column; align-items: flex-start; }
}

/* Cards always show who published them and when. */
.as-tile-meta, .as-tile-by {
  display: flex; align-items: center; gap: 6px; font-size: .66em; color: var(--muted);
  margin-top: 3px; min-width: 0;
}
.as-tile-by b { color: var(--fg); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-tile-dl { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; white-space: nowrap; }

/* Market card meta: publisher and date on one line, downloads pushed right. */
.as-tile-by { display: flex; align-items: baseline; gap: 4px; width: 100%; }
.as-tile-by > b { min-width: 0; }
.as-by-date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Category chips need breathing room from the heading above them. */
.as-cats { margin: 14px 0 6px; flex-wrap: wrap; }

/* Category chips: they had no styling at all, so they ran together as one
   line of text ("+ All Look & feel Sound"). Now they are real chips. */
.as-cats { display: flex; align-items: center; gap: 6px; margin: 16px 0 4px; flex-wrap: wrap; }
.as-cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .76em; font-weight: 650; white-space: nowrap;
  color: var(--muted);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.as-cat:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 26%, transparent); }
.as-cat.on {
  background: var(--accent); border-color: var(--accent); color: #07090e; font-weight: 800;
}
.as-cats + .as-sec { margin-top: 12px; }

/* 2048: merge pop + game-over overlay (undo/moves live in the header). */
.g2048-wrap { position: relative; }
.g2048-cell.pop { animation: g2048-pop .26s ease; }
@keyframes g2048-pop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
.g2048-moves { font-size: .72em; color: var(--muted); }
.g2048-moves b { color: var(--fg); }
.game-over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px); text-align: center; padding: 18px;
}
.game-over b { font-size: 1.1em; }
.game-over span { font-size: .8em; color: var(--muted); }

/* Minesweeper: counters, flag mode, number colours, win state. */
.mines-count { font-size: .78em; color: var(--muted); }
.mines-count b { color: var(--fg); font-variant-numeric: tabular-nums; }
.mines-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mines-flagbtn {
  padding: 5px 12px; border-radius: 9px; cursor: pointer; font: inherit; font-size: .74em; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  background: transparent; color: var(--muted);
}
.mines-flagbtn:hover { color: var(--fg); }
.mines-flagbtn.on { background: #ef4444; border-color: #ef4444; color: #fff; }
.mine-cell.n1 { color: #60a5fa; } .mine-cell.n2 { color: #4ade80; } .mine-cell.n3 { color: #f87171; }
.mine-cell.n4 { color: #c084fc; } .mine-cell.n5 { color: #fbbf24; } .mine-cell.n6 { color: #22d3ee; }
.mine-cell.n7 { color: #f472b6; } .mine-cell.n8 { color: #e5e7eb; }
.mine-cell.flag { color: #fbbf24; }
.mine-cell.boom { background: #ef444433 !important; }
.mines-board.won .mine-cell.open { box-shadow: inset 0 0 0 1px #22c55e55; }

/* 2048: game-over card tucked inside the board, and merge pop. */
.g2048-cell.pop { animation: cellPop .22s ease-out; }
@keyframes cellPop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
.g2048-hold { position: relative; display: grid; place-items: center; }
.g2048-hold .game-over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(3px); text-align: center; padding: 18px;
}
.g2048-hold .game-over[hidden] { display: none; }
.g2048-hold .game-over b { font-size: 1.15em; color: var(--accent); }
.g2048-hold .game-over span { font-size: .78em; color: var(--muted); }

/* Minesweeper: counters + flag mode + first-click safety. */
.mines-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(380px, 86vw); margin-bottom: 8px; }
.mines-count { font-size: .76em; color: var(--muted); }
.mines-count b { color: var(--fg); font-variant-numeric: tabular-nums; }
.mines-flagbtn {
  padding: 5px 11px; border-radius: 9px; cursor: pointer; font: inherit; font-size: .74em; font-weight: 700;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.mines-flagbtn.on { background: #ef4444; border-color: #ef4444; color: #fff; }
.mine-cell.n1 { color: #60a5fa; } .mine-cell.n2 { color: #4ade80; } .mine-cell.n3 { color: #f87171; }
.mine-cell.n4 { color: #c084fc; } .mine-cell.n5 { color: #fbbf24; } .mine-cell.n6 { color: #22d3ee; }
.mine-cell.n7 { color: #f472b6; } .mine-cell.n8 { color: #e5e7eb; }
.mine-cell { font-weight: 800; }
.mine-cell.boom { background: color-mix(in srgb, #ef4444 30%, var(--chip)); }
.mines-board.won .mine-cell { border-color: color-mix(in srgb, #22c55e 50%, var(--line)); }

/* 2048: merge pop, moves counter, game-over overlay. */
.g2048-wrap { position: relative; }
.g2048-cell.pop { animation: g2048-pop .26s ease; }
@keyframes g2048-pop { 45% { transform: scale(1.16); } }
.g2048-moves { font-size: .72em; color: var(--muted); }
.g2048-moves b { color: var(--fg); }
.game-over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px); text-align: center; padding: 18px;
}
.game-over b { font-size: 1.1em; }
.game-over span { font-size: .8em; color: var(--muted); }

/* Minesweeper: HUD and flag mode. */
.mines-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: .8em; color: var(--muted); }
.mines-stat b { color: var(--fg); font-variant-numeric: tabular-nums; }
.mines-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mines-acts .btnl.on { background: #ef4444; border-color: #ef4444; color: #fff; }
.mine-cell.boom { background: color-mix(in srgb, #ef4444 28%, var(--chip)); }

/* Market on phones: the rail turns into a single scrollable strip at the very
   top. It used to wrap under the search box and leave a tall empty band. */
@media (max-width: 780px) {
  .appstore { display: flex; flex-direction: column; }
  .as-rail {
    order: -1;
    position: sticky; top: 0; z-index: 5;
    flex-direction: row; align-items: center;
    padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .as-rail::-webkit-scrollbar { display: none; }
  .as-brand, .as-rail-foot { display: none; }
  .as-nav { flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow: visible; }
  .as-navitem { white-space: nowrap; flex: none; padding: 7px 11px; font-size: .72em; }
  .as-main { min-height: 0; flex: 1; }
  .as-top { padding: 8px 10px 2px; border-bottom: 0; }
  .as-body { padding: 8px 12px 24px; }
  .as-hero { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .as-hero-art { width: 100%; height: 120px; }
  .as-tile-art { height: 62px; }
  .mk-welcome { padding: 14px; gap: 12px; }
  .mk-welcome-art { width: 44px; height: 44px; font-size: 19px; border-radius: 13px; }
}

/* Market on a phone: the rail becomes a scrollable tab strip. Previously it
   kept flex-direction row but no wrapping/scroll, so the last tab ("Publish")
   was clipped and the tall empty rail pushed the search box down. */
@media (max-width: 780px) {
  .as-rail {
    flex: 0 0 auto;
    display: flex; flex-direction: row; align-items: center;
    gap: 6px; padding: 8px 10px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .as-rail::-webkit-scrollbar { display: none; }
  .as-brand, .as-rail-foot, .as-acct { display: none; }
  .as-nav { flex: 0 0 auto; flex-direction: row; gap: 4px; overflow: visible; }
  .as-navitem {
    flex: 0 0 auto; width: auto; padding: 7px 12px; white-space: nowrap;
    font-size: .78em;
  }
  .as-main { min-height: 0; }
  .as-top { position: sticky; top: 0; z-index: 3; background: var(--bg); }
  .as-body { padding: 12px 12px 24px; }
}

/* Market: when the rail scrolls on phones it must not reserve layout height
   for the account row that is hidden there. */
@media (max-width: 780px) {
  .as-rail { align-items: stretch; }
  .as-nav { align-items: center; }
  .as-navitem > span { margin-right: 2px; }
}

/* ===================== Club: 18+ rooms ===================== */
/* An 18+ room is never hidden: it is labelled, and only the door is locked. */
.club4-badge--m {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  border-color: color-mix(in srgb, #f59e0b 46%, transparent);
  color: #fbbf24; font-weight: 800; letter-spacing: 0;
}
.club4-badge--lock { color: #fbbf24; border-color: #fbbf2455; }
.club4-card:has(.club4-badge--lock) .club4-card-name::after {
  content: ""; display: block;
}

/* ===================== Voice room: listeners ===================== */
.chat-vr-ways { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.chat-vr-ways .btnl { white-space: nowrap; }

.chat-vr-person--listen { opacity: .82; }
.chat-vr-person--listen .chat-vr-ring { box-shadow: 0 0 0 2px color-mix(in srgb, #38bdf8 40%, transparent); }
.chat-vr-person--listen i { color: #38bdf8; }

/* Reaction bar: six emoji, disabled while the cooldown runs. */
.chat-vr-reactbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 7px 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  position: relative;
}
#chat-vr-react-hint {
  font-size: .68em; color: var(--muted); min-width: 62px;
  font-variant-numeric: tabular-nums;
}
.chat-vr-react-btn {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  font-size: 17px; line-height: 1; transition: transform .12s ease, background .15s ease;
}
.chat-vr-react-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 9%, transparent); transform: translateY(-2px) scale(1.08); }
.chat-vr-react-btn:active:not(:disabled) { transform: scale(.94); }
.chat-vr-react-btn:disabled { opacity: .38; cursor: not-allowed; }

/* A reaction floats up from the stage and fades away. */
.chat-vr-react {
  position: absolute; bottom: 12px; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  animation: vrFloat 3.2s ease-out forwards;
}
.chat-vr-react b { font-size: 26px; line-height: 1; filter: drop-shadow(0 3px 8px #0008); }
.chat-vr-react i { font-style: normal; font-size: .6em; color: #fff; opacity: .8; text-shadow: 0 1px 3px #000; }
@keyframes vrFloat {
  0% { transform: translateY(14px) scale(.7); opacity: 0; }
  15% { transform: translateY(0) scale(1.06); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-120px) scale(1); opacity: 0; }
}
@media (max-width: 640px) {
  .chat-vr-ways { width: 100%; }
  .chat-vr-ways .btnl { flex: 1; }
}

/* ============================================================================
   BUNDLE STUDIO (Design studio) — app.js #bundle-studio
   Bu blok eksikti: stüdyo açılıyor ama hiçbir düzeni yoktu (çalışmıyor gibi).
   ============================================================================ */
.bstudio-layer {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  animation: bstudio-in .18s ease-out;
}
@keyframes bstudio-in { from { opacity: 0 } to { opacity: 1 } }

.bstudio {
  width: min(1080px, 96vw);
  height: min(760px, 92vh);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .55);
}

.bs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.bs-head b { display: block; font-size: 1.02em; letter-spacing: .01em; }
.bs-head span { display: block; margin-top: 3px; font-size: .78em; color: var(--muted); }
.bs-x {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.bs-x:hover { border-color: var(--accent); color: var(--accent); }

/* form | önizleme */
.bs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  min-height: 0;
}
.bs-form {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--line);
}
.bs-form::-webkit-scrollbar { width: 8px; }
.bs-form::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; }

.bs-field { display: flex; flex-direction: column; gap: 6px; }
.bs-field > span { font-size: .76em; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bs-field input[type="text"],
.bs-field input:not([type]),
.bs-field textarea,
.bs-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  font-size: .9em;
}
.bs-field input:focus, .bs-field textarea:focus, .bs-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.bs-field textarea { min-height: 70px; resize: vertical; }
.bs-field--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* gruplar */
.bs-group {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bs-group-head {
  font-size: .78em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

/* renk seçiciler */
.bs-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bs-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-3);
  font-size: .85em;
}
.bs-color input[type="color"] {
  width: 38px; height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

/* duvar kağıdı seçenekleri */
.bs-walls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bs-wall {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.bs-wall:hover { transform: translateY(-2px); }
.bs-wall.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ikon modu + ses paketi düğmeleri */
.bs-modes, .bs-sounds { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-mode, .bs-sound {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font: inherit;
  font-size: .8em;
  cursor: pointer;
  transition: all .15s;
}
.bs-mode:hover, .bs-sound:hover { border-color: var(--accent); }
.bs-mode.on, .bs-sound.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

/* canlı önizleme sütunu */
.bs-preview {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-2);
}
.bs-preview-head {
  font-size: .76em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.bs-mock {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  transition: background .3s ease;
}
.bs-mock-bar { display: flex; gap: 5px; margin-bottom: 10px; }
.bs-mock-bar span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.bs-mock-win {
  height: calc(100% - 24px);
  border-radius: 10px;
  border: 1px solid;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background .3s ease, border-color .3s ease;
}
.bs-mock-title { font-size: .82em; font-weight: 700; letter-spacing: .02em; }
.bs-mock-body { display: flex; flex-direction: column; gap: 8px; font-size: .78em; line-height: 1.5; }
.bs-mock-body p { margin: 0; opacity: .92; }
.bs-mock-icons { display: flex; gap: 8px; margin-top: auto; }
.bs-mock-ic {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  font-size: .8em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: background .25s ease;
}
.bs-mock-ic svg { width: 17px; height: 17px; }
.bs-mock-btn {
  align-self: flex-start;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: .9em;
  font-weight: 700;
  cursor: default;
  transition: background .25s ease, color .25s ease;
}

.bs-count { font-size: .78em; color: var(--muted); min-height: 1.2em; }
.bs-actions { display: flex; gap: 8px; margin-top: auto; }
.bs-actions .btnl { flex: 1; justify-content: center; }

/* dar ekran: tek sütun, önizleme üstte */
@media (max-width: 900px) {
  .bstudio-layer { padding: 8px; }
  .bstudio { height: 94vh; border-radius: 14px; }
  .bs-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .bs-preview { order: -1; border-bottom: 1px solid var(--line); max-height: 42vh; }
  .bs-form { border-right: none; }
  .bs-colors { grid-template-columns: 1fr; }
}

/* Chirp: sürekli duran büyük açıklama kutuları yerine ince ipuçları */
.chirp-tip {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
  background: transparent;
  font-size: .72em;
  line-height: 1.4;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
  cursor: help;
  user-select: none;
}
.chirp-tip:hover { color: var(--fg); border-color: var(--line); }

/* ============================================================================
   AYARLAR — içerik alanı taşması (menünün "üstüne uçma" sorunu)
   Flex/grid çocuklarına min-height:0 vermezsek içerik kendi boyutunu dayatır,
   scroll yerine pencerenin dışına taşar. Ayrıca sabit nav + kaydırılan panel.
   ============================================================================ */
.set-shell {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.set-nav {
  flex: 0 0 150px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.set-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-padding-top: 12px;
  scroll-behavior: smooth;
}
/* Uzun açılır menüler (select) panelden taşmasın */
.set-panel select, .set-panel .set-input { max-width: 100%; }
.set-panel .set-sub { overflow: hidden; }
/* Dil listesi gibi uzun seçim listeleri panelin içinde kaydırılır */
.set-panel .lang-list, .set-panel .set-list {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Pencere gövdesi her zaman kendi scroll'unu yönetsin */
#win-settings .win__body {
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================================
   MARKET — Publish formu (adım çubuğu, canlı kapak, doğrulama)
   ============================================================================ */
.pub-layer { position: fixed; inset: 0; z-index: 9400; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #000 60%, transparent); backdrop-filter: blur(6px); }
.pub-card {
  width: min(1000px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.pub-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 10px; }
.pub-ic {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; font-size: 1.1em;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--bg)));
  color: var(--bg);
}
.pub-head-tx { flex: 1; min-width: 0; }
.pub-head-tx b { display: block; font-size: 1.05em; }
.pub-head-tx span { display: block; font-size: .78em; color: var(--muted); margin-top: 2px; }
.pub-x { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); cursor: pointer; }

/* adım çubuğu */
.pub-steps {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 8px 20px 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.pub-steps li {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-size: .76em; color: var(--muted);
  background: var(--bg-2); border: 1px solid transparent;
  white-space: nowrap;
}
.pub-steps li b {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-3); color: var(--muted); font-size: .85em;
}
.pub-steps li.on { color: var(--fg); border-color: var(--line); }
.pub-steps li.on b { background: var(--accent); color: var(--bg); }
.pub-steps li.done b { background: var(--accent); color: var(--bg); }

/* içerik: form + canlı kapak */
.pub-body { min-height: 0; overflow-y: auto; padding: 16px 20px 8px; }
.pub-main { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 18px; align-items: start; }
.pub-left { min-width: 0; }
.pub-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.pub-side-head { font-size: .72em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.pub-cover {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
}
.pub-cover-art { aspect-ratio: 16 / 10; background-size: cover; background-position: center; transition: background .25s ease; }
.pub-cover-info { padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.pub-cover-info b { font-size: .88em; }
.pub-cover-info span { font-size: .72em; color: var(--muted); }

/* doğrulama listesi */
.pub-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pub-check li {
  position: relative; padding-left: 20px;
  font-size: .75em; color: var(--muted); line-height: 1.4;
}
.pub-check li::before {
  content: "○"; position: absolute; left: 4px; top: 0;
  color: var(--muted);
}
.pub-check li.ok { color: var(--fg); }
.pub-check li.ok::before { content: "✓"; color: var(--accent); font-weight: 700; }

.pub-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg-2); }
.pub-foot-sp { flex: 1; }
.pub-foot .btnl[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 820px) {
  .pub-main { grid-template-columns: 1fr; }
  .pub-side { position: static; order: -1; }
  .pub-cover-art { aspect-ratio: 21 / 9; }
}

/* --- Bundle parça listesi (tek tek alma) ---------------------------------- */
.as-d-bundle-wrap { margin: 14px 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.as-d-bundle-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.as-d-bundle-head b { font-size: .9em; }
.as-d-bundle-head span { flex: 1; font-size: .75em; color: var(--muted); }
.as-d-all { font-size: .78em; }
.as-d-brow--act { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.as-d-brow--act:last-child { border-bottom: none; }
.as-d-brow-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--bg-3); font-size: .9em; }
.as-d-brow-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.as-d-brow-name b { font-size: .85em; }
.as-d-brow-name i { font-style: normal; font-size: .72em; color: var(--muted); }
.as-d-brow-swatch { width: 46px; height: 24px; border-radius: 6px; border: 1px solid var(--line); }
.as-d-brow-get, .as-d-brow-mini {
  font: inherit; font-size: .75em; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg);
  transition: all .15s;
}
.as-d-brow-mini { padding: 5px 9px; }
.as-d-brow-get:hover, .as-d-brow-mini:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ============================================================================
   MARKET — Editör seçkileri (Discover)
   ============================================================================ */
.as-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.as-pick {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.as-pick:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.as-pick-head {
  position: relative;
  padding: 16px 14px 14px;
  color: #fff;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
}
.as-pick-head::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
}
.as-pick-head > * { position: relative; z-index: 1; }
.as-pick-kicker { font-size: .62em; text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.as-pick-head h3 { margin: 0; font-size: 1.02em; letter-spacing: -.01em; }
.as-pick-head p { margin: 0; font-size: .72em; opacity: .85; }
.as-pick-n {
  position: absolute !important; top: 10px; right: 10px;
  font-size: .62em; padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
}
.as-pick-body { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.as-pick-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  border: none; border-radius: 9px;
  background: none; color: var(--fg);
  font: inherit; font-size: .8em;
  cursor: pointer; text-align: left;
  transition: background .13s;
}
.as-pick-item:hover { background: var(--bg-3); }
.as-pick-art { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); }
.as-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pick-kind { font-size: .8em; color: var(--muted); }
@media (max-width: 720px) { .as-picks { grid-template-columns: 1fr; } }

/* --- Publish giriş kartları (iki yol) ------------------------------------- */
.as-pub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.as-pub-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg); font: inherit; text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.as-pub-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.as-pub-card-ic {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 11px; font-size: 1.05em;
  background: var(--bg-3); color: var(--accent);
}
.as-pub-card--studio .as-pub-card-ic { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--bg))); color: var(--bg); }
.as-pub-card b { font-size: .95em; }
.as-pub-card span:not(.as-pub-card-ic) { font-size: .78em; line-height: 1.5; color: var(--muted); }
.as-pub-card i { font-style: normal; font-size: .78em; color: var(--accent); margin-top: 2px; }

/* ============================================================================
   SAYDAM ÜST BAR (Ayarlar → Görünüm → "saydam üst bar")
   JS `body.mb-transparent` sınıfını ekliyordu ama CSS'te hiç kural YOKTU →
   bar saydam seçilince bozuluyordu (arka planı kayboluyor, yazı okunmuyordu).
   Cam efekti: arka plana göre okunabilirliği koruyan katmanlı karışım.
   ============================================================================ */
body.mb-transparent #menubar {
  background: color-mix(in srgb, var(--bg, #0b1020) 34%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--fg, #fff) 14%, transparent);
  /* Cam üstünde okunabilirlik için hafif gölge */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  color: var(--fg, #fff);
}
body.mb-transparent #menubar .mb-logo,
body.mb-transparent #menubar .mb-clock,
body.mb-transparent #menubar button { color: var(--fg, #fff); }
body.mb-transparent #menubar .mb-logo:hover,
body.mb-transparent #menubar button:hover {
  background: color-mix(in srgb, var(--fg, #fff) 16%, transparent);
}
/* Açık tema (paper/sand): koyu yazı, aydınlık cam */
[data-mode="light"] body.mb-transparent #menubar,
body.mb-transparent[data-mode="light"] #menubar {
  background: color-mix(in srgb, #fff 46%, transparent);
  border-bottom: 1px solid rgba(0, 0, 0, .10);
  color: var(--ink, #1d1b16);
  text-shadow: none;
}
[data-mode="light"] body.mb-transparent #menubar .mb-logo,
[data-mode="light"] body.mb-transparent #menubar .mb-clock,
body.mb-transparent[data-mode="light"] #menubar .mb-logo,
body.mb-transparent[data-mode="light"] #menubar .mb-clock { color: var(--ink, #1d1b16); }

/* Saydamlık kapanınca eski görünüme dönüş yumuşak olsun */
#menubar { transition: background .22s ease, border-color .22s ease; }

/* ============================================================================
   MARKET — indirme animasyonu (Apple App Store hissi)
   ============================================================================ */
.is-downloading {
  position: relative;
  min-width: 74px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.dl-ring { display: grid; place-items: center; width: 26px; height: 26px; }
.dl-ring svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.dl-ring-bg { fill: none; stroke: color-mix(in srgb, var(--fg) 18%, transparent); stroke-width: 3; }
.dl-ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .08s linear;
}
.dl-pct {
  font-size: .7em; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700;
  min-width: 30px; text-align: left;
}
.dl-done {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-size: .8em; font-weight: 800;
}
/* Yerleştirme "pop": ikon yerine otururken hafif zıplama */
.is-installed-pop { animation: dl-pop .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes dl-pop {
  0%   { transform: scale(.86); }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/* Azaltılmış hareket tercihine saygı */
@media (prefers-reduced-motion: reduce) {
  .dl-ring-fg { transition: none; }
  .is-installed-pop { animation: none; }
}

/* ============================================================================
   MARKET — ikon paketi önizlemesi (kart içinde 4 gerçek ikon)
   ============================================================================ */
.as-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: 60%;
  max-width: 68px;
  margin: 0 auto;
}
.as-icon-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.as-icon-cell svg { width: 14px; height: 14px; }
.as-tile-art .as-icon-grid { width: 70%; max-width: 78px; }

/* ============================================================================
   GATE (bakım/kuyruk) — bağımsız Hakkında paneli
   ============================================================================ */
.gate-about {
  position: fixed; inset: 0; z-index: 12000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  animation: ga-in .18s ease-out;
}
@keyframes ga-in { from { opacity: 0 } to { opacity: 1 } }
.gate-about-card {
  width: min(620px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid var(--line, #233);
  background: var(--bg, #0b1020);
  color: var(--fg, #eef);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.gate-about-card > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line, #233);
}
.gate-about-card > header b { font-size: 1.1em; letter-spacing: -.01em; }
.gate-about-card > header b span { color: var(--accent, #7dd3fc); }
.gate-about-x {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line, #233); background: transparent;
  color: inherit; cursor: pointer; font: inherit;
}
.gate-about-x:hover { border-color: var(--accent, #7dd3fc); }
.gate-about-body { padding: 18px 20px 22px; }
.gate-about-body h2 { margin: 0 0 8px; font-size: 1.35em; letter-spacing: -.02em; }
.gate-about-body p { margin: 0 0 14px; font-size: .88em; line-height: 1.65; color: color-mix(in srgb, var(--fg, #eef) 72%, transparent); }
.gate-about-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  list-style: none; margin: 0 0 16px; padding: 0;
}
.gate-about-stats li {
  padding: 10px; border-radius: 11px; text-align: center;
  background: color-mix(in srgb, var(--fg, #eef) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg, #eef) 10%, transparent);
}
.gate-about-stats b { display: block; font-size: 1.25em; color: var(--accent, #7dd3fc); }
.gate-about-stats span { font-size: .7em; color: color-mix(in srgb, var(--fg, #eef) 60%, transparent); }
.gate-about-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gate-about-note { font-size: .74em !important; opacity: .65; margin: 0 !important; }

/* ============================================================================
   GERÇEK ÖNİZLEMELER — masaüstü sahnesi, ikon ızgarası, ses dalgası
   ============================================================================ */
.shot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,#1f2937,#475569);
}
.shot-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 9%;
  display: flex; align-items: center; gap: 3px; padding: 0 5%;
  opacity: .9;
}
.shot-bar i { display: block; height: 34%; aspect-ratio: 3/1; border-radius: 2px; opacity: .55; }
.shot-dock {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.shot-ic {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 5px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.shot-ic svg { width: 11px; height: 11px; }
.shot-ic--big { width: min(44px, 100%); aspect-ratio: 1; height: auto; border-radius: 11px; }
.shot-ic--big svg { width: 64%; height: 64%; }
.shot-win {
  position: absolute; left: 9%; top: 21%; width: 46%; height: 40%;
  border-radius: 7px; border: 1px solid;
  padding: 6% 6% 0;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.shot-win-title { font-size: .62em; font-weight: 700; letter-spacing: .01em; }
.shot-win-line { display: block; height: 3px; border-radius: 2px; opacity: .32; width: 86%; }
.shot-win-line--short { width: 54%; opacity: .2; }
.shot-win-btn {
  position: absolute; left: 6%; bottom: 10%;
  width: 34%; height: 16%; border-radius: 4px;
}
.shot--icons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; place-items: center;
  padding: 12px;
  background: linear-gradient(150deg,#111827,#1f2937);
}
.shot--sound {
  display: flex; align-items: center; justify-content: center;
  gap: 2px; padding: 8%;
  background: linear-gradient(135deg,#1e1b4b,#4c1d95,#a5b4fc);
}
.shot--sound i { display: block; width: 2.5%; min-width: 2px; border-radius: 2px; background: rgba(255,255,255,.82); }
.shot-sound-play {
  position: absolute; right: 6%; bottom: 10%;
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #1e1b4b;
  font-size: .55em; padding-left: 1px;
}
.shot-app { display: grid; place-items: center; width: 100%; height: 100%; }

/* --- Editör seçkisi kartları --- */
.ep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ep {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ep:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.ep-hero {
  position: relative; display: block; width: 100%; aspect-ratio: 16/10;
  padding: 0; border: none; background: none; cursor: pointer; overflow: hidden;
}
.ep-hero .shot { border-radius: 0; min-height: 0; }
.ep-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.82));
}
.ep-hero-tx {
  position: absolute; left: 12px; bottom: 10px; right: 12px;
  display: flex; flex-direction: column; gap: 2px; text-align: left; color: #fff;
}
.ep-kicker { font-size: .58em; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.ep-hero-tx b { font-size: 1em; letter-spacing: -.01em; }
.ep-hero-tx i { font-style: normal; font-size: .7em; opacity: .82; }
.ep-apply {
  position: absolute; right: 10px; top: 10px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: #111;
  font-size: .62em; font-weight: 700;
  opacity: 0; transform: translateY(-4px);
  transition: all .18s ease;
}
.ep-hero:hover .ep-apply { opacity: 1; transform: translateY(0); }
.ep-strip { display: flex; gap: 6px; padding: 8px; overflow-x: auto; }
.ep-item {
  flex: 0 0 72px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--fg); text-align: left;
}
.ep-item .shot { aspect-ratio: 1; min-height: 0; }
.ep-item:hover .shot { outline: 2px solid var(--accent); outline-offset: 1px; }
.ep-item-name { font-size: .62em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-kind { font-size: .55em; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Detay sayfası gerçek önizleme */
.as-d-preview {
  margin: 14px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  max-height: 340px;
  background: var(--bg-2);
}
.as-d-preview .shot { min-height: 100%; border-radius: 0; }
.as-d-cta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.as-d-listen { white-space: nowrap; }

/* --- İkon paketi seçici (Ayarlar → Görünüm) --- */
.set-block-sub { display: block; font-size: .68em; font-weight: 400; color: var(--muted); margin-top: 2px; }
.iconpick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.ip-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg); font: inherit; cursor: pointer;
  transition: all .15s ease;
}
.ip-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.ip-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.ip-card b { font-size: .72em; font-weight: 600; }
.ip-prev { display: flex; gap: 4px; }
.ip-ic {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 5px; color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.ip-ic svg { width: 11px; height: 11px; }
.ip-tick {
  position: absolute; top: 5px; right: 6px;
  font-size: .7em; color: var(--accent); font-weight: 800;
}
.ip-hue-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ip-hue-row .lbl { flex: 0 0 auto; font-size: .8em; color: var(--muted); }
.ip-hue-row input[type="range"] { flex: 1; }
.ip-hue-row b { min-width: 44px; text-align: right; font-size: .78em; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ============================================================================
   İNDİRME — sade, Apple benzeri ilerleme çubuğu (halka sürümü kaldırıldı)
   ============================================================================ */
.is-downloading {
  display: inline-flex !important;
  align-items: center;
  min-width: 128px;
  pointer-events: none;
  padding: 5px 10px !important;
}
.dl-wrap { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.dl-bar {
  display: block; width: 100%; height: 4px; border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 16%, transparent);
  overflow: hidden;
}
.dl-fill {
  display: block; height: 100%; width: 0%;
  border-radius: 99px;
  background: var(--accent);
  transition: width .1s linear;
}
.dl-meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .58em; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.dl-pct { color: var(--accent); font-weight: 700; }
.dl-size { opacity: .8; }
.dl-ok {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-size: .62em; font-weight: 800; margin-right: 5px;
}
.dl-ok-tx { font-size: .78em; font-weight: 600; }
.is-installed-pop { animation: dl-pop .3s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) {
  .dl-fill { transition: none; }
  .is-installed-pop { animation: none; }
}

/* --- Market kartlarında gerçek ekran görüntüsü --- */
.as-tile--shot .as-tile-art {
  aspect-ratio: 16 / 10;
  background-size: cover !important;
  background-position: top center !important;
  position: relative;
}
.as-ver {
  position: absolute; right: 6px; bottom: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  color: #fff; font-size: .55em; font-weight: 700;
  letter-spacing: .02em;
}
.as-d-shot {
  margin: 14px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  max-height: 420px;
}
.as-d-shot img {
  display: block; width: 100%; height: auto; max-height: 420px;
  object-fit: cover; object-position: top center;
}
.as-d-long {
  margin-top: 8px !important;
  font-size: .82em !important;
  line-height: 1.7 !important;
  color: var(--muted) !important;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.ip-src { font-size: .55em; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* --- Ses paketi: içindeki sesleri tek tek dinleme --- */
.as-sndpanel {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  overflow: hidden;
}
.as-sndpanel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.as-sndpanel-head b { font-size: .86em; }
.as-sndgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px; padding: 10px;
}
.as-sndcue {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-3); color: var(--fg);
  font: inherit; font-size: .78em; cursor: pointer;
  transition: all .13s ease;
}
.as-sndcue:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-3)); }
.as-sndcue-ic {
  display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-size: .55em; padding-left: 1px; flex: none;
}
/* Duvar kağıdı önizlemesi: pencere yok, alt dock var */
.shot--wall { display: block; }
.shot-dock--wall { bottom: 6%; }

/* ============================================================================
   EDİTÖR SEÇKİLERİ v3 — vitrin düzeni (büyük kahraman + yan sütun)
   ============================================================================ */
.epx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .epx-grid { grid-template-columns: 1fr; } }

.epx {
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.epx:hover { border-color: var(--accent); box-shadow: 0 14px 38px rgba(0,0,0,.28); }

.epx-art {
  position: relative; display: block; width: 100%;
  padding: 0; border: none; background: none; cursor: pointer; overflow: hidden;
  aspect-ratio: 16 / 9;
}
.epx--hero .epx-art { aspect-ratio: 16 / 7.4; }
.epx-art--mini { aspect-ratio: 16 / 6.2; }
.epx-art .shot { border-radius: 0; min-height: 0; height: 100%; }
.epx-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
.epx-badge {
  position: absolute; right: 12px; top: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: #101014;
  font-size: .64em; font-weight: 700; letter-spacing: .01em;
  opacity: 0; transform: translateY(-5px) scale(.96);
  transition: all .2s cubic-bezier(.34,1.4,.64,1);
}
.epx-art:hover .epx-badge { opacity: 1; transform: translateY(0) scale(1); }
.epx-badge--sm { padding: 4px 9px; font-size: .7em; }

.epx-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.epx-head h3, .epx-body h3 { margin: 0; font-size: 1.02em; letter-spacing: -.015em; }
.epx-body p { margin: 2px 0 0; font-size: .74em; color: var(--muted); line-height: 1.45; }
.epx-kicker { font-size: .56em; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }

.epx-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 7px; }
.epx-part {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--fg); text-align: left;
}
.epx-part .shot { aspect-ratio: 4/3; min-height: 0; border-radius: 8px; }
.epx-part:hover .shot { outline: 2px solid var(--accent); outline-offset: 1px; }
.epx-part span { font-size: .62em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.epx-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.epx--mini { flex: 1; }
.epx-dots { display: flex; gap: 5px; }
.epx-dot {
  flex: 1; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 7px; overflow: hidden;
}
.epx-dot .shot { aspect-ratio: 1; min-height: 0; border-radius: 7px; }
.epx-dot:hover .shot { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ============================================================================
   YÖNETİCİ İNCELEME PANELİ
   ============================================================================ */
.as-nav-badge {
  margin-left: 6px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: var(--bg);
  font-size: .62em; font-style: normal; font-weight: 800;
  min-width: 15px; text-align: center;
}
.as-review { display: flex; flex-direction: column; gap: 14px; }
.rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rv-head h1 { margin: 0; font-size: 1.15em; }
.rv-count { font-size: .74em; color: var(--muted); }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.rv-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--bg-2); overflow: hidden;
}
.rv-shot { aspect-ratio: 16/9; }
.rv-shot .shot { border-radius: 0; min-height: 100%; height: 100%; }
.rv-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; }
.rv-top { display: flex; justify-content: space-between; font-size: .6em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.rv-kind { color: var(--accent); font-weight: 700; }
.rv-body h4 { margin: 0; font-size: .95em; }
.rv-body p { margin: 0; font-size: .72em; color: var(--muted); line-height: 1.5; }
.rv-by { font-size: .68em; color: var(--muted); }
.rv-by b { color: var(--fg); }
.rv-parts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .64em; color: var(--muted); }
.rv-chip { font-style: normal; padding: 1px 7px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); }
.rv-acts { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.rv-acts .btnl { font-size: .74em; padding: 5px 10px; }
.rv-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 20px; border: 1px dashed var(--line); border-radius: 15px;
  text-align: center; color: var(--muted);
}
.rv-empty span { font-size: 1.6em; color: var(--accent); }
.rv-empty b { color: var(--fg); font-size: .9em; }
.rv-empty p { margin: 0; font-size: .74em; max-width: 34ch; line-height: 1.5; }
.rv-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.rv-sec-head h2 { margin: 0; font-size: .95em; }
.rv-sec-head span { font-size: .68em; color: var(--muted); }
.rv-live { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rv-live-row {
  display: grid; grid-template-columns: 1fr auto auto auto auto;
  gap: 10px; align-items: center;
  padding: 8px 12px; font-size: .76em;
  border-bottom: 1px solid var(--line);
}
.rv-live-row:last-child { border-bottom: none; }
.rv-live-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-live-kind, .rv-live-owner, .rv-live-dl { font-size: .82em; color: var(--muted); }
.rv-del { font-size: .7em; padding: 3px 9px; }
.rv-none { font-size: .76em; color: var(--muted); margin: 0; padding: 14px; }

/* ============================================================================
   cemOS CREATOR — gerçek yaratım stüdyosu
   ============================================================================ */
.cr-layer {
  position: fixed; inset: 0; z-index: 9600;
  display: grid; place-items: center; padding: 18px;
  background: rgba(0,0,0,.62); backdrop-filter: blur(10px);
  animation: cr-in .18s ease-out;
}
@keyframes cr-in { from { opacity: 0 } to { opacity: 1 } }
.cr-card {
  width: min(1000px, 97vw);
  height: min(720px, 94vh);
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.cr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  flex: none;
}
.cr-head b { font-size: 1.05em; letter-spacing: -.01em; }
.cr-head b span { color: var(--accent); }
.cr-head i { display: block; font-style: normal; font-size: .68em; color: var(--muted); margin-top: 1px; }
.cr-x {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); background: transparent;
  color: inherit; cursor: pointer; font: inherit;
}
.cr-x:hover { border-color: var(--accent); }

.cr-tabs { display: flex; gap: 4px; padding: 10px 14px 0; flex: none; }
.cr-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 10px 10px 0 0;
  border: 1px solid transparent; border-bottom: none;
  background: none; color: var(--muted); font: inherit; font-size: .8em; cursor: pointer;
}
.cr-tab span { font-size: 1.1em; }
.cr-tab:hover { color: var(--fg); }
.cr-tab.on {
  color: var(--fg); background: var(--bg-2);
  border-color: var(--line); font-weight: 600;
}

.cr-body { flex: 1; display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
@media (max-width: 800px) { .cr-body { grid-template-columns: 1fr; } }
.cr-preview {
  padding: 16px; display: grid; place-items: center;
  background: var(--bg-2); border-right: 1px solid var(--line);
  min-height: 0;
}
.cr-preview .shot { width: 100%; aspect-ratio: 16/10; border-radius: 14px; }
.cr-preview .shot--icons { aspect-ratio: 16/10; }
.cr-wavebox { width: 100%; }
.cr-wavebox canvas { width: 100%; height: auto; border-radius: 12px; background: var(--bg-3); }

.cr-controls {
  padding: 14px 16px; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cr-row { display: flex; align-items: center; gap: 9px; font-size: .8em; }
.cr-row label { flex: 0 0 84px; color: var(--muted); }
.cr-row input[type="range"] { flex: 1; min-width: 0; }
.cr-row b { min-width: 46px; text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; font-size: .95em; }
.cr-in {
  flex: 1; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg); font: inherit; font-size: .95em;
}
.cr-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-color {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-3);
  font-size: .72em; color: var(--muted);
}
.cr-color input[type="color"] {
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 7px;
  background: none; cursor: pointer; flex: none;
}
.cr-color b { color: var(--fg); font-variant-numeric: tabular-nums; font-size: .95em; }
.cr-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.cr-seg--sm .cr-seg-b { font-size: .7em; padding: 4px 9px; }
.cr-seg-b {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-3);
  color: var(--fg); font: inherit; font-size: .78em; cursor: pointer;
}
.cr-seg-b:hover { border-color: var(--accent); }
.cr-seg-b.on { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; }
.cr-notes { display: flex; gap: 3px; flex-wrap: wrap; }
.cr-note {
  min-width: 30px; padding: 4px 6px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg-3);
  color: var(--fg); font: inherit; font-size: .7em; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cr-note.on { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; }
.cr-hint { font-size: .7em; color: var(--muted); line-height: 1.55; display: flex; flex-wrap: wrap; gap: 4px; }
.cr-hint-inline { font-size: .7em; color: var(--muted); }
.cr-chip {
  padding: 1px 7px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
}
.cr-canvas {
  width: 100%; border-radius: 12px; border: 1px solid var(--line);
  cursor: crosshair; touch-action: none;
}
.cr-actions-in { display: flex; align-items: center; gap: 8px; }
.cr-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line); flex: none;
}
.cr-sp { flex: 1; }

/* Ekran görüntüsü üzerindeki UYGULAMA İKONU rozeti */
.as-appbadge {
  position: absolute; left: 8px; bottom: 8px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12);
  z-index: 2;
}
.as-appbadge svg { width: 17px; height: 17px; color: #fff; }
.as-tile--shot .as-tile-art { position: relative; }

/* ============================================================================
   EDİTÖR SEÇKİLERİ v4 — sade vitrin
   ============================================================================ */
.epc-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) { .epc-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .epc-row { grid-template-columns: 1fr; } }

.epc {
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.epc:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(0,0,0,.26); }

.epc-art {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0; border: none; background: none; cursor: pointer; overflow: hidden;
}
.epc-art .shot { border-radius: 0; min-height: 100%; height: 100%; }
.epc-cta {
  position: absolute; inset: auto 8px 8px auto;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: #101014;
  font-size: .62em; font-weight: 700;
  opacity: 0; transform: translateY(4px);
  transition: all .18s ease;
}
.epc-art:hover .epc-cta { opacity: 1; transform: translateY(0); }

.epc-tx { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.epc-k { font-size: .54em; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.epc-tx h3 { margin: 1px 0 0; font-size: .88em; letter-spacing: -.01em; }
.epc-tx p { margin: 0; font-size: .66em; color: var(--muted); line-height: 1.4; }

.epc-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.epc-part {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0; border: none; background: none; cursor: pointer; font: inherit;
}
.epc-part-shot { display: block; border-radius: 6px; overflow: hidden; }
.epc-part-shot .shot { aspect-ratio: 1; min-height: 0; border-radius: 6px; }
.epc-part:hover .epc-part-shot { outline: 2px solid var(--accent); outline-offset: 1px; }
.epc-part-n {
  font-size: .52em; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Seçki parça etiketleri: taşmasın, okunur olsun */
.epc-parts { align-items: start; }
.epc-part-n {
  display: block;
  margin-top: 3px;
  line-height: 1.15;
  min-height: 10px;
  font-size: .5em;
  letter-spacing: .03em;
}
.epc-part { min-width: 0; }
.epc-part-shot { width: 100%; }
.epc-part-shot .shot { width: 100%; }

/* Profil → Arkadaşlar */
.fr-block { margin-top: 14px; }
.fr-list { display: flex; flex-direction: column; gap: 6px; }
.fr-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg-3);
}
.fr-av {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--bg);
  font-weight: 800; font-size: .8em;
}
.fr-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fr-tx b { font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-tx i { font-style: normal; font-size: .68em; color: var(--muted); }
.fr-dm, .fr-unfriend { font-size: .7em; padding: 4px 9px; flex: none; }

/* ============================================================================
   PDF OKUYUCU — belirgin indirme + yakınlaştırma
   ============================================================================ */
.pdf-actions { display: flex; align-items: center; gap: 8px; }
.pdf-dl {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: var(--accent) !important;
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent);
}
.pdf-dl:hover { filter: brightness(1.08); }
.pdf-zoom {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-3);
}
.pdf-zbtn {
  width: 24px; height: 24px; border-radius: 6px;
  border: none; background: transparent; color: var(--fg);
  cursor: pointer; font: inherit; font-size: 1em; line-height: 1;
}
.pdf-zbtn:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
#pdf-zv {
  min-width: 40px; text-align: center;
  font-size: .72em; font-variant-numeric: tabular-nums; color: var(--muted);
}
.pdf-frame-wrap { overflow: auto; transition: none; }

/* Ses odası: ses seviyesi */
.chat-vr-vol {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-3);
  font-size: .72em;
}
.chat-vr-vol input[type="range"] { width: 76px; }
.chat-vr-vol b { min-width: 34px; text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; font-size: .95em; }

/* ============================================================================
   SES ODASI — oda içi metin sohbeti
   ============================================================================ */
.vr-chat {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--bg-2); overflow: hidden;
  margin-top: 10px; max-height: 260px;
}
.vr-chat[hidden] { display: none; }
.vr-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; border-bottom: 1px solid var(--line);
  font-size: .72em;
}
.vr-chat-head b { font-weight: 600; }
.vr-chat-head span { color: var(--muted); font-size: .9em; }
.vr-chat-log {
  flex: 1; min-height: 90px; max-height: 190px; overflow-y: auto;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 5px;
  overscroll-behavior: contain;
}
.vr-chat-row {
  display: flex; gap: 7px; align-items: baseline;
  font-size: .78em; line-height: 1.45;
}
.vr-chat-row b { color: var(--accent); font-weight: 600; flex: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-chat-row span { color: var(--fg); word-break: break-word; }
.vr-chat-row.mine b { color: var(--muted); }
.vr-chat-form {
  display: flex; gap: 7px; padding: 8px 10px;
  border-top: 1px solid var(--line); background: var(--bg-3);
}
.vr-chat-in {
  flex: 1; padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--fg); font: inherit; font-size: .82em;
}
.vr-chat-in:focus { outline: none; border-color: var(--accent); }

/* ============================================================================
   ABOUT — işe alım için okunur tipografi (özet ve proje satırları çok küçüktü)
   ============================================================================ */
.ab-brief { padding: 22px 24px 20px; }
.ab-brief-hero { gap: 16px; margin-bottom: 4px; }
.ab-brief-av { width: 64px; height: 64px; }

.ab-brief-who b {
  font-size: 1.5em;
  letter-spacing: -.02em;
  line-height: 1.15;
  display: block;
}
.ab-brief-who span {
  font-size: .84em;
  color: var(--muted);
  line-height: 1.5;
  display: block;
  margin-top: 2px;
}

/* ÖZET: en önemli cümle. Küçük punto ile "box" gibi duruyordu. */
.ab-brief-lead {
  font-size: 1.14rem !important;
  line-height: 1.62 !important;
  font-weight: 500;
  max-width: 62ch;
  margin: 14px 0 18px !important;
  color: var(--fg) !important;
  letter-spacing: -.005em;
}

/* Proje satırları: okunur boyut */
.ab-brief-list { gap: 12px !important; }
.ab-brief-list li {
  grid-template-columns: 128px 1fr !important;
  gap: 16px !important;
  align-items: baseline;
}
.ab-brief-list li b {
  font-size: .9rem !important;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ab-brief-list li i,
.ab-brief-list li p {
  font-size: .88rem !important;
  line-height: 1.55 !important;
  color: color-mix(in srgb, var(--fg) 74%, transparent) !important;
  font-style: normal;
}

/* CTA'lar biraz daha büyük ve net */
.ab-brief-cta { margin-top: 18px; gap: 8px; }
.ab-brief-btn { font-size: .86rem !important; padding: 9px 15px !important; }

@media (max-width: 640px) {
  .ab-brief-lead { font-size: 1.02rem !important; }
  .ab-brief-list li { grid-template-columns: 1fr !important; gap: 3px !important; }
}

/* Proje satırları: metin <span> içinde — önceki kural yanlış hedefi vuruyordu. */
.ab-brief-list li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color .15s ease, transform .15s ease;
}
.ab-brief-list li:hover { border-color: var(--accent); transform: translateX(2px); }
.ab-brief-list li b {
  font-size: .92rem !important;
  font-weight: 700;
  color: var(--accent) !important;
  letter-spacing: -.01em;
}
.ab-brief-list li > span {
  font-size: .9rem !important;
  line-height: 1.55 !important;
  color: color-mix(in srgb, var(--fg) 78%, transparent) !important;
}
@media (max-width: 640px) {
  .ab-brief-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================================
   LOGIN — daha geniş, daha net hiyerarşi (küçük kutu gibi duruyordu)
   ============================================================================ */
#login[data-page="card"] .login-card {
  width: min(430px, 92vw);
  padding: 40px 42px 30px;
  border-radius: 22px;
  gap: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(20px);
}
.login-logo { font-size: 1.9em; letter-spacing: -.02em; }
.login-sub { font-size: .78em; letter-spacing: .16em; text-transform: uppercase; opacity: .64; }
.login-orb { margin: 10px 0 2px; }
.login-avatar { width: 74px; height: 74px; font-size: 1.5em; }
.login-name { font-size: 1.28em; font-weight: 700; letter-spacing: -.015em; }
.login-status {
  font-size: .66em; letter-spacing: .18em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.login-btn {
  width: 100%;
  margin-top: 12px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: .95em;
  font-weight: 650;
  letter-spacing: .01em;
}
.login-hint { font-size: .7em; opacity: .55; margin-top: 2px; }
.login-lang {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  width: 100%; justify-content: center;
  font-size: .74em;
}
.login-lang select {
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: inherit; font: inherit; font-size: .95em;
}
.login-pass { width: 100%; }
.login-pass-input {
  width: 100%; padding: 11px 42px 11px 13px;
  border-radius: 11px; font-size: .88em;
}
.login-guest { font-size: .76em; }
@media (max-width: 520px) {
  #login[data-page="card"] .login-card { padding: 30px 24px 22px; border-radius: 18px; }
  .login-avatar { width: 60px; height: 60px; }
}

/* Publish: tek giriş kartı */
.as-pub-single { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.as-pub-go {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 18px;
  border-radius: 16px; cursor: pointer;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--bg-2)), var(--bg-2));
  color: var(--fg); font: inherit; text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.as-pub-go:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.as-pub-go-ic {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 13px;
  background: var(--accent); color: var(--bg);
  font-size: 1.3em;
}
.as-pub-go-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.as-pub-go-tx b { font-size: 1.02em; letter-spacing: -.01em; }
.as-pub-go-tx i { font-style: normal; font-size: .76em; color: var(--muted); }
.as-pub-go-ar { margin-left: auto; font-size: 1.1em; color: var(--accent); }
.as-pub-note { font-size: .72em; color: var(--muted); }

/* Ses paketi önizlemesi: kutular yarıda kesiliyordu */
.shot--sound {
  min-height: 96px;
  padding: 12px 10px !important;
  align-items: flex-end !important;
  border-radius: 10px;
}
.shot--sound i {
  max-height: 78%;
  min-height: 8%;
  align-self: flex-end;
}
.shot-sound-play {
  right: 8px !important;
  bottom: 8px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: .6em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
/* Ses kartlarının hepsi aynı yükseklikte dursun */
.as-icon-grid, .epc-part-shot .shot--sound, .rv-shot .shot--sound { min-height: 0; }

/* Editor seçkisi: küçük resim+ikon karışımı kaldırıldı; sade etiketler */
.epc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.epc-chip {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--muted);
  font: inherit; font-size: .62em; letter-spacing: .02em;
  cursor: pointer; transition: all .14s ease;
}
.epc-chip:hover { color: var(--fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-3)); }
/* Eski parça ızgarası artık kullanılmıyor */
.epc-parts { display: none !important; }

/* ============================================================================
   BAKIM UYARISI — giriş/kayıt kartının içinde
   ============================================================================ */
.maint-note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #f59e0b 42%, transparent);
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-2));
}
.maint-note-ic {
  font-size: 1.1em; line-height: 1.2; flex: none;
  filter: saturate(1.2);
}
.maint-note b {
  display: block; font-size: .84em; margin-bottom: 3px;
  color: color-mix(in srgb, #f59e0b 82%, var(--fg));
}
.maint-note p {
  margin: 0; font-size: .74em; line-height: 1.55;
  color: color-mix(in srgb, var(--fg) 72%, transparent);
}

/* Admin paneli: süreç/yapı kartı */
.adm-sys { margin-top: 14px; }
.adm-sys-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px; margin-top: 8px;
}
.adm-sys-cell {
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-3);
  display: flex; flex-direction: column; gap: 2px;
}
.adm-sys-cell span { font-size: .64em; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.adm-sys-cell b { font-size: .86em; font-variant-numeric: tabular-nums; }
.adm-sys-acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.adm-sys-acts .snd-hint { flex: 1; min-width: 180px; }

/* ============================================================================
   MARKET KARTLARI — fotoğraflar 155×74'te eziliyordu, okunmuyordu.
   ============================================================================ */
.as-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)) !important; gap: 12px !important; }
.as-tile { padding: 11px !important; }
.as-tile-art {
  height: auto !important;
  aspect-ratio: 16 / 10;
  min-height: 120px;
  background-size: cover !important;
  background-position: top center !important;
}
.as-tile b { font-size: .84em !important; margin-top: 2px; }
.as-tile i { font-size: .72em !important; line-height: 1.4 !important; height: 3em !important; }
.as-tile-row { margin-top: 7px !important; }
.as-get { font-size: .7em !important; padding: 6px 10px !important; }
.as-ver { font-size: .62em !important; }

@media (max-width: 720px) {
  .as-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
  .as-tile-art { min-height: 96px; }
}

/* Creator: yayın bilgileri */
.cr-pub {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  padding: 12px 18px; border-top: 1px solid var(--line);
  background: var(--bg-2); flex: none;
}
.cr-pub-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cr-pub-row:last-child { grid-column: 1 / -1; }
.cr-pub-lbl { font-size: .68em; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cr-pub-ta {
  min-height: 54px; resize: vertical; font-family: inherit; line-height: 1.45;
}
.cr-pub-photo { display: flex; align-items: center; gap: 10px; }
.cr-pub-thumb {
  width: 84px; height: 52px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-3);
  display: grid; place-items: center; font-size: .62em; color: var(--muted);
}
.cr-pub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cr-pub-file { cursor: pointer; }
@media (max-width: 760px) { .cr-pub { grid-template-columns: 1fr; } }

/* Publish sayfası: yetenek kartları + yayınların */
.as-pub-caps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin: 14px 0 16px;
}
.as-pub-cap {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-2);
}
.as-pub-cap span { font-size: 1.05em; color: var(--accent); }
.as-pub-cap b { font-size: .8em; margin-top: 2px; }
.as-pub-cap i { font-style: normal; font-size: .66em; color: var(--muted); line-height: 1.4; }

.as-pub-mine { margin-top: 16px; }
.as-pub-mine-head {
  font-size: .68em; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 7px;
}
.as-pub-mine-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2);
  margin-bottom: 5px; font-size: .78em;
}
.as-pub-mine-row b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pub-mine-row span { font-size: .9em; color: var(--muted); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pub-st {
  font-style: normal; font-size: .84em; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.as-pub-st.pending { color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.as-pub-st.approved { color: #22c55e; border-color: color-mix(in srgb, #22c55e 45%, transparent); }
.as-pub-st.rejected { color: #ef4444; border-color: color-mix(in srgb, #ef4444 45%, transparent); }

/* Ses paneli: dar kolona sıkışıyordu, 12 ses dikey eziliyordu */
.as-sndpanel { width: 100%; }
.as-sndgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 8px !important; }
.as-sndcue {
  min-height: 40px;
  padding: 8px 12px !important;
  font-size: .84em !important;
  border-radius: 11px !important;
}
.as-sndcue-ic { width: 20px !important; height: 20px !important; font-size: .6em !important; }
.as-sndpanel-head { padding: 13px 16px !important; }
.as-sndpanel-head b { font-size: .92em !important; }

/* Market görselleri: dikey/yatay fotoğraflar sıkışmasın */
.as-tile-art { background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; }
.as-tile-art img, .as-d-shot img { object-fit: cover; object-position: top center; }
.as-d-shot { aspect-ratio: 16 / 9; max-height: 420px; }
.as-d-shot img { width: 100%; height: 100%; }

/* ============================================================================
   ABOUT 2.0 — portfolyo / işe alım tasarımı
   ============================================================================ */
.ab-wrap {
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 24px 26px;
  max-height: 100%; overflow-y: auto;
  overscroll-behavior: contain;
}

.ab-hero2 {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--bg-2);
  overflow: hidden;
}
.ab-hero2-glow {
  position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.ab-hero2-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ab-hero2-id { display: flex; align-items: center; gap: 14px; }
.ab-hero2-av {
  width: 62px; height: 62px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #000));
  color: #fff; font-weight: 800; font-size: 1.2em; letter-spacing: -.02em;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.ab-hero2 h1 { margin: 0; font-size: 1.7em; letter-spacing: -.03em; line-height: 1.1; }
.ab-hero2-role { margin: 3px 0 0; font-size: .82em; color: var(--muted); }
.ab-hero2-avail {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #22c55e 42%, transparent);
  background: color-mix(in srgb, #22c55e 12%, transparent);
  color: #22c55e; font-size: .72em; font-weight: 700;
}
.ab-hero2-avail i {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: ab-pulse 2.2s infinite;
}
@keyframes ab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.ab-hero2-pitch {
  margin: 16px 0 16px;
  font-size: 1.12rem; line-height: 1.58; font-weight: 500;
  max-width: 58ch; letter-spacing: -.01em; text-wrap: pretty;
}
.ab-hero2-cta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ab-cta-main {
  padding: 10px 18px; border-radius: 11px; border: none;
  background: var(--accent); color: var(--bg);
  font: inherit; font-size: .86em; font-weight: 750; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.ab-cta-main:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ab-cta-ghost {
  padding: 10px 15px; border-radius: 11px;
  border: 1px solid var(--line); background: transparent;
  color: var(--fg); text-decoration: none;
  font: inherit; font-size: .82em; font-weight: 600;
}
.ab-cta-ghost:hover { border-color: var(--accent); }

.ab-stats2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ab-stat2 {
  padding: 13px 12px; border-radius: 13px; text-align: center;
  border: 1px solid var(--line); background: var(--bg-2);
}
.ab-stat2 b { display: block; font-size: 1.3em; letter-spacing: -.02em; color: var(--accent); }
.ab-stat2 span { font-size: .66em; color: var(--muted); }

.ab-sec2 h2 {
  margin: 0 0 10px; font-size: .72em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}
.ab-work2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.ab-work2-card {
  position: relative; padding: 14px 14px 13px;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg-2); overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.ab-work2-card:hover { border-color: var(--tint); transform: translateY(-2px); }
.ab-work2-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tint);
}
.ab-work2-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ab-work2-card h3 { margin: 0; font-size: 1em; letter-spacing: -.02em; }
.ab-work2-metric {
  font-size: .62em; font-weight: 700; color: var(--tint);
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  white-space: nowrap;
}
.ab-work2-role { margin: 3px 0 7px; font-size: .68em; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.ab-work2-line { margin: 0; font-size: .8em; line-height: 1.55; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.ab-work2-link { display: inline-block; margin-top: 8px; font-size: .72em; color: var(--accent); text-decoration: none; }
.ab-work2-link:hover { text-decoration: underline; }

.ab-skills2 { display: flex; flex-direction: column; gap: 8px; }
.ab-skill2 { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
.ab-skill2 > span { font-size: .72em; color: var(--muted); }
.ab-skill2 > div { display: flex; flex-wrap: wrap; gap: 5px; }
.ab-skill2 i {
  font-style: normal; font-size: .68em; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-3); color: var(--fg);
}

.ab-foot2 {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, var(--bg-2)), var(--bg-2));
  flex-wrap: wrap;
}
.ab-foot2 span { font-size: .78em; color: var(--muted); }

@media (max-width: 720px) {
  .ab-stats2 { grid-template-columns: repeat(2, 1fr); }
  .ab-hero2 h1 { font-size: 1.4em; }
  .ab-hero2-pitch { font-size: 1rem; }
  .ab-skill2 { grid-template-columns: 1fr; gap: 4px; }
}

/* About: flex kolonundaki çocuklar küçülüp içeriği kırpıyordu */
.ab-wrap > * { flex: 0 0 auto; }
.ab-hero2 { overflow: visible; }
.ab-hero2-glow { opacity: .9; }

/* Admin: kullanıcı satırında silme */
.adm-user { position: relative; padding-right: 30px; }
.adm-user-del {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid var(--line); background: none;
  color: var(--muted); font-size: .6em; cursor: pointer;
  display: grid; place-items: center;
}
.adm-user-del:hover { color: #ef4444; border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); }

/* ============================================================================
   GİRİŞ DUVARI — hesapsız topluluk servisleri
   ============================================================================ */
.auth-wall {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(12px);
  animation: aw-in .18s ease-out;
}
@keyframes aw-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
.auth-wall-card {
  width: min(430px, 94vw);
  padding: 26px 24px 22px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg);
  text-align: center;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.auth-wall-art {
  position: relative; height: 92px; margin-bottom: 6px;
  display: grid; place-items: center;
}
.aw-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  animation: aw-orbit 6s linear infinite;
}
.aw-ring { width: 74px; height: 74px; }
.aw-ring.d2 { width: 96px; height: 96px; animation-duration: 9s; animation-direction: reverse; }
.aw-ring.d3 { width: 118px; height: 118px; animation-duration: 13s; opacity: .5; }
@keyframes aw-orbit { to { transform: rotate(360deg); } }
.aw-lock { font-size: 1.5em; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 50%, transparent)); }
.auth-wall-card h2 { margin: 6px 0 6px; font-size: 1.18em; letter-spacing: -.02em; }
.auth-wall-card p { margin: 0 auto 16px; font-size: .84em; line-height: 1.55; color: var(--muted); max-width: 36ch; }
.auth-wall-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.auth-wall-foot { display: block; margin-top: 12px; font-size: .68em; color: var(--muted); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .aw-ring { animation: none; } }

/* ============================================================================
   YENİ TUR — MARKET: büyük görseller, okunur sesler, yayın vitrini
   ============================================================================ */

/* Kartlar: ekran görüntüleri artık gerçekten görünür */
.as-rail-scroll { grid-auto-columns: 196px !important; gap: 12px !important; align-items: start; }
.as-tile { min-height: 0; align-self: stretch; }
.as-tile--shot .as-tile-art {
  height: auto !important;
  min-height: 108px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
}
.as-tile-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto !important;
  min-height: 2.6em;
}
.as-tile-by { min-width: 0; }
.as-tile-row { margin-top: auto; }
.as-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 12px !important; }

/* Ürün detayı: kocaman hero görsel + üstünde kimlik */
.as-detail { gap: 16px; }
.as-d-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 250px;
  max-height: 380px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
  box-shadow: 0 24px 60px -34px #000c;
}
.as-d-hero img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.as-d-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 34%, #000000d9 100%); }
.as-d-hero-cap {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  display: flex; align-items: center; gap: 13px; color: #fff;
}
.as-d-hero-ic {
  width: 48px; height: 48px; flex: none; border-radius: 14px;
  display: grid; place-items: center;
  background: #00000066; border: 1px solid #ffffff33;
  box-shadow: 0 10px 24px -10px #000;
}
.as-d-hero-ic svg { width: 26px; height: 26px; }
.as-d-hero-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-d-hero-tx .as-d-tag { color: #c7d2fe; }
.as-d-hero-tx h1 { margin: 0; font-size: 1.6em; letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 16px #000a; }
.as-d-hero-by { font-size: .66em; color: #cbd5e1; }
.as-d-hero-by b { color: #fff; }
.as-d-head--shot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.as-d-preview .shot { min-height: 260px; }
.as-d-shot { display: none !important; }

@media (max-width: 780px) {
  .as-rail-scroll { grid-auto-columns: 168px !important; }
  .as-d-hero { min-height: 200px; aspect-ratio: 4 / 3; }
  .as-d-hero-tx h1 { font-size: 1.2em; }
  .as-d-hero-ic { width: 38px; height: 38px; border-radius: 11px; }
  .as-d-head--shot { grid-template-columns: 1fr; }
}

/* Ses paketi: 12 cue, iki kolon, gerçek satırlar */
.as-sndpanel {
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, transparent), var(--bg-2)) !important;
  overflow: hidden;
}
.as-sndpanel-head { padding: 14px 18px !important; border-bottom: 1px solid var(--line); }
.as-sndpanel-title { display: flex; flex-direction: column; gap: 1px; }
.as-sndpanel-title b { font-size: .9em !important; }
.as-sndpanel-title i { font-style: normal; font-size: .62em; color: var(--muted); }
.as-sndgrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
}
.as-sndcue {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 52px;
  padding: 8px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--bg-3) 70%, transparent) !important;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.as-sndcue:hover, .as-sndcue:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-3)) !important;
  transform: translateY(-1px);
  outline: none;
}
.as-sndcue-ic {
  width: 34px !important; height: 34px !important; flex: none;
  border-radius: 50% !important;
  display: grid; place-items: center;
  background: var(--accent) !important;
  color: var(--bg) !important;
  font-size: .64em !important;
  padding-left: 2px;
  box-shadow: 0 4px 12px -4px var(--accent);
}
.as-sndcue-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.as-sndcue-tx b { font-size: .8em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-sndcue-tx i { font-style: normal; font-size: .6em; color: var(--muted); }
.as-sndcue-wave { display: flex; align-items: center; gap: 2px; height: 24px; width: 38px; flex: none; opacity: .55; }
.as-sndcue-wave i { display: block; width: 3px; border-radius: 2px; background: var(--accent); transform-origin: center; }
.as-sndcue:hover .as-sndcue-wave i { animation: sndWave .5s ease-in-out infinite alternate; }
.as-sndcue:hover .as-sndcue-wave i:nth-child(2) { animation-delay: .08s; }
.as-sndcue:hover .as-sndcue-wave i:nth-child(3) { animation-delay: .16s; }
.as-sndcue:hover .as-sndcue-wave i:nth-child(4) { animation-delay: .24s; }
.as-sndcue:hover .as-sndcue-wave i:nth-child(5) { animation-delay: .32s; }
@keyframes sndWave { to { transform: scaleY(.32); } }
@media (max-width: 760px) { .as-sndgrid { grid-template-columns: 1fr !important; } }

/* Publish: gerçek bir stüdyo vitrini */
.as-publish { max-width: none !important; display: flex; flex-direction: column; gap: 18px; }
.as-pub-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center;
  padding: 24px 26px; border-radius: 20px; border: 1px solid var(--line);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(130deg, color-mix(in srgb, var(--accent) 12%, var(--bg-2)), var(--bg-2));
}
.as-pub-kicker { font-size: .56em; letter-spacing: .18em; text-transform: uppercase; font-weight: 900; color: var(--accent); }
.as-pub-hero h1 { margin: 5px 0 8px; font-size: 1.55em; letter-spacing: -.035em; }
.as-pub-hero p { margin: 0; max-width: 58ch; font-size: .76em; line-height: 1.65; color: var(--muted); }
.as-pub-rules { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.as-pub-rules span {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  font-size: .62em; font-weight: 700; color: var(--muted);
}
.as-pub-hero-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 230px; }
.as-pub-go { margin: 0 !important; }
.as-pub-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.as-pub-type {
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  transition: transform .15s, border-color .15s;
}
.as-pub-type:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.as-pub-type-ic { font-size: 1.25em; color: var(--accent); }
.as-pub-type b { font-size: .8em; }
.as-pub-type i { font-style: normal; font-size: .64em; line-height: 1.4; color: var(--muted); }
.as-pub-show { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: stretch; }
.as-pub-steps { display: flex; flex-direction: column; gap: 10px; }
.as-pub-step { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.as-pub-step > span {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: .72em;
  background: var(--accent); color: var(--bg);
}
.as-pub-step b { font-size: .82em; }
.as-pub-step p { margin: 2px 0 0; font-size: .68em; line-height: 1.5; color: var(--muted); }
.as-pub-mock {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: #0b1020; box-shadow: 0 24px 50px -30px #000;
  display: flex; flex-direction: column; min-height: 230px;
}
.as-pub-mock-bar {
  display: flex; align-items: center; gap: 5px; padding: 8px 11px;
  background: #151a2b; border-bottom: 1px solid #ffffff14;
}
.as-pub-mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.as-pub-mock-bar i:nth-child(2) { background: #f59e0b; }
.as-pub-mock-bar i:nth-child(3) { background: #22c55e; }
.as-pub-mock-bar span { margin-left: 5px; font-size: .58em; color: #94a3b8; }
.as-pub-mock-wall {
  position: relative; flex: 1; min-height: 190px;
  background: linear-gradient(140deg, #1e1b4b, #0f766e 60%, #38bdf8);
}
.as-pub-mock-win {
  position: absolute; left: 12%; top: 16%; width: 56%; height: 58%;
  border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px;
  background: #0f172ae6; border: 1px solid #ffffff26; box-shadow: 0 18px 40px -18px #000;
}
.as-pub-mock-win b { font-size: .62em; color: #e2e8f0; }
.as-pub-mock-win span { display: block; height: 4px; border-radius: 2px; background: #ffffff2e; }
.as-pub-mock-win span:nth-child(3) { width: 74%; }
.as-pub-mock-win span:nth-child(4) { width: 52%; }
.as-pub-mock-win em { display: block; margin-top: auto; width: 42%; height: 14px; border-radius: 4px; background: #818cf8; }
.as-pub-mock-dock {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 5px 7px; border-radius: 9px;
  background: #00000059; backdrop-filter: blur(8px);
}
.as-pub-mock-dock i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(150deg,#a78bfa,#4c1d95); }
.as-pub-mock-dock i:nth-child(2) { background: linear-gradient(150deg,#5eead4,#0f766e); }
.as-pub-mock-dock i:nth-child(3) { background: linear-gradient(150deg,#fbbf24,#92400e); }
.as-pub-mock-dock i:nth-child(4) { background: linear-gradient(150deg,#f472b6,#9d174d); }
.as-pub-mock-dock i:nth-child(5) { background: linear-gradient(150deg,#93c5fd,#1d4ed8); }
.as-pub-mine { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: color-mix(in srgb, var(--bg-2) 65%, transparent); }
.as-pub-mine-head { font-size: .72em; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.as-pub-mine-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .72em; }
.as-pub-mine-row:first-of-type { border-top: none; }
.as-pub-mine-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pub-mine-row span { color: var(--muted); font-size: .9em; }

@media (max-width: 980px) {
  .as-pub-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-pub-show { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .as-pub-hero { grid-template-columns: 1fr; padding: 18px; }
  .as-pub-hero-act { min-width: 0; }
  .as-pub-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   PRE-LOGIN PRELUDE — sinematik açılış (kuyruk yok)
   ============================================================================ */
#boot-splash { background: radial-gradient(circle at 50% 42%, #1a1230 0%, #07050d 68%) !important; }
#boot-splash.boot-out { opacity: 0; pointer-events: none; }
.bp-grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(520px) rotateX(58deg) translateY(12%);
  mask-image: radial-gradient(circle at 50% 55%, #000 0 34%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 0 34%, transparent 72%);
  animation: bpGrid 3.2s linear infinite;
}
@keyframes bpGrid { to { background-position: 0 46px, 46px 0; } }
.bp-scan {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, #a78bfa1f 48%, transparent 52%);
  animation: bpScan 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bpScan { 0% { transform: translateY(-40%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(40%); opacity: 0; } }
#boot-splash .bp {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0; border: none; background: none; box-shadow: none; backdrop-filter: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  animation: bpRise .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bpRise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.bp-mark { display: flex; align-items: center; gap: 4px; }
.bp-mark-tx {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(42px, 7vw, 76px);
  font-weight: 900; letter-spacing: -.06em; line-height: 1;
  color: #f8fafc;
  text-shadow: 0 0 44px #a78bfa66, 0 2px 0 #00000066;
  animation: bpMark 1.1s cubic-bezier(.16,1,.3,1) both;
}
.bp-mark-tx span { color: #a78bfa; }
@keyframes bpMark { from { letter-spacing: .16em; opacity: 0; filter: blur(8px); } to { letter-spacing: -.06em; opacity: 1; filter: blur(0); } }
.bp-caret { width: 10px; height: 1.05em; background: #a78bfa; border-radius: 2px; animation: bpCaret 1s steps(2, start) infinite; }
@keyframes bpCaret { 50% { opacity: 0; } }
.bp-sub { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #94a3b8; margin-bottom: 18px; }
.bp-lines { display: flex; flex-direction: column; gap: 5px; width: min(330px, 78vw); }
.bp-lines span {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: #cbd5e1;
  opacity: 0; transform: translateY(4px);
  animation: bpLine .5s ease both;
  animation-delay: calc(.35s + var(--i) * .34s);
}
.bp-lines b { color: #a78bfa; font-weight: 700; }
.bp-lines span:last-child { color: #86efac; }
.bp-lines span:last-child b { color: #86efac; }
@keyframes bpLine { to { opacity: 1; transform: none; } }
.bp-bar {
  width: min(330px, 78vw); height: 3px; margin-top: 18px;
  border-radius: 3px; background: #ffffff14; overflow: hidden;
}
.bp-bar i {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #818cf8, #c084fc, #22d3ee);
  transform-origin: left;
  animation: bpBar 2.2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes bpBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bp-foot {
  width: min(330px, 78vw); display: flex; justify-content: space-between;
  margin-top: 2px; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #64748b;
}
@media (prefers-reduced-motion: reduce) {
  .bp-grid, .bp-scan, .bp-caret { animation: none !important; }
  .bp-lines span { animation: none !important; opacity: 1; transform: none; }
  .bp-bar i { animation: none !important; }
}

/* ============================================================================
   AYARLAR → PROFİL: giriş/kayıt kartı (eski çakışan .auth-card bloklarını ezer)
   ============================================================================ */
.set-profile .auth-card--gate {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 94%, transparent), var(--bg-2));
  box-shadow: 0 28px 70px -46px #000d;
  animation: acGateIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes acGateIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.ac-gate-head { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ac-gate-logo { font-family: var(--font-sans, system-ui, sans-serif); font-size: 1.35em; font-weight: 900; letter-spacing: -.05em; }
.ac-gate-logo span { color: var(--accent); }
.ac-gate-head b { font-size: .95em; letter-spacing: -.01em; }
.ac-gate-head i { font-style: normal; font-size: .68em; color: var(--muted); line-height: 1.45; max-width: 34ch; }
.set-profile .auth-card--gate .auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border: 1px solid var(--line);
  overflow: hidden;
}
.set-profile .auth-card--gate .auth-tab {
  position: relative;
  z-index: 2;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .74em;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s;
}
.set-profile .auth-card--gate .auth-tab.on { color: var(--fg); }
.set-profile .auth-card--gate .auth-tab-ink {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: 36px;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 3px 12px -6px #000a;
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.set-profile .auth-card--gate .auth-body { display: flex; flex-direction: column; gap: 11px; animation: none; }
.set-profile .auth-card--gate .auth-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.set-profile .auth-card--gate .auth-lbl { font-size: .64em; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.set-profile .auth-card--gate .set-input,
.set-profile .auth-card--gate input.set-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: .8em;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.set-profile .auth-card--gate .set-input:focus {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.set-profile .auth-card--gate .auth-submit {
  width: 100%;
  height: 44px;
  margin: 2px 0 0;
  padding: 0 16px;
  justify-content: center;
  font-size: .8em;
  font-weight: 800;
  border-radius: 12px;
}
.set-profile .auth-card--gate .auth-link { align-self: flex-end; font-size: .68em; }
.set-profile .auth-card--gate .ac-gate-foot { text-align: center; font-size: .62em; color: var(--muted); }
.set-profile .auth-card--gate .maint-note { border-radius: 12px; }
.set-profile .auth-card--gate .av-grid { margin-top: 8px; }
.set-profile .auth-card--gate .auth-consent { font-size: .68em; color: var(--muted); }
.set-profile .auth-card--gate .chat-terms { font-size: .92em; }
@media (max-width: 520px) {
  .set-profile .auth-card--gate { padding: 20px 16px 18px; border-radius: 18px; }
}

/* ============================================================================
   PDF READER 2.0 — kitaplık + koyu sahne + büyük indirme
   ============================================================================ */
.pdf-app--new { display: grid !important; grid-template-columns: 262px minmax(0, 1fr) !important; height: 100%; min-height: 0; background: transparent; }
.pdf-app--new .pdf-side {
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  display: flex; flex-direction: column; min-height: 0;
}
.pdf-app--new .pdf-side-head { padding: 15px 14px 10px; display: flex; flex-direction: column; gap: 9px; }
.pdf-side-title { display: flex; flex-direction: column; gap: 1px; }
.pdf-side-title b { font-size: .86em; letter-spacing: -.01em; }
.pdf-side-title span { font-size: .62em; color: var(--muted); }
.pdf-search {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.pdf-search span { color: var(--muted); font-size: .9em; }
.pdf-search input { flex: 1; min-width: 0; border: none; background: none; color: var(--fg); font: inherit; font-size: .72em; outline: none; }
.pdf-app--new .pdf-list { padding: 2px 9px 10px; overflow: auto; display: flex; flex-direction: column; gap: 5px; }
.pdf-app--new .pdf-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 9px; text-align: left;
  border: 1px solid transparent; border-radius: 11px;
  background: none; color: var(--fg); font: inherit; cursor: pointer;
}
.pdf-app--new .pdf-item:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.pdf-app--new .pdf-item.on {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.pdf-app--new .pdf-item > span:first-child { width: 30px; height: 34px; color: #ef4444; flex: 0 0 30px; }
.pdf-app--new .pdf-item > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pdf-app--new .pdf-item b { font-size: .72em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-app--new .pdf-item i { font-style: normal; font-size: .6em; color: var(--muted); }
.pdf-side-foot { margin-top: auto; padding: 9px 14px; border-top: 1px solid var(--line); font-size: .58em; color: var(--muted); }
.pdf-app--new .pdf-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #0e1016; }
.pdf-app--new .pdf-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* 69px'lik çubuk, belgenin üstünde koca bir bant gibi duruyordu. */
  padding: 6px 12px; min-height: 48px;
  border-bottom: 1px solid #ffffff14; background: #12141c;
}
.pdf-app--new .pdf-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pdf-app--new .pdf-name > span { width: 26px; height: 30px; color: #f87171; flex: 0 0 26px; }
.pdf-app--new .pdf-name > div { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pdf-app--new .pdf-name b { font-size: .8em; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-app--new .pdf-name i { font-style: normal; font-size: .58em; color: #94a3b8; }
.pdf-app--new .pdf-actions { display: flex; align-items: center; gap: 7px; flex: none; }
.pdf-app--new .pdf-zoom { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid #ffffff1f; background: #ffffff0a; }
.pdf-app--new .pdf-zbtn { width: 26px; height: 26px; border: none; border-radius: 7px; background: none; color: #e2e8f0; font: inherit; font-size: .9em; cursor: pointer; }
.pdf-app--new .pdf-zbtn:hover { background: #ffffff14; }
.pdf-app--new .pdf-zoom span { min-width: 40px; text-align: center; font-size: .64em; color: #cbd5e1; }
.pdf-app--new .pdf-dl {
  height: 44px !important; padding: 0 18px !important;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8em !important; font-weight: 800 !important;
  border-radius: 12px !important;
  background: var(--accent) !important; color: #0b0d12 !important;
  border: none !important;
  box-shadow: 0 10px 24px -12px var(--accent);
}
.pdf-app--new .pdf-dl:hover { filter: brightness(1.06); }
.pdf-app--new .pdf-stage { position: relative; flex: 1; min-height: 0; padding: 10px; display: flex; }
.pdf-app--new .pdf-sheet {
  position: relative; flex: 1; min-height: 0;
  border-radius: 10px; overflow: auto;
  background: #22252e;
  box-shadow: 0 26px 60px -30px #000, inset 0 0 0 1px #ffffff10;
}
.pdf-app--new #pdf-frame { width: 100%; height: 100%; border: none; display: block; background: #22252e; }
.pdf-app--new .pdf-empty {
  position: absolute; inset: 18px; display: grid; place-content: center; justify-items: center; gap: 8px;
  text-align: center; padding: 24px; color: #cbd5e1;
  background: rgba(20, 22, 29, .94); border-radius: 10px;
}
.pdf-app--new .pdf-empty[hidden] { display: none; }
.pdf-app--new .pdf-empty span { width: 54px; height: 62px; color: #f87171; }
.pdf-app--new .pdf-empty b { font-size: 1em; }
.pdf-app--new .pdf-empty p { margin: 0; max-width: 44ch; font-size: .72em; color: #94a3b8; line-height: 1.55; }
.pdf-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px; border-top: 1px solid #ffffff10;
  background: #12141c; color: #64748b; font-size: .58em;
}
@media (max-width: 780px) {
  .pdf-app--new { grid-template-columns: 1fr !important; }
  .pdf-app--new .pdf-side { max-height: 172px; border-right: none; border-bottom: 1px solid var(--line); }
  .pdf-app--new .pdf-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .pdf-app--new .pdf-item { min-width: 190px; }
  .pdf-side-foot { display: none; }
  .pdf-app--new .pdf-bar { flex-wrap: wrap; }
  .pdf-app--new .pdf-actions { width: 100%; justify-content: space-between; }
  .pdf-app--new .pdf-dl { flex: 1; justify-content: center; }
  .pdf-app--new .pdf-stage { padding: 10px; }
}

/* ============================================================================
   ABOUT 3.0 — işe alım vitrini
   ============================================================================ */
.ab3 {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: radial-gradient(circle at 78% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 48%);
}
.ab3-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 26px;
  align-items: center;
  padding: 34px 32px 30px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.ab3-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%);
  pointer-events: none;
}
.ab3-hero-main { position: relative; z-index: 1; min-width: 0; }
.ab3-kicker {
  display: inline-block;
  font-size: .58em; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 900; color: var(--accent);
}
.ab3-hero h1 {
  margin: 8px 0 4px;
  font-size: clamp(2.3em, 5.6vw, 3.5em);
  line-height: .95;
  letter-spacing: -.055em;
}
.ab3-role { margin: 0; font-size: .82em; font-weight: 700; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.ab3-pitch {
  margin: 13px 0 0;
  max-width: 54ch;
  font-size: .84em;
  line-height: 1.65;
  color: var(--muted);
}
.ab3-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ab3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 11px;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  color: var(--fg); text-decoration: none; font: inherit; font-size: .74em; font-weight: 700;
  cursor: pointer; transition: transform .14s, border-color .14s, background .14s;
}
.ab3-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ab3-btn--primary { background: var(--accent); border-color: var(--accent); color: #0b0d12; box-shadow: 0 12px 26px -14px var(--accent); }
.ab3-btn--ghost { background: transparent; }
.ab3-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 16px; font-size: .64em; color: var(--muted); }
.ab3-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, #22c55e 40%, transparent); color: #22c55e; font-weight: 800; }
.ab3-live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 #22c55e88; animation: ab3Pulse 1.8s infinite; }
@keyframes ab3Pulse { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ab3-term {
  position: relative; z-index: 1;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  background: #0b1020;
  box-shadow: 0 26px 60px -34px #000;
  font-family: var(--font-mono, ui-monospace, monospace);
  transform: rotate(.4deg);
}
.ab3-term-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #151a2b; border-bottom: 1px solid #ffffff14; }
.ab3-term-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.ab3-term-bar i:nth-child(2) { background: #f59e0b; }
.ab3-term-bar i:nth-child(3) { background: #22c55e; }
.ab3-term-bar span { margin-left: 5px; font-size: .56em; color: #94a3b8; }
.ab3-term-body { padding: 13px 14px 16px; display: flex; flex-direction: column; gap: 3px; font-size: .62em; line-height: 1.55; color: #cbd5e1; }
.ab3-term-body p { margin: 0; }
.ab3-term-body p b { color: #818cf8; }
.ab3-term-body p.ok { color: #86efac; }
.ab3-term-body p:first-of-type { margin-top: 0; }
.ab3-cursor { display: inline-block; width: 6px; height: 10px; background: #a78bfa; vertical-align: -1px; animation: bpCaret 1s steps(2, start) infinite; }
.ab3-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 32px; }
.ab3-stat {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
}
.ab3-stat b { display: block; font-size: 1.5em; letter-spacing: -.04em; }
.ab3-stat span { font-size: .62em; color: var(--muted); }
.ab3-sec { padding: 0 32px; }
.ab3-sec-head { margin-bottom: 12px; }
.ab3-sec-head > span { font-size: .56em; letter-spacing: .18em; text-transform: uppercase; font-weight: 900; color: var(--accent); }
.ab3-sec-head h2 { margin: 3px 0 3px; font-size: 1.15em; letter-spacing: -.025em; }
.ab3-sec-head p { margin: 0; font-size: .68em; color: var(--muted); }
.ab3-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ab3-case {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px; border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 8%, var(--bg-2)), var(--bg-2));
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.ab3-case:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tint) 45%, var(--line)); box-shadow: 0 18px 38px -26px #000; }
.ab3-case-top { display: flex; align-items: center; gap: 7px; }
.ab3-case-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 10px var(--tint); }
.ab3-case h3 { margin: 0; font-size: 1em; letter-spacing: -.02em; }
.ab3-case-metric { margin-left: auto; font-size: .58em; font-weight: 800; color: var(--tint); padding: 2px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tint) 38%, transparent); }
.ab3-case-role { margin: 0 0 3px; font-size: .62em; color: var(--muted); }
.ab3-case-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.ab3-case-row span { font-size: .54em; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--muted); padding-top: 2px; }
.ab3-case-row p { margin: 0; font-size: .68em; line-height: 1.5; color: color-mix(in srgb, var(--fg) 88%, transparent); }
.ab3-case-row--out p { color: var(--fg); }
.ab3-case-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; }
.ab3-case-foot i { font-style: normal; font-size: .54em; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--muted); }
.ab3-case-foot a { margin-left: auto; font-size: .6em; font-weight: 700; color: var(--tint); text-decoration: none; }
.ab3-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ab3-principle { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--bg-2) 66%, transparent); }
.ab3-principle > span { font-size: .58em; font-weight: 900; letter-spacing: .1em; color: var(--accent); }
.ab3-principle b { display: block; margin: 5px 0 4px; font-size: .85em; }
.ab3-principle p { margin: 0; font-size: .66em; line-height: 1.55; color: var(--muted); }
.ab3-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ab3-skills { display: flex; flex-direction: column; gap: 8px; }
.ab3-skill { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.ab3-skill span { font-size: .6em; font-weight: 800; color: var(--muted); padding-top: 3px; }
.ab3-skill div { display: flex; flex-wrap: wrap; gap: 4px; }
.ab3-skill i { font-style: normal; font-size: .6em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
.ab3-timeline { display: flex; flex-direction: column; gap: 0; }
.ab3-tl { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 7px 0; position: relative; }
.ab3-tl:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 19px; bottom: -7px; width: 1px; background: var(--line); }
.ab3-tl > i { width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); z-index: 1; }
.ab3-tl b { display: block; font-size: .74em; }
.ab3-tl span { display: block; font-size: .62em; color: var(--muted); line-height: 1.45; }
.ab3-contact {
  margin: 0 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 22px 24px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background:
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    linear-gradient(130deg, color-mix(in srgb, var(--accent) 10%, var(--bg-2)), var(--bg-2));
}
.ab3-contact h2 { margin: 4px 0 5px; font-size: 1.35em; letter-spacing: -.03em; }
.ab3-contact p { margin: 0; max-width: 56ch; font-size: .7em; line-height: 1.6; color: var(--muted); }
.ab3-contact-act { display: flex; flex-direction: column; gap: 7px; min-width: 190px; }
@media (max-width: 900px) {
  .ab3-hero { grid-template-columns: 1fr; padding: 26px 22px; }
  .ab3-term { transform: none; }
  .ab3-stats { grid-template-columns: repeat(2, 1fr); padding: 0 22px; }
  .ab3-sec { padding: 0 22px; }
  .ab3-cases { grid-template-columns: 1fr; }
  .ab3-principles { grid-template-columns: 1fr; }
  .ab3-two { grid-template-columns: 1fr; }
  .ab3-contact { grid-template-columns: 1fr; margin: 0 22px; }
  .ab3-contact-act { min-width: 0; }
}

/* ============================================================================
   CLUB 5 — Clubhouse hissi (kapaklı oda kartları + sahne + kontrol barı)
   ============================================================================ */
.club4-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)) !important;
  gap: 14px !important;
  padding: 4px 18px 20px !important;
}
.club4-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 7px;
  min-height: 218px;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, hsl(var(--h, 262) 70% 60%) 22%, var(--line)) !important;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent) !important;
  overflow: hidden;
}
.club4-card::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 92px;
  background:
    radial-gradient(circle at 24% 20%, hsl(var(--h, 262) 78% 62% / .55), transparent 58%),
    linear-gradient(120deg, hsl(var(--h, 262) 60% 26% / .9), hsl(calc(var(--h, 262) + 34) 58% 18% / .9));
  pointer-events: none;
}
.club4-card::after {
  content: "";
  position: absolute; inset: 92px 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff2b, transparent);
}
.club4-card > * { position: relative; z-index: 1; }
.club4-card-top { padding-top: 48px; display: flex; align-items: flex-end; justify-content: space-between; }
.club4-avatar {
  width: 54px !important; height: 54px !important; flex: 0 0 54px;
  border-radius: 16px !important;
  display: grid; place-items: center;
  font-size: 1.15em !important; font-weight: 900;
  color: #fff;
  background: linear-gradient(150deg, hsl(var(--h, 262) 80% 58%), hsl(calc(var(--h, 262) + 38) 72% 34%)) !important;
  border: 2px solid #ffffff38;
  box-shadow: 0 12px 26px -12px #000c;
}
.club4-card-name { font-size: .96em !important; letter-spacing: -.02em; margin-top: 2px; }
.club4-card-desc { min-height: 2.3em; font-size: .66em !important; line-height: 1.45; }
.club4-card-people { min-height: 24px; }
.club4-card-foot { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); }
.club4-go { border-radius: 10px !important; font-weight: 800; }
.club4-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -30px #000; }
.club4-card.on, .club4-card.joined { border-color: hsl(var(--h, 262) 70% 62% / .65) !important; }

.club4-stage-card { border-radius: 20px !important; overflow: hidden; }
.club4-stage-hero { padding: 20px !important; }
.club4-stage-av { width: 62px !important; height: 62px !important; border-radius: 18px !important; font-size: 1.2em !important; }
.club4-stage-body { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; padding: 16px 18px !important; }
.club4-people { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px !important; }
.club4-person {
  display: flex !important; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px !important; border-radius: 12px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  font-size: .64em; text-align: center;
}
.club4-host { width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: .9em !important; }
.club4-stage-controls {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 42%, transparent);
}
.club4-ctrl {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-2); color: var(--fg);
  font: inherit; font-size: .7em; font-weight: 700; cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.club4-ctrl:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.club4-ctrl.on { background: color-mix(in srgb, #22c55e 18%, var(--bg-2)); border-color: #22c55e77; color: #22c55e; }
.club4-ctrl--chat { background: var(--accent); border-color: var(--accent); color: #0b0d12; }
.club4-ctrl--leave { color: #f87171; border-color: #f8717155; }
.club4-ctrl--leave:hover { background: #f8717118; }
@media (max-width: 760px) {
  .club4-grid { grid-template-columns: 1fr !important; padding: 4px 12px 16px !important; }
  .club4-stage-body { grid-template-columns: 1fr; }
  .club4-stage-controls { flex-wrap: wrap; }
  .club4-ctrl { flex: 1; justify-content: center; min-width: 110px; }
}

/* ============================================================================
   CHIRP 2 — stories, atmosfer, daha canlı kartlar
   ============================================================================ */
.chirp-stories {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 2px 18px 12px; overflow-x: auto; scrollbar-width: none;
}
.chirp-stories::-webkit-scrollbar { display: none; }
.chirp-story {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 68px; border: none; background: none; color: var(--muted);
  font: inherit; font-size: .58em; cursor: pointer;
}
.chirp-story-ring {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  padding: 3px;
  background: conic-gradient(from 210deg, #f97316, #ec4899, #8b5cf6, #22d3ee, #f97316);
  box-shadow: 0 6px 16px -8px #0008;
  transition: transform .15s;
}
.chirp-story:hover .chirp-story-ring { transform: scale(1.05); }
.chirp-story-ring i {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2);
  color: var(--fg); font-style: normal; font-weight: 900; font-size: 1.25em;
  border: 2px solid var(--bg-2);
}
.chirp-story--add .chirp-story-ring { background: var(--line); }
.chirp-story--add .chirp-story-ring i { color: var(--accent); font-size: 1.5em; }
.chirp-story b { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chirp-atmo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 18px 12px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 62%, transparent);
  font-size: .62em; color: var(--muted);
}
.chirp-atmo b { color: var(--fg); font-size: 1.05em; }
.chirp-atmo-live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #f59e0b; font-weight: 700; }
.chirp-atmo-live i { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; animation: ab3Pulse 1.8s infinite; }
.chirp-card {
  border-radius: 18px !important;
  border: 1px solid var(--line) !important;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-2) 82%, transparent) !important;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.chirp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)) !important; box-shadow: 0 18px 40px -28px #000; }
.chirp-frame { background: #0b0d12; }
.chirp-feed { gap: 14px !important; padding: 0 18px 20px; }
.chirp-compose { border-radius: 16px !important; margin: 0 18px 14px !important; }
@media (max-width: 760px) {
  .chirp-stories { padding: 2px 12px 10px; }
  .chirp-atmo { margin: 0 12px 10px; }
  .chirp-feed { padding: 0 12px 16px; }
  .chirp-compose { margin: 0 12px 12px !important; }
}

/* ============================================================================
   SUNUCU PANELİ — kullanıcı yönetimi + kod/servis
   ============================================================================ */
.adm-users-block {
  margin-top: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
}
.adm-users-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.adm-users-head .adm-block-head { margin: 0; }
.adm-users-head i { font-style: normal; font-size: .86em; color: var(--muted); margin-left: 5px; }
.adm-users-tools { display: flex; align-items: center; gap: 7px; flex: 1; justify-content: flex-end; min-width: 220px; }
.adm-users-tools .set-input { max-width: 270px; height: 34px; font-size: .72em; }
.adm-users-tools .btnl { height: 34px; padding: 0 11px; font-size: .68em; white-space: nowrap; }
.adm-server-users { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow: auto; }
.adm-server-users .adm-user {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 9px;
  border: 1px solid transparent;
}
.adm-server-users .adm-user:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); border-color: var(--line); }
.adm-user-tx { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.adm-user-tx b { font-size: .74em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-user-tx i { font-style: normal; font-size: .62em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-user-on { font-size: .58em; color: #22c55e; font-weight: 800; white-space: nowrap; }
.adm-user-del { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; font-size: .6em; }
.adm-user-del:hover { color: #f87171; border-color: #f8717166; background: #f8717112; }
.adm-users-empty { padding: 16px 8px; }

.adm-code { margin-top: 14px; }
.adm-code-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.adm-code-tree {
  max-height: 470px; overflow: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.adm-code-file {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 7px; align-items: center;
  padding: 6px 7px; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.adm-code-file:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.adm-code-file.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.adm-code-file > span { grid-row: 1 / 3; width: 30px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: .52em; font-weight: 900; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.adm-code-file b { font-size: .66em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-code-file i { font-style: normal; font-size: .54em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-code-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.adm-code-bar { display: flex; align-items: center; gap: 9px; }
.adm-code-bar b { font-size: .7em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-code-bar span { font-size: .58em; color: var(--muted); margin-left: auto; white-space: nowrap; }
.adm-code-bar .btnl { height: 32px; padding: 0 12px; font-size: .66em; }
#adm-code-editor {
  width: 100%; height: 330px; resize: vertical;
  padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 11px;
  background: #0b0f1a; color: #dbe4f4;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px; line-height: 1.6;
  tab-size: 2; outline: none;
}
#adm-code-editor:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
#adm-code-editor:disabled { opacity: .55; }
.adm-code-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-code-acts .btnl { height: 32px; padding: 0 12px; font-size: .66em; }
.adm-code-out {
  margin: 0; min-height: 74px; max-height: 220px; overflow: auto;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #070a12; color: #a7f3d0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 860px) {
  .adm-code-grid { grid-template-columns: 1fr; }
  .adm-code-tree { max-height: 190px; flex-direction: row; overflow-x: auto; }
  .adm-code-file { min-width: 170px; }
  .adm-users-tools { min-width: 0; width: 100%; justify-content: stretch; }
  .adm-users-tools .set-input { max-width: none; flex: 1; }
}

/* About: flex kolonunda bölümler sıkışmasın (hero overflow:hidden yüzünden
   otomatik min-height sıfırlanıyordu ve başlık/CTA görünmüyordu). */
.ab3 > * { flex: 0 0 auto; }

/* Kayıt formu: opsiyonel alanlar katlanır, ana buton ekranda kalır. */
.set-profile .auth-card--gate .ac-gate-more {
  border: 1px solid var(--line); border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  padding: 0 11px;
}
.set-profile .auth-card--gate .ac-gate-more summary {
  cursor: pointer; list-style: none; padding: 9px 0;
  font-size: .66em; font-weight: 700; color: var(--muted);
}
.set-profile .auth-card--gate .ac-gate-more summary::-webkit-details-marker { display: none; }
.set-profile .auth-card--gate .ac-gate-more summary::after { content: "＋"; float: right; color: var(--accent); }
.set-profile .auth-card--gate .ac-gate-more[open] summary::after { content: "−"; }
.set-profile .auth-card--gate .ac-gate-more-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 11px; }

/* Chirp: flex kolonunda stories/composer sıkışıp yatay taşma yapıyordu. */
.chirp-main { min-width: 0; overflow-x: hidden; }
.chirp-main > * { flex: 0 0 auto; }
.chirp-stories { min-height: 82px; }
.chirp-feed { overflow-x: hidden; }

/* Kod paneli: dosya ağacı biraz daha dar, editör daha geniş. */
.adm-code-grid { grid-template-columns: 210px minmax(0, 1fr); }

/* Şifre kuralları ancak yazmaya başlayınca görünsün: boş formda kartı
   gereksiz yere uzatıp "hesap oluştur" butonunu ekranın altına itiyordu. */
.set-profile .auth-card--gate .auth-field:has(#set-pfpass:placeholder-shown) .pw-meter,
.set-profile .auth-card--gate .auth-field:has(#set-pfpass:placeholder-shown) .pw-rules-box {
  display: none;
}

/* Dikey ekran görüntüsü: kırpmak yerine tamamını göster. */
.as-d-hero img.is-portrait { object-fit: contain; background: #0b0d12; }

/* ==========================================================================
   YENİ TUR — Auth, giriş ekranı ve topluluk ön-girişleri
   ========================================================================== */

/* --- 1. Topluluk ön-girişi (her uygulamaya özel) ------------------------- */
.pl-gate {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(70% 60% at 18% 20%, color-mix(in srgb, var(--pl-a) 26%, transparent), transparent 62%),
    radial-gradient(60% 60% at 82% 78%, color-mix(in srgb, var(--pl-b) 24%, transparent), transparent 64%),
    rgba(6, 8, 14, .78);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  animation: plFade .28s ease both;
}
@keyframes plFade { from { opacity: 0; } to { opacity: 1; } }
.pl-gate.pl-shake .pl-shell { animation: plShake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes plShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.pl-shell {
  width: min(1060px, 96vw);
  min-height: min(640px, 92vh);
  max-height: 92vh;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--bg-2);
  box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.08) inset;
  animation: plRise .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes plRise { from { transform: translateY(24px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.pl-brand {
  position: relative;
  overflow: hidden;
  padding: 34px 36px 28px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(120% 100% at 15% 0%, color-mix(in srgb, var(--pl-a) 80%, #fff 0%), transparent 55%),
    linear-gradient(155deg, color-mix(in srgb, var(--pl-a) 94%, #06111c), color-mix(in srgb, var(--pl-b) 80%, #05060b));
}
.pl-brand-pattern {
  position: absolute; inset: 0; opacity: .32; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, #fff 1px, transparent 1.5px);
  background-size: 44px 44px, 44px 44px, 44px 44px;
  mask-image: radial-gradient(90% 80% at 50% 30%, #000 20%, transparent 78%);
}
.pl-brand::after {
  content: "";
  position: absolute; width: 340px; height: 340px; right: -120px; bottom: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pl-b) 80%, #fff), transparent 66%);
  filter: blur(8px); opacity: .55;
}
.pl-brand-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.pl-brand-logo, .pl-mini-logo, .pl-logo { font: 800 17px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.5px; }
.pl-brand-logo span, .pl-mini-logo span { opacity: .62; }
.pl-brand-service {
  padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10);
}
.pl-brand-icon {
  position: relative; z-index: 1; width: 78px; height: 78px; margin: 44px 0 22px;
  display: grid; place-items: center; border-radius: 24px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 18px 44px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.3) inset;
  backdrop-filter: blur(6px);
}
.pl-brand-icon svg { width: 38px; height: 38px; stroke: #fff; stroke-width: 1.8; fill: none; }
.pl-brand-copy { position: relative; z-index: 1; }
.pl-kicker { font-size: 10px; letter-spacing: .18em; font-weight: 800; opacity: .72; }
.pl-brand-copy h1 { margin: 10px 0 10px; font: 800 clamp(26px, 3vw, 38px)/1.06 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.03em; }
.pl-brand-copy p { margin: 0; max-width: 38ch; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.86); }
.pl-bullets { position: relative; z-index: 1; list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.pl-bullets li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); }
.pl-bullets li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.26); }
.pl-brand-foot { position: relative; z-index: 1; margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.66); }
.pl-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.18); }
.pl-panel { position: relative; padding: 44px 48px 30px; display: flex; flex-direction: column; background: var(--bg-2); color: var(--fg); }
.pl-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-3); color: var(--muted); font-size: 13px; cursor: pointer; transition: .18s; }
.pl-close:hover { color: var(--fg); transform: rotate(90deg); }
.pl-panel-head { margin-bottom: 22px; }
.pl-mini-logo { display: block; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.pl-panel-head h2 { margin: 0 0 7px; font: 800 24px/1.18 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; }
.pl-panel-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pl-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: var(--bg-3); border: 1px solid var(--line); margin-bottom: 20px; }
.pl-tab { position: relative; z-index: 1; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight:700;font-size:13px;line-height:1;font-family:inherit; cursor: pointer; transition: color .18s; }
.pl-tab.on { color: var(--fg); }
.pl-tab-ink { position: absolute; z-index: 0; top: 4px; left: 4px; width: calc(50% - 4px); height: 38px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.16); transition: transform .28s cubic-bezier(.2,.9,.3,1); }
.pl-form { display: flex; flex-direction: column; gap: 13px; }
.pl-field { display: flex; flex-direction: column; gap: 7px; }
.pl-field > span { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pl-field > span i { font-style: normal; font-weight: 600; opacity: .65; font-size: 10px; }
.pl-field input {
  height: 48px; padding: 0 15px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg);
  font-weight:500;font-size:14px;line-height:1;font-family:inherit; outline: none; transition: border-color .18s, box-shadow .18s, background .18s;
  width: 100%;
}
.pl-field input:focus { border-color: color-mix(in srgb, var(--pl-a) 62%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-a) 18%, transparent); background: var(--bg-2); }
.pl-field input::placeholder { color: var(--faint); }
.pl-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 11.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.pl-consent input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--pl-a); flex: 0 0 auto; }
.pl-form .pl-field--signup, .pl-form .pl-consent.pl-field--signup { display: none; }
.pl-gate[data-mode="signup"] .pl-form .pl-field--signup { display: flex; }
.pl-gate[data-mode="signup"] .pl-form .pl-consent.pl-field--signup { display: flex; }
.pl-err { min-height: 0; color: var(--err); font-size: 12px; font-weight: 600; line-height: 1.4; }
.pl-err:not(:empty) { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--err) 12%, transparent); border: 1px solid color-mix(in srgb, var(--err) 26%, transparent); }
.pl-submit {
  position: relative; height: 50px; border: 0; border-radius: 13px; cursor: pointer;
  color: #071018; background: linear-gradient(120deg, color-mix(in srgb, var(--pl-a) 94%, #fff), color-mix(in srgb, var(--pl-b) 86%, #fff));
  font: 800 14px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .01em;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--pl-a) 24%, transparent);
  transition: transform .16s, filter .16s, box-shadow .16s;
  display: grid; place-items: center; overflow: hidden;
}
.pl-submit:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 34px color-mix(in srgb, var(--pl-a) 30%, transparent); }
.pl-submit:active { transform: translateY(0) scale(.995); }
.pl-submit.done { background: #22c55e; color: #04140a; }
.pl-spin { display: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(0,0,0,.22); border-top-color: #071018; animation: plSpin .7s linear infinite; }
.pl-submit.loading span { display: none; }
.pl-submit.loading .pl-spin { display: block; }
@keyframes plSpin { to { transform: rotate(360deg); } }
.pl-panel-foot { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--faint); }
.pl-link { border: 0; background: none; color: var(--muted); font-weight:600;font-size:11px;line-height:1;font-family:inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pl-link:hover { color: var(--fg); }

/* --- 2. Ayarlar > Profil auth kartı: büyük, ferah, gerçek form ---------- */
.set-profile { display: flex; flex-direction: column; gap: 16px; }
.set-profile .auth-card {
  width: 100%; max-width: 620px; margin: 0 auto; padding: 26px 28px 24px;
  border-radius: 22px; border: 1px solid var(--line); background: var(--bg-2);
  box-shadow: 0 16px 40px rgba(0,0,0,.18); animation: none;
}
.set-profile .auth-card--signed { max-width: 620px; }
.set-profile .auth-card .auth-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.set-profile .auth-card .auth-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--muted); }
.set-profile .auth-card .set-input,
.set-profile .auth-card input.set-input,
.set-profile .auth-card .auth-field input {
  height: 48px; padding: 0 15px; border-radius: 12px; font-size: 14px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg);
  width: 100%; outline: none; transition: border-color .18s, box-shadow .18s;
}
.set-profile .auth-card .set-input:focus { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.set-profile .auth-card .auth-submit { width: 100%; height: 48px; border-radius: 12px; font-weight: 800; margin-top: 4px; }
.set-profile .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: var(--bg-3); border: 1px solid var(--line); position: relative; margin-bottom: 18px; }
.set-profile .auth-tab { height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-weight:700;font-size:13px;line-height:1;font-family:inherit; cursor: pointer; position: relative; z-index: 1; }
.set-profile .auth-tab.on { color: var(--fg); }
.set-profile .auth-tab-ink { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: 40px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); transition: transform .28s cubic-bezier(.2,.9,.3,1); }
.set-profile .ac-gate-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
.set-profile .ac-gate-logo { font: 800 14px/1 "Space Grotesk", system-ui, sans-serif; color: var(--muted); }
.set-profile .ac-gate-logo span { opacity: .6; }
.set-profile .ac-gate-head b { font: 800 22px/1.2 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; }
.set-profile .ac-gate-head i { font-style: normal; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.set-profile .ac-gate-more { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px; background: var(--bg-3); }
.set-profile .ac-gate-more summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted); }
.set-profile .ac-gate-more-body { padding-top: 12px; }
.set-profile .auth-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--muted); }
.set-profile .auth-consent input { width: 17px; height: 17px; accent-color: var(--accent); }
.set-profile .ac-gate-foot { display: block; text-align: center; margin-top: 12px; color: var(--faint); font-size: 11px; }
.set-profile .auth-link { align-self: flex-end; background: none; border: 0; color: var(--muted); font-weight:600;font-size:12px;line-height:1;font-family:inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.set-profile .av-pick { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-3); cursor: pointer; }
.set-profile .av-pick-big { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; }
.set-profile .av-pick-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.set-profile .av-pick-txt span { color: var(--muted); font-size: 11px; }

/* --- 3. PC giriş ekranı: Apple/Ubuntu hissi ----------------------------- */
#login {
  background:
    radial-gradient(80% 70% at 20% 12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(70% 70% at 82% 88%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 66%),
    linear-gradient(160deg, #07080d 0%, #0b0d17 48%, #05060a 100%);
}
#login .login-rings, #login .login-stars { opacity: .28; }
#login .login-stage { grid-template-columns: minmax(0, 1fr) !important; place-items: center; padding: 24px; }
#login .login-art { display: none !important; }
#login .login-card {
  width: min(400px, calc(100vw - 40px));
  padding: 34px 34px 28px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(165deg, rgba(28,30,42,.84), rgba(14,16,24,.9));
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.16) inset;
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  color: #f4f6fb;
  text-align: center;
}
#login .login-logo { font: 800 22px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.04em; color: #fff; text-align: center; }
#login .login-logo span { color: var(--accent); }
#login .login-sub { color: rgba(255,255,255,.54); font-size: 12px; margin-top: 6px; text-align: center; }
#login .login-orb { margin: 26px auto 16px; width: 92px; height: 92px; }
#login .login-avatar { width: 92px; height: 92px; border-radius: 28px; font: 800 30px/1 "Space Grotesk", sans-serif; display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 82%, #fff), color-mix(in srgb, var(--accent-2) 70%, #111)); color: #0b0d12; box-shadow: 0 18px 38px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; }
#login .login-orb-ring { border-color: rgba(255,255,255,.18); }
#login .login-name { color: #fff; font: 800 20px/1.2 "Space Grotesk", sans-serif; text-align: center; }
#login .login-status { color: rgba(255,255,255,.55); font-size: 12px; margin-top: 5px; text-align: center; }
#login .login-pass { margin: 16px 0 2px; }
#login .login-pass-input { height: 48px; border-radius: 13px; font-size: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; }
#login .login-btn {
  width: 100%; height: 50px; margin-top: 20px; border-radius: 14px; border: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 92%, #fff), color-mix(in srgb, var(--accent-2) 78%, #fff));
  color: #0a0c12; font: 800 14px/1 "Space Grotesk", sans-serif; cursor: pointer;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 26%, transparent);
  transition: transform .16s, filter .16s;
}
#login .login-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
#login .login-btn span { display: inline-flex; align-items: center; gap: 8px; }
#login .login-guest { width: 100%; margin-top: 10px; }
#login .login-hint { color: rgba(255,255,255,.42); font-size: 11px; text-align: center; margin-top: 14px; }
#login .login-lang { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: rgba(255,255,255,.5); font-size: 11px; }
#login .login-lang select { height: 34px; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 11px; }
/* Müzik çubuğu: eski üç ayrı kutu yerine tek, zarif bir satır. */
#login .login-now {
  margin-top: 20px; padding: 10px 12px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 10px; text-align: left;
}
#login .login-now .sd-eq { flex: 0 0 22px; display: flex; align-items: flex-end; gap: 2px; height: 16px; }
#login .login-now .sd-eq i { width: 3px; border-radius: 2px; background: var(--accent); }
#login .login-now-tx { flex: 1; min-width: 0; font-size: 11px; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#login .login-now-btns { display: flex; align-items: center; gap: 4px; }
#login .ln-rnd { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); font-size: 10px; cursor: pointer; display: grid; place-items: center; transition: .15s; }
#login .ln-rnd:hover { background: rgba(255,255,255,.16); color: #fff; }
#login .ln-play { width: 32px; height: 32px; background: var(--accent); color: #0a0c12; font-size: 11px; }

/* --- 4. Mobil: ön-giriş tek kolon, form tam genişlik -------------------- */
@media (max-width: 820px) {
  .pl-gate { padding: 0; align-items: stretch; }
  .pl-shell { width: 100%; max-height: none; min-height: 100dvh; border-radius: 0; grid-template-columns: 1fr; overflow-y: auto; }
  .pl-brand { padding: 24px 22px 20px; min-height: 0; }
  .pl-brand-icon { width: 54px; height: 54px; margin: 20px 0 14px; border-radius: 17px; }
  .pl-brand-icon svg { width: 26px; height: 26px; }
  .pl-brand-copy h1 { font-size: 27px; }
  .pl-brand-copy p { font-size: 13px; }
  .pl-bullets { display: none; }
  .pl-brand-foot { padding-top: 16px; }
  .pl-panel { padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); }
  .pl-close { top: 12px; right: 12px; }
  .pl-panel-head { margin-bottom: 18px; }
  .pl-mini-logo { margin-bottom: 8px; }
  .pl-field input { height: 50px; font-size: 16px; }
  .pl-submit { height: 52px; }
  .set-profile .auth-card { padding: 20px 16px; border-radius: 18px; }
  #login .login-card { padding: 28px 22px 24px; border-radius: 26px; }
  #login .login-orb { margin-top: 20px; }
}

/* ==========================================================================
   YENİ TUR 2 — yeni temalar, çöp kutusu, ilk açılış, market, müzik, PDF
   ========================================================================== */

/* --- 10 yeni görünüm: sadece renk değil, bambaşka bir masaüstü ---------- */
[data-theme="pixel95"] {
  --bg: #008080; --bg-2: #c0c0c0; --bg-3: #d4d0c8;
  --fg: #0a0a0a; --muted: #303030; --faint: #4a4a4a;
  --line: #7b7b7b; --accent: #000080; --accent-2: #1084d0;
  --ok: #008000; --warn: #808000; --err: #c00000; --info: #000080;
  --vio: #800080; --sel: #00008033; --chip: #d4d0c8; --glow: none;
}
[data-theme="pixel95"] .win,
[data-theme="pixel95"] .launch-panel,
[data-theme="pixel95"] #mb-drop,
[data-theme="pixel95"] .login-card {
  border-radius: 0 !important;
  border: 2px solid #fff !important;
  outline: 1px solid #404040;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35) !important;
}
[data-theme="pixel95"] .dock-it, [data-theme="pixel95"] .desk-ic .gl, [data-theme="pixel95"] .gi { border-radius: 0 !important; }
[data-theme="pixel95"] #menubar, [data-theme="pixel95"] #dock { background: #c0c0c0 !important; border-color: #808080 !important; }
[data-theme="pixel95"] .mb-word, [data-theme="pixel95"] .mb-clock, [data-theme="pixel95"] .mb-icon { color: #0a0a0a !important; }

[data-theme="glassbreeze"] {
  --bg: #050d17; --bg-2: rgba(16,35,58,.82); --bg-3: rgba(25,50,80,.72);
  --fg: #eaf4ff; --muted: #a6c4e0; --faint: #7d9ab6;
  --line: rgba(140,200,255,.24); --accent: #4cc2ff; --accent-2: #7ee0ff;
  --ok: #74f0b0; --warn: #ffd166; --err: #ff7a8a; --info: #7ad7ff;
  --vio: #c7b3ff; --sel: #4cc2ff33; --chip: rgba(20,45,75,.75);
  --glow: 0 0 18px rgba(76,194,255,.28);
}
[data-theme="glassbreeze"] .win {
  background: linear-gradient(160deg, rgba(20,42,70,.78), rgba(7,18,32,.88)) !important;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-color: rgba(150,215,255,.28) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}
[data-theme="glassbreeze"] #menubar, [data-theme="glassbreeze"] #dock { background: rgba(8,22,40,.62) !important; backdrop-filter: blur(20px); }

[data-theme="blockworld"] {
  --bg: #1d2b1a; --bg-2: #2b3d23; --bg-3: #3a4d2d;
  --fg: #f3ecd2; --muted: #b9c09a; --faint: #9aa47c;
  --line: #4b5e36; --accent: #7cbf4a; --accent-2: #d4a24c;
  --ok: #8ed36a; --warn: #e8c45a; --err: #e36d55; --info: #7ad0c4;
  --vio: #b99bff; --sel: #7cbf4a33; --chip: #33452a; --glow: 0 0 0 transparent;
  --font: "Courier New", monospace;
}
[data-theme="blockworld"] .win, [data-theme="blockworld"] .launch-panel, [data-theme="blockworld"] #dock {
  border-radius: 3px !important;
  border: 2px solid #5c7041 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.32) !important;
}
[data-theme="blockworld"] body, [data-theme="blockworld"] button, [data-theme="blockworld"] input { letter-spacing: .01em; }
[data-theme="blockworld"] .dock-it { border-radius: 3px !important; image-rendering: pixelated; }

[data-theme="candy"] {
  --bg: #fff1f7; --bg-2: #ffe7f2; --bg-3: #ffd7e8;
  --fg: #4a1130; --muted: #8b3a62; --faint: #a36280;
  --line: #f5b9d4; --accent: #ec4899; --accent-2: #38bdf8;
  --ok: #16a34a; --warn: #d97706; --err: #dc2626; --info: #0284c7;
  --vio: #8b5cf6; --sel: #ec489926; --chip: #ffe1ee; --glow: 0 8px 26px rgba(236,72,153,.14);
}
[data-theme="candy"] .win, [data-theme="candy"] .launch-panel { border-radius: 24px !important; border-color: #ffc4de !important; }

[data-theme="aqua"] {
  --bg: #f2f2f7; --bg-2: #ffffff; --bg-3: #ececf1;
  --fg: #1c1c1e; --muted: #6b6b70; --faint: #8e8e93;
  --line: #d9d9de; --accent: #007aff; --accent-2: #5ac8fa;
  --ok: #34c759; --warn: #ff9500; --err: #ff3b30; --info: #32ade6;
  --vio: #af52de; --sel: #007aff22; --chip: #f6f6f9; --glow: 0 10px 30px rgba(0,0,0,.08);
}
[data-theme="aqua"] .win { border-radius: 22px !important; box-shadow: 0 20px 60px rgba(0,0,0,.18) !important; }
[data-theme="aqua"] #dock { border-radius: 24px !important; background: rgba(255,255,255,.72) !important; backdrop-filter: blur(24px); }

[data-theme="aubergine"] {
  --bg: #2c001e; --bg-2: #3b0a2e; --bg-3: #4b123b;
  --fg: #f8e9ef; --muted: #d4a7bd; --faint: #b5869c;
  --line: #5b2547; --accent: #e95420; --accent-2: #f7a072;
  --ok: #8fd694; --warn: #f2c14e; --err: #ff6b6b; --info: #7cc4ff;
  --vio: #c79bff; --sel: #e9542033; --chip: #441235; --glow: 0 0 12px #e9542055;
}

/* --- 2. Dock'un solundaki çöp kutusu ------------------------------------ */
.dock-it--trash {
  position: relative;
  background: linear-gradient(160deg,#3b414d,#191d25) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.12) inset;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.dock-it--trash svg { width: 21px; height: 21px; stroke: #e8ebf2; stroke-width: 1.7; fill: none; }
.dock-it--trash::after {
  content: ""; position: absolute; inset: 6px; border-radius: 11px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.14), transparent 66%);
  pointer-events: none;
}
.dock-it--trash.over {
  transform: translateY(-9px) scale(1.16) !important;
  background: linear-gradient(160deg,#ef4444,#991b1b) !important;
  box-shadow: 0 0 0 4px rgba(248,113,113,.28), 0 18px 32px rgba(239,68,68,.35) !important;
}
.dock-it--trash.over svg { stroke: #fff; }
.dock-trash-glow { position: absolute; inset: -6px; border-radius: 16px; border: 2px dashed transparent; transition: .2s; }
.dock-it--trash.over .dock-trash-glow { border-color: rgba(255,255,255,.55); animation: trashSpin 2.4s linear infinite; }
@keyframes trashSpin { to { transform: rotate(360deg); } }
.dock-it--trash.trash-bite { animation: trashBite .58s cubic-bezier(.3,1.4,.5,1); }
@keyframes trashBite {
  0% { transform: scale(1.18) rotate(0); }
  25% { transform: scale(.86) rotate(-8deg); }
  55% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* --- 3. İlk açılış sihirbazı -------------------------------------------- */
.fr-gate {
  position: fixed; inset: 0; z-index: 9850; display: grid; place-items: center; padding: 22px;
  background:
    radial-gradient(70% 60% at 16% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(65% 60% at 84% 82%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 64%),
    rgba(5,7,12,.84);
  backdrop-filter: blur(14px);
  animation: plFade .3s ease both;
}
.fr-gate.fr-out { animation: frOut .4s ease forwards; }
@keyframes frOut { to { opacity: 0; transform: scale(1.02); } }
.fr-card {
  width: min(880px, 96vw); border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); background: var(--bg-2); color: var(--fg);
  box-shadow: 0 50px 130px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.1) inset;
  display: grid; grid-template-columns: 1.05fr .95fr;
  animation: plRise .5s cubic-bezier(.16,1,.3,1) both;
}
.fr-card--wide { display: block; width: min(920px, 96vw); padding: 34px 36px 26px; max-height: 92vh; overflow: auto; }
.fr-term { background: #070a0f; border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; min-height: 380px; }
.fr-term-bar { display: flex; align-items: center; gap: 6px; padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.fr-term-bar span { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.fr-term-bar span:nth-child(2) { background: #febc2e; }
.fr-term-bar span:nth-child(3) { background: #28c840; }
.fr-term-bar b { margin-left: 8px; font: 600 11px/1 "JetBrains Mono", monospace; color: #7f8794; }
.fr-term-body { padding: 24px 22px; font: 500 12.5px/1.7 "JetBrains Mono", monospace; color: #c9d2df; }
.fr-term-body p { margin: 0 0 6px; }
.fr-term-body em { color: #7dd3fc; font-style: normal; }
.fr-term-body b { color: #ff9a76; }
.fr-term-body .ok { color: #86efac; }
.fr-term-body .dim { color: #7f8794; }
.fr-term-body .fr-cursor { color: #ff9a76; animation: frBlink 1s steps(2) infinite; }
@keyframes frBlink { 50% { opacity: 0; } }
.fr-copy { padding: 36px 34px 28px; display: flex; flex-direction: column; }
.fr-kicker { font-size: 10px; letter-spacing: .18em; font-weight: 800; color: var(--accent); }
.fr-copy h1, .fr-head h1 { margin: 12px 0 10px; font: 800 clamp(25px, 3vw, 34px)/1.08 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.03em; }
.fr-copy p, .fr-head p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 44ch; }
.fr-acts { margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 14px; }
.fr-dots { display: flex; gap: 6px; }
.fr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.fr-dots i.on { width: 20px; border-radius: 99px; background: var(--accent); }
.fr-next { margin-left: auto; height: 46px; padding: 0 22px; border: 0; border-radius: 13px; cursor: pointer; background: var(--accent); color: var(--bg); font: 800 13px/1 "Space Grotesk", system-ui, sans-serif; box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 30%, transparent); transition: .16s; }
.fr-next:hover { transform: translateY(-1px); filter: brightness(1.06); }
.fr-skip { margin-top: 12px; align-self: flex-start; border: 0; background: none; color: var(--faint); font-weight:600;font-size:11px;line-height:1;font-family:inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fr-head { margin-bottom: 22px; }
.fr-themes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.fr-theme { border: 1px solid var(--line); border-radius: 15px; background: var(--bg-3); padding: 9px; cursor: pointer; text-align: left; color: var(--fg); transition: .16s; }
.fr-theme:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); }
.fr-theme.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.fr-theme-prev { display: block; position: relative; height: 74px; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.fr-mini-bar { position: absolute; left: 0; right: 0; top: 0; height: 9px; border-bottom: 1px solid rgba(0,0,0,.2); }
.fr-mini-win { position: absolute; left: 10px; top: 19px; width: 56%; height: 38px; border-radius: 5px; border: 1px solid var(--a); box-shadow: 0 5px 10px rgba(0,0,0,.2); }
.fr-mini-dot { position: absolute; left: 14px; top: 26px; width: 12px; height: 3px; border-radius: 99px; box-shadow: 0 6px 0 var(--a), 0 12px 0 var(--i); opacity: .8; }
.fr-theme b { display: block; font-size: 11.5px; line-height: 1.2; }
.fr-theme > i { display: block; font-style: normal; font-size: 9.5px; color: var(--muted); margin-top: 2px; }
.fr-walls { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.fr-wall { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-3); padding: 7px; cursor: pointer; color: var(--fg); transition: .16s; }
.fr-wall:hover { transform: translateY(-2px); }
.fr-wall.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.fr-wall span { display: block; aspect-ratio: 16/9; border-radius: 9px; margin-bottom: 7px; }
.fr-wall b { font-size: 11.5px; }
@media (max-width: 760px) {
  .fr-gate { padding: 0; align-items: stretch; }
  .fr-card { width: 100%; min-height: 100dvh; border-radius: 0; grid-template-columns: 1fr; max-height: none; overflow: auto; }
  .fr-card--wide { width: 100%; min-height: 100dvh; border-radius: 0; padding: 26px 18px; }
  .fr-term { min-height: 220px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .fr-copy { padding: 24px 20px; }
  .fr-themes { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fr-walls { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fr-acts { position: sticky; bottom: 0; background: var(--bg-2); padding: 14px 0 0; }
}

/* --- 4. Maskot: korkunç kedi yerine sıcak bir çay hayaleti -------------- */
.ms-body { fill: #f4efe4 !important; stroke: #2b303c !important; stroke-width: 1.2 !important; }
.ms-stripe { fill: color-mix(in srgb, var(--accent) 42%, #f4efe4) !important; opacity: .9 !important; }
.ms-tail { stroke: color-mix(in srgb, var(--accent) 74%, #2b303c) !important; }
.ms-eye { fill: #fff !important; }
.ms-pupil { fill: #22262f !important; }
.ms-mouth { stroke: #3a3f4c !important; }
.ms-blush { fill: color-mix(in srgb, #fb7185 42%, transparent) !important; }
.ms-scarf, .ms-scarf-tail { fill: var(--accent) !important; }
#mascot { filter: drop-shadow(0 14px 20px rgba(0,0,0,.35)); }

/* --- 5. PDF okuyucu: tek dosya modu + büyük indirme --------------------- */
.pdf-app--single { grid-template-columns: 1fr !important; }
.pdf-app--single .pdf-side { display: none !important; }
.pdf-app { display: grid; grid-template-columns: 250px minmax(0,1fr); height: 100%; min-height: 0; }
.pdf-dl { height: 36px !important; min-width: 118px; padding: 0 16px !important; font-size: .74em !important; font-weight: 800 !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; }
.pdf-bar { min-height: 48px; }
.pdf-actions { gap: 10px !important; }
@media (max-width: 720px) {
  .pdf-app { grid-template-columns: 1fr; }
  .pdf-app:not(.pdf-app--single) .pdf-side { max-height: 190px; }
  .pdf-dl { width: 100%; }
  .pdf-actions { flex-wrap: wrap; }
}

/* --- 6. Market kartları: yıldız + taşma düzeltmeleri -------------------- */
.as-tile { min-height: 0; align-items: stretch; row-gap: 7px; }
.as-tile-art { aspect-ratio: 16/10; height: auto !important; min-height: 88px; }
.as-tile-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: auto !important; min-height: 2.6em; }
.as-tile-rate {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 4px 8px; border-radius: 99px;
  background: rgba(5,8,14,.7); color: #fde68a;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px);
}
.as-rail-scroll { align-items: start; }
.as-tile-by { min-height: 18px; }
.as-row .mkt-rating { flex: 0 0 auto; margin-left: 10px; }
.as-row .mkt-star { font-size: 11px; }
.as-row .mkt-score { display: none; }
.as-welcome {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center;
  padding: 24px 26px; margin-bottom: 18px; border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 8% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    linear-gradient(140deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
}
.asw-copy h1 { margin: 6px 0 7px; font: 800 clamp(22px,2.6vw,30px)/1.1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.03em; }
.asw-copy p { margin: 0 0 15px; color: var(--muted); font-size: 12.5px; line-height: 1.55; max-width: 56ch; }
.asw-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.asw-btn { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); font-weight:700;font-size:11.5px;line-height:1;font-family:inherit; cursor: pointer; transition: .15s; }
.asw-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.asw-btn--primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.asw-stats { display: flex; gap: 8px; }
.asw-stat { min-width: 76px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 72%, transparent); text-align: center; }
.asw-stat b { display: block; font: 800 21px/1 "Space Grotesk", system-ui, sans-serif; color: var(--accent); }
.asw-stat span { display: block; margin-top: 4px; font-size: 9.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 720px) { .as-welcome { grid-template-columns: 1fr; } .asw-stats { width: 100%; } .asw-stat { flex: 1; min-width: 0; } }

/* --- 7. Kulüp: sohbet yerine sadece ses -------------------------------- */
.club4-stage-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-3); }
.club4-stage-note > span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); font-size: 18px; }
.club4-stage-note b { display: block; font-size: 13px; }
.club4-stage-note i { display: block; font-style: normal; color: var(--muted); font-size: 11px; margin-top: 2px; }

/* --- 8. Müzik: keşfet sayfası ------------------------------------------ */
.mu-count { margin-left: auto; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mu-disc { padding: 0 0 8px; overflow: auto; flex: none; }
.mu-disc-hero { display: flex; align-items: center; gap: 14px; padding: 18px 18px; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(90% 120% at 10% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(140deg, var(--bg-3), var(--bg-2)); margin-bottom: 12px; }
.mu-disc-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent); color: var(--bg); font-size: 19px; flex: none; }
.mu-disc-hero b { font-size: 16px; }
.mu-disc-hero p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; max-width: 56ch; }
.mu-disc-n { margin-left: auto; font: 800 20px/1 "Space Grotesk", sans-serif; color: var(--accent); white-space: nowrap; }
.mu-genres { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 7px; margin-bottom: 14px; }
.mu-genre { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-3); color: var(--fg); cursor: pointer; transition: .15s; }
.mu-genre:hover { border-color: var(--accent); transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 8%, var(--bg-3)); }
.mu-genre span { font-size: 16px; line-height: 1; }
.mu-genre b { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mu-disc-sec { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.mu-disc-sec b { font-size: 13px; }
.mu-disc-sec span { color: var(--faint); font-size: 10px; }
@media (max-width: 900px) { .mu-genres { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { .mu-genres { grid-template-columns: repeat(2, minmax(0,1fr)); } .mu-disc-hero { align-items: flex-start; } .mu-disc-n { display: none; } }

/* --- 9. Chirp / Club saydamlık ---------------------------------------- */
#win-chirp, #win-club {
  background: color-mix(in srgb, var(--bg-2) 76%, transparent) !important;
  backdrop-filter: blur(26px) saturate(1.16);
  -webkit-backdrop-filter: blur(26px) saturate(1.16);
  border-color: color-mix(in srgb, var(--fg) 14%, transparent) !important;
}
#win-chirp .win__body, #win-club .win__body { background: transparent !important; }
#win-chirp .chirp-wrap, #win-club .club4 { background: transparent !important; }
#win-chirp .chirp-card, #win-club .club4-card {
  background: color-mix(in srgb, var(--bg-3) 76%, transparent) !important;
  backdrop-filter: blur(10px);
}

/* --- 10. Arkadaşlar listesi ------------------------------------------- */
.fr-block { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.fr-block .set-block-head { margin-bottom: 10px; }
.fr-list { gap: 8px; }
.fr-row { padding: 10px 12px; border-radius: 14px; gap: 11px; transition: .15s; }
.fr-row:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--bg-3)); transform: translateX(2px); }
.fr-av { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 24%, transparent); }
.fr-tx b { font-size: 12.5px; }
.fr-tx i { font-size: 10.5px; }
.fr-dm { height: 32px; padding: 0 11px; border-radius: 9px; font-size: 10.5px; }
.fr-unfriend { height: 32px; padding: 0 10px; border-radius: 9px; font-size: 10.5px; opacity: .72; }
.fr-unfriend:hover { opacity: 1; }

/* --- 11. Sunucu paneli ------------------------------------------------- */
#set-admin, .set-admin { display: flex; flex-direction: column; gap: 14px; }
#set-admin .set-block, .set-admin .set-block { border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); padding: 16px 18px; }
.adm-head, .adm-f { border-radius: 14px; }
.adm-stats, .adm-grid { gap: 10px; }
.adm-stat { border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); padding: 12px 14px; }
.adm-stat b { font-size: 1.35em; letter-spacing: -.02em; }
.adm-code-grid { grid-template-columns: 220px minmax(0,1fr); gap: 12px; }
.adm-code-tree { border-radius: 14px; background: var(--bg-3); padding: 8px; }
.adm-code-file { border-radius: 9px; padding: 8px 9px; }
/* Empty / failed file tree: explains itself instead of looking blank. */
.adm-code-empty { padding: 10px 11px; font-size: 12px; line-height: 1.5; }
#adm-code-editor { border-radius: 14px; font-size: 12px; line-height: 1.6; }
@media (max-width: 760px) { .adm-code-grid { grid-template-columns: 1fr; } }

/* --- 12. İçecek / alışkanlık: kart ve grafik dili ---------------------- */
.track-app { padding: 20px 22px; gap: 16px; background: transparent; }
.track-head { padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: radial-gradient(90% 130% at 8% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%), linear-gradient(140deg, var(--bg-3), var(--bg-2)); }
.track-head h1 { font-size: 26px; letter-spacing: -.03em; }
.track-head p { max-width: 62ch; }
.track-stat { min-width: 112px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 70%, transparent); text-align: center; }
.track-stat b { font: 800 24px/1 "Space Grotesk", sans-serif; color: var(--accent); }
.drink-form { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); }
.drink-form select, .drink-form input { height: 40px; border-radius: 10px; font-size: 12px; }
.track-grid { gap: 14px; }
.track-card { border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); padding: 16px; }
.track-card-head { margin-bottom: 12px; }
.track-bars { min-height: 130px; }
.track-bar i { border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 42%, var(--bg-3))); }
.track-list { border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.track-row { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.track-row:last-child { border-bottom: 0; }
.habit-newbar { padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); }
.habit-row { border-radius: 15px; border: 1px solid var(--line); background: var(--bg-2); padding: 12px 14px; }
.habit-row.done { border-color: color-mix(in srgb, #22c55e 40%, var(--line)); background: color-mix(in srgb, #22c55e 7%, var(--bg-2)); }

/* --- 13. Çalışma alanları --------------------------------------------- */
.ws-ov-card { border-radius: 26px !important; border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent) !important; background: color-mix(in srgb, var(--bg-2) 88%, transparent) !important; backdrop-filter: blur(26px); }
.ws-ov-head { padding: 20px 22px 8px; }
.ws-ov-title { font: 800 22px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.ws-ov-sub { margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.ws-space { border-radius: 18px !important; border: 1px solid var(--line) !important; background: var(--bg-3) !important; transition: .18s; }
.ws-space.on { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.ws-space:hover { transform: translateY(-2px); }
.ws-space-head { padding: 10px 12px; }
.ws-card { border-radius: 12px !important; }
.ws-ov-foot { padding: 14px 22px 18px; }
@media (max-width: 720px) { .ws-ov-card { border-radius: 0 !important; } .ws-space { border-radius: 14px !important; } }

/* --- 14. Mail: "hire me" alanı ---------------------------------------- */
.mail-hire {
  width: 100%; margin-top: 10px; height: auto; padding: 12px 14px;
  display: flex; align-items: center; gap: 11px; text-align: left;
  border-radius: 15px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background: radial-gradient(100% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 64%), linear-gradient(120deg, var(--bg-3), var(--bg-2));
  color: var(--fg); cursor: pointer; transition: .18s;
  font-size: 12px; font-weight: 700;
}
.mail-hire::before { content: "✦"; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: var(--bg); font-size: 15px; flex: none; }
.mail-hire::after { content: "→"; margin-left: auto; color: var(--accent); font-size: 16px; }
.mail-hire:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 18%, transparent); }
.mail-head { flex-wrap: wrap; }
.mail-head .mail-who { flex: 1; }
@media (max-width: 520px) { .mail-hire { font-size: 11px; } }

/* --- 15. Tutorial: mobilde alt sayfa, taşma yok ------------------------ */
@media (max-width: 720px) {
  .tut-layer { padding: 0 !important; align-items: flex-end !important; }
  .tut-card {
    position: fixed !important; left: 8px !important; right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important; top: auto !important;
    width: auto !important; max-height: 74dvh !important; overflow: auto !important;
    border-radius: 20px !important; padding: 16px !important;
  }
  .tut-title-row { gap: 10px; }
  .tut-title { font-size: 15px !important; }
  .tut-body { font-size: 12.5px !important; }
  .tut-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .tut-actions .btnl--primary { grid-column: 1 / -1; order: -1; height: 44px; }
  .tut-skip { grid-column: 1 / -1; justify-self: center; }
  .tut-demo { grid-column: 1 / -1; }
}

/* --- 16. İkon şekilleri (Creator) ------------------------------------- */
.cr-iseg { flex: 1; }
.cr-iseg .cr-seg-b { min-width: 30px; }
[data-icon-shape="circle"] .dock-it,
[data-icon-shape="circle"] .desk-ic .gl,
[data-icon-shape="circle"] .gi,
[data-icon-shape="circle"] .shot-ic { border-radius: 50% !important; }
[data-icon-shape="square"] .dock-it,
[data-icon-shape="square"] .desk-ic .gl,
[data-icon-shape="square"] .gi,
[data-icon-shape="square"] .shot-ic { border-radius: 4px !important; }
[data-icon-shape="hex"] .dock-it,
[data-icon-shape="hex"] .desk-ic .gl,
[data-icon-shape="hex"] .gi,
[data-icon-shape="hex"] .shot-ic { border-radius: 0 !important; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
[data-icon-shape="blob"] .dock-it,
[data-icon-shape="blob"] .desk-ic .gl,
[data-icon-shape="blob"] .gi,
[data-icon-shape="blob"] .shot-ic { border-radius: 44% 56% 58% 42% / 48% 42% 58% 52% !important; }
[data-icon-shape="leaf"] .dock-it,
[data-icon-shape="leaf"] .desk-ic .gl,
[data-icon-shape="leaf"] .gi,
[data-icon-shape="leaf"] .shot-ic { border-radius: 4px 52% 4px 52% !important; }

/* Küçük ekranlarda taşma güvenliği */
@media (max-width: 480px) {
  .as-tile-rate { top: 6px; right: 6px; font-size: 9.5px; padding: 3px 6px; }
  .as-row .mkt-rating { display: none; }
  .set-profile .auth-card { max-width: 100%; }
}

/* Mail başlığı: açık işareti + iki satırlı CTA */
.mail-open-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, #22c55e 34%, var(--line));
  background: color-mix(in srgb, #22c55e 10%, transparent);
  color: #16a34a; font-size: 9.5px; font-weight: 800; white-space: nowrap;
}
.mail-hire .mh-tx { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.mail-hire .mh-tx b { font-size: 12.5px; font-weight: 800; }
.mail-hire .mh-tx i { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); }
.as-tile-art { position: relative; overflow: hidden; }

/* ==========================================================================
   KİLİT EKRANI v3 — masaüstü duvar kağıdı + saat + tek satır giriş
   ========================================================================== */
#login .login-clock {
  position: absolute; top: clamp(28px, 9vh, 92px); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; text-align: center; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
#login .login-clock b { font: 200 clamp(48px, 9vw, 92px)/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.05em; }
#login .login-clock span { font: 600 12px/1.2 "Space Grotesk", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .74; }
#login .login-stage { display: block !important; padding: 0 !important; }
#login .login-art { display: none !important; }
#login .login-card {
  position: fixed; left: 50%; bottom: clamp(46px, 9vh, 96px);
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  padding: 0; border: 0 !important; border-radius: 0;
  background: none !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
#login .login-logo, #login .login-sub, #login .login-hint { display: none !important; }
#login .login-orb { width: 96px; height: 96px; margin: 0 0 2px; position: relative; }
#login .login-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  font: 800 30px/1 "Space Grotesk", sans-serif;
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.24) inset;
}
#login .login-orb-ring { border-color: rgba(255,255,255,.22); }
#login .login-name { color: #fff; font: 700 21px/1.2 "Space Grotesk", sans-serif; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
#login .login-status { color: rgba(255,255,255,.7); font: 600 10.5px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; margin-top: -3px; }
#login .login-pass { display: flex; align-items: center; gap: 8px; width: min(330px, 88vw); margin: 4px 0 0; }
#login .login-pass-input {
  flex: 1; height: 50px; border-radius: 14px; padding: 0 44px 0 16px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  color: #fff; font-size: 14px; backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
#login .login-pass-input:focus { outline: none; border-color: rgba(255,255,255,.58); box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
#login .login-pass-input::placeholder { color: rgba(255,255,255,.55); }
#login .login-pass-eye { width: 34px; height: 34px; border-radius: 50%; border: 0; margin-left: -48px; background: none; color: rgba(255,255,255,.72); cursor: pointer; z-index: 2; }
#login .login-btn {
  width: 54px; height: 54px; min-width: 54px; padding: 0; margin: 2px 0 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.16); color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.28) inset;
  backdrop-filter: blur(20px); display: grid; place-items: center;
  font-size: 22px; font-weight: 600; transition: .18s;
}
#login .login-btn:hover { transform: translateY(-2px) scale(1.04); background: rgba(255,255,255,.26); }
#login .login-btn:active { transform: scale(.97); }
#login .login-btn span { display: block; line-height: 1; }
#login .login-guest { width: min(330px, 88vw); margin-top: 2px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 13px; color: rgba(255,255,255,.8); }
#login .login-lang {
  position: fixed; left: 22px; bottom: 20px; margin: 0;
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.72);
}
#login .login-lang span { display: none; }
#login .login-lang select { height: 36px; border-radius: 11px; background: rgba(10,12,18,.35); border: 1px solid rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(20px); }
#login .login-now {
  position: fixed; right: 20px; bottom: 18px; margin: 0;
  width: min(292px, calc(100vw - 40px));
  padding: 9px 11px; border-radius: 15px;
  background: rgba(10,12,18,.42); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 16px 38px rgba(0,0,0,.32);
}
#login .login-now .sd-eq i { background: #fff; }
#login .login-now-tx { color: rgba(255,255,255,.86); }
#login .ln-rnd { background: rgba(255,255,255,.12); color: #fff; }
#login .ln-rnd:hover { background: rgba(255,255,255,.24); }
#login .ln-play { background: #fff; color: #0a0c12; }
#login .login-rings { opacity: .0; }
@media (max-width: 720px) {
  #login .login-card { bottom: calc(28px + env(safe-area-inset-bottom)); }
  #login .login-clock { top: 7vh; }
  #login .login-clock b { font-size: 54px; }
  #login .login-now { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; }
  #login .login-lang { left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); }
  #login .login-lang select { color: #fff; }
}

/* ============================================================================
   YENİ TUR 3 — toplu UI/UX düzeltmeleri
   ============================================================================ */

/* --- 1. Maskot: korkunç değil, tatlı bir kedi ---------------------------- */
#mascot {
  width: 66px; height: 80px;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.34));
  transform-origin: 50% 92%;
}
.ms-head { fill: #f7c98f !important; stroke: #a8683f !important; stroke-width: 1.1 !important; }
.ms-body { fill: #f9d6a3 !important; stroke: #a8683f !important; stroke-width: 1.1 !important; }
.ms-ear { fill: #f7c98f !important; stroke: #a8683f !important; stroke-width: 1.1 !important; }
.ms-ear-inner { fill: #ffb3bd !important; stroke: none !important; }
.ms-stripe { fill: #e2a05a !important; opacity: .58 !important; }
.ms-tail { stroke: #d8914c !important; stroke-width: 4.6 !important; }
.ms-eye { fill: #fffdf8 !important; stroke: #5a3b2a !important; stroke-width: .5 !important; }
.ms-pupil { fill: #2c2734 !important; }
.ms-shine { fill: #fff !important; }
.ms-shine--sm { opacity: .8; }
.ms-nose { fill: #ff8fa3 !important; }
.ms-mouth { stroke: #7a4a35 !important; }
.ms-whisker { stroke: #b07a58 !important; opacity: .85; }
.ms-blush { fill: #ff9fae !important; opacity: .55 !important; }
.ms-scarf { fill: var(--accent, #ff7a45) !important; }
.ms-scarf-tail { fill: color-mix(in srgb, var(--accent, #ff7a45) 78%, #111) !important; }
.ms-bell { fill: #ffd15c !important; stroke: #b57a1e !important; stroke-width: .7 !important; }
.ms-art { overflow: visible; }

/* --- 2. Ayarlar → Profil: iki sekme aynı genişlik, temiz inputlar --------- */
.set-profile .auth-card,
.set-profile .auth-card--signed,
.set-profile .auth-card--gate {
  width: 100% !important;
  max-width: 620px !important;
  margin-inline: auto !important;
}
.set-profile .auth-card--gate {
  padding: 28px 28px 24px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 96%, transparent), var(--bg-2)) !important;
  box-shadow: 0 30px 80px -52px #000, inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.set-profile .auth-card--gate .auth-body { gap: 13px !important; }
.set-profile .auth-card--gate .auth-field { gap: 6px !important; }
.set-profile .auth-card--gate .auth-lbl {
  font-size: 10.5px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .09em !important;
  color: var(--muted) !important;
}
.set-profile .auth-card--gate .set-input,
.set-profile .auth-card--gate input.set-input {
  height: 50px !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--fg) 13%, var(--line)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, var(--bg-3)), var(--bg-3)) !important;
  color: var(--fg) !important;
  font-size: .86em !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.04) !important;
  transition: border-color .16s, box-shadow .16s, background .16s !important;
}
.set-profile .auth-card--gate .set-input:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)) !important; }
.set-profile .auth-card--gate .set-input:focus {
  border-color: color-mix(in srgb, var(--accent) 76%, var(--line)) !important;
  background: color-mix(in srgb, var(--bg-3) 88%, var(--accent)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px 2px rgba(0,0,0,.10) !important;
  outline: none !important;
}
.set-profile .auth-card--gate .auth-submit {
  height: 50px !important;
  border-radius: 14px !important;
  margin-top: 4px !important;
  font-size: .86em !important;
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--accent) 72%, transparent) !important;
}
.set-profile .auth-card--gate .auth-tabs { border-radius: 15px !important; }
.set-profile .auth-card--gate .auth-tab { height: 40px !important; font-size: .8em !important; }
.set-profile .auth-card--gate .auth-tab-ink { height: 40px !important; border-radius: 11px !important; }

/* --- 3. Market: temiz karşılama + kartlarda gerçek yıldızlar ------------- */
.mk-welcome--clean {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px; border-radius: 20px;
  background:
    radial-gradient(90% 140% at 8% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-2) 92%, transparent), color-mix(in srgb, var(--bg-3) 88%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  box-shadow: 0 18px 44px -34px #000;
}
.mk-welcome--clean .mk-welcome-art {
  width: 58px; height: 58px; flex: none; border-radius: 18px;
  display: grid; place-items: center; font-size: 25px;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 35%, #111));
  color: #0a0c12; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.mk-welcome-tx { min-width: 0; }
.mk-welcome-tx b { display: block; font-weight:800;font-size:20px;line-height:1.1;font-family:inherit; letter-spacing: -.02em; }
.mk-welcome-tx span { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); max-width: 60ch; }
.mk-welcome-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.mk-welcome-chips span {
  padding: 6px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--muted); background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid var(--line); white-space: nowrap;
}
.as-tile-row .mkt-rating { margin-right: auto; }
.as-tile-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mkt-rating { display: inline-flex; align-items: center; gap: 7px; }
.mkt-star-row { display: inline-flex; gap: 1px; }
.mkt-star {
  border: 0; background: none; padding: 1px 2px; cursor: pointer;
  color: color-mix(in srgb, var(--fg) 24%, transparent);
  font-size: 13px; line-height: 1; transition: transform .12s, color .12s;
}
.mkt-star.on { color: #ffc94a; text-shadow: 0 0 10px #ffc94a55; }
.mkt-star:hover { transform: translateY(-1px) scale(1.14); color: #ffc94a; }
.mkt-star:disabled { cursor: default; opacity: .6; }
.mkt-score { font-size: 10.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.mkt-score i { font-style: normal; opacity: .65; }
.as-d-rate .mkt-star { font-size: 18px; }

/* --- 4. Auth wall: her uygulamaya ayrı, gerçek bir giriş sahnesi --------- */
#auth-wall.pl-gate {
  position: fixed; inset: 0; z-index: 12000;
  display: grid; place-items: center; padding: 22px;
  background:
    radial-gradient(70% 60% at 18% 12%, color-mix(in srgb, var(--pl-a) 20%, transparent), transparent 60%),
    radial-gradient(70% 60% at 82% 88%, color-mix(in srgb, var(--pl-b) 18%, transparent), transparent 62%),
    rgba(4,6,12,.76);
  backdrop-filter: blur(18px) saturate(1.15);
  animation: awFade .28s ease both;
}
@keyframes awFade { from { opacity: 0; } to { opacity: 1; } }
.pl-redirect-card {
  position: relative; width: min(500px, 94vw); max-height: 92vh; overflow: auto;
  padding: 26px 26px 22px; border-radius: 28px; text-align: center;
  color: var(--fg);
  background:
    radial-gradient(100% 70% at 50% -10%, color-mix(in srgb, var(--pl-a) 26%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 94%, transparent), color-mix(in srgb, var(--bg) 96%, #000));
  border: 1px solid color-mix(in srgb, var(--pl-a) 28%, var(--line));
  box-shadow: 0 48px 120px -42px #000, inset 0 1px 0 rgba(255,255,255,.07);
  animation: awCard .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes awCard { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.pl-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--muted); cursor: pointer; font-size: 12px; z-index: 3;
}
.pl-close:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 12%, transparent); }
.pl-visual { position: relative; height: 150px; display: grid; place-items: center; margin-bottom: 8px; }
.pl-glyph {
  position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 26px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--pl-a), var(--pl-b));
  box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--pl-a) 72%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.pl-glyph svg { width: 38px; height: 38px; }
.pl-orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--pl-a) 32%, transparent); border-radius: 50%; }
.pl-orbit.o1 { width: 124px; height: 124px; animation: awSpin 12s linear infinite; }
.pl-orbit.o2 { width: 168px; height: 168px; border-style: dashed; animation: awSpin 18s linear infinite reverse; }
.pl-orbit.o3 { width: 208px; height: 208px; opacity: .45; animation: awSpin 26s linear infinite; }
@keyframes awSpin { to { transform: rotate(360deg); } }
.pl-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--pl-a); box-shadow: 0 0 14px var(--pl-a); }
.pl-spark.s1 { left: 18%; top: 24%; } .pl-spark.s2 { right: 16%; top: 30%; background: var(--pl-b); box-shadow: 0 0 14px var(--pl-b); }
.pl-spark.s3 { left: 24%; bottom: 16%; background: var(--pl-b); } .pl-spark.s4 { right: 26%; bottom: 12%; }
.pl-chip { position: absolute; width: 22px; height: 14px; border-radius: 5px; background: color-mix(in srgb, var(--pl-a) 28%, transparent); border: 1px solid color-mix(in srgb, var(--pl-a) 46%, transparent); }
.pl-chip.c1 { left: 12%; top: 52%; transform: rotate(-18deg); } .pl-chip.c2 { right: 12%; top: 50%; transform: rotate(18deg); }
.pl-kicker { display: inline-block; font-size: 9.5px; font-weight: 900; letter-spacing: .17em; color: var(--pl-a); }
.pl-redirect-card h2 { margin: 7px 0 8px; font-weight:800;font-size:25px;line-height:1.12;font-family:inherit; letter-spacing: -.035em; }
.pl-sub { margin: 0 auto 14px; max-width: 40ch; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.pl-bullets { display: grid; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; text-align: left; }
.pl-bullets li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; font-size: 11.5px; color: var(--muted); background: color-mix(in srgb, var(--fg) 4%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); }
.pl-bullets li span { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--pl-a) 20%, transparent); color: var(--pl-a); font-size: 9px; font-weight: 900; }
.pl-redirect-acts { display: flex; flex-direction: column; gap: 8px; }
.pl-go {
  height: 48px; border: 0; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, var(--pl-a), var(--pl-b)); color: #071018;
  font-weight:800;font-size:12.5px;line-height:1;font-family:inherit; box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--pl-a) 80%, transparent);
  transition: transform .16s, filter .16s;
}
.pl-go:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pl-cancel { height: 36px; border: 0; background: none; color: var(--muted); font-weight:700;font-size:11px;line-height:1;font-family:inherit; cursor: pointer; }
.pl-cancel:hover { color: var(--fg); }
.pl-redirect-foot { display: block; margin-top: 12px; font-size: 9.5px; line-height: 1.5; color: var(--faint); }
/* Market — coin cascade */
#auth-wall.pl-anim--market .pl-glyph { animation: awCoin 2.8s ease-in-out infinite; }
#auth-wall.pl-anim--market .pl-orbit.o1 { animation-duration: 6s; }
#auth-wall.pl-anim--market .pl-spark.s1 { animation: awFall 2.4s linear infinite; }
#auth-wall.pl-anim--market .pl-spark.s2 { animation: awFall 3.1s linear .5s infinite; }
@keyframes awCoin { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes awFall { 0% { transform: translateY(-22px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(38px); opacity: 0; } }
/* Club — live equaliser */
#auth-wall.pl-anim--club .pl-glyph { animation: awBeat 1.6s ease-in-out infinite; }
#auth-wall.pl-anim--club .pl-orbit.o2 { border-style: solid; border-color: color-mix(in srgb, var(--pl-a) 18%, transparent); animation-duration: 8s; }
#auth-wall.pl-anim--club .pl-visual::after {
  content: ""; position: absolute; bottom: 12px; left: 50%; width: 96px; height: 22px; transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, var(--pl-a) 0 4px, transparent 4px 9px);
  mask-image: linear-gradient(180deg, transparent, #000 65%); opacity: .5;
  animation: awEq 1.1s ease-in-out infinite alternate;
}
@keyframes awBeat { 0%,100% { transform: scale(1); } 45% { transform: scale(1.06); } }
@keyframes awEq { from { clip-path: inset(62% 0 0); } to { clip-path: inset(8% 0 0); } }
/* Chirp — flying frames */
#auth-wall.pl-anim--chirp .pl-glyph { animation: awFlap 2.2s ease-in-out infinite; transform-origin: 52% 58%; }
#auth-wall.pl-anim--chirp .pl-spark.s3 { animation: awFly 2.8s ease-in-out infinite; }
#auth-wall.pl-anim--chirp .pl-chip.c1 { animation: awTilt 3.2s ease-in-out infinite; }
@keyframes awFlap { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-5px); } }
@keyframes awFly { 0% { transform: translate(-10px, 16px) scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(42px, -26px) scale(1); opacity: 0; } }
@keyframes awTilt { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(-8deg) translateY(-4px); } }
/* Forum — flipping pages */
#auth-wall.pl-anim--forum .pl-glyph { animation: awPage 2.4s ease-in-out infinite; }
#auth-wall.pl-anim--forum .pl-orbit.o3 { border-radius: 16px; transform: rotate(12deg); animation-duration: 14s; }
@keyframes awPage { 0%,100% { transform: perspective(400px) rotateY(-8deg); } 50% { transform: perspective(400px) rotateY(10deg) translateY(-3px); } }

/* --- 5. PC giriş kartı: cam, sıcak ve gerçekten güzel --------------------- */
body.pre-login #login .login-card {
  width: min(384px, 92vw) !important;
  padding: 30px 28px 24px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--accent, #ff7a45) 24%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(22,24,32,.78), rgba(8,10,16,.88)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 40px 100px -38px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(30px) saturate(1.35);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
  color: #f6f4ef !important;
}
body.pre-login #login .login-logo { font-size: 2.2em !important; letter-spacing: -.05em !important; }
body.pre-login #login .login-logo span { color: var(--accent, #ff9a76) !important; }
body.pre-login #login .login-sub {
  margin-top: 4px !important; font-size: .68em !important; letter-spacing: .16em !important;
  text-transform: uppercase; color: rgba(255,255,255,.52) !important;
}
body.pre-login #login .login-orb { margin: 24px 0 12px !important; }
body.pre-login #login .login-avatar {
  width: 82px !important; height: 82px !important; border-radius: 26px !important;
  background: linear-gradient(145deg, var(--accent, #ff9a76), color-mix(in srgb, var(--accent, #ff9a76) 34%, #4b1d78)) !important;
  color: #140b05 !important; font-size: 25px !important; font-weight: 900 !important;
  box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--accent, #ff9a76) 74%, transparent), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
body.pre-login #login .login-name { font-size: 1.18em !important; font-weight: 800 !important; color: #fff !important; }
body.pre-login #login .login-status {
  margin-top: 4px !important; font-size: .58em !important; letter-spacing: .18em !important;
  color: rgba(255,255,255,.44) !important;
}
body.pre-login #login .login-pass { width: 100% !important; margin: 14px 0 4px !important; }
body.pre-login #login .login-pass-input {
  height: 50px !important; border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.07) !important; color: #fff !important;
  padding: 0 46px 0 15px !important; font-size: 15px !important;
  backdrop-filter: blur(12px);
}
body.pre-login #login .login-pass-input::placeholder { color: rgba(255,255,255,.38) !important; }
body.pre-login #login .login-pass-input:focus {
  border-color: color-mix(in srgb, var(--accent, #ff9a76) 76%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #ff9a76) 18%, transparent) !important;
}
body.pre-login #login .login-pass-eye { right: 8px !important; color: rgba(255,255,255,.6) !important; }
body.pre-login #login .login-btn {
  margin-top: 16px !important; height: 52px !important; border-radius: 16px !important;
  background: linear-gradient(135deg, var(--accent, #ff9a76), color-mix(in srgb, var(--accent, #ff9a76) 42%, #ffd166)) !important;
  color: #160b04 !important; font-size: 18px !important; font-weight: 900 !important;
  box-shadow: 0 18px 38px -18px color-mix(in srgb, var(--accent, #ff9a76) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
body.pre-login #login .login-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
body.pre-login #login .login-hint { color: rgba(255,255,255,.42) !important; font-size: .6em !important; }
body.pre-login #login .login-lang select {
  background: rgba(255,255,255,.08) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important; border-radius: 10px !important;
}
body.pre-login #login .login-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%);
}

/* --- 6. Launcher: dock yönüne göre doğru taraftan açılır ------------------ */
body[data-dock-pos="left"] #launcher.start {
  left: calc(86px + env(safe-area-inset-left, 0px)); right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: none; top: auto;
}
body[data-dock-pos="right"] #launcher.start {
  left: auto; right: calc(86px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: none; top: auto;
}
body[data-dock-pos="left"] #launcher.start .launch-panel {
  transform-origin: left bottom; animation: launchFromLeft .24s cubic-bezier(.16,1,.3,1) both;
}
body[data-dock-pos="right"] #launcher.start .launch-panel {
  transform-origin: right bottom; animation: launchFromRight .24s cubic-bezier(.16,1,.3,1) both;
}
@keyframes launchFromLeft { from { opacity: 0; transform: translateX(-14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes launchFromRight { from { opacity: 0; transform: translateX(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  body[data-dock-pos="left"] #launcher.start,
  body[data-dock-pos="right"] #launcher.start { left: 50%; right: auto; bottom: 92px; transform: translateX(-50%); }
}

/* --- 7. Çöp kutusu: kapak açılır, nesne içine düşer ---------------------- */
.dock-it--trash { overflow: visible; }
.trash-ic { width: 23px !important; height: 23px !important; stroke: #eef2f8 !important; stroke-width: 1.55 !important; fill: none !important; }
.trash-ic .trash-lid { transform-box: fill-box; transform-origin: 90% 100%; transition: transform .28s cubic-bezier(.3,1.4,.5,1); }
.trash-ic .trash-can { fill: rgba(255,255,255,.07); }
.trash-ic .trash-rib { opacity: .55; }
.dock-it--trash.over .trash-lid,
.dock-it--trash.trash-eat .trash-lid { transform: rotate(-38deg) translate(-1px,-2px); }
.dock-it--trash.over { transform: translateY(-10px) scale(1.14) !important; }
.trash-fall {
  position: absolute; left: 50%; top: -12px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 3px; background: linear-gradient(145deg,#ffd166,#ff7a45);
  opacity: 0; pointer-events: none;
}
.dock-it--trash.trash-eat .trash-fall { animation: trashFall .72s cubic-bezier(.5,.05,.7,.4) both; }
@keyframes trashFall {
  0% { opacity: 0; transform: translateY(-8px) rotate(0) scale(.7); }
  25% { opacity: 1; }
  70% { opacity: 1; transform: translateY(20px) rotate(140deg) scale(.6); }
  100% { opacity: 0; transform: translateY(27px) rotate(200deg) scale(.2); }
}

/* --- 8. Music: yeniden tasarlanan Keşfet -------------------------------- */
.mu-disc { padding: 0 2px 8px; }
.mu-disc-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 24px 26px; border-radius: 24px;
  background:
    radial-gradient(90% 140% at 8% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%),
    radial-gradient(80% 120% at 100% 100%, #7c3aed33, transparent 62%),
    linear-gradient(135deg, #0b1020, #131b2e 56%, #20152e);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  color: #fff; box-shadow: 0 24px 60px -42px #000;
}
.mu-disc-glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; right: -40px; top: -100px; background: var(--accent); filter: blur(80px); opacity: .24; }
.mu-disc-copy { position: relative; z-index: 1; min-width: 220px; flex: 1; }
.mu-disc-kicker { font-size: 9.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 78%, #fff); }
.mu-disc-copy h2 { margin: 6px 0 6px; font-weight:900;font-size:31px;line-height:1.02;font-family:inherit; letter-spacing: -.04em; color: #fff; }
.mu-disc-copy p { margin: 0; max-width: 46ch; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.55; }
.mu-disc-stats { position: relative; z-index: 1; display: flex; gap: 10px; }
.mu-disc-stats span {
  min-width: 74px; padding: 11px 13px; border-radius: 15px; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.mu-disc-stats b { display: block; font-size: 18px; font-weight: 900; color: #fff; line-height: 1.1; }
.mu-disc-stats i { font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.48); }
.mu-disc-tools { display: flex; align-items: center; gap: 9px; margin: 18px 2px 10px; }
.mu-disc-label { font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
.mu-disc-hint { font-size: 10px; color: var(--faint); }
.mu-genre-clear { border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-radius: 999px; padding: 5px 10px; font-weight:700;font-size:10px;line-height:1;font-family:inherit; cursor: pointer; }
.mu-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 9px; margin-bottom: 18px; }
.mu-genre {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; min-height: 82px;
  padding: 13px 14px; border-radius: 17px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--bg-3) 94%, transparent), color-mix(in srgb, var(--bg-2) 94%, transparent));
  border: 1px solid var(--line); color: var(--fg);
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.mu-genre::after { content: ""; position: absolute; right: -24px; bottom: -30px; width: 86px; height: 86px; border-radius: 50%; background: var(--accent); filter: blur(34px); opacity: .10; }
.mu-genre span { font-size: 18px; line-height: 1; }
.mu-genre b { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; }
.mu-genre i { margin-top: auto; font-style: normal; font-size: 9px; color: var(--faint); }
.mu-genre:hover, .mu-genre.on {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, var(--bg-3)), var(--bg-2));
  box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--accent) 60%, transparent);
}
.mu-genre.on i { color: var(--accent); }
.mu-disc-sec { display: flex; align-items: baseline; gap: 9px; margin: 4px 2px 9px; }
.mu-disc-sec b { font-size: 12.5px; }
.mu-disc-sec span { font-size: 10px; color: var(--faint); }

/* --- 9. Chirp / Club: saydam cam, daha canlı yüzeyler -------------------- */
#win-chirp .win__body, #win-club .win__body { background: transparent !important; }
#win-chirp, #win-club {
  background: linear-gradient(160deg, rgba(9,13,22,.62), rgba(12,18,30,.78)) !important;
  backdrop-filter: blur(24px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.25) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.chirp-wrap, .chirp, .club4 { background: transparent !important; }
.chirp { display: grid; grid-template-columns: 224px minmax(0,1fr); min-height: 100%; color: var(--fg); }
.chirp-side {
  padding: 18px 14px; border-right: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(10,16,28,.44), rgba(10,16,28,.18));
  backdrop-filter: blur(18px);
}
.chirp-main { padding: 18px 20px 28px; background: radial-gradient(90% 50% at 70% 0%, rgba(56,189,248,.10), transparent 60%); }
.chirp-card, .chirp-compose, .chirp-stories, .chirp-atmo, .chirp-admin-note {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
  backdrop-filter: blur(16px);
}
.chirp-card { overflow: hidden; box-shadow: 0 22px 44px -32px #000; }
.chirp-frame { border-radius: 16px; overflow: hidden; }
.chirp-card:hover { border-color: color-mix(in srgb, var(--accent) 34%, transparent) !important; }
.club4 { background: transparent !important; }
.club4-bg { opacity: .55; }
.club4-card, .club4-stage-card, .club4-head, .club4-bar {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.022)) !important;
  border-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(16px);
}
.club4-card { border-radius: 20px !important; }

/* --- 10. Forum: daha zengin akış ---------------------------------------- */
.forum head, .forum-head { background: transparent; }
.forum-head--new {
  display: flex; align-items: flex-end; gap: 20px; justify-content: space-between;
  padding: 20px 22px 16px; border-radius: 0 0 22px 22px;
  background:
    radial-gradient(80% 120% at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.045), transparent);
}
.forum-hero-tx h1 { display: flex; align-items: center; gap: 10px; margin: 4px 0 4px; font-size: 27px; letter-spacing: -.04em; }
.forum-live { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-weight:800;font-size:8px;line-height:1;font-family:inherit; letter-spacing: .12em; text-transform: uppercase; color: #4ade80; background: #4ade8014; border: 1px solid #4ade8033; }
.forum-live i { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: forumLive 1.6s ease-in-out infinite; }
@keyframes forumLive { 50% { opacity: .35; } }
.forum-hero-stats { display: flex; gap: 8px; margin-top: 10px; }
.forum-hero-stats span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px; border-radius: 9px; font-size: 9.5px; color: var(--muted); background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--line); }
.forum-hero-stats b { font-size: 13px; color: var(--fg); }
.forum-newbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
  border-radius: 13px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #111));
  color: #0b0d12; font-weight:800;font-size:12px;line-height:1;font-family:inherit;
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--accent) 74%, transparent);
}
.forum-newbtn span { font-size: 16px; line-height: 1; }
.forum-toolbar { padding: 12px 18px 6px !important; gap: 8px !important; }
.forum-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); color: var(--muted); }
.forum-search input { flex: 1; background: none; border: 0; outline: 0; color: var(--fg); }
.forum-sort { height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg-3); color: var(--fg); padding: 0 10px; font-weight:700;font-size:11px;line-height:1;font-family:inherit; }
.forum-side-head { padding: 0 10px 8px; font-weight:800;font-size:9.5px;line-height:1;font-family:inherit; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.forum-thread {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-3) 76%, transparent), color-mix(in srgb, var(--bg-2) 76%, transparent));
  color: var(--fg); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.forum-thread:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: 0 16px 28px -24px #000; }
.forum-thread.is-solved { border-color: color-mix(in srgb, #4ade80 30%, var(--line)); }
.forum-av {
  width: 38px; height: 38px; flex: none; border-radius: 13px; display: grid; place-items: center;
  font-weight:900;font-size:12px;line-height:1;font-family:inherit; color: #fff;
  background: linear-gradient(145deg, hsl(var(--h, 210) 62% 52%), hsl(calc(var(--h, 210) + 34) 60% 32%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.forum-av--big { width: 48px; height: 48px; border-radius: 16px; font-size: 15px; }
.forum-thread-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.forum-thread-top { display: flex; gap: 6px; align-items: center; }
.forum-chip, .forum-solved { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; font-weight:700;font-size:8.5px;line-height:1;font-family:inherit; font-style: normal; color: var(--muted); background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--line); }
.forum-solved { color: #4ade80; background: #4ade8012; border-color: #4ade8030; }
.forum-thread-tx > b { font-size: 13px; letter-spacing: -.01em; }
.forum-thread-body { font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.forum-thread-tx > em { font-style: normal; font-size: 9.5px; color: var(--faint); display: flex; gap: 6px; align-items: center; }
.forum-repcount { color: var(--accent); font-weight: 700; }
.forum-detail-wrap { padding: 14px 18px 24px; }
.forum-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.forum-sp { flex: 1; }
.forum-backpill { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg); cursor: pointer; font-weight:700;font-size:10.5px;line-height:1;font-family:inherit; }
.forum-op-card, .forum-reply {
  display: flex; gap: 12px; padding: 16px; border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-3) 74%, transparent), color-mix(in srgb, var(--bg-2) 74%, transparent));
}
.forum-op-card h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.03em; }
.forum-meta { font-size: 10px; color: var(--faint); }
.forum-meta b { color: var(--fg); }
.forum-op-body > p { margin: 11px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); white-space: pre-wrap; }
.forum-replies-head { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 2px 8px; }
.forum-replies-head b { font-size: 12px; }
.forum-replies-head span { font-size: 9.5px; color: var(--faint); }
.forum-replies { display: flex; flex-direction: column; gap: 8px; }
.forum-reply-top { display: flex; align-items: baseline; gap: 8px; }
.forum-reply-top b { font-size: 11.5px; }
.forum-reply-top i { font-style: normal; font-size: 9px; color: var(--faint); }
.forum-reply-body { flex: 1; min-width: 0; }
.forum-reply-body p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); white-space: pre-wrap; }
.forum-reply-form { display: flex; gap: 9px; align-items: flex-end; margin-top: 12px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.forum-reply-form textarea { flex: 1; min-height: 52px; resize: vertical; border: 0; background: none; color: var(--fg); outline: 0; font: inherit; padding: 6px; }
.forum-reply-send { height: 40px; padding: 0 15px; border: 0; border-radius: 11px; background: var(--accent); color: #0b0d12; font-weight:800;font-size:11px;line-height:1;font-family:inherit; cursor: pointer; }
.forum-empty { display: flex; flex-direction: column; gap: 3px; padding: 26px; text-align: center; color: var(--faint); border: 1px dashed var(--line); border-radius: 16px; }
.forum-empty b { color: var(--fg); font-size: 13px; }

/* --- 11. Hire me: terminale gitmeyen, kendi GUI'si ----------------------- */
.hire-gui {
  position: fixed; inset: 0; z-index: 13000; display: grid; place-items: center; padding: 22px;
  background: radial-gradient(70% 60% at 20% 15%, #ff7a4524, transparent 60%), rgba(4,6,12,.76);
  backdrop-filter: blur(18px); opacity: 0; transition: opacity .22s;
}
.hire-gui.on { opacity: 1; }
.hire-gui.out { opacity: 0; }
.hire-card {
  position: relative; width: min(880px, 96vw); max-height: 92vh; overflow: auto;
  display: grid; grid-template-columns: .92fr 1.08fr;
  border-radius: 28px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  background: var(--bg-2); color: var(--fg);
  box-shadow: 0 50px 130px -42px #000;
  transform: translateY(14px) scale(.98); transition: transform .26s cubic-bezier(.16,1,.3,1);
}
.hire-gui.on .hire-card { transform: none; }
.hire-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--muted); cursor: pointer; z-index: 3; }
.hire-visual {
  padding: 32px 28px; display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 64%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg));
  border-right: 1px solid var(--line); color: var(--fg);
}
.hire-orb { position: relative; width: 92px; height: 92px; border-radius: 28px; display: grid; place-items: center; margin-bottom: 18px; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #31104f)); color: #191008; font-weight:900;font-size:26px;line-height:1;font-family:inherit; box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--accent) 76%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.hire-orb i { position: absolute; inset: -8px; border-radius: 34px; border: 1px dashed color-mix(in srgb, var(--accent) 46%, transparent); animation: awSpin 14s linear infinite; }
.hire-orb i + i { inset: -18px; border-style: solid; opacity: .35; animation-duration: 24s; animation-direction: reverse; }
.hire-open { display: inline-flex; align-items: center; gap: 5px; font-weight:800;font-size:9px;line-height:1;font-family:inherit; letter-spacing: .14em; text-transform: uppercase; color: #4ade80; }
.hire-visual h2 { margin: 9px 0 8px; font-size: 30px; line-height: 1.05; letter-spacing: -.045em; }
.hire-visual p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 36ch; }
.hire-points { display: flex; gap: 7px; margin-top: 20px; }
.hire-points span { flex: 1; padding: 9px 8px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--line); font-size: 8.5px; color: var(--muted); text-align: center; line-height: 1.3; }
.hire-points b { display: block; font-size: 15px; color: var(--fg); }
.hire-note { margin-top: 16px; display: flex; gap: 7px; padding: 9px 11px; border-radius: 11px; font-size: 9.5px; color: var(--muted); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.hire-note span { color: var(--accent); }
.hire-form { padding: 28px 26px 22px; display: flex; flex-direction: column; gap: 11px; }
.hire-kicker { font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.hire-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.hire-role { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); color: var(--muted); font-weight:700;font-size:10.5px;line-height:1;font-family:inherit; cursor: pointer; }
.hire-role.on { color: #0b0d12; background: var(--accent); border-color: var(--accent); }
.hire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hire-field { display: flex; flex-direction: column; gap: 5px; }
.hire-field--wide { grid-column: 1 / -1; }
.hire-field span { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hire-field input, .hire-field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-3); color: var(--fg);
  padding: 0 13px; height: 46px; font: inherit; font-size: 12.5px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.hire-field textarea { height: 92px; padding: 11px 13px; resize: vertical; }
.hire-field input:focus, .hire-field textarea:focus { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.hire-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.hire-quickb { height: 28px; padding: 0 9px; border-radius: 999px; border: 1px dashed var(--line); background: none; color: var(--faint); font-weight:600;font-size:9.5px;line-height:1;font-family:inherit; cursor: pointer; }
.hire-quickb:hover { color: var(--accent); border-color: var(--accent); }
.hire-foot { display: flex; align-items: center; gap: 7px; margin-top: 2px; flex-wrap: wrap; }
.hire-sp { flex: 1; }
.hire-copy, .hire-cv { height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); color: var(--muted); font-weight:700;font-size:10.5px;line-height:1;font-family:inherit; cursor: pointer; text-decoration: none; }
.hire-send { height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #111)); color: #0b0d12; font-weight:800;font-size:11.5px;line-height:1;font-family:inherit; cursor: pointer; box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--accent) 74%, transparent); }
.hire-status { min-height: 15px; font-size: 10px; color: var(--muted); }
@media (max-width: 760px) {
  .hire-card { grid-template-columns: 1fr; }
  .hire-visual { padding: 26px 22px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .hire-form { padding: 20px 18px 18px; }
  .hire-grid { grid-template-columns: 1fr; }
}

/* --- 12. Boot prelude: eski Kaytra hissi + yeni terminal seçeneği -------- */
#boot-splash .boot-glass {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#boot-splash .boot-percent, #boot-splash .boot-pct { font-variant-numeric: tabular-nums; }
#boot-splash .boot-skip { margin-top: 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
#boot-splash .boot-fill { animation: bootPrelude 2.1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes bootPrelude { from { width: 0; } to { width: 100%; } }

/* --- 13. Küçük tutarlılıklar ------------------------------------------- */
.as-tile-row .as-get { margin-left: 0; }
.asw-stat b, .as-count b { font-variant-numeric: tabular-nums; }
.set-plus { width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--accent); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.set-plus:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); }
@media (prefers-reduced-motion: reduce) {
  .mu-disc-glow, .hire-orb i, .forum-live i, #auth-wall .pl-orbit,
  #auth-wall .pl-spark, #auth-wall .pl-chip, .boot-prelude, #boot-splash .boot-fill { animation: none !important; }
}

/* --- 14. + düğmeleri: başlıkla aynı hizada, üç bölümde de aynı dil -------- */
.set-block-head, .snd-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.set-block-head .set-plus, .snd-block-head .set-plus {
  flex: none; margin-left: auto;
}
.set-plus:active { transform: scale(.94); }
.iconpick, .snd-packs { margin-top: 10px; }
/* Market welcome chips on narrow widths */
@media (max-width: 640px) {
  .mk-welcome--clean { flex-wrap: wrap; gap: 12px; }
  .mk-welcome-chips { margin-left: 0; }
  .mk-welcome-tx span { font-size: 11px; }
  .mu-disc-hero { padding: 20px 18px; }
  .mu-disc-stats { width: 100%; }
  .mu-disc-stats span { flex: 1; }
}

/* --- 15. PC giriş kartı: hiçbir parça kesilmesin ------------------------- */
body.pre-login #login .login-card {
  overflow: visible !important;
  max-height: calc(100vh - 132px);
  gap: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
body.pre-login #login .login-logo {
  color: #fff !important;
  text-align: center !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
body.pre-login #login .login-sub {
  color: rgba(255,255,255,.54) !important;
  text-align: center !important;
}
body.pre-login #login .login-orb { align-self: center !important; }
body.pre-login #login .login-name,
body.pre-login #login .login-status { text-align: center !important; }
body.pre-login #login .login-name { color: #fff !important; }
body.pre-login #login .login-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
  line-height: 1 !important;
}
body.pre-login #login .login-btn span { font-size: 22px !important; line-height: 1 !important; }
body.pre-login #login .login-hint { display: block !important; text-align: center !important; }
body.pre-login #login .login-lang {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.12);
  transform: none !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
body.pre-login #login .login-lang span {
  font-size: 9px !important; letter-spacing: .14em !important; text-transform: uppercase;
  color: rgba(255,255,255,.44) !important;
}
body.pre-login #login .login-lang select { width: 150px !important; height: 36px !important; padding: 0 10px !important; }
body.pre-login #login .login-now {
  position: static !important; inset: auto !important; width: 100% !important;
  margin-top: 12px !important; padding: 10px !important; transform: none !important;
}
body.pre-login #login .login-guest { width: 100% !important; }
@media (max-height: 650px) {
  body.pre-login #login .login-card {
    bottom: 16px !important;
    max-height: calc(100vh - 40px);
    overflow: auto !important;
    padding-top: 22px !important;
  }
  body.pre-login #login .login-orb { margin: 14px 0 8px !important; }
  body.pre-login #login .login-avatar { width: 64px !important; height: 64px !important; font-size: 20px !important; }
}

/* Bazı eski "realistic" kuralları logo/alt yazıyı gizliyordu. Kart artık
   markasını gösteriyor; durum rozeti de tam genişlik çubuk değil, pill. */
body.pre-login #login .login-logo,
body.pre-login #login .login-sub {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.pre-login #login .login-status {
  width: auto !important;
  align-self: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.62) !important;
}

/* --- 16. Ayarlar hesap kartı: iki sekme de AYNI genişlik ----------------- */
.set-profile {
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  margin-inline: auto !important;
}
.set-profile .auth-card,
.set-profile .auth-card--signed,
.set-profile .auth-card--gate {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Eski kural input'a flex: 1 1 0% veriyordu; bu yüzden height:50px yok
   sayılıyor ve input 18px'e çöküyordu. Flex tabanını sabitliyoruz. */
.set-profile .auth-card--gate .set-input,
.set-profile .auth-card--gate input.set-input {
  flex: 0 0 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.set-profile .auth-card--gate .auth-field {
  min-width: 0 !important;
}
.set-profile .auth-card--gate .auth-submit {
  flex: 0 0 50px !important;
  min-height: 50px !important;
}
/* Pencere 640px kalırken shell içeriğe göre daralıyordu; hesapları
   değiştirince kart da daralıyordu. Panel pencereyi doldursun. */
#win-settings .set-shell {
  width: 100% !important;
  min-width: 0 !important;
}
#win-settings .set-panel {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
}

/* ============================================================================
   YENİ TUR 4 — maskot, login, auth penceresi, Chirp/Forum, popup Hire me
   ============================================================================ */

/* --- Kawaii kedi: ana maskot + tutorial + rehber turu aynı yüz ---------- */
#mascot {
  width: 64px; height: 78px;
  transform-origin: 50% 94%;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.32));
}
.ms-head, .ms-body, .ms-ear { stroke: #b97c58 !important; stroke-width: 1.15 !important; }
.ms-head { fill: #ffe3bd !important; }
.ms-body { fill: #ffd8a8 !important; }
.ms-ear { fill: #ffe3bd !important; }
.ms-ear-inner { fill: #ffb8c4 !important; }
.ms-stripe { fill: #f0b26b !important; opacity: .55 !important; }
.ms-tail { stroke: #edaa63 !important; stroke-width: 4.4 !important; }
.ms-eye { fill: #fffefb !important; stroke: #76503a !important; stroke-width: .55 !important; }
.ms-pupil { fill: #302a38 !important; }
.ms-shine { fill: #fff !important; }
.ms-shine--sm { opacity: .92; }
.ms-blush { fill: #ff9fb1 !important; opacity: .62 !important; }
.ms-nose { fill: #ff8da2 !important; }
.ms-mouth { stroke: #8a5740 !important; }
.ms-whisker { stroke: #c1906b !important; opacity: .9; }
.ms-tongue { fill: #ff8ca1 !important; }
.ms-paw { fill: #ffd8a8 !important; stroke: #b97c58 !important; stroke-width: 1.05 !important; }
.ms-paw-pad { fill: #ffb2bf !important; }
.ms-scarf { fill: var(--accent, #ff8a65) !important; }
.ms-scarf-tail { fill: color-mix(in srgb, var(--accent, #ff8a65) 76%, #301a12) !important; }
.ms-bell { fill: #ffd05f !important; stroke: #b57b21 !important; stroke-width: .65 !important; }
.ms-heart { fill: #ff8faa !important; animation: msHeartFloat 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes msHeartFloat { 0%,100% { transform: translateY(0) scale(1); opacity: .8; } 50% { transform: translateY(-4px) scale(1.12); opacity: 1; } }
.tut-mascot svg.tut-cat-svg { width: 54px; height: 64px; display: block; }
.mtour-mascot { width: 48px; height: 56px; overflow: visible; }
.ms-art { overflow: visible; }
#mascot:hover .ms-art { animation: msWiggle .55s ease-in-out; }
@keyframes msWiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 70% { transform: rotate(4deg); } }

/* --- PC giriş kartı: gerçekten ortada, animasyonu da ortada ------------- */
body.pre-login #login .login-card-wrap {
  position: fixed; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; pointer-events: none;
}
body.pre-login #login .login-card-wrap > .login-card {
  position: relative !important;
  left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important;
  margin: 0 !important;
  transform: none;
  max-height: calc(100dvh - 120px);
  overflow: auto !important;
  pointer-events: auto;
  scrollbar-width: thin;
}
body.pre-login #login:not(.leaving) .login-card {
  animation: loginPop .58s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes loginPop {
  0% { opacity: 0; transform: translateY(18px) scale(.955); filter: blur(7px); }
  70% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
body.pre-login #login .login-card > * { animation-duration: .45s; }
body.pre-login #login .login-logo { display: block !important; opacity: 1 !important; }
body.pre-login #login .login-sub { display: block !important; opacity: 1 !important; }

/* --- Auth ekranı: tam ekran overlay değil, uygulamanın kendi penceresi --- */
#windows .win.win--auth { background: transparent !important; border-color: rgba(255,255,255,.12) !important; }
#windows .win.win--auth .win__body { padding: 0 !important; overflow: hidden !important; }
.pl-gate.pl-window {
  position: relative !important; inset: auto !important;
  width: 100%; height: 100%; min-height: 0;
  display: grid; place-items: center; padding: 26px;
  z-index: 1; overflow: auto;
  background:
    radial-gradient(80% 70% at 16% 8%, color-mix(in srgb, var(--pl-a) 20%, transparent), transparent 60%),
    radial-gradient(80% 70% at 86% 92%, color-mix(in srgb, var(--pl-b) 18%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg-2) 96%, #000), color-mix(in srgb, var(--bg) 94%, #000));
  backdrop-filter: none !important;
  animation: none !important;
}
.pl-gate.pl-window .pl-window-glow {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  right: -150px; top: -190px; background: var(--pl-a); filter: blur(120px); opacity: .12;
  pointer-events: none;
}
.pl-gate.pl-window .pl-redirect-card {
  width: min(470px, 100%); max-height: none; overflow: visible;
  padding: 26px 28px 22px; border-radius: 26px; z-index: 1;
  animation: awCard .42s cubic-bezier(.16,1,.3,1) both;
}
.pl-gate.pl-window .pl-visual { height: 126px; margin-bottom: 2px; }
.pl-gate.pl-window .pl-orbit.o1 { width: 110px; height: 110px; }
.pl-gate.pl-window .pl-orbit.o2 { width: 146px; height: 146px; }
.pl-gate.pl-window .pl-orbit.o3 { width: 176px; height: 176px; }
.pl-gate.pl-window .pl-redirect-card h2 { font-size: 23px; }
.pl-gate.pl-window .pl-redirect-card .pl-sub { margin-bottom: 12px; }
.pl-gate.pl-window .pl-bullets { margin-bottom: 14px; }
#win-auth-market .win__body, #win-auth-club .win__body, #win-auth-chirp .win__body, #win-auth-forum .win__body { background: transparent; }

/* --- Ayarlar hesap kartı başlığı: sola kaymış yazı düzeldi ------------- */
.set-profile .ac-gate-head {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  text-align: center !important; gap: 5px; margin: 0 0 16px; width: 100%;
}
.set-profile .ac-gate-head .ac-gate-logo { align-self: center; }
.set-profile .ac-gate-head b { text-align: center; font-size: 18px; letter-spacing: -.02em; }
.set-profile .ac-gate-head i { text-align: center; max-width: 44ch; line-height: 1.45; }

/* --- Chirp: canlı, ferah ve doğru hizalanmış ---------------------------- */
#win-chirp .win__body { padding: 0 !important; overflow: hidden !important; }
#win-chirp .chirp-wrap { height: 100%; }
#win-chirp .chirp {
  height: 100%; min-height: 0;
  grid-template-columns: 208px minmax(0, 1fr);
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(236,72,153,.10), transparent 62%),
    transparent;
  color: var(--fg);
}
#win-chirp .chirp-side {
  display: flex; flex-direction: column; gap: 10px;
  height: 100%; overflow: auto;
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(9,17,32,.62), rgba(8,14,26,.25));
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
#win-chirp .chirp-logo {
  display: flex; align-items: center; gap: 9px; padding: 4px 6px 10px;
  font-size: 20px; font-weight: 900; letter-spacing: -.04em;
}
#win-chirp .chirp-logo span {
  width: 31px; height: 31px; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(145deg, #38bdf8, #8b5cf6 58%, #ec4899);
  color: #fff; font-size: 15px; box-shadow: 0 10px 22px -10px #38bdf8;
}
#win-chirp .chirp-nav { display: flex; flex-direction: column; gap: 5px; }
#win-chirp .chirp-navitem {
  display: flex; align-items: center; gap: 8px; min-height: 38px;
  padding: 0 10px; border: 1px solid transparent; border-radius: 11px;
  background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 700;
  cursor: pointer; text-align: left;
}
#win-chirp .chirp-navitem i { margin-left: auto; font-style: normal; opacity: .6; }
#win-chirp .chirp-navitem:hover { background: rgba(255,255,255,.05); color: var(--fg); }
#win-chirp .chirp-navitem.on { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.28); color: #bae6fd; }
#win-chirp .chirp-tip { font-size: 9.5px; line-height: 1.45; color: var(--faint); padding: 0 6px; }
#win-chirp .chirp-tagsbox { padding: 8px 6px; border-top: 1px solid rgba(255,255,255,.07); }
#win-chirp .chirp-tagsbox > b { display: block; margin-bottom: 6px; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
#win-chirp .chirp-taglist { display: flex; flex-wrap: wrap; gap: 4px; }
#win-chirp .chirp-me {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 9px; border-radius: 13px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045); color: var(--fg); text-align: left;
}
#win-chirp .chirp-me b { display: block; font-size: 10.5px; }
#win-chirp .chirp-me i { display: block; font-style: normal; font-size: 8.5px; color: var(--faint); }
#win-chirp .chirp-main {
  height: 100%; min-width: 0; overflow: auto;
  padding: 20px clamp(14px, 2.4vw, 28px) 34px;
}
#win-chirp .chirp-main > * { max-width: 760px; margin-left: auto; margin-right: auto; }
#win-chirp .chirp-hero {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(139,92,246,.34), transparent 56%),
    radial-gradient(80% 120% at 0% 100%, rgba(236,72,153,.22), transparent 58%),
    linear-gradient(135deg, rgba(8,47,73,.92), rgba(30,27,75,.92) 56%, rgba(49,20,56,.92));
  border: 1px solid rgba(125,211,252,.28);
  box-shadow: 0 24px 60px -42px #000, inset 0 1px 0 rgba(255,255,255,.08);
}
#win-chirp .chirp-hero-copy { position: relative; z-index: 1; min-width: 0; }
#win-chirp .chirp-hero-kicker { font-size: 8.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #7dd3fc; }
#win-chirp .chirp-hero h1 { margin: 6px 0 4px; font-size: 32px; line-height: 1.05; letter-spacing: -.05em; color: #fff; }
#win-chirp .chirp-sub { display: block; font-size: 11.5px; color: rgba(255,255,255,.62); }
#win-chirp .chirp-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
#win-chirp .chirp-hero-chips > span {
  padding: 5px 9px; border-radius: 999px; font-size: 9.5px; color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.11);
}
#win-chirp .chirp-hero-chips b { color: #fff; font-size: 11px; }
#win-chirp .chirp-hero-live { display: inline-flex; align-items: center; gap: 5px; color: #f0abfc !important; }
#win-chirp .chirp-hero-live i { width: 5px; height: 5px; border-radius: 50%; background: #f0abfc; box-shadow: 0 0 9px #f0abfc; animation: forumLive 1.6s ease-in-out infinite; }
#win-chirp .chirp-hero-art { position: absolute; right: 16px; top: 8px; width: 120px; height: 120px; opacity: .75; pointer-events: none; }
#win-chirp .chirp-hero-art i {
  position: absolute; font-style: normal; color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.8);
  animation: chirpFloat 4s ease-in-out infinite;
}
#win-chirp .chirp-hero-art i:nth-child(1) { right: 12px; top: 12px; font-size: 30px; animation-delay: -.6s; }
#win-chirp .chirp-hero-art i:nth-child(2) { right: 62px; top: 52px; font-size: 18px; opacity: .7; animation-delay: -1.7s; }
#win-chirp .chirp-hero-art i:nth-child(3) { right: 18px; top: 76px; font-size: 22px; opacity: .55; animation-delay: -2.5s; }
@keyframes chirpFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(5deg); } }
#win-chirp .chirp-countdown {
  position: relative; z-index: 1; flex: none;
  padding: 6px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  color: #fde68a; background: rgba(253,230,138,.10); border: 1px solid rgba(253,230,138,.20);
}
#win-chirp .chirp-stories { display: flex; gap: 11px; padding: 16px 2px 12px; overflow-x: auto; scrollbar-width: none; }
#win-chirp .chirp-stories::-webkit-scrollbar { display: none; }
#win-chirp .chirp-story { flex: none; width: 70px; border: 0; background: none; color: var(--muted); cursor: pointer; }
#win-chirp .chirp-story-ring {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 6px;
  border-radius: 50%; background: conic-gradient(from 210deg, #38bdf8, #8b5cf6, #ec4899, #38bdf8);
  box-shadow: 0 8px 20px -12px #8b5cf6;
}
#win-chirp .chirp-story-ring i {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-2); color: #fff; font-style: normal; font-size: 15px; font-weight: 800;
}
#win-chirp .chirp-story b { display: block; font-size: 9px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#win-chirp .chirp-atmo { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
#win-chirp .chirp-atmo span { padding: 5px 9px; border-radius: 999px; font-size: 9.5px; color: var(--muted); background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--line); }
#win-chirp .chirp-atmo b { color: var(--fg); }
#win-chirp .chirp-atmo-live i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #f472b6; }
#win-chirp .chirp-compose {
  padding: 16px; border-radius: 20px;
  border: 1px solid rgba(125,211,252,.22) !important;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(56,189,248,.09), transparent 58%),
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
  box-shadow: 0 20px 44px -36px #000;
}
#win-chirp .chirp-drop { min-height: 132px; border-radius: 15px; }
#win-chirp .chirp-feed {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 12px; margin-top: 16px; align-items: start;
}
#win-chirp .chirp-card { border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); }
#win-chirp .chirp-frame { aspect-ratio: 4 / 5; }
#win-chirp .chirp-card:hover { transform: translateY(-2px); border-color: rgba(125,211,252,.4) !important; box-shadow: 0 22px 44px -30px #000; }
@media (max-width: 780px) {
  #win-chirp .chirp { grid-template-columns: 1fr; }
  #win-chirp .chirp-side { display: none; }
  #win-chirp .chirp-hero { padding: 18px; }
  #win-chirp .chirp-hero h1 { font-size: 27px; }
}

/* --- Forum: başlık, canlı rozeti ve panel hizası ------------------------ */
#win-forum .win__body { padding: 0 !important; overflow: hidden !important; }
#win-forum .forum {
  height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(70% 60% at 85% 0%, color-mix(in srgb, #a78bfa 12%, transparent), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, #22d3ee 10%, transparent), transparent 62%),
    var(--bg);
}
#win-forum .forum-head--new { flex: none; padding: 19px 24px 14px; align-items: center; }
#win-forum .forum-kicker { font-size: 8.5px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; color: #a78bfa; }
#win-forum .forum-hero-tx h1 { font-size: 24px; line-height: 1.05; gap: 8px; margin: 4px 0 3px; }
#win-forum .forum-live { padding: 3px 7px; font-size: 7px; letter-spacing: .1em; vertical-align: middle; }
#win-forum .forum-live i { width: 4px; height: 4px; }
#win-forum .forum-hero-tx p { margin: 0; max-width: 62ch; font-size: 11.5px; color: var(--muted); }
#win-forum .forum-hero-stats { display: flex; gap: 6px; margin-top: 9px; }
#win-forum .forum-newbtn { height: 38px; padding: 0 14px; font-size: 11px; }
#win-forum .forum-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden; }
#win-forum .forum-side {
  min-height: 0; overflow: auto; padding: 6px 12px 18px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 3%, transparent), transparent);
}
/* Channels panel: same manners as the Messages rail. « hides it behind a » tab
   on the desktop, ☰ opens it over the list on a phone. */
#win-forum .forum-body { position: relative; }
#win-forum .forum-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#win-forum .forum-side-head > span { flex: 1; min-width: 0; }
#win-forum .forum-side-x, #win-forum .forum-side-open {
  display: none; place-items: center; flex: none; cursor: pointer; font: inherit;
  border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 0;
}
#win-forum .forum-side-x { width: 26px; height: 26px; border-radius: 8px; font-size: 15px; }
#win-forum .forum-side-x:hover, #win-forum .forum-side-open:hover { color: var(--fg); border-color: color-mix(in srgb, #a78bfa 55%, var(--line)); }
#win-forum .forum-side-x { display: grid; }
#win-forum .forum-side-open { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; background: color-mix(in srgb, var(--fg) 5%, transparent); }
#win-forum .forum-body.side-closed { grid-template-columns: minmax(0, 1fr); }
#win-forum .forum-body.side-closed .forum-side { display: none; }
#win-forum .forum-body.side-closed .forum-side-open { display: grid; }
#win-forum .forum-overlay { display: none; }
#win-forum .forum-main { min-width: 0; min-height: 0; overflow: auto; padding: 0 18px 24px; }
#win-forum .forum-toolbar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 9px !important;
  background: linear-gradient(180deg, var(--bg) 76%, transparent);
}
#win-forum .forum-list { display: flex; flex-direction: column; gap: 8px; }
#win-forum .forum-thread { padding: 13px 14px; }
#win-forum .forum-thread-tx > b { font-size: 12.5px; }
#win-forum .forum-thread-body { font-size: 10.5px; }
#win-forum .forum-thread-tx > em { font-size: 9px; }
#win-forum .forum-cat {
  display: flex; align-items: center; gap: 7px; width: 100%;
  min-height: 34px; padding: 0 9px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; text-align: left; cursor: pointer;
}
#win-forum .forum-cat em { margin-left: auto; font-style: normal; font-size: 9px; opacity: .55; }
#win-forum .forum-cat:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg); }
#win-forum .forum-cat.on { color: #ddd6fe; background: rgba(167,139,250,.13); border-color: rgba(167,139,250,.30); }
#win-forum .forum-detail-wrap { padding: 4px 0 2px; }
@media (max-width: 760px) {
  #win-forum .forum-body { grid-template-columns: 1fr; }
  #win-forum .forum-body .forum-side,
  #win-forum .forum-body.side-closed .forum-side {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 30;
    width: min(268px, 82vw); padding: 12px 12px 18px;
    background: color-mix(in srgb, var(--bg, #0b0f18) 96%, transparent);
    box-shadow: 24px 0 50px -20px #000c;
    transition: transform .25s ease;
  }
  #win-forum .forum-body.side-closed .forum-side { transform: translateX(-104%); }
  #win-forum .forum-body.side-closed .forum-side-open { display: grid; }
  #win-forum .forum-overlay {
    display: block; position: absolute; inset: 0; z-index: 25; border: 0; padding: 0;
    background: rgba(6, 6, 12, .55);
  }
  #win-forum .forum-body.side-closed .forum-overlay { display: none; }
  #win-forum .forum-head--new { padding: 16px 16px 12px; }
  #win-forum .forum-head--new .forum-side-open { display: grid; }
  #win-forum .forum-main { padding: 0 14px 20px; }
}

/* --- Hire me: tam ekran değil, sağ altta gerçek bir popup -------------- */
.hire-gui {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important; align-items: flex-end; justify-content: flex-end;
  padding: 22px 24px 92px;
  pointer-events: none;
}
.hire-card {
  pointer-events: auto;
  width: min(720px, calc(100vw - 48px)) !important;
  max-height: min(82vh, 650px);
  grid-template-columns: .86fr 1.14fr !important;
  border-radius: 24px !important;
  box-shadow: 0 34px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06) !important;
  overflow: auto;
}
.hire-visual { padding: 26px 24px !important; }
.hire-orb, .hire-visual h2 { font-size: 27px !important; }
.hire-form { padding: 24px 22px 18px !important; gap: 9px !important; }
.hire-field textarea { height: 76px !important; }
.hire-note { margin-top: 12px !important; }
@media (max-width: 760px) {
  .hire-gui { padding: 12px; padding-bottom: 84px; }
  .hire-card { width: calc(100vw - 24px) !important; max-height: calc(100dvh - 104px); grid-template-columns: 1fr !important; }
  .hire-visual { padding: 20px 20px 16px !important; }
  .hire-form { padding: 18px 16px 16px !important; }
}

/* ============================================================================
   YENİ TUR 5 — kawaii maskot, tutorial, giriş, auth, Chirp/Forum,
   popup Hire me ve gerçek masaüstü çöp kutusu.
   Bu blok dosyanın sonundadır: aynı selector'ların hepsini geçersiz kılar.
   ============================================================================ */

/* --- 1. Maskot: yumuşak, yuvarlak, sevimli ------------------------------- */
#mascot {
  width: 76px;
  height: 94px;
  left: 18px;
  bottom: calc(var(--dock-h, 64px) + 14px);
  z-index: 124;
  transform-origin: 50% 94%;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.34));
}
#mascot:hover { transform: translateY(-3px) scale(1.02); }
.ms-art { overflow: visible; }
.ms-shadow { fill: rgba(0,0,0,.22) !important; }
.ms-head, .ms-body, .ms-ear, .ms-paw {
  stroke: #a96f4f !important;
  stroke-width: 1.15 !important;
  stroke-linejoin: round;
}
.ms-head { fill: #ffe6c4 !important; }
.ms-body { fill: #ffd9ab !important; }
.ms-ear { fill: #ffe6c4 !important; }
.ms-ear-inner { fill: #ffb6c5 !important; stroke: none !important; }
.ms-stripe { fill: #f3b979 !important; opacity: .55 !important; }
.ms-tail { stroke: #f0aa63 !important; stroke-width: 5.4 !important; }
.ms-eye { fill: #fffdf8 !important; stroke: #7a523d !important; stroke-width: .55 !important; }
.ms-pupil { fill: #3b3042 !important; }
.ms-shine { fill: #fff !important; }
.ms-blush { fill: #ff9fb2 !important; opacity: .6 !important; }
.ms-nose { fill: #ff8fa6 !important; }
.ms-mouth { stroke: #86513b !important; }
.ms-tongue { fill: #ff8da3 !important; }
.ms-whisker { stroke: #bd8a67 !important; opacity: .75 !important; }
.ms-paw-pad { fill: #ffb5c2 !important; }
.ms-scarf { fill: var(--accent, #ff8a65) !important; }
.ms-scarf-tail { fill: color-mix(in srgb, var(--accent, #ff8a65) 76%, #301a12) !important; }
.ms-bell { fill: #ffd15c !important; stroke: #b57a1e !important; stroke-width: .65 !important; }
.ms-heart { fill: #ff8faa !important; }

/* Konuşma balonu artık dikey bir şerit değil: içeriğe göre genişler. */
.ms-bubble {
  left: 0 !important;
  bottom: calc(100% + 10px) !important;
  width: max-content;
  max-width: min(258px, calc(100vw - 44px));
  min-width: 112px;
  padding: 9px 13px;
  border-radius: 14px 14px 14px 5px;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  transform: translateY(6px) !important;
}
#mascot.ms-talking .ms-bubble { transform: translateY(0) !important; }
.ms-bubble::after {
  content: ""; position: absolute; left: 18px; bottom: -6px;
  width: 12px; height: 12px; border-radius: 2px;
  background: inherit; border-right: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  transform: rotate(45deg);
}
@media (max-width: 720px) {
  #mascot { left: 10px; bottom: calc(var(--dock-h, 62px) + 8px); width: 62px; height: 78px; }
  .ms-bubble { max-width: min(210px, calc(100vw - 28px)); font-size: 11px; }
}

/* --- 2. Tutorial kartı: başlık ve kafa yan yana, gövde altta ------------- */
.tut-card {
  padding: 16px 18px 15px !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--bg-2) 97%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)) !important;
}
.tut-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 2px 0 0 !important;
}
.tut-mascot {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  padding: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.tut-mascot svg.tut-cat-svg { width: 100% !important; height: 100% !important; display: block; }
.tut-heading { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tut-title { margin: 0 !important; font-size: 15.5px !important; line-height: 1.2 !important; letter-spacing: -.015em; }
.tut-byline {
  display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); opacity: .8;
}
.tut-body { clear: both; margin-top: 9px !important; }
.tut-top { margin-bottom: 4px !important; }
@media (max-width: 720px) {
  .tut-mascot { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  .tut-title { font-size: 15px !important; }
  .tut-card { max-height: 72dvh !important; }
}

/* --- 3. PC giriş kartı: TEK kaynak, tam ekran ortasında -----------------
   Kilit ekranında konum kuralları katman katman birikmişti: sahne (login-stage)
   bir sütun, kart sabit konumlu, bir kural `place-items`, diğeri
   `align-items` diyordu ve iki farklı giriş animasyonu birbirini eziyordu.
   Sonuç: kart ekranın ortasından aşağı kayıyordu. Aşağıdaki blok, kartın
   nerede durduğunu tek yerden belirler:
     · #login  → grid, tek hücre, ortalanmış
     · stage   → boyutu içeriği kadar, kendi içinde ortalanmış
     · wrap    → sadece kartı sarar (fixed/inset YOK)
     · kart    → dikeyde kaydırma (translateY) içermeyen, sadece opaklık
                 animasyonu; bitince konumu değiştiremez.
   Yüksekliği grid zaten sınırlıyor; kart taşarsa kendi içinde kayar. */
body.pre-login #login {
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  place-items: center !important;
  place-content: center !important;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)) !important;
  overflow: hidden;
}
/* `.login-veil` hiçbir stil kuralına sahip değildi: akışta kalan boş bir div
   olduğu için #login grid'inde İKİNCİ bir satır açıyor ve kartı o satıra
   itiyordu (kart ekranın 250px altında başlıyordu). Artık katman; yer kaplamaz.
   Sahne de açıkça tek hücreye sabitlendi, böylece ileride eklenecek bir kardeş
   öğe kartı bir daha aşağı itemez. */
body.pre-login #login > .login-veil,
body.pre-login #login > .login-stars,
body.pre-login #login > .login-rings,
body.pre-login #login > .login-clock {
  position: absolute !important;
  pointer-events: none;
}
body.pre-login #login > .login-veil { inset: 0 !important; }
body.pre-login #login .login-stage { grid-area: 1 / 1 !important; }
body.pre-login #login .login-stage {
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
body.pre-login #login .login-card-wrap {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}
body.pre-login #login .login-card-wrap > .login-card,
body.pre-login #login .login-card {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  width: min(382px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  /* 100vh önce yazılır (eski tarayıcı), dvh destekleniyorsa o kazanır: adres
     çubuğu açılıp kapanınca kart zıplamasın, uzun içerik kendi içinde kaysın. */
  max-height: calc(100vh - 190px) !important;
  max-height: calc(100dvh - 190px) !important;
  overflow: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  pointer-events: auto;
}
/* Giriş animasyonu: yalnızca opaklık + hafif ölçek. Dikey kaydırma yok, yani
   animasyon bittiğinde kart hiçbir yere "kaymış" görünemez. */
body.pre-login #login:not(.unlocking):not(.leaving):not(.bye) .login-card {
  animation: loginCardSettle .46s cubic-bezier(.16, 1, .3, 1) both !important;
}
@keyframes loginCardSettle {
  from { opacity: 0; transform: scale(.975); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 720px) {
  body.pre-login #login .login-card-wrap > .login-card,
  body.pre-login #login .login-card {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 150px) !important;
    max-height: calc(100dvh - 150px) !important;
    padding: 24px 20px 18px !important;
  }
}


/* Kilit açma animasyonları kartı sağa/sola kaydırmaz. */
#login.unlocking .login-card { transform-origin: 50% 50% !important; }
#login.unlocking.u-iris .login-card { clip-path: inset(0 0 0 0 round 16px) !important; animation: unlockSoft .62s ease both !important; }
@keyframes unlockSoft { 0% { opacity: 1; transform: scale(1); } 55% { opacity: 1; transform: scale(.985); } 100% { opacity: 0; transform: scale(1.04); } }
#login .login-card { will-change: auto; }
#login .login-clock { max-width: calc(100vw - 24px); }
@media (max-height: 700px) {
  body.pre-login #login .login-clock { transform: scale(.78); transform-origin: 50% 0; }
}

/* --- 4. Ön-giriş: dev overlay değil, uygulamanın kendi küçük penceresi --- */
#windows .win.win--auth { border-radius: 18px; }
#windows .win.win--auth .win__body { height: 100%; }
.pl-gate.pl-window {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow: auto !important;
  background:
    radial-gradient(90% 80% at 12% 0%, color-mix(in srgb, var(--pl-a) 20%, transparent), transparent 60%),
    radial-gradient(80% 70% at 92% 100%, color-mix(in srgb, var(--pl-b) 18%, transparent), transparent 62%),
    var(--bg-2) !important;
  backdrop-filter: none !important;
  animation: none !important;
}
.pl-gate.pl-window .pl-redirect-card {
  width: min(470px, 100%) !important;
  max-height: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 22px 15px !important;
  border-radius: 20px !important;
  text-align: left !important;
  background: color-mix(in srgb, var(--bg-2) 94%, #000) !important;
  border: 1px solid color-mix(in srgb, var(--pl-a) 24%, var(--line)) !important;
  box-shadow: 0 22px 55px -30px #000 !important;
  overflow: auto;
}
.pl-gate.pl-window .pl-visual,
.pl-gate.pl-window .pl-orbit,
.pl-gate.pl-window .pl-spark,
.pl-gate.pl-window .pl-chip,
.pl-gate.pl-window .pl-window-glow { display: none !important; }
.pl-appbar { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.pl-appicon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 13px; color: #fff;
  background: linear-gradient(145deg, var(--pl-a), var(--pl-b));
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--pl-a) 80%, transparent);
}
.pl-appicon svg { width: 23px; height: 23px; }
.pl-appbar-tx { min-width: 0; display: flex; flex-direction: column; }
.pl-appbar-tx b { font-size: 14px; font-weight: 800; }
.pl-appbar-tx i { font-style: normal; font-size: 9.5px; color: var(--muted); }
.pl-required {
  margin-left: auto; flex: none; padding: 5px 8px; border-radius: 999px;
  font-size: 7.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  color: var(--pl-a); background: color-mix(in srgb, var(--pl-a) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pl-a) 28%, transparent);
}
.pl-gate.pl-window .pl-redirect-card h2 {
  margin: 0 0 5px !important; font-size: 22px !important; line-height: 1.15 !important;
  letter-spacing: -.03em; font-weight: 800;
}
.pl-gate.pl-window .pl-sub {
  margin: 0 0 12px !important; max-width: none !important;
  font-size: 11.5px !important; line-height: 1.5 !important; color: var(--muted);
}
.pl-features { display: flex; flex-direction: column; gap: 5px; margin: 0 0 15px; }
.pl-features span {
  position: relative; padding: 7px 9px 7px 23px; border-radius: 9px;
  font-size: 10.5px; color: var(--muted);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
}
.pl-features span::before {
  content: "✓"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--pl-a); font-size: 9px; font-weight: 900;
}
.pl-gate.pl-window .pl-redirect-acts { display: flex; flex-direction: column; gap: 5px; }
.pl-gate.pl-window .pl-go {
  height: 42px !important; border-radius: 11px !important; font-size: 11.5px !important;
}
.pl-gate.pl-window .pl-cancel { height: 30px !important; font-size: 10px !important; }
.pl-gate.pl-window .pl-redirect-foot { margin-top: 9px !important; font-size: 8.5px !important; text-align: center; }
.pl-gate.pl-window .pl-close { top: 10px !important; right: 10px !important; width: 27px !important; height: 27px !important; font-size: 10px !important; }
@media (max-width: 720px) {
  .pl-gate.pl-window { padding: 10px !important; }
  .pl-gate.pl-window .pl-redirect-card { padding: 16px 16px 12px !important; border-radius: 16px !important; }
  .pl-gate.pl-window .pl-redirect-card h2 { font-size: 19px !important; }
  .pl-features span { font-size: 10px; }
}

/* --- 5. Ayarlar → Profil: başlık ortada, kart kaymıyor ------------------ */
#win-settings .set-panel { overflow-y: auto !important; }
.set-profile { padding: 18px 20px 30px !important; overflow-y: auto !important; }
.set-profile .auth-card,
.set-profile .auth-card--signed,
.set-profile .auth-card--gate {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 22px 22px 18px !important;
  border-radius: 20px !important;
}
.set-profile .ac-gate-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 0 15px !important;
}
.set-profile .ac-gate-head .ac-gate-logo { align-self: center !important; text-align: center; }
.set-profile .ac-gate-head b { text-align: center !important; font-size: 17px !important; line-height: 1.3; letter-spacing: -.015em; }
.set-profile .ac-gate-head i { text-align: center !important; max-width: 38ch; line-height: 1.5; font-size: 10.5px; margin-inline: auto; }
.set-profile .auth-tabs { margin-top: 4px; }
.set-profile .auth-submit { width: 100%; }
@media (max-width: 720px) {
  .set-profile { padding: 12px 12px 26px !important; }
  .set-profile .auth-card, .set-profile .auth-card--signed, .set-profile .auth-card--gate { padding: 16px 14px !important; }
}

/* --- 6. Hire me: sağ altta gerçek bir popup ------------------------------ */
.hire-gui {
  position: fixed !important;
  inset: 0 !important;
  z-index: 13000 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 18px 22px calc(var(--dock-h, 64px) + 18px) !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity .2s ease;
}
.hire-gui.on { opacity: 1; }
.hire-gui.out { opacity: 0; }
.hire-card {
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(520px, calc(100vw - 32px)) !important;
  max-height: min(78vh, 640px) !important;
  padding: 0 !important;
  border-radius: 20px !important;
  overflow: auto !important;
  transform: translateY(12px) scale(.985);
  transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.hire-gui.on .hire-card { transform: none; }
.hire-x { top: 10px !important; right: 10px !important; width: 27px !important; height: 27px !important; font-size: 11px !important; }
.hire-pop-head {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 4px 12px;
  align-items: center;
  padding: 18px 20px 0;
}
.hire-pop-head .hire-orb {
  width: 52px !important; height: 52px !important; margin: 0 !important;
  border-radius: 16px !important; font-size: 17px !important;
  display: grid; place-items: center;
}
.hire-pop-head .hire-orb i { display: none !important; }
.hire-pop-tx { min-width: 0; }
.hire-pop-tx h2 { margin: 2px 0 1px !important; font-size: 24px !important; line-height: 1.1 !important; letter-spacing: -.035em; }
.hire-pop-tx p { margin: 0 !important; font-size: 10.5px !important; line-height: 1.4 !important; color: var(--muted); max-width: 40ch; }
.hire-pop-head .hire-points { grid-column: 1 / -1; margin-top: 10px !important; }
.hire-pop-head .hire-points span { padding: 7px 6px !important; font-size: 8px !important; }
.hire-pop-head .hire-points b { font-size: 13px !important; }
.hire-form { padding: 12px 20px 16px !important; gap: 9px !important; }
.hire-field textarea { height: 70px !important; }
.hire-field input { height: 42px !important; }
.hire-quickb { display: none !important; }
.hire-foot { margin-top: 1px !important; }
@media (max-width: 760px) {
  .hire-gui { padding: 10px 10px calc(var(--dock-h, 62px) + 10px) !important; }
  .hire-card { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 120px) !important; }
  .hire-pop-head { padding: 15px 15px 0; grid-template-columns: 44px minmax(0,1fr); }
  .hire-pop-head .hire-orb { width: 42px !important; height: 42px !important; font-size: 14px !important; }
  .hire-pop-tx h2 { font-size: 21px !important; }
  .hire-form { padding: 10px 15px 14px !important; }
}

/* --- 7. Mail: Hire me yalnızca taslak boşken görünür -------------------- */
.mail-hire[hidden], .mail-hire[aria-hidden="true"] { display: none !important; }
.mail-head { gap: 9px; }
.mail-hire { max-width: 100%; }
.mail-field textarea { min-height: 150px; }
@media (max-width: 560px) {
  .mail-head { flex-wrap: wrap; }
  .mail-hire { width: 100%; }
}

/* --- 8. Chirp: canlı, ferah, kaymayan düzen ----------------------------- */
#win-chirp .win__body { height: 100% !important; display: flex !important; }
#win-chirp .chirp-wrap { flex: 1 1 auto; min-height: 0; }
#win-chirp .chirp { grid-template-columns: 198px minmax(0, 1fr); }
#win-chirp .chirp-main { gap: 11px; padding: 18px clamp(14px, 3vw, 30px) 28px; }
#win-chirp .chirp-main > * { max-width: 720px; }
#win-chirp .chirp-hero {
  padding: 20px 22px !important;
  border-radius: 20px !important;
}
#win-chirp .chirp-hero h1 { font-size: clamp(26px, 4vw, 34px) !important; }
#win-chirp .chirp-hero::after {
  content: ""; position: absolute; right: -40px; bottom: -70px;
  width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.26), transparent 66%);
  pointer-events: none;
}
#win-chirp .chirp-stories { padding: 13px 2px 8px !important; gap: 12px !important; }
#win-chirp .chirp-atmo { margin-bottom: 2px !important; }
#win-chirp .chirp-prompt {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(236,72,153,.08));
  border: 1px solid rgba(125,211,252,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#win-chirp .chirp-prompt-mark {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 11px; color: #fff; font-size: 15px;
  background: linear-gradient(145deg,#38bdf8,#8b5cf6 60%,#ec4899);
  box-shadow: 0 10px 22px -12px #8b5cf6;
}
#win-chirp .chirp-prompt-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#win-chirp .chirp-prompt-tx span { font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #7dd3fc; }
#win-chirp .chirp-prompt-tx span b { color: #f0abfc; }
#win-chirp .chirp-prompt-tx > b { font-size: 12px; font-weight: 700; color: var(--fg); line-height: 1.35; }
#win-chirp .chirp-prompt-go {
  margin-left: auto; flex: none; height: 31px; padding: 0 11px; border-radius: 9px;
  border: 1px solid rgba(125,211,252,.26); background: rgba(255,255,255,.06);
  color: #bae6fd; font: inherit; font-size: 9.5px; font-weight: 800; cursor: pointer;
}
#win-chirp .chirp-prompt-go:hover { background: rgba(56,189,248,.18); }
#win-chirp .chirp-quickcompose {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 16px;
  border: 1px solid rgba(125,211,252,.2);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow: 0 16px 34px -32px #000;
}
#win-chirp .chirp-qc-av { width: 32px; height: 32px; flex: none; }
#win-chirp .chirp-qc-input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.16);
  color: var(--muted); font: inherit; font-size: 11px; text-align: left; cursor: text;
}
#win-chirp .chirp-qc-input:hover { border-color: rgba(125,211,252,.32); color: var(--fg); }
#win-chirp .chirp-qc-count { flex: none; font-size: 9px; color: var(--muted); }
#win-chirp .chirp-qc-count b { color: #bae6fd; font-size: 12px; }
#win-chirp .chirp-qc-add {
  flex: none; height: 34px; padding: 0 11px; border-radius: 10px; border: 0;
  background: linear-gradient(135deg,#38bdf8,#8b5cf6); color: #071018;
  font: inherit; font-size: 10px; font-weight: 900; cursor: pointer;
}
#win-chirp .chirp-compose--open { animation: chirpComposeIn .26s cubic-bezier(.16,1,.3,1) both; }
@keyframes chirpComposeIn { from { opacity: 0; transform: translateY(-7px) scale(.99); } to { opacity: 1; transform: none; } }
#win-chirp .chirp-compose-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
#win-chirp .chirp-compose-head b { font-size: 12px; font-weight: 800; }
#win-chirp .chirp-compose-head span { font-size: 8.5px; color: var(--faint); }
#win-chirp .chirp-compose-x {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
}
#win-chirp .chirp-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px; padding: 26px 18px 22px; border-radius: 18px;
  border: 1px dashed rgba(125,211,252,.26);
  background: radial-gradient(70% 80% at 50% 0%, rgba(56,189,248,.09), transparent 62%);
}
#win-chirp .chirp-empty-art { position: relative; width: 92px; height: 62px; margin-bottom: 5px; }
#win-chirp .chirp-empty-art span {
  position: absolute; inset: 7px 18px 5px; display: grid; place-items: center;
  border-radius: 16px; background: linear-gradient(145deg,#0c4a6e,#4c1d95);
  border: 1px solid rgba(125,211,252,.34); color: #bae6fd; font-size: 22px;
  box-shadow: 0 14px 28px -18px #000;
}
#win-chirp .chirp-empty-art i {
  position: absolute; font-style: normal; color: #f0abfc; text-shadow: 0 0 14px #f0abfc;
  animation: chirpFloat 4s ease-in-out infinite;
}
#win-chirp .chirp-empty-art i:nth-child(1) { left: 2px; top: 6px; font-size: 15px; }
#win-chirp .chirp-empty-art i:nth-child(2) { right: 2px; top: 28px; font-size: 18px; animation-delay: -1.4s; }
#win-chirp .chirp-empty-art i:nth-child(3) { left: 18px; bottom: -4px; font-size: 12px; animation-delay: -2.2s; }
#win-chirp .chirp-empty > b { font-size: 13px; }
#win-chirp .chirp-empty > span { max-width: 40ch; font-size: 10.5px; line-height: 1.5; color: var(--muted); }
#win-chirp .chirp-empty-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 9px; }
#win-chirp .chirp-empty-chips button {
  height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(125,211,252,.26); background: rgba(255,255,255,.05);
  color: #bae6fd; font: inherit; font-size: 9.5px; font-weight: 800;
}
#win-chirp .chirp-empty-chips button:hover { background: rgba(56,189,248,.16); }
#win-chirp .chirp-card { border-radius: 16px !important; }
#win-chirp .chirp-card-head { padding: 10px 12px; }
#win-chirp .chirp-frame { margin: 0 12px; border-radius: 11px; }
#win-chirp .chirp-feed { gap: 11px; }
@media (max-width: 780px) {
  #win-chirp .chirp { grid-template-columns: 1fr; }
  #win-chirp .chirp-side { display: none; }
  #win-chirp .chirp-prompt { align-items: flex-start; }
  #win-chirp .chirp-prompt-go { display: none; }
  #win-chirp .chirp-qc-input { font-size: 10.5px; }
}

/* --- 9. Forum: net hiyerarşi, küçük canlı rozeti, okunur kartlar --------- */
#win-forum button:focus-visible,
#win-forum input:focus-visible,
#win-forum select:focus-visible,
#win-forum textarea:focus-visible,
#win-chirp button:focus-visible,
#win-chirp input:focus-visible,
#win-chirp textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, #fff) !important; outline-offset: 2px; }
#win-forum button:focus:not(:focus-visible) { outline: none !important; }
#win-forum .forum-head--new {
  background:
    radial-gradient(80% 130% at 100% 0%, rgba(167,139,250,.18), transparent 58%),
    radial-gradient(60% 100% at 0% 100%, rgba(34,211,238,.10), transparent 60%) !important;
  border-bottom: 1px solid var(--line);
}
#win-forum .forum-hero-tx h1 { font-size: 23px !important; gap: 7px !important; }
#win-forum .forum-live {
  padding: 2px 6px !important; border-radius: 999px !important;
  font-size: 7px !important; letter-spacing: .08em !important;
  background: rgba(74,222,128,.12) !important; color: #86efac !important;
  border: 1px solid rgba(74,222,128,.24) !important;
}
#win-forum .forum-live i { width: 4px !important; height: 4px !important; }
#win-forum .forum-hero-stats { gap: 5px !important; margin-top: 8px !important; }
#win-forum .forum-stat, #win-forum .forum-hero-stats > * {
  padding: 4px 8px !important; border-radius: 999px !important;
  font-size: 9px !important; background: color-mix(in srgb, var(--fg) 5%, transparent) !important;
  border: 1px solid var(--line) !important;
}
#win-forum .forum-newbtn {
  height: 36px !important; padding: 0 13px !important; border-radius: 10px !important;
  background: linear-gradient(135deg,#a78bfa,#7c3aed) !important; color: #fff !important;
  font-size: 10.5px !important; font-weight: 800 !important; border: 0 !important;
  box-shadow: 0 12px 24px -14px #7c3aed;
}
#win-forum .forum-newbtn:hover { filter: brightness(1.07); }
#win-forum .forum-toolbar {
  padding: 9px 0 8px !important;
  background: linear-gradient(180deg, var(--bg) 82%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
#win-forum .forum-search { flex: 1; max-width: none; }
#win-forum .forum-search input { height: 36px !important; font-size: 11px !important; }
#win-forum .forum-sort { height: 36px !important; font-size: 10.5px !important; }
#win-forum #forum-count { font-size: 9.5px !important; color: var(--faint); }
#win-forum .forum-thread {
  border-radius: 13px !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
#win-forum .forum-thread:hover {
  transform: translateY(-1px);
  border-color: rgba(167,139,250,.36) !important;
  background: color-mix(in srgb, #a78bfa 7%, transparent) !important;
}
#win-forum .forum-thread-tx > b { font-size: 12.5px !important; line-height: 1.3; }
#win-forum .forum-thread-body { color: var(--muted) !important; }
#win-forum .forum-av { box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
#win-forum .forum-side-head { font-size: 8.5px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--faint) !important; }
/* The « close button of the channels panel is an icon, not a label: undo the
   uppercase caption styling that was leaking into it. */
#win-forum .forum-side-x {
  font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--muted) !important;
}
#win-forum .forum-side-x:hover { color: var(--fg) !important; }
@media (max-width: 760px) {
  #win-forum .forum-head--new { padding: 14px 14px 10px !important; }
  #win-forum .forum-main { padding: 0 12px 18px !important; }
  #win-forum .forum-hero-tx h1 { font-size: 20px !important; }
  #win-forum .forum-toolbar { flex-wrap: wrap; }
  #win-forum #forum-count { width: 100%; }
}

/* --- 10. Masaüstü çöp kutusu (Mac'teki gibi) ---------------------------- */
#desk-trash {
  position: fixed;
  right: 26px;
  bottom: calc(var(--dock-h, 64px) + 16px);
  width: 78px;
  height: 100px;
  z-index: 4;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  user-select: none;
  outline: none;
  transition: transform .18s cubic-bezier(.16,1,.3,1), opacity .2s;
  filter: drop-shadow(0 15px 18px rgba(0,0,0,.36));
}
body.pre-login #desk-trash { display: none !important; }
#desk-trash:hover { transform: translateY(-3px); }
#desk-trash.over, #desk-trash.trash-eat { transform: translateY(-4px) scale(1.06); }
.dt-glow {
  position: absolute; left: 50%; top: 12px; width: 64px; height: 64px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(125,211,252,.24), transparent 68%);
  opacity: 0; transition: opacity .2s;
}
#desk-trash.over .dt-glow, #desk-trash.trash-eat .dt-glow { opacity: 1; }
.dt-lid {
  position: absolute; left: 6px; top: 2px; width: 66px; height: 18px;
  transform-origin: 10px 15px;
  transition: transform .24s cubic-bezier(.3,1.4,.5,1);
  z-index: 3;
}
.dt-lid-art { width: 100%; height: 100%; display: block; overflow: visible; }
.dt-lid-art path {
  fill: #e7eaef; stroke: #7f8794; stroke-width: 1.1; stroke-linejoin: round;
}
.dt-lid-art path:last-child { fill: #c8ced7; }
.dt-handle {
  position: absolute; left: 25px; top: -5px; width: 16px; height: 7px;
  border: 1.5px solid #8a919c; border-bottom: 0; border-radius: 5px 5px 0 0;
  background: #dfe3e9;
}
#desk-trash.over .dt-lid, #desk-trash.trash-eat .dt-lid {
  transform: translate(-9px,-9px) rotate(-26deg);
}
.dt-body {
  position: absolute; left: 11px; top: 20px; width: 56px; height: 66px;
  border-radius: 6px 6px 11px 11px;
  background:
    linear-gradient(90deg, #8d949f 0%, #eef1f5 15%, #c5cbd3 34%, #f5f7fa 52%, #c1c7d0 70%, #e8ebf0 86%, #858c97 100%);
  border: 1px solid #747b86;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.7), inset 0 -8px 14px rgba(0,0,0,.16), 0 8px 12px -8px #000;
  clip-path: polygon(4% 0, 96% 0, 88% 100%, 12% 100%);
  overflow: hidden;
}
.dt-rim {
  position: absolute; left: 2px; right: 2px; top: 0; height: 7px;
  background: linear-gradient(180deg,#f3f5f8,#aeb5bf);
  border-bottom: 1px solid #7d848f;
}
.dt-rib {
  position: absolute; top: 12px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(90,98,110,.5), rgba(255,255,255,.5), rgba(90,98,110,.4));
  opacity: .75;
}
.dt-rib.r1 { left: 18%; } .dt-rib.r2 { left: 34%; } .dt-rib.r3 { left: 50%; }
.dt-rib.r4 { left: 66%; } .dt-rib.r5 { left: 82%; }
.dt-recycle {
  position: absolute; left: 50%; top: 26px; transform: translateX(-50%);
  font-size: 20px; line-height: 1; color: #7c8490; opacity: .9;
}
.dt-label {
  position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  font-size: 9px; font-weight: 700; color: #fff;
  background: rgba(12,14,20,.46); text-shadow: 0 1px 2px #000;
  opacity: 0; transition: opacity .16s;
}
#desk-trash:hover .dt-label { opacity: 1; }
.dt-count {
  position: absolute; right: 4px; top: 4px; z-index: 4;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg,#ff8a65,#ef4444); color: #fff;
  font-size: 9px; font-weight: 900; box-shadow: 0 4px 10px rgba(239,68,68,.45);
}
.dt-count[hidden] { display: none !important; }
#desk-trash.has-items .dt-body { animation: dtBreathe 3.4s ease-in-out infinite; }
@keyframes dtBreathe { 0%,100% { transform: none; } 50% { transform: translateY(-1px); } }
#desk-trash.trash-bite .dt-body { animation: dtBite .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes dtBite {
  0% { transform: scale(1.06) rotate(0); } 25% { transform: scale(.93) rotate(-3deg); }
  60% { transform: scale(1.04) rotate(2deg); } 100% { transform: scale(1) rotate(0); }
}
.trash-fly {
  position: fixed; z-index: 12900; pointer-events: none;
  transform: translate(-50%,-50%) scale(1);
  transition: transform .62s cubic-bezier(.5,0,.7,.35), opacity .62s ease;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.4));
}
.trash-fly.fly {
  transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)) scale(.16) rotate(26deg);
  opacity: 0;
}
.tf-paper {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 58px; padding: 7px 5px; border-radius: 8px;
  background: #fff; border: 1px solid #cbd2dc; color: #39404a;
}
.tf-paper b { font-size: 15px; line-height: 1; }
.tf-paper i { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 6px; }
/* Dock'taki çöp artık app ikonu değil, kutusuz gerçek bir teneke kutu. */
.dock-it--trash {
  background: transparent !important;
  box-shadow: none !important;
  width: 50px !important;
  overflow: visible;
}
.dock-it--trash::after {
  inset: 2px !important;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.12), transparent 66%) !important;
}
.dock-it--trash .trash-ic { width: 33px !important; height: 33px !important; stroke: #eef2f8 !important; }
.dock-it--trash:hover { transform: translateY(-5px) scale(1.06); }
@media (max-width: 720px) {
  #desk-trash { right: 10px; bottom: calc(var(--dock-h, 62px) + 8px); width: 62px; height: 82px; }
  .dt-body { left: 8px; top: 17px; width: 46px; height: 55px; }
  .dt-lid { left: 4px; top: 2px; width: 54px; }
  .dt-handle { left: 20px; width: 14px; }
  .dt-recycle { top: 21px; font-size: 17px; }
  .dt-label { display: none; }
  .dock-it--trash { width: 42px !important; }
  .dock-it--trash .trash-ic { width: 28px !important; height: 28px !important; }
}

/* --- 11. Genel mobil taşma güvenliği ------------------------------------ */
#win-chirp, #win-forum { max-width: calc(100vw - 12px) !important; }
@media (max-width: 720px) {
  #win-chirp .chirp-main { gap: 9px; padding: 13px 10px 26px; }
  #win-chirp .chirp-hero { padding: 16px !important; }
  #win-chirp .chirp-hero h1 { font-size: 24px !important; }
  #win-chirp .chirp-quickcompose { gap: 7px; padding: 9px; }
  #win-chirp .chirp-qc-add span { display: none; }
  #win-chirp .chirp-empty { padding: 20px 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .trash-fly, #desk-trash, .ms-art, .chirp-empty-art i { transition: none !important; animation: none !important; }
}

/* ============================================================================
   YENİ TUR — GERÇEKÇİ MASAÜSTÜ
   Tek giriş sahnesi · mobil · RTL · Creator · dock çöpü · About · pre-login
   ========================================================================= */

/* ---- 0. Katman disiplini ------------------------------------------------- */
#login { z-index: 4000 !important; }
#boot-splash { z-index: 9998 !important; }
/* Giriş kartı tamamen sönene kadar masaüstü görünmesin: iki ayrı login
   varmış gibi duran hayalet katmanın tek nedeni buydu. */
body.login-out #desktop,
body.login-out #menubar,
body.login-out #dock {
  opacity: 0 !important;
  filter: blur(7px) !important;
  pointer-events: none !important;
}
body.pre-login #login,
body.login-out #login { visibility: visible; }
#login.bye { transition: opacity .18s ease, visibility 0s linear .18s !important; }

/* Masaüstünde ikinci çöp kutusu yok — sadece dock'ta. */
#desk-trash { display: none !important; }

/* ---- 1. Kilit ekranı: tek kart, ortalanmış, net ------------------------- */
body.pre-login #login {
  background:
    radial-gradient(110% 80% at 50% 22%, rgba(9, 11, 18, .38), rgba(5, 6, 10, .86) 78%),
    var(--login-wall, none) center / cover no-repeat,
    #07080c;
  align-items: center;
  justify-items: center;
}
#login::before { filter: blur(32px) saturate(1.05) brightness(.48); }
#login .login-stars { opacity: .32; }
#login .login-rings { display: none !important; }
#login .login-clock {
  top: clamp(26px, 8vh, 72px);
  gap: 2px;
  text-shadow: 0 2px 22px rgba(0,0,0,.55);
}
#login .login-clock b { font-weight: 300; letter-spacing: -.055em; }
#login .login-clock span { font-size: 10.5px; letter-spacing: .2em; opacity: .62; }
body.pre-login #login .login-card-wrap > .login-card,
#login .login-card {
  position: relative !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  width: min(382px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 175px) !important;
  overflow: auto !important;
  padding: 30px 28px 22px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(25, 27, 35, .92), rgba(12, 13, 18, .94)) !important;
  box-shadow:
    0 40px 90px -32px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
  backdrop-filter: blur(26px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.2) !important;
  gap: 0 !important;
  text-align: center;
  transform: none !important;
  animation: loginCardSettle .46s cubic-bezier(.16,1,.3,1) both !important;
}
body.pre-login #login .login-logo,
#login .login-logo {
  display: block !important;
  font-size: 2.15em !important;
  letter-spacing: -.045em !important;
  margin: 0 !important;
  color: #fff !important;
}
body.pre-login #login .login-sub,
#login .login-sub {
  display: block !important;
  margin-top: 2px !important;
  font-size: 9.5px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.48) !important;
}
#login .login-orb { margin: 20px auto 10px !important; width: 82px; height: 82px; }
#login .login-avatar {
  width: 82px !important; height: 82px !important;
  border-radius: 26px !important;
  font-size: 25px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
#login .login-orb-ring { display: none !important; }
#login .login-name { color: #fff !important; font-size: 20px !important; font-weight: 800 !important; }
#login .login-status {
  margin-top: 4px !important;
  font-size: 9px !important;
  letter-spacing: .2em !important;
  color: rgba(255,255,255,.52) !important;
}
#login .login-pass { width: 100% !important; margin: 13px 0 0 !important; }
#login .login-btn {
  width: 100% !important;
  height: 50px !important;
  margin-top: 16px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: var(--accent, #ff9a76) !important;
  color: #0d1016 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--accent, #ff9a76) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
/* The old body.pre-login rule is more specific, so state it here too. */
body.pre-login #login .login-btn,
#login .login-btn {
  background: var(--accent, #ff9a76) !important;
  color: #0d1016 !important;
}
body.pre-login #login .login-btn:hover,
#login .login-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.06); }
#login .login-hint {
  display: block !important;
  margin-top: 11px !important;
  font-size: 9.5px !important;
  letter-spacing: .06em !important;
  color: rgba(255,255,255,.44) !important;
}
/* Dil seçimi artık kartın içinde ve tam ortada — sol/sağ kaymıyor. */
body.pre-login #login .login-lang {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  transform: none !important;
  color: rgba(255,255,255,.5) !important;
}
body.pre-login #login .login-lang span {
  display: inline-block !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.46) !important;
}
body.pre-login #login .login-lang select,
#login .login-lang select {
  width: auto !important;
  min-width: 146px;
  max-width: 190px;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
}
#login .login-lang select option { background: #14161d; color: #fff; }
/* Altta ayrı bir daire/player çıkmasın. */
#login .login-now { display: none !important; }
#login .login-guest {
  width: 100% !important;
  margin-top: 8px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.78) !important;
  border-radius: 12px !important;
}

@media (max-width: 720px) {
  #login .login-clock { top: max(34px, env(safe-area-inset-top) + 24px); }
  #login .login-clock b { font-size: 50px; }
  body.pre-login #login .login-card-wrap > .login-card,
  #login .login-card {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 168px) !important;
    padding: 24px 20px 18px !important;
    border-radius: 22px !important;
  }
  #login .login-orb { margin-top: 14px !important; width: 72px; height: 72px; }
  #login .login-avatar { width: 72px !important; height: 72px !important; border-radius: 22px !important; }
  #login .login-name { font-size: 18px !important; }
  #login .login-btn { height: 48px !important; }
  body.pre-login #login .login-lang { justify-content: center !important; }
  body.pre-login #login .login-lang select { width: 150px !important; }
}

/* ---- 2. Pre-login / uygulama kapısı ------------------------------------ */
#windows .win.win--auth { border-radius: 20px !important; }
#auth-wall .pl-gate.pl-window,
.pl-gate.pl-window {
  padding: 0 !important;
  background: transparent !important;
}
.pl-gate.pl-window .pl-redirect-card {
  padding: 16px 26px 19px !important;
  border-radius: 22px !important;
  overflow: hidden;
  background:
    radial-gradient(90% 65% at 50% 0%, color-mix(in srgb, var(--pl-a) 13%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 97%, transparent), color-mix(in srgb, var(--bg) 98%, #000)) !important;
  border: 1px solid color-mix(in srgb, var(--pl-a) 22%, var(--line)) !important;
  box-shadow: 0 30px 70px -28px #000a, inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.pl-gate.pl-window .pl-scene {
  position: relative;
  height: 158px;
  margin: -4px -8px 12px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 42%, color-mix(in srgb, var(--pl-a) 26%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--pl-b) 13%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--pl-a) 16%, transparent);
}
.pl-gate .pl-scene::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--pl-a) 9%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--pl-a) 9%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 35%, transparent 80%);
  opacity: .7;
}
.pl-gate .pl-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pl-a) 35%, transparent);
  animation: plOrbit 9s linear infinite;
}
.pl-gate .pl-orbit.o1 { width: 112px; height: 112px; animation-duration: 7s; }
.pl-gate .pl-orbit.o2 { width: 164px; height: 164px; border-style: dashed; opacity: .7; animation-direction: reverse; animation-duration: 12s; }
.pl-gate .pl-orbit.o3 { width: 216px; height: 216px; opacity: .45; animation-duration: 18s; }
@keyframes plOrbit { to { transform: rotate(360deg); } }
.pl-gate .pl-glyph {
  position: relative; z-index: 2;
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pl-a) 92%, #fff), var(--pl-b));
  box-shadow: 0 20px 42px -16px color-mix(in srgb, var(--pl-a) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.5);
  animation: plBreathe 3.2s ease-in-out infinite;
}
.pl-gate .pl-glyph svg { width: 38px; height: 38px; }
@keyframes plBreathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.035); } }
.pl-gate .pl-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--pl-a); box-shadow: 0 0 14px var(--pl-a); animation: plSpark 3.4s ease-in-out infinite; }
.pl-gate .pl-spark.s1 { left: 18%; top: 30%; }
.pl-gate .pl-spark.s2 { right: 20%; top: 22%; animation-delay: -1.1s; }
.pl-gate .pl-spark.s3 { left: 27%; bottom: 18%; animation-delay: -2.2s; }
@keyframes plSpark { 0%,100% { opacity: .25; transform: translateY(0) scale(.8); } 50% { opacity: 1; transform: translateY(-9px) scale(1.25); } }
.pl-gate .pl-scene-tag {
  position: absolute; right: 12px; bottom: 9px;
  font: 800 8px/1 "JetBrains Mono", monospace;
  letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pl-a) 70%, #fff); opacity: .65;
}
.pl-gate.pl-window .pl-appbar { margin-bottom: 9px; }
.pl-gate.pl-window .pl-appbar-tx b { font-size: 13px; }
.pl-gate.pl-window .pl-redirect-card h2 {
  font-size: 22px !important;
  line-height: 1.1 !important;
  margin: 4px 0 7px !important;
  letter-spacing: -.04em !important;
  text-align: center;
}
.pl-gate.pl-window .pl-sub {
  margin: 0 auto 14px !important;
  max-width: 46ch;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
  text-align: center;
}
.pl-gate.pl-window .pl-redirect-acts { gap: 7px !important; }
.pl-gate.pl-window .pl-go {
  height: 46px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pl-a) 90%, #fff), var(--pl-b)) !important;
  color: #0d1016 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--pl-a) 80%, transparent) !important;
}
.pl-gate.pl-window .pl-go i { font-style: normal; font-size: 17px; line-height: 1; transition: transform .18s; }
.pl-gate.pl-window .pl-go:hover i { transform: translateX(3px); }
.pl-gate.pl-window .pl-cancel {
  height: 32px !important; border: 0 !important; background: transparent !important;
  color: var(--muted) !important; font-size: 10px !important;
}
.pl-gate.pl-window .pl-redirect-foot { margin-top: 10px !important; text-align: center; font-size: 8.5px !important; }
.pl-gate.pl-window .pl-close {
  top: 12px !important; right: 12px !important;
  width: 28px !important; height: 28px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
}
/* Market kapısında çarpı yok; "şimdi değil" yeterli. */
#auth-wall .pl-close { display: none !important; }

@media (max-width: 720px) {
  .pl-gate.pl-window .pl-redirect-card { padding: 12px 16px 14px !important; border-radius: 18px !important; }
  .pl-gate.pl-window .pl-scene { height: 126px; margin-bottom: 9px; }
  .pl-gate .pl-glyph { width: 62px; height: 62px; border-radius: 19px; }
  .pl-gate .pl-glyph svg { width: 31px; height: 31px; }
  .pl-gate .pl-orbit.o1 { width: 92px; height: 92px; }
  .pl-gate .pl-orbit.o2 { width: 136px; height: 136px; }
  .pl-gate .pl-orbit.o3 { width: 176px; height: 176px; }
  .pl-gate.pl-window .pl-redirect-card h2 { font-size: 19px !important; }
  .pl-gate.pl-window .pl-appbar-tx i { display: none; }
}

/* ---- 3. Tutorial maskotu: kafa yazının üstüne binmesin ------------------ */
.tut-card { max-width: min(390px, calc(100vw - 24px)) !important; }
.tut-title-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  min-width: 0;
  margin: 2px 0 0 !important;
}
.tut-mascot {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  min-width: 46px;
  display: grid !important;
  place-items: center !important;
  padding: 2px !important;
  overflow: hidden;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important;
  box-sizing: border-box;
}
.tut-mascot svg,
.tut-mascot svg.tut-cat-svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  overflow: hidden;
  object-fit: contain;
}
.tut-heading { flex: 1 1 auto !important; min-width: 0 !important; display: flex; flex-direction: column; gap: 2px; }
.tut-title { margin: 0 !important; overflow-wrap: anywhere; }
.tut-byline { white-space: normal; }
.tut-body { clear: none !important; margin-top: 9px !important; }
@media (max-width: 720px) {
  .tut-mascot { width: 40px !important; height: 40px !important; flex-basis: 40px !important; min-width: 40px; }
  .tut-title-row { gap: 9px !important; }
  .tut-card { max-height: 72dvh !important; }
}

/* ---- 4. About: istatistik şeridi yok, mobil uyumlu ---------------------- */
#win-about .win__body { overflow: auto !important; overscroll-behavior: contain; }
#win-about .ab3 { gap: 30px; padding-bottom: 18px; }
.ab3-hero { gap: 26px; }
.ab3-kicker { font-size: .5em !important; letter-spacing: .22em; }
.ab3-hero h1 { margin: 7px 0 3px !important; }
.ab3-pitch { max-width: 42ch; }
.ab3-meta { gap: 9px 13px; }
.ab3-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 2px 32px 0; padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  background:
    radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg-2) 78%, transparent);
}
.ab3-contact h2 { margin: 4px 0 5px; font-size: 1.2em; letter-spacing: -.03em; }
.ab3-contact p { margin: 0; max-width: 52ch; font-size: .7em; line-height: 1.55; color: var(--muted); }
.ab3-contact-act { display: flex; flex-direction: column; gap: 7px; min-width: 190px; }
.ab3-contact-act .ab3-btn { justify-content: center; }

@media (max-width: 900px) {
  #win-about .ab3 { gap: 24px; }
  .ab3-hero { grid-template-columns: 1fr !important; padding: 26px 22px !important; }
  .ab3-term { display: none !important; }
  .ab3-sec { padding: 0 22px; }
  .ab3-cases { grid-template-columns: 1fr !important; }
  .ab3-principles { grid-template-columns: 1fr !important; }
  .ab3-two { grid-template-columns: 1fr !important; gap: 26px; }
  .ab3-contact { margin: 0 22px; flex-direction: column; align-items: stretch; }
  .ab3-contact-act { min-width: 0; }
}
@media (max-width: 520px) {
  #win-about .ab3 { gap: 20px; }
  .ab3-hero { padding: 20px 16px !important; }
  .ab3-sec { padding: 0 16px; }
  .ab3-contact { margin: 0 16px; padding: 16px; }
  .ab3-hero h1 { font-size: 1.7em !important; }
  .ab3-cta { gap: 7px; }
  .ab3-cta .ab3-btn { flex: 1 1 100%; justify-content: center; }
  .ab3-case-row { grid-template-columns: 1fr !important; gap: 3px; }
  .ab3-case-row span { padding-top: 0; }
  .ab3-skill { grid-template-columns: 1fr !important; gap: 4px; }
  .ab3-skill span { padding-top: 0; }
}

/* ---- 5. Dock çöp kutusu: dönen halka, büyük hedef, gerçek silme --------- */
.dock-it--trash {
  position: relative;
  width: 54px !important;
  min-width: 54px !important;
  overflow: visible !important;
}
.dock-trash-orbit {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, #7dd3fc 52%, transparent);
  box-shadow: 0 0 18px -6px #38bdf8;
  animation: dockTrashOrbit 7.5s linear infinite;
  pointer-events: none;
}
@keyframes dockTrashOrbit { to { transform: rotate(360deg); } }
.dock-trash-orbit::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%;
  background: #7dd3fc;
  box-shadow: 0 0 12px #38bdf8;
}
.dock-it--trash.over .dock-trash-orbit,
.dock-it--trash.trash-eat .dock-trash-orbit {
  border-color: #f87171;
  box-shadow: 0 0 24px -4px #ef4444;
  animation-duration: 1.35s;
}
.dock-it--trash.over { transform: translateY(-5px) scale(1.08) !important; }
.dock-it--trash.trash-eat .trash-lid { transform: translate(-2px,-7px) rotate(-28deg); transform-origin: 8px 10px; }
.dock-it--trash.trash-bite .trash-can { animation: dockTrashBite .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes dockTrashBite { 0% { transform: scale(1.05); } 45% { transform: scale(.92); } 100% { transform: scale(1); } }

/* ---- 6. Creator: ikon şekilleri + duvar kağıdı motion ------------------ */
[data-icon-shape="mixed"] .dock-it[data-app="files"] { border-radius: 26% !important; }
[data-icon-shape="mixed"] .dock-it[data-app="terminal"] { border-radius: 0 !important; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
[data-icon-shape="mixed"] .dock-it[data-app="chat"] { border-radius: 50% !important; }
[data-icon-shape="mixed"] .dock-it[data-app="music"] { border-radius: 4px 52% 4px 52% !important; }
[data-icon-shape="mixed"] .dock-it[data-app="settings"] { border-radius: 44% 56% 58% 42% / 48% 42% 58% 52% !important; }
[data-icon-shape="mixed"] .dock-it[data-app="paint"] { border-radius: 5px !important; }
[data-icon-shape="mixed"] .dock-it[data-app="about"] { border-radius: 50% !important; }
[data-icon-shape="mixed"] .dock-it[data-app="market"] { border-radius: 4px 52% 4px 52% !important; }
[data-icon-shape="mixed"] .dock-it[data-app="files"] .gi,
[data-icon-shape="mixed"] [data-app="files"] .gi { border-radius: 26% !important; }
[data-icon-shape="mixed"] [data-app="terminal"] .gi { border-radius: 0 !important; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
[data-icon-shape="mixed"] [data-app="chat"] .gi { border-radius: 50% !important; }
[data-icon-shape="mixed"] [data-app="music"] .gi { border-radius: 4px 52% 4px 52% !important; }
[data-icon-shape="mixed"] [data-app="settings"] .gi { border-radius: 44% 56% 58% 42% / 48% 42% 58% 52% !important; }
[data-icon-shape="mixed"] [data-app="paint"] .gi { border-radius: 5px !important; }
[data-icon-shape="mixed"] [data-app="about"] .gi { border-radius: 50% !important; }
[data-icon-shape="mixed"] [data-app="market"] .gi { border-radius: 4px 52% 4px 52% !important; }
/* Karışık modda geri kalan uygulamalar da aynı gövdeye sıkışmasın. */
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="mail"] { border-radius: 50% !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="notes"] { border-radius: 4px 52% 4px 52% !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="blog"] { border-radius: 22% !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="calendar"] { border-radius: 5px !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="calc"] { border-radius: 0 !important; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="tasks"] { border-radius: 44% 56% 58% 42% / 48% 42% 58% 52% !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="club"] { border-radius: 50% !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="forum"] { border-radius: 4px 52% 4px 52% !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="chirp"] { border-radius: 22% !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="snake"] { border-radius: 50% !important; }
[data-icon-shape="mixed"] :is(.dock-it, [data-app])[data-app="pastaay"] { border-radius: 0 !important; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
[data-icon-shape="mixed"] [data-app="mail"] .gi,
[data-icon-shape="mixed"] [data-app="notes"] .gi,
[data-icon-shape="mixed"] [data-app="blog"] .gi,
[data-icon-shape="mixed"] [data-app="calendar"] .gi,
[data-icon-shape="mixed"] [data-app="calc"] .gi,
[data-icon-shape="mixed"] [data-app="tasks"] .gi,
[data-icon-shape="mixed"] [data-app="club"] .gi,
[data-icon-shape="mixed"] [data-app="forum"] .gi,
[data-icon-shape="mixed"] [data-app="chirp"] .gi,
[data-icon-shape="mixed"] [data-app="snake"] .gi,
[data-icon-shape="mixed"] [data-app="pastaay"] .gi { border-radius: 22% !important; }
[data-icon-shape="mixed"] [data-app="mail"] .gi,
[data-icon-shape="mixed"] [data-app="club"] .gi,
[data-icon-shape="mixed"] [data-app="snake"] .gi { border-radius: 50% !important; }
[data-icon-shape="mixed"] [data-app="notes"] .gi,
[data-icon-shape="mixed"] [data-app="forum"] .gi { border-radius: 4px 52% 4px 52% !important; }
[data-icon-shape="mixed"] [data-app="calc"] .gi,
[data-icon-shape="mixed"] [data-app="pastaay"] .gi { border-radius: 0 !important; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }

.cr-card { width: min(1080px, calc(100vw - 24px)) !important; max-height: calc(100dvh - 24px) !important; }
.cr-body { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important; }
.cr-preview .shot--wall { min-height: 210px; }
.cr-preview .shot--wall[data-anim="drift"],
#wallpaper[data-anim="drift"] { animation: crWallDrift calc(26s / var(--wall-speed, 1)) ease-in-out infinite alternate; }
.cr-preview .shot--wall[data-anim="pulse"],
#wallpaper[data-anim="pulse"] { animation: crWallPulse calc(9s / var(--wall-speed, 1)) ease-in-out infinite; }
.cr-preview .shot--wall[data-anim="hue"],
#wallpaper[data-anim="hue"] { animation: crWallHue calc(22s / var(--wall-speed, 1)) linear infinite; }
.cr-preview .shot--wall[data-anim="spin"],
#wallpaper[data-anim="spin"] { animation: crWallSpin calc(60s / var(--wall-speed, 1)) linear infinite; }
.cr-preview .shot--wall[data-anim="none"],
#wallpaper[data-anim="none"] { animation: none !important; }
@keyframes crWallDrift {
  from { transform: scale(calc(1.02 + .035 * var(--wall-amp, 1))) translate3d(calc(-1.2% * var(--wall-amp, 1)), 0, 0); }
  to   { transform: scale(calc(1.02 + .035 * var(--wall-amp, 1))) translate3d(calc(1.2% * var(--wall-amp, 1)), calc(-1% * var(--wall-amp, 1)), 0); }
}
@keyframes crWallPulse {
  0%,100% { transform: scale(calc(1 + .012 * var(--wall-amp, 1))); }
  50% { transform: scale(calc(1.03 + .025 * var(--wall-amp, 1))); }
}
@keyframes crWallHue { to { filter: hue-rotate(360deg); } }
@keyframes crWallSpin { to { transform: rotate(360deg) scale(calc(1.05 + .04 * var(--wall-amp, 1))); } }

.cr-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 4px;
  font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}
.cr-divider::before, .cr-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.cr-colors--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cr-seg--3 { grid-template-columns: repeat(3, 1fr) !important; }
.cr-seg--4 { grid-template-columns: repeat(4, 1fr) !important; }
.cr-fxrow { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
.cr-fx {
  height: 30px; padding: 0 9px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--muted); font: inherit; font-size: 9px; font-weight: 800;
}
.cr-fx.on { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.cr-motionrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 2px; }
.cr-motion {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--muted); font: inherit;
}
.cr-motion b { font-size: 14px; line-height: 1; }
.cr-motion span { font-size: 7.5px; font-weight: 800; letter-spacing: .02em; }
.cr-motion.on { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cr-seg-b .cr-shape-dot {
  display: inline-block; width: 11px; height: 11px; margin-right: 3px;
  background: currentColor; vertical-align: -1px; opacity: .8;
  border-radius: 3px;
}
.cr-shape-dot[data-shape="circle"] { border-radius: 50%; }
.cr-shape-dot[data-shape="square"] { border-radius: 1px; }
.cr-shape-dot[data-shape="hex"] { border-radius: 0; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
.cr-shape-dot[data-shape="blob"] { border-radius: 44% 56% 58% 42% / 48% 42% 58% 52%; }
.cr-shape-dot[data-shape="leaf"] { border-radius: 1px 52% 1px 52%; }
.cr-shape-dot[data-shape="mixed"] { border-radius: 3px 50% 3px 50%; }
.cr-seg-b em { font-style: normal; }

@media (max-width: 900px) {
  .cr-card { width: calc(100vw - 12px) !important; max-height: calc(100dvh - 12px) !important; }
  .cr-body { grid-template-columns: 1fr !important; grid-template-rows: 180px minmax(0, 1fr) !important; }
  .cr-preview { padding: 8px !important; }
  .cr-preview .shot--wall { min-height: 0; height: 100%; }
  .cr-controls { overflow: auto; }
  .cr-colors--3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .cr-motionrow { grid-template-columns: repeat(3, 1fr); }
  .cr-tabs { overflow-x: auto; }
  .cr-tab { flex: 0 0 auto; }
  .cr-body { grid-template-rows: 150px minmax(0, 1fr) !important; }
  .cr-foot { flex-wrap: wrap; }
}

/* ---- 7. Admin sunucu paneli -------------------------------------------- */
.adm-head { align-items: center; gap: 10px; }
.adm-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adm-subtitle { font-size: 9px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.adm-head-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.adm-head-acts .btnl { height: 32px; padding: 0 10px; font-size: 9.5px; }
.adm-tabs {
  display: flex; gap: 4px; padding: 4px; margin: 10px 0 14px;
  border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  overflow-x: auto; scrollbar-width: none;
}
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button {
  flex: 0 0 auto; height: 31px; padding: 0 12px; border-radius: 8px;
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 9.5px; font-weight: 800; cursor: pointer;
}
.adm-tabs button.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.adm-tabs button:hover { color: var(--fg); }
#adm-users-block, #adm-code, #adm-live, #set-admin .adm-block { scroll-margin-top: 12px; }
.adm-user { cursor: pointer; }
.adm-user:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.adm-user-sheet {
  position: fixed; inset: 0; z-index: 12050;
  display: grid; place-items: center; padding: 16px;
  background: rgba(4, 6, 12, .6); backdrop-filter: blur(6px);
}
.aus-card {
  width: min(360px, calc(100vw - 24px));
  padding: 18px; border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 98%, transparent), var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  box-shadow: 0 30px 70px -24px #000;
  position: relative;
}
.aus-x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.aus-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.aus-av { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 900; }
.aus-head b { display: block; font-size: 13px; }
.aus-head i { display: block; font-style: normal; font-size: 10px; color: var(--muted); }
.aus-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.aus-dot.on { background: #22c55e; box-shadow: 0 0 0 4px #22c55e22; }
.aus-rows { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.aus-rows > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.aus-rows dt { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.aus-rows dd { margin: 0; font-size: 10px; color: var(--fg); overflow-wrap: anywhere; }
.aus-acts { display: flex; flex-direction: column; gap: 6px; }

/* ---- 8. RTL: yerleşim LTR kalır, metin RTL olur ------------------------- */
html[dir="rtl"] body { direction: ltr; }
html[dir="rtl"] #menubar,
html[dir="rtl"] #dock,
html[dir="rtl"] #desktop,
html[dir="rtl"] #windows,
html[dir="rtl"] #launcher,
html[dir="rtl"] #cmdk,
html[dir="rtl"] #notif-drop,
html[dir="rtl"] #mb-drop,
html[dir="rtl"] #clock-drop,
html[dir="rtl"] #wifi-drop,
html[dir="rtl"] #bt-drop,
html[dir="rtl"] .win,
html[dir="rtl"] .set-shell,
html[dir="rtl"] .appstore,
html[dir="rtl"] .cr-card,
html[dir="rtl"] .pl-gate,
html[dir="rtl"] .tut-card,
html[dir="rtl"] .tut-layer,
html[dir="rtl"] #login { direction: ltr; }
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] dd,
html[dir="rtl"] dt,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .tut-body,
html[dir="rtl"] .tut-title,
html[dir="rtl"] .tut-byline,
html[dir="rtl"] .ab3-pitch,
html[dir="rtl"] .ab3-role,
html[dir="rtl"] .ab3-case-row p,
html[dir="rtl"] .pl-sub,
html[dir="rtl"] .pl-redirect-card h2,
html[dir="rtl"] .snd-hint,
html[dir="rtl"] .set-hint,
html[dir="rtl"] .auth-lbl,
html[dir="rtl"] .chat-msg,
html[dir="rtl"] .forum-thread-body,
html[dir="rtl"] .chirp-caption,
html[dir="rtl"] .mail-row,
html[dir="rtl"] .mix-name,
html[dir="rtl"] .set-row .lbl { direction: rtl; text-align: right; unicode-bidi: plaintext; }
html[dir="rtl"] input:not(#cmd):not(textarea),
html[dir="rtl"] textarea:not(#adm-code-editor) { direction: rtl; text-align: right; }
html[dir="rtl"] #cmd,
html[dir="rtl"] .term,
html[dir="rtl"] .term *,
html[dir="rtl"] #adm-code-editor,
html[dir="rtl"] pre,
html[dir="rtl"] code { direction: ltr !important; text-align: left !important; }
html[dir="rtl"] .adm-code-grid { direction: ltr; }

/* Maskot windows'un arkasında kalsın; açık uygulamanın içine binmesin. */
#mascot { z-index: 4 !important; }
body.pre-login #mascot { display: none !important; }

/* ---- 9. Mobil: tüm app'ler ve popup'lar -------------------------------- */
@media (max-width: 720px) {
  /* MUST match the real #menubar height below (26px). Any difference becomes a
     visible strip of #desktop background under the menu bar. */
  :root { --mb-h: 26px; }
  .win { max-width: calc(100vw - 8px) !important; }
  .win__body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #menubar { height: 26px; gap: 6px; padding: 0 6px; }
  .toast {
    top: calc(var(--mb-h, 34px) + 8px);
    bottom: auto;
    left: 8px;
    right: 8px;
    max-width: none;
  }
  #win-mail .win__body { overflow: auto !important; }
  #win-mail .mail { height: auto !important; min-height: 100%; gap: 9px; }
  #win-mail .mail-head { flex-wrap: wrap; gap: 8px; }
  #win-mail .mail-hire { width: 100%; }
  #win-mail .mail-field--grow { flex: 0 0 auto !important; }
  #win-mail .mail-field--grow textarea { min-height: 110px !important; }
  #menubar .mb-icon { width: 26px; min-width: 26px; }
  #menubar .mb-clock { font-size: 10px; }
  /* Mobile dock: tek ölçü. Önceden 40/42px ve farklı <code>--dock-h</code>
     değerleri çakışıyordu; ikonlar birbirine giriyor, bar da terminalin altında
     kırık bir şerit gibi duruyordu. Tüm ölçüler burada: 40px ikon + 2x6px dolgu
     = 52px yükseklik -> caret için --dock-h da 52px. */
  #dock {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #dock::-webkit-scrollbar { display: none; }
  #dock .dock-it {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    font-size: 18px !important;
    border-radius: 11px !important;
  }
  #dock .dock-it svg { width: 20px !important; height: 20px !important; }
  #dock .dock-it--trash { width: 40px !important; min-width: 40px !important; }
  #dock .dock-it--trash .trash-ic { width: 30px !important; height: 30px !important; }
  #login .login-card { max-height: calc(100dvh - 140px) !important; }
  #login .login-clock { top: 18px; }
  #login .login-clock b { font-size: 42px; }
  #login .login-clock span { font-size: 9px; }
  .pl-gate.pl-window .pl-redirect-card { width: 100% !important; }
  .as-preview-note { flex-wrap: wrap; }
  .as-preview-note .as-preview-login { width: 100%; }
  .cr-tabs { position: sticky; top: 0; z-index: 2; background: var(--bg-2); }
  .adm-tabs button { padding: 0 9px; }
  .adm-head-acts .btnl { flex: 1 1 auto; }
  .adm-user-sheet { padding: 10px; }
  .tut-card { max-height: 74dvh !important; }
}
@media (max-width: 480px) {
  .win { max-width: calc(100vw - 6px) !important; border-radius: 12px !important; }
  .win__bar { height: 30px !important; }
  .win__title { font-size: 10px !important; }
  #dock .dock-it { width: 37px !important; min-width: 37px !important; height: 37px !important; }
  .cr-card { border-radius: 14px !important; }
  .cr-head { padding: 10px 12px !important; }
  .cr-tabs { gap: 2px; }
  .cr-tab { padding: 0 9px; font-size: 9px; }
  .aus-card { padding: 14px; }
}

/* Market önizleme şeridi (tutorial) */
.as-preview-note {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 0; padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #34d399 36%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, #34d399 12%, transparent), color-mix(in srgb, #0ea5e9 9%, transparent));
  color: var(--fg);
  font-size: 9.5px;
}
.as-preview-note > svg { width: 18px; height: 18px; flex: 0 0 18px; color: #34d399; }
.as-preview-note > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.as-preview-note b { font-size: 10px; letter-spacing: .02em; }
.as-preview-note .as-preview-login {
  flex: 0 0 auto; height: 28px; padding: 0 11px; border-radius: 8px; cursor: pointer;
  border: 0; background: #34d399; color: #06281b; font: inherit; font-size: 9px; font-weight: 900;
}

/* ============================================================================
   SON TUR — çöp, dock düzenleme, tam ekran ön-giriş, tek kilit ekranı,
   Chirp/Club/Forum hizası + saydamlık, RTL (yalnızca metin), mobil keşfet
   ========================================================================= */

/* ---- 1. Dock çöpü: dönen halka YOK, sade ve gerçek animasyon ------------- */
.dock-trash-orbit,
.dock-trash-glow { display: none !important; animation: none !important; }
.dock-it--trash {
  width: 54px !important;
  min-width: 54px !important;
  overflow: visible !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.dock-it--trash::after { display: none !important; }
.dock-it--trash .trash-ic {
  width: 34px !important;
  height: 34px !important;
  stroke: #f3f6fb !important;
  stroke-width: 1.6 !important;
  transition: transform .18s cubic-bezier(.16,1,.3,1), stroke .18s;
  filter: drop-shadow(0 6px 9px rgba(0,0,0,.45));
}
.dock-it--trash:hover .trash-ic { transform: translateY(-1px) scale(1.03); }
.dock-it--trash.over {
  transform: translateY(-6px) scale(1.1) !important;
  background: color-mix(in srgb, #ef4444 16%, transparent) !important;
  box-shadow: inset 0 0 0 2px #ef4444, 0 14px 28px -14px #ef4444 !important;
}
.dock-it--trash.over .trash-ic,
.dock-it--trash.trash-eat .trash-ic { stroke: #fecaca !important; }
.dock-it--trash.trash-eat .trash-lid {
  transform: translate(-1px, -8px) rotate(-30deg);
  transform-origin: 8px 10px;
}
.dock-it--trash.trash-bite .trash-can {
  animation: dockTrashBite .52s cubic-bezier(.3,1.4,.5,1);
}
.trash-fall {
  position: absolute; left: 50%; top: 8px; width: 12px; height: 12px;
  margin-left: -6px; border-radius: 3px; opacity: 0;
  background: linear-gradient(150deg, #fff, #cbd5e1);
  border: 1px solid #94a3b8;
  pointer-events: none;
}
.dock-it--trash.trash-eat .trash-fall {
  animation: dockTrashFall .72s cubic-bezier(.5,.05,.7,.4) both;
}
@keyframes dockTrashFall {
  0% { opacity: 0; transform: translate(0,-16px) rotate(0) scale(1); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(0,14px) rotate(46deg) scale(.35); }
}

/* ---- 2. Dock'tan yukarı sürükle = kaldır; çöpe bırak = sil --------------- */
.dock-it.dock-dragging { opacity: .22 !important; filter: grayscale(1); }
.dock-drag-ghost {
  pointer-events: none !important;
  transition: filter .16s ease, opacity .16s ease;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55));
  will-change: transform;
}
.dock-drag-ghost.will-remove {
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55)) drop-shadow(0 0 14px #f87171);
  box-shadow: 0 0 0 2px #f87171, 0 18px 34px -16px #000 !important;
}
.dock-drag-ghost.over-trash {
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55)) drop-shadow(0 0 16px #ef4444);
  box-shadow: 0 0 0 2px #ef4444, 0 18px 34px -16px #000 !important;
}
.dock-drag-ghost.dock-puff,
.dock-drag-ghost.into-trash { animation: dockDragVanish .36s ease-out forwards; }
@keyframes dockDragVanish {
  to { opacity: 0; scale: 1.55; filter: blur(7px); }
}
body.dock-editing { cursor: grabbing; }
body.dock-editing #dock { cursor: grabbing; }

/* ---- 3. Uygulama ön-girişi: kart değil, pencerenin tamamı ---------------- */
#windows .win.win--auth { border-radius: 16px; overflow: hidden; }
#windows .win.win--auth .win__body { padding: 0 !important; overflow: hidden !important; }
.pl-gate.pl-window.pl-gate--fill {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(80% 70% at 14% 4%, color-mix(in srgb, var(--pl-a) 22%, transparent), transparent 62%),
    radial-gradient(70% 70% at 92% 100%, color-mix(in srgb, var(--pl-b) 18%, transparent), transparent 64%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg-2) 97%, #000), color-mix(in srgb, var(--bg) 95%, #000)) !important;
  backdrop-filter: none !important;
  animation: none !important;
}
.pl-gate--fill .pl-full {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--winbar-h, 30px) + 16px) clamp(18px, 4vw, 46px) 22px;
  box-sizing: border-box;
}
.pl-full-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.pl-full-icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pl-a) 94%, #fff), var(--pl-b));
  box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--pl-a) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
.pl-full-icon svg { width: 23px; height: 23px; }
.pl-full-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-full-id b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.pl-full-id i { font-style: normal; font-size: 9.5px; color: var(--muted); }
.pl-required {
  margin-left: auto;
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--pl-a) 90%, #fff);
  background: color-mix(in srgb, var(--pl-a) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--pl-a) 30%, transparent);
}
.pl-full-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
  padding-top: 18px;
  overflow: auto;
}
.pl-full-copy { min-width: 0; max-width: 500px; display: flex; flex-direction: column; }
.pl-full-copy .pl-kicker {
  font-size: 8.5px; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: color-mix(in srgb, var(--pl-a) 85%, #fff);
}
.pl-full-copy h2 {
  margin: 7px 0 8px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 800;
  text-align: left;
}
.pl-full-copy .pl-sub {
  margin: 0 0 14px;
  max-width: 50ch;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.pl-full-copy .pl-bullets { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.pl-full-copy .pl-bullets li {
  display: flex; align-items: center; gap: 8px;
  padding: 0;
  border: 0; background: none;
  font-size: 11.5px; line-height: 1.35; color: var(--muted);
}
.pl-full-copy .pl-bullets li span {
  width: 17px; height: 17px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 9px; font-weight: 900;
  color: #071018;
  background: color-mix(in srgb, var(--pl-a) 80%, #fff);
}
.pl-full-copy .pl-redirect-acts { display: flex; flex-direction: column; gap: 6px; max-width: 330px; }
.pl-full-copy .pl-go {
  height: 46px;
  border: 0; border-radius: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pl-a) 92%, #fff), var(--pl-b));
  color: #08101a; font: inherit; font-size: 12px; font-weight: 900;
  box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--pl-a) 80%, transparent);
  transition: transform .16s, filter .16s;
}
.pl-full-copy .pl-go:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pl-full-copy .pl-go i { font-style: normal; font-size: 17px; line-height: 1; transition: transform .18s; }
.pl-full-copy .pl-go:hover i { transform: translateX(3px); }
.pl-full-copy .pl-cancel {
  height: 32px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 10px; font-weight: 700;
}
.pl-full-copy .pl-cancel:hover { color: var(--fg); }
.pl-full-art { min-width: 0; min-height: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; }

/* Soyut sahne (Market dışındaki uygulamalar): tek ikon başlıkta kalır. */
.pl-rings { position: relative; width: min(360px, 100%); aspect-ratio: 1 / 1; display: grid; place-items: center; }
.pl-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pl-a) 30%, transparent);
}
.pl-ring.r1 { width: 52%; height: 52%; border-style: dashed; animation: plRingSpin 22s linear infinite; }
.pl-ring.r2 { width: 74%; height: 74%; opacity: .55; animation: plRingSpin 30s linear infinite reverse; }
.pl-ring.r3 { width: 96%; height: 96%; opacity: .3; }
@keyframes plRingSpin { to { transform: rotate(360deg); } }
.pl-art-plate {
  width: 34%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 30%;
  font-size: clamp(28px, 5vw, 48px);
  color: #fff;
  background:
    radial-gradient(80% 80% at 30% 20%, color-mix(in srgb, #fff 36%, transparent), transparent 60%),
    linear-gradient(150deg, var(--pl-a), var(--pl-b));
  box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--pl-a) 90%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
  animation: plPlateFloat 4.6s ease-in-out infinite;
}
@keyframes plPlateFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.pl-art-spark {
  position: absolute; font-style: normal; color: color-mix(in srgb, var(--pl-a) 60%, #fff);
  text-shadow: 0 0 16px color-mix(in srgb, var(--pl-a) 80%, transparent);
  animation: plSparkFloat 4s ease-in-out infinite;
}
.pl-art-spark.s1 { left: 13%; top: 21%; font-size: 20px; }
.pl-art-spark.s2 { right: 12%; top: 34%; font-size: 15px; animation-delay: -1.3s; }
.pl-art-spark.s3 { left: 22%; bottom: 16%; font-size: 13px; animation-delay: -2.4s; }
@keyframes plSparkFloat { 0%,100% { transform: translateY(0) scale(.9); opacity: .55; } 50% { transform: translateY(-8px) scale(1.12); opacity: 1; } }

/* Market ön-girişi gerçek bir vitrin gibi: raflar, ürünler, kasa. */
.pl-gate--market .pl-full-body { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.pl-gate--market .pl-full-icon { animation: plBagBounce 3.6s ease-in-out infinite; }
@keyframes plBagBounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.pl-store {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 100%;
  padding: 18px 18px 14px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--pl-a) 18%, transparent), transparent 66%),
    linear-gradient(165deg, color-mix(in srgb, var(--fg) 7%, transparent), color-mix(in srgb, var(--fg) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--pl-a) 24%, var(--line));
  box-shadow: 0 34px 70px -42px #000, inset 0 1px 0 rgba(255,255,255,.08);
}
.pl-store-sign { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pl-store-sign b { font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
.pl-store-sign i { font-style: normal; font-size: 9px; color: var(--muted); }
.pl-store-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.pl-shelf-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0;
  padding: 11px 6px 9px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  animation: plShelfPop .6s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i) * .07s + .12s);
}
.pl-shelf-item svg { width: 25px; height: 25px; color: color-mix(in srgb, var(--pl-a) 72%, #fff); }
.pl-shelf-item i {
  font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes plShelfPop {
  from { opacity: 0; transform: translateY(18px) scale(.72); }
  to { opacity: 1; transform: none; }
}
.pl-store-counter {
  height: 12px;
  margin-top: 13px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pl-a) 24%, transparent), transparent),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--fg) 10%, transparent) 0 3px, transparent 3px 9px);
  border-top: 1px solid color-mix(in srgb, var(--pl-a) 24%, transparent);
}

@media (max-width: 880px) {
  .pl-full-body { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .pl-full-art { display: none !important; }
  .pl-full-copy { max-width: none; }
  .pl-full-copy h2 { font-size: clamp(22px, 5vw, 30px); }
  .pl-full-copy .pl-redirect-acts { max-width: none; }
}
@media (max-width: 720px) {
  .pl-gate--fill .pl-full { padding: calc(var(--winbar-h, 30px) + 10px) 16px 16px; }
  .pl-full-head { gap: 9px; padding-bottom: 10px; }
  .pl-full-icon { width: 38px; height: 38px; border-radius: 12px; }
  .pl-full-icon svg { width: 20px; height: 20px; }
  .pl-full-id b { font-size: 13px; }
  .pl-required { font-size: 7.5px; padding: 3px 7px; }
  .pl-full-body { padding-top: 12px; }
  .pl-full-copy .pl-sub { font-size: 11.5px; }
  .pl-full-copy .pl-bullets li { font-size: 10.5px; }
  .pl-full-copy .pl-go { height: 42px; }
}

/* ---- 4. PC kilidi: TEK ekran. "split" iki panel gösteriyordu -------------- */
#login .login-art,
#login .login-rings,
#login .login-stage::before,
#login .login-stage::after { display: none !important; }
#login .login-stage { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; }
body.pre-login #login .login-stage { display: grid !important; width: auto !important; max-width: 100% !important; }
#login .login-card-wrap { width: auto !important; max-width: 100%; }
body.pre-login #login .login-status,
body.pre-login #login .login-hint,
#login .login-status,
#login .login-hint { display: none !important; }
#login .login-sub { margin-top: 5px !important; }
#login .login-name { margin-top: 6px !important; }
#login .login-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
#login .login-btn span { font-size: .92em; font-weight: 800; letter-spacing: .01em; }
#login .login-btn i { font-style: normal; font-size: 1.15em; line-height: 1; }
#login .login-clock { top: clamp(20px, 8vh, 78px) !important; }
#login .login-clock b { font-size: clamp(46px, 8vw, 88px) !important; }
#login .login-clock span { font-size: clamp(9px, 1.1vw, 12px) !important; }
@media (max-width: 720px) {
  #login .login-clock { top: 14px !important; }
  #login .login-clock b { font-size: 40px !important; }
  #login .login-card { padding: 24px 20px 18px !important; }
}

/* ---- 5. Chirp / Club / Forum: üst bar payı, hizalama, saydamlık ----------- */
#win-chirp .chirp-side { padding-top: calc(var(--winbar-h, 30px) + 8px) !important; }
#win-chirp .chirp-main { padding-top: calc(var(--winbar-h, 30px) + 10px) !important; }
#win-forum .forum { padding-top: var(--winbar-h, 30px); box-sizing: border-box; }
#win-forum .forum-head--new { padding-top: 16px; }

/* Saydamlık ayarı (Ayarlar → Görünüm → Saydamlık) bu üç uygulamayı da
   etkiler: pencerenin kendi --win-bg katmanı arkada kalır, paneller yarı
   saydam olur, duvar kağıdı hafifçe görünür. */
#win-chirp .win__body,
#win-club .win__body,
#win-forum .win__body { background: transparent !important; }
#win-chirp .chirp,
#win-club .club4,
#win-forum .forum { background: transparent !important; }
#win-chirp .chirp-side {
  background: color-mix(in srgb, var(--bg) 52%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}
#win-chirp .chirp-main { background: transparent !important; }
#win-club .club4-head,
#win-club .club4-bar,
#win-forum .forum-head--new,
#win-forum .forum-side,
#win-forum .forum-toolbar {
  background: color-mix(in srgb, var(--bg) 46%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
#win-club .club4-card,
#win-forum .forum-thread,
#win-chirp .chirp-card,
#win-chirp .chirp-compose,
#win-chirp .chirp-quickcompose {
  background: color-mix(in srgb, var(--bg) 58%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* "0 frames today / 5 left today / disappears at midnight" tek hizada. */
#win-chirp .chirp-atmo {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#win-chirp .chirp-atmo > span {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 !important;
  white-space: nowrap;
}
#win-chirp .chirp-atmo-live { margin-left: 0 !important; }
#win-chirp .chirp-empty { padding: 22px 18px 20px; margin-bottom: 8px; }
#win-chirp .chirp-empty > span { text-align: center; max-width: 46ch; }
@media (max-width: 720px) {
  #win-chirp .chirp-main { padding-top: calc(var(--winbar-h, 30px) + 8px) !important; }
  #win-chirp .chirp-atmo > span { font-size: 9px; padding: 4px 7px; }
  #win-forum .forum { padding-top: var(--winbar-h, 30px); }
}

/* ---- 6. Müzik: Keşfet sayfası aşağı kaydırılabilsin ---------------------- */
#win-music .mu-main--disc { overflow-y: auto !important; overflow-x: hidden !important; }
#win-music .mu-main--disc .mu-disc { flex: none; min-height: 0; }
#win-music .mu-main--disc .mu-list { flex: none; overflow: visible !important; }
#win-music .mu-main--disc .mu-list::after { content: ""; display: block; height: 18px; }

/* ---- 7. Mobil: Keşfet bölümleri ---------------------------------------- */
@media (max-width: 900px) {
  #win-market .appstore { display: flex !important; flex-direction: column !important; }
  #win-market .as-rail {
    flex: none; flex-direction: row !important; align-items: center;
    gap: 8px; padding: 8px 10px !important;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0 !important; border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(16px);
    position: sticky; top: 0; z-index: 6;
    scrollbar-width: none;
  }
  #win-market .as-rail::-webkit-scrollbar { display: none; }
  #win-market .as-brand { display: none !important; }
  #win-market .as-nav { flex-direction: row !important; gap: 5px; overflow: visible; }
  #win-market .as-navitem { flex: none; white-space: nowrap; }
  #win-market .as-rail-foot { display: none !important; }
  #win-market .as-main { min-height: 0; }
  #win-market .as-body { padding: 12px !important; }
  #win-market .as-welcome {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }
  #win-market .asw-copy h1 { font-size: clamp(24px, 6vw, 32px) !important; }
  #win-market .asw-copy p { font-size: 12px !important; }
  #win-market .asw-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  #win-market .asw-actions .asw-btn { width: 100%; justify-content: center; font-size: 10px; }
  #win-market .asw-stats { display: flex !important; flex-wrap: wrap; gap: 7px !important; }
  #win-market .asw-stat { flex: 1 1 30%; min-width: 92px; }
  #win-market .as-hero { grid-template-columns: 1fr !important; }
  #win-market .as-grid,
  #win-market .as-row,
  #win-market .as-picks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  #win-market .as-cats { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  #win-market .as-cats::-webkit-scrollbar { display: none; }
  #win-market .as-cat { flex: none; white-space: nowrap; }
}
@media (max-width: 720px) {
  #win-market .asw-actions { grid-template-columns: 1fr 1fr; }
  #win-market .as-grid,
  #win-market .as-row { grid-template-columns: 1fr !important; }
  #win-market .as-card-art { height: 112px; }
  #win-market .as-detail { padding-bottom: 20px; }
}
@media (max-width: 480px) {
  #dock .dock-it { flex-basis: 37px !important; }
  #dock .dock-it--trash {
    width: 37px !important;
    min-width: 37px !important;
    height: 37px !important;
    min-height: 37px !important;
    flex-basis: 37px !important;
  }
}

/* ---------- 11. Tutorial steps aside for its own demo panels -------------
   The tour must stay above the desktop, but the command palette and the
   menubar popovers it demonstrates live below it. Opening one used to leave
   the panel dimmed underneath the tour card: the "try it" tip stayed on top
   and the panel could not be reached or closed. While one of those panels is
   open the tour layer hides completely; it returns the moment the panel
   closes. */
body:has(#cmdk:not([hidden])) .tut-layer,
body:has(#mb-drop:not([hidden])) .tut-layer,
body:has(#clock-drop:not([hidden])) .tut-layer,
body:has(#wifi-drop:not([hidden])) .tut-layer,
body:has(#bt-drop:not([hidden])) .tut-layer,
body:has(#notif-drop:not([hidden])) .tut-layer,
body:has(#appmenu-pop:not([hidden])) .tut-layer,
body:has(#sound-drop:not([hidden])) .tut-layer,
body:has(#focus-pop:not([hidden])) .tut-layer {
  display: none !important;
}

/* ---------- 12. Desktop-feel pass ---------------------------------------
   Small, physical details borrowed from a real desktop:
   - dock icons magnify under the pointer and bounce while an app launches,
   - the menubar clock reads like an OS clock (day, date, time),
   - hints are our own tooltips, never the browser's native title box.
   Everything is additive; existing hover/lift/theme effects still apply. */

/* The `scale` property (not transform) is used so it composes with the
   existing theme hover transforms instead of fighting them. Bottom dock grows
   upward; side docks grow away from their edge. */
#dock .dock-it {
  scale: 1;
  transform-origin: center bottom;
  transition:
    scale .16s cubic-bezier(.2, .9, .3, 1),
    transform .13s,
    background .16s,
    box-shadow .16s;
  will-change: scale;
}
body[data-dock-pos="left"] #dock .dock-it { transform-origin: left center; }
body[data-dock-pos="right"] #dock .dock-it { transform-origin: right center; }
#dock .dock-it:hover { z-index: 30; }
/* While magnifying, the dock stops clipping its children so icons can grow
   above the bar (JS only opts in when all icons already fit without scroll). */
#dock.dock-magnify { overflow: visible !important; }

@keyframes dockLaunchBounceY {
  0%   { translate: 0 0; }
  18%  { translate: 0 -22px; }
  37%  { translate: 0 0; }
  56%  { translate: 0 -12px; }
  74%  { translate: 0 0; }
  87%  { translate: 0 -4px; }
  100% { translate: 0 0; }
}
@keyframes dockLaunchBounceLeft {
  0%   { translate: 0 0; }
  18%  { translate: -22px 0; }
  37%  { translate: 0 0; }
  56%  { translate: -12px 0; }
  74%  { translate: 0 0; }
  87%  { translate: -4px 0; }
  100% { translate: 0 0; }
}
@keyframes dockLaunchBounceRight {
  0%   { translate: 0 0; }
  18%  { translate: 22px 0; }
  37%  { translate: 0 0; }
  56%  { translate: 12px 0; }
  74%  { translate: 0 0; }
  87%  { translate: 4px 0; }
  100% { translate: 0 0; }
}
#dock .dock-it.dock-launching { animation: dockLaunchBounceY .72s cubic-bezier(.28, .84, .42, 1); }
body[data-dock-pos="left"] #dock .dock-it.dock-launching { animation-name: dockLaunchBounceLeft; }
body[data-dock-pos="right"] #dock .dock-it.dock-launching { animation-name: dockLaunchBounceRight; }

/* A compact, system-owned tooltip. It never takes pointer events and uses the
   same glass language as the bars, so it reads as part of the OS. */
.os-tip {
  position: fixed;
  z-index: 13000;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  color: var(--fg, #f2f5fa);
  background: color-mix(in srgb, var(--bg-2, #17151f) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg, #fff) 12%, transparent);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px) scale(.97);
  transition: opacity .12s ease, transform .12s ease;
  white-space: normal;
}
.os-tip.show { opacity: 1; transform: none; }

/* Menubar clock: date + time, like a real system bar. */
.mb-clock { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.mb-clock .mb-clock-date { opacity: .72; font-variant-numeric: tabular-nums; }
.mb-clock .mb-clock-time { font-variant-numeric: tabular-nums; }

/* ============================================================================
   ROUND 15 — mobile sheets, login footer, sound anchoring, About summary,
   Market developer card, boot accent and a calmer menubar.
   ============================================================================ */

/* ---------- 1. LOGIN FOOTER: exactly one divider, centred Enter ---------- */
/* `body.pre-login #login .login-lang` has higher specificity than the older
   reset, so it kept drawing a second line under the hint. Match that
   specificity and remove it for good. */
body.pre-login #login .login-lang,
#login .login-lang {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#login .login-foot {
  border-top: 1px solid color-mix(in srgb, var(--fg, #fff) 9%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}
#login .login-keyhint {
  align-items: center !important;
  height: 22px;
  line-height: 1 !important;
}
#login .login-keyhint span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  line-height: 1 !important;
}
#login .login-keyhint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  line-height: 1 !important;
}

/* ---------- 2. MOBILE: real full-width sheets, calmer bars --------------- */
@media (max-width: 720px) {
  /* The old max-width (100vw - 6px) left a 6px strip on the right and made
     every sheet look left-shifted. Fill the width exactly. */
  #windows .win.mobile,
  #windows .app.win.mobile,
  .win.mobile {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  /* iOS-style frosted sheet instead of a flat opaque rectangle. */
  .win.mobile,
  .app.win.mobile {
    background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
    backdrop-filter: blur(30px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
  }
  #menubar {
    gap: 4px !important;
    padding: 0 9px !important;
  }
  /* Workspaces are a desktop idea; their dots are absolutely centred and were
     overlapping the right-hand icons on a phone. Remove the clutter. */
  #menubar .ws-dots { display: none !important; }
  #menubar #mb-focus,
  #menubar #mb-shot { display: none !important; }
  #menubar .mb-logo .mb-word { display: none !important; }
  #menubar .mb-logo { padding: 0 3px !important; }
  #menubar .mb-app {
    display: inline-block !important;
    max-width: 88px !important;
    font-size: 10.5px !important;
  }
  #menubar .mb-icon {
    width: 30px !important;
    min-width: 30px !important;
    height: 28px !important;
    flex-basis: 30px;
  }
  #menubar .mb-spacer { min-width: 0; }
  #menubar .mb-clock { margin-left: auto; }

  /* Mobile context menu: a bottom sheet, like a phone action sheet. */
  #ctx {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(var(--dock-h, 64px) + 8px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: 62dvh;
    overflow-y: auto;
    border-radius: 16px !important;
    padding: 8px !important;
  }
  #ctx .ctx-item {
    padding: 12px 12px !important;
    font-size: .86em !important;
  }

  /* Stop iOS's "save image / copy" callout from hijacking a long-press on the
     desktop. App text stays selectable. */
  #desktop, #wallpaper, #icons, #dock, #menubar, .win__bar {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* The tour card belongs above the dock, never on top of it. */
  .tut-card {
    bottom: calc(var(--dock-h, 64px) + 8px) !important;
    max-height: 52dvh !important;
  }

  /* PDF viewer: in single-file mode the library rail is pointless on a phone.
     Give the page the whole sheet. */
  .pdf-app--new.pdf-app--single {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .pdf-app--new.pdf-app--single .pdf-side { display: none !important; }
  .pdf-app--new .pdf-stage { padding: 8px !important; }
  .pdf-app--new .pdf-sheet { border-radius: 10px; }
  .pdf-app--new #pdf-frame { min-height: 52dvh; }

  /* Chirp: the rail stays a left panel and slides over the wall. It is NOT
     flattened into a horizontal strip at the top (that read as clutter). */
  #win-chirp .chirp,
  .chirp {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    position: relative;
  }
  .chirp.side-closed .chirp-menu,
  .chirp-reopen { display: grid !important; }
  .chirp-main { padding: 10px 10px calc(34px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- 3. SOUND PANEL: opens under its icon, not the far right ------ */
#sound-drop {
  right: auto; /* JS places left/top from the actual menubar icon */
}

/* ---------- 4. MENUBAR: no hover jitter -------------------------------- */
/* The bar is made of flex spacers; a hover transform on a child can make the
   whole row shimmer at fractional widths. Promote to its own layer and pin
   the hover state to colour only. */
#menubar {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#menubar .mb-icon:hover,
#menubar .mb-logo:hover,
#menubar .mb-app:hover,
#menubar .mb-clock:hover {
  transform: none !important;
}
#menubar .mb-icon,
#menubar .mb-logo,
#menubar .mb-app,
#menubar .mb-clock {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

/* ---------- 5. BOOT: the saved theme decides the colour from frame one --- */
.boot-orb {
  background: conic-gradient(
    from 0deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 10%, transparent) 40%,
    var(--accent)
  );
}
.boot-logo {
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 35%, transparent);
}
@keyframes logoGlow {
  from { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); }
  to   { text-shadow: 0 0 34px color-mix(in srgb, var(--accent) 60%, transparent); }
}

/* ---------- 6. ABOUT: summary mode + the curtain transition ------------- */
.ab3 { position: relative; }
.ab3--summary .ab3-term { display: none !important; }
.ab3--summary .ab3-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 24px 26px 20px !important;
  border-bottom: 0 !important;
}
.ab3--summary .ab3-hero-main { max-width: 780px; }
.ab3--summary .ab3-pitch { margin-bottom: 14px; }
.ab3-summary {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 8px 26px 30px;
}
.ab3--summary .ab3-summary {
  display: flex;
  animation: ab3SumIn .7s cubic-bezier(.16, 1, .3, 1) both;
}
.ab3--summary .ab3-sec,
.ab3--summary .ab3-two,
.ab3--summary .ab3-contact { display: none !important; }
@keyframes ab3SumIn {
  from { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.ab3-sum-card {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 46%),
    color-mix(in srgb, var(--bg-2) 82%, transparent);
  box-shadow: 0 20px 46px -24px #000b, inset 0 1px 0 rgba(255,255,255,.06);
}
.ab3-sum-card > * { animation: ab3SumRow .55s cubic-bezier(.16,1,.3,1) both; }
.ab3-sum-card > *:nth-child(2) { animation-delay: .06s; }
.ab3-sum-card > *:nth-child(3) { animation-delay: .12s; }
.ab3-sum-card > *:nth-child(4) { animation-delay: .18s; }
@keyframes ab3SumRow {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.ab3-sum-kicker {
  display: block;
  font-size: .62em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.ab3-sum-title {
  margin: 0 0 6px;
  font-size: 1.24em;
  letter-spacing: -.02em;
}
.ab3-sum-copy {
  margin: 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: .86em;
  line-height: 1.6;
}
.ab3-sum-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.ab3-sum-metric {
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.ab3-sum-metric b {
  display: block;
  font-size: 1.35em;
  letter-spacing: -.03em;
  color: var(--fg);
}
.ab3-sum-metric span {
  display: block;
  margin-top: 2px;
  font-size: .68em;
  color: var(--muted);
}
.ab3-sum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.ab3-sum-chips i {
  font-style: normal;
  font-size: .68em;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--muted);
}
.ab3-sum-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ab3-wipe {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 72%, transparent), transparent 58%),
    conic-gradient(from 210deg, transparent 0 20%, color-mix(in srgb, #fff 32%, transparent) 28%, transparent 38% 100%);
  transform: scale(.2) rotate(-18deg);
  filter: blur(2px);
}
.ab3-wipe.run { animation: ab3Wipe 1.05s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ab3Wipe {
  0%   { opacity: 0; transform: scale(.18) rotate(-18deg); border-radius: 50%; }
  22%  { opacity: .95; }
  50%  { opacity: 1; transform: scale(1.06) rotate(0deg); border-radius: 18px; }
  100% { opacity: 0; transform: scale(1.02) rotate(0deg); border-radius: 18px; }
}

/* ---------- 7. MARKET: developer card + single description ------------- */
.as-d-dev {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.as-d-dev:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.as-d-dev img,
.as-d-dev .as-av {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--chip);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent);
}
.as-d-dev > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.as-d-dev b { font-size: .82em; }
.as-d-dev i { font-style: normal; font-size: .66em; color: var(--muted); }
.as-d-dev em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: .7em;
  font-weight: 800;
  color: var(--accent);
}
@media (max-width: 900px) {
  .mb-clock .mb-clock-date { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #dock .dock-it { transition: none !important; }
  #dock .dock-it.dock-launching { animation: none !important; }
  .os-tip { transition: none !important; }
}

/* ============================================================================
   MOBİL KÜÇÜLTME + METİN SEÇİMİ KAPALI + RADIUS DÜZELTMESİ
   Bu blok dosyanın EN SONUNDA durur: önceki tüm aynı-seçici kuralları ezer.
   Amaç: telefonda her şey fazla büyüktü (masaüstü simgeleri, pencereler, PDF
   sayfası, login kartı, klasör popup'ı). Burada tek yerden ölçek küçültülür,
   masaüstü görünümüne (≥721px) dokunulmaz.
   ============================================================================ */

/* ---------- 1. Metin seçimi: mobil + PC'de kapalı -------------------------
   Yazı yazılan alanlar (terminal, sohbet, formlar, e-posta listesi) seçilebilir
   kalır; onun dışındaki bütün arayüz metni seçilmez. */
html body,
html body *:not(input):not(textarea):not(select):not(option):not([contenteditable]):not([contenteditable] *) {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}
/* Kullanıcının gerçekten okuyup kopyalamak isteyeceği metinler: serbest bırak. */
.prose,
.prose *,
.pager__scroll,
.pager__scroll *,
.msg,
.msg *,
.email-body,
.email-body *,
.forum-op-body p,
.forum-reply-body p {
  -webkit-user-select: text !important;
  user-select: text !important;
}
input,
textarea,
select,
[contenteditable],
[contenteditable] * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default;
}
/* Sürükle-bırak ikon/görsellerde iOS'un "görseli kaydet" balonu çıkmasın. */
img,
svg {
  -webkit-user-drag: none;
}

@media (max-width: 720px) {

  /* ---------- 2. Masaüstü: 3 kolon, daha küçük simge ve etiket ---------- */
  #icons {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)) !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    gap: 2px !important;
    padding: 8px 6px calc(78px + env(safe-area-inset-bottom)) 6px !important;
  }
  #icons .desk-ic,
  #icons .desk-ic.folder {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 80px;
    justify-self: center;
    gap: 3px !important;
    padding: 5px 2px !important;
    border-radius: 10px !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }
  #icons .desk-ic .gi {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 19px !important;
  }
  #icons .desk-ic .gl {
    max-width: 100% !important;
    font-size: 9.5px !important;
    letter-spacing: -0.01em;
  }
  #icons .desk-ic .gi-folder-grid {
    width: 44px !important;
    height: 44px !important;
    padding: 4px !important;
    gap: 2px !important;
    border-radius: 12px !important;
  }

  /* ---------- 3. Pencere ve uygulama başlıkları: daha ince, daha küçük --- */
  .win__bar,
  .app .tbar {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
  .win__bar .win__title,
  .win__bar b,
  .win__bar span {
    font-size: 11px !important;
  }
  .win__bar button,
  .win__ctl button {
    width: 26px !important;
    height: 26px !important;
  }
  /* Pencerelerin kendi iç boşlukları ve taban fontu biraz küçülsün; içeride
     zaten em tabanlı ölçek var, bu bir kademe aşağı çeker. */
  .win__body {
    font-size: 12.5px;
  }

  /* ---------- 4. Menü çubuğu + dock: daha kompakt --------------------- */
  #menubar {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
  }
  #menubar .mb-app { max-width: 76px !important; font-size: 10px !important; }
  #menubar .mb-icon { width: 26px !important; min-width: 26px !important; height: 24px !important; }
  #menubar .mb-icon svg { width: 15px !important; height: 15px !important; }
  #menubar .mb-clock { font-size: 10.5px !important; }
  #dock { --dock-h: calc(52px + env(safe-area-inset-bottom, 0px)); }
  #dock .dock-it {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
  }
  #dock .dock-it svg { width: 20px !important; height: 20px !important; }

  /* ---------- 5. Login kartı: telefona sığan, kibar ölçek ------------ */
  body.pre-login #login .login-clock b,
  #login .login-clock b { font-size: clamp(34px, 11vw, 52px) !important; }
  body.pre-login #login .login-clock span,
  #login .login-clock span { font-size: 9px !important; }
  /* Kartın genişliğini kart kendisi belirler; sahneye sabit genişlik
     dayatmak (eski 352px kuralı) kartı telefonlarda sağa/sola kaydırıyordu. */
  body.pre-login #login .login-stage { width: auto !important; max-width: 100% !important; }
  body.pre-login #login .login-card-wrap > .login-card,
  body.pre-login #login .login-card,
  #login .login-card {
    padding: 20px 18px 14px !important;
    border-radius: 22px !important;
    max-height: calc(100dvh - 108px) !important;
  }
  body.pre-login #login .login-logo,
  #login .login-logo { font-size: 21px !important; }
  body.pre-login #login .login-orb,
  #login .login-orb { width: 62px !important; height: 62px !important; margin: 14px auto 8px !important; }
  body.pre-login #login .login-avatar,
  #login .login-avatar { width: 58px !important; height: 58px !important; border-radius: 18px !important; font-size: 20px !important; }
  #login .login-name { font-size: 16px !important; }
  #login .login-btn,
  body.pre-login #login .login-btn { height: 44px !important; min-height: 44px !important; border-radius: 14px !important; }
  #login .login-hint { font-size: 9.5px !important; margin-top: 9px !important; }
  #login .login-pass-input { height: 40px !important; font-size: 12px !important; }

  /* ---------- 6. PDF / CV okuyucu: sayfa genişliğe sığsın ------------- */
  .pdf-app--new .pdf-stage { padding: 6px !important; }
  .pdf-app--new .pdf-sheet {
    border-radius: 12px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Iframe'in boyunu applyZoom() yazar (genişlik/yükseklik = 10000/z %), böylece
     ölçeklenmiş hâli sheet'i tam doldurur. Burada width/height !important
     verilirse o hesap ezilir ve küçültünce sayfanın altında boş bir bant kalır. */
  .pdf-app--new #pdf-frame {
    min-height: 0 !important;
  }
  .pdf-app--new .pdf-bar {
    padding: 7px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap;
  }
  .pdf-app--new .pdf-name b { font-size: 12px !important; }
  .pdf-app--new .pdf-name i { font-size: 9.5px !important; }
  .pdf-app--new .pdf-actions { gap: 5px !important; }
  .pdf-app--new .pdf-dl { height: 34px !important; padding: 0 12px !important; font-size: 10.5px !important; border-radius: 10px !important; }
  .pdf-app--new .pdf-zbtn { width: 30px !important; height: 30px !important; font-size: 14px !important; }
  .pdf-app--new .pdf-zoom span { min-width: 34px !important; font-size: 10px !important; }
  .pdf-app--new .pdf-empty { inset: 8px !important; padding: 16px !important; }
  .pdf-app--new .pdf-empty p { font-size: 11px !important; }

  /* ---------- 7. Masaüstü klasör popup'ı: alt sayfa (bottom sheet) ----- */
  .folder-overlay {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    z-index: 640 !important;
    padding: 0 8px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .folder-sheet {
    width: 100% !important;
    max-width: 520px !important;
    max-height: 62dvh !important;
    margin: 0 auto !important;
    padding: 12px 12px 14px !important;
    border-radius: 20px !important;
    overflow-y: auto;
    animation: folderSheetIn 0.24s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  .folder-sheet::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin: -2px auto 10px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--fg) 22%, transparent);
  }
  .folder-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    cursor: default;
  }
  .folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important;
    gap: 8px 4px !important;
  }
  .folder-app {
    font-size: 10px !important;
    gap: 5px !important;
    padding: 6px 2px !important;
    border-radius: 12px !important;
  }
  .folder-app .gi {
    width: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    font-size: 20px !important;
  }
  .folder-app span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @keyframes folderSheetIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- 8. Forum: mobilde rahat, tutarlı köşeler ----------------- */
  #win-forum .forum-head--new {
    padding: 12px 12px 10px !important;
    gap: 8px !important;
    border-radius: 0 0 18px 18px !important;
  }
  #win-forum .forum-hero-tx h1 { font-size: 19px !important; }
  #win-forum .forum-hero-tx p { font-size: 11px !important; line-height: 1.45; }
  #win-forum .forum-hero-stats span,
  #win-forum .forum-hero-stats > * {
    padding: 3px 7px !important;
    font-size: 8.5px !important;
  }
  #win-forum .forum-hero-stats b { font-size: 11px !important; }
  #win-forum .forum-newbtn { height: 34px !important; border-radius: 10px !important; }
  #win-forum .forum-body { gap: 8px !important; }
  #win-forum .forum-side {
    gap: 4px !important;
    padding: 12px 12px 18px !important;
    border-bottom: 0 !important;
  }
  #win-forum .forum-cat {
    padding: 8px 11px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    text-align: left;
    background: color-mix(in srgb, var(--fg) 4%, transparent);
  }
  #win-forum .forum-toolbar { padding: 8px 0 6px !important; gap: 6px !important; }
  #win-forum .forum-search { height: 34px !important; border-radius: 10px !important; }
  #win-forum .forum-search input { height: 34px !important; font-size: 11.5px !important; }
  #win-forum .forum-sort { height: 34px !important; border-radius: 10px !important; font-size: 10.5px !important; }
  #win-forum .forum-list { gap: 7px !important; }
  #win-forum .forum-thread {
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 14px !important;
  }
  #win-forum .forum-thread-tx > b { font-size: 12.5px !important; line-height: 1.35 !important; }
  #win-forum .forum-thread-body { font-size: 10.5px !important; }
  #win-forum .forum-thread-tx > em { flex-wrap: wrap; font-size: 9px !important; gap: 4px 6px !important; }
  #win-forum .forum-del {
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
  }
  #win-forum .forum-detail-wrap { padding: 10px 0 20px !important; }
  #win-forum .forum-detail-head {
    gap: 6px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap;
  }
  #win-forum .forum-detail-head .btnl { height: 30px !important; border-radius: 9px !important; font-size: 10px !important; }
  #win-forum .forum-backpill { height: 30px !important; border-radius: 9px !important; font-size: 10.5px !important; }
  #win-forum .forum-op-card,
  #win-forum .forum-reply {
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 15px !important;
  }
  #win-forum .forum-op-card { flex-direction: column; }
  #win-forum .forum-op-card h2 { font-size: 17px !important; line-height: 1.2; }
  #win-forum .forum-op-body > p { font-size: 12px !important; }
  #win-forum .forum-reply { align-items: flex-start; }
  #win-forum .forum-reply-body p { font-size: 11.5px !important; }
  #win-forum .forum-reply-form {
    align-items: stretch !important;
    flex-direction: column;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }
  #win-forum .forum-reply-form textarea { min-height: 64px !important; font-size: 12px !important; }
  #win-forum .forum-reply-send { height: 38px !important; width: 100%; border-radius: 10px !important; }
}

/* ---------- 9. Forum: her ekranda tutarlı, yuvarlak köşeler ------------
   Aynı eleman için 10 farklı blokta radius yazılmıştı (999px pill'lerin içine
   kare avatar, 13px kart içinde 18px reply, negatif margin yüzünden kırpılan
   üst köşe). Hepsini tek ölçek üzerinde sabitliyoruz. */
#win-forum .forum-thread,
#win-forum .forum-op-card,
#win-forum .forum-reply,
#win-forum .forum-reply-form,
#win-forum .forum-empty {
  border-radius: 16px !important;
  overflow: hidden;
}
#win-forum .forum-list { padding: 1px 0 2px; }
#win-forum .forum-thread > .forum-av,
#win-forum .forum-reply > .forum-av {
  border-radius: 13px !important;
  overflow: hidden;
}
#win-forum .forum-av--big { border-radius: 16px !important; }
#win-forum .forum-chip,
#win-forum .forum-solved,
#win-forum .forum-live,
#win-forum .forum-hero-stats > * {
  border-radius: 999px !important;
  line-height: 1.35 !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
#win-forum .forum-chip,
#win-forum .forum-solved { min-height: 18px; }
#win-forum .forum-reply-form textarea { border-radius: 10px !important; }
#win-forum .forum-reply-send { border-radius: 11px !important; }
#win-forum .forum-backpill,
#win-forum .forum-sort,
#win-forum .forum-search { border-radius: 11px !important; }
#win-forum .forum-search input { border-radius: 0 !important; }
#win-forum .forum-del { border-radius: 999px !important; }
/* Kart içindeki metnin kartın yuvarlak köşesini taşmaması için iç boşluk. */
#win-forum .forum-thread-tx,
#win-forum .forum-op-body,
#win-forum .forum-reply-body { min-width: 0; }
/* ==========================================================================
   YENİ TUR — TAYVAN APPS (tw-city + tw-events) + ADMIN TAIWAN/NOTIFY CARDS
   --------------------------------------------------------------------------
   * every colour comes from the active theme's tokens with a hard fallback,
     so all themes keep working;
   * one breakpoint (760px) reflows every panel to a single column, a second
     (520px) tightens type and hides non-essential chrome on phones;
   * every selector is prefixed tw-/twe-/adm-tw so no other app is touched.
   ========================================================================== */

/* ---------- shared: window shell ---------- */
.win--tw .win__body {
  padding: 0 !important;
  overflow: auto;
  background:
    radial-gradient(1200px 420px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--bg-2, #17150f);
}
.twc, .twe { font-family: "Space Grotesk", var(--font-ui, system-ui), sans-serif; color: var(--fg, #f5efe3); }

/* ---------- shared: city picker sheet ---------- */
.twp-sheet {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: twpIn 0.18s ease both;
}
@keyframes twpIn { from { opacity: 0; } to { opacity: 1; } }
.twp {
  width: min(560px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-2, #17150f);
  border: 1px solid var(--line, #2a2822);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px #000c;
}
.twp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #2a2822);
}
.twp-head b { font-size: 15px; }
.twp-head span { font-size: 11.5px; color: var(--faint, #8d8678); }
.twp-x {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 1px solid var(--line, #2a2822);
  background: transparent;
  color: var(--fg, #f5efe3);
  cursor: pointer;
  font-size: 13px;
}
.twp-x:hover { background: color-mix(in srgb, var(--fg, #fff) 8%, transparent); }
.twp-body { overflow: auto; padding: 10px 12px 16px; }
.twp-region {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #c6ff6b);
  font-weight: 800;
  padding: 12px 6px 8px;
}
.twp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.twp-city {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  text-align: left;
  border-radius: 11px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, var(--fg, #fff) 3%, transparent);
  color: var(--fg, #f5efe3);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.twp-city:hover { border-color: var(--accent, #c6ff6b); transform: translateY(-1px); }
.twp-city.on {
  border-color: var(--accent, #c6ff6b);
  background: color-mix(in srgb, var(--accent, #c6ff6b) 14%, transparent);
}
.twp-zh { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
.twp-en { font-size: 11px; color: var(--faint, #8d8678); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   TAYVAN (city app)
   ========================================================================== */
.twc { padding: 0 0 22px; }

.twc-hero {
  position: relative;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line, #2a2822);
  overflow: hidden;
  --tone: var(--accent, #c6ff6b);
}
.twc-hero--warn { --tone: #ffb347; }
.twc-hero--bad { --tone: #ff5f57; }
.twc-hero-bg {
  position: absolute;
  inset: -40% -10% auto;
  height: 260px;
  background:
    radial-gradient(60% 100% at 18% 0%, color-mix(in srgb, var(--tone) 30%, transparent), transparent 70%),
    radial-gradient(50% 90% at 88% 10%, color-mix(in srgb, var(--accent-2, #7dffd8) 22%, transparent), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}
.twc-hero-top, .twc-hero-main, .twc-hero-foot { position: relative; }
.twc-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.twc-citybtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 9px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--fg, #fff) 16%, transparent);
  background: color-mix(in srgb, #000 26%, transparent);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.twc-citybtn:hover { border-color: var(--tone); background: color-mix(in srgb, #000 38%, transparent); }
.twc-cityzh { font-size: 18px; font-weight: 800; letter-spacing: 1px; }
.twc-citytxt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.twc-citytxt b { font-size: 14px; }
.twc-citytxt i { font-size: 10.5px; font-style: normal; color: var(--faint, #b9b2a3); }
.twc-caret { font-size: 13px; opacity: 0.7; }
.twc-risk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  color: var(--tone);
}
.twc-risk i {
  width: 7px; height: 7px; border-radius: 99px; background: var(--tone);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 60%, transparent);
  animation: twPulse 2.2s ease-out infinite;
}
@keyframes twPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone, #ff5f57) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.twc-alerts {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--fg, #fff) 18%, transparent);
  background: color-mix(in srgb, var(--fg, #fff) 6%, transparent);
  color: var(--fg, #f5efe3);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.twc-alerts:hover { background: color-mix(in srgb, var(--accent, #c6ff6b) 18%, transparent); border-color: var(--accent, #c6ff6b); }

.twc-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.twc-now { display: flex; align-items: center; gap: 12px; }
.twc-now-ic { font-size: 46px; line-height: 1; filter: drop-shadow(0 6px 14px #0006); }
.twc-now-temp { font-size: clamp(44px, 7vw, 62px); font-weight: 800; letter-spacing: -2.5px; line-height: 0.95; }
.twc-now-side { display: flex; flex-direction: column; gap: 3px; max-width: 240px; }
.twc-now-side b { font-size: 15px; }
.twc-now-side i { font-size: 11.5px; font-style: normal; color: var(--faint, #b9b2a3); line-height: 1.35; }
.twc-now-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.twc-now-meta span {
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg, #fff) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg, #fff) 9%, transparent);
  white-space: nowrap;
}
.twc-hero-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font-size: 10.5px;
  color: var(--faint, #8d8678);
  letter-spacing: 0.3px;
}

/* generic block */
.twc-block {
  margin: 14px 16px 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, var(--bg-3, #211f19) 62%, transparent);
}
.twc-block-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.twc-block-h b { font-size: 13.5px; letter-spacing: 0.2px; }
.twc-block-h > span { font-size: 10.5px; color: var(--faint, #8d8678); }
.twc-link {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 2px 4px;
  color: var(--accent, #c6ff6b);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
}
.twc-link:hover { text-decoration: underline; }
.twc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.twc-empty { font-size: 12px; color: var(--faint, #8d8678); padding: 8px 2px; }
.twc-empty--big { padding: 40px 18px; text-align: center; font-size: 14px; }

/* 24h strip */
.twc-hours {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(52px, 1fr);
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.twc-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: 11px;
  border: 1px solid transparent;
}
.twc-hour.now {
  border-color: color-mix(in srgb, var(--accent, #c6ff6b) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #c6ff6b) 10%, transparent);
}
.twc-hour-t { font-size: 10.5px; color: var(--faint, #8d8678); }
.twc-hour-ic { font-size: 17px; line-height: 1; }
.twc-hour-deg { font-size: 12.5px; font-weight: 700; }
.twc-hour-rain {
  width: 4px;
  height: 34px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fg, #fff) 8%, transparent);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.twc-hour-rain i { display: block; width: 100%; border-radius: 99px; background: linear-gradient(180deg, #7db4ff, #4f8cff); }
.twc-hour-p { font-size: 9.5px; color: #8ab4ff; }

/* 7-day */
.twc-days { display: flex; flex-direction: column; gap: 2px; }
.twc-day {
  display: grid;
  grid-template-columns: 1fr 26px auto 38px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 10px;
}
.twc-day.today { background: color-mix(in srgb, var(--accent, #c6ff6b) 9%, transparent); }
.twc-day-l { font-size: 12.5px; font-weight: 600; }
.twc-day-ic { font-size: 16px; text-align: center; }
.twc-day-t { font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }
.twc-day-t i { font-style: normal; font-weight: 500; color: var(--faint, #8d8678); margin-left: 5px; }
.twc-day-p { font-size: 10.5px; color: #8ab4ff; text-align: right; }

/* air quality */
.twc-aqi { display: flex; gap: 14px; align-items: center; }
.twc-aqi-num {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--c, #4ade80) 55%, transparent);
  background: color-mix(in srgb, var(--c, #4ade80) 16%, transparent);
}
.twc-aqi-num b { font-size: 26px; font-weight: 800; color: var(--c, #4ade80); line-height: 1; }
.twc-aqi-num i { font-size: 9px; letter-spacing: 1.4px; color: var(--faint, #8d8678); font-style: normal; margin-top: 3px; }
.twc-aqi-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.twc-airbar { display: grid; grid-template-columns: 40px 1fr 26px; align-items: center; gap: 7px; font-size: 10.5px; }
.twc-airbar span { color: var(--faint, #8d8678); }
.twc-airbar i { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--fg, #fff) 9%, transparent); overflow: hidden; }
.twc-airbar i b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4ade80, #facc15, #f87171); }
.twc-airbar em { font-style: normal; text-align: right; color: var(--fg, #f5efe3); }
.twc-advice { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--faint, #b9b2a3); }

/* official status */
.twc-status { display: flex; gap: 11px; align-items: flex-start; }
.twc-status-ic { font-size: 21px; line-height: 1.1; }
.twc-status b { display: block; font-size: 13px; }
.twc-status i { font-size: 11px; font-style: normal; color: var(--faint, #8d8678); }
.twc-status.closed b { color: #ff8d6b; }
.twc-ty { margin-top: 10px; border-top: 1px dashed var(--line, #2a2822); padding-top: 8px; }
.twc-ty-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.twc-ty-row i { margin-left: auto; font-style: normal; color: #ffb347; font-weight: 700; }

/* quakes */
.twc-quakes { display: flex; flex-direction: column; gap: 6px; }
.twc-quake {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
}
.twc-quake:hover { background: color-mix(in srgb, var(--fg, #fff) 6%, transparent); border-color: var(--line, #2a2822); }
.twc-q-mag {
  flex: 0 0 auto;
  width: 42px;
  padding: 5px 0;
  border-radius: 9px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--m, #7db4ff);
  background: color-mix(in srgb, var(--m, #7db4ff) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--m, #7db4ff) 40%, transparent);
}
.twc-q-txt { display: flex; flex-direction: column; min-width: 0; }
.twc-q-txt b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twc-q-txt i { font-size: 10.5px; font-style: normal; color: var(--faint, #8d8678); }

/* nearby events */
.twc-next-list { display: flex; flex-direction: column; gap: 6px; }
.twc-ev {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, var(--fg, #fff) 3%, transparent);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.twc-ev:hover { border-color: color-mix(in srgb, var(--accent, #c6ff6b) 60%, transparent); transform: translateX(2px); }
.twc-ev-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 16px;
  background: color-mix(in srgb, var(--c, #a78bfa) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #a78bfa) 38%, transparent);
}
.twc-ev-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.twc-ev-txt b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twc-ev-txt i { font-size: 10.5px; font-style: normal; color: var(--faint, #8d8678); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twc-ev-cat { font-size: 10px; color: var(--faint, #8d8678); white-space: nowrap; }

/* skeleton */
.twc-load { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.twc-sk {
  border-radius: 14px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fg, #fff) 5%, transparent),
    color-mix(in srgb, var(--fg, #fff) 11%, transparent),
    color-mix(in srgb, var(--fg, #fff) 5%, transparent));
  background-size: 200% 100%;
  animation: twSk 1.3s ease-in-out infinite;
  height: 96px;
}
.twc-sk--t { height: 22px; width: 40%; }
.twc-sk--h { height: 132px; }
.twc-sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@keyframes twSk { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }

/* ==========================================================================
   TAYVAN ETKİNLİK (events app)
   ========================================================================== */
.twe { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0 0 16px; }

.twe-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; flex-wrap: wrap; }
.twe-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.twe-dot {
  width: 9px; height: 9px;
  border-radius: 99px;
  background: #ff5f57;
  box-shadow: 0 0 10px #ff5f5799;
  animation: twPulse 2s ease-out infinite;
  --tone: #ff5f57;
}
.twe-title b { display: block; font-size: 15px; }
.twe-title i { display: block; font-size: 10.5px; font-style: normal; color: var(--faint, #8d8678); }
.twe-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.twe-city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 11px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, var(--fg, #fff) 5%, transparent);
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.twe-city:hover { border-color: var(--accent, #c6ff6b); }
.twe-caret { opacity: 0.6; }
.twe-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, #000 20%, transparent);
  color: var(--faint, #8d8678);
}
.twe-search:focus-within { border-color: var(--accent, #c6ff6b); }
.twe-search input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg, #f5efe3);
  font: inherit;
  font-size: 12.5px;
  width: 170px;
}
.twe-refresh {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, var(--fg, #fff) 5%, transparent);
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  transition: transform 0.4s ease;
}
.twe-refresh.spin { transform: rotate(360deg); }
.twe-alerts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #c6ff6b) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #c6ff6b) 14%, transparent);
  color: var(--fg, #f5efe3);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.twe-alerts b { font-weight: 700; }

.twe-bar { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; flex-wrap: wrap; }
.twe-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 11px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, #000 22%, transparent);
  gap: 2px;
}
.twe-seg button {
  border: 0;
  background: transparent;
  color: var(--faint, #8d8678);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
}
.twe-seg button.on { background: color-mix(in srgb, var(--accent, #c6ff6b) 20%, transparent); color: var(--fg, #f5efe3); }
.twe-kinds { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; flex: 1; min-width: 0; }
.twe-kinds::-webkit-scrollbar { display: none; }
.twe-kinds button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, #2a2822);
  background: transparent;
  color: var(--faint, #b9b2a3);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.twe-kinds button.on {
  border-color: color-mix(in srgb, var(--accent, #c6ff6b) 60%, transparent);
  color: var(--fg, #f5efe3);
  background: color-mix(in srgb, var(--accent, #c6ff6b) 12%, transparent);
}
.twe-kinds button span { font-size: 12px; }

.twe-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 16px 10px;
  font-size: 11px;
  color: var(--faint, #8d8678);
  border-bottom: 1px solid var(--line, #2a2822);
}
.twe-live { display: inline-flex; align-items: center; gap: 6px; color: #ff8d6b; font-weight: 700; }
.twe-live i { width: 7px; height: 7px; border-radius: 99px; background: #ff5f57; animation: twPulse 1.8s ease-out infinite; --tone: #ff5f57; }
.twe-src { margin-left: auto; opacity: 0.8; }

.twe-main { display: flex; gap: 0; flex: 1; min-height: 0; position: relative; }
.twe-list { flex: 1; min-width: 0; overflow: auto; padding: 12px 16px 20px; }
.twe-group-h {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 2px 7px;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--faint, #8d8678);
  background: linear-gradient(180deg, var(--bg-2, #17150f) 65%, transparent);
}
.twe-group-live { color: #ff8d6b; display: inline-flex; align-items: center; gap: 6px; }
.twe-group-live i { width: 6px; height: 6px; border-radius: 99px; background: #ff5f57; }

.twe-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  margin-bottom: 7px;
  border-radius: 14px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, var(--bg-3, #211f19) 55%, transparent);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.twe-card:hover { border-color: color-mix(in srgb, var(--accent, #c6ff6b) 50%, transparent); transform: translateY(-1px); }
.twe-card.on { border-color: var(--accent, #c6ff6b); background: color-mix(in srgb, var(--accent, #c6ff6b) 10%, transparent); }
.twe-card.live { box-shadow: inset 3px 0 0 #ff5f57; }
.twe-card-ic {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 18px;
  background: color-mix(in srgb, var(--c, #a78bfa) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #a78bfa) 38%, transparent);
}
.twe-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.twe-card-top { display: flex; align-items: center; gap: 8px; }
.twe-card-top b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twe-badge { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; }
.twe-badge.live { display: inline-flex; align-items: center; gap: 4px; background: #ff5f5722; color: #ff8d6b; border: 1px solid #ff5f5755; }
.twe-badge.live i { width: 5px; height: 5px; border-radius: 99px; background: #ff5f57; }
.twe-badge.feat { background: #ffd16622; color: #ffd166; border: 1px solid #ffd16655; }
.twe-card-sub { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--faint, #8d8678); }
.twe-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.twe-cat {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--c, #a78bfa);
  background: color-mix(in srgb, var(--c, #a78bfa) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #a78bfa) 30%, transparent);
}
.twe-price { font-size: 10px; color: #7dffd8; }
.twe-tag { font-size: 10px; color: var(--faint, #8d8678); }
.twe-card-go { flex: 0 0 auto; font-size: 20px; color: var(--faint, #8d8678); opacity: 0.5; }
.twe-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 50px 16px;
  text-align: center;
}
.twe-empty span { font-size: 34px; }
.twe-empty b { font-size: 14px; }
.twe-empty i { font-size: 12px; font-style: normal; color: var(--faint, #8d8678); }

/* detail panel */
.twe-detail {
  width: 340px;
  flex: 0 0 auto;
  border-left: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, var(--bg-2, #17150f) 90%, #000);
  overflow: auto;
  padding: 0 0 24px;
  animation: twpIn 0.16s ease both;
}
.twe-detail[hidden] { display: none; }
.twe-d-hero {
  position: relative;
  padding: 18px 18px 16px;
  overflow: hidden;
  border-bottom: 1px solid var(--line, #2a2822);
}
.twe-d-glow {
  position: absolute;
  inset: -50% -20% auto;
  height: 200px;
  background: radial-gradient(60% 100% at 20% 0%, color-mix(in srgb, var(--c, #a78bfa) 38%, transparent), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.twe-d-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, #000 35%, transparent);
  color: var(--fg, #f5efe3);
  cursor: pointer;
  z-index: 2;
}
.twe-d-ic { position: relative; font-size: 34px; display: block; line-height: 1; }
.twe-d-kicker {
  position: relative;
  display: block;
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--c, #a78bfa);
}
.twe-d-kicker em { font-style: normal; color: #ff8d6b; }
.twe-d-hero h2 { position: relative; margin: 6px 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -0.4px; }
.twe-d-hero p { position: relative; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--faint, #b9b2a3); }
.twe-d-rows { padding: 8px 18px 0; display: flex; flex-direction: column; }
.twe-d-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed color-mix(in srgb, var(--line, #2a2822) 80%, transparent); }
.twe-d-row > span { font-size: 15px; line-height: 1.2; }
.twe-d-row b { display: block; font-size: 12.5px; }
.twe-d-row i { font-size: 11px; font-style: normal; color: var(--faint, #8d8678); }
.twe-d-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 18px 0;
  padding: 13px;
  border-radius: 12px;
  background: var(--accent, #c6ff6b);
  color: #141a0a;
  font-weight: 800;
  font-size: 13.5px;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.twe-d-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.twe-d-note { margin: 10px 18px 0; font-size: 10.5px; line-height: 1.5; color: var(--faint, #8d8678); }

/* ==========================================================================
   ALERTS POPUP (shared by both apps)
   ========================================================================== */
.tw-alerts {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, #000 66%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: twpIn 0.16s ease both;
}
.tw-alerts-card {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 26px 22px 20px;
  border-radius: 20px;
  border: 1px solid var(--line, #2a2822);
  background: var(--bg-2, #17150f);
  box-shadow: 0 40px 90px -30px #000e;
  text-align: center;
  animation: twAlertsIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes twAlertsIn { from { transform: translateY(14px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.tw-alerts-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 1px solid var(--line, #2a2822);
  background: transparent;
  color: var(--fg, #f5efe3);
  cursor: pointer;
}
.tw-alerts-ic {
  display: inline-grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  font-size: 24px;
  background: color-mix(in srgb, var(--accent, #c6ff6b) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #c6ff6b) 36%, transparent);
}
.tw-alerts-card h3 { margin: 12px 0 6px; font-size: 19px; letter-spacing: -0.3px; }
.tw-alerts-lead { margin: 0 auto; max-width: 340px; font-size: 13.5px; line-height: 1.6; color: var(--faint, #b9b2a3); }
.tw-alerts-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.tw-alerts-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--line, #2a2822);
  background: color-mix(in srgb, var(--fg, #fff) 3%, transparent);
}
.tw-alerts-list b { font-size: 12.5px; }
.tw-alerts-list span { font-size: 11.5px; color: var(--faint, #8d8678); }
.tw-alerts-actions { display: flex; gap: 8px; margin-top: 18px; }
.tw-alerts-actions .btnl { flex: 1; justify-content: center; text-decoration: none; }
.tw-alerts-foot { margin: 12px 0 0; font-size: 11px; color: var(--faint, #8d8678); letter-spacing: 0.3px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 760px) {
  .twc-grid { grid-template-columns: 1fr; }
  .twc-block { margin: 12px 10px 0; padding: 12px; border-radius: 14px; }
  .twc-hero { padding: 14px 12px 12px; }
  .twc-hero-main { margin-top: 12px; }
  .twc-now-ic { font-size: 38px; }
  .twc-now-side { max-width: none; }
  .twc-now-meta { width: 100%; }
  .twc-alerts { margin-left: 0; }
  .twp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twp-sheet { padding: 10px; align-items: flex-end; }
  .twp { border-radius: 18px 18px 12px 12px; max-height: 86%; }

  /* events: the detail panel becomes a full-height sheet over the list */
  .twe-top { padding: 12px 12px 8px; }
  .twe-tools { width: 100%; margin-left: 0; }
  .twe-search { flex: 1; }
  .twe-search input { width: 100%; }
  .twe-bar { padding: 0 12px 8px; }
  .twe-meta { padding: 0 12px 8px; }
  .twe-list { padding: 10px 10px 18px; }
  .twe-detail {
    position: absolute;
    inset: 0;
    width: 100%;
    border-left: 0;
    z-index: 5;
    box-shadow: 0 -20px 50px -20px #000;
  }
}

@media (max-width: 520px) {
  .twc-alerts span { display: none; }
  .twc-alerts { padding: 8px 11px; }
  .twc-hero-foot { flex-direction: column; gap: 2px; }
  .twc-now-temp { font-size: 46px; }
  .twc-aqi { flex-direction: column; align-items: stretch; }
  .twc-aqi-num { width: 100%; height: 62px; flex-direction: row; gap: 8px; }
  .twc-aqi-num i { margin-top: 0; }
  .twc-day { grid-template-columns: 1fr 22px auto; }
  .twc-day-p { display: none; }
  .twc-ev-cat { display: none; }
  .twe-card-ic { width: 34px; height: 34px; font-size: 16px; }
  .twe-alerts b { display: none; }
  .twe-alerts { padding: 0 10px; }
  .twe-title i { display: none; }
  .tw-alerts-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .twc-risk i, .twe-dot, .twe-live i, .twc-sk, .twp-sheet, .tw-alerts, .tw-alerts-card,
  .twe-detail, .twp-city, .twe-card, .twc-ev { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   ADMIN — Gmail preset button, "email service off" switch, Taiwan card
   ========================================================================== */
.adm-smtp-preset {
  /* The preset badge sits right next to the title. It must NOT take the
     `margin-left: auto` that the state pill (.adm-smtp-state) uses, otherwise
     the free space is split between the two and "GOOGLE / GMAIL" ends up
     floating in the middle of the card. */
  margin-left: 2px;
  margin-right: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--faint, #8d8678);
  border: 1px solid var(--line, #2a2822);
  text-transform: uppercase;
}
.adm-smtp-preset:empty { display: none; }
.adm-smtp-preset.on {
  color: #141a0a;
  background: #c6ff6b;
  border-color: #c6ff6b;
}

.adm-gmail-row { margin: 4px 0 14px; }
.adm-gmail-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, #ea4335 40%, var(--line, #2a2822));
  background: linear-gradient(135deg, color-mix(in srgb, #ea4335 12%, transparent), color-mix(in srgb, #4285f4 12%, transparent));
  color: var(--fg, #f5efe3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.adm-gmail-btn:hover { border-color: #ea4335; transform: translateY(-1px); }
.adm-gmail-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: conic-gradient(from -40deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
  -webkit-text-fill-color: #fff;
  text-shadow: 0 1px 2px #0008;
}
.adm-gmail-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-gmail-txt b { font-size: 13px; }
.adm-gmail-txt i { font-size: 11px; font-style: normal; color: var(--faint, #8d8678); }
.adm-gmail-go { margin-left: auto; font-size: 16px; opacity: 0.7; }

/* master switch */
.adm-email-off { margin: 14px 0 4px; }
.adm-off-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid #f8717166;
  background: #f8717110;
  color: var(--fg, #f5efe3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.adm-off-switch:hover { border-color: #f87171; }
.adm-off-track {
  flex: 0 0 auto;
  position: relative;
  width: 40px;
  height: 22px;
  margin-top: 1px;
  border-radius: 99px;
  background: #f8717144;
  border: 1px solid #f8717188;
  transition: background 0.18s ease;
}
.adm-off-track i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background: #f87171;
  transition: transform 0.18s ease, background 0.18s ease;
}
.adm-email-off.off .adm-off-track { background: #f8717155; }
.adm-email-off.off .adm-off-track i { transform: translateX(18px); background: #fff; }
/* While the flip is being saved the switch is locked, so show that instead of
   letting a second tap silently undo the first one. */
.adm-off-switch.busy { cursor: progress; opacity: .75; }
.adm-off-switch:focus-visible { outline: 2px solid #f87171; outline-offset: 2px; }
.adm-off-txt { display: flex; flex-direction: column; gap: 3px; }
.adm-off-txt b { font-size: 13px; }
.adm-off-txt i { font-size: 11.5px; font-style: normal; line-height: 1.5; color: var(--faint, #8d8678); }

/* Taiwan notifications card */
.adm-tw .adm-block-head { display: flex; align-items: center; gap: 10px; }
.adm-tw-recipient { margin: 6px 0 14px; }
.adm-tw-rcp { display: flex; gap: 8px; }
.adm-tw-rcp .set-input { flex: 1; }
.adm-tw-rcp-note { margin-top: 6px; font-size: 11.5px; }
.adm-tw-rcp-note .ok { color: #4ade80; }
.adm-tw-rcp-note .bad { color: #ff8d6b; }

.adm-tw-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.adm-tw-toggles .adm-srv-toggle { width: 100%; }
.adm-tw-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.adm-tw-kinds { margin-bottom: 14px; }
.adm-tw-kinds-h { display: block; font-size: 11.5px; color: var(--faint, #8d8678); margin-bottom: 8px; }
.adm-tw-kinds-list { display: flex; flex-wrap: wrap; gap: 7px; }
.adm-tw-kind {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line, #2a2822);
  background: transparent;
  color: var(--faint, #b9b2a3);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.adm-tw-kind.on {
  border-color: color-mix(in srgb, var(--accent, #c6ff6b) 60%, transparent);
  background: color-mix(in srgb, var(--accent, #c6ff6b) 14%, transparent);
  color: var(--fg, #f5efe3);
}
.adm-tw-status {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #2a2822);
  font-size: 11.5px;
  color: var(--faint, #8d8678);
}
.adm-tw-status b { color: var(--fg, #f5efe3); font-weight: 600; }
.adm-tw-status .bad { color: #ff8d6b; }

@media (max-width: 760px) {
  .adm-tw-toggles { grid-template-columns: 1fr; }
  .adm-tw-grid { grid-template-columns: 1fr 1fr; }
  .adm-tw-grid .adm-f:first-child { grid-column: 1 / -1; }
  .adm-tw-rcp { flex-direction: column; }
  .adm-tw-rcp .btnl { justify-content: center; }
  .adm-gmail-btn { padding: 11px 12px; }
  .adm-gmail-txt i { font-size: 10.5px; }
}
@media (max-width: 520px) {
  .adm-tw-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   PDF / CV — MOBİL OKUYUCU (telefonda "kocaman, hiçbir şey anlaşılmıyor" düzeltmesi)
   Telefonda araç çubuğu ekranın %40'ını yiyor ve PDF sayfası küçük bir pencereyse
   kalıyordu. Burada: sahne/belge tam yükseklik, tek satır kompakt araç çubuğu,
   kütüphane rayı yerine dikey liste. Masaüstüne (>720px) dokunmaz.
   Dosyanın en sonunda durur; önceki aynı-seçici kuralları (46px indir butonu,
   min-height:52dvh iframe, 62px bar) ezer.
   ========================================================================== */
@media (max-width: 720px) {
  /* Pencere gövdesi: kendi boşluğu yerine PDF kendi iç boşluğunu yönetir. */
  #win-pdf.mobile .win__body {
    padding: var(--winbar-h, 46px) 0 0 !important;
    overflow: hidden !important;
  }
  #win-pdf .pdf-app--new {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  /* Tek dosya modunda (CV) kitaplık rayı hiç yer kaplamasın. */
  #win-pdf .pdf-app--new.pdf-app--single .pdf-side,
  #win-pdf .pdf-app--new.pdf-app--single .pdf-status { display: none !important; }
  #win-pdf .pdf-app--new .pdf-main { min-height: 0 !important; }

  /* ---------- araç çubuğu: tek satır, 44px dokunma yüksekliği -------------- */
  #win-pdf .pdf-app--new .pdf-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 5px 8px !important;
    min-height: 44px !important;
  }
  #win-pdf .pdf-app--new .pdf-name { flex: 1 1 auto; min-width: 0; gap: 6px; }
  #win-pdf .pdf-app--new .pdf-name > span { width: 18px !important; height: 21px !important; flex: 0 0 18px !important; }
  #win-pdf .pdf-app--new .pdf-name b { font-size: 12px !important; line-height: 1.2 !important; }
  #win-pdf .pdf-app--new .pdf-name i { display: none !important; }

  /* Aksiyonlar tek satır: [− 100% +] [⬇] [↗]. */
  #win-pdf .pdf-app--new .pdf-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    width: auto !important;
  }
  #win-pdf .pdf-app--new .pdf-zoom {
    padding: 2px !important;
    gap: 0 !important;
    border-radius: 9px !important;
    /* Telefonda ölçekleme kapalı: yerleşik PDF görüntüleyici kendi
       yakınlaştırmasını ve sayfa kaydırmasını yönetiyor. */
    display: none !important;
  }
  #win-pdf .pdf-app--new .pdf-zbtn {
    width: 26px !important; height: 26px !important;
    min-width: 0 !important;
    font-size: 14px !important;
    border-radius: 7px !important;
  }
  #win-pdf .pdf-app--new .pdf-zoom span {
    min-width: 30px !important;
    font-size: 9.5px !important;
    padding: 0 1px !important;
  }
  /* Butonların "kocaman" görünmesinin ana sebebi: .pdf-dl { height:46px; width:100% }
     ve flex:1 kuralları. Burada hepsi kare ikon düğmesine iner. */
  #win-pdf .pdf-app--new .pdf-dl,
  #win-pdf .pdf-app--new #pdf-external,
  #win-pdf .pdf-app--new #pdf-files {
    flex: 0 0 auto !important;
    width: 34px !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
    border-radius: 10px !important;
    justify-content: center !important;
    box-shadow: none !important;
    overflow: hidden;
    white-space: nowrap;
  }
  /* İkonlar aria-label'lardan değil, metin dışındaki işaretlerden geliyor:
     ⬇ / ↗ zaten metin; 0 font-size onları gizler, ::before ile geri koy. */
  #win-pdf .pdf-app--new .pdf-dl::before { content: "⬇"; font-size: 15px; line-height: 1; }
  #win-pdf .pdf-app--new #pdf-external::before { content: "↗"; font-size: 15px; line-height: 1; }
  #win-pdf .pdf-app--new #pdf-files::before { content: "▤"; font-size: 15px; line-height: 1; }
  /* Kütüphane açıkken de listeye ulaşılabilsin diye Dosyalar butonu tek dosya
     modunda gizlenir (masaüstünde duruyor). */
  #win-pdf .pdf-app--new.pdf-app--single #pdf-files { display: none !important; }

  /* ---------- sahne: belge tam yükseklik, sıfır letterbox ----------------- */
  #win-pdf .pdf-app--new .pdf-stage {
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
  }
  #win-pdf .pdf-app--new .pdf-sheet {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: #1b1e26 !important;
  }
  /* min-height:52dvh kuralı iframe'i sahnenin ortasında küçük bırakıyordu.
     width/height BURADA VERİLMEZ: applyZoom() onları yönetir. */
  #win-pdf .pdf-app--new #pdf-frame {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    display: block !important;
    background: #525659 !important;
  }
  #win-pdf .pdf-app--new .pdf-empty { inset: 0 !important; border-radius: 0 !important; }
  #win-pdf .pdf-app--new .pdf-empty p { font-size: 11.5px !important; }

  /* ---------- kitaplık (tek dosya değilse): raya değil, listeye ------------ */
  #win-pdf .pdf-app--new:not(.pdf-app--single) {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  #win-pdf .pdf-app--new:not(.pdf-app--single) .pdf-side {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    max-height: 46dvh !important;
    min-height: 0 !important;
  }
  #win-pdf .pdf-app--new .pdf-side-head { padding: 8px 10px 6px !important; gap: 6px !important; }
  #win-pdf .pdf-app--new .pdf-list {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 3px !important;
    padding: 0 8px 8px !important;
  }
  #win-pdf .pdf-app--new .pdf-item { min-width: 0 !important; width: 100% !important; padding: 7px 8px !important; }
  #win-pdf .pdf-side-foot { padding: 6px 10px !important; }
}

/* ---- PDF okuyucu · mobil ---------------------------------------------------
   "Sadece sayfa" modu kaldırıldı: iframe'i yukarı kaydırıp tarayıcının kendi PDF
   şeridini gizliyordu ama üst şerit ve alttaki sayfa göstergesi kesiliyordu,
   telefonda CV okunmuyordu. Artık iframe kırpılmaz; yüksekliği stage'den
   (flex:1 + min-height:0) gelir, genişliği tam ekrandır ve kaydırma doğal
   çalışır. Sadece telefonda gereksiz dış boşlukları kapatıyoruz. */
@media (max-width: 720px) {
  #win-pdf .pdf-app--new .pdf-stage { padding: 0 !important; }
  #win-pdf .pdf-app--new .pdf-sheet { min-height: 0 !important; }
  /* width/height'i applyZoom() yazar; burada !important verilirse ölçek hesabı
     ezilir ve küçültünce sayfanın altında boş bant kalır. */
  #win-pdf .pdf-app--new #pdf-frame {
    min-height: 0 !important;
    border: 0 !important;
  }
}

@media (max-width: 720px) {
  /* Başlık pencerenin üst şeridinde zaten var → PDF kendi başlığını inceltsin. */
  #win-pdf .pdf-app--new .pdf-bar { padding: 4px 6px !important; }
  #win-pdf .pdf-app--new .pdf-name > span { display: none !important; }
  #win-pdf .pdf-app--new .pdf-name { padding-left: 2px; }
  #win-pdf .pdf-app--new .pdf-actions { gap: 3px !important; }
  /* Üst şeritteki pencere adı, PDF başlığıyla aynı ismi iki kez yazıyordu;
     bu pencerede yalnızca trafik ışıkları kalsın. */
  #win-pdf .win__title { display: none !important; }
}

/* ============================================================================
   ==== YENİ TUR — TOP BAR AS REAL GLASS, A BAR THAT SITS STILL, AND THE
   ====          ABOUT SUMMARY. Appended last on purpose: this file is an
   ====          append-override sheet, so the newest block must win.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. MENUBAR: glass by default, taken from the wallpaper
   The bar used to be a tint *computed from* the wallpaper (--dyn-bar-2 at 90%
   alpha). That made it an average colour band: technically translucent, but
   it read as a flat painted strip. Real glass samples what is behind it, so
   the tint has to come down a long way and the blur has to do the work.
   Three layers are stacked for a believable pane:
     - a diagonal sheen (light gathering at the top-left),
     - the tint pulled from the wallpaper,
     - a top hairline + inner highlight that catches the "edge" of the pane.
   --------------------------------------------------------------------------- */
#menubar {
  /* one place to tune the whole pane */
  --mb-glass-tint: color-mix(in srgb, var(--bg, #0b1020) 16%, transparent);
  --mb-glass-edge: color-mix(in srgb, #fff 22%, transparent);
  --mb-h: 28px;
  background:
    linear-gradient(175deg,
      color-mix(in srgb, #fff 13%, transparent) 0%,
      color-mix(in srgb, #fff 4%, transparent) 42%,
      transparent 72%),
    var(--mb-glass-tint) !important;
  backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
  border-bottom: 1px solid color-mix(in srgb, #fff 16%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 14%, transparent),
    0 8px 26px -22px rgba(0, 0, 0, .8) !important;
  /* The text sits on a blurry photo now, so it carries its own contrast. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  color: var(--fg, #fff);
}
/* The dynamic-colour pass still wants an opaque bar. Glass wins; it simply
   pulls its tint from the same wallpaper-derived colour, at low alpha. */
body.dyn-wall.mb-glass #menubar {
  --mb-glass-tint: color-mix(in srgb, var(--dyn-accent, #0b1020) 15%, transparent);
}
/* Explicit "solid" in Settings restores the old slab. */
body:not(.mb-glass) #menubar {
  background: color-mix(in srgb, var(--bg-2, #161511) 92%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
}
/* Light themes: the same pane, but lit from behind. */
[data-mode="light"] #menubar,
body[data-mode="light"] #menubar {
  --mb-glass-tint: color-mix(in srgb, #fff 26%, transparent);
  background:
    linear-gradient(175deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .18) 60%, rgba(255, 255, 255, .06)),
    var(--mb-glass-tint) !important;
  border-bottom-color: rgba(0, 0, 0, .10) !important;
  color: var(--ink, #1d1b16);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 6px 22px -20px rgba(0, 0, 0, .5) !important;
}
[data-mode="light"] #menubar .mb-app,
[data-mode="light"] #menubar .mb-clock,
[data-mode="light"] #menubar .mb-icon,
[data-mode="light"] #menubar .mb-logo { color: var(--ink, #1d1b16) !important; }

/* Some themes are meant to be opaque slabs (the Win95 homage especially). */
[data-theme="pixel95"] #menubar,
[data-theme="blockworld"] #menubar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
   2. MENUBAR: why it used to shiver, and why it no longer can
   Three separate defects stacked up:
     a) .mb-icon was 22px tall inside a 28px bar. The line box was 20px, so a
        22px box centred itself on a half-pixel and the icon sat ~2px below the
        text. On hover that box grew a background, which changed the flex
        baseline alignment and kicked the whole row down by 2.29px (measured).
     b) .mb-app had no padding at all: its hit area was the 20px text band, so
        moving the pointer a hair up or down toggled hover on and off at high
        frequency - the "crazy shaking".
     c) The avatar style applied a `scale(1.08)` on hover, which is a dock
        magnify idea, not something a 24px menubar glyph should do.
   The fix is geometric: every item gets the SAME 20px box, the same 2px of
   horizontal breathing room, and no hover property that can change size.
   --------------------------------------------------------------------------- */
#menubar {
  --mb-item-h: 20px;
  align-items: center;
}
#menubar .mb-icon,
#menubar .mb-logo,
#menubar .mb-app,
#menubar .mb-clock,
#menubar .mb-user {
  box-sizing: border-box;
  height: var(--mb-item-h) !important;
  min-height: var(--mb-item-h);
  max-height: var(--mb-item-h);
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  /* Only paint-level properties animate. Nothing here can move a sibling. */
  transition:
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
  will-change: background-color;
}
#menubar .mb-icon {
  width: 26px;
  min-width: 26px;
  padding: 0 !important;
  justify-content: center;
}
#menubar .mb-app {
  padding: 0 7px !important;
  margin: 0 -7px;
  max-width: 46vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menubar .mb-clock { padding: 0 6px !important; }
#menubar .mb-logo { padding: 0 8px 0 4px !important; }

/* Hover is a wash and an inset hairline. Same box, every time. */
#menubar .mb-icon:hover,
#menubar .mb-logo:hover,
#menubar .mb-app:hover,
#menubar .mb-clock:hover,
#menubar .mb-user:hover {
  transform: none !important;
  scale: none !important;
  background: color-mix(in srgb, var(--fg, #fff) 15%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg, #fff) 9%, transparent);
}
[data-mode="light"] #menubar .mb-icon:hover,
[data-mode="light"] #menubar .mb-logo:hover,
[data-mode="light"] #menubar .mb-app:hover,
[data-mode="light"] #menubar .mb-clock:hover {
  background: color-mix(in srgb, #000 8%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 5%, transparent);
}
/* Keyboard focus reads the same way as hover, never moves the row. */
#menubar .mb-icon:focus-visible,
#menubar .mb-logo:focus-visible,
#menubar .mb-app:focus-visible,
#menubar .mb-clock:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.mb-avatar:hover { transform: none !important; }

/* The idle label ("search") needs its own hit area too. */
#menubar .mb-app.is-search { opacity: .92; }
#menubar .mb-app.is-search:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   3. MENUBAR: the running-app dot, like a real desktop
   Nothing focused: the bar shows the palette affordance, as an OS shows its
   Finder menu. Something focused: the label carries a small accent dot and the
   app's name, so the bar always answers "what am I in right now?".
   --------------------------------------------------------------------------- */
#menubar .mb-app.is-app::after {
  width: 4px;
  height: 4px;
  margin-left: 7px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: mbRunDot 2.6s ease-in-out infinite;
}
@keyframes mbRunDot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 3px transparent; }
}
/* Windows that are minimised still own a dock tile; the bar just should not
   claim they are the active app. handled in JS via focusedWin(). */

/* ---------------------------------------------------------------------------
   4. ABOUT: the Summary control, sitting in the window's own title bar
   --------------------------------------------------------------------------- */
.win--about .win__bar {
  gap: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .ab-seg-btn,
  .ab-seg::before,
  #menubar .mb-icon,
  #menubar .mb-logo,
  #menubar .mb-app,
  #menubar .mb-clock { transition: none !important; }
  #menubar .mb-app.is-app::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #menubar {
    background: var(--bg-2, #161511) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================================================
   MOBİL PENCERE GEOMETRİSİ — tek kaynak (en sonda, her şeyi ezer)
   ============================================================================
   Önceden üç ayrı yerde `.win.mobile` yüksekliği/genişliği tanımlıydı ve
   pencereler kenarlara sıfır boşlukla yapışıyor, alt uçları da dock'un altına
   2px giriyordu. Burada hepsi tek yerde:
     --win-gap : pencerenin ekran kenarı, üst bar ve dock ile arasındaki nefes
     --dock-h  : dock'un kapladığı gerçek dikey alan (yükseklik + alt boşluk)
   Pencere yüksekliği bu iki değerden hesaplanır; dock'un altına hiçbir zaman
   girmez ve dört kenarda da eşit boşluk bırakır.
   ========================================================================== */
@media (max-width: 720px) {
  :root {
    /* NO breathing room around the sheet. An 8px gap on all four sides made the
       wallpaper show as a strip above and beside EVERY app, which reads as
       "empty space under the menu bar". A phone sheet owns the full width; the
       menu bar is the top edge and the dock is the bottom. */
    --win-gap: 0px;
    /* 40px ikon + 2x6px dolgu = 52px yükseklik, 6px de alt boşluk = 58px. */
    --dock-h: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- dock: içeriği kadar genişler, ortalanır, kenardan nefes alır ------- */
  #dock {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    max-width: calc(100vw - 2 * var(--win-gap)) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent) !important;
    background: color-mix(in srgb, var(--bg-2) 72%, transparent) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    box-shadow: 0 14px 34px -14px #000c, inset 0 1px 0 rgba(255,255,255,.10) !important;
    justify-content: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #dock::-webkit-scrollbar { display: none; }
  /* Uygulama sayısı arttıkça dock büyür; taşarsa yatay kayar. İkonlar tek ölçü. */
  #dock .dock-it,
  #dock .dock-it--trash,
  #dock .dock-it--all {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
  }
  #dock .dock-it svg { width: 20px !important; height: 20px !important; }
  #dock .dock-it--trash .trash-ic { width: 30px !important; height: 30px !important; }

  /* ---- pencere: dört kenarda nefes payı, yuvarlak köşe, cam görünüm ------ */
  .win.mobile,
  .app.win.mobile,
  #windows .win.mobile,
  #windows .app.win.mobile,
  #app {
    position: fixed !important;
    left: var(--win-gap) !important;
    right: var(--win-gap) !important;
    top: calc(var(--mb-h, 26px) + var(--win-gap)) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h) - 2 * var(--win-gap)) !important;
    max-height: none !important;
    margin: 0 !important;
    /* Edge to edge: no gap means rounded corners would look like a bug, so the
       sheet is square and only a hairline separates it from the menu bar. */
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent) !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }
  /* Yarı saydam cam: duvar kağıdı pencerenin içinden görünür. */
  .win.mobile,
  .app.win.mobile,
  #app {
    background: color-mix(in srgb, var(--bg) 74%, transparent) !important;
    backdrop-filter: blur(26px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(155%) !important;
  }
  /* Terminalin kendi şeritleri opak kalırsa cam etkisi kaybolur. */
  #app .tbar,
  #app .chips,
  #app .tmux { background: transparent !important; }
  /* İç paneller opak kalırsa cam etkisi kayboluyor; sohbet panelleri saydam. */
  .win.mobile .chat-side,
  .win.mobile .chat-main,
  .win.mobile .chat-gate,
  .win.mobile .chat-shell { background: transparent !important; }
  .win.mobile .chat-shell { border-color: color-mix(in srgb, var(--fg) 10%, transparent) !important; }

  /* Boş sohbet başlığı: düğmeler artık başlıkta, kendi satırını kaplamasın. */
  .chat-head-name--idle {
    font-weight: 700;
    opacity: .8;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ============================================================================
   SOL PANELLER — TEK GÖRÜNÜM
   Bu dosya append-override olduğu için bu blok en sonda duruyor.

   Sorunlar:
   1. Market, Chirp, Forum, Müzik ve PDF panelleri yarı saydamdı; mobilde
      panelin altındaki içerik görünüyor, "alt kısımla karışıyor" gibi
      okunuyordu.
   2. Her uygulama paneli farklı bir düğme kullanıyordu (‹, ☰, ✕...).
      Mesaj uygulamasındaki gibi tek dil: panelin başında ‹, kapalıyken sol
      kenarda dikey › sekmesi.

   Çözüm: bütün rail'ler opak --bg-2 zemini kullanır; düğmeler ortak ölçü ve
   görünümü paylaşır; mobilde paneller içeriğin üstüne kayan çekmece olur.
   ============================================================================ */

/* --- 1. Opak zemin: hiçbir panel arkasını göstermez ---------------------- */
.chat-side,
.win.mobile .chat-side,
.nt2-side,
.win.mobile .nt2-side,
.fxa-side,
.as-rail,
.chirp-side,
.forum-side,
.mu-side,
.pdf-side {
  background: var(--bg-2, var(--bg, #14161c)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chat-side-head,
.win.mobile .chat-side-head {
  background: var(--bg-2, var(--bg, #14161c)) !important;
}

/* --- 2. ‹ kapat düğmesi: mesaj uygulamasındaki chat-icbtn ile aynı ------ */
.nt2-collapse,
.fxa-side-x,
.as-side-x,
.pdf-side-x,
.chirp-side-x,
.forum-side-x,
.mu-side-x {
  display: grid !important;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2, var(--bg));
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease;
}
.nt2-collapse:hover,
.fxa-side-x:hover,
.as-side-x:hover,
.pdf-side-x:hover,
.chirp-side-x:hover,
.forum-side-x:hover,
.mu-side-x:hover {
  background: var(--chip);
  border-color: var(--accent);
  color: var(--accent);
}

/* Kapat düğmesi başlık satırının sağında durur. */
.fxa-brand .fxa-side-x,
.as-brand .as-side-x,
.chirp-side-head .chirp-side-x,
.pdf-side-headrow .pdf-side-x { margin-left: auto; }
.fxa-brand,
.as-brand,
.chirp-side-head,
.pdf-side-headrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdf-side-headrow { justify-content: space-between; align-items: flex-start; }
.pdf-side-headrow .pdf-side-title { flex: 1; min-width: 0; }
.chirp-side-head { justify-content: space-between; }
.chirp-side-head .chirp-logo { flex: 1; min-width: 0; padding: 0; }

/* --- 3. › yeniden aç sekmesi: mesaj uygulamasındaki chat-reopen ile aynı -- */
.nt2-reopen,
.chirp-reopen,
.fxa-reopen,
.as-reopen,
.pdf-reopen,
#win-forum .forum-side-open,
.mu-side-open {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 36;
  width: 20px;
  height: 58px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 11px 11px 0;
  background: var(--bg-2, var(--bg));
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .72;
  box-shadow: 8px 0 20px -16px #000;
  transition: width .16s ease, opacity .16s ease, background-color .16s ease;
}
.nt2-reopen:hover,
.chirp-reopen:hover,
.fxa-reopen:hover,
.as-reopen:hover,
.pdf-reopen:hover,
#win-forum .forum-side-open:hover,
.mu-side-open:hover {
  width: 26px;
  opacity: 1;
  background: var(--bg-2, var(--bg));
  border-color: var(--accent);
  color: var(--accent);
}
.fxa-reopen,
.as-reopen,
.pdf-reopen { display: none; }

/* --- 4. Kapalıyken yerleşim --------------------------------------------- */
.fxa,
.appstore,
.pdf-app,
.chirp,
.forum { position: relative; }

.fxa.side-closed { grid-template-columns: minmax(0, 1fr); }
.fxa.side-closed .fxa-side { display: none; }
.fxa.side-closed .fxa-reopen { display: grid; }

.appstore.side-closed { grid-template-columns: minmax(0, 1fr); }
.appstore.side-closed .as-rail { display: none; }
.appstore.side-closed .as-reopen { display: grid; }

.pdf-app.side-closed { grid-template-columns: minmax(0, 1fr) !important; }
.pdf-app.side-closed .pdf-side { display: none; }
.pdf-app.side-closed .pdf-reopen { display: grid; }
.pdf-app--single .pdf-reopen,
.pdf-app--single .pdf-side-x { display: none !important; }

/* Forum'daki ☰ düğmesi de mesaj uygulamasındaki dikey sekmeye dönüşür. */
#win-forum .forum-head--new .forum-side-open,
#win-forum .forum-body.side-closed .forum-side-open { display: none !important; }
#win-forum .forum.side-closed #forum-side-open { display: grid !important; }
#win-forum .forum:not(.side-closed) #forum-side-open { display: none !important; }

/* --- 5. Mobil: paneller içeriğin üstüne kayan opak çekmece ------------- */
@media (max-width: 780px) {
  /* Files */
  .fxa { grid-template-columns: 1fr; }
  .fxa .fxa-side,
  .fxa.side-closed .fxa-side {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 30;
    width: min(300px, 86vw);
    max-width: none;
    height: auto;
    min-height: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    transform: none;
    box-shadow: 24px 0 50px -20px #000c;
    transition: transform .25s ease;
  }
  .fxa.side-closed .fxa-side { transform: translateX(-104%); }
  .fxa-veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 25;
    border: 0;
    padding: 0;
    background: rgba(5, 7, 12, .55);
  }
  .fxa.side-closed .fxa-veil { display: none; }

  /* Market */
  .appstore { grid-template-columns: 1fr; }
  .appstore .as-rail,
  .appstore.side-closed .as-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 30;
    width: min(300px, 86vw);
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    transform: none;
    box-shadow: 24px 0 50px -20px #000c;
    transition: transform .25s ease;
  }
  .appstore.side-closed .as-rail { transform: translateX(-104%); }
  .appstore .as-brand { display: flex; }
  .appstore .as-rail-foot { display: flex; }
  .appstore .as-nav { flex-direction: column; }
  .appstore .as-navitem { white-space: normal; }
  .as-veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 25;
    border: 0;
    padding: 0;
    background: rgba(5, 7, 12, .55);
  }
  .appstore.side-closed .as-veil { display: none; }

  /* Chirp */
  #win-chirp .chirp,
  .chirp { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .chirp .chirp-side,
  #win-chirp .chirp-side,
  #win-chirp .chirp.side-closed .chirp-side {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 30;
    width: min(300px, 86vw);
    height: auto;
    max-height: none;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--line) !important;
    border-bottom: 0 !important;
    transform: none;
    box-shadow: 24px 0 50px -20px #000c;
    transition: transform .25s ease;
  }
  #win-chirp .chirp.side-closed .chirp-side { transform: translateX(-104%); }
  .chirp .chirp-overlay,
  #win-chirp .chirp-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 25;
    border: 0;
    padding: 0;
    background: rgba(6, 9, 16, .55);
  }
  .chirp.side-closed .chirp-overlay { display: none; }

  /* PDF: telefonda kitaplık üstteydi; kapalıyken tek satır kalsın. */
  #win-pdf .pdf-app.side-closed {
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .pdf-app.side-closed .pdf-reopen { display: grid; }
}


/* ---- PDF okuyucu: sayfanın etrafı -----------------------------------------
   Tarayıcının kendi PDF görüntüleyicisi sayfayı koyu gri bir zeminin üstünde
   çiziyor. Bizim iframe'in arkası daha koyu (#22252e) olduğu için, yakınlaştırma
   %100'ün altına inince sayfanın iki yanında "siyah çerçeve" gibi duran bir bant
   çıkıyordu. Bu iki yüzeyi tarayıcının kendi zemin rengine (#525659) eşitleyince
   belge tek parça görünüyor: ne siyah bant, ne kesik kenar. */
.pdf-app--new .pdf-sheet,
.pdf-app--new #pdf-frame,
#win-pdf .pdf-app--new .pdf-sheet,
#win-pdf .pdf-app--new #pdf-frame {
  background: #525659 !important;
}
/* Iframe sayfayı kendi içinde ortalıyor; taşan kısmı kırpmak yerine kaydırma
   bırakıyoruz ki %100 üstünde de her yere ulaşılabilsin. */
.pdf-app--new .pdf-sheet { overflow: auto; }

/* ---- Terminal başlık şeridi (mobil) ---------------------------------------
   Şeritte pencere adı + dört kısayol + dil düğmesi var. Telefonda 8px nefes
   payından sonra sığmıyor ve dil düğmesi sağdan kesiliyordu. Pencere adı zaten
   üst menü çubuğunda yazıyor; burada onu bırakıp kısayolları sağa yaslıyoruz. */
@media (max-width: 720px) {
  #app .tbar__title { display: none !important; }
  #app .tbar { gap: 8px !important; }
  #app .tbar__quick { margin-left: auto; min-width: 0; }
  #app .tbar__quick a { padding: 3px 7px !important; }
}

/* ============================================================================
   SON RÖTUŞLAR
   Login ölçüleri, About summary kontrolü, mobil terminal ve Files çekmecesi.
   Bu dosya append-override olduğu için blok en sonda.
   ============================================================================ */

/* --- 1. Mobilde sayfa yakınlaştırma kapalı ---------------------------------
   Meta viewport zaten user-scalable=no diyor; iOS Safari bunu yok sayabildiği
   için JS gesture engelleri + touch-action birlikte kullanılıyor. */
html,
body {
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- 2. Login: ölçülü buton, tek satır yazı ------------------------------- */
#login .login-btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  margin-top: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}
#login .login-btn span {
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}
/* The real login screen runs under body.pre-login, and its old rule forced a
   full-width 52px slab. Keep the pill, but make it compact and readable. */
body.pre-login #login .login-btn {
  width: auto !important;
  min-width: 164px !important;
  max-width: min(300px, 82vw) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 12px auto 0 !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
body.pre-login #login .login-btn span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
body.pre-login #login .login-btn i {
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
#login .login-btn:hover { transform: translateY(-1px) scale(1.03); }
#login .login-btn:active { transform: scale(.96); }
#login .login-guest {
  width: min(260px, 82vw);
  min-height: 42px;
  padding: 7px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 13px;
  font: 700 12px/1.25 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .01em;
  text-align: center;
}
#login .login-guest span { display: block; line-height: 1.2; }
#login .login-guest i {
  display: block;
  font-style: normal;
  font-size: 10px;
  line-height: 1.2;
  opacity: .6;
}
#login .login-status {
  letter-spacing: .12em;
  line-height: 1.35;
}
#login .login-lang { font-size: 11px; }


@media (max-width: 720px) {
  .ab3-meta { align-items: flex-start; }
}

/* --- 4. Mobil terminal: pencereyle aynı geometri -------------------------- */
@media (max-width: 720px) {
  #app.win.mobile {
    position: fixed !important;
    left: var(--win-gap, 8px) !important;
    right: var(--win-gap, 8px) !important;
    width: auto !important;
    max-width: none !important;
    top: calc(var(--mb-h, 26px) + var(--win-gap, 8px)) !important;
    height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 58px) - 2 * var(--win-gap, 8px)) !important;
    margin: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  #app .tbar { padding: 0 10px !important; }
  #app .screen { padding-left: 10px !important; padding-right: 10px !important; }
}

/* --- 5. Files mobil çekmecesi: tek kolon, tam genişlik kartlar ----------- */
@media (max-width: 780px) {
  .fxa .fxa-side {
    width: min(320px, 90vw) !important;
    align-items: stretch !important;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    border-radius: 0 18px 18px 0;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, var(--bg-2)), var(--bg-2)) !important;
  }
  .fxa-brand {
    flex: 0 0 auto !important;
    width: 100%;
    padding: 0 0 14px !important;
    gap: 10px !important;
  }
  .fxa-brand-ic {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
  .fxa-brand b { font-size: 1.02em !important; }
  .fxa-brand span { display: block !important; font-size: .68em !important; }
  .fxa-nav {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100%;
    gap: 3px !important;
    margin-bottom: 4px;
    overflow: visible !important;
  }
  .fxa-nav-item {
    flex: 0 0 auto !important;
    width: 100%;
    min-height: 40px;
    padding: 9px 11px !important;
    border-radius: 11px !important;
    font-size: .8em !important;
  }
  .fxa-nav-item em {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    font-size: .78em !important;
  }
  .fxa-folders { flex: 1 1 auto; width: 100%; padding-top: 4px; }
  .fxa-folders-head {
    padding: 6px 4px !important;
    font-size: .6em !important;
    letter-spacing: .12em;
  }
  .fxa-folder-link {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: .78em !important;
  }
  .fxa-store {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    padding: 10px 11px !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--fg) 5%, transparent) !important;
    border: 1px solid var(--line) !important;
  }
  .fxa-store-t { margin-bottom: 6px; }
  .fxa-store-hint { display: block !important; font-size: .6em !important; }
}


/* A send that was refused stays visible with a retry button instead of vanishing. */
.chat-time .t-fail { color: #e5484d; opacity: 1; font-weight: 700; }

/* ==========================================================================
   Settings → Open source & licenses
   A single disclosure at the bottom of System: quiet until opened, then a
   searchable catalogue with sticky category chips and an internal scroll.
   ========================================================================== */
.oss {
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%),
    var(--bg-2);
  overflow: hidden;
}
.oss > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.oss > summary::-webkit-details-marker { display: none; }
.oss > summary:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.oss > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.oss[open] > summary { border-bottom: 1px solid var(--line); }
.oss-sum-ic {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--chip));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
}
.oss-sum-ic svg, .oss-hero-ic svg { width: 21px; height: 21px; }
.oss-sum-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.oss-sum-tx b { font-size: .9em; letter-spacing: -.01em; }
.oss-sum-tx i { font-style: normal; font-size: .68em; color: var(--muted); line-height: 1.4; }
.oss-sum-meta {
  flex: none; white-space: nowrap;
  padding: 6px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--chip);
  color: var(--muted); font-size: .62em; font-weight: 700;
}
.oss-chev {
  flex: none; font-style: normal; color: var(--muted);
  transition: transform .18s ease; line-height: 1;
}
.oss[open] > summary > .oss-chev,
.oss-licbox[open] > summary > .oss-chev,
.oss-lic[open] > summary > .oss-chev { transform: rotate(180deg); }
.oss-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.oss-hero {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px; border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}
.oss-hero-ic {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center; border-radius: 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--chip));
}
.oss-hero-tx { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oss-hero-tx b { font-size: .9em; }
.oss-hero-tx span { font-size: .69em; color: var(--muted); line-height: 1.5; max-width: 66ch; }
.oss-stats { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.oss-stats span {
  min-width: 54px; padding: 7px 9px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--chip);
  display: flex; flex-direction: column; gap: 1px;
  font-size: .56em; color: var(--muted); text-align: center;
}
.oss-stats b { font-size: 1.55em; line-height: 1; color: var(--fg); }
.oss-toolbar { display: flex; flex-direction: column; gap: 8px; }
.oss-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg);
}
.oss-search:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.oss-search svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--muted); }
.oss-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: .75em; }
.oss-search input::placeholder { color: var(--muted); opacity: .8; }
.oss-search button {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--chip); color: var(--muted);
  cursor: pointer; font-size: .66em; line-height: 1;
}
.oss-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.oss-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--chip);
  color: var(--muted); font: inherit; font-size: .62em; font-weight: 700;
  cursor: pointer; transition: background .16s, color .16s, border-color .16s;
}
.oss-chip b { font-size: .9em; opacity: .8; font-weight: 800; }
.oss-chip:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.oss-chip.on { color: var(--fg); background: color-mix(in srgb, var(--accent) 16%, var(--chip)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.oss-list {
  max-height: 360px; overflow: auto; padding: 2px 6px 2px 2px;
  overscroll-behavior: contain; scrollbar-width: thin;
}
.oss-list::-webkit-scrollbar { width: 8px; }
.oss-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg) 18%, transparent); border-radius: 999px; }
.oss-visible { font-size: .58em; color: var(--muted); margin: 0 0 7px 2px; letter-spacing: .02em; }
.oss-visible b { color: var(--fg); }
.oss-group + .oss-group { margin-top: 13px; }
.oss-group-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px 2px;
  font-size: .6em; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.oss-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.oss-group-head b {
  flex: none; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--line);
  font-size: .95em; letter-spacing: 0; color: var(--muted);
}
.oss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px; }
.oss-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 11px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg);
  min-width: 0;
}
.oss-card:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.oss-card[hidden], .oss [hidden], .oss-group[hidden] { display: none !important; }
.oss-card-top { display: flex; align-items: flex-start; gap: 7px; }
.oss-card-top b { flex: 1; min-width: 0; font-size: .73em; line-height: 1.3; word-break: break-word; }
.oss-badge {
  flex: none; padding: 2px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--chip);
  font-size: .52em; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
.oss-badge--perm { color: color-mix(in srgb, #16a34a 62%, var(--fg)); background: color-mix(in srgb, #22c55e 12%, var(--chip)); border-color: color-mix(in srgb, #22c55e 32%, var(--line)); }
.oss-badge--copyleft { color: color-mix(in srgb, #d97706 62%, var(--fg)); background: color-mix(in srgb, #f59e0b 12%, var(--chip)); border-color: color-mix(in srgb, #f59e0b 32%, var(--line)); }
.oss-badge--apache { color: color-mix(in srgb, #2563eb 62%, var(--fg)); background: color-mix(in srgb, #3b82f6 12%, var(--chip)); border-color: color-mix(in srgb, #3b82f6 32%, var(--line)); }
.oss-badge--font { color: color-mix(in srgb, #9333ea 62%, var(--fg)); background: color-mix(in srgb, #a855f7 12%, var(--chip)); border-color: color-mix(in srgb, #a855f7 32%, var(--line)); }
.oss-badge--data { color: color-mix(in srgb, #0891b2 62%, var(--fg)); background: color-mix(in srgb, #06b6d4 12%, var(--chip)); border-color: color-mix(in srgb, #06b6d4 32%, var(--line)); }
.oss-badge--service { color: var(--muted); }
.oss-card-meta { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: .56em; color: var(--muted); }
.oss-v { flex: none; font-weight: 800; letter-spacing: .02em; }
.oss-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.oss-card p { margin: 0; font-size: .61em; line-height: 1.45; color: var(--muted); }
.oss-card-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; }
.oss-card-foot a, .oss-mini {
  font-size: .56em; font-weight: 800; text-decoration: none;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 3px 6px; background: var(--chip); color: var(--muted);
  cursor: pointer; font-family: inherit;
}
.oss-card-foot a:hover, .oss-mini:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.oss-card-foot a { margin-right: auto; }
.oss-empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: .7em; }
.oss-licbox { border: 1px solid var(--line); border-radius: 13px; background: var(--bg); overflow: hidden; }
.oss-licbox > summary, .oss-lic > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; user-select: none;
}
.oss-licbox > summary::-webkit-details-marker, .oss-lic > summary::-webkit-details-marker { display: none; }
.oss-licbox > summary:focus-visible, .oss-lic > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.oss-licbox > summary > span { font-size: .72em; font-weight: 800; }
.oss-licbox > summary > i:not(.oss-chev) { flex: 1; font-style: normal; font-size: .58em; color: var(--muted); }
.oss-licbox > summary > .oss-chev { margin-left: auto; }
.oss-licbox[open] > summary { border-bottom: 1px solid var(--line); }
.oss-lic-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.oss-lic { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.oss-lic > summary { padding: 8px 10px; }
.oss-lic > summary b { font-size: .66em; }
.oss-lic > summary span { flex: 1; font-size: .56em; color: var(--muted); }
.oss-lic-inner, .oss-lic-body > .oss-lic-body { padding: 0; }
.oss-lic[open] > .oss-lic-body { padding: 0 10px 10px; }
.oss-lic-copy { display: flex; flex-direction: column; gap: 4px; padding: 8px 9px; border-radius: 8px; background: var(--chip); }
.oss-lic-copy > div { display: flex; flex-wrap: wrap; gap: 3px 7px; font-size: .56em; line-height: 1.4; }
.oss-lic-copy b { color: var(--fg); font-weight: 800; }
.oss-lic-copy span { color: var(--muted); }
.oss-lic pre {
  margin: 7px 0 0; padding: 10px; max-height: 220px; overflow: auto;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg);
  color: var(--muted); font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .55em; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.oss-lic-note { margin: 7px 0 0; font-size: .58em; line-height: 1.5; color: var(--muted); }
.oss-lic-link { display: inline-block; margin-top: 7px; font-size: .58em; font-weight: 800; color: var(--accent); text-decoration: none; }
.oss-lic-link:hover { text-decoration: underline; }
.oss-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 12px; border-radius: 12px;
  border: 1px dashed var(--line); background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.oss-foot-tx { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oss-foot-tx b { font-size: .7em; }
.oss-foot-tx span { font-size: .59em; color: var(--muted); line-height: 1.4; }
.oss-foot .btnl { font-size: .62em; padding: 6px 9px; text-decoration: none; }
.oss-contact { font-size: .58em; color: var(--muted); text-align: center; }
.oss-contact a { color: var(--accent); }

@media (max-width: 720px) {
  .oss > summary { position: relative; align-items: flex-start; flex-wrap: wrap; gap: 9px; padding-right: 34px; }
  .oss > summary > .oss-chev { position: absolute; right: 14px; top: 15px; }
  .oss-sum-ic { width: 34px; height: 34px; flex-basis: 34px; }
  .oss-sum-meta { order: 3; margin-left: 0; }
  .oss-sum-tx { flex-basis: calc(100% - 52px); }
  .oss-body { padding: 12px; }
  .oss-stats { width: 100%; }
  .oss-stats span { flex: 1; }
  .oss-grid { grid-template-columns: 1fr; }
  .oss-list { max-height: 50vh; }
  .oss-foot { align-items: stretch; flex-direction: column; }
  .oss-foot .btnl { width: 100%; text-align: center; }
  .oss-card p { font-size: .65em; }
}
/* ==========================================================================
   TAYONE — warm, hand-built interface
   --------------------------------------------------------------------------
   Design notes (why it looks like this):
     * Warm, low-contrast dark surfaces instead of pure black: paper-toned
       browns, an amber primary and a muted mint secondary. No neon glows.
     * One accent per state. Colour is used to mean something (quake severity,
       air band, live event), never as decoration.
     * Rounded 18–22px cards with a 1px warm border and a soft shadow; dividers
       are dashed, not solid, so the eye reads sections as "pages" in a book.
     * The map is a hand-drawn SVG chart: graticule, coastline, bubbles.
     * Everything reflows at 760px; the tab bar is thumb-reachable on phones.
   ========================================================================== */

.win--tay {
  /* The bar height token is read here, on the WINDOW, where it resolves. */
  --tay-bar: var(--winbar-h, 30px);
  /* The base .win paints an OPAQUE --win-bg, which sat behind the whole app and
     made it look solid no matter what .tay did. Give just this window a light
     tint so the wallpaper shows through the rounded frame too.

     Opacity note: three tints stack here (.win, .tay, and the cards inside),
     and stacked alpha compounds — 0.58 over 0.62 is ~84% opaque, which still
     reads as a solid slab. This layer is therefore the thin one; most of the
     "frosting" comes from the blur, not from paint. */
  background: rgba(23, 19, 14, 0.30);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}
.win--tay .win__body {
  /* The window bar is absolutely positioned and the body must reserve its
     height with padding-top. When that padding collapsed to 0 the app slid up
     underneath the traffic lights ("üst bar uygulamayı ezmiş"). The token is
     re-declared on .win--tay because it does not resolve inside the body. */
  padding: var(--tay-bar, 30px) 0 0 !important;
  overflow: hidden;
  /* Opaque #17130e here was the reason the window was not transparent: the .tay
     root inside it was ALSO fully opaque, so the wallpaper never showed through.
     Both layers are now a translucent tint over the desktop. */
  background: transparent;
}
.win--tay .win__bar { z-index: 6; }
.win--tay .win__body::-webkit-scrollbar { width: 0; }

.tay {
  /* Glass rather than paint. The tint is dark enough that white text keeps its
     contrast over any wallpaper, and thin enough that the desktop reads
     through it. --t-card is a touch more opaque so cards stay legible when a
     bright photo sits behind them. */
  --t-bg: rgba(23, 19, 14, 0.34);
  --t-bg2: rgba(31, 26, 19, 0.72);
  --t-bg3: rgba(40, 33, 23, 0.78);
  --t-card: rgba(34, 28, 20, 0.46);
  --t-line: #3a3125;
  --t-line2: #4a4030;
  --t-fg: #f6eee0;
  --t-mid: #c3b6a2;
  --t-dim: #948772;
  --t-amber: #ffb457;
  --t-mint: #8fe0b0;
  --t-coral: #ff8a6b;
  --t-sky: #8ec5e8;
  --t-lilac: #c9a0dc;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  color: var(--t-fg);
  background:
    radial-gradient(900px 320px at 12% -8%, #ffb45714, transparent 68%),
    radial-gradient(700px 280px at 92% 0%, #8fe0b00e, transparent 66%),
    var(--t-bg);
  /* The blur is what makes the wallpaper read as "behind glass" instead of
     "a dark rectangle with a hint of colour". Cheap enough for one window;
     saturate keeps the warm photo tones from going grey. */
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  font-family: Satoshi, "Space Grotesk", var(--font-ui, system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */
.tay-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 10px;
  flex-wrap: wrap;
}
.tay-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tay-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(155deg, #ffc27a, #e08a3c);
  box-shadow: 0 6px 16px -8px #ffb45788, inset 0 1px 0 #fff4;
}
.tay-mark svg { width: 21px; height: 21px; fill: none; stroke: #2a1c0c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tay-brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.tay-brand-txt b { font-size: 16px; letter-spacing: -0.3px; }
.tay-brand-txt i { font-size: 10.5px; font-style: normal; color: var(--t-dim); letter-spacing: 0.2px; }

.tay-citybtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--t-line);
  background: #00000024;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.tay-citybtn:hover { border-color: #6b5942; background: #00000038; }
.tay-city-pin {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--t-amber);
  box-shadow: 0 0 0 4px #ffb45722;
}
.tay-city-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.tay-city-txt b { font-size: 13px; }
.tay-city-txt i { font-size: 10.5px; font-style: normal; color: var(--t-dim); }
.tay-city-caret { font-size: 12px; color: var(--t-dim); }

.tay-actions { display: flex; align-items: center; gap: 7px; margin-inline-start: auto; }
.tay-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--t-dim);
  white-space: nowrap;
}
.tay-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--t-mint); box-shadow: 0 0 0 3px #8fe0b022; }
.tay-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--t-line);
  background: #00000024;
  color: var(--t-fg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tay-icon-btn:hover { border-color: #6b5942; background: #2a2318; }
.tay-icon-btn:active { transform: scale(.96); }
.tay-icon-btn--w { border-color: #ffb45755; background: #ffb45714; }
.tay-icon-btn--w:hover { background: #ffb45726; border-color: var(--t-amber); }
.tay-icon-btn.spin { animation: taySpin .45s ease; }
@keyframes taySpin { to { rotate: 360deg; } }

/* ---------- tabs ---------- */
.tay-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px 10px;
  border-bottom: 1px solid #2a2318;
}
.tay-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.tay-tab:hover { color: var(--t-mid); background: #ffffff06; }
.tay-tab.on { color: #22180c; background: var(--t-amber); }
.tay-tab b {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 99px;
  background: #0000002e;
  color: inherit;
}
.tay-tab.on b { background: #00000022; }

/* ---------- body ---------- */
.tay-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 22px;
  scrollbar-width: thin;
  scrollbar-color: #4a4030 transparent;
}
.tay-body::-webkit-scrollbar { width: 9px; }
.tay-body::-webkit-scrollbar-thumb { background: #3a3125; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }

/* ---------- hero ---------- */
.tay-hero {
  position: relative;
  overflow: hidden;
  padding: 14px 16px 13px;
  border-radius: 20px;
  border: 1px solid var(--t-line);
  /* Translucent like the cards: an opaque gradient here painted a solid slab
     over the frosted window and cancelled the transparency. */
  background: linear-gradient(168deg, rgba(43, 35, 24, 0.72), rgba(29, 24, 17, 0.66));
  --tone: var(--t-amber);
}
.tay-hero--warn { --tone: #ffb457; }
.tay-hero--bad { --tone: var(--t-coral); }
.tay-hero-wash {
  position: absolute;
  inset: -60% -10% auto;
  height: 240px;
  background:
    radial-gradient(55% 100% at 16% 0%, #ffb4572e, transparent 70%),
    radial-gradient(45% 90% at 88% 6%, #8fe0b01f, transparent 72%);
  pointer-events: none;
}
.tay-hero-row, .tay-hero-main, .tay-hero-foot { position: relative; }
.tay-hero-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tay-risk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--tone);
  border: 1px solid #ffb45755;
  background: #ffb45712;
}
.tay-risk i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; animation: tayPulse 2.4s ease-out infinite; }
@keyframes tayPulse {
  0% { box-shadow: 0 0 0 0 #ffb45766; }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tay-calm-chip {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--t-dim);
  border: 1px dashed var(--t-line2);
}
.tay-ty-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding: 5px 11px;
  border-radius: 12px;
  border: 1px solid #ff8a6b66;
  background: #ff8a6b16;
  color: #ffd7c9;
  font: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.tay-ty-chip:hover { background: #ff8a6b26; }
.tay-ty-chip b { font-size: 12px; }
.tay-ty-chip i { font-size: 10.5px; font-style: normal; color: #ffb59c; }
.tay-ty-spin { display: inline-block; animation: taySpinSlow 6s linear infinite; }
@keyframes taySpinSlow { to { rotate: 360deg; } }

.tay-hero-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.tay-now { display: flex; align-items: center; gap: 12px; }
.tay-now-ic { font-size: 42px; line-height: 1; filter: drop-shadow(0 8px 14px #0007); }
.tay-now-num { display: flex; flex-direction: column; }
.tay-now-num b { font-size: clamp(40px, 6vw, 54px); font-weight: 800; letter-spacing: -2.4px; line-height: 0.92; }
.tay-now-num span { font-size: 12.5px; color: var(--t-mid); margin-top: 3px; }
.tay-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 58%; }
.tay-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 11px;
  color: var(--t-mid);
  background: #ffffff08;
  border: 1px solid #ffffff0d;
  white-space: nowrap;
}
.tay-chips b { color: var(--t-fg); font-weight: 700; }
.tay-wind { display: inline-block; font-size: 11px; color: var(--t-sky); }
.tay-hero-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #ffffff12;
  font-size: 10.5px;
  color: var(--t-dim);
  flex-wrap: wrap;
}
.tay-airdot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; margin-inline-end: 4px; vertical-align: 1px; }

/* ---------- cards ---------- */
.tay-card {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid var(--t-line);
  background: var(--t-card);
}
.tay-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tay-card-head b { font-size: 12.5px; letter-spacing: 0.1px; }
.tay-card-head > span { font-size: 10.5px; color: var(--t-dim); margin-inline-start: auto; }
.tay-link {
  margin-inline-start: auto;
  border: 0;
  background: none;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--t-amber);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.tay-link:hover { text-decoration: underline; }
.tay-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.tay-empty { font-size: 11.5px; color: var(--t-dim); padding: 6px 2px; }

/* 24h strip */
.tay-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(46px, 1fr); gap: 3px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.tay-hours::-webkit-scrollbar { display: none; }
.tay-hour { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 3px; border-radius: 10px; border: 1px solid transparent; }
.tay-hour.now { border-color: #ffb45744; background: #ffb45712; }
.tay-hour-t { font-size: 9.5px; color: var(--t-dim); }
.tay-hour-ic { font-size: 15px; line-height: 1; }
.tay-hour-deg { font-size: 12px; font-weight: 700; }
.tay-hour-bar { width: 4px; height: 30px; border-radius: 99px; background: #ffffff0d; display: flex; align-items: flex-end; overflow: hidden; }
.tay-hour-bar i { width: 100%; border-radius: 99px; background: linear-gradient(180deg, var(--t-sky), #5a8fbe); }

/* 7-day */
.tay-days { display: flex; flex-direction: column; gap: 1px; }
.tay-day { display: grid; grid-template-columns: 1fr 22px auto 34px; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 9px; }
.tay-day.today { background: #ffb4570f; }
.tay-day-l { font-size: 11.5px; font-weight: 600; }
.tay-day-ic { font-size: 14px; text-align: center; }
.tay-day-t { font-size: 11.5px; font-weight: 700; text-align: end; white-space: nowrap; }
.tay-day-t i { font-style: normal; font-weight: 500; color: var(--t-dim); margin-inline-start: 5px; }
.tay-day-p { font-size: 10px; color: var(--t-sky); text-align: end; }

/* air */
.tay-air { display: flex; align-items: center; gap: 12px; }
.tay-air-num {
  flex: 0 0 auto;
  width: 68px; height: 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--c, #8fe0b0) 45%, transparent);
  background: color-mix(in srgb, var(--c, #8fe0b0) 13%, transparent);
}
.tay-air-num b { font-size: 23px; font-weight: 800; color: var(--c, #8fe0b0); line-height: 1; }
.tay-air-num i { font-size: 8.5px; letter-spacing: 1.3px; font-style: normal; color: var(--t-dim); margin-top: 3px; }
.tay-air-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tay-airbar { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 6px; font-size: 10px; }
.tay-airbar span { color: var(--t-dim); }
.tay-airbar i { height: 4px; border-radius: 99px; background: #ffffff0f; overflow: hidden; }
.tay-airbar i b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8fe0b0, #ffd166, #ff8a6b); }
.tay-airbar em { font-style: normal; text-align: end; }
.tay-air-advice { margin: 9px 0 0; font-size: 11px; line-height: 1.5; color: var(--t-dim); }
.tay-official {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed #ffffff12;
}
.tay-official-ic { font-size: 16px; line-height: 1.2; }
.tay-official b { display: block; font-size: 11.5px; }
.tay-official i { font-size: 10.5px; font-style: normal; color: var(--t-dim); }

/* ---------- city announcements (belediye duyuruları) ---------- */
/* Replaces the "nearby events" card on the Today tab: the open question about
   a storm is "is work/school closed today", not "what gig is on". */
.tay-anno {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--t-line);
  background: #00000026;
}
.tay-anno--closed { border-color: #ff8a6b55; background: #ff8a6b14; }
.tay-anno--open { border-color: #8fe0b055; background: #8fe0b010; }
.tay-anno--unknown { border-style: dashed; }
.tay-anno-ic { font-size: 20px; line-height: 1; }
.tay-anno-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tay-anno-tx b { font-size: 13px; }
.tay-anno--closed .tay-anno-tx b { color: #ffb3a0; }
.tay-anno--open .tay-anno-tx b { color: var(--t-mint); }
.tay-anno-tx i { font-size: 10.5px; font-style: normal; color: var(--t-dim); }

.tay-anno-list { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #ffffff14; }
.tay-anno-row { display: flex; align-items: center; gap: 7px; font-size: 11px; min-width: 0; }
.tay-anno-row b { font-weight: 600; white-space: nowrap; }
.tay-anno-row span { color: var(--t-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tay-anno-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 99px; background: #6b5942; }
.tay-anno-row--closed .tay-anno-dot { background: var(--t-coral); }
.tay-anno-row--open .tay-anno-dot { background: var(--t-mint); }
.tay-anno-row--closed span { color: #ffb3a0; }

/* mini lists */
.tay-mini-quakes, .tay-mini-events { display: flex; flex-direction: column; gap: 4px; }
.tay-mini-q, .tay-mini-ev {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 7px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.tay-mini-q:hover, .tay-mini-ev:hover { background: #ffffff07; border-color: var(--t-line); }
.tay-mini-m {
  flex: 0 0 auto;
  width: 38px;
  padding: 4px 0;
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 36%, transparent);
}
.tay-mini-ic {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-size: 14px;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
.tay-mini-t { display: flex; flex-direction: column; min-width: 0; }
.tay-mini-t b { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tay-mini-t i { font-size: 10px; font-style: normal; color: var(--t-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- map ---------- */
.tay-map-wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr); gap: 12px; align-items: start; }
.tay-map-frame {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--t-line);
  background:
    radial-gradient(120% 90% at 50% 0%, #22303a, #161d22 70%);
  overflow: hidden;
}
.tp-map { display: block; width: 100%; height: auto; }
.tp-grid line { stroke: #ffffff0a; stroke-width: 1; }
.tp-land { fill: url(#tpLand); stroke: #6d5c43; stroke-width: 1.4; stroke-linejoin: round; }
.tp-glow { pointer-events: none; }
/* Every county gets a dot so the island reads as populated, not as a bare
   coastline with one pin on it. r=3 with a hairline reads at 100% zoom; the
   earlier 33% fill at r=2.6 was effectively invisible. */
.tp-city-mini { fill: #e8d9bf88; stroke: #22180c; stroke-width: 0.8; }
.tp-city-dot { fill: var(--t-amber); stroke: #22180c; stroke-width: 1.4; }
.tp-city-pulse { fill: #ffb45726; stroke: #ffb45766; stroke-width: 1; animation: tayPulseMap 2.6s ease-out infinite; }
@keyframes tayPulseMap {
  0% { r: 9; opacity: 0.9; }
  70% { r: 15; opacity: 0; }
  100% { r: 15; opacity: 0; }
}
.tp-city-lbl { fill: #ffe3bb; font-size: 16px; font-weight: 700; paint-order: stroke; stroke: #161d22; stroke-width: 3.5; }
.tp-quake { cursor: pointer; }
.tp-q-halo { fill: color-mix(in srgb, var(--c) 16%, transparent); opacity: 0.9; transition: opacity .15s ease; }
.tp-q-dot { fill: color-mix(in srgb, var(--c) 55%, transparent); stroke: var(--c); stroke-width: 1.6; }
.tp-quake:hover .tp-q-halo, .tp-quake.on .tp-q-halo { opacity: 1; fill: color-mix(in srgb, var(--c) 30%, transparent); }
.tp-quake.on .tp-q-dot { stroke-width: 2.6; }
.tp-q-t { fill: #fff; font-size: 12px; font-weight: 800; text-anchor: middle; pointer-events: none; }
.tp-quake:focus-visible .tp-q-dot { stroke: #fff; stroke-width: 3; }
/* Off-island quakes (Japan, the Philippines, the South China Sea) are context,
   not news: smaller, faded, labelled with where they actually were. */
.tp-quake.off .tp-q-dot { opacity: 0.42; }
.tp-quake.off .tp-q-halo { opacity: 0.35; }
.tp-quake.off .tp-q-t { opacity: 0.6; }
.tp-q-area {
  fill: #948772;
  font-size: 9px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0.85;
}
/* The eye of a typhoon that is outside the frame: a quiet marker + arrow. */
.tp-ty-off .tp-ty-eye { opacity: 0.7; }
.tp-ty-off .tp-ty-name { font-size: 10px; }
.tp-ty-line { fill: none; stroke: #ff8a6b; stroke-width: 2.2; stroke-dasharray: 7 5; stroke-linecap: round; opacity: 0.9; }
.tp-ty-cone { fill: none; stroke: #ff8a6b; stroke-linecap: round; opacity: 0.09; }
.tp-ty-pt { fill: #ff8a6b; opacity: 0.75; }
.tp-ty-ring { fill: #ff8a6b22; stroke: #ff8a6b88; stroke-width: 1.4; animation: tayTyRing 2.4s ease-out infinite; }
@keyframes tayTyRing { 0% { opacity: .9; } 70% { opacity: .35; } 100% { opacity: .9; } }
.tp-ty-eye { fill: #ff8a6b; stroke: #2a1208; stroke-width: 1.6; }
.tp-ty-spin { fill: #ffd7c9; opacity: 0.85; animation: tayTySpin 5s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tayTySpin { to { rotate: 360deg; } }
.tp-ty-name { fill: #ffd7c9; font-size: 15px; font-weight: 800; paint-order: stroke; stroke: #161d22; stroke-width: 3.5; }
.tp-ty-wind { fill: #ffb59c; font-size: 12px; paint-order: stroke; stroke: #161d22; stroke-width: 3; }
.tay-map-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 4px 0;
  font-size: 10px;
  color: var(--t-dim);
}
.tay-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg-q { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.lg-line { width: 16px; height: 0; border-top: 2px dashed #ff8a6b; display: inline-block; }
.tay-map-hint { margin: 4px 4px 2px; font-size: 10px; color: var(--t-dim); }

.tay-map-side { display: flex; flex-direction: column; gap: 10px; }
.tay-quake-card, .tay-ty-card {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--t-line);
  background: var(--t-card);
}
.tay-quake-head { display: flex; align-items: center; gap: 9px; }
.tay-quake-mag {
  flex: 0 0 auto;
  width: 44px;
  padding: 6px 0;
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
}
.tay-quake-head b { font-size: 12px; display: block; }
.tay-quake-head i { font-size: 10px; font-style: normal; color: var(--t-dim); }
.tay-quake-x {
  margin-inline-start: auto;
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 1px solid var(--t-line);
  background: transparent;
  color: var(--t-mid);
  cursor: pointer;
}
.tay-quake-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.tay-quake-grid div { padding: 7px; border-radius: 9px; background: #ffffff06; border: 1px solid #ffffff0a; }
.tay-quake-grid span { display: block; font-size: 9.5px; color: var(--t-dim); }
.tay-quake-grid b { font-size: 12.5px; }
.tay-map-empty {
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed var(--t-line2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tay-map-empty b { font-size: 12.5px; }
.tay-map-empty span { font-size: 10.5px; color: var(--t-dim); }

/* Clickable quake list under the empty state: a small map should still let you
   open a specific event without hunting for its bubble. */
.tay-qlist { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.tay-qrow {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #0000001f;
  color: inherit;
  font: inherit;
  font-size: 11px;
  text-align: start;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tay-qrow:hover { border-color: var(--t-line2); background: #00000033; }
.tay-qrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 99px; background: var(--c); }
.tay-qrow b { font-weight: 700; }
.tay-qrow span { flex: 1; color: var(--t-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tay-qrow em { font-style: normal; color: var(--t-dim); white-space: nowrap; }

/* Quake detail: where it was, and whether that is even in Taiwan. */
.tay-quake-tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0 0; }
.tay-qtag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: #ffffff0d;
  border: 1px solid var(--t-line);
  color: var(--t-mid);
}
.tay-qtag.on { color: var(--t-mint); border-color: #8fe0b055; background: #8fe0b012; }
.tay-qtag.off { color: var(--t-dim); border-style: dashed; }

.tay-ty-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.tay-ty-badge--red { background: #ff8a6b22; color: #ffb3a0; border: 1px solid #ff8a6b55; }
.tay-ty-badge--orange { background: #ffb45722; color: #ffd39a; border: 1px solid #ffb45755; }
.tay-ty-badge--green { background: #8fe0b022; color: #b7f0cd; border: 1px solid #8fe0b055; }
.tay-ty-head h3 { margin: 7px 0 2px; font-size: 16px; letter-spacing: -0.2px; }
.tay-ty-head p { margin: 0; font-size: 11px; color: var(--t-dim); }
.tay-ty-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 9px 0; }
.tay-ty-rows div { padding: 7px; border-radius: 9px; background: #ffffff06; border: 1px solid #ffffff0a; }
.tay-ty-rows span { display: block; font-size: 9.5px; color: var(--t-dim); }
.tay-ty-rows b { font-size: 12px; }
.tay-ty-card--calm { border-style: dashed; }
.tay-ty-card--calm h3 { margin: 0 0 4px; font-size: 13px; }
.tay-ty-card--calm p { margin: 0; font-size: 11px; color: var(--t-dim); line-height: 1.5; }

/* ---------- events ---------- */
.tay-ev-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.tay-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; border: 1px solid var(--t-line); background: #00000024; }
.tay-seg-b {
  border: 0;
  background: transparent;
  color: var(--t-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.tay-seg-b.on { background: #ffb457; color: #22180c; }
.tay-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--t-line);
  background: #00000024;
  color: var(--t-dim);
  flex: 1;
  min-width: 150px;
  max-width: 320px;
}
.tay-search:focus-within { border-color: var(--t-amber); }
.tay-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--t-fg); font: inherit; font-size: 12px; }
/* Çeviri düğmesi: arama kutusunun yanında, aynı yükseklikte tek satır.
   "Kapalı" hâli hedef dili söyler (Çevir · Türkçe), açıkken sadece dil adı +
   tik kalır, böylece metin uzunluğu dar ekranda zıplamaz. */
.tay-tr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid var(--t-line);
  background: #00000024;
  color: var(--t-dim);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.tay-tr-btn .tay-tr-ic { font-size: 13px; line-height: 1; }
.tay-tr-btn:hover { color: var(--t-fg); border-color: var(--t-amber); }
.tay-tr-btn.on { background: #ffb4571f; border-color: #ffb45766; color: #ffcf8a; }
.tay-tr-btn:disabled { cursor: progress; opacity: .8; }
.tay-tr-btn:focus-visible { outline: 2px solid var(--t-amber); outline-offset: 2px; }
.tay-ev-meta { margin-inline-start: auto; font-size: 10.5px; color: var(--t-dim); }

.tay-kinds { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; scrollbar-width: none; }
.tay-kinds::-webkit-scrollbar { display: none; }
.tay-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--t-line);
  background: transparent;
  color: var(--t-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.tay-kind:hover { color: var(--t-mid); border-color: var(--t-line2); }
.tay-kind.on { color: #22180c; background: #e8c79a; border-color: #e8c79a; }

.tay-ev-split { display: grid; grid-template-columns: minmax(0, 1fr) 0; gap: 12px; transition: grid-template-columns .18s ease; }
.tay-ev-split.has-open { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr); }
.tay-ev-list { min-width: 0; }
.tay-ev-group { margin-bottom: 10px; }
.tay-ev-ghead {
  position: sticky;
  top: -14px;
  z-index: 2;
  padding: 8px 2px 6px;
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--t-dim);
  background: linear-gradient(180deg, var(--t-bg) 62%, transparent);
}
.tay-live-pill { display: inline-flex; align-items: center; gap: 6px; color: #ffb3a0; }
.tay-live-pill i { width: 6px; height: 6px; border-radius: 99px; background: var(--t-coral); animation: tayPulse 1.8s ease-out infinite; }

.tay-ev {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  margin-bottom: 6px;
  border-radius: 14px;
  border: 1px solid var(--t-line);
  background: var(--t-card);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease, background .14s ease;
}
.tay-ev:hover { border-color: #6b5942; transform: translateY(-1px); }
.tay-ev.on { border-color: var(--t-amber); background: #2b2318; }
.tay-ev.live { box-shadow: inset 3px 0 0 var(--t-coral); }
.tay-ev-ic {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 17px;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
.tay-ev-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tay-ev-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; }
.tay-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tay-ev-live {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 99px;
  color: #ffb3a0;
  background: #ff8a6b1f;
  border: 1px solid #ff8a6b4d;
}
.tay-ev-sub { font-size: 10.5px; color: var(--t-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tay-ev-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 1px; }
.tay-ev-tags em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.tay-ev-tags i { font-style: normal; font-size: 9.5px; color: var(--t-mint); }
.tay-ev-go { flex: 0 0 auto; font-size: 17px; color: var(--t-dim); opacity: .55; }
.tay-ev-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 46px 14px; text-align: center; }
.tay-ev-empty span { font-size: 30px; }
.tay-ev-empty b { font-size: 13px; }
.tay-ev-empty i { font-size: 11px; font-style: normal; color: var(--t-dim); }

/* event detail */
.tay-ev-detail { min-width: 0; overflow: hidden; }
.tay-ev-detail.hidden { display: none; }
.tay-d {
  position: relative;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--t-line);
  background: linear-gradient(170deg, #2b2318, #1e1912);
  overflow: hidden;
}
.tay-d::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 160px;
  background: radial-gradient(55% 100% at 22% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.tay-d-x {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid var(--t-line);
  background: #00000038;
  color: var(--t-mid);
  cursor: pointer;
}
.tay-d-ic { position: relative; font-size: 28px; display: block; line-height: 1; }
.tay-d-kind {
  position: relative;
  display: block;
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--c);
}
.tay-d-kind em { font-style: normal; color: var(--t-coral); }
.tay-d h2 { position: relative; margin: 5px 0 7px; font-size: 17px; line-height: 1.25; letter-spacing: -0.3px; }
.tay-d p { position: relative; margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--t-mid); }
.tay-d-rows { position: relative; display: flex; flex-direction: column; }
.tay-d-rows > div { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #ffffff12; font-size: 11px; flex-wrap: wrap; align-items: baseline; }
.tay-d-rows > div > span { font-size: 13px; }
.tay-d-rows b { font-size: 11.5px; }
.tay-d-rows i { font-style: normal; font-size: 10px; color: var(--t-dim); width: 100%; }

.tay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid var(--t-line2);
  background: #ffffff08;
  color: var(--t-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tay-btn:hover { background: #ffffff12; border-color: #6b5942; }
.tay-btn--primary { background: var(--t-amber); border-color: var(--t-amber); color: #22180c; }
.tay-btn--primary:hover { filter: brightness(1.05); background: #ffc271; }
.tay-d-cta { width: 100%; margin-top: 12px; }

/* ---------- modal ---------- */
.tay-modal {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #000000a6;
  backdrop-filter: blur(7px);
  animation: tayFade .16s ease both;
}
@keyframes tayFade { from { opacity: 0; } to { opacity: 1; } }
.tay-modal-card {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 24px 20px 18px;
  border-radius: 20px;
  border: 1px solid var(--t-line, #3a3125);
  background: var(--t-bg2, #1f1a13);
  color: var(--t-fg, #f6eee0);
  box-shadow: 0 40px 90px -30px #000e;
  text-align: center;
  animation: tayModalIn .2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tayModalIn { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.tay-modal-x {
  position: absolute;
  top: 11px;
  inset-inline-end: 11px;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--t-line);
  background: transparent;
  color: var(--t-mid);
  cursor: pointer;
}
.tay-modal-ic {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  font-size: 22px;
  background: #ffb45718;
  border: 1px solid #ffb45744;
}
.tay-modal-card h3 { margin: 11px 0 5px; font-size: 18px; letter-spacing: -0.3px; }
.tay-modal-lead { margin: 0 auto; max-width: 330px; font-size: 12.5px; line-height: 1.6; color: var(--t-mid); }
.tay-modal-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; text-align: start; }
.tay-modal-list > div { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--t-line); background: #ffffff05; }
.tay-modal-list b { display: block; font-size: 11.5px; }
.tay-modal-list span { font-size: 10.5px; color: var(--t-dim); }
.tay-modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.tay-modal-actions .tay-btn { flex: 1; }
.tay-modal-foot { margin: 10px 0 0; font-size: 10px; color: var(--t-dim); }

/* ---------- skeleton / error ---------- */
.tay-skel { display: flex; flex-direction: column; gap: 12px; }
.tay-sk {
  height: 88px;
  border-radius: 18px;
  background: linear-gradient(90deg, #ffffff06, #ffffff10, #ffffff06);
  background-size: 200% 100%;
  animation: taySk 1.3s ease-in-out infinite;
}
.tay-sk--hero { height: 168px; }
.tay-sk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@keyframes taySk { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.tay-error { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; text-align: center; }
.tay-error b { font-size: 14px; }
.tay-error span { font-size: 11.5px; color: var(--t-dim); }

/* ---------- city sheet ---------- */
.tay-sheet-host { position: absolute; inset: 0; z-index: 70; }
.tay-sheet-host[hidden] { display: none; }
.tp-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #000000a3;
  backdrop-filter: blur(6px);
  animation: tayFade .15s ease both;
}
.tp-card {
  width: min(520px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--t-line, #3a3125);
  background: var(--t-bg2, #1f1a13);
  overflow: hidden;
  box-shadow: 0 30px 70px -20px #000c;
}
.tp-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--t-line); }
.tp-head b { display: block; font-size: 14px; }
.tp-head span { font-size: 10.5px; color: var(--t-dim); }
.tp-x {
  margin-inline-start: auto;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--t-line);
  background: transparent;
  color: var(--t-mid);
  cursor: pointer;
}
.tp-body { overflow: auto; padding: 8px 12px 14px; }
.tp-region { padding: 10px 4px 6px; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; color: var(--t-amber); }
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tp-city {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid var(--t-line);
  background: #ffffff04;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.tp-city:hover { border-color: var(--t-line2); background: #ffffff09; }
.tp-city.on { border-color: var(--t-amber); background: #ffb45718; }
.tp-zh { font-size: 14px; font-weight: 700; }
.tp-en { font-size: 10.5px; color: var(--t-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 860px) {
  .tay-map-wrap { grid-template-columns: 1fr; }
  .tay-ev-split, .tay-ev-split.has-open { grid-template-columns: 1fr; }
  .tay-ev-detail { position: fixed; inset: auto 0 0 0; z-index: 80; padding: 0 10px 10px; }
  .tay-ev-detail:not(.hidden) { display: block; }
  .tay-ev-detail .tay-d { border-radius: 18px 18px 14px 14px; box-shadow: 0 -20px 60px -20px #000; }
}
@media (max-width: 760px) {
  .tay { font-size: 13px; }
  .tay-top { padding: 10px 12px 8px; gap: 9px; }
  .tay-brand-txt i { display: none; }
  .tay-tabs { padding: 0 12px 8px; gap: 3px; }
  .tay-tab { padding: 7px 12px; font-size: 12px; }
  .tay-body { padding: 12px 12px 20px; }
  .tay-grid2 { grid-template-columns: 1fr; }
  .tay-chips { max-width: 100%; }
  .tay-now-ic { font-size: 36px; }
  .tay-icon-btn--w span { display: none; }
  .tay-icon-btn--w { padding: 0 9px; }
  .tay-ev-meta { display: none; }
  .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-sheet { align-items: flex-end; padding: 8px; }
  .tp-card { border-radius: 18px 18px 12px 12px; max-height: 88%; }
}
@media (max-width: 520px) {
  .tay-sync { display: none; }
  .tay-hero { padding: 12px 12px 11px; }
  .tay-hero-main { gap: 10px; }
  .tay-now-num b { font-size: 42px; }
  .tay-day { grid-template-columns: 1fr 20px auto; }
  .tay-day-p { display: none; }
  .tay-quake-grid { grid-template-columns: repeat(2, 1fr); }
  .tay-ty-rows { grid-template-columns: 1fr; }
  .tay-modal-actions { flex-direction: column; }
  .tay-ev-ic { width: 32px; height: 32px; font-size: 15px; }
  .tay-ev-tags i { display: none; }
  /* Dar ekranda çeviri düğmesi kendi satırını alır: arama kutusu küçülmez,
     dokunma hedefi tam genişlik olur. */
  .tay-tr-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tay *, .tp-*, .tay-modal, .tay-modal-card, .tp-sheet { animation: none !important; transition: none !important; }
}

/* ---- PDF penceresi: küçültme düğmesi yok -----------------------------------
   Sarı nokta pencereyi dock'a indiriyor. PDF uygulamasının dock'ta bir simgesi
   olmadığı için (uygulama listesinde yer almıyor, Dosyalar/masaüstü CV'sinden
   açılıyor) küçültülen pencereyi geri getirecek bir yol kalmıyordu. Kırmızı ve
   yeşil kalıyor; sarı burada yanıltıcı olduğu için kaldırıldı. */
#win-pdf .win__bar .wdots .wdot.wm,
#win-pdf .wdots .wdot.wm {
  display: none !important;
}

/* ============================================================================
   ABOUT: ÖZET GÖRÜNÜMÜ — .ab-sum (JS tarafındaki sumBody)
   ============================================================================
   Bu blok eksikti: app.js özet için .ab-sum / .ab-sum-* işaretlemesini
   üretiyordu ama bu sınıflar için tek bir kural yoktu. Sonuç, özetin ham metin
   yığınına dönüşmesi ve "Tam sürüm" düğmesinin çıplak yazı olarak görünmesiydi.
   Sadece bu dosyanın sonundaki sınıflar burada tanımlanıyor; ekran görüntüsü:
   .ab-sum-in içinde başlık, kurşun metin, iş satırları, ilkeler + stack ve
   alt eylem satırı. Renkler tema değişkenlerinden gelir.
   ============================================================================ */
#win-about.is-summed .win__body {
  background: radial-gradient(circle at 82% -12%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 46%);
}
.ab-sum {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 22px;
  align-items: start;
  min-height: 100%;
  padding: 0 0 26px;
}
/* Sol ray: dikey "THE SHORT VERSION" şeridi */
.ab-sum-rail {
  position: sticky;
  top: 0;
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding: 34px 0 10px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 45%, transparent);
}
.ab-sum-rail > span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-size: .52em;
  font-weight: 900;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
.ab-sum-in {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 32px 0 0;
}

/* ---- başlık ------------------------------------------------------------ */
.ab-sum-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.ab-sum-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .56em;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.ab-sum-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ab-sum-head h1 {
  margin: 6px 0 2px;
  font-size: 2em;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: var(--fg);
}
.ab-sum-role {
  margin: 0;
  font-size: .8em;
  font-weight: 700;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
}
.ab-sum-headright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

/* ---- Özet | Tam sürüm düğmesi ----------------------------------------- */
.ab-sum-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ab-sumbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--fg);
  font: inherit;
  font-size: .66em;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.ab-sumbtn:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  transform: translateY(-1px);
}
.ab-sumbtn:active { transform: none; }
.ab-sumbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ab-sumbtn-ic {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  width: 12px;
}
.ab-sumbtn-ic i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: width .18s ease;
}
.ab-sumbtn-ic i:nth-child(1) { width: 12px; }
.ab-sumbtn-ic i:nth-child(2) { width: 8px; }
.ab-sumbtn-ic i:nth-child(3) { width: 5px; }
/* Özet modunda ikon "geri açılıyor" gibi okunur: satırlar eşitlenir. */
.ab-sumbtn[aria-pressed="true"] .ab-sumbtn-ic i { width: 12px; }
.ab-sumbtn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--line) 80%, var(--muted));
}

/* ---- kurşun metin ------------------------------------------------------ */
.ab-sum-lead {
  margin: 0;
  max-width: 68ch;
  font-size: .92em;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: -.005em;
  color: color-mix(in srgb, var(--fg) 90%, transparent);
}

/* ---- iş satırları ------------------------------------------------------ */
.ab-sum-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.ab-sum-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: baseline;
  padding: 12px 12px 12px 8px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
  transition: background-color .16s ease;
}
.ab-sum-row:hover {
  background: color-mix(in srgb, var(--tint, var(--accent)) 8%, transparent);
}
.ab-sum-n {
  font-size: .62em;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--tint, var(--accent));
}
.ab-sum-row > b {
  font-size: .82em;
  letter-spacing: -.01em;
  color: var(--fg);
}
.ab-sum-row > em {
  font-style: normal;
  font-size: .62em;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--tint, var(--accent));
  background: color-mix(in srgb, var(--tint, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint, var(--accent)) 34%, transparent);
}
.ab-sum-row > p {
  grid-column: 2 / -1;
  margin: 0;
  font-size: .7em;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- ilkeler + stack --------------------------------------------------- */
.ab-sum-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px 28px;
}
.ab-sum-lbl {
  display: block;
  margin-bottom: 7px;
  font-size: .54em;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.ab-sum-cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ab-sum-cols li {
  font-size: .64em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  color: color-mix(in srgb, var(--fg) 88%, transparent);
}
.ab-sum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ab-sum-chips i {
  font-style: normal;
  font-size: .62em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  color: var(--muted);
}

/* ---- alt eylem satırı -------------------------------------------------- */
.ab-sum-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ab-sum-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- mobil ------------------------------------------------------------- */
@media (max-width: 900px) {
  .ab-sum { grid-template-columns: minmax(0, 1fr); }
  .ab-sum-rail { display: none; }
  .ab-sum-in { padding: 24px 22px 0; }
  .ab-sum-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ab-sum-in { padding: 20px 16px 0; }
  .ab-sum-head h1 { font-size: 1.7em; }
  .ab-sum-headright { align-items: flex-start; }
  .ab-sum-row {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 11px 6px;
  }
  .ab-sum-row > em {
    grid-column: 2;
    justify-self: start;
  }
  .ab-sum-row > p { grid-column: 2; }
  .ab-sum-acts .ab3-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================================
   LOGIN FOOTER, redone
   The old row squeezed three things (LANGUAGE label, the select, and the ↵
   enter hint) into one line 36px tall and then stopped 3px above the card
   edge, so the controls looked glued to the bottom of the card.
   Now the footer is a calm stack: one full-width, comfortably sized language
   picker, and the Enter hint underneath as quiet helper text. One divider on
   top, real breathing room below.
   ============================================================================ */
body.pre-login #login .login-foot,
#login .login-foot {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid color-mix(in srgb, var(--fg, #fff) 10%, transparent) !important;
}
body.pre-login #login .login-foot .login-lang,
#login .login-foot .login-lang {
  display: flex !important;
  justify-content: stretch !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}
#login .login-foot .login-lang > span {
  font-size: 9.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, var(--fg, #fff) 48%, transparent) !important;
  white-space: nowrap;
}
#login .login-foot .login-lang select {
  flex: 1 1 auto;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
}
#login .login-foot .login-keyhint {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  height: auto !important;
  font-size: 9.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, var(--fg, #fff) 38%, transparent) !important;
}
#login .login-foot .login-keyhint kbd {
  height: 17px !important;
  min-width: 17px !important;
  padding: 0 4px !important;
  font-size: 9px !important;
}
@media (max-width: 720px) {
  /* The card itself stops 14px above its edge; give the footer its own air. */
  body.pre-login #login .login-card,
  #login .login-card { padding-bottom: 18px !important; }
  #login .login-foot { margin-top: 18px !important; gap: 11px !important; }
  #login .login-foot .login-lang select { height: 40px !important; font-size: 13px !important; }
}

/* ============================================================================
   CHIRP ON A PHONE: a reading surface, not frosted glass
   Every `.win.mobile` is given `backdrop-filter: blur(30px)` and a translucent
   background. Chirp's own layers then go `background: transparent`, so on a
   phone the whole wall was one big blurred smear of the wallpaper with cards
   floating on top of it - the one app that could not be read.
   Chirp is a full-screen feed, so it gets an opaque surface on mobile. The
   slide-over library rail keeps its blur, which is what makes it read as a
   panel in front of the wall.
   ============================================================================ */
@media (max-width: 720px) {
  #win-chirp,
  #win-chirp.win.mobile,
  #win-chirp.app.win.mobile {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Opaque feed background (the desktop rule forces it transparent). */
  #win-chirp .win__body,
  #win-chirp .chirp-wrap,
  #win-chirp .chirp {
    background: var(--bg) !important;
  }
  /* Cards get a real surface instead of a see-through tint, and without the
     nested blur they no longer lose their borders. */
  #win-chirp .chirp-card {
    background: var(--bg-2, color-mix(in srgb, var(--bg) 88%, var(--fg))) !important;
  }
  /* The rail is the one place the wallpaper glass belongs. */
  #win-chirp .chirp-side {
    background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
    backdrop-filter: blur(24px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.15) !important;
  }
}

/* On a phone the cards and composer are content surfaces, not glass: solid
   fill, no backdrop blur, so text is crisp and borders stay visible. */
@media (max-width: 720px) {
  #win-chirp .chirp-card,
  #win-chirp .chirp-compose,
  #win-chirp .chirp-quickcompose {
    background: var(--bg-2, color-mix(in srgb, var(--bg) 88%, var(--fg))) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #win-chirp .chirp-card { border-color: color-mix(in srgb, var(--fg) 10%, transparent) !important; }
  /* The sticky bar sits on the feed, so it matches the feed exactly, no blur. */
  #win-chirp .chirp-bar {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================================================
   LOGIN — "Dil / Language" etiketi her durumda görünsün. Eski kurallar
   (26392 ve 27059) span'ı gizliyordu ya da mobilde aşağı kaydırıyordu.
   ============================================================================ */
#login .login-foot .login-lang > span,
body.pre-login #login .login-foot .login-lang > span,
body.pre-login #login .login-lang > span,
#login .login-lang > span {
  display: inline-block !important;
  position: static !important;
  order: -1 !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, var(--fg, #fff) 55%, transparent) !important;
  white-space: nowrap !important;
}

/* ---------- mobile: account screens (Market/Club/Chirp) under the title bar ----------
   `#windows .win.win--auth .win__body { padding: 0 !important }` gave the screen
   the whole sheet, so its own header started underneath the traffic lights and
   the app title - which is exactly the "content glued to the bar" look on a
   phone. On mobile the bar is drawn over the sheet, so reserve its height.
   Desktop keeps the borderless full-bleed look. */
@media (max-width: 720px) {
  #windows .win.mobile.win--auth .win__body {
    padding: var(--winbar-h, 46px) 0 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
  /* The title bar over a translucent screen needs a readable backdrop. */
  #windows .win.mobile .win__bar {
    background: color-mix(in srgb, var(--win-bg, var(--bg)) 88%, transparent);
    backdrop-filter: blur(12px);
  }
}

/* ============================================================================
   MOBİL TUR + CHIRP DÜZELTİR — tek kaynak, dosyanın en sonunda
   ----------------------------------------------------------------------------
   1) CHIRP (telefon): duvar okunmuyordu. pencere ve kartlar bir tur zaten
      opak yapılmıştı ama `stories` ve `atmo` şeritleri
      `backdrop-filter: blur(16px)` ile kalmıştı; telefonda bu, arkasındaki
      HER ŞEYİ sisli gösteriyordu. Burada şeritler de düz zemine iniyor.
   2) TUR (telefon): kart artık alt sayfa (bottom sheet) gibi oturuyor:
      dock'un üstünde kalır, kendi içinde kayar, başlık/gövde/butonlar
      hizalanır. Adımlama düğmeleri tek bir ritmi paylaşır.
   ============================================================================ */
@media (max-width: 720px) {
  /* ---- 1. Chirp: cam değil, okuma yüzeyi -------------------------------- */
  #win-chirp .chirp-main,
  #win-chirp .chirp-stories,
  #win-chirp .chirp-atmo,
  #win-chirp .chirp-card,
  #win-chirp .chirp-compose,
  #win-chirp .chirp-quickcompose,
  #win-chirp .chirp-prompt {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Şeritler kendi zeminini taşır: yurdu yoksa cam görünümündeki kenarlık
     havada kalıyordu. */
  #win-chirp .chirp-stories {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--fg) 9%, transparent) !important;
  }
  #win-chirp .chirp-atmo {
    border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent) !important;
    border-radius: 12px !important;
  }
  /* Fotoğraf çerçevesi ve kart yüzeyi ayrışsın, kenarlıklar kaybolmasın. */
  #win-chirp .chirp-card {
    border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent) !important;
    box-shadow: 0 10px 26px -22px #000 !important;
  }
  #win-chirp .chirp-card:hover { transform: none; }
  #win-chirp .chirp-frame,
  #win-chirp .chirp-photo { background: #0b0d12 !important; }
  /* Yatay kaydırılan şeritler dokunmakla kayarken sayfayı da sürüklemesin. */
  #win-chirp .chirp-stories { overscroll-behavior-x: contain; }

  /* ---- 2. Tur kartı: gerçek alt sayfa ---------------------------------- */
  .tut-layer {
    /* Alt sayfanın ekran kenarından boşluğu ve dock ile arasındaki nefes tek
       yerde. --tut-dock JS'ten ölçülür (ikon boyu, safe-area, sarma), sabit
       --dock-h değeri bu cihazda dock'un altına kadar yetmiyordu. */
    --tut-edge: 10px;
    --tut-gap: 8px;
    --tut-bottom: calc(var(--tut-edge) + var(--tut-dock, 72px) + var(--tut-gap));
    --tut-top: calc(var(--tut-bar, 60px) + 6px);
  }
  .tut-card {
    left: var(--tut-edge) !important;
    right: var(--tut-edge) !important;
    width: auto !important;
    max-width: none !important;
    bottom: var(--tut-bottom) !important;
    padding: 14px 15px 12px !important;
    border-radius: 20px !important;
    /* Kart asla üst bardan aşağıda başlamaz ve dock'a dokunmaz. */
    max-height: calc(100dvh - var(--tut-bottom) - var(--tut-top)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }
  /* Başlık satırı kart içinde kalır: gövde kayarken adım sayacı ve ✕
     görünür durur, yoksa uzun metinde kapatma düğmesi kayboluyordu. */
  .tut-top {
    position: sticky;
    top: -14px;
    z-index: 1;
    margin: -2px -3px 2px !important;
    padding: 2px 3px 6px;
    background: color-mix(in srgb, var(--bg-2) 97%, transparent);
  }
  .tut-step { font-size: 0.62em !important; letter-spacing: 0.09em !important; }
  .tut-x {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 16px;
    margin: -6px -6px -6px 0;
  }
  .tut-title-row { gap: 10px !important; align-items: center !important; margin-top: 0 !important; }
  .tut-mascot { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; }
  .tut-heading { flex: 1 1 auto; min-width: 0; }
  .tut-title { font-size: 15px !important; line-height: 1.22 !important; overflow-wrap: break-word; }
  .tut-byline { font-size: 8px !important; letter-spacing: 0.1em !important; }
  .tut-body {
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    color: color-mix(in srgb, var(--fg) 92%, transparent) !important;
  }
  /* Eylem satırı: birincil buton tam genişlik, "geri" yarım, "atla/tekrar"
     kendi satırında sakin bir bağlantı. Önceki üç kural bunu farklı farklı
     diziyordu (biri 2 sütun, biri flex-wrap). */
  .tut-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .tut-actions .tut-demo,
  .tut-actions .btnl--primary { grid-column: 1 / -1; order: -1; margin-left: 0 !important; height: 46px; font-size: 13.5px; }
  .tut-actions > .btnl:not(.btnl--primary):not(.tut-demo) { height: 42px; font-size: 12.5px; }
  /* Tek başına kalan düğme (ör. yalnızca "geri") yarım sütunda kalmasın. */
  .tut-actions > .btnl:only-of-type { grid-column: 1 / -1; }
  .tut-skip,
  .tut-again {
    grid-column: 1 / -1;
    justify-self: center;
    min-height: 34px;
    padding: 4px 10px;
    font-size: 11.5px !important;
    border-radius: 999px;
  }
  .tut-again { color: var(--accent); font-weight: 700; }
  .tut-try { margin-top: 10px !important; font-size: 12px !important; }
  /* Spotlight halkası telefonda daha ince: kalın çerçeve dock'u boğuyordu. */
  .tut-hole { outline-width: 1.5px; outline-offset: 1px; }
}
/* Çok küçük telefonlar (iPhone SE): başlığı ve metni bir tık küçült ki
   birincil buton ilk ekranda kalsın. Yükseklik sınırı yukarıdaki
   hesaptan gelir; burada tekrar edilmez. */
@media (max-width: 380px) {
  .tut-card { padding: 12px 13px 10px !important; }
  .tut-title { font-size: 14px !important; }
  .tut-body { font-size: 12.5px !important; line-height: 1.45 !important; }
  .tut-actions .btnl--primary { height: 44px; }
}

/* ============================================================================
   MOBILE WINDOW SHEET — one geometry, no gutters
   Two things were wrong on every phone screenshot:
   1. The sheet is offset by --win-gap on all sides, so the wallpaper showed in
      every gutter — the "empty space above the app" (worst right under the menu
      bar). A phone sheet is full width now; the menu bar owns the top edge and
      the dock owns the bottom, nothing else.
   2. The sheet was transparent end-to-end, so the wallpaper bled through the
      side strips and under the rounded corners.
   ========================================================================== */
@media (max-width: 720px) {
  .win.mobile {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    top: var(--mb-h, 26px) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--win-bg, var(--bg)) !important;
    height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 52px)) !important;
    max-height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 52px)) !important;
  }
  /* The title bar stays visible (dots + app name) but is part of the sheet. */
  .win.mobile .win__bar { border-radius: 0 !important; }

  /* ---------- Market on a phone ---------- */
  /* The search row was `position: sticky; top: 0` INSIDE `.as-main`, while the
     rail above it was sticky too. On iOS this double-sticky made the search
     box float over the content and never scroll away: it looked huge and
     "stuck". The search row is a normal, non-sticky element now; the rail is
     the only sticky strip. */
  #win-market .as-top,
  .appstore .as-top {
    position: static !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border-bottom: 0 !important;
    flex: none !important;
  }
  #win-market .as-search,
  .appstore .as-search {
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  }
  #win-market .as-search input,
  .appstore .as-search input { font-size: 15px; }
  #win-market .as-main,
  .appstore .as-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* The closed drawer is `position: absolute; left: 0` inside .as-main and
       translated off screen. It needs a positioned ancestor that clips it,
       otherwise the off-screen strip shows as a ghost column on the left and
       every card reads shifted sideways (and its own rounded corner makes a
       "cut" on the left edge). */
    position: relative;
    isolation: isolate;
  }
  /* The rail itself is the drawer: fully opaque so the cards behind it can
     never bleed through while it is closed. */
  #win-market .as-rail,
  .appstore .as-rail {
    background: var(--bg) !important;
    box-shadow: none;
  }
  .appstore.side-closed .as-rail { box-shadow: none; visibility: hidden; }
  .appstore:not(.side-closed) .as-rail { visibility: visible; box-shadow: 24px 0 50px -20px #000c; }
  #win-market .as-body,
  .appstore .as-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 12px 28px !important;
  }
  /* The rail is a compact tab strip, not a block that eats the top of the
     screen. It only scrolls sideways. */
  #win-market .as-rail,
  .appstore .as-rail {
    flex: none;
    max-height: 48px;
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  #win-market .as-navitem,
  .appstore .as-navitem { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
  /* Drawer: closed by default on a phone, slid fully off screen, and the page
     behind it never scrolls while it is open. */
  .appstore.side-closed .as-rail { display: flex !important; pointer-events: none; }
  .appstore:not(.side-closed) .as-rail { pointer-events: auto; }
  html.mk-drawer-open, html.mk-drawer-open body { overflow: hidden; }
}

/* Market: the big hero card repeated the "Market" brand that the window title
   already shows. On a phone it is condensed so the first app row is visible in
   the first screenful. */
@media (max-width: 720px) {
  #win-market .mk-welcome,
  #win-market .as-welcome {
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  #win-market .asw-copy h1,
  #win-market .mk-welcome h1 { font-size: 21px !important; line-height: 1.2 !important; }
  #win-market .asw-copy p { font-size: 12.5px !important; }
}

/* ============================================================================
   CHIRP (telefon) — KÖK NEDEN: panel perdesi duvarın üstünde kalıyordu
   ----------------------------------------------------------------------------
   `#chirp-overlay` (yan panel açılınca arkasını karartan katman) mobilde
   `position: absolute; inset: 0` ile TÜM topluğun üstüne yayılıyor. Panel
   kapalıyken gizlenmesi gerekiyordu ama `#win-chirp .chirp-overlay` (1 id +
   1 sınıf) `.chirp.side-closed .chirp-overlay` (2 sınıf) kuralını eziyordu.
   Sonuç: perde görünmeden ekranda kalıyor, `backdrop-filter: blur(2px)` ve
   %55 koyu dolgu ile duvarın tamamı bulanık ve okunamaz duruyordu.
   Burada perde yalnızca panel AÇIKKEN görünüyor ve blur'u kalkıyor.
   ============================================================================ */
@media (max-width: 720px) {
  #win-chirp .chirp-overlay,
  #win-chirp .chirp .chirp-overlay,
  .chirp .chirp-overlay {
    display: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Panel açıkken perde kalksın (dokunarak kapatma kalsın) ama yazıyı
     bulanıklaştırmasın: hafif bir karartma yeter. */
  #win-chirp .chirp:not(.side-closed) .chirp-overlay,
  .chirp:not(.side-closed) .chirp-overlay {
    display: block !important;
    background: rgba(6, 9, 16, 0.42) !important;
  }
}

/* ============================================================================
   MOBILE SETTINGS PARITY (market/chirp/etc.)
   Desktop keeps the floating sheet with a gap; a phone gets ONE scroll
   container per screen, a closed drawer that is really gone, and no
   see-through double surfaces that show the content twice.
   ========================================================================== */
@media (max-width: 720px) {
  /* Two nested scrollers (window body + .as-body) made content lag behind the
     finger and left "ghost" text stuck in the middle of the screen while the
     rest scrolled. The window itself scrolls; the inner pane does not. */
  .win.mobile .win__body { overflow: hidden !important; }
  #win-market .as-body,
  .appstore .as-body {
    overflow: visible !important;
    flex: none !important;
    min-height: 0 !important;
  }
  #win-market .as-main,
  .appstore .as-main { overflow: visible !important; display: block !important; }

  /* The closed rail is a drawer: remove it from layout and hit-testing
     entirely. It used to be translated off screen but still painted a ghost
     column along the left edge of every card. */
  .appstore.side-closed .as-rail {
    display: none !important;
  }
  .appstore:not(.side-closed) .as-rail {
    display: flex !important;
    position: absolute !important;
    left: 0; top: 0; bottom: auto; padding-top: 14px;
    max-height: calc(100% - 20px) !important;
    z-index: 40;
  }
  /* A drawer that is closed must not leave its veil over the page. */
  .as-veil[hidden] { display: none !important; }
}

/* ---- Chirp: kareler şeridi telefonda tek sütuna düşmesin -----------------
   `#win-chirp .chirp-stories { display: flex }` kuralı bir noktada
   `display`i başka bir kuraldan alıyor ve tek "kare ekle" düğmesi şeridin
   tamamını kaplayan 350px'lik bir kutuya dönüşüyordu. Şerit her zaman
   yatay bir sıra, kareler sabit genişlikte. */
@media (max-width: 720px) {
  #win-chirp .chirp-stories,
  #win-chirp .chirp-stories[class] {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 2px 10px !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  #win-chirp .chirp-story {
    flex: 0 0 68px !important;
    width: 68px !important;
    align-self: flex-start !important;
  }
  #win-chirp .chirp-story-ring {
    width: 52px !important;
    height: 52px !important;
  }
  /* Boş duvar: illüstrasyon yarı boy, metin ve düğmeler okunur boyutta. */
  #win-chirp .chirp-empty { padding: 18px 14px !important; }
  #win-chirp .chirp-empty-art { transform: scale(0.72); transform-origin: center top; margin-bottom: -14px; }
  #win-chirp .chirp-empty b,
  #win-chirp .chirp-empty strong { font-size: 16px !important; line-height: 1.3 !important; }
  #win-chirp .chirp-empty p { font-size: 12.5px !important; line-height: 1.45 !important; max-width: 30ch; margin-inline: auto; }
  #win-chirp .chirp-empty-chips { gap: 8px !important; flex-wrap: wrap; justify-content: center; }
}

/* Kareler şeridi bir "kart" değil, kayan bir şerit: eski cam bloğundan kalan
   kenarlık ve dolgu telefonda boş bir kutu gibi görünüyordu. */
@media (max-width: 720px) {
  #win-chirp .chirp-stories {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ============================================================================
   LOCK SCREEN — a clean, modern sign-in card
   The old card was a tall, near-black slab: heavy fill, a small avatar lost in
   the middle, a wide low-contrast button and a full-width language select at
   the bottom. It read as "form bolted to a wallpaper" rather than a lock
   screen. This is the same markup with a calmer hierarchy:
     • a tighter card (narrower, softer glass, one accent ring)
     • a bigger avatar that is clearly the identity
     • one decisive primary button, and a quiet secondary
     • the language switcher shrinks to a compact pill in the footer
   All of it is scoped to #login so app windows are untouched.
   ========================================================================== */
#login .login-card {
  width: min(340px, 86vw);
  min-width: 0;
  padding: 30px 26px 18px;
  gap: 8px;
  border-radius: 26px;
  background: color-mix(in srgb, var(--bg, #14101c) 58%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 40px 90px -30px #000e,
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
}
body.pre-login #login .login-brandline {
  width: 100%;
  /* The badge is gone from the markup, so the wordmark is the only thing on the
     line: centre it over the avatar instead of pinning it to the left edge. */
  justify-content: center;
  margin-bottom: 6px;
}
body.pre-login #login .login-logo { font-size: 22px; letter-spacing: 0; }
#login .login-badge {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #7aa2c8) 22%, transparent);
  color: #eaf2fb;
}
/* The subtitle repeated "personal desktop" under "locked": keep only one line
   of context so the eye lands on the avatar. */
#login .login-sub { display: none; }
body.pre-login #login .login-orb {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 6px 0 4px;
  display: grid;
  place-items: center;
}
body.pre-login #login .login-avatar {
  width: 84px;
  height: 84px;
  font-size: 30px;
  border-radius: 50%;
  margin: 0;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #7aa2c8) 55%, transparent),
    0 18px 34px -14px #000c;
}
body.pre-login #login .login-orb-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent, #7aa2c8) 35%, transparent);
  animation: lockRing 3.6s ease-in-out infinite;
}
body.pre-login #login .login-orb-ring.d2 { inset: -12px; opacity: .45; animation-delay: -1.8s; }
@keyframes lockRing { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.04); opacity: .2; } }
body.pre-login #login .login-name {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
body.pre-login #login .login-status {
  font-size: 12px;
  color: color-mix(in srgb, #dbe7f3 72%, transparent);
  min-height: 16px;
}
body.pre-login #login .login-pass { width: 100%; }
body.pre-login #login .login-pass-input {
  width: 100%;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.08em;
}
body.pre-login #login .login-btn {
  width: 100%;
  height: 46px;
  margin-top: 8px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent, #7aa2c8) 92%, #fff),
    color-mix(in srgb, var(--accent, #7aa2c8) 78%, #000));
  color: #0b0f14;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent, #7aa2c8) 70%, transparent);
  transition: transform .15s ease, filter .15s ease;
}
body.pre-login #login .login-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
body.pre-login #login .login-btn:active { transform: translateY(0) scale(.99); }
body.pre-login #login .login-guest {
  width: 100%;
  margin-top: 2px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: color-mix(in srgb, #e6eef7 78%, transparent);
  font-size: 12.5px;
}
body.pre-login #login .login-foot {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
}
body.pre-login #login .login-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  width: auto;
}
body.pre-login #login .login-lang label span, body.pre-login #login .login-lang > span { display: none; }
#login #login-lang {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 12px;
  padding: 0 2px;
}
@media (max-width: 720px) {
  #login .login-card { padding: 26px 20px 14px; border-radius: 24px; }
  body.pre-login #login .login-orb { width: 80px; height: 80px; }
  body.pre-login #login .login-avatar { width: 74px; height: 74px; font-size: 26px; }
}

/* ---- lock screen refinement, final pass (beats the !important block above) --
   Higher specificity + !important so these win over the older "settle" block.
   Goal: a calmer card, a round avatar with one accent ring, one clear primary
   button, and a compact language pill instead of a full-width select. */
#login.login .login-card {
  width: min(336px, calc(100vw - 40px)) !important;
  max-width: min(336px, calc(100vw - 40px)) !important;
  padding: 26px 22px 16px !important;
  gap: 0 !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background:
    radial-gradient(130% 62% at 50% -10%, color-mix(in srgb, var(--accent, #7aa2c8) 22%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(26, 28, 37, .72), rgba(13, 14, 19, .78)) !important;
  box-shadow:
    0 40px 90px -34px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(30px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.25) !important;
  max-height: none !important;
  overflow: visible !important;
}
body.pre-login #login .login-brandline { justify-content: center !important; gap: 8px !important; }
body.pre-login #login .login-logo { font-size: 1.55em !important; letter-spacing: -.02em !important; }
#login.login .login-badge {
  display: inline-flex !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent, #7aa2c8) 26%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #7aa2c8) 40%, transparent) !important;
  color: #eef5fc !important;
}
/* The tagline was a second line of context that made the card feel busy. */
#login.login .login-sub { display: none !important; }
body.pre-login #login .login-orb {
  width: 92px !important; height: 92px !important;
  margin: 14px auto 6px !important;
}
body.pre-login #login .login-avatar {
  width: 84px !important; height: 84px !important;
  border-radius: 50% !important;
  font-size: 28px !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #7aa2c8) 60%, transparent),
    0 16px 30px -14px #000d !important;
}
body.pre-login #login .login-orb-ring {
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 1px solid color-mix(in srgb, var(--accent, #7aa2c8) 38%, transparent) !important;
  pointer-events: none;
}
body.pre-login #login .login-name { margin-top: 6px !important; font-size: 18px !important; font-weight: 750 !important; }
body.pre-login #login .login-status { margin-top: 2px !important; font-size: 11.5px !important; color: rgba(255,255,255,.55) !important; }
body.pre-login #login .login-btn {
  width: 100% !important;
  height: 44px !important;
  margin-top: 14px !important;
  border-radius: 14px !important;
  font-size: 14.5px !important;
  font-weight: 750 !important;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--accent, #7aa2c8) 95%, #fff),
    color-mix(in srgb, var(--accent, #7aa2c8) 80%, #000)) !important;
  color: #0b0f14 !important;
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--accent, #7aa2c8) 80%, transparent) !important;
}
body.pre-login #login .login-pass-input {
  width: 100% !important;
  height: 42px !important;
  margin-top: 10px !important;
  border-radius: 13px !important;
  font-size: 14.5px !important;
  letter-spacing: .08em !important;
}
body.pre-login #login .login-foot {
  width: 100% !important;
  margin-top: 14px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  justify-content: center !important;
}
body.pre-login #login .login-lang {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
body.pre-login #login .login-lang > span { display: none !important; }
#login.login #login-lang {
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 12px !important;
}
body.pre-login #login .login-hint { margin-top: 8px !important; font-size: 10.5px !important; opacity: .5 !important; }

/* Lock screen: the final, highest-specificity pass. The earlier "settle" block
   uses `body.pre-login #login .login-card-wrap > .login-card` (0,3,2) with
   !important on every property, so plain `#login.login .login-card` lost. These
   selectors match that weight exactly and come last, which is what finally
   makes the compact card, the round avatar and the small language pill win. */
body.pre-login #login .login-card-wrap > .login-card,
body.pre-login #login .login-card {
  width: min(336px, calc(100vw - 40px)) !important;
  max-width: min(336px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 120px) !important;
  padding: 26px 22px 16px !important;
  gap: 0 !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background:
    radial-gradient(130% 60% at 50% -8%, color-mix(in srgb, var(--accent, #7aa2c8) 24%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(26, 28, 37, .74), rgba(13, 14, 19, .80)) !important;
  box-shadow:
    0 40px 90px -34px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  overflow: auto !important;
}
body.pre-login #login .login-sub { display: none !important; }
body.pre-login #login .login-orb { width: 92px !important; height: 92px !important; margin: 12px auto 4px !important; }
body.pre-login #login .login-avatar {
  width: 84px !important; height: 84px !important;
  border-radius: 50% !important;
  font-size: 28px !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #7aa2c8) 60%, transparent), 0 16px 30px -14px #000d !important;
}
body.pre-login #login .login-orb-ring {
  inset: -6px !important;
  border-radius: 50% !important;
  opacity: .5 !important;
}
body.pre-login #login .login-name { margin-top: 8px !important; font-size: 18px !important; }
body.pre-login #login .login-btn {
  width: 100% !important;
  height: 44px !important;
  margin-top: 14px !important;
  border-radius: 14px !important;
  font-size: 14.5px !important;
}
body.pre-login #login .login-foot { margin-top: 14px !important; padding-top: 0 !important; border-top: 0 !important; }
body.pre-login #login .login-lang {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
}
body.pre-login #login .login-lang > span { display: none !important; }
body.pre-login #login #login-lang { width: auto !important; background: transparent !important; border: 0 !important; font-size: 12px !important; }

/* ============================================================================
   FINAL UX PASS — 2026-10-24
   Small, deliberately-scoped fixes for the reported UI defects. These rules
   come last so they win without rewriting the older layers above.
   ========================================================================== */

/* ---------- About: summary control + no rail ------------------------------ */
.ab-sum {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}
.ab-sum-rail { display: none !important; }
.ab-sum-in {
  padding: 28px clamp(20px, 4vw, 42px) 0 !important;
  gap: 20px !important;
}
.ab-sum-head { gap: 18px 26px !important; }
/* The old control was a 6px-tall pill that disappeared into the metadata line.
   This keeps the same quiet language but gives it a real touch target. */
.ab-sumbtn {
  min-height: 38px;
  padding: 9px 16px 9px 13px !important;
  gap: 9px !important;
  font-size: .78em !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}
.ab-sumbtn:hover { transform: translateY(-1px); }
.ab-sumbtn-ic { width: 15px !important; gap: 2.5px !important; }
.ab-sumbtn-ic i { height: 2.5px !important; }
.ab-sumbtn-ic i:nth-child(1) { width: 15px !important; }
.ab-sumbtn-ic i:nth-child(2) { width: 11px !important; }
.ab-sumbtn-ic i:nth-child(3) { width: 7px !important; }
.ab3-meta .ab-sum-ctl { margin-left: auto; }
@media (max-width: 520px) {
  .ab-sumbtn { min-height: 40px; font-size: .82em !important; }
  .ab3-meta .ab-sum-ctl { margin-left: 0; }
}

/* ---------- Lock screen: compact, centred language pill ------------------ */
body.pre-login #login .login-foot,
body.pre-login #login .login-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 34px;
}
body.pre-login #login .login-foot .login-lang,
body.pre-login #login .login-foot .login-lang,
body.pre-login #login .login-lang,
body.pre-login #login .login-lang {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 180px !important;
  height: 34px !important;
  margin: 0 auto !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .065) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden;
}
body.pre-login #login .login-foot .login-lang::before,
body.pre-login #login .login-foot .login-lang::before {
  content: "🌐";
  flex: none;
  font-size: 11px;
  line-height: 1;
  opacity: .8;
}
body.pre-login #login .login-foot .login-lang::after,
body.pre-login #login .login-foot .login-lang::after {
  content: "⌄";
  flex: none;
  margin-left: -4px;
  font-size: 11px;
  line-height: 1;
  color: rgba(255,255,255,.55);
  pointer-events: none;
}
body.pre-login #login .login-foot .login-lang select,
body.pre-login #login .login-foot .login-lang select,
body.pre-login #login #login-lang,
#login.login #login-lang,
#login #login-lang {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 128px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.86) !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 32px !important;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  color-scheme: dark;
}
#login #login-lang option { background: #171a22; color: #fff; }
@media (max-width: 720px) {
  body.pre-login #login .login-foot,
  body.pre-login #login .login-foot { min-height: 40px; }
  body.pre-login #login .login-foot .login-lang,
  body.pre-login #login .login-foot .login-lang,
  body.pre-login #login .login-lang,
  body.pre-login #login .login-lang { height: 38px !important; padding: 0 13px !important; }
  body.pre-login #login #login-lang,
  #login #login-lang { height: 36px !important; line-height: 36px !important; font-size: 12.5px !important; }
}

/* ---------- Context menus: never let an unbounded SVG become the menu ----- */
#ctx .ctx-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.35 !important;
}
#ctx .ctx-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 0 !important;
  overflow: hidden;
}
#ctx .ctx-ic svg,
#ctx .ctx-item svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: block !important;
  flex: none;
}
.appmenu-ic {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px;
  margin-right: 8px !important;
}
.appmenu-ic svg { width: 16px !important; height: 16px !important; display: block; }
.appmenu-it { display: flex; align-items: center; gap: 2px; }
.chat-ctx-head .chat-ctx-av,
.chat-ctx-head .chat-ctx-av > * { border-radius: 50% !important; }

/* The app-menu header icon was the last unbounded SVG: the glyph is a full
   dock tile markup, which defaults to a 300px-wide SVG when no box constrains
   it. That is what appeared as a giant logo above a right-click menu. */
#appmenu-pop .appmenu-head { display: flex; align-items: center; gap: 9px; }
#appmenu-pop .appmenu-headic {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
#appmenu-pop .appmenu-headic svg,
#appmenu-pop .appmenu-headic .gi svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: block;
}
#appmenu-pop .appmenu-headic .gi { width: 100%; height: 100%; }
.chat-ctx-head .chat-ctx-av .chat-av svg,
.chat-ctx-head .chat-ctx-av svg {
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  display: block;
}

/* Server panel: make the new status/refresh row read as one control strip. */
.adm-smtp-actions { flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-tw-next {
  margin-left: auto;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.adm-tw-next b { color: var(--muted); font-weight: 700; }
.adm-srv-toggle.busy { opacity: .6; pointer-events: none; }
.adm-srv-toggle.busy .adm-srv-led { animation: admPulse 1s ease-in-out infinite; }
@keyframes admPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@media (max-width: 720px) {
  .adm-tw-next { margin-left: 0; width: 100%; }
}

/* ---------- Files / Market: desktop drawer veil must not take a grid cell --
   `.fxa-veil` and `.as-veil` are buttons. The responsive drawer rules gave
   them `position:absolute` only below 780px, but on desktop they stayed in the
   grid as normal children, occupying column 2 and pushing the whole main pane
   down into column 1 — the app appeared to have its content crammed into the
   left sidebar. This pins the desktop layout explicitly. */
@media (min-width: 781px) {
  .fxa-veil,
  .as-veil {
    display: none !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .fxa {
    grid-template-columns: 212px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .fxa-side { grid-column: 1 !important; grid-row: 1 !important; }
  .fxa-main { grid-column: 2 !important; grid-row: 1 !important; }
  .fxa-reopen { display: none !important; }
  .appstore {
    grid-template-columns: 216px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .appstore .as-rail { grid-column: 1 !important; grid-row: 1 !important; }
  .appstore > :not(.as-rail):not(.as-reopen):not(.as-veil) { grid-column: 2 !important; grid-row: 1 !important; }
}
.fxa-veil[hidden], .as-veil[hidden] { display: none !important; }

/* The summary pill's container was the right size but the label inherited the
   tiny window em scale, so it read as a 7px caption. Use an explicit readable
   size; keep the quiet pill shape. */
.ab-sumbtn { font-size: 12px !important; line-height: 1 !important; padding: 10px 15px !important; }
.ab-sumbtn-tx { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .01em; }
.ab-sumbtn-ic { width: 16px !important; }
.ab-sumbtn-ic i:nth-child(1) { width: 16px !important; }
.ab-sumbtn-ic i:nth-child(2) { width: 12px !important; }
.ab-sumbtn-ic i:nth-child(3) { width: 8px !important; }
@media (max-width: 520px) {
  .ab-sumbtn { font-size: 12.5px !important; min-height: 42px; }
  .ab-sumbtn-tx { font-size: 12.5px !important; }
}

/* Server panel: keep the section switcher reachable while the long panel
   scrolls, and give the mail/Taiwan targets breathing room under it. */
#set-admin .adm-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 4px 0;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#set-admin .adm-tabs button { flex: 0 0 auto; white-space: nowrap; }
#set-admin .adm-tabs { overflow-x: auto; scrollbar-width: none; }
#set-admin .adm-tabs::-webkit-scrollbar { display: none; }
#adm-smtp, #adm-tw, #adm-code, #adm-users-block { scroll-margin-top: 58px; }

/* Chirp's desktop rail was legible but cramped: 198px forced 9.5px labels and
   the nav text wrapped. Give it a little more room and keep the feed column
   fluid. */
@media (min-width: 781px) {
  #win-chirp .chirp { grid-template-columns: 220px minmax(0, 1fr) !important; }
  #win-chirp .chirp-side { padding: 18px 16px !important; gap: 12px !important; }
  #win-chirp .chirp-navitem { font-size: 12px !important; min-height: 40px !important; }
  #win-chirp .chirp-tip { font-size: 10.5px !important; line-height: 1.5 !important; }
  #win-chirp .chirp-tagsbox > b { font-size: 9px !important; }
  #win-chirp .chirp-me b { font-size: 11.5px !important; }
  #win-chirp .chirp-me i { font-size: 9.5px !important; }
}

/* ============================================================================
   2026-10-25 — TEK EL DÜZELTME BLOĞU
   Bu blok dosyanın en sonunda: yukarıdaki çakışan kuralları bilerek ezer.
   1) Sağ tık menüsündeki dev ikon (win-ctx başlığı)
   2) Sol panel kapanınca ana panelin gerçekten genişlemesi
   3) Mobil pencereye azıcık nefes payı
   4) Boş sohbet üst barının telefonda gizlenmesi
   5) Mobil tutorial'ın yarı ekranı kaplamaması
   6) About özet düğmesinin hizası
   7) Music alt boşluğu
   8) Chirp profil görünümü / TayOne sıcaklık dokunuşları
   ============================================================================ */

/* --- 1. Menü başlığındaki uygulama ikonu her yerde 26px ---------------- */
.appmenu-head {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0;
}
.appmenu-headic {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.appmenu-headic svg,
.appmenu-headic .gi,
.appmenu-headic .gi svg,
.appmenu-headic img {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: block !important;
}
.appmenu-headic .gi { width: 100% !important; height: 100% !important; display: grid !important; place-items: center !important; }
#win-ctx, #appmenu-pop { max-width: calc(100vw - 16px) !important; overflow: hidden !important; }
#win-ctx .appmenu-it, #appmenu-pop .appmenu-it { overflow: hidden; }

/* --- 2. Sol panel kapalıyken ana panel tam genişlik --------------------- */
@media (min-width: 781px) {
  .fxa.side-closed { grid-template-columns: minmax(0, 1fr) !important; }
  .fxa.side-closed .fxa-side { display: none !important; }
  .fxa.side-closed .fxa-main { grid-column: 1 / -1 !important; }
  .fxa.side-closed .fxa-reopen { display: grid !important; }

  .appstore.side-closed { grid-template-columns: minmax(0, 1fr) !important; }
  .appstore.side-closed .as-rail { display: none !important; }
  .appstore.side-closed .as-reopen { display: grid !important; }
  .appstore.side-closed > :not(.as-rail):not(.as-reopen):not(.as-veil) { grid-column: 1 / -1 !important; }

  #win-chirp .chirp.side-closed { grid-template-columns: minmax(0, 1fr) !important; }
  #win-chirp .chirp.side-closed .chirp-side { display: none !important; }
  #win-chirp .chirp.side-closed .chirp-reopen { display: grid !important; }

  #win-forum .forum-body.side-closed { grid-template-columns: minmax(0, 1fr) !important; }
  #win-forum .forum-body.side-closed .forum-side { display: none !important; }
  #win-forum .forum.side-closed #forum-side-open { display: grid !important; }

  #win-pdf .pdf-app.side-closed { grid-template-columns: minmax(0, 1fr) !important; }
  #win-pdf .pdf-app.side-closed .pdf-side { display: none !important; }
  #win-pdf .pdf-app.side-closed .pdf-reopen { display: grid !important; }

  .mu.side-closed { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "main" "bar" !important; }
  .mu.side-closed .mu-side { display: none !important; }
  .mu.side-closed .mu-side-open { display: grid !important; }
}
/* Forum'un › sekmesi başlığın içindeydi; başlık yüksekliği değişince yukarı
   kaçıyordu. Artık .forum'un doğrudan çocuğu ve dikeyde ortalanıyor. */
#win-forum .forum { position: relative !important; }
#win-forum .forum > .forum-side-open {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 36 !important;
}
#win-forum .forum-head--new .forum-side-open { display: none !important; }

/* --- 3. Mobil pencere: azıcık nefes payı (6px) -------------------------- */
@media (max-width: 720px) {
  :root {
    --win-gap: 6px;
    --dock-h: calc(58px + env(safe-area-inset-bottom, 0px));
  }
  .win.mobile,
  .app.win.mobile,
  #windows .win.mobile,
  #windows .app.win.mobile,
  #app.win.mobile,
  #app {
    left: var(--win-gap) !important;
    right: var(--win-gap) !important;
    width: auto !important;
    max-width: none !important;
    top: calc(var(--mb-h, 26px) + var(--win-gap)) !important;
    height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 58px) - 2 * var(--win-gap)) !important;
    max-height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 58px) - 2 * var(--win-gap)) !important;
    border-radius: 15px !important;
    border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent) !important;
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden !important;
  }
  #dock { max-width: calc(100vw - 2 * var(--win-gap)) !important; }

  /* --- 4. Boş sohbet başlığı telefonda görünmesin ----------------------- */
  #win-chat .chat-head.chat-head--idle { display: none !important; }
  #win-chat .chat-head:not(.chat-head--idle) { display: flex !important; }

  /* --- 5. Tutorial: alt sayfa, yarı ekranı kaplamaz --------------------- */
  .tut-card {
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: calc(var(--dock-h, 58px) + 10px) !important;
    width: auto !important;
    max-height: min(46dvh, 360px) !important;
    overflow: auto !important;
    padding: 14px 15px 13px !important;
    border-radius: 18px !important;
  }
  .tut-body {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    max-height: 19dvh;
    overflow: auto;
  }
  .tut-title { font-size: 15px !important; }
  .tut-actions { display: flex !important; flex-wrap: wrap; gap: 7px !important; }
  .tut-actions .btnl--primary { flex: 1 1 100%; order: -1; height: 42px; }
  .tut-actions .tut-skip { flex: 1 1 100%; }
  .tut-mascot { width: 36px !important; height: 36px !important; flex-basis: 36px !important; min-width: 36px !important; }
}

/* --- 6. About özet düğmesi: CTA hizasında, okunur boyutta --------------- */
.ab3-meta .ab-sum-ctl { margin-inline-start: auto; display: flex; align-items: center; }
.ab3-meta .ab-sumbtn {
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  border: 1px solid var(--line);
  gap: 7px;
}
.ab3-meta .ab-sumbtn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 720px) {
  .ab3-meta { align-items: center !important; }
  .ab3-meta .ab-sum-ctl { margin-inline-start: 0; width: 100%; }
  .ab3-meta .ab-sumbtn { width: 100%; justify-content: center; }
}

/* --- 7. Music: alt boşluk yok ------------------------------------------ */
#win-music .mu { padding-bottom: 0 !important; }
#win-music .mu-bar { border-radius: 14px 14px 0 0 !important; }
#win-music .mu-list::after { height: 0 !important; }
#win-music .mu-main--disc .mu-list::after { height: 0 !important; }

/* --- 8. Chirp: profil görünümü ve daha sıcak yüzey --------------------- */
.chirp-profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%),
    color-mix(in srgb, var(--bg-2) 78%, transparent);
}
.chirp-profile-av {
  width: 58px; height: 58px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #ec4899));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.chirp-profile-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chirp-profile-tx b { font-size: 1.1em; letter-spacing: -.02em; }
.chirp-profile-tx span { font-size: .74em; color: var(--muted); }
.chirp-profile-stats { display: flex; gap: 14px; margin-inline-start: auto; }
.chirp-profile-stats span { display: flex; flex-direction: column; align-items: center; font-size: .64em; color: var(--muted); }
.chirp-profile-stats b { font-size: 1.5em; color: var(--fg); line-height: 1.1; }
.chirp-back {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.chirp-back:hover { border-color: var(--accent); color: var(--accent); }
.chirp-bar-back { display: none; }
@media (max-width: 720px) {
  .chirp-profile-hero { align-items: flex-start; flex-wrap: wrap; }
  .chirp-profile-stats { margin-inline-start: 0; width: 100%; justify-content: flex-start; }
  .chirp-bar-back { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--fg); }
}

/* --- 9. TayOne: insan dokunuşu ---------------------------------------- */
.tay-greet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 10px;
  padding: 0 2px;
}
.tay-greet-hi { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.tay-greet-sub { font-size: 11px; color: var(--t-dim); }
.tay-hero { border-radius: 24px; box-shadow: 0 18px 40px -30px #000; }
.tay-card { border-radius: 20px; }
.tay-tab.on { background: linear-gradient(135deg, #ffc47a, #f2a548); }
.tay-now-num b { letter-spacing: -1.8px; }

/* About: the "available" line under the summary lead. */
.ab-sum-avail {
  margin: -6px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .72em;
  line-height: 1.5;
  color: var(--muted);
}
.ab-sum-avail b {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .92em;
}

/* Chirp mobile: the sticky bar must sit just under the window title bar,
   not slide under it while the feed scrolls. */
@media (max-width: 720px) {
  #win-chirp .chirp-main {
    padding-top: calc(var(--winbar-h, 46px) + 8px) !important;
  }
  #win-chirp .chirp-bar {
    top: var(--winbar-h, 46px) !important;
    margin-top: 0 !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  #win-chirp .chirp-bar b { font-size: .86em !important; }
  #win-chirp .chirp-bar span { padding: 4px 7px !important; font-size: .66em !important; }
  /* Profil görünümünde hero yerine kompakt başlık yeterli. */
  #win-chirp .chirp-profile-hero { padding: 13px !important; border-radius: 16px !important; }
  #win-chirp .chirp-profile-av { width: 46px !important; height: 46px !important; font-size: 19px !important; }
}

/* Chat on a phone: the window already draws its own header (avatar, name,
   actions). The empty title bar above it was reserving --winbar-h of dead
   space. Remove both the bar and its padding so the thread starts at the
   top edge, exactly like Messages. */
@media (max-width: 720px) {
  .win.chat-barless .win__bar,
  #win-chat .win__bar,
  #win-chat.win.mobile .win__bar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .win.chat-barless .win__body,
  #win-chat .win__body,
  #win-chat.win.mobile .win__body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  #win-chat .chat-head {
    margin-top: 0 !important;
  }
  #win-chat .chat-shell {
    height: 100% !important;
  }
}

/* Mobile window bar: keep the traffic-light dots, drop the duplicate title
   (every app already prints its own name inside its header). The bar becomes
   a quiet floating strip instead of a second black band. */
@media (max-width: 720px) {
  .win.mobile .win__bar,
  #windows .win.mobile .win__bar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .win.mobile .win__bar .win__title,
  #windows .win.mobile .win__bar .win__title {
    display: none !important;
  }
  /* Chirp's sticky mini-header: it sticks just below the (now title-less)
     window bar, and the main column reserves that same height. Without both
     halves the bar sliced through the story strip while scrolling. */
  #win-chirp .chirp-bar {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
  }
}

/* Music: the body already reserves the title-bar height with padding-top.
   Subtracting --winbar-h again on the app root left a ~30-40px dead band
   under the transport bar. The app fills the body's content box. */
#win-music .win__body > .mu {
  height: 100% !important;
  max-height: 100% !important;
}

/* Context-menu header: the app name and its id were both inline, so the
   header read "Filesfiles". Stack them and keep the id quiet. */
.appmenu-headtxt {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  line-height: 1.15 !important;
}
.appmenu-headtxt b {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appmenu-headtxt i {
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   FORUM — köşe dili tek elde
   ============================================================================
   Forumda üç ayrı panel vardı ve hiçbiri pencere diliyle konuşmuyordu:
   başlık bloğu `0 0 22px 22px` ile ÜST köşeleri kare kalıyordu, kanal paneli
   düz bir levhaydı (radius 0 + yalnızca sağ kenarlık), arama/sıralama şeridi
   ise arkasına kare bir bant çiziyordu. Üçü de artık kart: aynı yarıçap,
   dört yandan kenarlık, içerik kadar iç boşluk. Sonradan yazıldığı için
   yukarıdaki eski kuralları geçersiz kılar. */
#win-forum .forum-head--new {
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  padding: 16px 18px 14px !important;
}
#win-forum .forum-side {
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important;
  padding: 10px 10px 12px !important;
}
#win-forum .forum-main {
  padding: 0 14px 18px !important;
}
#win-forum .forum-toolbar {
  /* Kart, şerit değil: arama alanı ve sıralama kutusu tek bir yuvarlak
     yüzeyin üstünde duruyor, ekranın kenarında kesilmiyor. */
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--bg-2, var(--bg)) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 8px 10px !important;
  margin: 0 0 10px;
  min-width: 0;
  overflow: hidden;
}
#win-forum .forum-search { min-width: 0; }
#win-forum .forum-sort { flex: 0 0 auto; max-width: 42%; }
#win-forum #forum-count {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  #win-forum .forum-head--new { border-radius: 18px !important; padding: 14px 14px 12px !important; }
  #win-forum .forum-side {
    border-radius: 16px !important;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important;
  }
  #win-forum .forum-main { padding: 0 12px 16px !important; }
  #win-forum .forum-toolbar { padding: 7px 9px !important; }
}



/* ============================================================================
   PASTAAY — "kontrol odası" düzeni
   ============================================================================
   Eski hâli: 500×560 bir kutuda altı boş siyah kare, üstte birbirine yapışmış
   rozetler, altta içeriğin üstüne binen bir altbilgi. Yeni düzen üç net bant
   hâlinde: HUD (marka + sayaçlar + düğmeler) · SLA şeridi · servis tahtası.
   Bütün seçiciler #win-pastaay ile kapsandığı için eski .px kurallarını
   güvenle ezer; mobilde de aynı dil geçerli. */
#win-pastaay .px {
  height: 100%;
  min-height: 0;
  padding: 2px 2px 0 !important;
  gap: 12px !important;
  overflow: hidden;
}

/* --- 1. HUD ------------------------------------------------------------- */
#win-pastaay .px-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-width: 0;
}
#win-pastaay .px-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#win-pastaay .px-mark {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #ffe2dd;
  /* HUD 34px: elle çizilmiş gerçek logo bu boyutta çizgileri kaybolduğu için
     burada vektör işaret kalıyor (ölçüldü: 28px'e inince kedi görünmüyor). */
  background: linear-gradient(150deg, #ff7b7b, #b03333);
  box-shadow: 0 8px 18px -10px #ff5f5788, inset 0 1px 0 #fff3;
}
#win-pastaay .px-mark svg { width: 19px; height: 19px; }

#win-pastaay .px-brand-tx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}
#win-pastaay .px-brand-tx b {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
}
#win-pastaay .px-brand-tx i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#win-pastaay .px-chips {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-left: auto;
  flex: none;
}
#win-pastaay .px-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 56px;
  padding: 5px 10px 6px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  line-height: 1;
}
#win-pastaay .px-chip i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
#win-pastaay .px-chip b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
#win-pastaay .px-chip--lvl b { color: var(--accent); }
#win-pastaay .px-chip--best b { color: var(--warn); }
#win-pastaay .px-head-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
#win-pastaay .px-help {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
#win-pastaay .px-help:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* --- 2. SLA şeridi ------------------------------------------------------ */
#win-pastaay .px-sla-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 9px 12px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
}
#win-pastaay .px-sla-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--muted);
  flex: none;
}
#win-pastaay .px-barwrap {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  overflow: hidden;
}
#win-pastaay .px-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--ok);
  transition: width 0.3s ease, background 0.3s ease;
}
#win-pastaay .px-sla-val {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  min-width: 36px;
  text-align: right;
  flex: none;
}
#win-pastaay .px-sla-row.crit {
  border-color: color-mix(in srgb, var(--err) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 14%, transparent);
}
#win-pastaay .px-sla-row.crit .px-sla-val { color: var(--err); }

/* --- 3. Zorluk + kombo -------------------------------------------------- */
#win-pastaay .px-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 0;
}
#win-pastaay .px-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  flex: none;
}
#win-pastaay .px-seg button {
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
#win-pastaay .px-seg button:hover { color: var(--fg); }
#win-pastaay .px-seg button.on {
  background: var(--accent);
  color: #0b0d12;
  box-shadow: 0 6px 14px -10px var(--accent);
}
#win-pastaay .px-combo {
  margin-left: auto;
  min-height: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  text-align: right;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#win-pastaay .px-combo.fever { color: var(--err); }
#win-pastaay .px-meter {
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  overflow: hidden;
  flex: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#win-pastaay .px-meter.on { opacity: 1; }
#win-pastaay #px-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--warn), #ffd700);
  transition: width 0.2s ease;
}

/* --- 4. Servis tahtası -------------------------------------------------- */
#win-pastaay .px-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 0;
  align-content: stretch;
}
#win-pastaay .px-cell {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background:
    radial-gradient(120% 110% at 50% -20%, color-mix(in srgb, var(--fg) 7%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg-2, var(--bg)) 92%, transparent);
  color: var(--fg);
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.09s cubic-bezier(0.3, 1.4, 0.5, 1), border-color 0.14s ease, box-shadow 0.14s ease;
}
#win-pastaay .px-cell:active { transform: scale(0.97); }
#win-pastaay .px-cell-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--fg);
  opacity: 0.09;
  pointer-events: none;
}
#win-pastaay .px-cell-glyph svg { width: 62px; height: 62px; }
#win-pastaay .px-cell-top {
  position: absolute;
  top: 10px;
  left: 11px;
  right: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#win-pastaay .px-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent);
}
#win-pastaay .px-cell-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#win-pastaay .px-cell-fault {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.12s ease, transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1);
  pointer-events: none;
}
#win-pastaay .px-cell.faulty .px-cell-fault {
  opacity: 1;
  transform: scale(1);
}
#win-pastaay .px-cell-taps {
  position: absolute;
  top: 8px;
  right: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--fg);
  background: color-mix(in srgb, #000 34%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
}
#win-pastaay .px-cell.faulty {
  border-color: color-mix(in srgb, var(--err) 78%, transparent);
  background:
    radial-gradient(120% 110% at 50% -20%, color-mix(in srgb, var(--err) 24%, transparent), transparent 66%),
    color-mix(in srgb, var(--err) 8%, var(--bg-2, var(--bg)));
  animation: pxFaultPulse 1.15s ease-in-out infinite;
}
#win-pastaay .px-cell.faulty .px-dot {
  background: var(--err);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 22%, transparent);
}
#win-pastaay .px-cell.faulty.gold {
  border-color: #ffd700;
  background:
    radial-gradient(120% 110% at 50% -20%, #ffd70033, transparent 66%),
    color-mix(in srgb, #ffd700 10%, var(--bg-2, var(--bg)));
}
#win-pastaay .px-cell.hit {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
#win-pastaay .px-cell.hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--ok);
  animation: pxburst 0.3s ease forwards;
  pointer-events: none;
}
@keyframes pxFaultPulse {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 10%, transparent); }
}

/* --- 5. Altbilgi ------------------------------------------------------- */
#win-pastaay .px-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
#win-pastaay .px-foot-hint {
  font-size: 10px;
  color: var(--faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#win-pastaay .px-links {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex: none;
}
#win-pastaay .px-links a {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: color 0.14s ease, border-color 0.14s ease;
}
#win-pastaay .px-links a:hover { color: var(--fg); border-color: var(--accent); }

/* --- 6. Öğretici + bitiş katmanı -------------------------------------- */
#win-pastaay .px-tut-card,
#win-pastaay .px-over-card {
  border-radius: 20px !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--bg-2, var(--bg)) 96%, transparent) !important;
  box-shadow: 0 30px 70px -30px #000c !important;
}
#win-pastaay .px-tut-go {
  border-radius: 11px !important;
  background: var(--accent) !important;
  color: #0b0d12 !important;
  font-weight: 800 !important;
}
#win-pastaay .px-tut-skip {
  border-radius: 11px !important;
  border: 1px solid var(--line) !important;
}

/* --- 7. Dar pencere / telefon ----------------------------------------- */
@media (max-width: 560px) {
  #win-pastaay .px { gap: 9px !important; }
  #win-pastaay .px-brand-tx i { display: none; }
  #win-pastaay .px-chip { min-width: 46px; padding: 4px 8px 5px; }
  #win-pastaay .px-chip b { font-size: 13px; }
  #win-pastaay .px-grid3 { gap: 7px; }
  #win-pastaay .px-cell-glyph svg { width: 44px; height: 44px; }
  #win-pastaay .px-cell-fault { font-size: 24px; }
  #win-pastaay .px-foot-hint { display: none; }
}

/* pastaay · dar ekran: 3×2 yerine 2×3. Telefonda hücreler 380px yüksekliğe
   uzayıp "boş siyah sütun" gibi görünüyordu; iki kolon hem dokunmayı
   kolaylaştırıyor hem tahtayı kareye yakın tutuyor. */
@media (max-width: 560px) {
  #win-pastaay .px-grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  #win-pastaay .px-cell-glyph svg { width: 38px; height: 38px; }
}

/* ============================================================================
   2026-10-25 (2) — Chirp üst bar payı · About başlık hizası · TayOne yeniden
   ============================================================================
   Bu blok dosyanın en sonunda: yukarıdaki çakışan kuralları bilerek ezer.
   ========================================================================== */

/* --- 1. CHIRP: kanal rayı pencere düğmelerinin altına giriyordu ----------- */
/* .win__body padding'i sıfırlandığı için her panel üst bar payını kendi
   veriyor. Bir sonraki `padding: 18px 16px` kısayolu, `padding-top: calc(
   --winbar-h + 8px)` kuralını sildiği için "Chirp" logosu trafik ışıklarıyla
   aynı hizaya düşüyordu. Sadece padding-top'u geri veriyoruz. */
#win-chirp .chirp-side {
  padding-top: calc(var(--winbar-h, 30px) + 10px) !important;
}
@media (max-width: 720px) {
  /* Telefonda ray bir çekmece: üst bar payı yine gerekli. */
  #win-chirp .chirp-side {
    padding-top: calc(var(--winbar-h, 30px) + 6px) !important;
  }
}

/* --- 2. ABOUT: Özet düğmesi hero'nun üst satırına ------------------------ */
.ab3-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.ab3-hero-top .ab-sum-ctl { margin-left: auto; }
.ab3-hero-top .ab-sumbtn { min-height: 34px; }
/* Özet düğmesi artık CTA satırında (Hire me / CV / LinkedIn / GitHub):
   hero'nun sol kolonunun sağ kenarına yapışık durunca sayfanın ortasında
   "adacık" gibi kalıyordu. Telefonda ise hero'nun sağ üstünde (beğenilen yer). */
/* Hero'nun SAĞ ÜST köşesi (terminal kartının üstünde). Sol kolonun sağ
   kenarına yapışınca sayfanın ortasında adacık gibi kalıyordu; telefonda
   zaten beğenilen yer burasıydı, tek konum: hero'nun sağ üstü. */
.ab3-hero > .ab-sum-ctl {
  position: absolute;
  top: 18px; right: 22px;
  z-index: 3;
  display: inline-flex;
}
.ab3-hero > .ab-sum-ctl .ab-sumbtn { min-height: 34px; }
@media (max-width: 720px) {
  .ab3-hero > .ab-sum-ctl { top: 10px; right: 12px; }
  .ab3-hero > .ab-sum-ctl .ab-sumbtn { min-height: 40px; }
}
/* Düğme artık meta satırında değil: eski "sağa it" kuralı ölü kalmasın. */
.ab3-meta .ab-sum-ctl { margin-left: 0; }
@media (max-width: 520px) {
  .ab3-hero-top { align-items: flex-start; }
  .ab3-hero-top .ab-sumbtn { min-height: 40px; }
}

/* --- 3. TAYONE: tek çizgi dili ------------------------------------------
   Üç problem: (a) selamlama hero'nun dışında ayrı bir satır olarak duruyordu,
   (b) hava çipleri 6 küçük kutu hâlinde sarıyordu ve okunmuyordu, (c) 24 saat
   şeridi sağ kenarda kesiliyordu. Yeni düzen: hero içinde selamlama + risk,
   altında büyük sıcaklık ve 3×2 metrik ızgarası, sonra gün-progress çubuğu. */
#win-tayone .tay-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 13px 16px 10px;
  flex-wrap: nowrap;
}
#win-tayone .tay-brand-txt b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
#win-tayone .tay-brand-txt i { font-size: 10px; color: var(--t-dim); }
#win-tayone .tay-citybtn {
  border-radius: 12px;
  padding: 7px 11px;
  background: rgb(0 0 0 / 22%);
  border: 1px solid var(--t-line);
}
#win-tayone .tay-actions { display: flex; align-items: center; gap: 8px; }
#win-tayone .tay-tabs {
  display: flex;
  gap: 3px;
  margin: 0 16px 12px;
  padding: 4px;
  border: 1px solid var(--t-line);
  border-bottom: 1px solid var(--t-line);
  border-radius: 14px;
  background: rgb(0 0 0 / 20%);
}
#win-tayone .tay-tab {
  flex: 1;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
}
#win-tayone .tay-tab:hover { background: #ffffff08; }
#win-tayone .tay-tab.on {
  background: linear-gradient(135deg, #ffc47a, #f2a548);
  color: #22180c;
  box-shadow: 0 10px 20px -14px #ffb457;
}

/* Hero: selamlama içeride, metrikler ızgarada */
#win-tayone .tay-hero { padding: 16px 18px 14px; border-radius: 22px; }
#win-tayone .tay-hero-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
}
#win-tayone .tay-greet { margin: 0; padding: 0; gap: 3px; min-width: 0; }
#win-tayone .tay-greet-hi { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
#win-tayone .tay-greet-sub { font-size: 10.5px; line-height: 1.5; color: var(--t-dim); max-width: 62ch; }
#win-tayone .tay-hero-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
#win-tayone .tay-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 18px;
  margin-top: 14px;
  flex-wrap: nowrap;
}
#win-tayone .tay-now-ic { font-size: 40px; }
#win-tayone .tay-now-num b { font-size: clamp(38px, 5.6vw, 50px); }
#win-tayone .tay-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
#win-tayone .tay-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 7px 9px 8px;
  border-radius: 12px;
  border: 1px solid #ffffff12;
  background: rgb(0 0 0 / 18%);
}
#win-tayone .tay-stat i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#win-tayone .tay-stat b {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
#win-tayone .tay-stat em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--t-dim);
}
#win-tayone .tay-stat--air b { color: var(--c, inherit); }
#win-tayone .tay-stat .tay-wind { font-size: 11px; opacity: 0.8; }

/* Gün içi ilerleme: gün doğumu → gün batımı arasındaki yerimiz */
#win-tayone .tay-sun {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#win-tayone .tay-sun b { font-weight: 700; font-size: 10.5px; color: var(--t-mid); }
#win-tayone .tay-sun-bar {
  width: 72px;
  height: 4px;
  border-radius: 99px;
  background: #ffffff16;
  overflow: hidden;
  flex: none;
}
#win-tayone .tay-sun-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffb457, #ffd166);
}
#win-tayone .tay-hero-foot { align-items: center; }

/* 24 saat şeridi: kart içinde kalır, sağdan yumuşak kapanır, yağış %'si var */
#win-tayone .tay-hours-card { position: relative; }
#win-tayone .tay-hours {
  grid-auto-columns: 54px;
  gap: 4px;
  padding: 2px 4px 4px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
#win-tayone .tay-hour {
  scroll-snap-align: start;
  gap: 3px;
  padding: 8px 4px 6px;
  border-radius: 12px;
}
#win-tayone .tay-hour.now { border-color: #ffb4575c; background: #ffb4571c; }
#win-tayone .tay-hour-p {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--t-dim);
  font-variant-numeric: tabular-nums;
  min-height: 11px;
}
#win-tayone .tay-hours-card::after {
  content: "";
  position: absolute;
  top: 44px;
  right: 1px;
  bottom: 6px;
  width: 24px;
  pointer-events: none;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgb(23 19 14 / 0%), rgb(23 19 14 / 62%));
}

/* Kart ızgarası: iki sütun nefes alsın, telefonda tek sütun */
#win-tayone .tay-grid2 { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
#win-tayone .tay-grid2 > .tay-card { margin-top: 0; }
#win-tayone .tay-card { padding: 14px 15px; border-radius: 18px; }
#win-tayone .tay-card-head { align-items: center; margin-bottom: 12px; }
#win-tayone .tay-card-head b { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-mid); }
#win-tayone .tay-day { border-radius: 10px; }

@media (max-width: 860px) {
  #win-tayone .tay-hero-main { grid-template-columns: 1fr; }
  #win-tayone .tay-grid2 { grid-template-columns: 1fr; }
  #win-tayone .tay-hero-tags { margin-left: 0; }
}
@media (max-width: 700px) {
  #win-tayone .tay-top {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 14px 8px;
  }
  #win-tayone .tay-tabs { margin: 0 12px 10px; }
  #win-tayone .tay-brand-txt i { display: none; }
  #win-tayone .tay-hero { padding: 14px 14px 12px; border-radius: 18px; }
  #win-tayone .tay-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #win-tayone .tay-now-ic { font-size: 34px; }
}

/* TayOne ince ayar: sekme grubu pencereyi kaplamasın, yağış çubukları okunsun */
#win-tayone .tay-tabs {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  max-width: calc(100% - 32px);
  margin-right: 16px;
}
#win-tayone .tay-tab {
  flex: 0 0 auto;
  min-width: 104px;
  justify-content: center;
}
#win-tayone .tay-hour-bar {
  width: 6px;
  height: 26px;
  background: #ffffff14;
}
#win-tayone .tay-hour-bar i { min-height: 8%; }
#win-tayone .tay-hour-deg { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  #win-tayone .tay-tabs { width: calc(100% - 24px); max-width: none; margin-right: 12px; }
  #win-tayone .tay-tab { flex: 1 1 0; min-width: 0; }
}

/* About · Özet düğmesi: hero'nun üst satırında, kicker'ın karşısında ve
   bilerek sessiz. Doldurulmuş bir pill, hero'nun ortasında "yüzen düğme" gibi
   duruyordu; ince çerçeveli bir kontrol başlık satırının parçası oluyor. */
.ab3-hero-top .ab-sumbtn {
  min-height: 30px !important;
  padding: 5px 12px 5px 10px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 0.68em !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
.ab3-hero-top .ab-sumbtn:hover {
  color: var(--fg) !important;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  transform: none !important;
}
.ab3-hero-top .ab-sumbtn .ab-sumbtn-ic i { background: currentColor; }
.ab3-hero-top .ab-sumbtn[aria-pressed="true"] {
  color: var(--fg) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
}

/* About (özet görünümü): "işe açık" ve "Tam sürüm" alt alta iki ayrı blok gibi
   duruyordu; artık tek satırda, sağa hizalı bir eylem grubu. */
.ab-sum-headright {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 620px) {
  .ab-sum-headright { justify-content: flex-start; }
}

/* ============================================================================
   MOBİL MARKET + TEMA OLUŞTURUCU (2026-10-25)
   ----------------------------------------------------------------------------
   Market: `.appstore { height:100% }` mobilde gövdenin 36px'lik üst payıyla
   birlikte taşıyor, `.as-body`'nin alt kısmı ekranın dışında kalıyordu →
   "aşağı kaydırılmıyor". Gövdeyi flex kolona çevirip appstore'u kalan alana
   oturtuyoruz; kaydırma yine .as-body içinde.
   ========================================================================== */
@media (max-width: 720px) {
  #win-market.mobile .win__body {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }
  #win-market.mobile .appstore {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
  }
  #win-market.mobile .as-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Ray yatay şerit: sticky kalması üstte iki kat bant yapıyordu. */
  #win-market.mobile .as-rail { position: static !important; }

  /* Tema oluşturucu: yan panel + önizleme alt alta, önizleme kısa. */
  #win-thememaker.mobile .win__body { overflow-y: auto !important; }
  #win-thememaker .mk {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0;
    gap: 12px;
  }
  #win-thememaker .mk-side {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    width: 100%;
  }
  #win-thememaker .mk-presets {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }
  #win-thememaker .mk-presets > * { flex: 0 0 auto; }
  #win-thememaker .mk-main { width: 100%; min-width: 0; }
  #win-thememaker .mk-preview { min-height: 190px !important; }
}

/* PDF araç çubuğu: 61px'lik bant, belgenin üstünde boşluk gibi duruyordu.
   Buton yüksekliği çubuğu şişiriyordu; burada tek yerden sabitliyoruz. */
#win-pdf .pdf-app--new .pdf-bar {
  min-height: 46px !important;
  padding: 4px 10px !important;
  gap: 8px !important;
}
#win-pdf .pdf-app--new .pdf-dl { height: 34px !important; min-width: 104px !important; padding: 0 14px !important; }
#win-pdf .pdf-app--new #pdf-external,
#win-pdf .pdf-app--new #pdf-files { height: 34px !important; padding: 0 10px !important; }
#win-pdf .pdf-app--new .pdf-stage { padding: 8px !important; }

/* ============================================================================
   (2026-10-25) Impact düğmesi, ızgara uygulama menüsü, özet düğmesi
   ========================================================================== */

/* About kartları: "impact" — kartın alt şeridinde, etiketlerle aynı dil. */
.ab3-case-foot .ab3-case-impact {
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--fg);
  font: inherit;
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.ab3-case-foot .ab3-case-impact:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
}

/* Uygulama menüsü ızgarası: dock yanda iken dikey liste ekran kenarına
   sıkışıyordu. Izgarada başlık tam satır, ayırıcılar gizli. */
.appmenu--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-width: 300px;
  max-width: min(92vw, 430px);
}
.appmenu--grid .appmenu-head { grid-column: 1 / -1; }
.appmenu--grid .appmenu-sep { display: none; }
.appmenu--grid .appmenu-it {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  font-size: 0.7em;
  line-height: 1.25;
  padding: 10px 6px;
}
.appmenu--grid .appmenu-ic { margin: 0; }

/* Hero'daki "Özet" düğmesi: tasarımın kicker/çip diliyle aynı —
   küçük, büyük harf, ince çerçeve. Önceki renkli hap sayfaya yapıştırılmış
   gibi duruyordu. */
.ab3-hero > .ab-sum-ctl .ab-sumbtn {
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  color: color-mix(in srgb, var(--fg) 78%, transparent);
  box-shadow: none;
  font-size: 0.58em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.ab3-hero > .ab-sum-ctl .ab-sumbtn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ab3-hero > .ab-sum-ctl .ab-sumbtn-ic i { background: currentColor; }
@media (max-width: 720px) {
  .ab3-hero > .ab-sum-ctl .ab-sumbtn { font-size: 0.62em; padding: 9px 13px; }
}

/* ---------------------------------------------------------------------------
   SAYDAM ÜST BAR — TEK KAYNAK (2026-10-25)
   ---------------------------------------------------------------------------
   Bu dosyada aynı seçicinin üç ayrı kopyası vardı ve son kopya (bu blok)
   cam efektini düz bir %24 tint'e indiriyordu. Sonuç: "cam" seçilince bar
   ne duvar kağıdını örnekliyor ne de cam gibi görünüyordu; "dolu" seçilince
   de dyn-wall'ın renkli yazısı kalıyordu.

   Artık tek bir son blok var:
     · cam  → katmanlı saydam pane + blur + duvar kağıdından tint
     · dolu → gerçek opak bar + tema yazı rengi
   Dosyanın sonunda olduğu için önceki kopyaları güvenle ezer.
   --------------------------------------------------------------------------- */
/* Cam, dinamik renk JS'ten gelmeden önce de geçerli bir tint taşısın.
   (--dyn-accent boş tanımlıysa color-mix geçersiz olur ve katman "none"a düşer.) */
:root { --dyn-accent: #5b86a6; --dyn-ink: #ffffff; }
body.mb-transparent #menubar,
body.mb-glass #menubar {
  --mb-glass-tint: color-mix(in srgb, var(--bg, #0b1020) 20%, transparent);
  background:
    linear-gradient(175deg,
      color-mix(in srgb, #fff 15%, transparent) 0%,
      color-mix(in srgb, #fff 5%, transparent) 44%,
      transparent 78%),
    var(--mb-glass-tint) !important;
  backdrop-filter: blur(28px) saturate(200%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08) !important;
  border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 16%, transparent),
    0 10px 30px -24px rgba(0, 0, 0, .85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
/* Dinamik duvar kağıdı açıkken cam, duvarın kendi rengini örnekler. */
body.dyn-wall.mb-transparent #menubar,
body.dyn-wall.mb-glass #menubar {
  --mb-glass-tint: color-mix(in srgb, var(--dyn-accent, #0b1020) 19%, transparent);
}
body.dyn-wall.mb-transparent #menubar .mb-logo,
body.dyn-wall.mb-transparent #menubar .mb-app,
body.dyn-wall.mb-transparent #menubar .mb-clock,
body.dyn-wall.mb-transparent #menubar .mb-icon,
body.dyn-wall.mb-transparent #menubar .mb-user,
body.dyn-wall.mb-transparent #menubar button,
body.dyn-wall.mb-glass #menubar .mb-logo,
body.dyn-wall.mb-glass #menubar .mb-app,
body.dyn-wall.mb-glass #menubar .mb-clock,
body.dyn-wall.mb-glass #menubar .mb-icon,
body.dyn-wall.mb-glass #menubar .mb-user,
body.dyn-wall.mb-glass #menubar button { color: var(--dyn-ink, #fff) !important; }

/* Açık tema: aynı cam, arkadan aydınlatılmış. */
[data-mode="light"] body.mb-transparent #menubar,
[data-mode="light"] body.mb-glass #menubar,
body.mb-transparent[data-mode="light"] #menubar,
body.mb-glass[data-mode="light"] #menubar {
  --mb-glass-tint: color-mix(in srgb, #fff 30%, transparent);
  background:
    linear-gradient(175deg, rgba(255,255,255,.64), rgba(255,255,255,.20) 58%, rgba(255,255,255,.06)),
    var(--mb-glass-tint) !important;
  border-bottom-color: rgba(0, 0, 0, .10) !important;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 8px 24px -20px rgba(0, 0, 0, .5) !important;
}
[data-mode="light"] body.mb-transparent #menubar .mb-logo,
[data-mode="light"] body.mb-transparent #menubar .mb-app,
[data-mode="light"] body.mb-transparent #menubar .mb-clock,
[data-mode="light"] body.mb-transparent #menubar .mb-icon,
[data-mode="light"] body.mb-transparent #menubar .mb-user,
[data-mode="light"] body.mb-transparent #menubar button,
body.mb-transparent[data-mode="light"] #menubar .mb-logo,
body.mb-transparent[data-mode="light"] #menubar .mb-app,
body.mb-transparent[data-mode="light"] #menubar .mb-clock,
body.mb-transparent[data-mode="light"] #menubar .mb-icon,
body.mb-transparent[data-mode="light"] #menubar .mb-user,
body.mb-transparent[data-mode="light"] #menubar button { color: var(--ink, #1d1b16) !important; }

/* "Dolu" gerçekten dolu: cam katmanı ve dyn-wall renkleri kapanır. */
body:not(.mb-transparent) #menubar {
  background: var(--bg-2, #161511) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--line, #2a2822) !important;
  box-shadow: none !important;
  text-shadow: none;
}
body.dyn-wall:not(.mb-transparent) #menubar .mb-logo,
body.dyn-wall:not(.mb-transparent) #menubar .mb-app,
body.dyn-wall:not(.mb-transparent) #menubar .mb-clock,
body.dyn-wall:not(.mb-transparent) #menubar .mb-icon,
body.dyn-wall:not(.mb-transparent) #menubar .mb-user,
body.dyn-wall:not(.mb-transparent) #menubar button { color: var(--fg, #fff) !important; }

/* ============================================================================
   (2026-10-25) Blog: pencere başlığı ile uygulama üst barı çakışmasın
   ----------------------------------------------------------------------------
   Blog'un arama/filtre satırı pencerenin en üstüne yapışıyordu; trafik
   ışıkları içeriğin üstünde yüzüyor ve pencereyi tutacak boşluk kalmıyordu.
   Artık önce gerçek bir uygulama başlığı var, sonra araç çubuğu.
   ========================================================================== */
#win-blog .win__body {
  padding-top: calc(var(--winbar-h, 30px) + 14px);
}
.blog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 12px;
}
.blog-head > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.blog-head b {
  font-size: 1.12em;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.blog-head span {
  font-size: 0.8em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  #win-blog .win__body { padding-top: calc(var(--winbar-h, 46px) + 10px); }
  .blog-head { margin-bottom: 10px; }
  .blog-head span { display: none; }
}

/* ============================================================================
   (2026-10-25) Ayarlar: pencere üst barı ile içerik ayrılsın
   ----------------------------------------------------------------------------
   The settings rail began directly under the traffic lights, so the window
   looked like it had no title bar at all. A small rail header + a little more
   top padding gives the window its own chrome and keeps the traffic lights
   clear of the first control.
   ========================================================================== */
#win-settings .win__body {
  padding-top: calc(var(--winbar-h, 30px) + 8px);
}
.set-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  margin-bottom: 8px;
}
.set-head b {
  font-size: 1.02em;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.set-head span {
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  #win-settings .win__body { padding-top: var(--winbar-h, 46px); }
  .set-head { display: none; }
}


/* ============================================================================
   MOBİL TUR — login, Market, Creator, PDF ve terminal başlığı
   ----------------------------------------------------------------------------
   Bu blok dosyanın en sonunda: önceki mobil denemelerin çakışan kurallarını
   (özellikle "tek scroller" ve "drawer max-height" çelişkilerini) bilinçli
   olarak ezer. Masaüstü görünümü değişmez.
   ========================================================================== */

/* Terminal ASCII başlığı: telefonda kutu çizimleri 8px'te birbirine giriyordu.
   Düz blok harfler beş satırda hizalı kalır ve 48 karakter genişliğe sığar. */
@media (max-width: 720px) {
  .banner--compact {
    font-size: min(16px, calc((100vw - 56px) / 48 / 0.62)) !important;
    line-height: 1.02 !important;
    margin: 8px 0 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/* ---------------------------------------------------------------------------
   1. MOBİL KİLİT EKRANI — saat üstte, cam kart altta, tek net giriş
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  body.pre-login #login {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  body.pre-login #login .login-clock {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 24px) !important;
    left: 0 !important;
    right: 0 !important;
    gap: 2px !important;
  }
  body.pre-login #login .login-clock b {
    font-size: clamp(38px, 11vw, 48px) !important;
    letter-spacing: -.045em !important;
  }
  body.pre-login #login .login-clock span {
    font-size: 10px !important;
    letter-spacing: .14em !important;
    opacity: .62 !important;
  }
  body.pre-login #login .login-stage {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.pre-login #login .login-card-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 430px !important;
    justify-self: center !important;
  }
  body.pre-login #login .login-card-wrap > .login-card,
  body.pre-login #login .login-card,
  #login.login .login-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 430px !important;
    max-height: none !important;
    padding: 22px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background:
      radial-gradient(140% 70% at 50% -20%, color-mix(in srgb, var(--accent, #7aa2c8) 30%, transparent), transparent 62%),
      linear-gradient(180deg, rgba(26, 28, 37, .78), rgba(11, 12, 17, .90)) !important;
    box-shadow:
      0 30px 80px -34px rgba(0, 0, 0, .95),
      inset 0 1px 0 rgba(255, 255, 255, .14) !important;
    backdrop-filter: blur(32px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.3) !important;
    overflow: visible !important;
  }
  body.pre-login #login .login-brandline { margin-bottom: 4px !important; }
  body.pre-login #login .login-logo { font-size: 20px !important; }
  body.pre-login #login .login-orb { width: 84px !important; height: 84px !important; margin: 6px auto 4px !important; }
  body.pre-login #login .login-avatar { width: 78px !important; height: 78px !important; font-size: 27px !important; }
  body.pre-login #login .login-name { font-size: 19px !important; margin-top: 4px !important; }
  body.pre-login #login .login-status { font-size: 11px !important; margin-top: 2px !important; }
  body.pre-login #login .login-btn {
    width: 100% !important;
    height: 48px !important;
    margin-top: 14px !important;
    border-radius: 15px !important;
    font-size: 15px !important;
  }
  body.pre-login #login .login-pass { width: 100% !important; margin-top: 10px !important; }
  body.pre-login #login .login-pass-input { width: 100% !important; height: 46px !important; }
  body.pre-login #login .login-guest { width: 100% !important; margin-top: 8px !important; }
  body.pre-login #login .login-hint { display: block !important; margin-top: 10px !important; font-size: 10.5px !important; opacity: .55 !important; }
  body.pre-login #login .login-foot {
    width: 100% !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, .09) !important;
    justify-content: center !important;
  }
  body.pre-login #login .login-lang {
    width: 100% !important;
    height: 40px !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .06) !important;
  }
  #login.login #login-lang { width: 100% !important; max-width: 280px !important; text-align: center !important; }
  body.pre-login #login .login-now {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
  body.pre-login #login .login-rings { opacity: .12 !important; }
}

/* ---------------------------------------------------------------------------
   2. MOBİL MARKET — tek dikey scroller + gerçek tam boy çekmece
   ---------------------------------------------------------------------------
   Eski 720px kuralı .win__body'yi overflow:hidden yapıp .as-body'yi de
   "visible" bırakıyordu: hiçbir şey kaymıyordu. Ayrıca çekmece 48px'lik bir
   şeride sıkışıyordu. Burada tekrar tek scroller'a dönüyoruz.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .win.mobile .win__body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
  /* Pazar yerinin kendi kuralı (id + .mobile) daha güçlüydü; açıkça ez. */
  #win-market.mobile .win__body {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
  #win-market.mobile .appstore,
  #win-market.mobile .as-main,
  #win-market.mobile .as-body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #win-market .as-main,
  .appstore .as-main {
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  #win-market .as-body,
  .appstore .as-body {
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding: 0 12px 118px !important;
  }
  #win-market .as-top,
  .appstore .as-top { position: static !important; }

  .appstore.side-closed .as-rail { display: none !important; }
  #win-market.mobile .appstore:not(.side-closed) .as-rail,
  .appstore:not(.side-closed) .as-rail {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    position: fixed !important;
    left: 0 !important;
    top: calc(var(--mb-h, 26px) + 34px) !important;
    bottom: calc(var(--dock-h, 52px) + 10px) !important;
    width: min(320px, 90vw) !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 18px 18px 0 !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 0 !important;
    background: var(--bg) !important;
    box-shadow: 24px 0 50px -20px #000c !important;
    z-index: 90 !important;
    transform: none !important;
  }
  .as-veil {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    display: block !important;
    background: rgba(5, 7, 12, .55) !important;
    border: 0 !important;
    padding: 0 !important;
  }
  .appstore.side-closed .as-veil,
  .as-veil[hidden] { display: none !important; }
  #win-market .as-reopen {
    position: fixed !important;
    left: 0 !important;
    top: 50dvh !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 68px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 0 14px 14px 0 !important;
    border: 1px solid var(--line) !important;
    border-left: 0 !important;
    background: color-mix(in srgb, var(--bg-2) 94%, transparent) !important;
    color: var(--fg) !important;
    z-index: 70 !important;
    font-size: 20px !important;
  }
  #win-market .appstore:not(.side-closed) .as-reopen { display: none !important; }
  #win-market .as-nav,
  .appstore .as-nav { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; margin-top: 8px !important; }
  #win-market .as-navitem,
  .appstore .as-navitem { padding: 11px 12px !important; font-size: 13.5px !important; border-radius: 10px !important; text-align: left !important; }
  #win-market .as-brand,
  .appstore .as-brand { display: flex !important; align-items: center !important; gap: 8px !important; padding: 2px 4px 10px !important; }
  #win-market .as-rail-foot,
  .appstore .as-rail-foot { display: flex !important; margin-top: auto !important; }
}

/* ---------------------------------------------------------------------------
   3. MOBİL CREATOR — tam ekran stüdyo, kaydırılabilir kontrol paneli
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .cr-layer {
    padding: 0 !important;
    place-items: stretch !important;
    background: rgba(0, 0, 0, .74) !important;
  }
  .cr-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  .cr-head {
    flex: none !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px !important;
  }
  .cr-head b { font-size: 1.12em !important; }
  .cr-x { width: 44px !important; height: 44px !important; border-radius: 12px !important; font-size: 16px !important; }
  .cr-tabs {
    display: flex !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    overflow-x: auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: var(--bg) !important;
    flex: none !important;
    scrollbar-width: none;
  }
  .cr-tabs::-webkit-scrollbar { display: none; }
  .cr-tab {
    flex: 0 0 auto !important;
    padding: 10px 13px !important;
    font-size: 12.5px !important;
    border-radius: 12px !important;
  }
  .cr-body {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .cr-preview {
    padding: 10px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    height: 184px !important;
    min-height: 0 !important;
  }
  .cr-preview .shot {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 12px !important;
  }
  .cr-controls {
    padding: 12px 14px 18px !important;
    overflow: visible !important;
    touch-action: pan-y !important;
    gap: 12px !important;
  }
  .cr-row { font-size: 12px !important; gap: 8px !important; }
  .cr-row label { flex: 0 0 78px !important; }
  .cr-colors { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .cr-color { padding: 9px 10px !important; font-size: 11px !important; }
  .cr-foot {
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
    border-top: 1px solid var(--line) !important;
    flex: none !important;
    z-index: 4 !important;
  }
  .cr-foot .btnl { width: 100% !important; min-height: 44px !important; justify-content: center !important; }
  .cr-foot #cr-publish { grid-column: 1 / -1 !important; }
  .cr-foot .cr-sp { display: none !important; }
  .cr-pub { padding: 12px 14px 18px !important; display: block !important; }
  .cr-pub-row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
  .cr-pub-lbl { flex: none !important; }
  .cr-pub-ta { min-height: 70px !important; }
  .cr-motionrow { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------------------------------------------------------------------------
   4. MOBİL PDF/CV — okunur başlangıç, kaydırılabilir sahne
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  #win-pdf .pdf-stage { padding: 4px !important; min-height: 0 !important; }
  #win-pdf .pdf-sheet { overflow: auto !important; -webkit-overflow-scrolling: touch !important; }
  #win-pdf #pdf-frame { width: 100% !important; height: 100% !important; border: 0 !important; }
  #win-pdf .pdf-bar { position: sticky !important; top: 0 !important; z-index: 3 !important; background: var(--bg) !important; }
}

/* ==========================================================================
   2026-10-25 · MOBİL SON RÖTUŞ
   --------------------------------------------------------------------------
   Tek yerde toplanmış son katman: kilit ekranı, pencere üst barı, Görev
   Yöneticisi, Market çekmecesi, Club odası, Blog okuyucu, terminal ASCII
   başlığı ve PDF/CV. Hepsi <=720px; masaüstü görünümü değişmez.
   ========================================================================== */
@media (max-width: 720px) {
  /* ---- güvenli üst alan: çentik + menü barı ----------------------------- */
  :root { --mb-h: calc(26px + env(safe-area-inset-top, 0px)) !important; }
  #menubar {
    height: var(--mb-h) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: border-box;
  }

  /* ---- uygulama pencereleri: menü barından 8px uzakta, içerik barın
         altında 12px nefes payıyla başlar --------------------------------- */
  .win.mobile {
    top: calc(var(--mb-h, 26px) + 8px) !important;
    height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 58px) - 8px) !important;
    max-height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 58px) - 8px) !important;
  }
  .win.mobile .win__bar { height: 42px !important; min-height: 42px !important; }
  .win.mobile .win__body { padding-top: 54px !important; }

  /* ---- kilit ekranı: saat büyük, kart dikeyde ortada ------------------- */
  body.pre-login #login .login-clock {
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    gap: 3px !important;
  }
  body.pre-login #login .login-clock b {
    font-size: clamp(56px, 17vw, 76px) !important;
    letter-spacing: -.05em !important;
    line-height: 1 !important;
  }
  body.pre-login #login .login-clock span {
    font-size: 11.5px !important;
    letter-spacing: .14em !important;
    opacity: .7 !important;
  }
  body.pre-login #login .login-stage {
    align-items: center !important;
    justify-content: center !important;
    padding: calc(env(safe-area-inset-top, 0px) + 108px) 12px
      calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.pre-login #login .login-card-wrap { margin: 0 auto !important; }

  /* ---- Görev Yöneticisi: içerik kadar yüksek, hayalet boşluk yok ------ */
  /* `#windows .win.mobile` yüksekliği !important ile sabitliyor; aynı
     ağırlıkta bir seçiciyle ezip içeriğe göre yükseklik veriyoruz. */
  #windows #win-tasks.mobile {
    height: auto !important;
    max-height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 58px) - 24px) !important;
  }
  #windows #win-tasks.mobile .win__body {
    overflow: visible !important;
    padding-bottom: 14px !important;
  }
  #win-tasks .tasks { gap: 10px; }
  #win-tasks .tasks-list { max-height: 42dvh; }

  /* ---- Market çekmecesi: üstten/alttan kırpılma yok -------------------- */
  #win-market.mobile .appstore:not(.side-closed) .as-rail {
    top: calc(var(--mb-h, 26px) + 50px) !important;
    bottom: calc(var(--dock-h, 58px) + 8px) !important;
    width: min(336px, 90vw) !important;
    max-height: calc(100dvh - var(--mb-h, 26px) - var(--dock-h, 58px) - 58px) !important;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 20px 20px 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  #win-market.mobile .appstore:not(.side-closed) .as-brand {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: var(--bg) !important;
    padding-top: 6px !important;
  }
  /* Hesap şeridi telefonda da görünsün: çekmece "alttan kesik" okunmasın. */
  #win-market.mobile .appstore:not(.side-closed) .as-rail-foot {
    display: flex !important;
    margin-top: auto !important;
    padding-top: 8px !important;
  }
  #win-market.mobile .appstore:not(.side-closed) .as-acct {
    display: flex !important;
  }
  /* Menü satırlarını bir tık sıkılaştır: hesap şeridi çekmecenin içinde
     kalsın, alttan 13px taşıp "kesik" görünmesin. */
  #win-market.mobile .appstore:not(.side-closed) .as-nav { gap: 2px !important; }
  #win-market.mobile .appstore:not(.side-closed) .as-navitem {
    padding: 9px 12px !important;
    font-size: 13px !important;
  }

  /* ---- Club odası: üstte X, altta ayrıl; ortadaki gövde kayar ---------- */
  #win-club .club4 { height: 100% !important; overflow: hidden !important; }
  #win-club .club4-head,
  #win-club .club4-bar { flex: none !important; }
  #win-club .club4-stage:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 12px 8px !important;
  }
  /* Oda açıkken kart ızgarası yer kaplamasın. */
  #win-club .club4-stage:not([hidden]) ~ .club4-grid { display: none !important; }
  #win-club .club4-stage-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  #win-club .club4-stage-hero { flex: none !important; }
  #win-club .club4-stage-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-bottom: 12px !important;
  }
  #win-club .club4-stage-controls { flex: none !important; }
  #win-club .club4-x {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
    border-radius: 12px !important;
  }
  #win-club .club4-ctrl {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 8px !important;
  }
  /* Liste kartlarındaki sert renk bloğu telefonda dağınık görünüyordu. */
  #win-club .club4-card-glow { display: none !important; }
  #win-club .club4-card {
    background: color-mix(in srgb, var(--bg-2) 88%, transparent) !important;
  }
  /* Oda açıkken arama/yeni oda satırı yer kaplamasın: başlık + sekmeler kalsın. */
  #win-club .club4:has(.club4-stage:not([hidden])) .club4-head {
    padding: 8px 12px 4px !important;
  }
  #win-club .club4:has(.club4-stage:not([hidden])) .club4-head-actions {
    display: none !important;
  }
  #win-club .club4:has(.club4-stage:not([hidden])) .club4-bar {
    padding: 0 12px 6px !important;
  }

  /* ---- Blog: yazı açıkken araç çubuğu gizlenir, okuma tam genişlik ---- */
  #win-blog.is-reading .blog-head,
  #win-blog.is-reading .blog-tool { display: none !important; }
  #win-blog.is-reading .win__body { padding-top: 54px !important; }
  #win-blog .reader-back {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin: -4px 0 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  #win-blog .reader-body { padding-bottom: 54px !important; }
  #win-blog .reader-body h1 { font-size: 1.5em !important; line-height: 1.22 !important; }
  #win-blog .reader-body p { font-size: 15px !important; line-height: 1.72 !important; }
  #win-blog .reader-body img { max-width: 100% !important; height: auto !important; }

  /* ---- PDF/CV: 65% yerine okunur ölçek + görünür zoom ----------------- */
  #win-pdf .pdf-app--new .pdf-bar { flex-wrap: nowrap !important; gap: 4px !important; }
  #win-pdf .pdf-app--new .pdf-name b { max-width: 118px !important; }
  #win-pdf .pdf-app--new .pdf-zoom { display: flex !important; }
  #win-pdf .pdf-app--new .pdf-zoom span { font-size: 11px !important; min-width: 34px !important; }
  #win-pdf .pdf-app--new .pdf-zbtn { width: 30px !important; height: 30px !important; font-size: 15px !important; }
  #win-pdf .pdf-app--new .pdf-stage { padding: 0 !important; }
  #win-pdf .pdf-app--new .pdf-sheet {
    overflow: hidden !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }
  #win-pdf .pdf-app--new #pdf-frame { touch-action: pan-x pan-y pinch-zoom !important; }
}

/* Terminal ASCII başlığı: telefonda glow harfleri bulanıklaştırıyordu. */
.banner,
.banner--compact {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
@media (max-width: 720px) {
  .banner--compact {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: 0 !important;
    line-height: 1.04 !important;
    font-weight: 500 !important;
    margin: 8px 0 12px !important;
  }
}

/* ============================================================================
   2026-10-26 · SON CİLA — mobil kilit ekranı, terminal banner, Market çekmecesi,
   Club FAB ve PDF zoom. Hepsi en sonda: yukarıdaki eski katmanları ezer.
   ========================================================================== */

/* ---------- 0. Tur: hedef yoksa halka hiç çizilmesin --------------------- */
.tut-hole[hidden] { display: none !important; }

/* ---------- 1. MOBİL KİLİT EKRANI --------------------------------------- */
@media (max-width: 720px) {
  body.pre-login #login {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* Aurora + bottom scrim: the old flat wallpaper made the card float in a
     blue void. This gives the lock screen a deliberate focal plane. */
  body.pre-login #login::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(120% 48% at 50% -4%, rgba(255, 122, 69, .26), transparent 62%),
      radial-gradient(80% 42% at 12% 18%, rgba(79, 140, 255, .18), transparent 70%),
      linear-gradient(180deg, transparent 0 34%, rgba(3, 5, 10, .30) 58%, rgba(3, 5, 10, .82) 100%);
  }
  body.pre-login #login .login-veil {
    background: radial-gradient(90% 60% at 50% 62%, transparent 35%, rgba(4, 6, 11, .54) 100%) !important;
    opacity: 1 !important;
  }
  body.pre-login #login .login-stars { opacity: .62 !important; }
  body.pre-login #login .login-clock {
    top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
    z-index: 2 !important;
    gap: 1px !important;
  }
  body.pre-login #login .login-clock b {
    font-size: clamp(44px, 13.5vw, 58px) !important;
    font-weight: 300 !important;
    letter-spacing: -.055em !important;
    line-height: .98 !important;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  }
  body.pre-login #login .login-clock span {
    margin-top: 5px !important;
    font-size: 10px !important;
    letter-spacing: .22em !important;
    opacity: .58 !important;
  }
  body.pre-login #login .login-stage {
    position: relative;
    z-index: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: calc(env(safe-area-inset-top, 0px) + 118px) 14px
      calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.pre-login #login .login-card-wrap,
  body.pre-login #login .login-card-wrap > .login-card,
  body.pre-login #login .login-card,
  #login.login .login-card {
    width: min(360px, calc(100vw - 28px)) !important;
    max-width: min(360px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 150px) !important;
    margin: 0 auto !important;
    padding: 20px 20px 14px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, .17) !important;
    background:
      radial-gradient(120% 70% at 50% -18%, color-mix(in srgb, var(--accent, #ff7a45) 30%, transparent), transparent 60%),
      linear-gradient(180deg, rgba(27, 30, 40, .84), rgba(10, 12, 18, .94)) !important;
    box-shadow:
      0 30px 80px -28px rgba(0, 0, 0, .96),
      0 0 0 1px rgba(255, 255, 255, .03) inset,
      0 1px 0 rgba(255, 255, 255, .16) inset !important;
    backdrop-filter: blur(34px) saturate(1.32) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.32) !important;
    overflow: auto !important;
  }
  body.pre-login #login .login-brandline {
    justify-content: center !important;
    margin: 0 0 2px !important;
  }
  body.pre-login #login .login-logo {
    font-size: 15px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    opacity: .72 !important;
  }
  body.pre-login #login .login-greet {
    display: block !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    font-size: 10.5px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: color-mix(in srgb, var(--accent, #ff7a45) 72%, #fff) !important;
    opacity: .95 !important;
  }
  body.pre-login #login .login-orb {
    width: 86px !important;
    height: 86px !important;
    margin: 2px auto 8px !important;
  }
  body.pre-login #login .login-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0d1017 !important;
    background:
      radial-gradient(circle at 32% 24%, #fff7 0 18%, transparent 40%),
      linear-gradient(145deg, #ffb08a, #ff7a45 58%, #d94d21) !important;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent, #ff7a45) 55%, transparent),
      0 18px 34px -16px #000e,
      0 0 42px -8px color-mix(in srgb, var(--accent, #ff7a45) 70%, transparent) !important;
  }
  body.pre-login #login .login-orb-ring {
    inset: -9px !important;
    border: 1px solid color-mix(in srgb, var(--accent, #ff7a45) 34%, transparent) !important;
    opacity: .8 !important;
  }
  body.pre-login #login .login-orb-ring.d2 {
    inset: -17px !important;
    opacity: .28 !important;
    animation: lgRing 4.2s ease-out infinite;
  }
  body.pre-login #login .login-name {
    margin-top: 2px !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    text-align: center !important;
  }
  body.pre-login #login .login-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 7px auto 0 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    color: #8ff0b0 !important;
    background: rgba(70, 200, 120, .11) !important;
    border: 1px solid rgba(126, 231, 135, .22) !important;
  }
  body.pre-login #login .login-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7ee787;
    box-shadow: 0 0 9px #7ee787;
  }
  body.pre-login #login .login-handle {
    display: block !important;
    margin: 8px 0 0 !important;
    text-align: center !important;
    font-size: 10.5px !important;
    letter-spacing: .03em !important;
    color: rgba(255, 255, 255, .4) !important;
  }
  body.pre-login #login .login-btn {
    width: 100% !important;
    height: 50px !important;
    margin-top: 16px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    letter-spacing: .01em !important;
    background:
      linear-gradient(165deg, #ffb08a, color-mix(in srgb, var(--accent, #ff7a45) 88%, #000)) !important;
    color: #0b0f14 !important;
    box-shadow:
      0 16px 32px -16px color-mix(in srgb, var(--accent, #ff7a45) 85%, transparent),
      0 1px 0 rgba(255, 255, 255, .38) inset !important;
    transition: transform .14s ease, filter .16s ease !important;
  }
  body.pre-login #login .login-btn:active { transform: scale(.985) !important; filter: brightness(.96) !important; }
  body.pre-login #login .login-pass-input {
    height: 46px !important;
    margin-top: 12px !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, .28) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
  }
  body.pre-login #login .login-hint {
    margin-top: 9px !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
    opacity: .38 !important;
  }
  body.pre-login #login .login-foot {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    min-height: 0 !important;
  }
  body.pre-login #login .login-lang,
  body.pre-login #login .login-foot .login-lang {
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
  }
  body.pre-login #login #login-lang,
  #login.login #login-lang {
    width: auto !important;
    max-width: 148px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 11.5px !important;
    text-align: center !important;
    text-align-last: center !important;
  }
  body.pre-login #login .login-now { margin-top: 12px !important; }
}
@keyframes lgRing {
  0% { transform: scale(.94); opacity: .38; }
  70%, 100% { transform: scale(1.12); opacity: 0; }
}

/* ---------- 2. MOBİL MARKET ÇEKMECESİ: kırpılma yok ---------------------- */
@media (max-width: 720px) {
  #win-market.mobile .appstore:not(.side-closed) .as-rail {
    position: fixed !important;
    left: 0 !important;
    top: calc(var(--mb-h, 26px) + 50px) !important;
    bottom: calc(var(--dock-h, 54px) + 10px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(330px, 88vw) !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 22px 22px 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .09) !important;
    background:
      radial-gradient(115% 42% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
      color-mix(in srgb, var(--bg) 98%, #000) !important;
    box-shadow: 30px 0 70px -30px #000f !important;
    z-index: 95 !important;
  }
  #win-market.mobile .appstore:not(.side-closed) .as-brand {
    position: relative !important;
    flex: 0 0 auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 14px 14px 11px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .065) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #win-market.mobile .appstore:not(.side-closed) .as-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  #win-market.mobile .appstore:not(.side-closed) .as-rail-foot {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 10px 12px calc(11px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  }
  #win-market.mobile .appstore:not(.side-closed) .as-acct {
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* ---------- 3. CLUB: mobilde "oda kur" her zaman görünür ----------------- */
.club4-fab { display: none; }
@media (max-width: 720px) {
  #win-club .club4 { position: relative !important; }
  #win-club .club4-fab {
    display: none !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: absolute !important;
    right: 13px !important;
    bottom: 14px !important;
    z-index: 9 !important;
    min-height: 46px;
    padding: 0 17px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    color: #07090d;
    background: linear-gradient(145deg, hsl(var(--h, 262) 90% 68%), hsl(calc(var(--h, 262) + 45) 88% 58%));
    box-shadow:
      0 16px 34px -14px hsl(var(--h, 262) 85% 40% / .95),
      0 1px 0 rgba(255, 255, 255, .45) inset;
  }
  #win-club .club4-fab span { font-size: 18px; line-height: 1; }
  #win-club .club4-fab:active { transform: scale(.97); }
  /* No duplicate button: while browsing, the header owns "new room". Once a
     room is open the header actions hide, so the floating action appears
     above the mic/hand/leave row. */
  #win-club .club4:has(.club4-stage:not([hidden])) .club4-fab {
    display: inline-flex !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---------- 4. TERMİNAL BANNER: mobilde gerçek bir "hero" ---------------- */
@media (max-width: 720px) {
  .banner.banner--cool {
    position: relative;
    display: block !important;
    width: 100%;
    margin: 10px 0 14px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    background:
      radial-gradient(120% 90% at 0% 0%, rgba(255, 122, 69, .16), transparent 58%),
      radial-gradient(100% 80% at 100% 100%, rgba(79, 140, 255, .12), transparent 62%),
      linear-gradient(180deg, rgba(20, 23, 32, .92), rgba(9, 11, 17, .96));
    box-shadow:
      0 18px 44px -26px #000f,
      0 1px 0 rgba(255, 255, 255, .07) inset;
    overflow: hidden !important;
  }
  .banner--cool .bn-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
    background: rgba(255, 255, 255, .028);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9.5px;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .42);
  }
  .banner--cool .bn-dots { display: inline-flex; gap: 4px; margin-right: 2px; }
  .banner--cool .bn-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, .17);
  }
  .banner--cool .bn-dots i:first-child { background: #ff6b5e; }
  .banner--cool .bn-dots i:nth-child(2) { background: #ffc94a; }
  .banner--cool .bn-dots i:nth-child(3) { background: #62d26f; }
  .banner--cool .bn-path { color: rgba(255, 255, 255, .58); }
  .banner--cool .bn-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-style: normal;
    font-weight: 700;
    color: #7ee787;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .banner--cool .bn-live i {
    width: 5px; height: 5px; border-radius: 50%;
    background: #7ee787;
    box-shadow: 0 0 8px #7ee787;
    animation: bnLive 2.1s ease-in-out infinite;
  }
  .banner--cool .bn-art {
    display: block;
    margin: 0 !important;
    padding: 13px 12px 9px !important;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: clamp(8.5px, 2.62vw, 11.5px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.02em !important;
    white-space: pre;
    overflow-x: auto;
    color: #ffb08a;
    background: linear-gradient(92deg, #ffb08a 0%, #ffd166 44%, #7ee787 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 13px rgba(255, 122, 69, .20));
  }
  .banner--cool .bn-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 12px 12px;
  }
  .banner--cool .bn-tags span {
    padding: 3px 8px;
    border-radius: 999px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 8.5px;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .68);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .075);
  }
  .banner--cool .bn-scan {
    position: absolute;
    left: -10%;
    right: -10%;
    top: -55%;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .055) 55%, transparent);
    animation: bnScan 5.2s linear infinite;
  }
  .menu--chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 2px 0 10px !important;
    max-width: none !important;
  }
  .menu--chips > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    background: rgba(255, 255, 255, .035) !important;
  }
  .menu--chips > div .cl {
    min-width: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .menu--chips > div .d {
    display: block !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    opacity: .55 !important;
  }
}
@keyframes bnLive { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }
@keyframes bnScan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .75; }
  70% { opacity: .22; }
  100% { transform: translateY(320%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .banner--cool .bn-live i,
  .banner--cool .bn-scan,
  body.pre-login #login .login-orb-ring.d2 { animation: none !important; }
}

/* ---------- 5. PDF/CV mobil araç çubuğu -------------------------------- */
@media (max-width: 720px) {
  #win-pdf .pdf-app--new .pdf-bar {
    gap: 6px !important;
    padding: 8px 10px !important;
    min-height: 52px !important;
  }
  #win-pdf .pdf-app--new .pdf-name { gap: 7px !important; min-width: 0 !important; }
  #win-pdf .pdf-app--new .pdf-name b { max-width: 96px !important; font-size: 12px !important; }
  #win-pdf .pdf-app--new .pdf-name i { display: none !important; }
  #win-pdf .pdf-app--new .pdf-zoom {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important;
    padding: 2px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
  }
  #win-pdf .pdf-app--new .pdf-zbtn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
  }
  #win-pdf .pdf-app--new #pdf-zv {
    min-width: 42px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    color: var(--fg) !important;
  }
  #win-pdf .pdf-app--new .pdf-dl,
  #win-pdf .pdf-app--new #pdf-external,
  #win-pdf .pdf-app--new #pdf-files {
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
  #win-pdf .pdf-app--new .pdf-stage { padding: 0 6px 6px !important; }
}

/* New lock-screen markup defaults: hidden on desktop, the mobile block above
   opts them in. Keeps the desktop card exactly as it was. */
#login .login-greet,
#login .login-handle { display: none; }

/* ---------- 6. PDF araç şeridi: telefonda taşma/kırpılma yok ------------- */
@media (max-width: 720px) {
  #win-pdf .pdf-app--new .pdf-actions { gap: 4px !important; min-width: 0 !important; }
  #win-pdf .pdf-app--new .pdf-name { flex: 1 1 auto !important; min-width: 0 !important; }
  #win-pdf .pdf-app--new .pdf-name b { max-width: 92px !important; }
  #win-pdf .pdf-app--new .pdf-dl {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
  }
  #win-pdf .pdf-app--new .pdf-dl::before { content: "⬇"; font-size: 15px; }
  #win-pdf .pdf-app--new #pdf-external,
  #win-pdf .pdf-app--new #pdf-files {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
  }
  #win-pdf .pdf-app--new #pdf-external::before { content: "↗"; font-size: 14px; }
  #win-pdf .pdf-app--new #pdf-files::before { content: "▤"; font-size: 14px; }
  #win-pdf .pdf-app--new .pdf-sheet {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

/* ============================================================================
   2026-10-26 — SON DÜZELTME KATMANI
   Tek yerde toplanmış son katman: About deneyim, mobil tur, PDF/CV zoom,
   mobil giriş, Market çekmecesi, Club oda kurma, oyunlar ve terminal banner.
   Hepsi en sonda; masaüstü görünümü bozulmaz.
   ========================================================================== */

/* ---------- 1. ABOUT: deneyim zaman çizelgesi + impact ------------------ */
.ab3-tl--exp { padding: 9px 0; }
.ab3-tl--exp b { font-size: .78em; }
.ab3-tl--exp span { font-size: .64em; }
.ab3-tl--exp .ab3-tl-meta { opacity: .72; letter-spacing: .01em; }
.ab3-tl-impact {
  margin-top: 7px;
  min-height: 28px;
  padding: 4px 11px !important;
  font-size: .58em !important;
}
.ab-sum-exp { margin: 16px 0 6px; }
.ab-sum-explist { display: flex; flex-direction: column; gap: 6px; }
.ab-sum-exprow {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-2) 62%, transparent);
}
.ab-sum-exprow > b { font-size: .72em; }
.ab-sum-exprow > span { font-size: .64em; color: var(--muted); }
@media (max-width: 720px) {
  .ab-sum-exprow { grid-template-columns: minmax(0, 1fr) auto; }
  .ab-sum-exprow > span { grid-column: 1 / 2; }
  .ab-sum-exprow .ab3-tl-impact { grid-column: 2 / 3; grid-row: 1 / 3; }
}

/* ---------- 2. MOBİL TUR: gizli hedefe halka çizme ---------------------- */
.tut-hole[hidden] { display: none !important; }
@media (max-width: 720px) {
  /* The long-press step now targets the dock (always visible). Keep the
     spotlight ring tight around the icon instead of a giant bubble. */
  .tut-hole { border-radius: 14px; }
}

/* ---------- 3. MOBİL GİRİŞ: sakin, tek renkli, okunur ------------------- */
@media (max-width: 720px) {
  body.pre-login #login .login-card::before { display: none !important; }
  body.pre-login #login .login-card-wrap > .login-card,
  body.pre-login #login .login-card,
  #login.login .login-card {
    border: 1px solid rgba(255, 255, 255, .11) !important;
    background:
      radial-gradient(120% 72% at 50% -18%, rgba(255, 138, 88, .20), transparent 58%),
      linear-gradient(180deg, rgba(22, 24, 31, .94), rgba(9, 10, 15, .97)) !important;
    box-shadow:
      0 28px 70px -30px rgba(0, 0, 0, .96),
      inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  }
  body.pre-login #login .login-logo {
    color: rgba(255, 255, 255, .78) !important;
    letter-spacing: .24em !important;
  }
  body.pre-login #login .login-greet {
    color: #ffb27a !important;
    letter-spacing: .2em !important;
  }
  body.pre-login #login .login-btn {
    background: linear-gradient(135deg, #ffb27a 0%, #ff7a45 52%, #e9541d 100%) !important;
    color: #140b06 !important;
    border: 1px solid rgba(255, 211, 178, .55) !important;
    box-shadow:
      0 18px 36px -18px rgba(255, 106, 46, .72),
      0 1px 0 rgba(255, 255, 255, .45) inset !important;
  }
  body.pre-login #login .login-btn span { color: #140b06 !important; font-weight: 800 !important; }
  body.pre-login #login .login-hint { opacity: .46 !important; }
  body.pre-login #login .login-status {
    color: #8ff0b0 !important;
    background: rgba(70, 200, 120, .10) !important;
  }
}

/* ---------- 4. PDF/CV: "Sığdır" + sayısal zoom -------------------------- */
@media (max-width: 720px) {
  #win-pdf .pdf-app--new .pdf-zoom {
    min-width: 96px !important;
    justify-content: space-between !important;
    padding: 3px 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .075) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
  }
  #win-pdf .pdf-app--new #pdf-zv {
    min-width: 52px !important;
    padding: 0 3px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #ffb27a !important;
  }
  #win-pdf .pdf-app--new .pdf-zbtn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .05) !important;
  }
  #win-pdf .pdf-app--new .pdf-sheet {
    background: #090b10 !important;
    border-radius: 10px !important;
  }
}

/* ---------- 5. MARKET: sol panelde üst/alt kırpılma yok ---------------- */
@media (min-width: 721px) {
  .appstore { height: 100% !important; min-height: 0 !important; }
  .as-rail {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
  }
  .as-brand, .as-rail-foot { flex: 0 0 auto !important; }
  .as-nav { flex: 0 0 auto !important; min-height: 0 !important; overflow: visible !important; }
}
@media (max-width: 720px) {
  #win-market.mobile .appstore:not(.side-closed) .as-rail {
    padding-top: 2px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #win-market.mobile .appstore:not(.side-closed) .as-brand {
    padding-top: 12px !important;
  }
}

/* ---------- 6. CLUB: mobilde "oda kur" her zaman görünür --------------- */
@media (max-width: 720px) {
  #win-club .club4-head-actions #club-new { display: none !important; }
  #win-club .club4-fab {
    display: inline-flex !important;
    right: 14px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #win-club .club4:has(.club4-stage:not([hidden])) .club4-fab {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #win-club .club4-grid { padding-bottom: 76px !important; }
  #win-club .club4-fab span { font-size: 19px !important; }
}

/* ---------- 7. OYUNLAR: XOXO zorluk + skor, mobil dokunma --------------- */
.xoxo-app .game-head { margin-bottom: 8px; }
.xoxo-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.xoxo-levels { display: flex; gap: 6px; }
.xoxo-levels .xoxo-lvl {
  flex: 1 1 0;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: .72em;
  font-weight: 800;
}
.xoxo-levels .xoxo-lvl.on {
  color: #140b06;
  background: linear-gradient(135deg, #ffb27a, #ff7a45);
  border-color: transparent;
}
.xoxo-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-2) 62%, transparent);
  font-size: .64em;
  color: var(--muted);
}
.xoxo-stats span { display: inline-flex; align-items: baseline; gap: 4px; }
.xoxo-stats b { color: var(--fg); font-size: 1.1em; }
.xoxo-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.xoxo-hint { font-size: .62em; color: var(--muted); }
.xoxo-cell.win {
  box-shadow: inset 0 0 0 2px #ffd166, 0 0 18px -4px rgba(255, 209, 102, .8) !important;
  animation: xoxoWin .9s ease-in-out infinite alternate;
}
@keyframes xoxoWin { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@media (max-width: 720px) {
  .xoxo-levels .xoxo-lvl { min-height: 44px; font-size: .78em; }
  .xoxo-foot .btnl { flex: 1 1 100%; min-height: 44px; }
  .xoxo-hint { width: 100%; text-align: center; }
  .game-app .btnl { min-height: 40px; }
}

/* ---------- 8. TERMİNAL BANNER: mobilde daha canlı --------------------- */
@media (max-width: 720px) {
  .banner--cool .bn-art {
    background-size: 220% 100% !important;
    animation: bnShimmer 5.4s linear infinite;
  }
  .banner--cool .bn-cmd {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9.5px;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .50);
    white-space: nowrap;
    overflow: hidden;
  }
  .banner--cool .bn-cmd b { color: #7ee787; font-weight: 700; }
  .banner--cool .bn-caret {
    width: 6px; height: 11px;
    display: inline-block;
    background: #ffb27a;
    box-shadow: 0 0 8px rgba(255, 178, 122, .8);
    animation: bnCaret 1.05s steps(1, end) infinite;
  }
  .banner--cool .bn-tags { padding-top: 2px !important; }
}
@keyframes bnShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
@keyframes bnCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .banner--cool .bn-art,
  .banner--cool .bn-caret,
  .xoxo-cell.win { animation: none !important; }
}

/* ============================================================================
   2026-10-27 · MOBİL SON KATMAN — giriş kartı, pencere üst barı, terminal
   banner'ı, Market ön-girişi, Ayarlar araması ve PDF yakınlaştırma.
   Bu blok dosyanın en sonunda: yukarıdaki tüm çakışan mobil denemeleri ezer.
   Masaüstü (>720px) hiç etkilenmez.
   ========================================================================== */
@media (max-width: 720px) {
  /* ---- 1. Pencere üst barı: PC gibi ince, altında ölü bant yok ---------- */
  /* Pencere kenarlara tam yapışmasın: 6px nefes payı. Üst bar 30px, gövde
     de tam 30px pay alıyor; barın altında ayrıca boş bir şerit yok. */
  :root {
    /* Menü çubuğu 28px yüksek; pencere ondan sonra 6px nefesle başlıyor. */
    --mb-h: 28px !important;
    --win-gap: 6px !important;
    --winbar-h: 30px !important;
  }
  .win.mobile,
  .app.win.mobile,
  #windows .win.mobile,
  #windows .app.win.mobile,
  #app.win.mobile,
  #app {
    top: calc(var(--mb-h) + var(--win-gap)) !important;
    left: var(--win-gap) !important;
    right: var(--win-gap) !important;
    width: auto !important;
    height: calc(100dvh - var(--mb-h) - var(--dock-h) - 2 * var(--win-gap)) !important;
    max-height: calc(100dvh - var(--mb-h) - var(--dock-h) - 2 * var(--win-gap)) !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, var(--fg) 11%, transparent) !important;
    box-shadow: 0 16px 40px -22px rgba(0, 0, 0, .55) !important;
  }
  /* Telefonda terminal şeridi: mac trafik ışıkları gerçek pencere düğmeleri
     (kapat / küçült / büyüt) ve cv · mail · in · gh · dil kısayolları tek
     satırda geri geliyor. Pencere adı üst menü çubuğunda zaten "Terminal"
     olarak yazdığı için burada tekrar edilmiyor; böylece 320px'te bile
     hiçbir düğme taşmıyor. */
  #app > .tbar {
    display: flex !important;
    height: var(--winbar-h) !important;
    min-height: var(--winbar-h) !important;
    padding: 0 10px !important;
    gap: 8px !important;
    align-items: center !important;
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--fg) 9%, transparent) !important;
  }
  #app > .tbar .tbar__dots {
    display: flex !important;
    gap: 0 !important;
    flex: none !important;
  }
  /* Görsel nokta 10px kalıyor, dokunma alanı 20px: parmakla kapat/küçült/
     büyüt demek kolay olsun. Renkler ::after'da, span şeffaf hit alanı. */
  #app > .tbar .tbar__dots span,
  #app > .tbar .tbar__dots span:nth-child(3) {
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    background: transparent !important;
    border: 0 !important;
  }
  #app > .tbar .tbar__dots span::after {
    content: "" !important;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-3);
  }
  #app > .tbar .tbar__dots span:nth-child(1)::after { background: #ff5f57; }
  #app > .tbar .tbar__dots span:nth-child(2)::after { background: #febc2e; }
  #app > .tbar .tbar__dots span:nth-child(3)::after { background: #28c840; }
  #app > .tbar .tbar__title { display: none !important; }
  #app > .tbar .tbar__quick {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: auto !important;
    flex: none !important;
    min-width: 0 !important;
  }
  #app > .tbar .tbar__quick a,
  #app > .tbar .tbar__lang-btn {
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }
  .win.mobile .win__bar {
    height: var(--winbar-h) !important;
    min-height: var(--winbar-h) !important;
    padding: 0 12px !important;
  }
  .win.mobile .win__body {
    padding-top: var(--winbar-h) !important;
  }
  /* Chirp/Forum kendi panellerinde bir kez daha bar payı veriyordu; gövde
     artık payı verdiği için o ikinci boşluk kaldırılıyor. */
  #win-chirp .chirp-side { padding-top: 10px !important; }
  #win-chirp .chirp-main { padding-top: 12px !important; }
  #win-forum .forum { padding-top: 0 !important; }

  /* ---- 2. Kilit ekranı: kart gerçekten yatayda ortalansın --------------- */
  /* `.login-card-wrap` de kart kurallarıyla birlikte 20px padding + 360px
     genişlik alıyordu; kart 20px sağa kayıp ekranın sağ kenarından taşıyordu
     ("giriş kartı kaymış"). Wrap sadece taşıyıcı olsun. */
  body.pre-login #login .login-card-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block !important;
  }
  body.pre-login #login .login-card-wrap > .login-card,
  body.pre-login #login .login-card,
  #login.login .login-card {
    width: min(360px, calc(100vw - 28px)) !important;
    max-width: min(360px, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
  }

  /* ---- 3. Terminal ASCII: PC'deki geniş CEM AKAN başlığının aynısı ----- */
  /* Telefonda da düz terminal çıktısı: sahte pencere çerçevesi yok. Başlık
     72 sütuna göre ölçeklenir, tek renk ve taşmadan sığar. */
  .banner {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: clamp(6px, calc((100vw - 60px) / 72 / 0.6), 10px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    white-space: pre !important;
    overflow-x: auto !important;
    padding: 0 !important;
    margin: 6px 0 12px !important;
    color: var(--accent, #ffb08a) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
    animation: none !important;
    text-shadow: none !important;
  }

  /* ---- 4. Market ön-girişi: tek sütun, tam genişlik --------------------- */
  /* `.pl-gate--market .pl-full-body` (2 sütun) medya sorgusundaki 1 sütun
     kuralını özgüllükle eziyordu; metin 150px'lik bir şeride sıkışıyor,
     sağ yarısı boş kalıyordu. Ayrıca `.pl-full` bir kez daha bar payı
     verdiği için başlık 100px aşağıdan başlıyordu. */
  .pl-gate--market .pl-full-body,
  .pl-gate--fill .pl-full-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .pl-gate--market .pl-full-art,
  .pl-gate--fill .pl-full-art { display: none !important; }
  .pl-gate--fill .pl-full {
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .pl-full-copy h2,
  .pl-gate--market .pl-full-copy h2 {
    font-size: clamp(21px, 6.2vw, 27px) !important;
    line-height: 1.1 !important;
  }
  .pl-full-copy .pl-sub { max-width: none !important; }
  .pl-full-copy .pl-redirect-acts { max-width: none !important; }
  .pl-full-copy .pl-go { width: 100% !important; }

  /* ---- 5. Ayarlar arama kutusu: bir tık daha kompakt -------------------- */
  #win-settings .set-search {
    flex: 1 1 150px !important;
    max-width: 220px !important;
    height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    margin-bottom: 0 !important;
  }
  #win-settings .set-search svg { width: 13px !important; height: 13px !important; flex-basis: 13px !important; }
  #win-settings .set-search input {
    font-size: .72em !important;
    line-height: 1.2 !important;
    height: 18px !important;
  }

  /* ---- 6. PDF/CV: iframe kutusu büyüyünce gerçek zoom ------------------- */
  #win-pdf #pdf-frame {
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: top left !important;
  }
  #win-pdf .pdf-sheet {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  /* PDF küçültülünce etrafı siyaha boğulmasın: tarayıcının kendi PDF
     görüntüleyicisi de #525659 zemin kullanıyor. Aynı renk verilince
     sayfa tek parça kalıyor, koyu bir çerçeve oluşmuyor. */
  #win-pdf .pdf-app--new .pdf-sheet,
  #win-pdf .pdf-app--new #pdf-frame {
    background: #525659 !important;
  }
}

/* ============================================================================
   Ayarlar → Terminal boot: sade seçenek listesi
   Büyük sahte ekran önizlemeleri yerine okunur dört radyo satırı. Seçim
   anında kaydedilir; "öngöster" düğmesi yok.
   ========================================================================== */
.tboot-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tboot-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tboot-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tboot-opt.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--fg);
}
.tboot-dot {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg) 34%, transparent);
  display: grid;
  place-items: center;
}
.tboot-opt.on .tboot-dot { border-color: var(--accent); }
.tboot-opt.on .tboot-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.tboot-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tboot-copy b { font-size: .78em; line-height: 1.25; color: var(--fg); }
.tboot-copy i { font-style: normal; font-size: .66em; line-height: 1.4; color: var(--muted); }
@media (max-width: 720px) {
  .tboot-opts { grid-template-columns: 1fr; }
}

/* PDF mobilde "Sığdır" en küçük ölçek: eksi düğmesi orada pasif. */
#win-pdf .pdf-app--new .pdf-zbtn:disabled {
  opacity: .35;
  cursor: default;
}

/* ============================================================================
   MOBİL TERMİNAL BOOT — 2026-10-28
   ----------------------------------------------------------------------------
   Hızlı boot artık kaydın ilk dört "bellek testi" satırını kopyalamıyor;
   quickBootFrames() çekirdek → servis → başlık akışını kuruyor. Modül şeridi
   de blok karakterlerle bir anda %100 olmuyor: `.bootbar` gerçekten doluyor.
   Satır girişleri telefonda biraz daha yumuşak (fade + 4px yukarı kayma).
   ========================================================================== */
.bootbar {
  display: inline-block;
  width: 132px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  overflow: hidden;
  vertical-align: middle;
}
.bootbar > i {
  display: block;
  height: 100%;
  width: var(--bootbar-pct, 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #ffb08a), var(--ok, #22c55e));
  animation: bootbar-fill .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes bootbar-fill {
  from { width: 0; }
}
@media (max-width: 720px) {
  #out .ln { animation: boot-line-in .24s cubic-bezier(.2, .8, .2, 1) both; }
  .bootbar { width: 108px; }
}
@keyframes boot-line-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bootbar > i { animation: none; }
  #out .ln { animation: none; }
}

/* ============================================================================
   2026-10-28 · MOBİL UYGULAMA RÖTUŞLARI
   ----------------------------------------------------------------------------
   Tek katman: Chirp/Forum üst bar çakışması, tekrar eden panel düğmesi, Market
   çekmecesinin pencereden kısa açılması, Files marka ikonu, Görev Yöneticisi
   boyu, Yılan yön tuşları, PDF indirme düzeni ve Creator'ın app boyutunda
   açılması. Hepsi <=720px; masaüstü değişmez.
   ========================================================================== */
@media (max-width: 720px) {
  /* ---- 1. Chirp / Forum: üst bar içeriği artık ezmiyor ------------------ */
  /* Bu iki uygulama `.win__body { padding: 0 !important }` diyordu; gövde
     35px'te başlayıp 30px'lik pencere barının altında kalıyordu. */
  #win-chirp .win__body,
  #win-forum .win__body {
    padding-top: var(--winbar-h, 30px) !important;
  }
  /* Chirp'te soldaki › yeniden-aç sekmesi zaten var; tepedeki ☰ kopyaydı. */
  #win-chirp #chirp-bar-menu { display: none !important; }
  #win-chirp .chirp-reopen { display: grid !important; }
  /* Duvar kağıdı/terminal arkadan sızmasın: bu üç okuma yüzeyi opak. */
  #win-chirp .win__body,
  #win-chirp .chirp-wrap,
  #win-chirp .chirp,
  #win-forum,
  #win-forum .win__body,
  #win-forum .forum,
  #win-forum .forum-main,
  #win-blog .win__body {
    background: var(--bg) !important;
  }

  /* ---- 2. Blog: menü çubuğunda "Blog" yazıyor, içeride tekrarı yok ----- */
  #win-blog .blog-head { display: none !important; }
  #win-blog .blog-tool { padding-top: 4px !important; }

  /* ---- 3. Market çekmecesi: pencerenin tam boyu ------------------------ */
  /* Eski kural top: mb+50 / bottom: dock+8 veriyordu; çekmece pencerenin
     içinde 48px aşağıdan başlayıp 68px yukarıda bitiyor, "üstten/alttan
     kesik" görünüyordu. Artık gövdenin tamamı (barın hemen altı → pencere
     tabanı). */
  #win-market.mobile .appstore:not(.side-closed) .as-rail {
    top: var(--winbar-h, 30px) !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: min(340px, 90vw) !important;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 18px 18px 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* ---- 4. Files: marka ikonu ortada ------------------------------------ */
  /* `.fxa-brand span { display:block !important }` metin kuralı ikonun
     kendisini de yakalıyor, grid'i eziyordu: folder glifi 38px kutunun
     sol-üst köşesine yapışıyordu. Kuralı ikon dışına daraltıyoruz. */
  /* DİKKAT: `.fxa-brand span { display:block !important }` (0,1,1) kuralı
     `.fxa-brand-ic` (0,1,0) kuralından daha güçlü. Bu yüzden seçiciyi
     `.fxa-brand > .fxa-brand-ic` yapıyoruz; yoksa ikon yine sol-üste yapışır. */
  .fxa-brand > .fxa-brand-ic {
    display: grid !important;
    place-items: center !important;
    flex: none !important;
  }
  .fxa-brand-ic svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }
  .fxa-brand > div span { display: block !important; }

  /* ---- 5. Görev Yöneticisi: app boyu, liste içinde kayar --------------- */
  #windows #win-tasks.mobile {
    height: calc(100dvh - var(--mb-h) - var(--dock-h) - 2 * var(--win-gap)) !important;
    max-height: calc(100dvh - var(--mb-h) - var(--dock-h) - 2 * var(--win-gap)) !important;
  }
  #windows #win-tasks.mobile .win__body {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  #win-tasks .tasks {
    height: 100%;
    min-height: 0;
    gap: 8px !important;
  }
  #win-tasks .tasks-hud { flex: none !important; }
  #win-tasks #task-cv { flex: none !important; height: 84px !important; }
  #win-tasks .tasks-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  /* ---- 6. Yılan: parmakla oynanır yön tuşları -------------------------- */
  #win-snake .snake-wrap { gap: 9px !important; }
  #win-snake .snake-pad {
    width: min(320px, 94%) !important;
    gap: 9px !important;
    margin: 6px auto 4px !important;
  }
  #win-snake .snake-pad button {
    height: 58px !important;
    border-radius: 15px !important;
    font-size: 21px !important;
    background: color-mix(in srgb, var(--fg) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--fg) 18%, transparent) !important;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s ease, transform .12s ease;
  }
  #win-snake .snake-pad button:active {
    background: var(--accent) !important;
    color: var(--bg) !important;
    transform: scale(.96);
  }

  /* ---- 7. PDF: tek satır kompakt araç şeridi --------------------------
     Bu blok daha önce indirme düğmesini kendi satırına alıp 40px yüksekliğinde
     tam genişlik yapıyordu. Sonuç: telefonda araç şeridi 63px'e çıkıyor,
     belgeye yalnızca ekranın yarısı kalıyordu. Diğer mobil PDF kuralları
     (31515/37770) tek satır diyor; bu blok da onlarla aynı dili konuşmalı. */
  #win-pdf .pdf-app--new .pdf-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 8px !important;
    min-height: 44px !important;
  }
  #win-pdf .pdf-app--new .pdf-name { flex: 1 1 auto !important; order: 0 !important; min-width: 0 !important; }
  #win-pdf .pdf-app--new .pdf-actions {
    flex: 0 0 auto !important;
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
  }
  #win-pdf .pdf-app--new .pdf-zoom { padding: 1px !important; gap: 0 !important; }
  #win-pdf .pdf-app--new .pdf-zbtn { width: 26px !important; height: 26px !important; font-size: 14px !important; }
  #win-pdf .pdf-app--new #pdf-zv { min-width: 34px !important; font-size: 10px !important; }
  #win-pdf .pdf-app--new .pdf-dl {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 0 !important;
    white-space: nowrap !important;
    display: inline-grid !important;
    place-items: center !important;
  }
  #win-pdf .pdf-app--new .pdf-dl::before { content: "⬇"; font-size: 15px; }
  #win-pdf .pdf-app--new #pdf-external {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 0 !important;
    white-space: nowrap !important;
    display: inline-grid !important;
    place-items: center !important;
  }
  #win-pdf .pdf-app--new #pdf-external::before { content: "↗"; font-size: 14px; }

  /* ---- 8. Creator: diğer app'ler gibi, app boyutunda -------------------- */
  /* Eskiden 100dvh'lik tam ekran bir katmandı: menü barı/dock kayboluyor,
     içerik kısa kaldığında altta kocaman boş siyah alan kalıyordu. Şimdi
     pencere alanı kadar (menü barı + dock görünür), gövde kayar, footer
     dipte sabit. */
  .cr-layer {
    inset: calc(var(--mb-h) + var(--win-gap)) var(--win-gap)
      calc(var(--dock-h) + var(--win-gap)) var(--win-gap) !important;
    padding: 0 !important;
    place-items: stretch !important;
    background: rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
  .cr-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent) !important;
    overflow: hidden !important;
    box-shadow: 0 18px 44px -24px #000c !important;
  }
  .cr-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .cr-preview {
    flex: none !important;
    height: 160px !important;
    min-height: 0 !important;
  }
  .cr-controls {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  .cr-foot {
    position: static !important;
    flex: none !important;
  }
  /* Dört sekme 390px'e sığmıyordu ("Sounds" sağdan kesiliyordu). Yatay
     kaydırma vardı ama ilk bakışta kesik görünüyordu; aralık/etiketleri
     daraltıp dördünü de tek satırda görünür yapıyoruz. */
  .cr-tabs {
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  .cr-tab {
    padding: 9px 10px !important;
    font-size: 12px !important;
    letter-spacing: -0.01em;
  }
  .cr-tab span { font-size: 10px !important; }

  /* ---- 9. Blog araç çubuğu: "all topics" sağdan taşıyordu ---------------- */
  /* input'un tarayıcı varsayılanı min-content genişliği (~20 karakter)
     flex:1 ile küçülmesini engelliyordu; select de küçülmüyordu. */
  #win-blog .blog-tool {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #win-blog #blog-search {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }
  #win-blog #blog-cat {
    flex: 0 1 auto !important;
    max-width: 46% !important;
    min-width: 0 !important;
  }

  /* ---- 10. PDF Fit: sayfa sahnenin tepesine yapışmasın ------------------- */
  /* Sayfa yüksekliği A4 oranıyla sınırlı olduğu için kısa kalıyor. iframe'e
     auto margin verince %100'de ortalanır; zoom'da kutu taştığında auto
     margin 0'a düşer, yani sayfa yine sol-üstten başlar ve üst kenar
     kesilmez. (align-items burada işe yaramadı: `margin:0 auto` kuralı.) */
  #win-pdf .pdf-app--new .pdf-sheet {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #win-pdf .pdf-app--new #pdf-frame {
    flex: none !important;
    margin: auto !important;
  }
}



/* ============================================================================
   SON TUR — mat sol paneller, mobil dock, giriş, Chirp, Creator, TayOne
   ----------------------------------------------------------------------------
   Bu dosya baştan sona append-override olduğu için bu blok EN SONDA durur ve
   yukarıdaki aynı ağırlıklı/eski kuralları bilerek ezer.
   ========================================================================== */

/* --- 1. SOL PANELLER: cam değil, MAT yüzey -------------------------------
   Forum'un kanal paneli `#win-forum .forum-side` (1,1,0) kuralıyla yarı
   saydam kalmıştı; aşağıdaki eski `.forum-side` (0,1,0) kuralı onu geçemiyordu.
   Aynı ID ağırlığıyla ve en sonda yazarak bütün rayleri opak zemine indiriyoruz.
   -------------------------------------------------------------------------- */
.chat-side,
.nt2-side,
.fxa-side,
.as-rail,
.chirp-side,
.forum-side,
.mu-side,
.pdf-side,
.t3-side,
.mk-side,
.pub-side,
.wm-side {
  background: var(--bg-2, var(--bg, #14161c)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#win-forum .forum-side,
#win-forum .forum-head--new,
#win-forum .forum-toolbar,
#win-chirp .chirp-side,
#win-chat .chat-side,
#win-files .fxa-side,
#win-notes .nt2-side,
#win-market .as-rail,
#win-pdf .pdf-side,
#win-music .mu-side {
  background: var(--bg-2, var(--bg, #14161c)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- 2. Panel açıkken "paneli aç" düğmesi görünmez -----------------------
   Düğme yalnızca panel kapalıyken (side-closed) ortaya çıkar; panel açılınca
   kaybolur, böylece açık panelin üstünde yüzen ikinci bir ok kalmaz.
   -------------------------------------------------------------------------- */
.fxa:not(.side-closed) .fxa-reopen,
.appstore:not(.side-closed) .as-reopen,
#win-chirp .chirp:not(.side-closed) .chirp-reopen,
#win-forum .forum:not(.side-closed) .forum-side-open,
#win-forum .forum-head--new .forum-side-open,
#win-forum .forum-body:not(.side-closed) .forum-side-open,
.pdf-app:not(.side-closed) .pdf-reopen,
.mu:not(.side-closed) .mu-side-open,
.nt2:not(.side-closed) .nt2-reopen,
.chat-shell:not(.collapsed) .chat-reopen {
  display: none !important;
}

/* --- 3. TayOne bilgi penceresi: değişkenler body'de yok ------------------
   `tayAlertsDialog()` kartı document.body'ye ekliyor; --t-* değişkenleri ise
   yalnızca `.tay` içinde tanımlı. Bu yüzden "mail gönder" düğmesinin
   `background: var(--t-amber)` değeri geçersiz oluyor, düğme saydam kalıyor
   ve koyu metin koyu kartın üstünde görünmüyordu. Değişkenleri modalın
   kendisine de veriyoruz; düğmeye ayrıca açık renk yedeği yazıyoruz.
   -------------------------------------------------------------------------- */
.tay-modal {
  --t-bg: rgba(23, 19, 14, 0.34);
  --t-bg2: rgba(31, 26, 19, 0.96);
  --t-bg3: rgba(40, 33, 23, 0.98);
  --t-card: rgba(34, 28, 20, 0.86);
  --t-line: #3a3125;
  --t-line2: #4a4030;
  --t-fg: #f6eee0;
  --t-mid: #c3b6a2;
  --t-dim: #948772;
  --t-amber: #ffb457;
  --t-mint: #8fe0b0;
  --t-coral: #ff8a6b;
  --t-sky: #8ec5e8;
  --t-lilac: #c9a0dc;
}
.tay-modal .tay-btn {
  background: #ffffff08 !important;
  border-color: var(--t-line2, #4a4030) !important;
  color: var(--t-fg, #f6eee0) !important;
}
.tay-modal .tay-btn--primary {
  background: var(--t-amber, #ffb457) !important;
  border-color: var(--t-amber, #ffb457) !important;
  color: #22180c !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.tay-modal .tay-modal-actions { position: relative; z-index: 1; }

/* --- 4. Giriş: kart yatayda ortalı, saat tam ortada --------------------- */
@media (max-width: 720px) {
  body.pre-login #login {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  body.pre-login #login .login-stage {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 112px) 14px
      calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  body.pre-login #login .login-card-wrap,
  body.pre-login #login .login-card-wrap > .login-card,
  body.pre-login #login .login-card,
  #login.login .login-card {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.pre-login #login .login-card-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  body.pre-login #login .login-clock,
  #login .login-clock {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  body.pre-login #login .login-clock b,
  body.pre-login #login .login-clock span,
  #login .login-clock b,
  #login .login-clock span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* --- 5. Chirp mobil: tek hizalama çizgisi ------------------------------- */
@media (max-width: 720px) {
  #win-chirp .chirp-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: calc(var(--winbar-h, 46px) + 8px) 12px
      calc(26px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  #win-chirp .chirp-main > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  #win-chirp .chirp-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }
  #win-chirp .chirp-bar b { flex: 1 1 auto !important; margin: 0 !important; }
  #win-chirp .chirp-bar > span { flex: 0 0 auto !important; }
  #win-chirp .chirp-bar-add,
  #win-chirp .chirp-bar-menu,
  #win-chirp .chirp-bar-back { flex: 0 0 auto !important; }
  #win-chirp .chirp-stories {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
  }
  #win-chirp .chirp-atmo {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
    margin: 0 !important;
  }
  #win-chirp .chirp-countdown { margin-left: auto !important; }
}

/* --- 6. Creator: yayın bölümü de görünür ve kaydırılabilir -------------- */
@media (max-width: 720px) {
  .cr-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  .cr-head,
  .cr-tabs,
  .cr-foot { flex: 0 0 auto !important; }
  .cr-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .cr-preview { flex: 0 0 auto !important; height: 128px !important; }
  .cr-controls {
    flex: 1 1 auto !important;
    min-height: 96px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* Görünür bir alt sınır: yayın bölümü ayrı bir blok gibi başlasın,
       kontrollerin ortasında "kesilmiş" görünmesin. */
    border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent) !important;
  }
  .cr-pub {
    flex: 0 0 auto !important;
    max-height: 34% !important;
    padding-top: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent) !important;
  }
  .cr-pub-row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
  .cr-pub-lbl { flex: none !important; }
  .cr-pub-ta { min-height: 64px !important; }
  /* Üç düğme tek satırda: "apply / save / publish" alt alta iki satıra
     yayılınca kartın altındaki alanı yiyordu. */
  .cr-foot {
    grid-template-columns: 1fr 1fr 1.35fr !important;
    gap: 6px !important;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cr-foot #cr-publish { grid-column: auto !important; }
  .cr-foot .btnl {
    min-height: 42px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
}

/* --- 7. Yedi ikonlu telefon dock'u dar ekranda da taşmasın -------------- */
@media (max-width: 380px) {
  #dock {
    gap: 3px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    justify-content: center !important;
  }
  .dock-it { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
}

/* ============================================================================
   2026-10-28 — TELEFON SON KATMANI (PDF, dock, Chirp, Creator, açılır katmanlar)
   ----------------------------------------------------------------------------
   Owner feedback:
     • PDF hâlâ tam sığmıyor + garip gri kareler
     • mobil varsayılan navbar'dan Terminal çıksın
     • Blog ikonu PDF'ye benziyor (app.js'te açık kitaba çevrildi)
     • Chirp mobilde fazla aşağıda, üstte siyah bant
     • Creator'da ad/açıklama/foto mobilde her yeri kaplıyor → son adım
     • klasör/launcher/uzun sağ-tık menüleri dock'un üstüne taşıyor
   Bu blok en sonda; yukarıdaki mobil denemeleri bilerek ezer.
   ========================================================================== */

/* --- 1. SAĞ-TIK / UYGULAMA MENÜLERİ: uzun menü kırpılmasın ---------------- */
/* Eski kod yalnızca konumu sınırlıyordu; menü ekrandan uzunsa alt/üst kısmı
   sessizce kayboluyordu. Artık menü kaydırılabilir ve viewport içinde kalır. */
#ctx,
.appmenu,
#win-ctx {
  max-height: calc(100dvh - 24px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* --- 2. PDF: tam sayfa sığdır + temalı zemin ----------------------------- */
/* Chrome'un PDF görüntüleyicisi iframe'in içinde kendi gri zeminini çizer.
   Dıştaki sahne de gri olduğu için sayfanın etrafı "gri kareler" gibi
   görünüyordu. Sahneyi uygulama yüzeyine çeviriyoruz; yalnızca iframe'in
   kendi ince çerçevesi kalıyor. Fit artık view=Fit (tam sayfa). */
#win-pdf .pdf-app--new .pdf-stage {
  background: transparent !important;
}
#win-pdf .pdf-app--new .pdf-sheet {
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--accent, #4f9dff) 12%, var(--bg-2, #151b2b)) 0%,
      var(--bg, #0b1020) 72%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg, #fff) 8%, transparent) !important;
}
#win-pdf .pdf-app--new #pdf-frame {
  background: transparent !important;
}

/* --- 3. MOBİL: güvenli alan + açılır katmanlar ---------------------------- */
@media (max-width: 720px) {
  /* iPhone çentiği/status bar'ı: menü çubuğu yalnızca 28px'e sabitlenince
     pencereler çentiğin altına giriyordu ("açılan app'ler navbar'a geliyor").
     Yükseklik artık safe-area'yı İÇERİYOR; pencereler onun altından başlar. */
  :root {
    --mb-h: calc(28px + env(safe-area-inset-top, 0px)) !important;
  }
  #menubar {
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: border-box !important;
  }

  /* --- 3a. PDF: mobilde üst şerit tek satır, sahne temalı ---------------- */
  #win-pdf .pdf-name { display: none !important; }
  #win-pdf .pdf-status { display: none !important; }
  #win-pdf .pdf-bar {
    justify-content: center !important;
    padding: 6px 8px !important;
    min-height: 0 !important;
  }
  #win-pdf .pdf-actions {
    width: 100% !important;
    justify-content: center !important;
  }
  #win-pdf .pdf-app--new .pdf-stage { padding: 6px !important; }
  #win-pdf .pdf-app--new .pdf-sheet { border-radius: 10px !important; }

  /* --- 3b. Klasör: dock'un üstünde ortalanmış sayfa --------------------- */
  .folder-overlay {
    left: calc(var(--win-gap, 6px) + 2px) !important;
    right: calc(var(--win-gap, 6px) + 2px) !important;
    top: calc(var(--mb-h) + 8px) !important;
    bottom: calc(var(--dock-h) + 8px) !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }
  .folder-overlay[hidden] { display: none !important; }
  .folder-overlay .folder-sheet {
    width: min(360px, 100%) !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* --- 3c. Tüm uygulamalar: menü çubuğu ile dock arasında, kaydırılabilir - */
  #launcher.start {
    left: calc(var(--win-gap, 6px) + 2px) !important;
    right: calc(var(--win-gap, 6px) + 2px) !important;
    top: calc(var(--mb-h) + var(--win-gap, 6px)) !important;
    bottom: calc(var(--dock-h) + var(--win-gap, 6px)) !important;
    transform: none !important;
    width: auto !important;
  }
  #launcher.start .launch-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #launcher.start .start-search,
  #launcher.start .start-foot { flex: 0 0 auto !important; }
  #launcher.start .start-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* --- 3d. Uzun sağ-tık menüsü: dock'un üstünde kal, kendi içinde kaydır - */
  #ctx,
  .appmenu,
  #win-ctx {
    max-height: calc(100dvh - var(--mb-h) - var(--dock-h) - 24px) !important;
    overflow-y: auto !important;
  }

  /* --- 3e. Chirp: çift üst boşluk (siyah bant) kaldırıldı ---------------- */
  /* .win__body zaten --winbar-h kadar pay veriyor; .chirp-main içinde ikinci
     kez aynı payı vermek içeriği ~46px aşağı itiyordu. */
  #win-chirp .chirp-main { padding-top: 8px !important; }
  #win-chirp .chirp-side { padding-top: 8px !important; }

  /* --- 3f. Creator: yayın bilgileri yalnızca SON ADIMDA ------------------ */
  /* Stüdyo açıkken ad/açıklama/foto bloğu render edilmiyor (app.js). Son
     adımda ise kalan tüm yüksekliği alır ve kendi içinde kayar. */
  .cr-card.pub-open .cr-pub {
    display: block !important;
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cr-card.pub-open .cr-foot {
    grid-template-columns: 1fr 1.35fr !important;
  }
  .cr-card.pub-open .cr-foot .cr-sp { display: none !important; }
  .cr-card.pub-open .cr-foot #cr-publish { grid-column: auto !important; }
}

/* ============================================================================
   2026-10-28 · İKİNCİ TUR — PDF tek yüzey, Chirp'in üst şeridi, menü sınırları
   ----------------------------------------------------------------------------
   • PDF: tarayıcının PDF görüntüleyicisi sayfanın etrafına kendi #525659
     zeminini çiziyor. iframe sahneyi doldurduğu için bu zemin kocaman gri
     dikdörtgenler hâlinde görünüyordu ("garip gri kareler"). Artık iframe
     SAYFA BOYUTUNDA (app.js applyZoom) ve süs kutuları kaldırıldı: tek yüzey,
     üstünde beyaz sayfa.
   • Chirp (mobil): uygulama pencerenin boş başlık şeridinin altında 30px
     aşağıda başlıyordu. Telefonda şerit gizlenir; trafik ışıkları Chirp'in
     kendi başlık çubuğuna taşınır (C-hat'te olduğu gibi).
   ========================================================================== */

/* --- 1. PDF: süs yok, tek yüzey ----------------------------------------- */
.pdf-app--new .pdf-sheet,
.pdf-app--new #pdf-frame,
#win-pdf .pdf-app--new .pdf-sheet,
#win-pdf .pdf-app--new #pdf-frame {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
#win-pdf .pdf-app--new .pdf-stage {
  background: transparent !important;
  padding: 0 !important;
}
#win-pdf .pdf-app--new .pdf-sheet {
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
/* Sayfa tek başına durur: ince bir kenar + yumuşak gölge, kutu değil. */
#win-pdf .pdf-app--new #pdf-frame {
  flex: none !important;
  display: block !important;
  border-radius: 3px !important;
  box-shadow: 0 18px 46px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07) !important;
}
.pdf-app--new .pdf-empty { background: color-mix(in srgb, var(--bg, #14161c) 94%, transparent) !important; }

/* --- 2. Chirp: telefonda pencere şeridi yok ------------------------------ */
/* Yalnızca telefonda doldurulur (mountWinDots); masaüstünde pencere şeridi var. */
.chirp-dots { display: none; }
@media (max-width: 720px) {
  #win-chirp .win__bar { display: none !important; }
  #win-chirp .win__body { padding-top: 0 !important; }
  #win-chirp .chirp-main {
    padding: 6px 10px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #win-chirp .chirp-bar {
    margin: 0 0 8px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
  }
  /* .chirp-bar span kuralı her span'a çip görünümü veriyor (dolgu, kapsül
     arka plan). Trafik ışıkları çip değil: içeride bunu sıfırlıyoruz. */
  .chirp-dots,
  .chirp-dots .wdots {
    display: flex; align-items: center; flex: 0 0 auto; gap: 5px;
    margin: 0; padding: 0 !important; background: none !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  /* .wdots/.wdot temel kuralları 12px'e sabitliyor (max-width/max-height);
     böylece Chirp'in noktaları diğer uygulamaların pencere şeridiyle AYNI
     ölçüde kalır.
     `#win-chirp .chirp-bar span` (1,1,1) dolguyu zorla veriyor, o yüzden
     seçici ondan daha güçlü: #win-chirp .chirp-dots .wdot (1,2,0). */
  #win-chirp .chirp-dots .wdots {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    flex: 0 0 auto !important; gap: 6px !important;
  }
  /* Diğer uygulamaların pencere şeridindeki noktalar 12px (temel .wdot
     kuralı max 12px'e sabitliyor). Chirp aynı ölçüde olmalı ki daha büyük
     görünmesin. */
  #win-chirp .chirp-dots .wdot {
    flex: 0 0 12px !important;
    width: 12px !important; height: 12px !important;
    min-width: 12px !important; min-height: 12px !important;
    max-width: 12px !important; max-height: 12px !important;
    padding: 0 !important; box-sizing: border-box !important;
    border-radius: 50% !important;
    font-size: 0 !important; color: transparent !important;
    aspect-ratio: 1 / 1 !important;
  }
  #win-chirp .chirp-dots + .chirp-bar-menu { margin-left: 2px; }
}

/* ============================================================================
   2026-10-29 · MOBİL MÜZİK ÇALARI — taşıma kontrolleri geri
   ----------------------------------------------------------------------------
   `@media (max-width: 760px) { .mu-mid { display: none } }` yüzünden telefonda
   şarkı çalarken oynat/duraklat, önceki/sonraki, karıştır ve tekrar düğmeleri
   hiç görünmüyordu; çubukta yalnızca parça adı kalıyordu. Çubuk artık üç satır:
   kapak+ad (sağda ses), ortada kontroller, altta ilerleme.
   ========================================================================== */
@media (max-width: 760px) {
  #win-music .mu-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "now right" "mid mid" !important;
    align-items: center !important;
    gap: 8px 10px !important;
    padding: 9px 10px 10px !important;
    height: auto !important;
  }
  #win-music .mu-now { grid-area: now; min-width: 0; }
  #win-music .mu-right { grid-area: right; display: flex; align-items: center; gap: 6px; }
  #win-music .mu-vol { width: 70px !important; }
  #win-music .mu-mid {
    grid-area: mid;
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
  }
  #win-music .mu-ctrl {
    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;
  }
  #win-music .mu-ic { width: 34px !important; height: 34px !important; font-size: 1.15em !important; }
  #win-music .mu-play { width: 46px !important; height: 46px !important; }
  #win-music .mu-play::before { font-size: 16px; }
  #win-music .mu-play.playing::before { font-size: 14px; }
  #win-music .mu-prog { grid-template-columns: 34px 1fr 34px !important; gap: 8px !important; }
  #win-music .mu-prog span { font-size: 0.62em !important; }
  #win-music .mu-art { width: 40px !important; height: 40px !important; border-radius: 9px !important; }
  #win-music .mu-now-txt b { font-size: 0.8em !important; }
  #win-music .mu-now-txt span { font-size: 0.66em !important; }
}