@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/assets/fonts/thmanyah-serif-display/thmanyah-serif-display-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/assets/fonts/thmanyah-serif-display/thmanyah-serif-display-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/assets/fonts/thmanyah-serif-display/thmanyah-serif-display-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/assets/fonts/thmanyah-serif-display/thmanyah-serif-display-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/assets/fonts/thmanyah-serif-display/thmanyah-serif-display-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --ink: #241b17;
  --muted: #685548;
  --panel: rgba(255,250,240,.96);
  --line: #e4d8c3;
  --warm: #224279;
  --green: #e9decb;
  --green2: #1f3d70;
  --red: #e9decb;
  --red2: #23437b;
  --shadow: 0 18px 45px rgba(24,49,91,.10);
}

html,
body {
  background: #f1e9da;
  color: var(--ink);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Thmanyah Serif Display", "Thamaneh", "SF Arabic", "Geeza Pro", Tahoma, Arial, serif;
}

.stats-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-schedule {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.overview-time-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid #e2d5c0;
  border-radius: 15px;
  background: #f5eee1;
}

.overview-time-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.overview-time-card strong {
  overflow: hidden;
  color: #332621;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.overview-time-card.date { background: linear-gradient(135deg, #eee5d5, #fffaf0); }
.overview-time-card.cutoff { border-color: #e1d3be; background: #f3ebdd; }
.overview-time-card.dinner { border-color: #e4d7c2; background: #f3ebdd; }
.overview-time-card.dinner strong { color: #1e3c6e; }

.bg {
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 5%, rgba(232,187,118,.24), transparent 34%),
    radial-gradient(circle at 3% 35%, rgba(199,215,243,.32), transparent 32%),
    linear-gradient(180deg, #f6efe3 0%, #efe6d5 58%, #f6efe3 100%);
}

.bg::before,
.bg::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .48;
}

.bg::before {
  top: -120px;
  right: -80px;
  background: radial-gradient(circle at 35% 35%, rgba(232,188,119,.78), rgba(232,188,119,0) 68%);
}

.bg::after {
  bottom: 8%;
  left: -150px;
  background: radial-gradient(circle at 55% 45%, rgba(166,191,234,.55), rgba(166,191,234,0) 70%);
}

.panel,
.glass {
  border-color: rgba(126,161,221,.20);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.shell {
  width: min(100%, 560px);
  padding: max(14px, env(safe-area-inset-top)) 12px max(30px, env(safe-area-inset-bottom));
  align-items: flex-start;
}

.panel {
  position: relative;
  overflow: hidden;
  margin: auto;
  padding: 34px 22px 26px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,250,240,.98), rgba(244,236,224,.96));
  isolation: isolate;
}

.panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 180px;
  top: -105px;
  left: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(202,217,243,.62), rgba(202,217,243,0) 70%);
}

.panel > * {
  position: relative;
  z-index: 1;
}

.compact-panel {
  max-width: 430px;
}

.brand-mark,
.avatar,
.admin-logo,
.admin-loader-mark {
  background: linear-gradient(145deg, #ebe0ce, #eac180);
  color: #19325d;
  box-shadow: inset 0 1px rgba(255,250,240,.8), 0 9px 22px rgba(30,60,111,.13);
}

.brand-mark {
  border: 5px solid rgba(255,250,240,.94);
  margin-top: 0;
}

.brand-mark.app-icon-mark {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #172641;
}

.app-icon-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.eyebrow,
.card-kicker {
  color: #224279;
}

.lead,
.login-help,
.muted,
.tool-btn small,
.mini-card span,
.mini-card small,
.answer-label,
.answer-head small,
.timing-row span,
.count-badge span,
.empty,
.card-subtitle,
.admin-date,
.stat span,
.stat small {
  color: var(--muted);
}

.primary {
  background: #25457d;
  color: #fffaf0;
  box-shadow: 0 8px 20px rgba(28,56,104,.18);
}

.primary:active {
  transform: translateY(1px);
}

.secondary {
  background: #f0e8d9;
  border-color: #e0d2bd;
  color: var(--ink);
}

.link-btn,
.text-btn {
  color: #214178;
}

.code-input,
.req-form input,
.extras input,
.admin-input {
  background: #f8f1e6;
  border-color: #e0d2bd;
  color: var(--ink);
  color-scheme: light;
}

.code-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 9px;
  padding-right: 23px;
}

.code-input::placeholder {
  direction: rtl;
  unicode-bidi: plaintext;
  letter-spacing: normal;
  font-weight: 700;
  opacity: .62;
}

.code-input:focus,
.req-form input:focus,
.extras input:focus,
.admin-input:focus {
  border-color: #81a3de;
  box-shadow: 0 0 0 4px rgba(116,153,217,.12);
}

