/* ==========================================================
   app.css — member mobile app mock: presenter stage,
   phone frame and all in-app screen styles.
   ========================================================== */

/* ---------- Presenter stage ---------- */
.stage {
  min-height: 100vh; display: grid; grid-template-columns: 300px 1fr 340px; gap: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #26305C 0%, var(--navy-900) 60%);
}
.rail { padding: 28px 22px; color: #C9CCE0; overflow-y: auto; max-height: 100vh; position: sticky; top: 0; }
.rail-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.rail-brand img { height: 34px; }
.rail-brand a { font-size: 12px; color: var(--gold-500); font-weight: 700; }
.rail h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7E84A6; margin: 20px 0 10px; }
.rail-link {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 10px; color: #C9CCE0; font-weight: 600; font-size: 13.5px;
}
.rail-link:hover { background: rgba(255, 255, 255, .06); color: var(--white); }
.rail-link.on { background: rgba(234, 196, 51, .14); color: var(--gold-500); }
.rail-link .num { font-size: 11px; opacity: .6; width: 18px; }

.phone-wrap { display: grid; place-items: center; padding: 28px 0; }
.phone {
  width: 390px; height: 820px; border-radius: 54px; padding: 12px; background: #0A0C18;
  box-shadow: var(--shadow-lg), 0 0 0 2px #2A2F4A inset, 0 0 0 1px #3A4064; position: relative;
}
.screen {
  width: 100%; height: 100%; border-radius: 43px; overflow: hidden; background: var(--paper);
  position: relative; display: flex; flex-direction: column;
}
.notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 110px; height: 30px;
  background: #0A0C18; border-radius: 20px; z-index: 30; }
.statusbar { height: 46px; flex: none; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 28px 6px; font-size: 13px; font-weight: 700; z-index: 20; }
.statusbar.dark { background: var(--navy-800); color: var(--white); }

