:root {
  --ink: #2a2118;
  --muted: #74685c;
  --card: rgba(255, 253, 249, .94);
  --line: #eadfce;
  --accent: #2f9e78;
  --accent-ink: #14634a;
  --soft: #e7f6ef;
  --shadow: 0 18px 40px rgba(72, 46, 24, .08);
  --radius: 24px;
  --good: #1f8a62;
  --warn: #a16207;
  --bad: #b4233c;
  --info: #215f9a;
  --font: "Vazirmatn", Tahoma, sans-serif;
  --bg: #f6f3ea;
  --pattern: radial-gradient(circle at 12% 8%, rgba(143, 215, 184, .45), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(255, 211, 138, .45), transparent 26%);
}
body[data-theme="rose"] { --accent:#d4537c; --accent-ink:#8d2348; --soft:#ffe4ec; --bg:#fff5f7; --pattern: radial-gradient(circle at 10% 10%, rgba(255,180,196,.7), transparent 26%), radial-gradient(circle at 90% 20%, rgba(255,211,138,.4), transparent 24%); }
body[data-theme="sky"] { --accent:#2f74c0; --accent-ink:#184e86; --soft:#e5f1ff; --bg:#f4f8fd; --pattern: radial-gradient(circle at 12% 0%, rgba(158,201,245,.7), transparent 28%), radial-gradient(circle at 100% 18%, rgba(255,255,255,.8), transparent 22%); }
body[data-theme="sea"] { --accent:#128a9b; --accent-ink:#0c5561; --soft:#e5f7f8; --bg:#f3fbfb; --pattern: radial-gradient(circle at 0% 20%, rgba(120,214,214,.45), transparent 30%), radial-gradient(circle at 100% 0%, rgba(255,211,138,.35), transparent 24%); }
body[data-theme="space"] { --accent:#6d5bd0; --accent-ink:#3d2f86; --soft:#eeeaff; --bg:#f7f5ff; --pattern: radial-gradient(circle at 20% 10%, rgba(201,183,245,.7), transparent 18%), radial-gradient(circle at 80% 30%, rgba(255,211,138,.35), transparent 16%); }
body[data-theme="forest"] { --accent:#3e7a45; --accent-ink:#234828; --soft:#e8f3e6; --bg:#f4f7f1; --pattern: radial-gradient(circle at 8% 12%, rgba(143,184,120,.4), transparent 26%), radial-gradient(circle at 92% 8%, rgba(255,211,138,.35), transparent 20%); }
body[data-theme="garden"] { --accent:#2f9e78; --accent-ink:#14634a; --soft:#e7f6ef; --bg:#f6f3ea; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--pattern), var(--bg);
  min-height: 100vh;
}
a { color: var(--accent-ink); }
button, input, select, textarea { font-family: inherit; color: inherit; }
.app { min-height: 100vh; display: flex; }
.side {
  width: 268px;
  flex: none;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; margin-bottom: 18px; }
.brand strong { display: block; font-size: 22px; }
.brand small { color: var(--muted); }
.logo svg { width: 46px; height: 46px; display: block; }
.sidenav { display: grid; gap: 4px; }
.sidenav a {
  text-decoration: none;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidenav a.on, .sidenav a:hover { background: var(--card); box-shadow: var(--shadow); }
.nav-group { margin-bottom: 8px; }
.nav-group summary { cursor: pointer; font-weight: 800; padding: 8px 12px; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::before { content: "‹ "; color: var(--muted); }
.nav-group[open] summary::before { content: "⌄ "; }
.nav-group a { padding-inline-start: 22px; font-size: 14px; }
.crumb { margin: 0 0 10px; color: var(--muted); font-weight: 700; }
.sidenav em, .icon-btn em {
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  min-width: 18px;
  text-align: center;
  padding: 0 5px;
}
.main { flex: 1; min-width: 0; }
.top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px 22px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 80%, white);
  backdrop-filter: blur(10px);
}
.who, .top-actions, .row, .split, .stat-row, .chips, .date-row, .people, .hero, .kid-hero { display: flex; gap: 12px; align-items: center; }
.who { min-width: 0; }
.who strong, .who small { display: block; }
.who small, .muted { color: var(--muted); }
.panel-context {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 18px; padding: 8px 12px; border-radius: 14px;
  background: #eef7f2; color: var(--accent-ink); font-weight: 700;
}
.panel-context span { background: white; border-radius: 999px; padding: 4px 10px; }
.panel-context b { font-size: 15px; }
.panel-context em { margin-inline-start: auto; font-style: normal; color: var(--muted); }
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.content { padding: 8px 22px 96px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: var(--soft); color: var(--accent-ink); object-fit: cover; flex: none;
}
.avatar.lg { width: 92px; height: 92px; font-size: 32px; }
.tone-rose { background: #ffe4ec; color: #8d2348; }
.tone-sky { background: #e5f1ff; color: #184e86; }
.tone-sea { background: #e5f7f8; color: #0c5561; }
.tone-space { background: #eeeaff; color: #3d2f86; }
.tone-forest { background: #e8f3e6; color: #234828; }
.tone-garden { background: #e7f6ef; color: #14634a; }
.card, .panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.8);
}
.hero, .kid-hero {
  justify-content: space-between;
  padding: 22px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--soft), #fff);
  margin-bottom: 16px;
  align-items: stretch;
}
.hero h1, .kid-hero h1 { margin: 0 0 6px; font-size: 32px; }
.eyebrow { margin: 0 0 4px; color: var(--accent-ink); font-weight: 700; }
.mascot { font-size: 64px; align-self: center; }
.grid { display: grid; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-row { flex-wrap: wrap; }
.stat {
  background: var(--card); border-radius: 20px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 140px;
}
.stat b { display: block; font-size: 26px; }
.stat span { color: var(--muted); }
.btn, button.btn, a.btn {
  border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; background: var(--accent); color: white;
}
.btn.soft { background: var(--soft); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: #fde8ea; color: var(--bad); }
.btn.small { padding: 6px 10px; font-size: 13px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: white; color: var(--ink); position: relative; text-decoration: none; border: 1px solid var(--line);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn em { position: absolute; top: -4px; left: -4px; }
.field { display: grid; gap: 6px; font-weight: 700; margin-bottom: 12px; }
.field span, .hint { font-weight: 500; color: var(--muted); font-size: 13px; }
input[type="text"], input[type="password"], input[type="time"], input[type="number"], select, textarea {
  width: 100%; border: 1.5px solid var(--line); background: white; border-radius: 14px;
  padding: 11px 12px; font-size: 15px;
}
textarea { min-height: 90px; resize: vertical; }
.date-row select { width: auto; min-width: 88px; }
.flash { padding: 12px 14px; border-radius: 16px; margin-bottom: 14px; font-weight: 700; }
.flash-success { background: #e7f6ef; color: var(--good); }
.flash-error { background: #fde8ea; color: var(--bad); }
.flash-info { background: #e7f1fb; color: var(--info); }
.badge { display: inline-flex; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; background: var(--soft); color: var(--accent-ink); }
.badge.wait { background: #fff1d6; color: var(--warn); }
.badge.ok { background: #e5f6ee; color: var(--good); }
.badge.no { background: #fde8ea; color: var(--bad); }
.growth-tease { display: grid; gap: 2px; text-decoration: none; color: inherit; margin: 0 0 14px; background: linear-gradient(135deg, #fff, var(--soft)); }
.growth-tease span { color: var(--accent-ink); font-weight: 800; }
.growth-tease small { color: var(--muted); }
.resume-track { margin-top: 14px; }
.resume-levels { display: grid; gap: 14px; }
.resume-level-top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 6px; }
.resume-level-top span { color: var(--muted); font-weight: 700; font-size: 13px; }
.meter { height: 14px; background: #efe6d8; border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; background: #e39b2b; border-radius: inherit; }
.meter.done span { background: #1f8a62; }
.meter.idle span { background: transparent; }
.wish-row, .wish-demand { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.wish-demand.hot { background: #fff6e8; border-radius: 16px; padding: 12px; margin-top: 8px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 13px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dow { text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; }
.day {
  min-height: 78px; border-radius: 16px; background: white; padding: 6px; text-decoration: none;
  color: inherit; display: flex; flex-direction: column; gap: 4px; border: 1px solid transparent;
}
.day.on { outline: 2px solid var(--accent); }
.day.today { background: var(--soft); }
.day.out { visibility: hidden; }
.dots { display: flex; gap: 3px; flex-wrap: wrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dot.hw { background: #e39b2b; }
.dot.leave { background: #8d6cc2; }
.dot.event { background: #2f9e78; }
.dot.health { background: #3d7ec9; }
.dot.note { background: #d4537c; }
.dot.birth { background: #e0a106; }
.timeline { display: grid; gap: 8px; }
.slot {
  display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center;
  background: white; border-radius: 16px; padding: 8px;
}
.slot i { font-style: normal; color: var(--muted); font-weight: 700; }
.kid-slot { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: white; border-radius: 22px; padding: 16px 18px; font-size: 22px; font-weight: 800; }
.stickers { display: flex; gap: 8px; flex-wrap: wrap; }
.sticker {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: #fff4c8; font-size: 28px; box-shadow: var(--shadow);
}
.empty { padding: 28px 10px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); margin-bottom: 4px; }
.people { align-items: flex-start; }
.people .card, .stack { display: grid; gap: 8px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.shot { margin: 0; background: white; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.shot img { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--soft); }
.shot figcaption { padding: 10px 12px 14px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chart-box { height: 280px; margin: 8px 0 12px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.seg button.on { background: var(--accent); color: white; border-color: transparent; }
.chips button, .theme-pick label {
  border: 1px solid var(--line); background: white; border-radius: 999px; padding: 8px 12px; cursor: pointer;
}
.theme-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-pick input { position: absolute; opacity: 0; }
.theme-pick label:has(input:checked), .chips button.on { background: var(--accent); color: white; }
.switcher { position: relative; }
.switcher summary { cursor: pointer; background: white; border-radius: 999px; padding: 8px 12px; border: 1px solid var(--line); list-style: none; }
.switcher div { display: none; }
.switcher[open] div { position: absolute; left: 0; top: 46px; background: white; border-radius: 16px; box-shadow: var(--shadow); min-width: 180px; padding: 8px; display: grid; z-index: 40; }
.switcher a { text-decoration: none; padding: 8px; border-radius: 10px; color: inherit; display: grid; }
.switcher a small { color: var(--muted); font-weight: 600; }
.switcher a.on { background: var(--soft); }
.tabbar {
  display: none; position: fixed; bottom: 0; right: 0; left: 0; background: white;
  border-top: 1px solid var(--line); z-index: 5; padding: 6px;
}
.tabbar a, .tabbar button {
  flex: 1; text-align: center; text-decoration: none; color: var(--muted); background: none; border: 0; font-weight: 700; font-size: 12px;
}
.tabbar a.on { color: var(--accent-ink); }
.sheet { position: fixed; inset: 0; background: rgba(42, 33, 24, .35); display: none; z-index: 8; }
.sheet.open { display: grid; align-items: end; }
.sheet-card { background: #fffdf9; border-radius: 24px 24px 0 0; padding: 16px; max-height: 70vh; overflow: auto; }
.sheet-card header { display: flex; justify-content: space-between; align-items: center; }
.sheet-links { display: grid; gap: 6px; margin-top: 10px; }
.sheet-links a { text-decoration: none; background: var(--soft); color: var(--ink); padding: 12px; border-radius: 14px; }
.card-sheet {
  width: 320px; min-height: 420px; border: 2px dashed var(--line); border-radius: 28px; padding: 16px;
  background: white; display: grid; align-content: start; gap: 6px;
}
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.qr { width: 104px; height: 104px; }
.qr img { width: 96px; height: 96px; }
.resume { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.auth-body { display: grid; place-items: center; padding: 24px; }
.auth-shell { width: min(980px, 100%); display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: stretch; }
.login-hero, .login-card { border-radius: 32px; padding: 28px; }
.login-hero { background: linear-gradient(160deg, #fff, var(--soft)); box-shadow: var(--shadow); }
.login-card { background: white; box-shadow: var(--shadow); }
.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tabs a { text-decoration: none; padding: 8px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); }
.tabs a.on { background: var(--accent); color: white; }
.demo { margin-top: 14px; background: #fffaf1; border-radius: 16px; padding: 8px 12px; }
.demo ul { margin: 8px 0; padding-right: 18px; }
.warn-list { background: #fff1d6; border-radius: 16px; padding: 10px 12px; }
.adult-only {}
body.view-kid .adult-only { display: none !important; }
body.view-kid { font-size: 18px; }
body.view-kid h1 { font-size: 40px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.people-picks { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 14px; }
.slot-row input { width: 7rem; }
hr.soft { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.plus { width: 44px; height: 44px; border-radius: 14px; font-size: 26px; line-height: 1; padding: 0; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pick { display: flex; flex-direction: column; gap: 8px; background: white; border-radius: 20px; padding: 14px; text-decoration: none; color: inherit; }
.board { display: flex; gap: 12px; overflow: auto; align-items: flex-start; padding-bottom: 8px; }
.column { min-width: 220px; background: var(--soft); border-radius: 18px; padding: 10px; min-height: 160px; }
.kid-card { display: flex; gap: 8px; align-items: center; background: white; border-radius: 14px; padding: 8px; margin-top: 8px; cursor: grab; }
.tick-wrap { max-height: 70vh; overflow: auto; }
.tick-table th { position: sticky; top: 0; z-index: 2; background: #fff8ee; text-align: center; }
.tick-table td { text-align: center; }
.tick-table td:first-child, .tick-table th:first-child { position: sticky; right: 0; z-index: 1; background: #fff; text-align: right; }
.tick-table th:first-child { z-index: 3; }
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.friend-card { text-align: center; background: white; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.people { display: flex; gap: 10px; align-items: center; }
.plus { width: 44px; height: 44px; border-radius: 14px; font-size: 26px; line-height: 1; padding: 0; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pick { display: flex; flex-direction: column; gap: 8px; background: white; border-radius: 20px; padding: 14px; text-decoration: none; color: inherit; }
.board { display: flex; gap: 12px; overflow: auto; align-items: flex-start; padding-bottom: 8px; }
.column { min-width: 220px; background: var(--soft); border-radius: 18px; padding: 10px; min-height: 160px; }
.kid-card { display: flex; gap: 8px; align-items: center; background: white; border-radius: 14px; padding: 8px; margin-top: 8px; cursor: grab; }
.tick-wrap { max-height: 70vh; overflow: auto; }
.tick-table th { position: sticky; top: 0; z-index: 2; background: #fff8ee; text-align: center; }
.tick-table td { text-align: center; }
.tick-table td:first-child, .tick-table th:first-child { position: sticky; right: 0; z-index: 1; background: #fff; text-align: right; }
.tick-table th:first-child { z-index: 3; }
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.friend-card { text-align: center; background: white; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.people { display: flex; gap: 10px; align-items: center; }
.school-form h2 { margin: 2px 0 12px; font-size: 20px; }
.school-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.school-grid .span-2 { grid-column: 1 / -1; }
.school-form .field { margin-bottom: 8px; }
.school-form input[type="file"] {
  width: 100%; border: 1.5px solid var(--line); background: white; border-radius: 14px; padding: 8px; font-weight: 500;
}
.school-map {
  height: 240px; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--line); z-index: 0; background: #e7f1ea; cursor: crosshair;
}
.school-map .leaflet-control-attribution { font-size: 10px; }
.photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.photo-preview img, .school-thumbs img, .photo-keep img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--soft);
}
.school-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.school-thumb { position: relative; }
.school-thumb .photo-del {
  position: absolute; inset-inline-end: 2px; top: 2px; padding: 2px 6px; font-size: 11px; background: #fffdf9;
}
.photo-keep-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.photo-keep { display: grid; justify-items: start; gap: 4px; }
.photo-keep .check { font-size: 12px; }
.school-sign-del {
  position: absolute; z-index: 2; inset-inline-end: 12px; top: 12px; margin: 0;
}
.school-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.school-card-body { flex: 0.8 1 38%; min-width: 0; padding: 18px; }
.school-sign-slot {
  flex: 1.35 1 62%;
  max-width: none;
  position: relative;
  min-height: 260px;
  background: #f4efe6;
}
.school-card .school-sign {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.school-sign-form {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.school-sign-pick {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-ink);
}
.school-sign-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.school-filters { display: grid; grid-template-columns: 1.3fr repeat(4, .75fr) auto; gap: 10px; align-items: end; margin-top: 12px; }
.school-filters .btn { margin-bottom: 8px; }
body.catalog-page { align-items: start; }
body.catalog-page .auth-shell { display: block; width: min(1040px, 100%); }
.catalog { background: white; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow); }
.catalog-cover { display: grid; grid-template-columns: .7fr 1.3fr; min-height: 360px; align-items: stretch; }
.catalog-copy { padding: 32px 28px 24px; display: grid; align-content: start; }
.catalog-visual { display: grid; grid-template-rows: auto 1fr; min-height: 360px; }
.catalog-title { padding: 22px 24px 12px; text-align: center; }
.catalog-title h1 { margin: 0 auto; max-width: 100%; font-size: 36px; line-height: 1.35; }
.catalog-copy h1 { margin: 0 0 16px; font-size: 34px; line-height: 1.35; }
.catalog-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.catalog-facts li { display: grid; gap: 2px; background: var(--soft); border-radius: 16px; padding: 10px 14px; }
.catalog-facts-pair { grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.catalog-facts-pair div { display: grid; gap: 2px; min-width: 0; }
.catalog-facts span { color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.catalog-sign {
  margin: 0;
  position: relative;
  min-height: 280px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 212, 138, .35), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(143, 215, 184, .28), transparent 46%),
    linear-gradient(155deg, #f8f3ea 0%, #efe7da 55%, #e7ddd0 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.catalog-cover .catalog-sign { min-height: 320px; }
.catalog-signboard {
  padding: 8px 28px 28px;
  background: linear-gradient(180deg, #fff 0%, #fbf8f2 100%);
}
.catalog-signboard .catalog-sign {
  min-height: 320px;
  border-radius: 24px;
  border: 1px solid rgba(42, 33, 24, .08);
  box-shadow:
    0 10px 28px rgba(42, 33, 24, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.catalog-sign-label {
  position: absolute;
  z-index: 2;
  top: 14px;
  inset-inline-start: 14px;
  margin: 0;
  background: rgba(255, 253, 249, .94);
  border: 1px solid rgba(42, 33, 24, .08);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-ink);
  box-shadow: 0 4px 14px rgba(42, 33, 24, .08);
}
.catalog-sign img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 48px 28px 24px;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 18px rgba(42, 33, 24, .12));
}
.catalog-sign-empty {
  min-height: 280px;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 48px 24px 24px;
  text-align: center;
  color: var(--accent-ink);
  font-weight: 800;
}
.catalog-sign-empty svg { width: 72px; height: 72px; }
.catalog-map-slot { margin: 0; position: relative; min-height: 360px; background: #e7eef2; z-index: 0; }
.catalog-map-slot #catalog-map { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; z-index: 0; }
.catalog-map-note { position: absolute; z-index: 2; top: 12px; inset-inline-start: 12px; margin: 0; background: #fffdf9; border-radius: 999px; padding: 6px 12px; }
.catalog-map-note a { font-weight: 800; }
.catalog-entry { display: flex; gap: 16px; width: min(1040px, 100%); margin: 0 auto 14px; }
.catalog-entry .btn {
  flex: 1; min-height: 52px; font-size: 16px;
  background: #fffdf9; color: var(--ink); border: 1.5px solid var(--line);
}
.catalog-entry .btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.catalog-entry .off { opacity: .55; pointer-events: none; background: var(--soft); color: var(--muted); border-color: transparent; }
.directory { width: min(1040px, 100%); margin: 0 auto; }
.directory-hero { margin-bottom: 14px; }
.directory-hero h1 { margin: 0 0 8px; font-size: 34px; }
.directory-filters { margin-bottom: 14px; }
.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.directory-card { text-decoration: none; color: inherit; background: white; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); display: grid; }
.directory-card img, .directory-card-empty { width: 100%; height: 150px; object-fit: cover; background: #f4efe6; }
.directory-card-empty { display: grid; place-items: center; }
.directory-card-empty svg { width: 56px; height: 56px; }
.directory-card div { padding: 12px 14px 16px; display: grid; gap: 4px; }
.directory-card strong { font-size: 17px; }
.directory-card span { color: var(--muted); font-size: 13px; font-weight: 600; }
.directory-links { margin-top: 18px; color: var(--muted); }
.directory-map-wrap { margin: 14px 0; padding: 0; overflow: hidden; position: relative; }
.directory-map { height: 340px; width: 100%; z-index: 0; background: #e7eef2; }
.directory-map-empty { position: absolute; inset: auto 12px 12px; margin: 0; background: #fffdf9; border-radius: 999px; padding: 6px 12px; z-index: 2; font-size: 13px; }
.modal-card.narrow { width: min(440px, 100%); margin-top: 10vh; }
.catalog-gallery { display: flex; gap: 8px; overflow: auto; padding: 16px 28px 0; }
.catalog-gallery img { width: 132px; height: 96px; object-fit: cover; border-radius: 16px; flex: none; }
.catalog-gates { padding: 22px 28px 28px; }
.gate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gate { text-decoration: none; color: inherit; background: var(--soft); border-radius: 18px; padding: 14px; display: grid; gap: 4px; border: 2px solid transparent; min-height: 84px; }
.gate b { font-size: 18px; }
.gate span { color: var(--muted); font-size: 13px; font-weight: 600; }
.gate.on { border-color: var(--accent); background: white; }
.gate.off { opacity: .62; }
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(42, 33, 24, .45); display: grid; align-items: start; justify-content: center; padding: 18px; overflow: auto; }
.modal[hidden] { display: none !important; }
.modal-card { width: min(920px, 100%); background: #fffdf9; border-radius: 22px; padding: 16px 16px 20px; box-shadow: 0 18px 50px rgba(42, 33, 24, .22); margin: 12px 0 28px; }
a.plus { display: inline-grid; place-items: center; text-decoration: none; }
.school-off-panels { display: grid; gap: 8px; background: var(--soft); border-radius: 14px; padding: 12px; }
.school-off-panels[hidden] { display: none !important; }
.school-off-panels p { margin: 0 0 4px; font-weight: 700; }
.gate-parent { background: #fff4e2; }
.catalog-form { margin-top: 16px; max-width: 420px; }
.catalog-back { display: inline-block; margin-top: 10px; font-weight: 700; }
@media (max-width: 720px) {
  .school-grid, .school-filters { grid-template-columns: 1fr; }
  .school-card { flex-direction: column; }
  .catalog-cover { grid-template-columns: 1fr; }
  .catalog-visual { order: -1; min-height: 0; }
  .catalog-map-slot, .catalog-cover .catalog-sign { min-height: 240px; }
  .catalog-title { padding: 18px 18px 8px; }
  .catalog-title h1 { font-size: 28px; }
  .catalog-entry { gap: 12px; }
  .catalog-signboard { padding: 8px 16px 20px; }
  .catalog-signboard .catalog-sign { min-height: 240px; border-radius: 18px; }
  .catalog-sign img { padding: 42px 16px 16px; }
  .catalog-entry { flex-direction: column; }
  .panel-context { margin-inline: 14px; }
  .gate-grid { grid-template-columns: 1fr 1fr; }
  .school-sign-slot {
    flex: none;
    order: 2;
    width: 100%;
    max-width: none;
    min-height: 210px;
  }
}
@media (max-width: 980px) {
  .side { display: none; }
  .app { display: block; }
  .tabbar { display: flex; }
  .grid-2, .grid-3, .auth-shell, .resume { grid-template-columns: 1fr; }
  .content { padding-inline: 14px; }
  .top { padding-inline: 14px; }
}
@media print {
  .side, .top, .tabbar, .no-print, .sheet { display: none !important; }
  .app { display: block; }
  body { background: white; }
  .card-sheet { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
  .content { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}