/* Crystal theme: palette, facets and the pulse line come from the logo. Loaded after app.css and only overrides it. */
:root {
  --font-brand: "Cinzel", "Manrope", "Times New Roman", serif;
  --page: #141327;
  --text: #f3eefc;
  --text-muted: #b3a9cd;
  --line: rgba(196, 170, 255, 0.16);
  --line-strong: rgba(214, 192, 255, 0.32);
  --elev: rgba(150, 120, 230, 0.08);
  --card: rgba(24, 18, 46, 0.72);
  --glow: rgba(140, 100, 230, 0.4);
  --violet: #c6a8ff;
  --blue: #96a2ff;
  --pink: #eaa8dc;
  --crystal-hi: #f1e6ff;
  --crystal: #a983f2;
  --crystal-mid: #7656c8;
  --crystal-deep: #3f2a78;
  --magenta: #c766b4;
  --rim-hi: rgba(238, 224, 255, 0.46);
  --rim-side: rgba(214, 192, 255, 0.3);
  --rim: rgba(196, 170, 255, 0.2);
  --rim-lo: rgba(204, 110, 186, 0.3);
  --ecg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M0 12h44l4-7 5 15 5-19 5 21 4-10h53' fill='none' stroke='%23d9c2ff' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- background: blue → violet → magenta, like the logo ---------- */
.page-bg {
  background:
    radial-gradient(760px 560px at 6% 2%, rgba(78, 102, 190, 0.5) 0%, transparent 60%),
    radial-gradient(720px 560px at 100% 100%, rgba(170, 72, 140, 0.46) 0%, transparent 60%),
    radial-gradient(620px 480px at 92% 8%, rgba(110, 70, 170, 0.3) 0%, transparent 60%),
    linear-gradient(150deg, #2a3466 0%, #1d1d3d 32%, #19162f 56%, #33203f 82%, #52294f 100%);
}

/* faint star dust, as inside the crystals */
.page-bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(220, 200, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 38%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 30% 64%, rgba(230, 210, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 88% 72%, rgba(255, 220, 245, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 88%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 6% 82%, rgba(210, 200, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 54% 6%, rgba(255, 255, 255, 0.5), transparent 60%);
}

.orb-a { background: radial-gradient(circle, rgba(80, 110, 220, 0.42) 0%, rgba(80, 110, 220, 0.12) 40%, transparent 68%); }
.orb-b { background: radial-gradient(circle, rgba(150, 100, 240, 0.42) 0%, rgba(150, 100, 240, 0.12) 40%, transparent 68%); }
.orb-c { background: radial-gradient(circle, rgba(200, 90, 170, 0.4) 0%, rgba(200, 90, 170, 0.12) 40%, transparent 68%); }
.orb-d { background: radial-gradient(circle, rgba(120, 130, 255, 0.26) 0%, rgba(120, 130, 255, 0.08) 40%, transparent 68%); }

/* ---------- crystal shards ---------- */
.shard {
  position: absolute;
  pointer-events: none;
  width: var(--w, 90px);
  height: var(--h, 220px);
  opacity: var(--o, 0.5);
  background: url("/img/crystal-shard.webp?v=l3") center / contain no-repeat;
  transform: rotate(var(--r, 0deg));
  backface-visibility: hidden;
  will-change: transform;
  animation: shard-float var(--t, 18s) ease-in-out infinite;
}

.shard-1 { left: -20px; top: 9%; --w: 80px; --h: 168px; --r: -28deg; --o: 0.5; --t: 21s; }
.shard-2 { left: 44px; top: 3%; --w: 40px; --h: 84px; --r: -8deg; --o: 0.4; --t: 17s; }
.shard-3 { right: -14px; top: 16%; --w: 72px; --h: 150px; --r: 26deg; --o: 0.48; --t: 23s; }
.shard-4 { right: 46px; top: 31%; --w: 32px; --h: 68px; --r: 12deg; --o: 0.34; --t: 15s; }
.shard-5 { left: -6px; bottom: 5%; --w: 110px; --h: 230px; --r: 206deg; --o: 0.42; --t: 26s; }
.shard-6 { right: -24px; bottom: 1%; --w: 124px; --h: 260px; --r: 154deg; --o: 0.46; --t: 24s; }
.shard-7 { left: 46%; bottom: -56px; --w: 50px; --h: 106px; --r: 186deg; --o: 0.28; --t: 19s; }

@keyframes shard-float {
  0%, 100% { transform: rotate(var(--r, 0deg)) translate3d(0, 0, 0); }
  50% { transform: rotate(calc(var(--r, 0deg) + 4deg)) translate3d(0, -14px, 0); }
}

.bg-lite .shard-2,
.bg-lite .shard-4,
.bg-lite .shard-7 { display: none; }

.bg-static .shard { animation: none !important; will-change: auto; }

.bg-paused .shard,
.is-scrolling .shard { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .shard,
  .loader-ecg path,
  .loader-logo { animation: none !important; }
  .loader-ecg path { stroke-dashoffset: 0; }
}

@media (max-width: 420px) {
  .shard-1 { --h: 160px; --w: 56px; }
  .shard-3 { --h: 140px; --w: 50px; }
  .shard-5 { --h: 200px; --w: 76px; }
  .shard-6 { --h: 230px; --w: 84px; }
}

/* ---------- the scene behind the app: painted crystals in the logo's colours ----------
   On phones and inside Telegram the device fills the screen, so the animated page layer under it is never seen. */
.device,
body:not(.in-tg) .device,
body.is-public:not(.in-tg) .device {
  background: #241a3c url("/img/bg.jpg?v=l3") center bottom / cover no-repeat;
  background-image: image-set(url("/img/bg.webp?v=l3") type("image/webp"), url("/img/bg.jpg?v=l3") type("image/jpeg"));
}

html,
body {
  background-color: #1f1836;
}

@media (max-width: 759px) {
  .page-bg { display: none; }
}

.in-tg .page-bg { display: none; }

/* ---------- desktop device frame ---------- */
@media (min-width: 760px) {
  body:not(.in-tg) .device,
  body.is-public:not(.in-tg) .device {
    border-color: rgba(206, 180, 255, 0.3);
    box-shadow:
      0 48px 110px rgba(6, 4, 20, 0.55),
      0 0 0 1px rgba(150, 110, 240, 0.08),
      0 0 60px rgba(140, 90, 230, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
}

/* ---------- glass becomes a cut crystal ----------
   Corners are cut like the logo's facets: a long cut on the main diagonal (--ca), a short one on the other (--cb).
   clip-path also drops the straight border on the cuts, so ::before redraws those four rims. */
.glass.glass {
  --ca: 14px;
  --cb: 6px;
  border-radius: 0;
  -webkit-clip-path: polygon(var(--ca) 0, calc(100% - var(--cb)) 0, 100% var(--cb), 100% calc(100% - var(--ca)), calc(100% - var(--ca)) 100%, var(--cb) 100%, 0 calc(100% - var(--cb)), 0 var(--ca));
  clip-path: polygon(var(--ca) 0, calc(100% - var(--cb)) 0, 100% var(--cb), 100% calc(100% - var(--ca)), calc(100% - var(--ca)) 100%, var(--cb) 100%, 0 calc(100% - var(--cb)), 0 var(--ca));
  border: 1px solid var(--rim);
  border-top-color: var(--rim-hi);
  border-left-color: var(--rim-side);
  border-bottom-color: var(--rim-lo);
  background:
    linear-gradient(116deg, transparent 0 52%, rgba(170, 140, 255, 0.07) 52% 70%, transparent 70%),
    linear-gradient(200deg, rgba(110, 130, 255, 0.12) 0%, transparent 38%),
    linear-gradient(158deg, rgba(58, 52, 128, 0.7) 0%, rgba(30, 22, 62, 0.76) 46%, rgba(52, 22, 62, 0.82) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.glass.glass::before {
  --da: calc((var(--ca) - 2px) * 0.7071);
  --db: calc((var(--cb) - 2px) * 0.7071);
  background:
    linear-gradient(135deg, transparent var(--da), var(--rim-hi) var(--da), var(--rim-hi) calc(var(--da) + 1.2px), transparent calc(var(--da) + 1.2px)) top left / 50% 50% no-repeat,
    linear-gradient(225deg, transparent var(--db), var(--rim) var(--db), var(--rim) calc(var(--db) + 1.2px), transparent calc(var(--db) + 1.2px)) top right / 50% 50% no-repeat,
    linear-gradient(315deg, transparent var(--da), var(--rim-lo) var(--da), var(--rim-lo) calc(var(--da) + 1.2px), transparent calc(var(--da) + 1.2px)) bottom right / 50% 50% no-repeat,
    linear-gradient(45deg, transparent var(--db), var(--rim) var(--db), var(--rim) calc(var(--db) + 1.2px), transparent calc(var(--db) + 1.2px)) bottom left / 50% 50% no-repeat,
    radial-gradient(1px 1px at 14% 24%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(1px 1px at 72% 18%, rgba(226, 206, 255, 0.6), transparent 70%),
    radial-gradient(1.4px 1.4px at 88% 64%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(1px 1px at 36% 82%, rgba(240, 200, 255, 0.5), transparent 70%),
    radial-gradient(1px 1px at 58% 46%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 28%);
}

.hero-card.glass {
  --ca: 22px;
  --cb: 8px;
}

.sheet__card.glass,
.gate__card.glass {
  --ca: 20px;
  --cb: 8px;
}

/* the sheet scrolls: rims painted on ::before would scroll away with the content */
.sheet__card.glass::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 30%);
}

.hw-row.glass,
.toggle.glass,
.st-invite.glass {
  --ca: 10px;
  --cb: 4px;
}

/* the round blob in the hero corner turns into a crystal */
.hero-card::after {
  right: -4px;
  top: -10px;
  width: 92px;
  height: 132px;
  border-radius: 0;
  opacity: 0.92;
  background: url("/img/crystal-cluster.webp?v=l3") center top / contain no-repeat;
  transform: rotate(10deg);
  filter: none;
}

.hero-card--compact::after,
.hero-card--compact .hero-card::after {
  width: 58px;
  height: 84px;
  right: 6px;
  top: 8px;
  opacity: 0.85;
  transform: rotate(6deg);
}

/* titles must not run under the crystal */
.hero-card > :first-child,
.hero-card h1 {
  padding-right: 84px;
}

.hero-card--compact > :first-child,
.hero-card--compact h1 {
  padding-right: 60px;
}

/* ---------- small crystals in places ---------- */
.section__head h2::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 22px;
  margin-right: 9px;
  vertical-align: -5px;
  background: url("/img/crystal-shard-sm.webp?v=l3") center / contain no-repeat;
  transform: rotate(14deg);
  filter: drop-shadow(0 0 3px rgba(190, 150, 255, 0.6));
}

.subj-bar {
  width: 5px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 5px, 100% calc(100% - 5px), 50% 100%, 0 calc(100% - 5px), 0 5px);
  background: linear-gradient(180deg, #fff 0%, hsl(var(--subj, 260) 60% 72%) 18%, hsl(var(--subj, 260) 48% 52%) 100%);
}

.now-tag i {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  transform: rotate(45deg);
}

.tabbar button {
  position: relative;
}

.tabbar button.is-on::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: radial-gradient(circle, #fff 0 1px, transparent 2px),
    conic-gradient(from 45deg, transparent 0 22%, rgba(255, 255, 255, 0.9) 25%, transparent 28% 47%, rgba(255, 255, 255, 0.9) 50%, transparent 53% 72%, rgba(255, 255, 255, 0.9) 75%, transparent 78% 97%, rgba(255, 255, 255, 0.9) 100%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px rgba(220, 190, 255, 0.95));
}

.empty::before {
  content: "";
  display: block;
  width: 64px;
  height: 92px;
  margin: 0 auto 12px;
  opacity: 0.9;
  background: url("/img/crystal-cluster.webp?v=l3") center / contain no-repeat;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  top: calc(50% - 40px);
  width: 84px;
  height: 120px;
  background: url("/img/crystal-cluster.webp?v=l3") center / contain no-repeat;
  pointer-events: none;
}

.loader::before {
  left: calc(50% - 168px);
  transform: rotate(-32deg);
}

.loader::after {
  left: calc(50% + 72px);
  transform: rotate(32deg) scaleX(-1);
}

/* ---------- the logo where it can be seen ---------- */
.top .logo {
  cursor: pointer;
}

.legal-foot .legal-foot__logo {
  display: block;
  width: 168px;
  height: 168px;
  margin: 6px auto 16px;
  padding: 0;
  border-radius: 34px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(214, 190, 255, 0.36);
  box-shadow:
    0 0 0 6px rgba(150, 110, 240, 0.08),
    0 18px 50px rgba(110, 60, 220, 0.42);
}

.legal-foot__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.logo-view {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 6px 0 4px;
}

.logo-view img {
  display: block;
  width: min(320px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 32px;
  border: 1px solid rgba(214, 190, 255, 0.4);
  box-shadow:
    0 0 0 6px rgba(150, 110, 240, 0.1),
    0 24px 60px rgba(110, 60, 220, 0.5);
}

.logo-view__ecg {
  width: 200px;
  height: 32px;
  overflow: visible;
}

.logo-view__ecg path {
  fill: none;
  stroke: #dcc6ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  filter: drop-shadow(0 0 5px rgba(190, 150, 255, 0.9));
  animation: ecg-draw 1.8s var(--ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .logo-view__ecg path { animation: none; stroke-dashoffset: 0; }
}

.gate__card {
  position: relative;
}

.gate__card::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -10px;
  width: 70px;
  height: 100px;
  z-index: 0;
  opacity: 0.85;
  background: url("/img/crystal-cluster.webp?v=l3") center top / contain no-repeat;
  transform: rotate(16deg);
  pointer-events: none;
}

.hero-card h1 {
  background: linear-gradient(180deg, #ffffff 15%, #e3d2ff 60%, #bfa0f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.eyebrow {
  color: #cdb4ff;
}

/* ---------- header: crystal wordmark and the pulse line ---------- */
.top::after {
  left: 14px;
  right: 14px;
  bottom: -11px;
  height: 22px;
  pointer-events: none;
  background:
    var(--ecg) center / 120px 22px no-repeat,
    linear-gradient(90deg, transparent, rgba(200, 170, 255, 0.5) 30%, transparent calc(50% - 60px), transparent calc(50% + 60px), rgba(200, 170, 255, 0.5) 70%, transparent) center / 100% 1.6px no-repeat;
  filter: drop-shadow(0 0 4px rgba(190, 150, 255, 0.75));
  opacity: 0.85;
}

.logo {
  border-radius: 13px;
  border: 1px solid rgba(214, 190, 255, 0.4);
  box-shadow:
    0 0 0 3px rgba(150, 110, 240, 0.12),
    0 8px 22px rgba(110, 70, 220, 0.38);
}

.wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(180deg, #fbf6ff 0%, #e3cfff 38%, #a57ff0 52%, #7a58cc 64%, #d9c2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(170, 120, 255, 0.45));
}

.kicker {
  color: #b9a6e0;
  letter-spacing: 0.16em;
}

.top__bot,
.top__gear.is-on {
  border-color: rgba(214, 190, 255, 0.34);
  background: linear-gradient(160deg, rgba(190, 160, 255, 0.26) 0%, rgba(110, 80, 200, 0.14) 55%, rgba(199, 102, 180, 0.14) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 6px 16px rgba(90, 50, 180, 0.2);
}

/* ---------- loader ---------- */
.loader {
  background:
    radial-gradient(420px 420px at 50% 42%, rgba(140, 100, 230, 0.28), transparent 70%),
    linear-gradient(150deg, #262f5c 0%, #1a1935 45%, #2e1d3b 80%, #4a2549 100%);
  gap: 22px;
}

.loader-logo {
  width: 176px;
  height: 176px;
  border-radius: 34px;
  border: 1px solid rgba(214, 190, 255, 0.36);
  box-shadow:
    0 0 0 6px rgba(150, 110, 240, 0.08),
    0 20px 60px rgba(110, 60, 220, 0.45);
  animation: logo-beat 1.6s ease-in-out infinite;
}

@keyframes logo-beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.025); }
  24% { transform: scale(1); }
  36% { transform: scale(1.015); }
}

.loader-ecg {
  width: 200px;
  height: 32px;
  overflow: visible;
}

.loader-ecg path {
  fill: none;
  stroke: #dcc6ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  filter: drop-shadow(0 0 5px rgba(190, 150, 255, 0.9));
  animation: ecg-draw 1.4s var(--ease) infinite;
}

@keyframes ecg-draw {
  0% { stroke-dashoffset: 260; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.gate-logo {
  border-radius: 20px;
  border: 1px solid rgba(214, 190, 255, 0.36);
  box-shadow: 0 10px 30px rgba(110, 60, 220, 0.4);
}

/* ---------- buttons, tabs, segments ---------- */
.btn {
  border-color: rgba(206, 182, 255, 0.2);
  background: linear-gradient(160deg, rgba(170, 140, 255, 0.12), rgba(90, 60, 170, 0.08));
}

.btn--primary {
  color: #fff;
  border-color: rgba(236, 220, 255, 0.5);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, #7d62f0 0%, #9a5fe0 48%, #c766b4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 26px rgba(140, 80, 230, 0.36);
  text-shadow: 0 1px 2px rgba(40, 10, 70, 0.35);
}

.btn--ghost { background: transparent; }

.tabbar {
  background: linear-gradient(180deg, rgba(26, 20, 52, 0.9), rgba(18, 14, 34, 0.94));
  border-top: 1px solid rgba(206, 182, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 -10px 30px rgba(10, 4, 30, 0.3);
}

.tabbar button.is-on,
.seg button.is-on {
  color: #fff;
  border-color: rgba(222, 202, 255, 0.42);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, rgba(125, 98, 240, 0.5) 0%, rgba(154, 95, 224, 0.4) 55%, rgba(199, 102, 180, 0.38) 100%);
  box-shadow:
    0 8px 20px rgba(120, 70, 220, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.day {
  border-color: rgba(206, 182, 255, 0.14);
  background: linear-gradient(160deg, rgba(160, 130, 255, 0.08), rgba(60, 40, 120, 0.06));
}

.day.is-on {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, rgba(125, 98, 240, 0.62) 0%, rgba(154, 95, 224, 0.5) 55%, rgba(199, 102, 180, 0.48) 100%);
  border-color: rgba(232, 214, 255, 0.6);
  box-shadow:
    0 0 0 1px rgba(170, 130, 255, 0.2),
    0 12px 26px rgba(120, 70, 220, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.day.is-on small { color: #ffd6f4; }

.switch.is-on {
  background: linear-gradient(135deg, #7d62f0, #c766b4);
  border-color: rgba(236, 220, 255, 0.5);
}

.tabbar button.is-on svg {
  filter: drop-shadow(0 0 4px rgba(220, 200, 255, 0.8));
}

.seg {
  background: rgba(14, 10, 32, 0.45);
  border-color: rgba(206, 182, 255, 0.16);
}

.now-tag {
  color: #dccbff;
  border-color: rgba(214, 190, 255, 0.34);
  background: linear-gradient(160deg, rgba(190, 160, 255, 0.22), rgba(199, 102, 180, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 18px rgba(110, 60, 210, 0.2);
}

.now-tag i {
  background: #f0b4e6;
  box-shadow: 0 0 8px rgba(240, 180, 230, 0.9);
}

.chip--go {
  background: rgba(169, 131, 242, 0.2);
  color: #d6c2ff;
}

.lesson time span { color: #a9b2ff; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(214, 190, 255, 0.55);
  box-shadow:
    0 0 0 4px rgba(150, 110, 240, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.check-row input { accent-color: #a983f2; }

.sheet__dim { background: rgba(8, 4, 22, 0.58); }

.toast {
  background: linear-gradient(160deg, rgba(48, 36, 96, 0.94), rgba(30, 18, 50, 0.94));
  border-color: rgba(214, 190, 255, 0.28);
}

/* =========================================================================
   Gems: small controls are cut like crystals — pointed ends instead of pills.
   The cut ends hide the side borders, so gems are borderless and lit from the top.
   ========================================================================= */
.top__bot,
.chip,
.chip-btn,
.room-copy,
.mark-btn,
.pick,
.sheet-chip,
.hw-clip,
.attach-file,
.now-tag,
.btn,
.att-sum button {
  --g: 7px;
  border-radius: 0;
  border-color: transparent;
  -webkit-clip-path: polygon(var(--g) 0, calc(100% - var(--g)) 0, 100% 50%, calc(100% - var(--g)) 100%, var(--g) 100%, 0 50%);
  clip-path: polygon(var(--g) 0, calc(100% - var(--g)) 0, 100% 50%, calc(100% - var(--g)) 100%, var(--g) 100%, 0 50%);
}

.chip,
.room-copy,
.att-sum button { --g: 6px; }
.btn,
.now-tag { --g: 10px; }
.btn--sm { --g: 8px; }

.chip { padding: 0 11px; }
.room-copy { padding: 2px 11px; }
.chip-btn { padding: 4px 14px; }
.att-sum button { padding: 5px 13px; }
.mark-btn,
.pick,
.attach-file { padding: 0 16px; }
.hw-clip { padding: 0 14px; }
.top__bot { padding: 8px 17px; }
.sheet-chip { padding: 6px 18px; }
.now-tag { padding: 7px 18px; }
.btn { padding: 0 22px; }
.btn--sm { padding: 0 16px; }

.top__bot,
.chip-btn,
.pick,
.sheet-chip,
.hw-clip,
.attach-file,
.btn:not(.btn--primary):not(.btn--ghost) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(120deg, rgba(150, 162, 255, 0.2) 0%, rgba(150, 110, 240, 0.16) 55%, rgba(199, 102, 180, 0.16) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.top__bot.is-on,
.pick.is-on {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(120deg, rgba(150, 162, 255, 0.42) 0%, rgba(150, 110, 240, 0.38) 55%, rgba(199, 102, 180, 0.36) 100%);
}

.btn--ghost {
  background: rgba(170, 140, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(199, 102, 180, 0.2);
}

.btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }

.mark-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.mark-btn.none { background: rgba(170, 140, 255, 0.08); }

.now-tag { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24); }

.top__bot:focus-visible,
.chip-btn:focus-visible,
.room-copy:focus-visible,
.mark-btn:focus-visible,
.pick:focus-visible,
.sheet-chip:focus-visible,
.hw-clip:focus-visible,
.attach-file:focus-visible,
.btn:focus-visible,
.att-sum button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(236, 222, 255, 0.85);
}

/* ---------- chamfered tiles: day picker, segments, tabs ---------- */
.day,
.seg,
.toast,
.week-nav,
.top__gear {
  --c: 10px;
  border-radius: 0;
  -webkit-clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}

.tabbar button { border-radius: 6px; }

.seg button {
  --c: 8px;
  border-radius: 0;
  -webkit-clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}

.day.is-on,
.seg button.is-on,
.tabbar button.is-on {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(230, 140, 210, 0.4);
}

.field input,
.field textarea,
.field select { border-radius: 10px; }

/* ---------- logos keep the crystal cut ---------- */
.logo,
.gate-logo,
.loader-logo,
.logo-view img,
.legal-foot .legal-foot__logo {
  --c: 10px;
  border-radius: 0;
  -webkit-clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}

.gate-logo { --c: 16px; }
.loader-logo,
.legal-foot .legal-foot__logo { --c: 28px; }
.logo-view img { --c: 44px; }

/* ---------- diamond switch ---------- */
.switch {
  --g: 9px;
  border-radius: 0;
  border-color: transparent;
  background: linear-gradient(120deg, rgba(150, 162, 255, 0.16), rgba(150, 110, 240, 0.12) 55%, rgba(199, 102, 180, 0.14));
  -webkit-clip-path: polygon(var(--g) 0, calc(100% - var(--g)) 0, 100% 50%, calc(100% - var(--g)) 100%, var(--g) 100%, 0 50%);
  clip-path: polygon(var(--g) 0, calc(100% - var(--g)) 0, 100% 50%, calc(100% - var(--g)) 100%, var(--g) 100%, 0 50%);
}

.switch::after {
  top: 5px;
  left: 7px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(135deg, #ffffff 0%, #e4d6ff 55%, #c9b0ff 100%);
  transform: rotate(45deg);
}

.switch.is-on::after { transform: translateX(16px) rotate(45deg); }

/* ---------- crystal progress line ---------- */
.progress {
  height: 3px;
  border-radius: 0;
  overflow: visible;
  background: linear-gradient(90deg, rgba(200, 176, 255, 0.1), rgba(200, 176, 255, 0.22) 50%, rgba(200, 176, 255, 0.1));
}

.progress i {
  position: relative;
  border-radius: 0;
  background: linear-gradient(90deg, #96a2ff, #a983f2 55%, #e08fd0);
  box-shadow: 0 0 8px rgba(170, 130, 255, 0.55);
}

.progress i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #f3e9ff;
  box-shadow: 0 0 8px rgba(220, 190, 255, 0.9);
  transform: rotate(45deg);
}

/* =========================================================================
   Performance. Phones and the Telegram webview get no backdrop blur at all:
   it re-renders on every scroll frame. Surfaces become dense instead.
   ========================================================================= */
@media (max-width: 759px), (pointer: coarse) {
  .glass.glass,
  .hero-card,
  .tabbar,
  .sheet__card,
  .toast,
  .gate__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.in-tg .glass.glass,
.in-tg .hero-card,
.in-tg .tabbar,
.in-tg .sheet__card,
.in-tg .toast,
.in-tg .gate__card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 759px), (pointer: coarse) {
  .tabbar { background: linear-gradient(180deg, rgba(24, 18, 48, 0.97), rgba(16, 12, 30, 0.98)); }
  .sheet__card.glass {
    background:
      linear-gradient(200deg, rgba(110, 130, 255, 0.1) 0%, transparent 38%),
      linear-gradient(158deg, #2c2260 0%, #1c1538 50%, #23112f 100%);
  }
  .toast { background: linear-gradient(160deg, #30245f, #1e1232); }
}

.in-tg .tabbar { background: linear-gradient(180deg, rgba(24, 18, 48, 0.97), rgba(16, 12, 30, 0.98)); }

.bg-lite .orb,
.bg-lite .page-bg__aurora {
  animation: none !important;
  will-change: auto;
}

.is-scrolling .orb,
.is-scrolling .page-bg__aurora,
.is-scrolling .logo-view__ecg path,
.is-scrolling .loader-logo { animation-play-state: paused; }

.tt-day {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}