/* DreamDrops — "raat ki diary"
   Gehra neela raat ka aasmaan, chaandni jaisa text, aur genda-phool peela sirf asli kaam (Likho, Install) ke liye.
   Har kahani type ka apna rang (--tc) — rang dekh ke pata chal jaata hai kis tarah ki kahani hai. */

:root {
  --night: #16133A;
  --night-2: #1F1B4D;
  --night-3: #2B2664;
  --moon: #F1EDFF;
  --mist: #ABA6D6;
  --genda: #F7B32B;
  --genda-ink: #2A1A00;
  --line: rgba(241, 237, 255, .11);
  --danger: #FF7A8A;
  --tc: #8C9BFF;

  --sans: 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Tiro Devanagari Hindi', Georgia, 'Times New Roman', serif;
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;

  --top-h: 58px;
  --nav-h: 64px;
  --gut: 16px;
  --r: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 1.0625rem/1.55 var(--sans);
  color: var(--moon);
  background:
    radial-gradient(1200px 520px at 50% -180px, #2C2670 0%, rgba(44, 38, 112, 0) 70%),
    var(--night);
  background-attachment: fixed;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--genda); outline-offset: 2px; border-radius: 6px; }
/* Tap karne pe neela dabba (Android/iPhone ka tap-highlight) nahi; mouse/ungli se focus pe ring nahi — sirf keyboard se */
html { -webkit-tap-highlight-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
[contenteditable]:focus, [contenteditable]:focus-visible { outline: none; }
/* Buttons, menu, diary ke tools: lamba dabane pe text select (neela) na ho */
button, .btn, .chip, .nav, .nav-item, .top, .dy-topbar, .dy-dock, .dy-fmt, .dy-txbar, .dy-keys, .dy-lock, .dy-cover, .acc-tabs, label.dy-sw, .dy-tbtn {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--genda); color: var(--genda-ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--mist); }
.small { font-size: .9rem; }
.center { text-align: center; }
.lead { color: var(--mist); max-width: 34em; }
.row { display: inline-flex; gap: 8px; align-items: center; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.stack { display: grid; gap: 14px; }
.ic { width: 22px; height: 22px; flex: none; }

/* ---------- Top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--gut);
  padding-top: env(safe-area-inset-top);
  background: rgba(22, 19, 58, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 34%, #FFF6D8 0 30%, #F7B32B 62%, #C07A10 100%);
  box-shadow: inset -7px -3px 0 0 rgba(22, 19, 58, .55);
}
.brand-name { font: italic 400 1.45rem/1 var(--serif); letter-spacing: .01em; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.btn-install {
  border: 0; border-radius: 999px; padding: 6px 14px;
  background: var(--genda); color: var(--genda-ink); font-weight: 700; font-size: .92rem; cursor: pointer;
}
.lang-pick select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: .92rem; color: var(--mist); cursor: pointer;
}
.lang-pick select option { background: var(--night-2); color: var(--moon); }
/* iPhone 16px se chhote input pe zoom kar deta hai */
@media (max-width: 767px), (pointer: coarse) { .lang-pick select { font-size: 16px; padding: 4px 10px; } } /* iPad bhi */
@media (max-width: 360px) { .brand-name { font-size: 1.15rem; } .btn-install { padding: 5px 10px; } .lang-pick select { padding: 4px 8px; } .top-actions { gap: 5px; } .lang-pick { flex: none; } }
@media (max-width: 340px) { .brand-name { font-size: 1rem; } .btn-install { padding: 5px 8px; font-size: .86rem; } }

/* ---------- Layout ---------- */
.frame { max-width: 1120px; margin: 0 auto; }
/* min-height: page ka content aane tak footer neeche hi rahe (warna sab kuch uchhalta hai) */
.main { padding: 18px var(--gut) 40px; max-width: 680px; margin: 0 auto; outline: none; min-height: 100vh; }

/* Bottom nav (mobile) */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: rgba(22, 19, 58, .94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.nav-item {
  display: grid; justify-items: center; gap: 2px;
  text-decoration: none; color: var(--mist); font-size: .76rem; padding: 6px 0;
}
.nav-item.is-active { color: var(--moon); }
.nav-item.is-active .ic { stroke-width: 2.3; }
.nav-write .ic {
  width: 46px; height: 46px; padding: 11px; margin-top: -18px;
  border-radius: 50%; background: var(--genda); color: var(--genda-ink); stroke-width: 2.6;
  box-shadow: 0 0 0 5px var(--night);
}
.nav-write span { color: var(--moon); }

.nav-more, .top-search, .rail { display: none; }
@media (min-width: 980px) {
  body { padding-bottom: 0; }
  .frame { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 0 24px; }
  .nav {
    position: sticky; top: calc(var(--top-h) + 20px); height: auto; align-self: start;
    display: grid; grid-template-columns: 1fr; gap: 4px; padding: 0;
    background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav-item { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; padding: 10px 14px; border-radius: 12px; }
  .nav-item:hover { background: var(--night-2); color: var(--moon); }
  .nav-item.is-active { background: var(--night-2); }
  .nav-write { background: var(--genda); color: var(--genda-ink); margin: 10px 0; font-weight: 700; }
  .nav-write:hover { background: #FFC54D; color: var(--genda-ink); }
  .nav-write .ic { width: 22px; height: 22px; padding: 0; margin: 0; background: none; box-shadow: none; }
  .nav-write span { color: var(--genda-ink); }
  .main { margin: 0; padding-top: 26px; }
  /* Sidebar ka doosra hissa: khojo + diary/dukaan */
  .nav { max-height: calc(100vh - var(--top-h) - 30px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--night-3) transparent; padding-bottom: 16px; }
  .nav-more { display: grid; gap: 1px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
  .nav-h { margin: 12px 14px 4px; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mist); opacity: .8; }
  .nav-sub { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 10px; text-decoration: none; color: var(--mist); font-size: .97rem; transition: background .15s, color .15s; }
  .nav-sub:hover, .nav-sub.is-active { background: var(--night-2); color: var(--moon); }
  .nav-sub .em { font: 1.05rem/1 var(--emoji); width: 22px; text-align: center; }
  .nav-keys { margin: 14px 14px 0; color: var(--mist); opacity: .7; font-size: .78rem; }
  /* Upar search */
  .top-search { display: flex; position: relative; flex: 1; max-width: 480px; margin: 0 28px; }
  .top-search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mist); pointer-events: none; }
  .top-search input:not([type=radio]):not([type=checkbox]) { width: 100%; height: 40px; min-height: 40px; padding: 0 40px 0 42px; border-radius: 999px; border: 1px solid var(--line); background: rgba(31, 27, 77, .8); color: var(--moon); transition: border-color .15s, background .15s, box-shadow .15s; }
  .top-search input::placeholder { color: var(--mist); opacity: .8; }
  .top-search input:not([type=radio]):focus { outline: none; border-color: rgba(247, 179, 43, .6); background: var(--night-2); box-shadow: 0 0 0 4px rgba(247, 179, 43, .12); }
  .top-search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); color: var(--mist); font: 600 .78rem/1 var(--sans); }
  .top-search input:focus + kbd, .top-search input:not(:placeholder-shown) + kbd { display: none; }
}
/* Bade screen: daayein patti */
@media (min-width: 1280px) {
  .frame { max-width: 1380px; grid-template-columns: 230px minmax(0, 1fr) 300px; gap: 36px; }
  .rail { display: grid; align-content: start; gap: 14px; position: sticky; top: calc(var(--top-h) + 20px); align-self: start; padding-top: 26px; max-height: calc(100vh - var(--top-h) - 20px); overflow-y: auto; scrollbar-width: none; }
  .rail[hidden] { display: none !important; }
  body.no-rail .frame { grid-template-columns: 230px minmax(0, 1fr); }
}
.rail-card { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--night-2); border: 1px solid var(--line); text-decoration: none; }
.rail-card h2 { margin: 0; font: 500 1rem/1.3 var(--sans); }
.rail-card p { margin: 0; }
.rail-card .btn { justify-self: start; }
.rail-diary { background: linear-gradient(150deg, rgba(242, 167, 189, .22), rgba(31, 27, 77, .9) 70%); border-color: rgba(242, 167, 189, .35); }
.rail-theme { font: 400 1.15rem/1.3 var(--serif); }
.rail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-chips .chip { font-size: .86rem; text-decoration: none; }
.rail-night { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rail-night li { display: flex; justify-content: space-between; gap: 8px; }
.rail-night a { text-decoration: none; color: var(--moon); }
.rail-night a:hover { text-decoration: underline; }
.rail-night b { color: var(--genda); font-weight: 600; }
.rail-shop { grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: linear-gradient(140deg, rgba(255, 143, 177, .16), var(--night-2)); }
.rail-shop span { display: grid; }
.rail-shop em { font-style: normal; color: #FFB3CB; font-weight: 600; }
.rail-shop:hover { border-color: rgba(255, 143, 177, .5); }

/* ---------- Buttons, chips, fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--night-2);
  color: var(--moon); text-decoration: none; font-weight: 500; cursor: pointer;
}
.btn:hover { border-color: rgba(241, 237, 255, .3); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-primary { background: var(--genda); color: var(--genda-ink); border-color: var(--genda); font-weight: 700; }
.btn-primary:hover { background: #FFC54D; border-color: #FFC54D; }
.btn-ghost { background: transparent; }
.btn-small { min-height: 34px; padding: 4px 13px; font-size: .92rem; }
.btn-wide { width: 100%; }
.btn.is-on { border-color: var(--danger); color: var(--danger); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tab {
  background: none; border: 0; padding: 10px 14px 12px; color: var(--mist); cursor: pointer;
  font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.is-on { color: var(--moon); border-bottom-color: var(--genda); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--mist);
  border-radius: 999px; padding: 5px 13px; font-size: .94rem;
}
.chip.is-on { color: var(--tc, var(--moon)); border-color: var(--tc, var(--moon)); background: rgba(255, 255, 255, .1); background: color-mix(in srgb, var(--tc, #fff) 14%, transparent); }

.field { display: grid; gap: 6px; }
.field > span, .field-row label, .types legend { font-weight: 500; }
.field-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
input:not([type=radio]):not([type=checkbox]), select, textarea {
  width: 100%; border: 1px solid var(--line); background: var(--night-2);
  border-radius: 12px; padding: 11px 14px; color: var(--moon);
}
textarea { resize: vertical; line-height: 1.6; font-family: var(--serif); font-size: 1.08rem; min-height: 180px; }
input::placeholder, textarea::placeholder { color: rgba(171, 166, 214, .7); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--genda); }
.hint { display: flex; justify-content: space-between; color: var(--mist); font-size: .88rem; }

.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.switch input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--genda); flex: none; }
.switch span { display: grid; }
.switch small { color: var(--mist); }
.radio { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.radio input { accent-color: var(--genda); width: 18px; height: 18px; }

.badge {
  display: inline-block; font-size: .78rem; line-height: 1.6; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--mist); margin-left: 6px; vertical-align: middle;
}
.badge-warn { color: #FFD48A; border-color: rgba(255, 212, 138, .35); }
.badge-star { border-color: rgba(247, 179, 43, .5); }

.tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 2px; }
.tag {
  color: var(--tc, var(--mist)); text-decoration: none; font-size: .92rem;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.tags.big .tag, .tag-edit .tag, [data-tag-sugg] .tag {
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; color: var(--mist);
}
.tag.is-on { color: var(--tc); border-color: var(--tc); }
.tag-edit { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-edit:empty { display: none; }

/* ---------- Hero (ek hi yaad rehne wali cheez) ---------- */
.hero { padding: 18px 0 26px; }
.hero-q {
  display: block; text-decoration: none;
  font: 400 clamp(2.05rem, 8.4vw, 3.4rem)/1.12 var(--serif);
  letter-spacing: -.01em;
  color: var(--moon);
  text-shadow: 0 0 38px color-mix(in srgb, var(--tc) 55%, transparent);
  min-height: 2.3em;
  transition: opacity .28s ease, transform .28s ease, text-shadow .6s ease;
}
.hero-q::after {
  content: ''; display: block; width: 64px; height: 3px; margin-top: 16px;
  background: var(--tc); border-radius: 2px; transition: background .6s ease;
}
.hero-q.swap { opacity: 0; transform: translateY(6px); }
.hero-sub { color: var(--mist); max-width: 32em; margin: 14px 0 18px; }

/* ---------- Kahani (feed) ---------- */
.feed { display: grid; }
.story {
  position: relative;
  padding: 18px 0 16px 16px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--tc);
  margin-left: 2px;
  cursor: pointer;
}
.story + .story { margin-top: 0; }
.story-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.story-type { color: var(--tc); text-decoration: none; font-size: .9rem; font-weight: 500; }
.story-title { font: 400 1.42rem/1.28 var(--serif); margin: 2px 0 6px; }
.story-title a { text-decoration: none; }
.story-title a:hover { text-decoration: underline; text-decoration-color: var(--tc); text-underline-offset: 4px; }
.story-excerpt { margin: 0; color: rgba(241, 237, 255, .82); }
.story-excerpt .more { color: var(--tc); text-decoration: none; white-space: nowrap; }
.story-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--mist); font-size: .9rem; flex-wrap: wrap; }
.story-foot time { margin-right: auto; }
.by { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--moon); font-weight: 500; }
a.by:hover span { text-decoration: underline; }
.avatar {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--night-3); font-size: .95em; line-height: 1; flex: none; object-fit: cover;
}
.acts { display: inline-flex; gap: 2px; }
.act {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 9px;
  background: none; border: 0; border-radius: 999px; color: var(--mist); text-decoration: none; cursor: pointer; font-size: .92rem;
}
.act:hover { color: var(--moon); background: var(--night-2); }
.act.is-on, .pill.is-on { color: var(--danger); }
.act.is-on .ic, .pill.is-on .ic { fill: currentColor; }
.pop .ic { animation: pop .32s ease; }
@keyframes pop { 50% { transform: scale(1.35); } }
.fulfilled { color: #A6EB86; font-weight: 700; margin: 8px 0 0; }
.fulfilled.big { font-size: 1.1rem; }

.feed-controls { position: sticky; top: var(--top-h); z-index: 5; background: var(--night); margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.empty-box { padding: 28px 0; display: grid; gap: 14px; justify-items: start; color: var(--mist); }
.sentinel { height: 1px; }

.install-banner {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center;
  margin: 18px 0; padding: 16px; border-radius: var(--r);
  background: linear-gradient(120deg, #2B2664, #1F1B4D); border: 1px solid rgba(247, 179, 43, .35);
}
.install-banner[hidden] { display: none; }
.install-banner p { margin: 0; }
.install-banner .row { grid-column: 1 / -1; }

.ad { margin: 14px 0; min-height: 120px; }

/* ---------- Kahani page ---------- */
.crumbs { display: flex; gap: 8px; color: var(--mist); font-size: .92rem; margin-bottom: 18px; }
.crumbs a { color: var(--mist); }
.read-type { color: var(--tc); font-weight: 500; margin: 0 0 6px; }
.read-title { font: 400 clamp(2rem, 7vw, 2.8rem)/1.15 var(--serif); margin: 0 0 14px; letter-spacing: -.01em; }
.read-by { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: var(--mist); font-size: .94rem; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.reads { display: inline-flex; align-items: center; gap: 4px; }
.reads .ic { width: 18px; height: 18px; }
.read-body {
  font: 400 1.2rem/1.8 var(--serif); max-width: 34em; margin: 22px 0;
  border-left: 3px solid var(--tc); padding-left: 18px;
}
.read-body p { margin: 0 0 1.05em; }
.read-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--night-2); color: var(--moon);
  text-decoration: none; cursor: pointer;
}
.pill.quiet { background: transparent; color: var(--mist); }
.owner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.owner-actions[hidden] { display: none; }
.write-cta { margin: 26px 0; padding: 18px; border-radius: var(--r); background: var(--night-2); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.write-cta p { margin: 0; font: 400 1.2rem/1.3 var(--serif); }

.h-page { font: 400 clamp(1.9rem, 6vw, 2.5rem)/1.15 var(--serif); margin: 4px 0 14px; }
.h-alt { font: 400 1.25rem/1.3 var(--serif); color: var(--mist); margin: -8px 0 14px; }
.type-head { padding-bottom: 8px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 26px 0 0; }
.chips a.chip { text-decoration: none; }
.h-sec { font: 500 1.15rem/1.3 var(--sans); margin: 30px 0 12px; }
.count { color: var(--mist); font-weight: 400; }

.comments { margin-top: 30px; }
.comment-form { display: grid; gap: 10px; justify-items: end; }
.comment-form textarea { min-height: 76px; font-family: var(--sans); font-size: 1rem; }
.comment-list { list-style: none; margin: 18px 0 0; padding: 0; }
.comment { padding: 12px 0; border-bottom: 1px solid var(--line); }
.comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .92rem; }
.comment-head time { color: var(--mist); margin-left: auto; }
.comment p { margin: 6px 0 0 34px; }
.comment-list .empty { color: var(--mist); padding: 10px 0; }

/* ---------- Likho ---------- */
.write { display: grid; gap: 18px; }
.types { border: 0; padding: 0; margin: 0; }
.types legend { margin-bottom: 10px; }
.type-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .type-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.type-opt {
  position: relative; display: grid; gap: 1px; padding: 12px 12px 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-left: 3px solid var(--tc); border-radius: 12px;
  background: var(--night-2);
}
.type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.type-opt .emoji { font-size: 1.25rem; }
.type-opt strong { font-weight: 500; }
.type-opt small { color: var(--mist); font-size: .84rem; line-height: 1.35; }
.type-opt:has(input:checked) { border-color: var(--tc); background: rgba(255, 255, 255, .08); background: color-mix(in srgb, var(--tc) 16%, var(--night-2)); }
.type-opt:has(input:focus-visible) { outline: 2px solid var(--genda); outline-offset: 2px; }
.write textarea { border-left: 3px solid var(--tc); }
.write-msg:empty { display: none; }
.write-msg { padding: 12px 14px; border-radius: 12px; background: var(--night-2); border: 1px solid rgba(255, 212, 138, .35); color: #FFE2AE; }
.write-msg a { color: var(--genda); }
[data-voice].is-on { border-color: var(--danger); color: var(--danger); }

/* ---------- Explore ---------- */
.search input { font-size: 1.05rem; padding: 13px 16px; border-radius: 999px; }
.type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.type-tile {
  display: grid; gap: 2px; padding: 14px; text-decoration: none;
  border-radius: 12px; background: var(--night-2); border-left: 3px solid var(--tc);
}
.type-tile .emoji { font-size: 1.3rem; }
.type-tile strong { font-weight: 500; }
.type-tile span:last-child { color: var(--mist); font-size: .88rem; }
.symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.symbol {
  display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--night-2); text-decoration: none;
}
.symbol-list { display: grid; gap: 8px; }
.symbol-row { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--night-2); text-decoration: none; }
.symbol-row .emoji { font-size: 1.6rem; }
.symbol-row > span:last-child { display: grid; min-width: 0; }
.symbol-row [lang=hi] { color: var(--mist); }
.symbol:hover, .type-tile:hover, .symbol-row:hover { background: var(--night-3); }

/* ---------- Matlab page ---------- */
.meaning { display: grid; gap: 4px; margin: 18px 0; }
.meaning h2 { font: 500 1.05rem/1.3 var(--sans); color: var(--genda); margin: 14px 0 2px; }
.meaning p { margin: 0 0 6px; max-width: 36em; }
.meaning .alt { color: var(--mist); }
.disclaimer { font-size: .9rem; color: var(--mist); border-left: 3px solid var(--line); padding-left: 12px; }

/* ---------- Profile ---------- */
.profile-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 6px 0 18px; border-bottom: 1px solid var(--line); }
.profile-head h1 { font: 400 1.8rem/1.15 var(--serif); margin: 0; }
.profile-stats { grid-column: 1 / -1; display: flex; gap: 18px; color: var(--mist); }
.profile-stats strong { color: var(--moon); font-weight: 700; }
.profile-head .btn { grid-column: 1 / -1; justify-self: start; }
.me-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--night-2); }
.me-card > div { display: grid; flex: 1; }
.me-name { font: 400 1.3rem/1.2 var(--serif); }
.panel { margin: 18px 0; padding: 16px; border-radius: var(--r); background: rgba(31, 27, 77, .6); border: 1px solid var(--line); }
.panel summary { cursor: pointer; font-weight: 500; }
.panel details { margin-top: 12px; }
.panel details form { margin-top: 12px; }
.panel .h-sec { margin-top: 0; }
.avatars { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.avatars legend { margin-bottom: 8px; font-weight: 500; }
.av-opt input { position: absolute; opacity: 0; }
.av-opt .avatar { width: 44px; height: 44px; font-size: 1.3rem; border: 2px solid transparent; cursor: pointer; }
.av-opt input:checked + .avatar { border-color: var(--genda); }
.av-opt input:focus-visible + .avatar { outline: 2px solid var(--genda); outline-offset: 2px; }
.streak { font-weight: 700; color: var(--genda); }

.admin-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.admin-item h3 { font: 400 1.2rem/1.3 var(--serif); margin: 4px 0; }

/* ---------- Footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  padding: 26px var(--gut) 32px; color: var(--mist); font-size: .9rem; border-top: 1px solid var(--line);
}
.foot a { color: var(--mist); text-decoration: none; }
.foot a:hover { color: var(--moon); }

/* Static pages */
.prose { max-width: 36em; }
.prose h1 { font: 400 clamp(1.9rem, 6vw, 2.5rem)/1.15 var(--serif); }
.prose h2 { font: 500 1.15rem/1.3 var(--sans); margin-top: 28px; }
.prose a { color: var(--genda); }
.prose li { margin: 4px 0; }

/* ---------- Sheet + toasts ---------- */
.sheet {
  border: 0; padding: 0; color: var(--moon); background: var(--night-2);
  width: min(520px, 100%); max-width: 100%; margin: auto auto 0; border-radius: 20px 20px 0 0;
  max-height: 88vh;
}
.sheet::backdrop { background: rgba(8, 6, 26, .66); }
@media (min-width: 640px) { .sheet { margin: auto; border-radius: 20px; } }
.sheet-in { position: relative; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
.sheet-h { font: 400 1.4rem/1.2 var(--serif); margin: 0 40px 14px 0; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--night-3); cursor: pointer; }
.sheet-list { display: grid; gap: 8px; }
.sheet-btn {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; width: 100%;
  border-radius: 12px; border: 1px solid var(--line); background: var(--night); text-decoration: none; cursor: pointer; text-align: left;
}
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
@media (min-width: 980px) { .toasts { bottom: 24px; } }
.toast { background: var(--moon); color: var(--night); padding: 11px 16px; border-radius: 12px; font-weight: 500; transition: opacity .35s, transform .35s; }
.toast.out { opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   Meri Diary — raat ko lamp ki roshni me rakhi chamde ki diary
   Kaagaz kreem, syahi neeli, naam aur taala sone ke rang me.
   ===================================================================== */
:root {
  --paper: #F6EEDA;
  --paper-back: #ECE1C6;
  --rule: rgba(66, 104, 156, .30);
  --margin-line: rgba(204, 86, 86, .55);
  --pencil: rgba(70, 56, 40, .62);
  --cv: #6E1F2B; --cv2: #4A121B;
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  --gold-hi: #FFF3C4; --gold: #E2B24E; --gold-lo: #9C7124; --gold-ink: #4A3410;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 0 0.1  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --bw: min(calc(100vw - 40px), 430px, calc((100vh - 290px) * .7));
}
@supports (height: 100dvh) { :root { --bw: min(calc(100vw - 40px), 430px, calc((100dvh - 290px) * .7)); } }
.dy-c-maroon { --cv: #6E1F2B; --cv2: #43101A; }
.dy-c-navy   { --cv: #22305A; --cv2: #121A33; }
.dy-c-forest { --cv: #24443A; --cv2: #12261E; }
.dy-c-black  { --cv: #2B2930; --cv2: #141317; }
/* Pink parivaar — gulabi chamde pe rose-gold foil, satin ribbon */
.dy-c-blush    { --cv: #F2A7BD; --cv2: #D9738F; --strap: linear-gradient(90deg, #A84A66, #D97A96 50%, #A84A66); --rib: #FF8FB1; --rib-lo: #C2577A; --stitch: rgba(255, 255, 255, .6); --foil: linear-gradient(100deg, #7E2546 0%, #B9466C 30%, #FFE3EC 47%, #A23A60 62%, #6A1C3A 100%); --foil-sh: rgba(255, 255, 255, .55); }
.dy-c-rose     { --cv: #D9668A; --cv2: #A23E62; --strap: linear-gradient(90deg, #6E1F3C, #A33B60 50%, #6E1F3C); --rib: #FFC2D4; --rib-lo: #D97C9C; --stitch: rgba(255, 230, 238, .5); }
.dy-c-rosegold { --cv: #E8B4A8; --cv2: #B97C70; --strap: linear-gradient(90deg, #8A5248, #C98E82 50%, #8A5248); --rib: #FFD9CF; --rib-lo: #C48B7E; --stitch: rgba(255, 255, 255, .55); --foil: linear-gradient(100deg, #6E372F 0%, #9C5A4D 30%, #FFEDE6 47%, #8A4A3F 62%, #5E2C25 100%); --foil-sh: rgba(255, 255, 255, .5); }
.dy-c-lavender { --cv: #C3B1EC; --cv2: #8E74CF; --strap: linear-gradient(90deg, #5E4A9A, #8C76CF 50%, #5E4A9A); --rib: #F5B8D6; --rib-lo: #B56F99; --stitch: rgba(255, 255, 255, .55); --foil: linear-gradient(100deg, #3E2A78 0%, #6550A8 30%, #F4EEFF 47%, #56409A 62%, #33236A 100%); --foil-sh: rgba(255, 255, 255, .5); }
.dy-c-peach    { --cv: #F9C3A8; --cv2: #E8907A; --strap: linear-gradient(90deg, #B5624E, #E5927C 50%, #B5624E); --rib: #FF9FB8; --rib-lo: #CF6D8A; --stitch: rgba(255, 255, 255, .6); --foil: linear-gradient(100deg, #7A2E1E 0%, #B0543B 30%, #FFEDE3 47%, #9A4530 62%, #6A2717 100%); --foil-sh: rgba(255, 255, 255, .5); }
.dy-c-berry    { --cv: #B8336F; --cv2: #6E1541; --strap: linear-gradient(90deg, #3E0A22, #6E1541 50%, #3E0A22); --rib: #FFB3D0; --rib-lo: #D5719A; }

.dy-desk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding-block: 4px 24px; }
/* Phone: taala/patta khulte waqt screen se bahar udte hain — page side me na khiske (overflow: clip = 3D cover nahi bigadta) */
@supports (overflow: clip) { @media (max-width: 767px) { .dy-desk { overflow-x: clip; } } }
.dy-desk::before {
  content: ""; position: absolute; inset: -40px -16px auto; height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(440px 340px at 50% 44%, rgba(255, 196, 120, .17), rgba(255, 196, 120, 0) 70%);
}
.dy-loading { color: var(--mist); padding: 60px 0; font: 400 1.2rem 'Kalam', var(--sans); }
.dy-stage { display: grid; justify-items: center; width: 100%; }
.dy-stage > * { grid-area: 1 / 1; }
.dy-h { font: 400 clamp(1.7rem, 6vw, 2.2rem)/1.15 var(--serif); margin: 0; text-wrap: balance; }
.dy-sub { color: var(--mist); margin: 0; max-width: 34em; }
.dy-desk .center, .dy-desk.center { text-align: center; justify-self: center; }
@keyframes dy-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.dy-pop { animation: dy-pop .38s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes dy-shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.dy-shake { animation: dy-shake .42s; }

/* ---------- Upar ki patti ---------- */
.dy-topbar { width: max(var(--bw), min(100%, 460px)); max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; }
.dy-bookname { font: 700 1.2rem/1.2 'Kalam', cursive; color: #F3D891; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dy-topacts { display: flex; gap: 6px; align-items: center; flex: none; }
.dy-ibtn, .dy-lockbtn, .dy-streak {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 40px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--night-2); color: var(--moon); cursor: pointer; padding: 0 10px;
}
.dy-lockbtn { padding: 0 13px; font-weight: 500; }
.dy-streak { padding: 0 11px 0 8px; gap: 3px; font: 700 1rem var(--sans); }
.dy-streak > span { font-family: var(--emoji); font-size: 1.05rem; filter: grayscale(.85) opacity(.7); transition: filter .3s; }
.dy-streak.is-hot > span { filter: none; }
.dy-streak.is-hot { border-color: rgba(255, 150, 60, .55); background: linear-gradient(180deg, rgba(255, 140, 40, .2), rgba(255, 140, 40, .06)), var(--night-2); }
.dy-ibtn svg, .dy-lockbtn svg, .dy-tbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 400px) { .dy-lockbtn span { display: none; } .dy-lockbtn { padding: 0 10px; } }
@media (max-width: 380px) { .dy-topacts { gap: 4px; } .dy-ibtn, .dy-lockbtn, .dy-streak { min-width: 36px; min-height: 38px; padding-inline: 8px; } .dy-streak { padding: 0 8px 0 6px; } }
.dy-hidebtn > span { font: 1.05rem/1 var(--emoji); }

/* ---------- Kitaab ---------- */
.dy-book { position: relative; width: var(--bw); aspect-ratio: 7 / 10; margin-bottom: 30px; perspective: 2400px; perspective-origin: 30% 50%; }
.dy-book:not(.dy-book-sample) { height: calc(var(--bw) * 10 / 7); aspect-ratio: auto; transition: width .55s cubic-bezier(.3, .7, .2, 1); }
.dy-book::before {
  content: ""; position: absolute; inset: -8px -12px -8px -5px; border-radius: 6px 14px 14px 6px; z-index: 0;
  background: var(--grain), linear-gradient(160deg, var(--cv), var(--cv2)); box-shadow: 0 34px 60px rgba(0, 0, 0, .5), 0 8px 18px rgba(0, 0, 0, .35);
}
.dy-edges { position: absolute; top: 5px; bottom: 5px; right: -7px; width: 8px; z-index: 0; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(90deg, #EFE5CB 0 1px, #CDBF9F 1px 2px); }
.dy-leaf { position: absolute; top: 0; right: 0; bottom: 0; width: var(--bw); z-index: 1; touch-action: pan-y pinch-zoom; }
.dy-book-sample .dy-leaf { width: auto; left: 0; }
.dy-leaf .dy-text { touch-action: pan-y pinch-zoom; }
.dy-ribbon { position: absolute; left: 64%; bottom: -36px; width: 14px; height: 74px; z-index: 0; background: linear-gradient(90deg, var(--rib-lo, #7E1720), var(--rib, #C33A45) 50%, var(--rib-lo, #7E1720)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%); }
.dy-grab { position: absolute; top: 0; bottom: 0; width: 22px; z-index: 6; cursor: grab; touch-action: none; }
.dy-grab.l { left: -4px; } .dy-grab.r { right: -6px; }
@media (pointer: coarse) { .dy-grab { width: 14px; } }
.dy-desk.is-locked .dy-grab, .dy-desk.is-editing .dy-grab { display: none; }
.dy-bump { animation: dy-bump .35s; }
@keyframes dy-bump { 40% { transform: translateX(6px); } }

/* ---------- Panna ---------- */
.dy-page {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding-block: 12px 10px;
  border-radius: 3px 10px 10px 3px; overflow: hidden;
  background: var(--grain), linear-gradient(90deg, rgba(60, 40, 10, .13), transparent 7%), var(--paper);
  box-shadow: inset 0 0 46px rgba(150, 110, 50, .12);
  color: var(--ink, #1F3C88);
}
.dy-blank-sheet { display: block; }
.dy-ph, .dy-pf { display: flex; align-items: center; gap: 8px; padding-inline: 58px 18px; font: 400 .92rem/1.3 'Kalam', cursive; color: var(--pencil); min-width: 0; }
.dy-ph { padding-right: 44px; min-height: 34px; }
.dy-ph time { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-pf .dy-owner { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dy-saved { font-size: .8rem; opacity: .8; white-space: nowrap; }
.dy-num { margin-left: auto; flex: none; }
.dy-moodbtn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed rgba(70, 56, 40, .35); background: rgba(255, 255, 255, .35);
  display: grid; place-items: center; cursor: pointer; padding: 0; font: 1.25rem/1 var(--emoji); color: var(--pencil);
}
.dy-moodbtn.has-mood { border: 0; background: none; font-size: 1.6rem; }
.dy-mood-add { font: 400 1.25rem/1 var(--sans); opacity: .6; }
.dy-fav { position: absolute; top: -3px; right: 12px; width: 22px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 4; }
.dy-fav svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, .25); stroke: rgba(150, 40, 50, .45); stroke-width: 1.4; transition: fill .25s, transform .25s; }
.dy-page.is-fav .dy-fav svg { fill: #C33A45; stroke: #7E1720; transform: translateY(3px); }
.dy-dogear { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; pointer-events: none; z-index: 2; transform-origin: 100% 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 49%, rgba(90, 60, 20, .16) 50%, var(--paper-back) 56%); border-top-left-radius: 5px; box-shadow: -1px -1px 3px rgba(60, 40, 10, .12); }
.dy-hint .dy-dogear { animation: dy-ear 1.1s ease-in-out 2; }
@keyframes dy-ear { 50% { transform: scale(2.4); } }
.dy-fresh .dy-page { animation: dy-reveal .45s ease-out; }
@keyframes dy-reveal { from { filter: brightness(.7); } }

/* Likhne ki jagah — 32px ki line pe hi akshar baithe */
.dy-text {
  position: relative; display: block; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; outline: none;
  padding: 6px 18px 40px 58px; background-color: transparent;
  font-family: var(--pfont, 'Kalam', cursive); font-size: 1.24rem; line-height: 32px; color: var(--ink, #1F3C88);
  background-attachment: local; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overflow-wrap: anywhere;
  caret-color: var(--ink, #1F3C88);
}
.dy-text[contenteditable] { cursor: text; }
.dy-text.is-empty::before { content: attr(data-ph); position: absolute; left: 58px; right: 18px; top: 6px; color: rgba(70, 56, 40, .4); pointer-events: none; }
.dy-text.is-broken::before { color: #A3202B; }
.dy-text > *, .dy-text div, .dy-text li, .dy-text h3, .dy-text blockquote { unicode-bidi: plaintext; text-align: start; }
.dy-text div, .dy-text p { margin: 0; }
.dy-text h3 { margin: 0; font-size: 1.45em; line-height: 32px; font-weight: 700; }
.dy-text ul, .dy-text ol { margin: 0; padding-left: 1.3em; }
.dy-text li { line-height: 32px; }
.dy-text blockquote {
  margin: 0; padding: 0 10px; text-align: center; font-style: italic; letter-spacing: .01em;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 90, .2) 18%, rgba(255, 196, 90, .2) 82%, transparent);
}
.dy-text blockquote + blockquote { margin-top: 0; }
.dy-text hr {
  border: 0; height: 32px; margin: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'><g fill='none' stroke='%23715a3c' stroke-opacity='.65' stroke-width='1.3' stroke-linecap='round'><path d='M8 10h52M100 10h52'/><path d='M80 3l7 7-7 7-7-7z'/><path d='M60 10c4-6 9-6 11 0M100 10c-4 6-9 6-11 0'/></g></svg>") center / 150px 20px no-repeat;
}
.dy-text b, .dy-text strong { font-weight: 700; }
.dy-text .ck { display: inline-block; width: 1.15em; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; font-family: system-ui, sans-serif; font-style: normal; color: var(--pencil); }
.dy-text .ck.on { color: #1F6B3A; }
.s-sm, .dy-text font[size="1"], .dy-text font[size="2"] { font-size: .8em; }
.s-lg, .dy-text font[size="4"], .dy-text font[size="5"] { font-size: 1.28em; }
.s-xl, .dy-text font[size="6"], .dy-text font[size="7"] { font-size: 1.7em; line-height: 64px; }
.c-blue { color: #1F3C88; } .c-black { color: #262626; } .c-red { color: #A3202B; } .c-green { color: #1F6B3A; } .c-purple { color: #5B2A86; }
.c-pink { color: #B5175A; } .c-orange { color: #B8500F; } .c-brown { color: #6B4423; } .c-teal { color: #0E6670; } .c-gold { color: #8A6A12; }
.h-yellow, .h-pink, .h-green, .h-blue, .h-orange, .h-purple { border-radius: 3px; padding: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.h-yellow { background: #FFEC8A; } .h-pink { background: #FFC2DA; } .h-green { background: #C6EDB9; } .h-blue { background: #BFE0FF; } .h-orange { background: #FFD3A3; } .h-purple { background: #DCCBFF; }
.al-center { text-align: center !important; } .al-right { text-align: right !important; } .al-justify { text-align: justify !important; }
.dy-readonly { overflow-y: auto; }

/* Kaagaz ke prakaar */
.dy-paper-lined .dy-text, .dy-paper-lined.dy-stub {
  background-image: linear-gradient(90deg, transparent 47px, var(--margin-line) 47px 48px, transparent 48px), repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px);
  background-position: 0 6px;
}
.dy-paper-dots .dy-text { background-image: radial-gradient(circle, rgba(66, 90, 130, .4) 1.1px, transparent 1.4px); background-size: 24px 32px; background-position: 10px 22px; }
.dy-paper-grid .dy-text { background-image: linear-gradient(rgba(66, 104, 156, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(66, 104, 156, .2) 1px, transparent 1px); background-size: 16px 16px; background-position: 0 6px; }
.dy-paper-kraft { --paper: #E9D6AE; --paper-back: #DEC796; --rule: rgba(110, 76, 30, .28); --margin-line: rgba(150, 70, 40, .45); --pencil: rgba(80, 52, 20, .7); }
.dy-paper-kraft { background: var(--grain), var(--grain), radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(120, 80, 20, .22)), linear-gradient(90deg, rgba(60, 40, 10, .16), transparent 7%), var(--paper); }
.dy-paper-kraft .dy-text { background-image: repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px); background-position: 0 6px; }
.dy-paper-rose { --paper: #FBE6E8; --paper-back: #F3D3D7; --rule: rgba(200, 90, 120, .28); --margin-line: rgba(200, 80, 110, .5); }
.dy-paper-rose .dy-text, .dy-paper-sky .dy-text { background-image: linear-gradient(90deg, transparent 47px, var(--margin-line) 47px 48px, transparent 48px), repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px); background-position: 0 6px; }
.dy-paper-sky { --paper: #E6F1FB; --paper-back: #D3E4F4; --rule: rgba(60, 110, 170, .28); --margin-line: rgba(80, 120, 200, .45); }
.dy-paper-night { --paper: #1F2547; --paper-back: #171C38; --pencil: rgba(225, 215, 190, .62); --ink: #F2E7C9 !important; --rule: rgba(200, 210, 255, .12); }
.dy-paper-night { box-shadow: inset 0 0 46px rgba(0, 0, 0, .35); }
.dy-paper-night .dy-text { background-image: radial-gradient(circle, rgba(255, 245, 210, .5) .8px, transparent 1.1px), repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px); background-size: 37px 41px, auto; background-position: 7px 9px, 0 6px; }
.dy-paper-night .dy-text font[color], .dy-paper-night .dy-text [class*="c-"] { filter: brightness(2.3) saturate(.75); }
.dy-paper-night .dy-text.is-empty::before { color: rgba(240, 230, 200, .4); }
.dy-paper-night .dy-moodbtn { border-color: rgba(240, 230, 200, .3); background: rgba(255, 255, 255, .06); }
.dy-paper-night .h-yellow, .dy-paper-night .h-pink, .dy-paper-night .h-green, .dy-paper-night .h-blue, .dy-paper-night .h-orange, .dy-paper-night .h-purple, .dy-paper-night .dy-text span[style*="background"] { color: #1F2547; }

/* Roz ka sawaal (khaali panne pe) */
.dy-prompt {
  position: absolute; left: 46px; right: 12px; bottom: 40px; z-index: 3; display: grid; gap: 7px; padding: 12px 14px;
  border-radius: 14px; background: rgba(255, 252, 242, .94); color: #3B2C1C; box-shadow: 0 6px 18px rgba(60, 40, 10, .16), inset 0 0 0 1px rgba(150, 110, 50, .18);
  font: 400 .9rem/1.35 var(--sans); animation: dy-rise .5s cubic-bezier(.2, 1.2, .4, 1);
}
.dy-prompt.is-hidden { display: none; }
/* Chhota phone: sawaal ka card panne se bahar na nikle — andar hi scroll */
.dy-prompt { max-height: calc(100% - 96px); overflow-y: auto; overscroll-behavior: contain; }
@keyframes dy-rise { from { opacity: 0; transform: translateY(14px); } }
.dy-prompt p { margin: 0; }
.dy-pr-k { font-weight: 700; color: #8A6A12; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; }
.dy-pr-q { font: 700 1.15rem/1.35 'Kalam', cursive; color: #2B3D7A; }
.dy-pr-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dy-pr-or { font-size: .8rem; color: #7A6650; }
.dy-pr-tpls { display: flex; flex-wrap: wrap; gap: 6px; }
.dy-pr-tpls .dy-chip, .dy-pr-row .dy-chip { min-height: 34px; padding: 0 11px; font-size: .84rem; }
.dy-chip-ink { background: #2B3D7A !important; color: #fff !important; border-color: transparent !important; }
.dy-paper-night .dy-prompt { background: rgba(30, 36, 70, .95); color: #EDE4C8; }
.dy-paper-night .dy-pr-q { color: #FFE3A3; }

/* ---------- Stickers aur photo ---------- */
.dy-deco { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dy-st {
  position: absolute; width: 22%; aspect-ratio: 1; pointer-events: auto; touch-action: none; cursor: grab;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(var(--s, 1)); transform-origin: 50% 50%;
  container-type: inline-size; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.dy-st.is-drag { cursor: grabbing; z-index: 2; }
.dy-st-a { display: grid; place-items: center; width: 100%; height: 100%; font: 3.4rem/1 var(--emoji); font-size: 72cqw; }
.dy-st-a.is-lottie { font-size: 0; }
.dy-st-a svg { width: 100% !important; height: 100% !important; display: block; }
.dy-st-a:not(.is-lottie) { animation: dy-bob 2.8s ease-in-out infinite; }
@keyframes dy-bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-5%) rotate(-4deg); } 60% { transform: translateY(2%) rotate(3deg); } }
.dy-st-new { animation: dy-stin .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes dy-stin { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(calc(var(--s, 1) * 1.8)); } }
.dy-st-gone { transition: transform .22s ease-in, opacity .22s; transform: translate(-50%, -50%) scale(.2) !important; opacity: 0; }
.dy-st.is-sel { outline: 2px dashed rgba(220, 150, 20, .95); outline-offset: 3px; border-radius: 10px; z-index: 3; }
.dy-st-x, .dy-st-h {
  position: absolute; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 2px solid #fff;
  background: #2B2664; color: #fff; font: 700 .8rem/1 var(--sans); cursor: pointer; transform: scale(calc(1 / var(--s, 1))); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); touch-action: none;
}
.dy-st-x { top: -16px; left: -16px; background: #C33A45; }
.dy-st-h { right: -16px; bottom: -16px; cursor: nwse-resize; }
.dy-st-h::after { content: "↻"; font-size: .95rem; }
.dy-st-photo { width: 48%; aspect-ratio: auto; }
.dy-polaroid { margin: 0; padding: 6% 6% 20%; background: #FFFDF8; box-shadow: 0 6px 14px rgba(40, 25, 5, .3), 0 1px 2px rgba(40, 25, 5, .3); }
.dy-polaroid img { display: block; width: 100%; height: auto; pointer-events: none; }
.dy-ptape {
  position: absolute; top: -6%; left: 50%; width: 46%; height: 14%; transform: translateX(-50%) rotate(-4deg);
  background: linear-gradient(180deg, rgba(255, 236, 160, .85), rgba(245, 214, 120, .8)); box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  clip-path: polygon(0 10%, 5% 0, 10% 12%, 15% 0, 85% 0, 90% 12%, 95% 0, 100% 10%, 100% 90%, 95% 100%, 90% 88%, 85% 100%, 15% 100%, 10% 88%, 5% 100%, 0 90%);
}

/* ---------- Panna mudna (curl) — sirf transform, koi repaint nahi ---------- */
.dy-f-to { z-index: 1; }
.dy-f-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 2; }
.dy-f-flapbox { z-index: 3; }
.dy-f-mask { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; will-change: transform; }
.dy-f-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.dy-f-in > .dy-page { inset: 0; }
.dy-f-ugrad { position: absolute; left: 0; top: 0; width: 120px; transform-origin: 0 0; will-change: transform, opacity;
  background: linear-gradient(to left, rgba(30, 18, 4, 1), rgba(30, 18, 4, .35) 38%, rgba(30, 18, 4, 0)); }
.dy-f-back { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 3px 10px 10px 3px; overflow: hidden; will-change: transform;
  background: var(--grain), linear-gradient(90deg, rgba(60, 40, 10, .12), transparent 8%), var(--paper-back);
  box-shadow: 0 0 22px 2px rgba(30, 18, 4, .28), 0 0 4px rgba(30, 18, 4, .22); }
.dy-f-ghost { position: absolute; inset: 0; opacity: .12; pointer-events: none; }
.dy-f-ghost, .dy-f-ghost * { background: none !important; box-shadow: none !important; }
.dy-f-bshade { position: absolute; left: 0; top: 0; width: 200px; transform-origin: 0 0;
  background: linear-gradient(to left, rgba(60, 40, 10, .30), rgba(255, 250, 235, .42) 5%, rgba(255, 250, 235, 0) 38%, rgba(60, 40, 10, .10)); }
.dy-f-from .dy-prompt, .dy-f-to .dy-prompt { animation: none; }

/* Dheela panna + tape */
.dy-page.is-loose { transform: rotate(-1.7deg) translate(9px, 5px); box-shadow: inset 0 0 46px rgba(150, 110, 50, .12), -12px 0 18px rgba(0, 0, 0, .28); }
.dy-page.dy-settle { transition: transform .55s cubic-bezier(.3, 1.5, .5, 1); }
.dy-loose { position: absolute; left: 58px; right: 18px; bottom: 44px; z-index: 4; display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border-radius: 8px; background: rgba(255, 249, 232, .9); color: var(--pencil); font: 400 .98rem/1.35 'Kalam', cursive; }
.dy-loose p { margin: 0; }
.dy-tape {
  position: absolute; left: 4px; width: 84px; height: 30px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 253, 238, .9), rgba(232, 222, 188, .86)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 2px, transparent 2px 5px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .4);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 82% 0, 88% 10%, 94% 0, 100% 8%, 100% 92%, 94% 100%, 88% 90%, 82% 100%, 18% 100%, 12% 90%, 6% 100%, 0 92%);
}
.dy-tape.t1 { top: 13%; transform: rotate(-9deg); }
.dy-tape.t2 { bottom: 15%; transform: rotate(7deg); }
.dy-tape-drop { animation: dy-tape .5s cubic-bezier(.2, 1.4, .5, 1) both; }
.dy-tape-drop.t2 { animation-delay: .12s; }
@keyframes dy-tape { from { opacity: 0; translate: 0 -26px; scale: 1.2; } }

/* Fata hua panna */
.dy-torn { background: none; box-shadow: none; }
.dy-under {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 24px 24px 24px 56px; text-align: center; border-radius: 3px 10px 10px 3px;
  background: var(--grain), linear-gradient(90deg, rgba(60, 40, 10, .22), transparent 14%), var(--paper-back);
}
.dy-under-live { z-index: 1; }
.dy-torn-note { margin: 0; font: 400 1.2rem/1.4 'Kalam', cursive; color: var(--pencil); }
.dy-stub { position: absolute; inset: 0 auto 0 0; width: 44px; z-index: 3; background-color: var(--paper); filter: drop-shadow(2px 0 1.2px rgba(60, 40, 10, .35)); }
.dy-stub-live { z-index: 2; }
.dy-stub-rim { position: absolute; inset: 0 auto 0 0; width: 48px; z-index: 2; background: #FFFCF2; filter: drop-shadow(1.5px 0 1px rgba(60, 40, 10, .3)); }
.dy-bits { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(31, 60, 136, .6); stroke: rgba(31, 60, 136, .6); stroke-width: 1.3; stroke-linecap: round; }
.dy-bits path { fill: none; }
.dy-pulling { transition: transform .55s ease-in, opacity .55s; transform: translateX(-28px) rotate(-4deg); opacity: 0; }
.dy-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(70, 56, 40, .35); background: rgba(255, 255, 255, .6); color: #3B2C1C; font: 600 .92rem var(--sans); white-space: nowrap;
}
.dy-tearing .dy-sheet { z-index: 4; transition: none; transform-origin: 30px 100%; }
.dy-tearing .dy-sheet.dy-snap { transition: transform .25s ease-out; }
.dy-sheet.dy-flyaway { transition: transform .75s cubic-bezier(.45, 0, .9, .55), opacity .75s; transform: translate(130%, 55%) rotate(34deg) !important; opacity: 0; }
.dy-grip {
  position: absolute; top: -10px; right: -10px; width: 64px; height: 64px; z-index: 12; border: 0; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle, var(--genda) 0 9px, rgba(247, 179, 43, .38) 10px 20px, transparent 21px);
  animation: dy-pulse 1.4s ease-in-out infinite;
}
.dy-grip.is-held { cursor: grabbing; animation: none; }
@keyframes dy-pulse { 50% { transform: scale(1.18); } }
.dy-tearhint { flex-basis: 100%; margin: 0 0 4px; text-align: center; display: grid; gap: 2px; }
.dy-tearhint small { color: var(--mist); }
.dy-hold {
  position: relative; overflow: hidden; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; touch-action: none;
  border: 1px solid rgba(255, 122, 138, .6); background: transparent; color: var(--danger); font-weight: 600;
}
.dy-hold-fill { position: absolute; inset: 0; background: rgba(255, 122, 138, .28); transform: scaleX(0); transform-origin: left; }
.dy-hold-txt { position: relative; }

/* =====================================================================
   Cover + sunehra taala
   ===================================================================== */
.dy-cover {
  position: absolute; inset: -8px -12px -8px -5px; z-index: 10; transform-style: preserve-3d; transform-origin: 0 50%;
  transition: transform 1.05s cubic-bezier(.55, .05, .25, 1);
}
.dy-cover.dy-opening { transform: rotateY(-180deg); }
.dy-cover.is-moving { transition: none; will-change: transform; }
/* Moti gatte ki jild: ghoomte waqt kinare ki motaai dikhe */
.dy-cover.is-moving .dy-cv-front { transform: translateZ(2.5px); }
.dy-cover.is-moving .dy-cv-inside { transform: rotateY(180deg) translateZ(2.5px); }
.dy-cv-edge { display: none; position: absolute; top: 3px; bottom: 3px; right: -2.5px; width: 5px; transform: rotateY(90deg); border-radius: 2px;
  background: linear-gradient(180deg, var(--cv2), var(--cv) 30%, var(--cv) 70%, var(--cv2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.dy-cover.is-moving .dy-cv-edge { display: block; }
.dy-cv-shade { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 5;
  background: linear-gradient(90deg, rgba(15, 5, 10, .75), rgba(15, 5, 10, .45) 60%, rgba(15, 5, 10, .3)); }
/* Cover ki parchhai panne pe */
.dy-cast { position: absolute; top: 0; bottom: 0; right: 0; width: var(--bw); z-index: 9; pointer-events: none; opacity: 0; transform-origin: 0 50%;
  border-radius: 3px 10px 10px 3px; background: linear-gradient(90deg, rgba(25, 8, 16, .8), rgba(25, 8, 16, .45) 45%, rgba(25, 8, 16, .12)); }
.dy-book-sample .dy-cast { display: none; }
/* Kitaab khulte/band hote waqt baayan panna cover ke neeche chhupa */
.dy-book.is-opening .dy-left, .dy-book.is-opening .dy-edges.l { visibility: hidden; opacity: 0; transition: none; }
.dy-cv-front, .dy-cv-inside { position: absolute; inset: 0; border-radius: 6px 16px 16px 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dy-cv-front {
  background:
    radial-gradient(130% 90% at 25% 12%, rgba(255, 255, 255, .15), transparent 55%),
    radial-gradient(90% 70% at 85% 100%, rgba(0, 0, 0, .38), transparent 60%),
    var(--grain), var(--grain),
    linear-gradient(160deg, var(--cv), var(--cv2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset -8px 0 16px rgba(0, 0, 0, .35), 0 34px 60px rgba(0, 0, 0, .5), 0 8px 18px rgba(0, 0, 0, .35);
}
.dy-cv-inside {
  transform: rotateY(180deg); display: grid; place-items: center; padding: 18%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 220, 150, .13) 0 9%, transparent 10%),
    radial-gradient(circle at 70% 60%, rgba(255, 220, 150, .1) 0 12%, transparent 13%),
    radial-gradient(circle at 40% 85%, rgba(255, 220, 150, .1) 0 8%, transparent 9%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 230, 170, .07) 0 6px, transparent 6px 14px),
    linear-gradient(200deg, var(--cv), var(--cv2));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .45);
}
.dy-bookplate { padding: 18px 16px; border-radius: 6px; background: var(--paper); color: #5A4220; text-align: center; font: 700 1.05rem/1.4 'Kalam', cursive; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px #B8862F, 0 6px 14px rgba(0, 0, 0, .35); }
.dy-spine { position: absolute; inset: 0 auto 0 0; width: 26px; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .09) 55%, rgba(0, 0, 0, .3)); }
.dy-stitch { position: absolute; inset: 14px 14px 14px 38px; border: 2px dashed var(--stitch, rgba(255, 226, 170, .3)); border-radius: 4px 10px 10px 4px; pointer-events: none; }
.dy-cover-name {
  position: absolute; left: 44px; right: calc(15% + 30px); top: 13%; text-align: center; text-wrap: balance;
  font: 700 clamp(1.5rem, 6.6vw, 2.4rem)/1.12 'Kalam', 'Tiro Devanagari Hindi', cursive;
  background: var(--foil, linear-gradient(100deg, #FBEFC4 0%, #D9A84A 30%, #FFF4CF 48%, #B8862F 70%, #F3D891 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1.5px 0 var(--foil-sh, rgba(0, 0, 0, .5))) drop-shadow(0 -1px 0 rgba(255, 255, 255, .1));
}
.dy-cover-name::after { content: ""; display: block; width: 46%; height: 2px; margin: 10px auto 0; background: linear-gradient(90deg, transparent, var(--foil-line, #D9A84A), transparent); }
.dy-c-blush, .dy-c-peach { --foil-line: #A23A60; } .dy-c-lavender { --foil-line: #56409A; } .dy-c-rosegold { --foil-line: #8A4A3F; }
.dy-corner { position: absolute; right: 0; width: 34px; height: 34px; background: linear-gradient(135deg, #F6D88A, #A97A2A); }
.dy-corner.tl { top: 0; border-radius: 0 16px 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.dy-corner.bl { bottom: 0; border-radius: 0 0 16px 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.dy-strap {
  position: absolute; right: 15%; top: -3px; bottom: -3px; width: 26px; border-radius: 3px; z-index: 2;
  background: var(--strap, linear-gradient(90deg, #180f10, #3b2b2c 50%, #180f10)); box-shadow: 2px 0 6px rgba(0, 0, 0, .45);
  transition: transform .5s cubic-bezier(.55, -0.4, .55, 1), opacity .3s ease .18s;
}
/* Taala: sunehri plate (PIN dikhta hai) + pital ke button */
.dy-lock { position: absolute; left: 38px; right: calc(15% - 18px); top: 44%; z-index: 3; display: grid; gap: 12px; transition: transform .5s cubic-bezier(.55, -0.4, .55, 1), opacity .3s ease .18s; }
.dy-plate {
  position: relative; display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 5px 0 6px; border-radius: 15px;
  background: linear-gradient(165deg, #FDECB0 0%, #E3B551 32%, #A9792A 66%, #E9C26A 100%);
  border: 1px solid #6F4E14;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -2px 5px rgba(90, 60, 10, .55), 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .18);
}
.dy-lk-win {
  flex: 1; min-width: 0; height: 36px; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #24180A, #3D290F); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .5);
}
.dy-lk-dots { display: flex; gap: 7px; align-items: center; }
.dy-lk-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 214, 120, .16); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7); transition: background .15s, box-shadow .15s; }
.dy-lk-dots i.on { background: radial-gradient(circle at 35% 35%, #FFF6D0, #FFBE33 55%, #B9770C); box-shadow: 0 0 8px rgba(255, 190, 60, .9); animation: dy-pop .25s ease-out; }
.dy-lk-dots.many { gap: 4px; } .dy-lk-dots.many i { width: 7px; height: 7px; }
.dy-lk-del { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4A3410; display: grid; place-items: center; cursor: pointer; }
.dy-lk-del svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dy-lk-open {
  flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid #6F4E14; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFF2BE, #E4B550 45%, #9C7124 95%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), inset 0 -3px 5px rgba(90, 60, 10, .5), 0 3px 7px rgba(0, 0, 0, .45);
  transition: box-shadow .3s;
}
.dy-padlock { width: 30px; height: 30px; fill: none; stroke: var(--gold-ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dy-padlock rect { fill: rgba(74, 52, 16, .14); }
.dy-shackle { transition: transform .4s cubic-bezier(.3, 1.7, .5, 1); transform-box: fill-box; transform-origin: 100% 100%; }
.is-unlocked .dy-shackle { transform: translateY(-4px) rotate(24deg); }
.is-unlocked .dy-lk-open { box-shadow: 0 0 0 3px rgba(255, 220, 120, .5), 0 0 22px rgba(255, 200, 80, .95); }
.is-unlocked .dy-lk-dots i.on { background: radial-gradient(circle at 35% 35%, #F2FFE0, #7EDB6A 55%, #2E8A2A); box-shadow: 0 0 8px rgba(120, 230, 110, .9); }
.dy-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px 8px; padding: 0 4px; }
.dy-key {
  justify-self: center; width: 100%; max-width: 48px; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  font: 700 1.15rem/1 Georgia, 'Times New Roman', serif; color: #4A3410; text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  background: radial-gradient(circle at 35% 30%, #FFF5CC 0%, #EBC262 38%, #A87A26 80%, #8A611B);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -2px 3px rgba(80, 50, 10, .6), 0 3px 0 #5E4110, 0 5px 9px rgba(0, 0, 0, .45);
  transition: transform .08s, box-shadow .08s;
}
.dy-key:active, .dy-key.dy-press { animation: dy-keypress .16s ease-out; }
@keyframes dy-keypress { 40% { transform: translateY(2.5px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(80, 50, 10, .6), 0 .5px 0 #5E4110, 0 2px 3px rgba(0, 0, 0, .4); } }
.dy-lock.is-off .dy-key, .dy-lock.is-off .dy-lk-open, .dy-lock.is-off .dy-lk-del { cursor: default; }
.dy-cover.is-sample .dy-lock.is-off .dy-keys { opacity: .7; }
.dy-lock.is-busy .dy-lk-win { animation: dy-glow 1s ease-in-out infinite; }
@keyframes dy-glow { 50% { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .75), 0 0 14px rgba(255, 200, 80, .7); } }
.is-unstrapped .dy-lock, .is-unstrapped .dy-strap { transform: translate3d(140px, 30px, 0) rotate(11deg); opacity: 0; }
.dy-lockmsg { margin: -6px 0 0; min-height: 1.4em; text-align: center; color: #F3D891; font-weight: 500; text-wrap: balance; }
.dy-forgot { color: var(--mist); font: inherit; font-size: .9rem; text-align: center; margin-top: -6px; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 10px; }
.dy-forgot:hover { color: #FFD1DE; }
.dy-desk:not(.is-locked) > .dy-lockmsg, .dy-desk:not(.is-locked) > .dy-forgot, .dy-desk:not(.is-locked) > .dy-recover { display: none; }
/* Recovery code */
.dy-h2 { font: 500 1.3rem/1.25 var(--serif); margin: 0; }
.dy-mono, .dy-rkcode { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace; letter-spacing: .06em; }
input.dy-mono { text-transform: uppercase; font-size: 1.05rem; }
.dy-rkcode { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-items: center; gap: 8px 10px; padding: 16px 12px; border-radius: 16px; font-size: clamp(1.15rem, 5vw, 1.45rem); font-weight: 700; color: #4A1328;
  background: linear-gradient(160deg, #FFF0F4, #FAD2DE); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 10px 26px rgba(0, 0, 0, .3); user-select: all; -webkit-user-select: all; }
.dy-rkcode span { padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .7); }
.dy-rkcode i { display: none; }
@media (min-width: 640px) { .dy-modal .dy-rkcode, .dy-recover .dy-rkcode { grid-template-columns: repeat(3, auto); } .dy-setup .dy-rkcode { grid-template-columns: repeat(3, auto); } }
.dy-rkacts { justify-content: center; }
.dy-recover { width: min(100%, 460px); padding: 16px; border-radius: 18px; background: rgba(255, 182, 206, .08); border: 1px solid rgba(255, 182, 206, .3); }
.dy-rec-ok { margin: 0; text-align: center; color: #C9F5C0; font-weight: 500; }
.dy-hr { border: 0; border-top: 1px dashed var(--line); margin: 6px 0; width: 100%; }
.dy-desk.is-locked .dy-topacts, .dy-desk.is-locked .dy-dock { visibility: hidden; }
.dy-desk-setup .dy-lockmsg:empty { display: none; }

/* ---------- Nayi diary ---------- */
.dy-setup { display: grid; gap: 18px; justify-items: center; width: min(100%, 480px); }
.dy-book-sample { width: min(300px, calc(100vw - 60px)); margin-bottom: 8px; }
.dy-form { display: grid; gap: 14px; width: 100%; }
.dy-field { display: grid; gap: 6px; }
.dy-field > span { font-weight: 500; }
.dy-field input[type=password] { letter-spacing: .35em; font-size: 1.2rem; }
.dy-swatches { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.dy-swatches legend { font-weight: 500; margin-bottom: 8px; }
.dy-sw { position: relative; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), transparent 42%), linear-gradient(160deg, var(--cv), var(--cv2)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 3px 8px rgba(0, 0, 0, .3); transition: transform .15s; }
.dy-sw:hover { transform: translateY(-2px); }
.dy-sw input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dy-sw:has(input:checked) { outline: 3px solid var(--genda); outline-offset: 3px; }
.dy-sw:has(input:focus-visible) { outline: 3px solid var(--moon); outline-offset: 3px; }
.dy-warn { margin: 0; padding: 10px 0 10px 14px; border-left: 3px solid var(--genda); color: #FFE2AE; }
.dy-check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.dy-check input { width: 22px; height: 22px; accent-color: var(--genda); }
.dy-err { margin: 0; min-height: 1.3em; color: var(--danger); }
.dy-err:empty { min-height: 0; }
.dy-back { justify-self: center; }

/* =====================================================================
   Neeche ke tools (padhte waqt)
   ===================================================================== */
.dy-dock {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 2px; padding: 5px; max-width: 100%;
  background: rgba(31, 27, 77, .94); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 980px) { .dy-dock { bottom: 14px; } }
.dy-desk.is-editing .dy-dock { visibility: hidden; }
.dy-tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: 14px; border: 0; background: transparent; color: var(--moon); cursor: pointer; font-weight: 500;
}
.dy-tbtn:hover:not(:disabled) { background: var(--night-3); }
.dy-tbtn:disabled { opacity: .32; cursor: default; }
.dy-cap { flex-direction: column; gap: 1px; min-width: 50px; min-height: 52px; padding: 4px 4px 3px; font-size: .7rem; line-height: 1.1; }
.dy-cap span { white-space: nowrap; }
.dy-dock > [data-prev], .dy-dock > [data-next] { background: var(--night-3); border-radius: 50%; min-width: 40px; min-height: 40px; padding: 0; }
@media (max-width: 370px) { .dy-cap { min-width: 42px; } .dy-cap span { font-size: .62rem; } }
/* Bahut chhote phone (320px): aage/peeche ke teer chhupao — panne ungli se palat jaate hain */
@media (max-width: 345px) { .dy-dock > [data-prev], .dy-dock > [data-next] { display: none; } }
.dy-tools { width: max(var(--bw), min(100%, 560px)); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.dy-pno { display: inline-flex; align-items: center; gap: 6px; min-width: 76px; justify-content: center; color: var(--mist); font-weight: 500; }
.dy-pno svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.dy-dock.dy-tools-fixed, .dy-tools.dy-tools-fixed {
  position: fixed; left: 0; right: 0; z-index: 45; width: auto; flex-wrap: wrap; border-radius: 0; border-width: 1px 0 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(22, 19, 58, .97); gap: 8px;
}
@media (min-width: 980px) { .dy-dock.dy-tools-fixed { bottom: 0; } }

/* =====================================================================
   Likhte waqt: Telegram jaisi tool-patti (keyboard ke upar)
   ===================================================================== */
.dy-fmt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center;
  background: rgba(24, 21, 62, .98); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  padding-bottom: env(safe-area-inset-bottom, 0px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.dy-fmt.is-kb { padding-bottom: 0; }
.dy-desk.has-drawer .dy-fmt { display: none; }
.dy-fmt-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1px; overflow-x: auto; padding: 6px 4px 6px 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.dy-fmt-row::-webkit-scrollbar { display: none; }
.dy-fmt-row > button {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px;
  background: transparent; color: var(--moon); cursor: pointer; font: 600 1.1rem/1 Georgia, serif;
}
.dy-fmt-row > button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dy-fmt-row > button:hover { background: rgba(255, 255, 255, .06); }
.dy-fmt-row > button.is-on, .dy-fmt-row > button.is-open { background: rgba(247, 179, 43, .2); color: var(--genda); }
.dy-f-em { font: 1.35rem/1 var(--emoji) !important; }
.dy-f-aa { font: 700 1.15rem/1 'Kalam', cursive !important; }
.dy-f-i { font-style: italic; font-family: Georgia, serif; }
.dy-f-size { font-size: 1.15rem !important; } .dy-f-size small { font-size: .7rem; margin-left: 1px; }
.dy-f-clear small { font-size: .75rem; color: var(--danger); }
.dy-f-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c, #1F3C88); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.dy-fsep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
.dy-fmt-done { flex: none; display: flex; align-items: center; gap: 4px; height: 40px; margin: 6px 8px 6px 2px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--genda); color: var(--genda-ink); font: 700 .92rem var(--sans); cursor: pointer; }
.dy-fmt-done svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 400px) { .dy-fmt-done span { display: none; } .dy-fmt-done { padding: 0 10px; } }
.dy-fmt-sub { flex-basis: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.dy-sw-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); background: var(--c); cursor: pointer; padding: 0; }
.dy-sw-dot.dy-none { background: transparent; color: var(--mist); border-color: var(--line); font-size: 1rem; }
.dy-sz { flex: none; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--night-2); color: var(--moon); cursor: pointer; font-family: 'Kalam', cursive; }
.dy-sz-sm { font-size: .8rem; } .dy-sz-md { font-size: 1rem; } .dy-sz-lg { font-size: 1.25rem; } .dy-sz-xl { font-size: 1.5rem; } .dy-sz-h { font-weight: 700; font-size: 1.15rem; }
.dy-al { flex: none; width: 44px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--night-2); color: var(--moon); display: grid; place-items: center; cursor: pointer; }
.dy-al svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (min-width: 980px) {
  .dy-fmt { left: calc(50% + 126px); right: auto; bottom: 14px; width: min(760px, calc(100vw - 300px)); transform: translateX(-50%); border: 1px solid var(--line); border-radius: 16px; padding-bottom: 0; }
}
.dy-voice { flex-basis: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--moon); font-size: .95rem; }
.dy-voice [data-vt] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mist); }
.dy-voice .dy-chip { background: transparent; color: var(--moon); border-color: var(--line); min-height: 32px; }
.dy-vdot { width: 12px; height: 12px; border-radius: 50%; background: #FF4D5E; box-shadow: 0 0 0 0 rgba(255, 77, 94, .6); animation: dy-rec 1.2s infinite; }
@keyframes dy-rec { 70% { box-shadow: 0 0 0 10px rgba(255, 77, 94, 0); } }
.dy-vlangs { display: flex; flex-wrap: wrap; gap: 8px; }
.dy-modal .dy-chip.is-on, .dy-drawer .dy-chip.is-on { background: var(--genda); color: var(--genda-ink); border-color: transparent; }

/* =====================================================================
   Neeche se aane wala drawer (emoji, stickers, likhawat, mood)
   ===================================================================== */
.dy-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; flex-direction: column;
  height: min(54vh, 440px); background: #1C184A; color: var(--moon);
  border-radius: 22px 22px 0 0; border-top: 1px solid var(--line); box-shadow: 0 -18px 40px rgba(0, 0, 0, .45);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
.dy-drawer.is-in { transform: none; }
@media (min-width: 980px) {
  .dy-drawer { left: calc(50% + 126px); right: auto; width: min(600px, calc(100vw - 300px)); bottom: 14px; border-radius: 20px; border: 1px solid var(--line); transform: translate(-50%, 120%); }
  .dy-drawer.is-in { transform: translate(-50%, 0); }
}
.dy-drawer-in { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dy-dr-x { position: absolute; top: 9px; right: 10px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--night-3); color: var(--moon); cursor: pointer; }
.dy-dr-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dy-tabs { flex: none; display: flex; gap: 2px; overflow-x: auto; padding: 9px 60px 9px 10px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.dy-tabs::-webkit-scrollbar { display: none; }
.dy-tab { flex: none; min-width: 42px; height: 40px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; color: var(--moon); cursor: pointer; font: 1.3rem/1 var(--emoji); }
.dy-tab.is-on { background: var(--night-3); box-shadow: inset 0 -2px 0 var(--genda); }
.dy-tabs-txt .dy-tab, .dy-modal .dy-tabs-txt .dy-tab { font: 600 .92rem var(--sans); padding: 0 12px; }
.dy-dr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 18px; overscroll-behavior: contain; }
.dy-dr-h { margin: 2px 4px 8px; color: var(--mist); font-size: .85rem; font-weight: 600; }
.dy-dr-h small { font-weight: 400; }
.dy-dr-title { margin: 14px 60px 6px 18px; font: 400 1.3rem/1.2 var(--serif); }
.dy-emgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 2px; }
.dy-em { height: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font: 1.85rem/1 var(--emoji); }
.dy-em:hover, .dy-em:focus-visible { background: var(--night-3); }
.dy-subtabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.dy-subtabs::-webkit-scrollbar { display: none; }
.dy-drawer .dy-chip, .dy-modal .dy-chip { background: transparent; color: var(--moon); border-color: var(--line); }
.dy-subtabs .dy-chip { min-height: 34px; padding: 0 12px; font-size: .86rem; }
.dy-stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.dy-stbtn { aspect-ratio: 1; padding: 8%; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .04); cursor: pointer; }
.dy-stbtn:hover { background: rgba(255, 255, 255, .09); }
.dy-stbtn .dy-st-a { font-size: 2.6rem; }
.dy-stbtn .dy-st-a:not(.is-lottie) { animation: none; }
.dy-credit { margin: 12px 4px 0; color: var(--mist); font-size: .72rem; text-align: center; opacity: .8; }
.dy-fonts { display: grid; gap: 8px; }
.dy-fontcard { display: grid; gap: 2px; text-align: start; padding: 10px 14px; border-radius: 14px; background: var(--paper); color: #1F3C88; border: 2px solid transparent; cursor: pointer; }
.dy-fontcard.is-on { border-color: var(--genda); box-shadow: 0 0 0 3px rgba(247, 179, 43, .25); }
.dy-fc-s { font-size: 1.4rem; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-fc-n { font: 500 .78rem/1.2 var(--sans); color: #7A6650; }
.dy-inks { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px; }
.dy-ink { width: 46px; height: 46px; border-radius: 50%; background: var(--c); border: 3px solid #1C184A; outline: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.dy-ink.is-on { outline-color: var(--genda); }
.dy-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.dy-paperbtn {
  position: relative; height: 82px; display: grid; place-items: end center; padding-bottom: 7px; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; background-color: var(--paper); color: #3B2C1C; font: 600 .82rem var(--sans); overflow: hidden;
}
.dy-paperbtn span { position: relative; background: rgba(255, 255, 255, .7); padding: 1px 8px; border-radius: 999px; }
.dy-paperbtn.is-on { border-color: var(--genda); }
.dy-paperbtn.dy-paper-lined, .dy-paperbtn.dy-paper-rose, .dy-paperbtn.dy-paper-sky { background-image: linear-gradient(90deg, transparent 14px, var(--margin-line) 14px 15px, transparent 15px), repeating-linear-gradient(transparent 0 11px, var(--rule) 11px 12px); }
.dy-paperbtn.dy-paper-dots { background-image: radial-gradient(circle, rgba(66, 90, 130, .45) 1px, transparent 1.3px); background-size: 10px 10px; }
.dy-paperbtn.dy-paper-grid { background-image: linear-gradient(rgba(66, 104, 156, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(66, 104, 156, .25) 1px, transparent 1px); background-size: 9px 9px; }
.dy-paperbtn.dy-paper-kraft { background-image: repeating-linear-gradient(transparent 0 11px, var(--rule) 11px 12px), radial-gradient(circle at 50% 50%, transparent 40%, rgba(120, 80, 20, .25)); }
.dy-paperbtn.dy-paper-night { color: #EDE4C8; background-image: radial-gradient(circle, rgba(255, 245, 210, .6) .8px, transparent 1.1px); background-size: 13px 15px; }
.dy-paperbtn.dy-paper-night span { background: rgba(0, 0, 0, .35); }
.dy-moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 6px 12px 10px; }
.dy-moodopt { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 2px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .04); color: var(--moon); cursor: pointer; }
.dy-moodopt.is-on { border-color: var(--genda); background: rgba(247, 179, 43, .12); }
.dy-moodopt .dy-st-a { width: 52px; height: 52px; font-size: 2.3rem; }
.dy-moodopt .dy-st-a:not(.is-lottie) { animation: none; }
.dy-moodopt small { font-size: .74rem; line-height: 1.15; text-align: center; }
.dy-mood-clear { justify-self: center; margin: 0 auto 12px; }
.dy-dr-mood .dy-drawer-in { overflow-y: auto; }

/* ---------- Jashn (silsila badha) ---------- */
.dy-cele {
  position: absolute; left: 50%; top: 16%; z-index: 20; display: grid; justify-items: center; gap: 4px; width: max-content; max-width: 88%;
  padding: 12px 18px 14px; border-radius: 20px; background: rgba(27, 23, 71, .95); color: var(--moon); text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(247, 179, 43, .35);
  transform: translateX(-50%); animation: dy-cele-in .55s cubic-bezier(.2, 1.5, .4, 1); pointer-events: none;
}
.dy-cele.is-out { transition: opacity .45s, transform .45s; opacity: 0; transform: translate(-50%, -16px); }
@keyframes dy-cele-in { from { opacity: 0; transform: translate(-50%, 20px) scale(.7); } }
.dy-cele .dy-st-a { width: 84px; height: 84px; font-size: 3.6rem; }
.dy-cele p { margin: 0; font: 700 1.05rem/1.3 var(--sans); }
.dy-confetti { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.dy-confetti i { position: absolute; font-style: normal; font-family: var(--emoji); font-size: 1.1rem; opacity: 0; animation: dy-conf 1.4s ease-out forwards; animation-delay: calc(var(--i) * 25ms); }
@keyframes dy-conf {
  0% { opacity: 1; transform: translate(0, 0) scale(.6); }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateY(-130px) rotate(calc(var(--i) * -40deg)) scale(1.1); }
}

/* ---------- Modal ---------- */
.dy-modal { border: 0; padding: 0; color: var(--moon); background: var(--night-2); width: min(500px, 100%); max-width: 100%; max-height: 90vh; margin: auto auto 0; border-radius: 20px 20px 0 0; }
.dy-modal::backdrop { background: rgba(8, 6, 26, .7); }
@media (min-width: 640px) { .dy-modal { margin: auto; border-radius: 20px; } }
.dy-modal-in { position: relative; display: grid; gap: 12px; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
.dy-modal-tall .dy-modal-in { min-height: min(70vh, 620px); align-content: start; }
.dy-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--night-3); color: var(--moon); cursor: pointer; }
.dy-mh { font: 400 1.4rem/1.2 var(--serif); margin: 0 44px 0 0; text-wrap: balance; }
.dy-ml { font: 600 1rem var(--sans); margin: 6px 0 0; }
.dy-ms { color: var(--mist); margin: 0; }
.dy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dy-mini { padding: 12px 16px; border-radius: 8px; background: var(--grain), var(--paper); color: var(--ink); font-family: var(--pfont); font-size: 1.1rem; line-height: 28px; max-height: 130px; overflow: hidden; }
.dy-mini-st { font-family: var(--emoji); }
.dy-modes { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.dy-modes label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.dy-modes input { width: 18px; height: 18px; accent-color: var(--genda); }
.dy-linkbox { font-size: .92rem; }
.dy-result { display: grid; gap: 8px; }
.dy-links { list-style: none; margin: 0; padding: 0; display: grid; }
.dy-links li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dy-links li > span:first-child { flex: 1; min-width: 0; }
.dy-status { color: var(--mist); font-size: .9rem; }
.dy-danger { border-color: var(--danger); color: var(--danger); }
.dy-sec summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.dy-sec .dy-form { margin-top: 10px; }
.dy-soundrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dy-modal .dy-tabs { margin: 0 -20px; padding: 0 20px 8px; border-bottom: 1px solid var(--line); }
.dy-ixbody { display: grid; gap: 10px; align-content: start; }
.dy-search { width: 100%; }
.dy-today { justify-self: start; }
.dy-ixlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dy-ix { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--moon); text-align: start; cursor: pointer; }
.dy-ix:hover { background: var(--night-3); }
.dy-ix-n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--paper); color: #2B3D7A; font: 700 .95rem 'Kalam', cursive; }
.dy-ix-b { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dy-ix-b b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-ix-b small { color: var(--mist); font-family: var(--sans), var(--emoji); }
.dy-ix-fav { flex: none; font-family: var(--emoji); }
.dy-cal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dy-cal-h b { font: 400 1.15rem var(--serif); }
.dy-cal-h .dy-ibtn svg { width: 18px; height: 18px; }
.dy-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dy-cal-w { text-align: center; color: var(--mist); font-size: .78rem; padding: 2px 0; }
.dy-cal-d { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; align-content: center; gap: 0; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .03); color: var(--mist); padding: 0; }
.dy-cal-d small { font-size: .68rem; line-height: 1; }
.dy-cal-d b { font: 1.3rem/1.1 var(--emoji); }
.dy-cal-d.has { cursor: pointer; background: rgba(247, 179, 43, .1); color: var(--moon); }
.dy-cal-d.today { border-color: var(--genda); }
.dy-moodsum { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; color: var(--mist); font-size: .9rem; }
.dy-moodsum span { font-family: var(--sans), var(--emoji); }
.dy-moodsum b { color: var(--moon); }
.dy-modal-center .dy-modal-in { justify-items: center; text-align: center; }
.dy-streakbox { display: grid; justify-items: center; gap: 10px; }
.dy-streakbox .dy-mh { margin: 0; }
.dy-st-big { width: 104px; height: 104px; font-size: 4.4rem; }
.dy-week { display: flex; gap: 8px; }
.dy-week span { display: grid; justify-items: center; gap: 3px; }
.dy-week i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--genda-ink); background: rgba(255, 255, 255, .06); border: 1px dashed var(--line); }
.dy-week .on i { background: linear-gradient(160deg, #FFC86B, #FF8A3D); border: 0; }
.dy-week .today i { box-shadow: 0 0 0 2px var(--genda); }
.dy-week small { color: var(--mist); font-size: .72rem; }

/* ---------- Dost ka view ---------- */
.dy-from { margin: 4px auto 0; max-width: 24em; text-align: center; text-wrap: balance; font: 400 clamp(1.25rem, 5vw, 1.6rem)/1.3 var(--serif); }
.dy-held { position: relative; width: var(--bw); aspect-ratio: 7 / 10; transform: rotate(-1.4deg); margin-block: 6px 10px; }
.dy-held-book { position: absolute; inset: 12px -14px -12px 10px; border-radius: 6px 14px 14px 6px; transform: rotate(3.2deg); background: var(--grain), linear-gradient(160deg, var(--cv), var(--cv2)); box-shadow: 0 34px 60px rgba(0, 0, 0, .5); }
.dy-held-closed { width: min(240px, 60vw); }
.dy-held .dy-page { box-shadow: inset 0 0 46px rgba(150, 110, 50, .12), 0 12px 26px rgba(0, 0, 0, .35); }
.dy-held .dy-st { cursor: default; pointer-events: none; }
.dy-nudge { animation: dy-nudge .5s; }
@keyframes dy-nudge { 25% { transform: rotate(-3deg) translateX(-6px); } 60% { transform: rotate(.5deg) translateX(4px); } }
.dy-tools-shared .dy-tbtn { opacity: .6; background: var(--night-2); border: 1px solid var(--line); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .dy-st-a:not(.is-lottie) { animation: none; }
  .dy-cover { transition: none; }
}

/* Likhawat (chune hue shabdon pe) */
.f-kalam { font-family: 'Kalam', 'Kalam', cursive; }
.f-caveat { font-family: 'Caveat', 'Kalam', cursive; }
.f-dancing { font-family: 'Dancing Script', 'Kalam', cursive; }
.f-indie { font-family: 'Indie Flower', 'Kalam', cursive; }
.f-patrick { font-family: 'Patrick Hand', 'Kalam', cursive; }
.f-shadows { font-family: 'Shadows Into Light', 'Kalam', cursive; }
.f-gloria { font-family: 'Gloria Hallelujah', 'Kalam', cursive; }
.f-homemade { font-family: 'Homemade Apple', 'Kalam', cursive; }
.f-satisfy { font-family: 'Satisfy', 'Kalam', cursive; }
.f-sacramento { font-family: 'Sacramento', 'Kalam', cursive; }
.f-greatvibes { font-family: 'Great Vibes', 'Kalam', cursive; }
.f-amatic { font-family: 'Amatic SC', 'Kalam', cursive; }
.f-architects { font-family: 'Architects Daughter', 'Kalam', cursive; }
.f-reenie { font-family: 'Reenie Beanie', 'Kalam', cursive; }
.f-comingsoon { font-family: 'Coming Soon', 'Kalam', cursive; }
.f-kalam_hi { font-family: 'Kalam', 'Kalam', cursive; }
.f-amita { font-family: 'Amita', 'Kalam', cursive; }
.f-tiro { font-family: 'Tiro Devanagari Hindi', 'Kalam', cursive; }
.f-yatra { font-family: 'Yatra One', 'Kalam', cursive; }
.f-laila { font-family: 'Laila', 'Kalam', cursive; }
.f-sura { font-family: 'Sura', 'Kalam', cursive; }
.f-rozha { font-family: 'Rozha One', 'Kalam', cursive; }
.f-baloo2 { font-family: 'Baloo 2', 'Kalam', cursive; }
.f-sahitya { font-family: 'Sahitya', 'Kalam', cursive; }
.f-kurale { font-family: 'Kurale', 'Kalam', cursive; }
.f-nastaliq { font-family: 'Noto Nastaliq Urdu', 'Kalam', cursive; }
.f-gulzar { font-family: 'Gulzar', 'Kalam', cursive; }
.f-lateef { font-family: 'Lateef', 'Kalam', cursive; }
.f-mirza { font-family: 'Mirza', 'Kalam', cursive; }
.f-amiri { font-family: 'Amiri', 'Kalam', cursive; }
.f-ruqaa { font-family: 'Aref Ruqaa', 'Kalam', cursive; }
.f-paaji { font-family: 'Baloo Paaji 2', 'Kalam', cursive; }
.f-mahee { font-family: 'Mukta Mahee', 'Kalam', cursive; }
.f-tirog { font-family: 'Tiro Gurmukhi', 'Kalam', cursive; }
.f-galada { font-family: 'Galada', 'Kalam', cursive; }
.f-balooda { font-family: 'Baloo Da 2', 'Kalam', cursive; }
.f-atma { font-family: 'Atma', 'Kalam', cursive; }
.f-siliguri { font-family: 'Hind Siliguri', 'Kalam', cursive; }
.f-tirob { font-family: 'Tiro Bangla', 'Kalam', cursive; }
.f-bhai { font-family: 'Baloo Bhai 2', 'Kalam', cursive; }
.f-shrikhand { font-family: 'Shrikhand', 'Kalam', cursive; }
.f-rasa { font-family: 'Rasa', 'Kalam', cursive; }
.f-vadodara { font-family: 'Hind Vadodara', 'Kalam', cursive; }
.f-thambi { font-family: 'Baloo Thambi 2', 'Kalam', cursive; }
.f-catamaran { font-family: 'Catamaran', 'Kalam', cursive; }
.f-inimai { font-family: 'Meera Inimai', 'Kalam', cursive; }
.f-arima { font-family: 'Arima', 'Kalam', cursive; }
.f-tirot { font-family: 'Tiro Tamil', 'Kalam', cursive; }
.f-tammudu { font-family: 'Baloo Tammudu 2', 'Kalam', cursive; }
.f-mallanna { font-family: 'Mallanna', 'Kalam', cursive; }
.f-ramaraja { font-family: 'Ramaraja', 'Kalam', cursive; }
.f-tirotel { font-family: 'Tiro Telugu', 'Kalam', cursive; }
.f-tamma { font-family: 'Baloo Tamma 2', 'Kalam', cursive; }
.f-hubballi { font-family: 'Hubballi', 'Kalam', cursive; }
.f-tirok { font-family: 'Tiro Kannada', 'Kalam', cursive; }
.f-chilanka { font-family: 'Chilanka', 'Kalam', cursive; }
.f-chettan { font-family: 'Baloo Chettan 2', 'Kalam', cursive; }
.f-manjari { font-family: 'Manjari', 'Kalam', cursive; }
.f-gayathri { font-family: 'Gayathri', 'Kalam', cursive; }
.f-bhaina { font-family: 'Baloo Bhaina 2', 'Kalam', cursive; }
.f-oriya { font-family: 'Noto Serif Oriya', 'Kalam', cursive; }
.f-lora { font-family: 'Lora', 'Kalam', cursive; }
.f-playfair { font-family: 'Playfair Display', 'Kalam', cursive; }
.f-courier { font-family: 'Courier Prime', 'Kalam', cursive; }
.f-elite { font-family: 'Special Elite', 'Kalam', cursive; }

/* =====================================================================
   v4 — Community: bhavna, waqt wala card, sapna pakdo, aaj raat, taiyaari, plus, store
   ===================================================================== */
.hero { padding-bottom: 10px; }

/* ---------- Bhavna (🫂 🙏 💪 🙋) ---------- */
.act.react { gap: 4px; }
.act.react .react-e { font: 1.12rem/1 var(--emoji, system-ui); filter: grayscale(.15); }
.act.react.is-on { color: var(--moon); background: rgba(255, 255, 255, .1); background: color-mix(in srgb, var(--tc) 18%, transparent); }
.act.react.pop .react-e, .react-opt.pop .react-e { animation: pop .34s ease; display: inline-block; }
.react-n { font-size: .82rem; color: var(--mist); }
.react-pop {
  position: fixed; z-index: 70; display: flex; gap: 2px; padding: 6px;
  border-radius: 999px; background: #2B2664; border: 1px solid rgba(241, 237, 255, .16);
  box-shadow: 0 14px 40px rgba(4, 3, 18, .55);
  opacity: 0; transform: translateY(6px) scale(.92); transform-origin: 50% 100%; transition: opacity .16s ease, transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.react-pop.is-in { opacity: 1; transform: none; }
.react-pop button {
  display: grid; justify-items: center; gap: 0; min-width: 58px; padding: 6px 4px 4px; border: 0; border-radius: 18px;
  background: none; cursor: pointer; color: var(--mist);
}
.react-pop button span { font: 1.7rem/1.05 var(--emoji, system-ui); transition: transform .15s ease; }
.react-pop button small { font-size: .68rem; line-height: 1.15; max-width: 64px; text-align: center; }
.react-pop button:hover span, .react-pop button:focus-visible span { transform: translateY(-4px) scale(1.18); }
.react-pop button.is-on { background: rgba(247, 179, 43, .16); color: var(--genda); }
.react-float {
  position: fixed; z-index: 80; pointer-events: none; font: 2rem/1 var(--emoji, system-ui);
  transform: translate(-50%, 0); animation: react-float .95s ease-out forwards;
}
@keyframes react-float { to { transform: translate(-50%, -70px) scale(1.4); opacity: 0; } }

.react-bar { margin: 26px 0 8px; padding: 16px; border-radius: var(--r); background: var(--night-2); border: 1px solid var(--line); }
.react-h { margin: 0 0 10px; font: 400 1.15rem/1.25 var(--serif); }
.react-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.react-opt {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--night); color: var(--mist); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.react-opt .react-e { font: 1.8rem/1.1 var(--emoji, system-ui); }
.react-opt small { font-size: .78rem; line-height: 1.2; text-align: center; }
.react-opt.is-on { border-color: var(--genda); background: rgba(247, 179, 43, .12); color: var(--moon); }
.react-c { position: absolute; top: 4px; right: 6px; font-size: .78rem; color: var(--genda); }
.react-note { margin: 10px 0 0; color: var(--mist); font-size: .86rem; }

/* ---------- Home: waqt wala card ---------- */
.moment {
  position: relative; overflow: hidden; margin: 6px 0 18px; padding: 20px 18px 18px;
  border-radius: 20px; border: 1px solid rgba(241, 237, 255, .12);
  background: linear-gradient(140deg, #2D2770 0%, #1C1847 70%);
}
.moment-morning { background: linear-gradient(140deg, #4B3A7E 0%, #2A2463 55%, #3B2A57 100%); }
.moment-day { background: linear-gradient(140deg, #233B6E 0%, #1E1B50 70%); }
.moment-art { position: absolute; inset: 0; pointer-events: none; }
.moment-art i { position: absolute; border-radius: 50%; }
.moment-morning .moment-art i:first-child { width: 120px; height: 120px; right: -26px; top: -30px; background: radial-gradient(circle, #FFC970 0%, rgba(255, 168, 70, .55) 40%, transparent 70%); }
.moment-night .moment-art i:first-child { width: 70px; height: 70px; right: 22px; top: 18px; background: #F4EBC8; box-shadow: -14px 6px 0 0 #2D2770 inset, 0 0 40px rgba(244, 235, 200, .35); }
.moment-day .moment-art i:first-child { width: 90px; height: 90px; right: -10px; top: -14px; background: radial-gradient(circle, rgba(140, 155, 255, .5), transparent 70%); }
.moment-art i:nth-child(2), .moment-art i:nth-child(3) { width: 3px; height: 3px; background: #fff; opacity: .7; box-shadow: 40px 30px 0 #fff, 90px -6px 0 rgba(255,255,255,.6), 150px 40px 0 rgba(255,255,255,.5); }
.moment-art i:nth-child(2) { left: 52%; top: 18px; }
.moment-art i:nth-child(3) { left: 8%; bottom: 22px; opacity: .45; }
.moment > *:not(.moment-art) { position: relative; }
.moment-time { margin: 0; color: var(--mist); font-size: .86rem; letter-spacing: .02em; }
.moment-h { font: 400 clamp(1.4rem, 5.6vw, 1.9rem)/1.2 var(--serif); margin: 6px 92px 6px 0; }
.moment-sub { margin: 0 0 16px; color: rgba(241, 237, 255, .82); max-width: 30em; }
.moment-try { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 16px 0 0; font-size: .82rem; color: var(--mist); }
.moment-try .chip { min-height: 30px; font-size: .82rem; }

/* ---------- Kuch khaas (tiles) ---------- */
.special { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 14px; margin: 0 calc(var(--gut) * -1) 6px; padding-inline: var(--gut); scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.special::-webkit-scrollbar { display: none; }
.sp-tile {
  flex: 0 0 min(64%, 220px); scroll-snap-align: start; display: grid; gap: 2px; align-content: start;
  padding: 14px; border-radius: 16px; text-decoration: none; background: var(--night-2); border: 1px solid var(--line);
  transition: background .15s ease, transform .15s ease;
}
.sp-tile:hover { background: var(--night-3); }
.sp-tile:active { transform: scale(.98); }
.sp-e { font: 1.5rem/1.1 var(--emoji, system-ui); }
.sp-tile strong { font-weight: 500; line-height: 1.25; }
.sp-tile small { color: var(--mist); font-size: .84rem; line-height: 1.3; }
.sp-tile[data-night-tile] { background: linear-gradient(150deg, #2E2873, #1A1745); border-color: rgba(247, 179, 43, .3); }
.special-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0 0 6px; padding: 0; }
.special-grid .sp-tile { flex: none; }
.sp-tile.wide { margin: 22px 0; }
@media (min-width: 720px) {
  .special { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .special .sp-tile { flex: none; }
  .special-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Sapna pakdo ---------- */
.cap { display: grid; gap: 12px; }
.cap-text { width: 100%; min-height: 130px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--night); font: 400 1.1rem/1.6 var(--serif); resize: vertical; }
.cap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cap-row .btn.is-on { border-color: var(--danger); color: var(--danger); animation: cap-pulse 1.2s ease infinite; }
@keyframes cap-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 122, 138, .18); } }
.cap-found p { margin: 0 0 6px; }
.cap-syms { display: grid; gap: 6px; }
.cap-sym {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px;
  border-radius: 12px; background: var(--night-3); text-decoration: none; animation: cap-in .3s ease both;
}
.cap-sym > span:first-child { font: 1.5rem/1 var(--emoji, system-ui); }
.cap-sym > span:nth-child(2) { display: grid; min-width: 0; }
.cap-sym small { color: var(--mist); font-size: .82rem; line-height: 1.3; }
.cap-sym em { font-style: normal; color: var(--genda); font-size: .84rem; white-space: nowrap; }
.cap-sym.small { padding: 8px 12px; }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } }
.cap-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 380px) { .cap-acts { grid-template-columns: 1fr; } }

/* ---------- Reminder ---------- */
.remind-list { display: grid; gap: 8px; margin: 14px 0; }
.remind-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--night-3); }
.remind-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--genda); }
.remind-row input[type=time] { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--night); }
.remind-banner {
  position: fixed; left: 50%; top: calc(var(--top-h) + 10px); z-index: 60; transform: translate(-50%, -20px); opacity: 0;
  max-width: min(92vw, 460px); padding: 12px 16px; border-radius: 14px; text-decoration: none;
  background: #2B2664; border: 1px solid rgba(247, 179, 43, .45); box-shadow: 0 14px 40px rgba(4, 3, 18, .5);
  transition: opacity .3s ease, transform .3s ease;
}
.remind-banner.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Sapna-twin ---------- */
.twin { margin: 26px 0; padding: 18px 16px 6px; border-radius: var(--r); background: linear-gradient(160deg, #24205A, #1A1745); border: 1px solid var(--line); }
.twin .h-sec { margin-top: 0; }
.twin > p { margin: -4px 0 12px; }
.twin .cap-syms { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 8px; }
.twin .story:last-child { border-bottom: 0; }

/* ---------- Aaj raat India ne kya sapna dekha ---------- */
.night { position: relative; padding: 22px 0 8px; }
.night-sky { position: absolute; inset: -20px calc(var(--gut) * -1) auto; height: 220px; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
.night-sky i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: twinkle 3s ease-in-out var(--d) infinite; }
@keyframes twinkle { 50% { opacity: .2; } }
.night-moon { position: absolute; right: 18px; top: 26px; width: 56px; height: 56px; border-radius: 50%; background: #F4EBC8; box-shadow: -12px 5px 0 0 var(--night) inset, 0 0 46px rgba(244, 235, 200, .32); }
.night > *:not(.night-sky) { position: relative; }
.night-date { margin: 0; color: var(--genda); font-size: .9rem; letter-spacing: .03em; }
.night .h-page { margin-right: 70px; }
.night-total { margin: -6px 0 18px; color: var(--mist); }
.night-total b { color: var(--moon); font-size: 1.2rem; }
.night-top {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px; margin: 0 0 8px;
  border-radius: 18px; text-decoration: none; background: linear-gradient(130deg, rgba(247, 179, 43, .2), rgba(247, 179, 43, .04)); border: 1px solid rgba(247, 179, 43, .35);
}
.night-top-e { font: 2.6rem/1 var(--emoji, system-ui); }
.night-top > span:last-child { display: grid; }
.night-top small { color: var(--genda); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.night-top strong { font: 400 1.35rem/1.25 var(--serif); }
.night-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.night-bars a, .nb-row { display: grid; grid-template-columns: minmax(96px, 38%) 1fr 30px; gap: 10px; align-items: center; padding: 6px 4px; text-decoration: none; border-radius: 8px; }
.night-bars a:hover { background: var(--night-2); }
.nb-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.nb-bar { height: 10px; border-radius: 99px; background: var(--night-2); overflow: hidden; }
.nb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7B6CFF, #F7B32B); transform-origin: left; animation: nb-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.regions .nb-bar i { background: linear-gradient(90deg, #4FB3A9, #8C9BFF); }
@keyframes nb-grow { from { transform: scaleX(0); } }
.night-bars b { text-align: right; font-weight: 500; color: var(--mist); }
.night-acts { margin: 18px 0 10px; }

/* ---------- Taiyaari ---------- */
.prep-head .btn { margin-top: 4px; }
.prep-exams { margin: 14px 0 6px; }
.prep-prompts { margin: 10px 0 16px; padding: 14px 16px; border-radius: var(--r); background: var(--night-2); border-left: 3px solid #FFB547; }
.prep-prompts p { margin: 0 0 6px; }
.prep-prompts ul { margin: 0; padding-left: 20px; color: rgba(241, 237, 255, .85); }
.prep-help { margin: 22px 0; padding: 14px 16px; border-radius: var(--r); background: rgba(79, 179, 169, .12); border: 1px solid rgba(79, 179, 169, .35); font-size: .95rem; }

/* ---------- Plus ---------- */
.plus-head .badge { display: inline-block; margin: 0 0 4px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.plan { position: relative; display: grid; gap: 2px; padding: 18px 14px 14px; border-radius: 16px; background: var(--night-2); border: 1px solid var(--line); }
.plan strong { font: 400 1.3rem/1.2 var(--serif); }
.plan small { color: var(--mist); }
.plan.is-best { border-color: var(--genda); background: linear-gradient(150deg, rgba(247, 179, 43, .16), var(--night-2)); }
.plan-tag { position: absolute; top: -10px; left: 12px; padding: 1px 10px; border-radius: 99px; background: var(--genda); color: var(--genda-ink); font-size: .76rem; font-weight: 700; }
.plus-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.plus-list li { padding: 12px 14px; border-radius: 12px; background: var(--night-2); }
.plus-privacy { margin: 14px 0; color: var(--mist); font-size: .92rem; }
.plus-free { padding: 14px 16px; border-radius: var(--r); border: 1px dashed rgba(166, 235, 134, .5); }
.plus-free strong { color: #A6EB86; }
.plus-free p { margin: 4px 0 0; color: rgba(241, 237, 255, .85); }
.wl { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 18px 0; }
.wl input { min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--night); }
@media (max-width: 420px) { .wl { grid-template-columns: 1fr; } }
.joined { margin: 18px 0; padding: 12px 14px; border-radius: 12px; background: rgba(166, 235, 134, .12); color: #CFF5BE; }
.kitab { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin: 30px 0 0; padding: 18px; border-radius: 18px; background: var(--night-2); }
.kitab-art svg { width: 100%; height: auto; }
.kitab .h-sec { margin-top: 0; }
.kitab p { margin: 0 0 8px; }
.price { color: var(--genda); font-weight: 700; }
@media (max-width: 420px) { .kitab { grid-template-columns: 1fr; } .kitab-art { width: 120px; } }

/* ---------- Store ---------- */
.store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 18px; }
@media (min-width: 760px) { .store-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.store-item { display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 16px; background: var(--night-2); border: 1px solid var(--line); }
.store-art { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #3A3285, #1F1B4D 70%); margin-bottom: 6px; }
.store-art svg { width: 70%; height: 70%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.store-item h2 { font: 400 1.1rem/1.25 var(--serif); margin: 0; }
.store-item p { margin: 0; font-size: .86rem; }
.store-item .btn { margin-top: 8px; min-height: 38px; padding-inline: 10px; font-size: .9rem; }
.foot a { white-space: nowrap; }

/* =====================================================================
   v4 — Diary: yaadein, future khat, duniya ko dikhao, mera haal, Hamari Diary
   ===================================================================== */
.dy-tbtn.is-dim { opacity: .45; }
.dy-hambtn span { font: 1.05rem/1 var(--emoji); }
.dy-mine span { font: 1.05rem/1 var(--emoji); }
.dy-book.is-shared::after {
  content: '💞'; position: absolute; left: -10px; top: -10px; z-index: 6; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: #FCE3EA; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); font: .95rem/1 var(--emoji); pointer-events: none;
}
.dy-swapin { animation: dy-swapin .7s cubic-bezier(.2, .9, .3, 1); }
@keyframes dy-swapin { from { transform: translateX(26px) rotate(1.5deg) scale(.96); opacity: .3; } }
.dy-page.is-ro .dy-text { cursor: default; }
.dy-page.is-ro .dy-pf .dy-owner { color: #A5546D; }

/* Yaadein */
.dy-mem { width: max(var(--bw), min(100%, 460px)); position: relative; animation: dy-rise .5s ease; }
.dy-mem-in {
  width: 100%; display: grid; gap: 2px; text-align: start; padding: 12px 44px 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(243, 216, 145, .35); background: linear-gradient(120deg, rgba(243, 216, 145, .14), rgba(243, 216, 145, .04)); color: var(--moon);
}
.dy-mem-in b { font: 700 1rem 'Kalam', cursive; color: #F3D891; }
.dy-mem-in span { font: 400 1.05rem/1.35 'Kalam', cursive; color: rgba(241, 237, 255, .88); }
.dy-mem-in em { font-style: normal; color: var(--genda); font-size: .86rem; }
.dy-mem-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: var(--mist); cursor: pointer; }

/* Future khat */
.dy-sealbar {
  position: absolute; left: 46px; right: 12px; bottom: 38px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px;
  border-radius: 14px; background: rgba(255, 244, 248, .95); color: #6A2E42; font: 400 .88rem/1.3 var(--sans); box-shadow: 0 6px 18px rgba(106, 46, 66, .18);
  animation: dy-rise .5s cubic-bezier(.2, 1.2, .4, 1);
}
.dy-sealbar span { flex: 1; }
.dy-sealbar .dy-chip { min-height: 34px; font-size: .86rem; }
.dy-page.is-editing-hide .dy-sealbar, .dy-desk.is-editing .dy-sealbar { display: none; }
.dy-page.is-sealed { display: grid; grid-template-rows: auto 1fr auto; }
.dy-envelope { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 10px 24px 10px 48px; text-align: center; }
.dy-env {
  position: relative; width: min(220px, 62vw); aspect-ratio: 1.55; border-radius: 6px; overflow: hidden;
  background: linear-gradient(160deg, #F6E3C6, #E7CBA2); box-shadow: 0 10px 26px rgba(80, 50, 20, .28), inset 0 0 0 1px rgba(120, 80, 30, .25);
}
.dy-env::before, .dy-env::after { content: ''; position: absolute; bottom: 0; width: 60%; height: 70%; background: linear-gradient(160deg, #EED6B2, #DDBF93); }
.dy-env::before { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.dy-env::after { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.dy-env-flap { position: absolute; inset: 0 0 auto; height: 62%; z-index: 2; background: linear-gradient(180deg, #F3DDBB, #E2C194); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .6s cubic-bezier(.4, 0, .2, 1); filter: drop-shadow(0 2px 2px rgba(80, 50, 20, .25)); }
.dy-env-wax {
  position: absolute; left: 50%; top: 62%; z-index: 3; width: 52px; height: 52px; transform: translate(-50%, -50%); display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D9505E, #8E1C2B 70%); box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .25);
  font: 1.4rem/1 var(--emoji); transition: transform .5s ease, opacity .4s ease;
}
.dy-page.is-ready .dy-env-wax { animation: dy-wax 1.6s ease-in-out infinite; }
@keyframes dy-wax { 50% { transform: translate(-50%, -50%) scale(1.12); } }
.dy-env-h { margin: 6px 0 0; font: 700 1.2rem/1.3 'Kalam', cursive; color: #6A2E42; }
.dy-env-sub { margin: 0; font: 400 1rem/1.3 'Kalam', cursive; color: var(--pencil); }
.dy-envelope .dy-chip { min-height: 34px; font-size: .84rem; }
.dy-just-sealed .dy-env { animation: dy-seal-in .7s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes dy-seal-in { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.dy-just-sealed .dy-env-wax { animation: dy-wax-drop .6s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes dy-wax-drop { from { transform: translate(-50%, -140%) scale(1.6); opacity: 0; } }
.dy-unsealing .dy-env-wax { transform: translate(-50%, -50%) scale(0); opacity: 0; }
.dy-unsealing .dy-env-flap { transform: rotateX(180deg); }
.dy-sealbox, .dy-invbox { display: grid; gap: 12px; justify-items: stretch; }
.dy-env-mini { justify-self: center; font: 2.6rem/1 var(--emoji); animation: dy-rise .5s ease; }
.dy-sealopts { display: grid; gap: 6px; }
.dy-sealopts label { text-align: start; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); cursor: pointer; }
.dy-sealopts label:has(input:checked) { border-color: var(--genda); background: rgba(247, 179, 43, .1); }
.dy-sealopts small { color: var(--mist); }
.dy-sealopts input[type=radio] { accent-color: var(--genda); width: 18px; height: 18px; }
.dy-sealopts input[type=date] { padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--night); color: var(--moon); }

/* Duniya ko dikhao */
.dy-world { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: linear-gradient(140deg, rgba(140, 155, 255, .16), rgba(140, 155, 255, .04)); border: 1px solid rgba(140, 155, 255, .3); }
.dy-worldbtn { background: #8C9BFF; color: #12103A; border-color: transparent; font-weight: 700; }
.dy-world .btn-small { justify-self: start; }

/* Mera haal */
.dy-haal { display: grid; gap: 10px; }
.dy-haal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dy-haal-stats span { display: grid; justify-items: center; padding: 12px 6px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--mist); font-size: .82rem; text-align: center; }
.dy-haal-stats b { font: 700 1.6rem/1.1 'Kalam', cursive; color: #F3D891; }
.dy-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dy-bars li { display: grid; grid-template-columns: minmax(110px, 40%) 1fr 26px; gap: 10px; align-items: center; font-size: .92rem; }
.dy-bars li span { font-family: var(--sans), var(--emoji); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-bars i { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.dy-bars u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F7B32B, #FF8FB1); animation: nb-grow .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.dy-bars b { text-align: right; color: var(--mist); font-weight: 500; }
.dy-haal-syms { display: flex; flex-wrap: wrap; gap: 6px; }
.dy-haal-syms .dy-chip { text-decoration: none; background: rgba(255, 255, 255, .06); color: var(--moon); border-color: var(--line); font-family: var(--sans), var(--emoji); }
.dy-haal-when { margin: 4px 0 0; }
.dy-haal-when b { color: #F3D891; }
.dy-plus { display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; background: linear-gradient(120deg, rgba(247, 179, 43, .18), rgba(255, 143, 177, .12)); border: 1px solid rgba(247, 179, 43, .35); }

/* Settings: reminder */
.dy-remrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.dy-remrow input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--genda); }
.dy-remrow input[type=time] { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--night); color: var(--moon); }

/* Hamari Diary */
.dy-hamlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dy-hamlist li { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.dy-hamlist li.is-open { border-color: #FF8FB1; }
.dy-hamlist .dy-ham-empty { display: block; border-style: dashed; }
.dy-ham-cv { width: 40px; height: 52px; border-radius: 4px 8px 8px 4px; display: grid; place-items: center; font: 1rem/1 var(--emoji); background: linear-gradient(135deg, var(--cv), var(--cv2)); box-shadow: inset 4px 0 0 rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, .3); }
.dy-ham-n { display: grid; min-width: 0; }
.dy-ham-n b { font: 700 1.1rem/1.2 'Kalam', cursive; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-ham-n small { color: var(--mist); }
.dy-ham-acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
@media (min-width: 420px) { .dy-hamlist li { grid-template-columns: auto 1fr auto; } .dy-ham-acts { grid-column: auto; } }
.dy-ham-go { justify-self: center; }
.dy-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dy-members li { display: flex; align-items: center; gap: 10px; }
.dy-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #FCE3EA; color: #6A2E42; font: 700 1rem 'Kalam', cursive; }
.dy-members small { color: var(--mist); }
.dy-invite { display: grid; gap: 14px; justify-items: center; width: min(100%, 420px); margin: 0 auto; padding: 10px 0 24px; }
.dy-invite .dy-form { width: 100%; }
.dy-inv-book {
  position: relative; width: 150px; height: 200px; border-radius: 6px 14px 14px 6px; display: grid; place-items: center;
  background: var(--grain), linear-gradient(135deg, var(--cv), var(--cv2)); box-shadow: inset 10px 0 0 rgba(0, 0, 0, .22), 0 18px 40px rgba(0, 0, 0, .45);
  animation: dy-inv 2.8s ease-in-out infinite;
}
@keyframes dy-inv { 50% { transform: translateY(-6px) rotate(-1deg); } }
.dy-inv-name { position: absolute; left: 22px; right: 12px; top: 26px; text-align: center; font: 700 1.05rem/1.25 'Kalam', cursive; color: #F3D891; overflow-wrap: anywhere; }
.dy-inv-heart { font: 2.4rem/1 var(--emoji); margin-top: 40px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }

/* =====================================================================
   Laptop / desktop: khuli kitaab — do panne aamne-saamne
   ===================================================================== */
.dy-left { position: absolute; left: 0; top: 0; bottom: 0; width: var(--bw); z-index: 1; visibility: hidden; opacity: 0; transition: opacity .35s ease .12s, visibility 0s linear .5s; }
.dy-edges.l, .dy-fold { display: none; }
.dy-book.is-spread .dy-left { visibility: visible; opacity: 1; transition: opacity .35s ease .12s; cursor: w-resize; }
.dy-book.is-spread { width: calc(var(--bw) * 2); }
.dy-book.is-spread .dy-edges.l { display: block; left: -7px; right: auto; border-radius: 4px 0 0 4px; }
.dy-book.is-spread .dy-fold {
  display: block; position: absolute; top: 0; bottom: 0; left: calc(50% - 34px); width: 68px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(40, 25, 5, .10) 38%, rgba(40, 25, 5, .26) 50%, rgba(40, 25, 5, .10) 62%, transparent);
}
.dy-book:not(.dy-book-sample) .dy-cover { inset: -8px -12px -8px auto; width: calc(var(--bw) + 17px); }
.dy-book.is-spread .dy-ribbon { left: 78%; }
.dy-left > .dy-page, .dy-left > .dy-inside { position: absolute; inset: 0; border-radius: 10px 3px 3px 10px; }
.dy-left > .dy-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, rgba(60, 40, 10, .16), transparent 9%); }
.dy-left .dy-fav, .dy-left .dy-prompt, .dy-left .dy-sealbar { display: none; }
.dy-left .dy-dogear { left: 0; right: auto; transform: scaleX(-1); transform-origin: 0 100%; }
.dy-inside {
  display: grid; place-items: center; padding: 18%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 220, 150, .13) 0 9%, transparent 10%),
    radial-gradient(circle at 70% 60%, rgba(255, 220, 150, .1) 0 12%, transparent 13%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 230, 170, .07) 0 6px, transparent 6px 14px),
    linear-gradient(200deg, var(--cv), var(--cv2));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .45);
}
.dy-f-face { position: absolute; inset: 0; transform: scaleX(-1); }
.dy-f-face .dy-dogear { display: none; }
.dy-desk.is-spread .dy-topbar, .dy-desk.is-spread .dy-mem, .dy-desk.is-spread .dy-alert { width: calc(var(--bw) * 2); }
.dy-desk.is-spread .dy-leaf:hover .dy-dogear { transform: scale(1.7); transition: transform .3s ease; }
@media (min-width: 900px) and (min-height: 560px) {
  :root { --bw: min(calc((100vw - 90px) / 2), 470px, calc((100vh - 250px) * .7)); }
  .frame:has(.dy-desk-book) { max-width: 1440px; }
  .main:has(.dy-desk-book) { max-width: none; }
}
@media (min-width: 980px) and (min-height: 560px) {
  :root { --bw: min(calc((100vw - 380px) / 2), 470px, calc((100vh - 250px) * .7)); }
}

/* Diary aane tak band diary ka saaya */
.dy-skel { position: relative; width: var(--bw); height: calc(var(--bw) * 10 / 7); border-radius: 6px 16px 16px 6px; overflow: hidden;
  background: linear-gradient(160deg, #5A2030, #351019); box-shadow: 0 30px 50px rgba(0, 0, 0, .45); }
.dy-skel i { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); animation: dy-skel 1.3s linear infinite; }
@keyframes dy-skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* =====================================================================
   Asli diary — home card, order, payment
   ===================================================================== */
.shop-diary { position: relative; width: 150px; aspect-ratio: 7 / 10; transform: rotate(-6deg); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.shop-diary .sd-pages { position: absolute; inset: 4px -6px 4px 8px; border-radius: 3px 8px 8px 3px; background: repeating-linear-gradient(90deg, #F3E9CF 0 1px, #D2C4A2 1px 2px); }
.shop-diary .sd-cover { position: absolute; inset: 0; border-radius: 5px 12px 12px 5px; overflow: hidden;
  background: radial-gradient(120% 80% at 25% 10%, rgba(255, 255, 255, .16), transparent 55%), radial-gradient(90% 70% at 85% 100%, rgba(0, 0, 0, .38), transparent 60%), linear-gradient(160deg, var(--cv), var(--cv2));
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .6s ease; }
.shop-diary .sd-spine { position: absolute; inset: 0 auto 0 0; width: 16%; background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .08) 55%, rgba(0, 0, 0, .3)); }
.shop-diary .sd-name { position: absolute; left: 20%; right: 8%; top: 18%; text-align: center; font: 700 clamp(.8rem, 4.2cqw, 1.05rem)/1.2 'Kalam', cursive; color: var(--sdink, #F3D891); text-shadow: 0 1px 2px rgba(90, 20, 45, .55); overflow-wrap: anywhere; }
.shop-diary .sd-name::after { content: ""; display: block; width: 50%; height: 2px; margin: 6px auto 0; background: linear-gradient(90deg, transparent, #D9A84A, transparent); }
.shop-diary .sd-strap { position: absolute; right: 0; top: 46%; width: 30%; height: 15%; border-radius: 4px 0 0 4px; background: linear-gradient(180deg, var(--cv2), var(--cv)); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.shop-diary .sd-lock { position: absolute; right: 12%; top: 44%; width: 17%; aspect-ratio: 4 / 5; z-index: 2; border-radius: 3px; background: linear-gradient(145deg, #FFF3C4, #E2B24E 45%, #9C7124); box-shadow: 0 2px 5px rgba(0, 0, 0, .45); }
.shop-diary .sd-lock i { position: absolute; left: 38%; top: 38%; width: 24%; height: 34%; border-radius: 40% 40% 2px 2px; background: #4A3410; }
.shop-diary .sd-ribbon { position: absolute; left: 62%; bottom: -16%; width: 8%; height: 22%; background: linear-gradient(90deg, #C2577A, #FF8FB1, #C2577A); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); z-index: -1; }
.shop-diary.is-cycling .sd-cover { animation: sd-cycle 12s ease-in-out infinite; }
@keyframes sd-cycle {
  0%, 18% { --cv: #F2A7BD; --cv2: #D9738F; } 20%, 38% { --cv: #E8B4A8; --cv2: #B97C70; } 40%, 58% { --cv: #C3B1EC; --cv2: #8E74CF; }
  60%, 78% { --cv: #D9668A; --cv2: #A23E62; } 80%, 98% { --cv: #F9C3A8; --cv2: #E8907A; } 100% { --cv: #F2A7BD; --cv2: #D9738F; }
}
@property --cv { syntax: '<color>'; inherits: true; initial-value: #F2A7BD; }
@property --cv2 { syntax: '<color>'; inherits: true; initial-value: #D9738F; }
.shop-diary.is-couple::before { content: ""; position: absolute; inset: 0; transform: translate(-22px, 10px) rotate(-8deg); border-radius: 5px 12px 12px 5px; background: linear-gradient(160deg, var(--cv2), #000); z-index: -2; opacity: .9; }
.shop-diary.is-mini { width: 54px; transform: rotate(-4deg); }
.shop-diary.is-mini .sd-name { font-size: .5rem; }
.shop-diary.is-done { width: 130px; margin: 6px auto 18px; animation: sd-hop 1.2s ease 1; }
@keyframes sd-hop { 30% { transform: rotate(-2deg) translateY(-14px); } 60% { transform: rotate(-8deg) translateY(0); } }

.shop-card {
  display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: center; margin: 4px 0 22px; padding: 18px 16px 18px 20px;
  border-radius: 20px; border: 1px solid rgba(247, 179, 43, .32);
  background: radial-gradient(260px 160px at 0% 50%, rgba(247, 179, 43, .16), transparent 70%), linear-gradient(140deg, #2A2163, #1B1748);
}
.shop-art { display: grid; place-items: center; text-decoration: none; }
.shop-art .shop-diary { width: 112px; transition: transform .3s ease; }
.shop-art:hover .shop-diary { transform: rotate(-2deg) scale(1.04); }
.shop-new { margin: 0; color: var(--genda); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.shop-h { font: 400 1.35rem/1.2 var(--serif); margin: 2px 0 6px; }
.shop-lead { margin: 0 0 8px; color: rgba(241, 237, 255, .85); font-size: .95rem; }
.shop-price { margin: 0 0 10px; }
.shop-price b { font-size: 1.3rem; color: var(--genda); }
.shop-price small { color: var(--mist); }
@media (max-width: 420px) { .shop-card { grid-template-columns: 96px 1fr; gap: 12px; padding: 16px 14px; } .shop-art .shop-diary { width: 88px; } .shop-h { font-size: 1.18rem; } }

.order-grid { display: grid; gap: 18px; }
@media (min-width: 860px) { .main:has(.order) { max-width: 980px; } .order-grid { grid-template-columns: 300px 1fr; align-items: start; } .order-preview { position: sticky; top: calc(var(--top-h) + 20px); } }
.order-stage { display: grid; place-items: center; padding: 30px 0 34px; border-radius: 20px; background: radial-gradient(circle at 50% 45%, #3A3285, #1A1745 70%); }
.order-stage .shop-diary { width: 170px; }
.order-products, .order-plans { display: grid; gap: 8px; }
.order-prod, .order-plan { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--night-2); cursor: pointer; }
.order-prod:has(input:checked), .order-plan.is-on, .order-plan:has(input:checked) { border-color: var(--genda); background: linear-gradient(140deg, rgba(247, 179, 43, .14), var(--night-2)); }
.order-prod input, .order-plan input { accent-color: var(--genda); width: 18px; height: 18px; }
.order-prod span, .order-plan span { display: grid; gap: 2px; }
.order-prod small, .order-plan small { color: var(--mist); font-size: .85rem; }
.order-prod em, .order-plan em { font-style: normal; font-weight: 700; color: var(--genda); }
.order-colors { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; min-inline-size: 0; }
.order-grid > * { min-width: 0; }
.order-colors legend { margin-bottom: 8px; color: var(--mist); }
.order-sw { width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); cursor: pointer; display: grid; place-items: center; }
.order-sw input { position: absolute; opacity: 0; }
.order-sw:has(input:checked) { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--genda); }
.order-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button { width: 42px; height: 42px; border: 0; background: var(--night-2); font-size: 1.2rem; cursor: pointer; }
.qty input { width: 48px; text-align: center; border: 0; background: transparent; font-weight: 700; }
.order-sum { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--night-2); }
.order-sum b { font-size: 1.1rem; }

.pay { display: grid; gap: 12px; max-width: 460px; }
.pay .h-page { margin-bottom: 0; }
.pay-upi { font-size: 1.05rem; min-height: 52px; }
.pay-qr { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 16px; background: var(--night-2); }
.qr-box { width: min(240px, 70vw); aspect-ratio: 1; padding: 10px; border-radius: 12px; background: #fff; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.pay-id { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line); }
.pay-utr { padding: 14px; border-radius: 16px; background: var(--night-2); }
.pay-thanks { justify-items: center; text-align: center; }
.orders { display: grid; gap: 8px; margin-bottom: 10px; }
.order-item { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--night-2); }

/* ---------- Aadat wale chhote features ---------- */
.aha { display: grid; gap: 12px; }
.aha-burst { font: 2.6rem/1 var(--emoji); justify-self: start; animation: dy-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.aha-ask { padding: 14px; border-radius: 14px; background: rgba(247, 179, 43, .1); border: 1px solid rgba(247, 179, 43, .3); }
.aha-ask p { margin: 0 0 10px; }
.pill[data-listen].is-on { border-color: var(--genda); color: var(--genda); }
.comment-acts { display: flex; gap: 8px; align-items: center; }
.comment-acts .is-on { color: var(--danger); border-color: var(--danger); }
.theme-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--night-2); border: 1px dashed rgba(140, 155, 255, .4); }
.theme-k { color: var(--mist); font-size: .85rem; }
.theme-bar b { font-weight: 500; flex: 1 1 200px; }
.theme-acts { display: flex; gap: 6px; }
.ask-pick { display: grid; gap: 8px; margin: 10px 0 6px; }
.ask-opt { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--night-2); cursor: pointer; }
.ask-opt:has(input:checked) { border-color: #FF8FB1; background: linear-gradient(140deg, rgba(255, 143, 177, .14), var(--night-2)); }
.ask-opt input { accent-color: #FF8FB1; width: 18px; height: 18px; }
.ask-list { display: grid; gap: 10px; }
.ask-item { padding: 14px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--line); }
.ask-item.is-closed { opacity: .7; }
.ask-q { margin: 0 0 4px; font: 400 1.15rem/1.3 var(--serif); }
.ask-answers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ask-answers li { padding: 10px 12px; border-radius: 12px; background: var(--night); display: grid; gap: 4px; }
.ask-answers li p { margin: 0; white-space: pre-wrap; }
.ask-answers li.is-hidden p { opacity: .4; }
.ask-ans-acts { display: flex; gap: 4px; justify-content: flex-end; }
.ask-answer { display: grid; gap: 14px; max-width: 520px; }
.ask-big { font-size: clamp(1.7rem, 7vw, 2.3rem); }
.ask-answer textarea { min-height: 140px; font: 400 1.1rem/1.5 var(--serif); }
.ask-done { justify-items: start; }
.dy-week span.frozen i { background: rgba(160, 200, 255, .18); border-color: rgba(160, 200, 255, .6); font-family: var(--emoji); }
.dy-weekimg { width: 100%; max-width: 360px; justify-self: center; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }

/* =====================================================================
   Kahin bhi likho: text box (kheencho / ghumao / bada-chhota)
   ===================================================================== */
.dy-st-text { width: var(--tw, 60%); aspect-ratio: auto; container-type: normal; }
.dy-tx {
  font-family: var(--tfont, var(--pfont)); color: var(--tink, var(--ink)); font-size: calc(var(--bw) * .055); line-height: 1.32; text-align: var(--ta, left);
  white-space: pre-wrap; overflow-wrap: anywhere; padding: .3em .5em; min-height: 1.5em; outline: none; border-radius: .3em;
}
.dy-st-text.is-b .dy-tx { font-weight: 700; }
.dy-st-text.is-editing { cursor: text; touch-action: auto; user-select: text; -webkit-user-select: text; outline-style: solid; }
.dy-st-text.is-editing .dy-tx { user-select: text; -webkit-user-select: text; cursor: text; caret-color: var(--tink, var(--ink)); }
.dy-tx:empty::before { content: attr(data-ph); opacity: .45; }
.dy-tx-note .dy-tx { background: linear-gradient(175deg, #FFF6B8, #FFE97A); box-shadow: 0 8px 14px -6px rgba(70, 50, 0, .4), inset 0 -10px 18px -14px rgba(120, 90, 0, .4); border-radius: 2px; padding: .7em .7em .9em; }
.dy-tx-note::before { content: ""; position: absolute; left: 50%; top: -9px; width: 34%; height: 18px; transform: translateX(-50%) rotate(-2deg); background: rgba(255, 255, 255, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); z-index: 1; }
.dy-tx-pink .dy-tx { background: linear-gradient(175deg, #FFE3EC, #FFC6D8); box-shadow: 0 8px 14px -6px rgba(120, 20, 60, .35); border-radius: 2px; padding: .7em .7em .9em; }
.dy-tx-pink::before { content: "🌸"; position: absolute; right: -6px; top: -12px; font: 1.3rem/1 var(--emoji); z-index: 1; }
.dy-tx-tape .dy-tx { padding: .45em .9em; border-radius: 1px;
  background: repeating-linear-gradient(-45deg, rgba(255, 170, 200, .78) 0 8px, rgba(255, 205, 222, .78) 8px 16px);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 51% 9px repeat-y, radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) right / 51% 9px repeat-y;
  mask: radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 51% 9px repeat-y, radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) right / 51% 9px repeat-y; }
.dy-tx-bubble .dy-tx { background: #FFFFFF; border-radius: 1.2em; padding: .6em .9em; box-shadow: 0 4px 12px rgba(40, 25, 60, .2), inset 0 0 0 1.5px rgba(60, 40, 90, .25); }
.dy-tx-bubble::after { content: ""; position: absolute; left: 18%; bottom: -10px; width: 18px; height: 14px; background: #fff; clip-path: polygon(0 0, 100% 0, 10% 100%); filter: drop-shadow(0 2px 1px rgba(40, 25, 60, .15)); }
.dy-tx-label .dy-tx { background: linear-gradient(180deg, #D8B98A, #C9A673); color: var(--tink, #3E2A10); padding: .45em .8em; border-radius: .25em; box-shadow: 0 3px 6px rgba(60, 40, 10, .3), inset 0 0 0 2px rgba(255, 255, 255, .25); }
.dy-paper-night .dy-tx-plain .dy-tx { color: var(--tink, #EDE4C8); }
.dy-held .dy-st-text { pointer-events: none; }

/* Text box tool-patti */
.dy-txbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(40, 18, 44, .97); border-top: 1px solid rgba(255, 170, 200, .35);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.dy-txbar.is-kb { padding-bottom: 6px; }
.dy-txbar::-webkit-scrollbar { display: none; }
.dy-txbar > button { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 52px; height: 50px; padding: 4px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--moon); cursor: pointer; font: 600 1.05rem/1 var(--sans); }
.dy-txbar > button span { font: 500 .66rem/1 var(--sans); color: var(--mist); }
.dy-txbar > button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dy-txbar > button:hover { background: rgba(255, 255, 255, .07); }
.dy-txbar > button.is-on { background: rgba(255, 143, 177, .22); color: #FFB3CB; }
.dy-txbar .dy-tx-done { margin-left: auto; min-width: 46px; background: #FF8FB1; color: #3B0A1E; }
.dy-txbar .dy-tx-done svg { stroke: currentColor; stroke-width: 2.4; }
.dy-desk.has-drawer .dy-txbar { display: none; }
@media (min-width: 980px) {
  .dy-txbar { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); width: auto; max-width: min(92vw, 640px); border-radius: 18px; border: 1px solid rgba(255, 170, 200, .35); padding-bottom: 6px; }
}
/* Ghumane ka handle: bada aur saaf */
.dy-st-h { width: 32px; height: 32px; right: -18px; bottom: -18px; background: #FF8FB1; color: #3B0A1E; }
.dy-st-h::after { content: "↻"; font-size: 1.05rem; font-weight: 700; }
@media (max-width: 420px) { .dy-cap { min-width: 44px; padding-inline: 2px; } .dy-cap span { font-size: .64rem; } }

/* ---------- Sapno ka matlab: tez jawab, fehrist, sawaal-jawaab ---------- */
.meaning-quick { margin: 4px 0 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(140deg, rgba(247, 179, 43, .14), rgba(31, 27, 77, .6)); border: 1px solid rgba(247, 179, 43, .3); }
.meaning-quick p { margin: 0; }
.meaning-toc { margin: 10px 0 18px; font-size: .92rem; color: var(--mist); line-height: 1.9; }
.meaning-toc a { color: var(--moon); }
.meaning h3 { margin: 22px 0 6px; font: 500 1.12rem/1.35 var(--sans); }
.meaning h4 { margin: 8px 0 4px; font: 500 1rem/1.4 var(--serif); color: var(--mist); }
.h-alt-inline { font: 400 .9em var(--serif); color: var(--mist); }
.faq { display: grid; gap: 8px; margin: 10px 0 24px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--night-2); padding: 0 14px; }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--genda); font-weight: 700; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 14px; color: var(--mist); }
.symbol-find { display: block; margin: 12px 0; }
.symbol-group[hidden] { display: none; }
.story-syms { margin: 4px 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--night-2); border: 1px dashed rgba(140, 155, 255, .35); }
.story-syms p { margin: 0 0 8px; }

/* =====================================================================
   Pehra: chetavni patti, server ki nazar, suraksha, devices, dhundhla parda
   ===================================================================== */
.dy-alert { width: max(var(--bw), min(100%, 460px)); max-width: 100%; animation: dy-rise .4s ease; }
.dy-alert-in {
  display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255, 170, 120, .55); background: linear-gradient(120deg, rgba(255, 140, 90, .2), rgba(255, 140, 90, .06)); color: var(--moon);
}
.dy-alert-in b { font: 600 .98rem/1.35 var(--sans); }
.dy-alert-in > span { font-size: .88rem; color: var(--mist); }
.dy-alert-in .dy-row { gap: 8px; flex-wrap: wrap; }
.dy-alert .dy-chip { min-height: 34px; font-size: .86rem; background: rgba(255, 255, 255, .92); }
.dy-chip-danger { background: #B3261E !important; color: #fff !important; border-color: transparent !important; }

.dy-seen {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-grid; place-items: center; background: rgba(70, 56, 40, .08); font: .78rem/1 var(--emoji); opacity: .75;
}
.dy-seen:hover, .dy-seen:focus-visible { opacity: 1; background: rgba(70, 56, 40, .16); }
.dy-desk.is-locked .dy-seen { visibility: hidden; }

.dy-srv { display: grid; gap: 10px; }
@media (min-width: 640px) { .dy-srvmodal { width: min(640px, 100%); } .dy-srv { grid-template-columns: 1fr 1fr; } }
.dy-srv-box { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.dy-srv-you { background: #FFF8EC; color: #2B2118; border-color: transparent; }
.dy-srv-them { background: #0E0B1F; }
.dy-srv-h { margin: 0; font: 600 .86rem/1.3 var(--sans); }
.dy-srv-you .dy-srv-h { color: #6A4A2A; }
.dy-srv-them .dy-srv-h { color: #9FE0B5; }
.dy-srv-plain { font: 400 1.05rem/1.45 'Kalam', cursive; color: var(--ink, #1F3C88); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto; }
.dy-srv-ct {
  margin: 0; font: 400 .74rem/1.45 ui-monospace, Menlo, Consolas, monospace; color: #7EE2A0; white-space: pre-wrap; word-break: break-all;
  max-height: 200px; overflow: auto; -webkit-user-select: all; user-select: all;
}
.dy-srv-them .dy-ms { color: #9FE0B5; opacity: .85; }
.dy-srv-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .92rem; }
.dy-srv-facts code { font: .74rem ui-monospace, Menlo, monospace; word-break: break-all; color: var(--mist); }

.dy-guard summary { color: var(--genda); }
.dy-srvbtn { border-color: rgba(126, 226, 160, .5); }
.dy-radios { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.dy-radios legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.dy-radios label { display: flex; gap: 10px; align-items: center; cursor: pointer; min-height: 32px; }
.dy-radios input { width: 18px; height: 18px; accent-color: var(--genda); flex: none; }
.dy-devlist, .dy-tries { list-style: none; margin: 0; padding: 0; display: grid; }
.dy-devlist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dy-devlist li.is-off { opacity: .55; }
.dy-dev-ic { font: 1.3rem/1 var(--emoji); flex: none; }
.dy-dev-n { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dy-dev-n b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-dev-n small { color: var(--mist); font-size: .8rem; }
.dy-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--genda); color: var(--genda-ink) !important; font-size: .7rem !important; font-weight: 700; vertical-align: 2px; }
.dy-tries li { padding: 4px 0; font-size: .9rem; color: var(--mist); }

/* App se bahar jaate hi diary dhundhli (recent apps ki photo me likha hua na dikhe) */
html.dd-veil .dy-desk-book .dy-stage, html.dd-veil .dy-desk-book .dy-mem, html.dd-veil .dy-desk-book .dy-alert, html.dd-veil dialog.dy-modal, html.dd-veil .dy-drawer {
  filter: blur(22px) saturate(.5); transition: none;
}

/* =====================================================================
   Account: naya account / login / password bhool gaye / profile
   ===================================================================== */
.acc-card { max-width: 520px; margin: 8px 0 18px; padding: 18px; border-radius: 20px; background: linear-gradient(160deg, rgba(76, 64, 170, .35), rgba(31, 27, 77, .75)); border: 1px solid var(--line); }
.acc-hero { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.acc-moon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3C4, #F3D891 55%, #C99A3A); font: 1.6rem/1 var(--emoji, sans-serif); box-shadow: 0 0 24px rgba(243, 216, 145, .35); }
.acc-h { margin: 0 0 6px; font: 400 1.35rem/1.25 var(--serif); }
.acc-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; color: var(--mist); font-size: .95rem; }
.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: rgba(0, 0, 0, .22); }
.acc-tabs button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--mist); font: 600 1rem var(--sans); cursor: pointer; }
.acc-tabs button[aria-selected="true"] { background: var(--genda); color: var(--genda-ink); }
.acc-form .field input { min-height: 48px; }
.acc-pwrap { position: relative; display: block; }
.acc-pwrap input { padding-right: 52px; }
.acc-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 42px; height: 40px; border: 0; border-radius: 10px; background: transparent; font-size: 1.1rem; cursor: pointer; }
.acc-hint, .acc-small { margin: 0; color: var(--mist); font-size: .88rem; }
.acc-keep { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(126, 226, 160, .12); color: #BFF0CF; font-size: .9rem; }
.acc-err { margin: 0; min-height: 0; color: var(--danger); font-weight: 500; }
.acc-err:empty { display: none; }
.acc-link { padding: 4px 2px; border: 0; background: none; color: var(--genda); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acc-mail { display: grid; gap: 8px; justify-items: start; }
.acc-mail > span { font: 2.4rem/1 var(--emoji, sans-serif); }
.acc-mail h3 { margin: 0; font: 400 1.3rem var(--serif); }
.acc-mail p { margin: 0; }
.acc-banner { max-width: 640px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: rgba(247, 179, 43, .12); border: 1px solid rgba(247, 179, 43, .35); }
.acc-banner.is-ok { background: rgba(126, 226, 160, .12); border-color: rgba(126, 226, 160, .4); }
.acc-banner.is-bad { background: rgba(255, 122, 138, .12); border-color: rgba(255, 122, 138, .4); }
.acc-skel { display: grid; gap: 12px; max-width: 520px; }
.acc-skel span { display: block; height: 64px; border-radius: 16px; background: linear-gradient(90deg, var(--night-2), var(--night-3), var(--night-2)); background-size: 200% 100%; animation: acc-shimmer 1.2s linear infinite; }
@keyframes acc-shimmer { to { background-position: -200% 0; } }

.acc-me { max-width: 640px; }
.acc-head { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 20px; background: var(--night-2); border: 1px solid var(--line); }
.acc-photo { position: relative; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.acc-photo .avatar { width: 88px; height: 88px; font-size: 2.4rem; box-shadow: 0 0 0 3px var(--night), 0 0 0 5px rgba(243, 216, 145, .5); }
.acc-cam { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--genda); font-size: .95rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.acc-id { min-width: 0; display: grid; gap: 2px; }
.acc-name { margin: 0; font: 400 1.45rem/1.2 var(--serif); overflow-wrap: anywhere; }
.acc-user, .acc-mailrow { margin: 0; color: var(--mist); font-size: .92rem; overflow-wrap: anywhere; }
.acc-bio { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.acc-acts { margin: 12px 0; }
.acc-edit > summary, .acc-sec > summary { font-weight: 600; }
.acc-photo-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
[data-av-preview] .avatar { width: 72px; height: 72px; font-size: 2rem; }
[data-av-preview].is-busy { opacity: .45; animation: acc-pulse 1s ease-in-out infinite; }
@keyframes acc-pulse { 50% { opacity: .2; } }
.acc-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-upload { cursor: pointer; }
.acc-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-emo { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--night-3); font: 1.3rem/1 var(--emoji, sans-serif); cursor: pointer; }
.acc-uwrap { display: flex; align-items: center; gap: 6px; }
.acc-uwrap > span { color: var(--mist); font-weight: 600; }
.acc-ucheck { color: var(--mist); }
.acc-ucheck.is-ok { color: #7EE2A0; }
.acc-ucheck.is-bad { color: var(--danger); }
.acc-h3 { margin: 4px 0 0; font: 600 1rem var(--sans); }
.acc-sec form + form { padding-top: 14px; border-top: 1px dashed var(--line); }
.acc-danger { padding-top: 10px; border-top: 1px dashed var(--line); }
.acc-danger summary { color: var(--danger); cursor: pointer; }
.profile-bio { grid-column: 1 / -1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 420px) { .acc-head { padding: 14px; gap: 12px; } .acc-photo .avatar { width: 72px; height: 72px; } .acc-card { padding: 14px; } }

.acc-edit textarea { min-height: 88px; font: 400 1rem/1.5 var(--sans); }
/* Diary: ek hi panna (laptop pe bhi) — thoda bada */
@media (min-width: 900px) { :root { --bw: min(calc(100vw - 40px), 500px, calc((100vh - 250px) * .7)); } }
@supports (height: 100dvh) { @media (min-width: 900px) { :root { --bw: min(calc(100vw - 40px), 500px, calc((100dvh - 250px) * .7)); } } }