:root {
  --ink: #332d27;
  --muted: #82776d;
  --panel: rgba(255, 255, 255, .96);
  --line: #eadfd3;
  --warm: #9a7656;
  --green: #dcecdf;
  --green2: #2f6948;
  --red: #f7e2dc;
  --red2: #944f45;
  --shadow: 0 18px 45px rgba(91, 69, 48, .10);
}

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

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

.bg {
  background:
    radial-gradient(circle at 95% 5%, rgba(203, 179, 151, .20), transparent 34%),
    radial-gradient(circle at 3% 35%, rgba(216, 229, 213, .30), transparent 32%),
    linear-gradient(180deg, #faf7f2 0%, #f5efe7 58%, #faf8f4 100%);
}

.bg::after {
  background: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 70%);
}

.panel,
.glass {
  border-color: rgba(178, 151, 123, .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: 172px 22px 26px;
  border-radius: 28px;
  background-image: linear-gradient(180deg, transparent 0, transparent 126px, rgba(255,255,255,.78) 152px, #fff 188px), url('/assets/majlis.webp');
  background-size: 100% 190px, 100% 158px;
  background-position: center top, center 46%;
  background-repeat: no-repeat;
}

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

.brand-mark,
.avatar,
.admin-logo,
.admin-loader-mark {
  background: linear-gradient(145deg, #f4e8d8, #dcc4a7);
  color: #594735;
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 9px 22px rgba(114, 84, 55, .13);
}

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

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

.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: #806044;
  color: #fff;
  box-shadow: 0 8px 20px rgba(107, 78, 52, .18);
}

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

.secondary {
  background: #f7f2eb;
  border-color: #e5d9cc;
  color: var(--ink);
}

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

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

.code-input:focus,
.req-form input:focus,
.extras input:focus,
.admin-input:focus {
  border-color: #b99777;
  box-shadow: 0 0 0 4px rgba(176, 142, 109, .12);
}

.message { color: #876441; }
.message.ok { color: #397052; }
.message.bad { color: #a74e42; }
.loader { border-color: #eadfd3; border-top-color: #907052; }

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

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

.topbar h1 {
  color: #302923;
}

.avatar {
  border: 1px solid rgba(151, 113, 79, .13);
}

.status-pill {
  color: #2f6948;
  background: #e5f1e7;
  border-color: #d2e6d5;
}

.status-pill.closed {
  color: #955044;
  background: #f8e8e3;
  border-color: #eed5cf;
}

.scene-card {
  position: relative;
  min-height: 178px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(126, 90, 58, .16);
  background: #d9c5ae;
  box-shadow: 0 18px 42px rgba(90, 63, 39, .16);
  isolation: isolate;
}

.scene-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 178px;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 52%;
}

.scene-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(25, 18, 13, .02) 22%, rgba(25, 18, 13, .62) 100%);
}

.scene-copy {
  position: absolute;
  right: 18px;
  left: 18px;
  bottom: 15px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.scene-copy span {
  display: inline-flex;
  padding: 5px 9px;
  margin-bottom: 5px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(39, 29, 21, .26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 900;
}

.scene-copy strong {
  display: block;
  font-size: 20px;
}

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

.hero-card.state-in {
  border-color: #c9dfcf;
  background: linear-gradient(145deg, #f4faf5, #fff 68%);
  box-shadow: 0 18px 45px rgba(72, 112, 82, .10);
}

.hero-card.state-out {
  border-color: #edd5cf;
  background: linear-gradient(145deg, #fff8f6, #fff 68%);
}

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

.count-badge {
  background: #f7f1e9;
  border-color: #eadccd;
}

.count-badge strong {
  color: #75583f;
}

.dinner-note {
  background: #fbf5ec;
  border-color: #eadcc9;
  color: #5e4a37;
}

.timing-row div {
  background: #faf7f2;
  border-color: #eee5da;
}

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

.rsvp.yes {
  color: #3e7655;
  border-color: #d3e5d7;
}

.rsvp.no {
  color: #9b564b;
  border-color: #efd9d3;
}

.rsvp.active.yes {
  background: #3d7655;
  border-color: #3d7655;
  color: #fff;
  box-shadow: 0 9px 20px rgba(61,118,85,.20);
}

.rsvp.active.no {
  background: #a86155;
  border-color: #a86155;
  color: #fff;
  box-shadow: 0 9px 20px rgba(168,97,85,.18);
}

.extras { border-top-color: #eee4d8; }
.undo-bar { background: #f1eadf; color: #55483d; }
.undo-bar button { background: #806044; color: #fff; }

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

.mini-card strong {
  color: #5b4736;
}

.private-money {
  border-color: #e5d6c7;
  background: linear-gradient(145deg, #fff, #fbf4eb);
}

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

.tool-btn { color: var(--ink); }
.tool-btn + .tool-btn { border-top-color: #eee5db; }
.tool-btn > span { background: #f4ede4; }
.attendee-preview { color: #665a50; }
.person-chip { background: #f7f2eb; border-color: #e8ddd1; }
.person-chip::before { background: #71a17d; }
.app-view footer { color: #948a80; }
.footer-logout { color: #81756a; }

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

.admin-loading {
  background-image: linear-gradient(180deg, transparent 0, transparent 126px, rgba(255,255,255,.78) 152px, #fff 188px), url('/assets/majlis.webp');
  background-size: 100% 190px, 100% 158px;
  background-position: center top, center 46%;
  background-repeat: no-repeat;
  padding: 166px 22px 25px;
}

.admin-head {
  min-height: 126px;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  border-color: rgba(92, 63, 38, .18);
  background: linear-gradient(180deg, rgba(30,20,13,.05), rgba(30,20,13,.64)), url('/assets/majlis.webp') center 49% / cover no-repeat;
  box-shadow: 0 18px 42px rgba(90,63,39,.15);
}

.admin-head .eyebrow,
.admin-head .admin-date {
  color: rgba(255,255,255,.82);
}

.admin-head h1 { color: #fff; }
.admin-logo { border: 1px solid rgba(255,255,255,.55); }
.live-chip { color: #fff; background: rgba(38,75,52,.50); border-color: rgba(255,255,255,.22); }
.icon-btn,
.logout-btn { color: #fff; background: rgba(35,25,18,.34); border-color: rgba(255,255,255,.28); backdrop-filter: blur(10px); }

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

.nav-tab { color: #7f746a; }
.nav-tab.active { background: #806044; color: #fff; box-shadow: 0 7px 16px rgba(107,78,52,.15); }

.stat,
.ledger-stat {
  background: linear-gradient(145deg, #fff, #faf6f1);
  border-color: #eadfd4;
}

.stat-accent {
  background: linear-gradient(145deg, #edf6ef, #fff);
  border-color: #d4e7d8;
}

.stat strong,
.ledger-stat strong { color: #554334; }
.admin-card { background: rgba(255,255,255,.96); }
.count-chip { background: #f5ede3; border-color: #e8d8c6; color: #795b42; }

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

.reg-status.in,
.payment-badge.paid { background: #e4f0e6; color: #397052; }
.reg-status.out,
.payment-badge.unpaid { background: #f7e6e1; color: #9a5247; }
.reg-status.pending { background: #efe9e2; color: #766b61; }
.payment-badge.partial { background: #f7efdf; color: #8a6a38; }
.small-btn { background: #f7f2ec; border-color: #e6dbcf; color: var(--ink); }
.small-btn.danger,
.danger-soft { color: #a15145 !important; }
.small-btn.ok,
.ok-soft { color: #397052 !important; }
.alert-card { background: #fff5e8; border-color: #edd8b8; color: #725438; }
.empty-inline { border-color: #ddd1c5; }
.mini-stats span,
.name-pills span { background: #f4eee7; color: #786d63; }
.ledger-stat.total { background: linear-gradient(135deg, #f2e5d4, #fff); }
.cal-day.has-dinner { background: #f8efe2; border-color: #e8d5bd; }
.person-price-editor { background: #fbf4ea; border-color: #e8d8c4; }
.person-price-editor label > span { color: #876446; }
.toast { background: #4f4034; color: #fff; box-shadow: 0 14px 35px rgba(74,54,37,.22); }

@media (max-width: 430px) {
  .shell { padding-inline: 10px; }
  .topbar h1 { font-size: 20px; }
  .scene-card,
  .scene-card img { min-height: 166px; }
  .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; }
}

@media (max-width: 360px) {
  .scene-card,
  .scene-card img { min-height: 150px; }
  .status-pill { padding-inline: 8px; font-size: 10px; }
  .rsvp { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  .scene-card { animation: sceneIn .45s ease both; }
  @keyframes sceneIn { from { opacity: 0; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: none; } }
}

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