.message { color: #392b25; }
.message.ok { color: #342722; }
.message.bad { color: #224279; }
.loader { border-color: #e4d8c3; border-top-color: #4774c1; }

.app-view {
  padding-top: 2px;
}

.topbar {
  padding: 5px 3px 12px;
}

.topbar h1 {
  color: #211815;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #ded0ba;
  border-radius: 13px;
  background: rgba(255,250,240,.82);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 7px 17px rgba(24,49,91,.08);
}

.avatar {
  border: 1px solid rgba(75,119,195,.13);
}

.status-pill {
  color: #1f3d70;
  background: #ede3d2;
  border-color: #e3d7c2;
}

.status-pill.closed {
  color: #352923;
  background: #ece2d0;
  border-color: #e0d3bd;
}

.motion-strip {
  position: relative;
  height: 104px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(84,127,201,.14);
  background: linear-gradient(120deg, #ece2d0, #eee5d4, #eadfcd, #f0e8d8);
  background-size: 260% 260%;
  box-shadow: 0 15px 36px rgba(24,47,85,.10);
  isolation: isolate;
}

.motion-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(105deg, transparent 30%, rgba(255,250,240,.54) 48%, transparent 66%);
  transform: translateX(120%);
}

.motion-orb {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  filter: blur(1px);
}

.orb-one { width: 88px; height: 88px; right: 9%; top: -24px; background: rgba(231,186,116,.58); }
.orb-two { width: 62px; height: 62px; left: 18%; bottom: -22px; background: rgba(158,185,232,.48); }
.orb-three { width: 36px; height: 36px; left: 42%; top: 14px; background: rgba(255,250,240,.72); }

.motion-ring {
  position: absolute;
  z-index: 3;
  width: 72px;
  height: 72px;
  left: 8%;
  top: 15px;
  border: 1px solid rgba(37,69,125,.22);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(255,250,240,.18), 0 0 0 12px rgba(255,250,240,.13);
}

.motion-spark {
  position: absolute;
  z-index: 5;
  color: rgba(33,64,119,.46);
  font-size: 14px;
}

.spark-one { right: 38%; top: 20px; }
.spark-two { right: 22%; bottom: 18px; font-size: 9px; }
.spark-three { left: 34%; bottom: 14px; font-size: 11px; }

.hero-card {
  padding: 18px;
  background: rgba(255,250,240,.97);
}

.hero-card.state-in {
  border-color: #ded0b9;
  background: linear-gradient(145deg, #f5eee2, #fffaf0 68%);
  box-shadow: 0 18px 45px rgba(34,67,123,.10);
}

.hero-card.state-out {
  border-color: #e0d2bd;
  background: linear-gradient(145deg, #f7f1e5, #fffaf0 68%);
}

.hero-head h2 {
  color: #211815;
}

.count-badge {
  background: #f0e7d8;
  border-color: #e3d6c1;
}

.count-badge strong {
  color: #203f74;
}

.dinner-note {
  background: #f3ebdf;
  border-color: #e2d5c0;
  color: #1a3461;
}

.schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.schedule-item {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #e3d6c1;
  border-radius: 16px;
  background: #f5eee1;
}

.schedule-item span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.schedule-item strong {
  color: #332621;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.schedule-date {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #eee5d5, #fffaf0);
}

.schedule-date strong {
  overflow: hidden;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.schedule-dinner {
  border-color: #efcd96;
  background: linear-gradient(145deg, #f0e7d7, #fffaf0);
}

.schedule-dinner strong { color: #1e3c6f; }

.countdown-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 11px 13px;
  border: 1px solid #e4d8c3;
  border-radius: 15px;
  background: #f1e9db;
  color: #1e3c6e;
}

.countdown-strip span { font-size: 11px; font-weight: 850; }
.countdown-strip strong { font-size: 19px; font-variant-numeric: tabular-nums; direction: ltr; }
.hero-card.counting-dinner .schedule-cutoff { opacity: .62; }
.hero-card.counting-dinner .schedule-dinner { border-color: #c0d2f2; background: linear-gradient(145deg, #ede4d3, #fffaf0); }
.hero-card.counting-dinner .schedule-dinner strong { color: #1f3d70; }

.rsvp {
  min-height: 62px;
  background: #f6efe3;
  color: var(--ink);
}

.rsvp.yes {
  color: #25467e;
  border-color: #e3d6c2;
}

.rsvp.no {
  color: #392b25;
  border-color: #e3d6c1;
}

.rsvp.active.yes {
  background: #25467d;
  border-color: #25467d;
  color: #fffaf0;
  box-shadow: 0 9px 20px rgba(37,70,125,.20);
}

.rsvp.active.no {
  background: #3f3029;
  border-color: #3f3029;
  color: #fffaf0;
  box-shadow: 0 9px 20px rgba(63,48,41,.18);
}

.extras { border-top-color: #e8dcc9; }
.undo-bar { background: #ebe1cf; color: #40312a; }
.undo-bar button { background: #25457d; color: #fffaf0; }

.mini-card {
  background: rgba(255,250,240,.94);
}

.mini-card strong {
  color: #19325d;
}

.private-money {
  border-color: #ded0ba;
  background: linear-gradient(145deg, #fffaf0, #f3ebdd);
}

.list-card {
  background: rgba(255,250,240,.94);
}

.registered-label {
  padding: 6px 8px;
  border-radius: 999px;
  background: #f0e8d9;
  color: #25457d;
  font-size: 9px;
  font-weight: 900;
}

.attendee-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.attendee-person {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #eadfcd;
  border-radius: 15px;
  background: #f7f1e6;
}

.attendee-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #ece2d0;
  color: #203e73;
  font-size: 13px;
  font-weight: 950;
}

.attendee-person div { min-width: 0; }
.attendee-person strong { display: block; overflow: hidden; color: #2e231e; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.attendee-person small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.attendee-number { color: #725e50; font-size: 9px; font-variant-numeric: tabular-nums; }
.attendee-empty { grid-column: 1 / -1; padding: 20px 12px; border: 1px dashed #d6c6ae; border-radius: 15px; color: var(--muted); text-align: center; font-size: 12px; }
.app-view footer { color: #7c6758; }
.footer-logout { color: #675447; }

/* Admin */
.admin-shell {
  padding-top: max(12px, env(safe-area-inset-top));
}

.admin-loading {
  position: relative;
  overflow: hidden;
  padding: 34px 22px 25px;
  background: linear-gradient(135deg, rgba(255,250,240,.98), rgba(242,234,220,.96), rgba(240,231,216,.96));
}

.admin-head {
  position: relative;
  min-height: 112px;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
  border-color: rgba(24,47,87,.18);
  background: linear-gradient(120deg, #ebe1cf, #eee5d4, #efe6d6);
  background-size: 220% 220%;
  box-shadow: 0 16px 38px rgba(24,47,85,.11);
  isolation: isolate;
}

.admin-head::before,
.admin-head::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
}

.admin-head::before { width: 132px; height: 132px; right: 20%; top: -64px; background: rgba(255,250,240,.45); }
.admin-head::after { width: 84px; height: 84px; left: 9%; bottom: -47px; background: rgba(146,176,228,.25); }
.admin-head > * { position: relative; z-index: 1; }

.admin-head .eyebrow,
.admin-head .admin-date {
  color: #5d4a3f;
}

.admin-head h1 { color: #241b17; }
.admin-logo { border: 1px solid rgba(255,250,240,.72); }
.live-chip { color: #224178; background: rgba(255,250,240,.58); border-color: rgba(79,123,198,.18); }
.icon-btn,
.logout-btn { color: #3a2d26; background: rgba(255,250,240,.58); border-color: rgba(29,58,108,.16); backdrop-filter: blur(10px); }

.admin-nav {
  top: max(6px, env(safe-area-inset-top));
  background: rgba(255,250,240,.93);
}

.nav-tab { color: #665346; }
.nav-tab.active { background: #25457d; color: #fffaf0; box-shadow: 0 7px 16px rgba(28,56,104,.15); }

.stat,
.ledger-stat {
  background: linear-gradient(145deg, #fffaf0, #f4ede0);
  border-color: #e4d8c4;
}

.stat-accent {
  background: linear-gradient(145deg, #f1e8d9, #fffaf0);
  border-color: #e4d8c4;
}

.stat strong,
.ledger-stat strong { color: #182f57; }
.admin-card { background: rgba(255,250,240,.96); }
.count-chip { background: #ede4d3; border-color: #e0d2bc; color: #214077; }

.registration-row,
.audit-row,
.person-row,
.ledger-person,
.ledger-date,
.ins-person,
.cal-day {
  background: #f6efe3;
  border-color: #e8dcc9;
}

.reg-status.in,
.payment-badge.paid { background: #ece2d1; color: #214178; }
.reg-status.out,
.payment-badge.unpaid { background: #ebe1ce; color: #224279; }
.reg-status.pending { background: #ebe1ce; color: #5e4c40; }
.payment-badge.partial { background: #eee5d5; color: #224279; }
.small-btn { background: #f1e8d9; border-color: #e1d4bf; color: var(--ink); }
.small-btn.danger,
.danger-soft { color: #224279 !important; }
.small-btn.ok,
.ok-soft { color: #214178 !important; }
.alert-card { background: #f4ece0; border-color: #f3d7a9; color: #1e3c6f; }
.empty-inline { border-color: #d9cab2; }
.mini-stats span,
.name-pills span { background: #eee5d4; color: #604d42; }
.ledger-stat.total { background: linear-gradient(135deg, #e9decb, #fffaf0); }
.cal-day.has-dinner { background: #efe6d6; border-color: #f2d4a2; }
.person-price-editor { background: #f3eadd; border-color: #e0d2bc; }
.person-price-editor label > span { color: #224279; }
.toast { background: #382b25; color: #fffaf0; box-shadow: 0 14px 35px rgba(24,41,71,.22); }

.person-profile {
  padding: 15px;
  border-radius: 18px;
}

.person-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.person-profile .person-name {
  color: #2d221d;
  font-size: 17px;
}

.person-profile .person-name small {
  color: #224279;
  font-size: 9px;
}

.person-last-seen {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.person-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.person-info-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5d8c4;
  border-radius: 14px;
  background: #fffaf0;
}

.person-info-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ede3d2;
  color: #224279;
  font-size: 10px;
  font-weight: 900;
}

.person-info-card div { min-width: 0; }
.person-info-card small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 8px; }
.person-info-card strong { display: block; overflow: hidden; color: #382b24; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; }
.person-info-card.devices { grid-column: span 2; border-color: #e6dac6; background: #f6f0e4; }
.person-info-card.devices .person-info-icon { background: #ece3d1; color: #22427a; }
.person-info-card.balance { border-color: #e1d4bf; background: #f6efe4; }
.person-info-card.balance .person-info-icon { background: #eae0cd; color: #224279; }
.person-info-card.code { border-color: #e0d2bc; background: #f7f1e5; }
.person-info-card.code .person-info-icon { background: #ebe1cf; color: #885916; font-size: 16px; }
.person-access-code { color: #5d3e14 !important; font-size: 16px !important; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.person-info-card.phone strong { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.delete-person-btn { margin-inline-start: auto; }

/* دليل الأشخاص: صفوف هادئة وتفاصيل تُفتح عند الحاجة */
.directory-layout { grid-template-columns: minmax(0, 1fr); }
.directory-card { order: -1; }
.people-directory { gap: 8px; }
.person-accordion {
  padding: 0;
  overflow: hidden;
}
.person-list-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.person-list-summary::-webkit-details-marker { display: none; }
.person-list-summary:focus-visible { outline: 3px solid rgba(37,69,125,.22); outline-offset: -3px; }
.person-accordion[open] > .person-list-summary { background: #f0e7d8; }
.person-list-index {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e8ddca;
  color: #224279;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.person-list-main { min-width: 0; }
.person-list-main strong,
.person-list-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-list-main strong { color: #2d221d; font-size: 15px; }
.person-list-main strong small { display: inline; color: #224279; font-size: 9px; }
.person-list-main > small { margin-top: 2px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 11px; text-align: right; }
.person-list-state {
  padding: 5px 8px;
  border: 1px solid #dfd2bc;
  border-radius: 999px;
  background: #eee6d5;
  color: #5e4c40;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.person-list-state.active { border-color: #e1d4be; background: #efe6d6; color: #25467e; }
.person-list-chevron { color: #7e6a5a; font-size: 19px; text-align: center; transition: transform .2s ease; }
.person-accordion[open] .person-list-chevron { transform: rotate(180deg); }
.person-accordion-body { padding: 14px; border-top: 1px solid #e4d8c3; background: #fffaf0; }
.person-accordion .person-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.person-accordion .person-info-card.devices { grid-column: auto; }
.person-edit-card {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #e3d6c1;
  border-radius: 15px;
  background: #f6efe3;
}
.person-edit-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.person-edit-title strong { color: #3e3029; font-size: 13px; }
.person-edit-title small { color: var(--muted); font-size: 9px; }
.person-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.person-edit-grid label { min-width: 0; }
.person-edit-grid label > span { display: block; margin: 0 2px 5px; color: #5d4b3f; font-size: 10px; font-weight: 850; }
.person-edit-grid .admin-input { width: 100%; }
.save-person-profile { min-height: 43px; }

/* قائمة حضور هادئة وواضحة */
.attendance-board {
  padding: 14px;
  border: 1px solid #e5d9c5;
  border-radius: 20px;
  background: linear-gradient(145deg, #f5eee2, #fffaf0 72%);
}

.attendance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.attendance-heading h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.attendance-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #e4d7c2;
  border-radius: 999px;
  background: #eee5d4;
  color: #224178;
  font-size: 11px;
  font-weight: 800;
}

.attendance-count b {
  font-size: 16px;
}

.registration-list {
  gap: 7px;
}

.registration-entry {
  overflow: hidden;
  border: 1px solid #e5d9c4;
  border-radius: 15px;
  background: #fffaf0;
}

.registration-entry.in {
  border-color: #e6dac6;
}

.registration-entry > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.registration-entry > summary::-webkit-details-marker,
.registration-group > summary::-webkit-details-marker {
  display: none;
}

.registration-entry[open] > summary {
  border-bottom: 1px solid #e8ddca;
  background: #f8f1e6;
}

.attendee-index {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f0e8d9;
  color: #224279;
  font-weight: 950;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.registration-entry.out .attendee-index {
  background: #eee5d4;
  color: #382b25;
}

.registration-entry.pending .attendee-index {
  background: #eee5d3;
  color: #675448;
}

.registration-person {
  min-width: 0;
}

.registration-person strong {
  font-size: 14px;
}

.registration-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-toggle {
  color: #6c594c;
  font-size: 10px;
  font-weight: 800;
}

.registration-entry[open] .entry-toggle {
  color: #214077;
}

.registration-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px auto;
  gap: 7px;
  padding: 10px;
  background: #f8f1e6;
}

.registration-editor .admin-input,
.registration-editor .small-btn {
  min-height: 40px;
}

.registration-group {
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid #e4d7c2;
  border-radius: 17px;
  background: rgba(255,250,240,.86);
}

.registration-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
  color: #4f3e35;
  font-size: 12px;
  font-weight: 900;
}

.registration-group > summary span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.registration-group > summary b {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #ede3d2;
  color: #57453b;
  font-variant-numeric: tabular-nums;
}

.registration-group[open] > summary {
  border-bottom: 1px solid #e8ddca;
  background: #f6efe3;
}

.group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #97826f;
}

.group-dot.out { background: #6b574a; }
.group-dot.pending { background: #907b68; }
.grouped-list { padding: 9px; }
.compact-empty { padding: 15px; }

/* وضع ليلي يدوي — محفوظ بين واجهة المستخدم والإدارة */
html[data-theme="dark"] {
  --ink: #eee5d4;
  --muted: #b7a28b;
  --panel: rgba(24,17,15,.96);
  --line: #41322a;
  --warm: #e0aa5b;
  --green: #93b1e4;
  --green2: #bfd2f2;
  --red: #93b1e4;
  --red2: #b7ccef;
  --shadow: 0 20px 50px rgba(12,9,8,.28);
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0d0a09;
  color: var(--ink);
}

html[data-theme="dark"] .bg {
  background:
    radial-gradient(circle at 95% 5%, rgba(42,74,131,.20), transparent 34%),
    radial-gradient(circle at 3% 35%, rgba(28,56,105,.22), transparent 32%),
    linear-gradient(180deg, #0f0b09 0%, #0d0908 58%, #0e0a09 100%);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .glass,
html[data-theme="dark"] .admin-card {
  border-color: #382b24;
  background: rgba(23,16,14,.96);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .panel {
  background: linear-gradient(145deg, #191210, #110c0a);
}

html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .admin-logo,
html[data-theme="dark"] .admin-loader-mark {
  background: linear-gradient(145deg, #1a3461, #221916);
  color: #e5d9c5;
  box-shadow: inset 0 1px rgba(255,250,240,.10), 0 10px 25px rgba(12,9,8,.25);
}

html[data-theme="dark"] .lead,
html[data-theme="dark"] .login-help,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .answer-label,
html[data-theme="dark"] .answer-head small,
html[data-theme="dark"] .count-badge span,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .admin-date,
html[data-theme="dark"] .stat span,
html[data-theme="dark"] .stat small {
  color: var(--muted);
}

html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .hero-head h2,
html[data-theme="dark"] .admin-head h1,
html[data-theme="dark"] .stat strong,
html[data-theme="dark"] .ledger-stat strong,
html[data-theme="dark"] .attendee-person strong {
  color: var(--ink);
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .logout-btn {
  border-color: #47372f;
  background: #1f1714;
  color: #eee4d3;
  box-shadow: none;
}

html[data-theme="dark"] .status-pill { border-color: #1f3d72; background: #17253e; color: #c7d7f3; }
html[data-theme="dark"] .status-pill.closed { border-color: #2b201c; background: #1b1311; color: #d7c7af; }
html[data-theme="dark"] .motion-strip { border-color: #352923; background: linear-gradient(120deg, #231a17, #271d19, #251b18, #2a1f1b); background-size: 260% 260%; box-shadow: 0 16px 38px rgba(12,9,8,.24); }
html[data-theme="dark"] .motion-strip::after { background: linear-gradient(105deg, transparent 30%, rgba(255,250,240,.10) 48%, transparent 66%); }
html[data-theme="dark"] .motion-ring { border-color: rgba(233,189,121,.30); box-shadow: inset 0 0 0 10px rgba(255,250,240,.03), 0 0 0 12px rgba(255,250,240,.025); }
html[data-theme="dark"] .motion-spark { color: rgba(237,201,142,.60); }

html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .list-card { background: #16100e; }
html[data-theme="dark"] .hero-card.state-in { border-color: #203e73; background: linear-gradient(145deg, #17253d, #16100e 70%); }
html[data-theme="dark"] .hero-card.state-out { border-color: #2b201c; background: linear-gradient(145deg, #191210, #120d0b 70%); }
html[data-theme="dark"] .count-badge { border-color: #45352d; background: #201715; }
html[data-theme="dark"] .count-badge strong,
html[data-theme="dark"] .mini-card strong { color: #bbcef0; }
html[data-theme="dark"] .dinner-note { border-color: #1a335f; background: #201714; color: #f4dbb1; }

html[data-theme="dark"] .schedule-item { border-color: #3d2f28; background: #1d1513; }
html[data-theme="dark"] .schedule-date { background: linear-gradient(135deg, #261c18, #1a1311); }
html[data-theme="dark"] .schedule-item strong { color: #e8ddca; }
html[data-theme="dark"] .schedule-dinner { border-color: #1f3d72; background: linear-gradient(145deg, #281e1a, #1b1412); }
html[data-theme="dark"] .schedule-dinner strong { color: #ecc688; }
html[data-theme="dark"] .countdown-strip { border-color: #1b3766; background: #162237; color: #c7d7f3; }
html[data-theme="dark"] .hero-card.counting-dinner .schedule-dinner { border-color: #2a4a82; background: linear-gradient(145deg, #182a4a, #1a1311); }
html[data-theme="dark"] .hero-card.counting-dinner .schedule-dinner strong { color: #c7d7f3; }

html[data-theme="dark"] .rsvp { background: #1d1513; color: var(--ink); }
html[data-theme="dark"] .rsvp.yes { border-color: #1f3d70; color: #c7d7f3; }
html[data-theme="dark"] .rsvp.no { border-color: #2a1f1c; color: #d7c6ae; }
html[data-theme="dark"] .rsvp.active.yes { background: #25467d; color: #fffaf0; }
html[data-theme="dark"] .rsvp.active.no { background: #3f3029; color: #fffaf0; }
html[data-theme="dark"] .extras { border-top-color: #3d2f28; }
html[data-theme="dark"] .undo-bar { background: #211815; color: #e1d4bf; }
html[data-theme="dark"] .private-money { border-color: #47372f; background: linear-gradient(145deg, #1d1513, #16100e); }
html[data-theme="dark"] .registered-label { background: #172641; color: #bed1f2; }
html[data-theme="dark"] .attendee-person { border-color: #42332b; background: #201715; }
html[data-theme="dark"] .attendee-avatar { background: #182d52; color: #cad9f3; }
html[data-theme="dark"] .attendee-number { color: #98826f; }
html[data-theme="dark"] .attendee-empty { border-color: #41322a; }
html[data-theme="dark"] .app-view footer,
html[data-theme="dark"] .footer-logout { color: #a9937e; }

html[data-theme="dark"] .secondary,
html[data-theme="dark"] .small-btn { border-color: #44352d; background: #1f1614; color: var(--ink); }
html[data-theme="dark"] .code-input,
html[data-theme="dark"] .req-form input,
html[data-theme="dark"] .extras input,
html[data-theme="dark"] .admin-input { border-color: #43342c; background: #100b0a; color: var(--ink); color-scheme: dark; }
html[data-theme="dark"] .admin-loading { background: linear-gradient(135deg, #1b1412, #1e1614, #1c1512); }
html[data-theme="dark"] .admin-head { border-color: #3f3029; background: linear-gradient(120deg, #271d19, #281e1a, #281d1a); background-size: 220% 220%; box-shadow: 0 16px 38px rgba(12,9,8,.28); }
html[data-theme="dark"] .admin-head .eyebrow,
html[data-theme="dark"] .admin-head .admin-date { color: #c8b49c; }
html[data-theme="dark"] .live-chip { border-color: #1f3d71; background: #17263f; color: #c7d7f3; }
html[data-theme="dark"] .admin-nav { background: rgba(20,15,13,.96); }
html[data-theme="dark"] .nav-tab { color: #b7a28b; }
html[data-theme="dark"] .nav-tab.active { background: #7096d7; color: #130e0c; }
html[data-theme="dark"] .stat,
html[data-theme="dark"] .ledger-stat { border-color: #3c2e27; background: linear-gradient(145deg, #1d1513, #150f0d); }
html[data-theme="dark"] .stat-accent { border-color: #1d396a; background: linear-gradient(145deg, #172640, #16100e); }
html[data-theme="dark"] .count-chip { border-color: #19325f; background: #271d19; color: #e9bd79; }
html[data-theme="dark"] .registration-row,
html[data-theme="dark"] .audit-row,
html[data-theme="dark"] .person-row,
html[data-theme="dark"] .ledger-person,
html[data-theme="dark"] .ledger-date,
html[data-theme="dark"] .ins-person,
html[data-theme="dark"] .cal-day { border-color: #3c2e27; background: #1c1412; }
html[data-theme="dark"] .attendance-board { border-color: #19325d; background: linear-gradient(145deg, #241b18, #16100e 72%); }
html[data-theme="dark"] .attendance-count { border-color: #1c3867; background: #172741; color: #c6d6f3; }
html[data-theme="dark"] .registration-entry,
html[data-theme="dark"] .registration-group { border-color: #3c2e27; background: #1a1311; }
html[data-theme="dark"] .registration-entry[open] > summary,
html[data-theme="dark"] .registration-group[open] > summary,
html[data-theme="dark"] .registration-editor { border-color: #3e2f29; background: #16100e; }
html[data-theme="dark"] .registration-group > summary { color: #d0bea6; }
html[data-theme="dark"] .registration-group > summary b { background: #2c211d; color: #d0bea6; }
html[data-theme="dark"] .attendee-index { background: #182a4a; color: #c5d6f3; }
html[data-theme="dark"] .registration-entry.out .attendee-index { background: #1e1614; color: #d5c4ac; }
html[data-theme="dark"] .registration-entry.pending .attendee-index { background: #2c211d; color: #b9a48d; }
html[data-theme="dark"] .reg-status.in,
html[data-theme="dark"] .payment-badge.paid { background: #182948; color: #c8d8f3; }
html[data-theme="dark"] .reg-status.out,
html[data-theme="dark"] .payment-badge.unpaid { background: #172743; color: #bacef0; }
html[data-theme="dark"] .reg-status.pending { background: #2c211d; color: #bda891; }
html[data-theme="dark"] .payment-badge.partial { background: #182b4d; color: #bfd2f2; }
html[data-theme="dark"] .alert-card { border-color: #1c396a; background: #281e1a; color: #f1d29e; }
html[data-theme="dark"] .mini-stats span,
html[data-theme="dark"] .name-pills span { background: #281e1a; color: #bea992; }
html[data-theme="dark"] .ledger-stat.total { background: linear-gradient(135deg, #2a1f1b, #181210); }
html[data-theme="dark"] .cal-day.has-dinner,
html[data-theme="dark"] .person-price-editor { border-color: #19325d; background: #211916; }
html[data-theme="dark"] .person-price-editor label > span { color: #e1ad61; }
html[data-theme="dark"] .empty-inline { border-color: #47372f; }
html[data-theme="dark"] .overview-time-card { border-color: #3e3029; background: #1b1412; }
html[data-theme="dark"] .overview-time-card.date { background: linear-gradient(135deg, #271d19, #1a1311); }
html[data-theme="dark"] .overview-time-card.cutoff { border-color: #19325f; background: #211916; }
html[data-theme="dark"] .overview-time-card.dinner { border-color: #1c3868; background: #16233a; }
html[data-theme="dark"] .overview-time-card strong { color: #e8ddca; }
html[data-theme="dark"] .overview-time-card.dinner strong { color: #c7d7f3; }
html[data-theme="dark"] .person-profile .person-name { color: #eae0ce; }
html[data-theme="dark"] .person-info-card { border-color: #3f3029; background: #16100e; }
html[data-theme="dark"] .person-info-card strong { color: #e6dac6; }
html[data-theme="dark"] .person-info-card.devices { border-color: #18315c; background: #211816; }
html[data-theme="dark"] .person-info-card.devices .person-info-icon { background: #182d50; color: #c7d7f3; }
html[data-theme="dark"] .person-info-card.balance { border-color: #1a335f; background: #211815; }
html[data-theme="dark"] .person-info-card.balance .person-info-icon { background: #372a24; color: #e9bf7d; }
html[data-theme="dark"] .person-info-card.code { border-color: #654315; background: #1f1714; }
html[data-theme="dark"] .person-info-card.code .person-info-icon { background: #4c3412; color: #f1d19c; }
html[data-theme="dark"] .person-access-code { color: #f3daae !important; }
html[data-theme="dark"] .person-accordion[open] > .person-list-summary { background: #221916; }
html[data-theme="dark"] .person-list-index { background: #2c211d; color: #eac282; }
html[data-theme="dark"] .person-list-main strong { color: #eae0ce; }
html[data-theme="dark"] .person-list-state { border-color: #42322b; background: #281e1a; color: #bea992; }
html[data-theme="dark"] .person-list-state.active { border-color: #1b3563; background: #172741; color: #c5d6f3; }
html[data-theme="dark"] .person-accordion-body { border-color: #3c2e27; background: #16100e; }
html[data-theme="dark"] .person-edit-card { border-color: #40312a; background: #1c1412; }
html[data-theme="dark"] .person-edit-title strong { color: #e7dcc8; }
html[data-theme="dark"] .person-edit-grid label > span { color: #c2ad95; }

@media (max-width: 600px) {
  .overview-schedule { grid-template-columns: 1fr 1fr; }
  .overview-time-card.date { grid-column: 1 / -1; }
  .person-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-info-card.devices { grid-column: 1 / -1; }
  .person-accordion .person-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-accordion .person-info-card.devices { grid-column: 1 / -1; }
  .person-edit-grid { grid-template-columns: 1fr 1fr; }
  .save-person-profile { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 430px) {
  .shell { padding-inline: 10px; }
  .topbar h1 { font-size: 20px; }
  .motion-strip { height: 94px; }
  .hero-card { padding: 16px; }
  .hero-head h2 { font-size: 21px; }
  .quick-grid { gap: 7px; }
  .mini-card { padding: 12px 7px; }
  .panel { padding-inline: 18px; }
  .admin-head { min-height: 118px; padding: 13px; }
  .admin-brand { align-items: flex-end; }
  .admin-logo { display: none; }
  .admin-nav { margin-top: 9px; }
  .attendance-board { padding: 11px; }
  .attendance-heading h3 { font-size: 17px; }
  .registration-entry > summary { grid-template-columns: 32px minmax(0, 1fr) auto 26px; gap: 7px; padding-inline: 8px; }
  .registration-person strong { font-size: 13px; }
  .reg-status { padding-inline: 6px; }
  .entry-toggle { width: 26px; font-size: 0; text-align: center; }
  .entry-toggle::after { content: "⌄"; font-size: 16px; }
  .registration-entry[open] .entry-toggle::after { content: "⌃"; }
  .registration-editor { grid-template-columns: 1fr 110px; }
  .registration-editor .row-note { grid-column: 1 / -1; }
  .registration-editor .small-btn { width: 100%; }
  .header-actions { gap: 5px; }
  .header-actions .live-chip { display: none; }
  .header-actions .logout-btn { padding-inline: 10px; }
  .stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-profile { padding: 12px; }
  .person-accordion { padding: 0; }
  .person-list-summary { grid-template-columns: 30px minmax(0, 1fr) auto 22px; gap: 7px; min-height: 60px; padding: 9px 8px; }
  .person-list-index { width: 28px; height: 28px; }
  .person-list-main strong { font-size: 14px; }
  .person-list-state { padding-inline: 6px; font-size: 8px; }
  .person-accordion-body { padding: 10px; }
  .person-edit-title { display: block; }
  .person-edit-title small { display: block; margin-top: 2px; }
  .person-edit-grid { grid-template-columns: 1fr; }
  .save-person-profile { grid-column: auto; }
  .person-info-card { padding: 9px; }
  .person-actions .small-btn { flex: 1 1 calc(50% - 6px); }
  .delete-person-btn { flex-basis: 100% !important; }
}

@media (max-width: 360px) {
  .motion-strip { height: 86px; }
  .status-pill { padding-inline: 8px; font-size: 10px; }
  .rsvp { font-size: 16px; }
  .identity { gap: 8px; }
  .avatar { width: 42px; height: 42px; }
  .theme-toggle { width: 37px; height: 37px; flex-basis: 37px; }
  .schedule-item { padding: 10px; }
  .schedule-item strong { font-size: 14px; }
  .attendee-grid { grid-template-columns: 1fr; }
  .person-info-grid { grid-template-columns: 1fr; }
  .person-info-card.devices { grid-column: auto; }
  .person-list-summary { grid-template-columns: 30px minmax(0, 1fr) 22px; }
  .person-list-state { display: none; }
  .person-accordion .person-info-grid { grid-template-columns: 1fr; }
  .person-accordion .person-info-card.devices { grid-column: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .bg::before { animation: driftGlow 12s ease-in-out infinite alternate; }
  .bg::after { animation: driftGlow 15s ease-in-out infinite alternate-reverse; }
  .motion-strip, .admin-head { animation: gradientFlow 10s ease-in-out infinite alternate; }
  .motion-strip::after { animation: shimmerFlow 5.5s ease-in-out infinite; }
  .orb-one { animation: floatOne 6s ease-in-out infinite alternate; }
  .orb-two { animation: floatTwo 7.5s ease-in-out infinite alternate; }
  .orb-three, .motion-spark { animation: softPulse 3.2s ease-in-out infinite alternate; }
  .motion-ring { animation: ringFloat 8s ease-in-out infinite alternate; }
  .panel::before, .admin-head::before, .admin-head::after { animation: softPulse 7s ease-in-out infinite alternate; }
  @keyframes driftGlow { to { transform: translate3d(70px, 35px, 0) scale(1.16); } }
  @keyframes gradientFlow { to { background-position: 100% 70%; } }
  @keyframes shimmerFlow { 0%,35% { transform: translateX(120%); } 70%,100% { transform: translateX(-120%); } }
  @keyframes floatOne { to { transform: translate(-30px, 17px) scale(1.12); } }
  @keyframes floatTwo { to { transform: translate(34px, -20px) scale(.88); } }
  @keyframes ringFloat { to { transform: translate(24px, -8px) rotate(18deg); } }
  @keyframes softPulse { to { opacity: .38; transform: scale(1.12) rotate(8deg); } }
}

@media print {
  html, body { background: #fffaf0; }
  .admin-card, .stat, .ledger-stat, .ledger-person, .ledger-date { color: #0c0908 !important; background: #fffaf0 !important; }
}

.account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.response-summary-card { grid-column: 1 / -1; }
.account-actions { margin-top: 10px; padding: 14px; }
.account-actions-title { margin-bottom: 10px; }
.account-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-action { min-width: 0; min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,250,240,.62); color: var(--ink); text-align: right; cursor: pointer; }
.account-action > span { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; font-weight: 900; }
.account-action div { min-width: 0; display: grid; gap: 2px; }
.account-action strong { font-size: 13px; }
.account-action small { color: var(--muted); font-size: 10px; }
.account-action.reset > span { color: #fffaf0; background: #284982; }
.account-action.add > span { color: #fffaf0; background: #214077; }
.account-action:disabled { opacity: .46; cursor: not-allowed; }
[data-theme="dark"] .account-action { background: rgba(255,250,240,.045); }
.night-price-box { border-color: #e0d2bc; background: #f5eee2; }
.night-price-box strong { color: #392c25; }
[data-theme="dark"] .night-price-box { border-color: var(--line); background: rgba(255,250,240,.045); }
[data-theme="dark"] .night-price-box strong { color: var(--ink); }

@media (max-width: 390px) {
  .account-action-grid { grid-template-columns: 1fr; }
  .account-action { min-height: 58px; }
}

/* ===== نافذة التأكيد الموحدة — النموذج الرابع «الخطوة الذكية» ===== */
body.ask-open {
  overflow: hidden;
}

.ask-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(15,11,9,.58);
  overscroll-behavior: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .18s ease;
}

.ask-backdrop.show {
  opacity: 1;
}

.ask-card {
  width: min(100%, 430px);
  max-height: 100%;
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: right;
  opacity: 0;
  transform: scale(.94) translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

.ask-backdrop.show .ask-card {
  opacity: 1;
  transform: none;
}

.ask-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.ask-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--green);
  color: var(--green2);
  font-weight: 800;
  line-height: 1;
}

.ask-icon.text { font-size: 17px; }
.ask-icon.glyph { font-size: 26px; }

.ask-card.danger .ask-icon {
  background: var(--red);
  color: var(--red2);
}

.ask-title {
  margin: 15px 0 6px;
  font-size: 23px;
  line-height: 1.4;
}

.ask-desc {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.8;
  white-space: pre-line;
}

.ask-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 17px;
  padding: 6px 11px 6px 7px;
  border-radius: 999px;
  background: #efe6d5;
  color: var(--warm);
  font-size: 12px;
  font-weight: 800;
}

.ask-step i {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--warm);
  color: #fffaf0;
  font-size: 12px;
  font-style: normal;
}

.ask-field {
  display: grid;
  gap: 8px;
  margin: 11px 0 0;
}

.ask-field > span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
}

.ask-stepper {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  gap: 8px;
}

.ask-round {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #f5eee1;
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.ask-round:active {
  background: #ece2d0;
}

.ask-input {
  width: 100%;
  height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f5eee1;
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}

.ask-input:focus {
  border-color: var(--warm);
  box-shadow: 0 0 0 3px rgba(81,125,200,.16);
}

.ask-input.invalid {
  border-color: var(--red2);
}

.ask-hint {
  min-height: 18px;
  margin: 9px 3px 0;
  color: var(--muted);
  font-size: 13px;
}

.ask-actions {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

.ask-confirm,
.ask-cancel {
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ask-confirm {
  border: 0;
  background: var(--green2);
  color: #fffaf0;
}

.ask-card.danger .ask-confirm {
  background: var(--red2);
}

.ask-confirm[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.ask-cancel {
  border: 1px solid var(--line);
  background: #f5eee1;
  color: var(--ink);
}

.ask-extra {
  width: 100%;
  min-height: 44px;
  margin-top: 9px;
  border: 1px dashed var(--line);
  border-radius: 15px;
  background: transparent;
  color: var(--warm);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.ask-safe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 3px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.ask-safe i {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green2);
}

.ask-card.danger .ask-safe i {
  background: var(--red2);
}

.add-charge-btn {
  border-color: #d8c8b0;
  background: #f0e8d9;
  color: var(--warm);
}

@media (max-width: 420px) {
  .ask-card { padding: 22px 18px; border-radius: 28px; }
  .ask-title { font-size: 21px; }
  .ask-desc { font-size: 14px; }
  .ask-actions { grid-template-columns: 1fr; }
  .ask-confirm { min-height: 54px; }
  .ask-cancel { min-height: 48px; }
}

@media (max-height: 620px) {
  .ask-card { padding: 18px 18px 20px; }
  .ask-icon { width: 44px; height: 44px; border-radius: 15px; }
  .ask-title { margin-top: 12px; font-size: 20px; }
  .ask-input { height: 56px; font-size: 22px; }
  .ask-actions { margin-top: 14px; }
}

html[data-theme="dark"] .ask-backdrop {
  background: rgba(12,9,8,.66);
}

html[data-theme="dark"] .ask-step {
  background: rgba(224,170,91,.14);
}

html[data-theme="dark"] .ask-round,
html[data-theme="dark"] .ask-input,
html[data-theme="dark"] .ask-cancel {
  background: rgba(255,250,240,.05);
  border-color: #41322a;
}

html[data-theme="dark"] .ask-round:active {
  background: rgba(255,250,240,.1);
}

html[data-theme="dark"] .ask-confirm {
  color: #140f0d;
}

html[data-theme="dark"] .ask-card.danger .ask-confirm {
  color: #93b1e4;
}

html[data-theme="dark"] .add-charge-btn {
  border-color: #1a335f;
  background: rgba(224,170,91,.12);
  color: var(--warm);
}

@media (prefers-reduced-motion: reduce) {
  .ask-backdrop,
  .ask-card { transition: none; }
  .ask-card { opacity: 1; transform: none; }
}