.notes { padding: 28px 26px; color: #C9CCE0; max-height: 100vh; overflow-y: auto; position: sticky; top: 0; }
.notes .tagline { margin-bottom: 18px; }
.notes h3 { font-family: var(--font-display); color: var(--white); font-size: 24px; font-weight: 600; line-height: 1.2; margin: 12px 0 10px; }
.notes p { font-size: 13.5px; line-height: 1.6; }
.notes ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.notes li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.notes li svg.i { color: var(--gold-500); margin-top: 2px; width: 16px; height: 16px; }
.notes .src { margin-top: 22px; font-size: 11.5px; color: #7E84A6; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.lang-switch { display: inline-flex; background: rgba(255,255,255,.08); border-radius: 10px; padding: 3px; }
.lang-switch button { padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: #C9CCE0; }
.lang-switch button.on { background: var(--gold-500); color: var(--navy-900); }
.login-sheet .lang-switch button:not(.on), .card .lang-switch button:not(.on) { color: var(--ink-500); }

/* ---------- In-app scaffolding ---------- */
.view { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }
.pad { padding: 16px 18px; }
.appbar {
  background: var(--navy-800); color: var(--white); padding: 6px 18px 18px;
  display: flex; align-items: center; gap: 12px;
}
.appbar h2 { font-size: 18px; font-weight: 800; flex: 1; }
.appbar .icon-btn { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: var(--white); position: relative; }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-500); border: 2px solid var(--navy-800); }

.tabbar {
  flex: none; height: 78px; background: var(--white); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px 18px; position: relative;
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: var(--ink-500); }
.tab.on { color: var(--blue-700); }
.tab svg.i { width: 22px; height: 22px; }
.tab-id .fab { width: 52px; height: 52px; border-radius: 17px; margin-top: -26px; display: grid; place-items: center;
  background: var(--gold-500); color: var(--navy-900); box-shadow: 0 8px 18px rgba(234,196,51,.45); }
.tab-id .fab svg.i { width: 24px; height: 24px; }

.section-h { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.section-h h3 { font-size: 15px; font-weight: 800; }
.section-h button { font-size: 12.5px; font-weight: 700; color: var(--blue-700); }

.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.card-pad { padding: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.muted { color: var(--ink-500); font-size: 12.5px; }
.tiny { font-size: 11.5px; color: var(--ink-500); }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; }
.list-item + .list-item { border-top: 1px solid var(--line); }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { color: var(--ink-300); }
.scroll-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.scroll-x::-webkit-scrollbar { display: none; }

/* ---------- Login ---------- */
.login { flex: 1; display: flex; flex-direction: column; background: var(--navy-800); color: var(--white); position: relative; overflow: hidden; }
.login-art { position: absolute; inset: 0; opacity: .18; pointer-events: none; }
.login-top { padding: 40px 28px 0; position: relative; }
.login-top img { height: 58px; }
.login-top h1 { font-family: var(--font-display); font-size: 26px; line-height: 1.18; font-weight: 600; margin-top: 34px; }
.login-top p { color: #AEB3D0; margin-top: 10px; font-size: 13.5px; }
.login-sheet { margin-top: auto; background: var(--white); color: var(--ink-900); border-radius: 28px 28px 0 0;
  padding: 24px 22px 28px; position: relative; display: grid; gap: 14px; }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.login-sheet > * { min-width: 0; }
.phone-in .input { min-width: 0; }
.otp input { min-width: 0; width: 100%; height: 46px; text-align: center; font-weight: 800; font-size: 18px; border: 1px solid var(--line); border-radius: 10px; }
.phone-in { display: flex; gap: 8px; }
.phone-in .cc { width: 64px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; }

/* ---------- Home ---------- */
.hero { background: var(--navy-800); color: var(--white); padding: 4px 18px 70px; }
.hero .hello { font-size: 13px; color: #AEB3D0; }
.hero .name { font-size: 21px; font-weight: 800; }
.hero .meta { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.hero .meta .pill { background: rgba(255,255,255,.1); color: #E4E7F5; }
.hero-top { display: flex; align-items: center; gap: 12px; }
.hero-top .grow { flex: 1; }
.lift { margin-top: -54px; }
.mini-id { display: flex; gap: 14px; align-items: center; padding: 14px; }
.mini-id .ring { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gold-500) calc(var(--p) * 1%), #EEF0F5 0); flex: none; }
.mini-id .ring span { width: 44px; height: 44px; border-radius: 50%; background: var(--white); display: grid;
  place-items: center; font-weight: 800; font-size: 13px; line-height: 1; text-align: center; }
.mini-id .ring small { display: block; font-size: 8.5px; color: var(--ink-500); font-weight: 700; }
.nudge { display: flex; gap: 10px; align-items: center; background: var(--warn-50); color: #7A5410;
  padding: 10px 12px; border-radius: 0 0 var(--radius) var(--radius); font-size: 12.5px; font-weight: 600; }
.nudge button { margin-left: auto; font-weight: 800; color: var(--navy-800); text-decoration: underline; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick button { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--ink-700); text-align: center; line-height: 1.2; }
.quick .qi { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--white);
  border: 1px solid var(--line); color: var(--blue-700); box-shadow: var(--shadow-sm); }
.quick .qi svg.i { width: 22px; height: 22px; }
.meet-card { padding: 14px; display: flex; gap: 14px; }
.date-tile { width: 52px; flex: none; border-radius: 12px; background: var(--blue-50); color: var(--blue-700);
  text-align: center; padding: 8px 0; line-height: 1.1; }
.date-tile b { display: block; font-size: 20px; font-weight: 800; }
.date-tile span { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-row > div { padding: 12px; text-align: center; }
.stat-row > div + div { border-left: 1px solid var(--line); }
.stat-row b { display: block; font-size: 18px; font-weight: 800; color: var(--navy-800); }

/* ---------- Directory ---------- */
.search { display: flex; align-items: center; gap: 8px; height: 44px; background: var(--white); border-radius: 12px;
  padding: 0 12px; color: var(--ink-500); }
.search input { border: 0; outline: none; flex: 1; background: none; font-size: 13.5px; color: var(--ink-900); }
.appbar-search { background: var(--navy-800); padding: 0 18px 16px; }
.member-row .sub { font-size: 12px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-row .tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.member-row .tags .pill { font-size: 10.5px; padding: 2px 7px; }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-500); }

/* ---------- Member detail ---------- */
.detail-head { background: var(--navy-800); color: var(--white); padding: 6px 18px 22px; text-align: center; }
.detail-head .avatar { margin: 6px auto 10px; border: 3px solid rgba(255,255,255,.2); }
.detail-head h2 { font-size: 19px; font-weight: 800; }
.detail-head p { color: #AEB3D0; font-size: 13px; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actions button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 0; border-radius: 12px;
  background: var(--white); border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--blue-700); }
.kv { display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 13px; }
.kv > div + div { border-top: 1px solid var(--line); }
.kv span:first-child { color: var(--ink-500); }
.kv span:last-child { font-weight: 700; text-align: right; }
.locked { color: var(--ink-300) !important; display: inline-flex; align-items: center; gap: 4px; font-weight: 600 !important; }
.locked svg.i { width: 13px; height: 13px; }

/* ---------- Meetings ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.1); border-radius: 11px; padding: 3px; }
.seg button { height: 32px; border-radius: 9px; font-weight: 700; font-size: 13px; color: #C9CCE0; }
.seg button.on { background: var(--white); color: var(--navy-800); }
.meet-full { padding: 14px; display: grid; gap: 10px; }
.meet-full .top { display: flex; gap: 12px; }
.meet-full .info { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-700); }
.meet-full .info span { display: flex; align-items: center; gap: 6px; }
.meet-full .info svg.i { width: 14px; height: 14px; color: var(--ink-500); }
.meter { height: 6px; border-radius: 999px; background: #EEF0F5; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--blue-700); border-radius: 999px; }
.qr-box { display: grid; place-items: center; padding: 18px; gap: 8px; }
.qr { width: 150px; height: 150px; display: grid; grid-template-columns: repeat(21, 1fr); gap: 0; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.qr i { display: block; aspect-ratio: 1; }
.qr i.b { background: var(--navy-900); }
.agenda { list-style: none; display: grid; gap: 0; }
.agenda li { display: flex; gap: 12px; padding: 10px 14px; font-size: 13px; }
.agenda li + li { border-top: 1px solid var(--line); }
.agenda li b { color: var(--blue-700); width: 16px; }

/* ---------- Updates ---------- */
.post { padding: 14px; display: grid; gap: 8px; }
.post .from { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-700); }
.post .from .grow { flex: 1; }
.post h4 { font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.post p { font-size: 13px; color: var(--ink-700); }
.post.pinned { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }

/* ---------- Digital ID ---------- */
.id-card {
  border-radius: 20px; color: var(--white); padding: 18px; position: relative; overflow: hidden;
  background: linear-gradient(145deg, #003A96 0%, #1C2241 55%, #0F1430 100%); box-shadow: var(--shadow);
}
.id-card::before { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  border: 36px solid rgba(234,196,51,.12); right: -110px; top: -120px; }
.id-card .top { display: flex; justify-content: space-between; align-items: center; position: relative; }
.id-card .top img { height: 30px; }
.id-card .who { display: flex; gap: 12px; align-items: center; margin-top: 18px; position: relative; }
.id-card .who .avatar { border: 2px solid var(--gold-500); }
.id-card .nm { font-size: 17px; font-weight: 800; }
.id-card .co { font-size: 12.5px; color: #C9CCE0; }
.id-card .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 16px; position: relative; }
.id-card .grid small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #9097BD; font-weight: 700; }
.id-card .grid b { font-size: 13px; }
.id-card .bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; position: relative; }
.id-card .qr { width: 76px; height: 76px; padding: 5px; border: 0; border-radius: 8px; }
.id-card .gold-line { height: 3px; background: var(--gold-500); border-radius: 3px; width: 44px; margin-bottom: 6px; }
.timeline { list-style: none; display: grid; gap: 0; padding: 6px 14px; }
.timeline li { display: flex; gap: 12px; position: relative; padding: 9px 0; }
.timeline li::before { content: ''; position: absolute; left: 7px; top: 26px; bottom: -8px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--line); background: var(--white); flex: none; margin-top: 2px; }
.timeline li.done .dot { border-color: var(--ok); background: var(--ok); }
.timeline li.now .dot { border-color: var(--gold-500); background: var(--gold-50); }
.timeline b { font-size: 13px; display: block; }

/* ---------- Knowledge ---------- */
.course { padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.course .thumb { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(140deg, var(--blue-700), var(--navy-800));
  display: grid; place-items: center; color: var(--gold-500); flex: none; }
.scheme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scheme-grid .card { padding: 12px; }
.scheme-grid b { color: var(--blue-700); font-size: 14px; }
.council-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Profile ---------- */
.pref-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; font-size: 13px; }
.pref-row + .pref-row { border-top: 1px solid var(--line); }

/* ---------- Circle ---------- */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #AEB3D0; flex-wrap: wrap; }
.crumbs b { color: var(--gold-500); }
.circle-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 14px; }
.circle-grid div { display: grid; justify-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--ink-700); text-align: center; }

/* ---------- Renew ---------- */
.pay-opt { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); text-align: left; width: 100%; }
.pay-opt.on { border-color: var(--blue-700); background: var(--blue-50); }
.pay-opt .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-300); flex: none; }
.pay-opt.on .radio { border: 5px solid var(--blue-700); }

@media (max-width: 1180px) {
  .stage { grid-template-columns: 240px 1fr; }
  .notes { display: none; }
}